外呼记录搜索条件批次新增明细

src/views/components/SearchForm.vue

@@ -1,70 +1,27 @@
 <template>
-  <Form
-    ref="form"
-    :label-width="labelWidth"
-    :size="size"
-    style="display: flex"
-    class="item-search-form"
-  >
-    <div
-      id="searchFilter"
-      ref="searchFilter"
-      :gutter="10"
-      style="display: flex; flex-wrap: wrap"
-      :style="{ width: widths + '%' }"
-    >
+  <Form ref="form" :label-width="labelWidth" :size="size" style="display: flex" class="item-search-form">
+    <div id="searchFilter" ref="searchFilter" :gutter="10" style="display: flex; flex-wrap: wrap"
+      :style="{ width: widths + '%' }">
       <slot></slot>
     </div>
-    <div
-      style="width: 20%; text-align: right; padding-right: 18px"
-      :style="{
-        width:
-          this.$router.currentRoute.path == '/patient/Patientmanagement'
-            ? '27%'
-            : '20%',
-      }"
-    >
+    <div style="width: 20%; text-align: right; padding-right: 18px" :style="{
+      width: this.$router.currentRoute.path == '/patient/Patientmanagement' ? '27%' : '20%',
+    }">
       <Button type="primary" @click="handleQuery" size="mini">搜索</Button>
       <Button @click="handleReset" size="mini">重置</Button>
-      <el-button
-        type="warning"
-        plain
-        icon="el-icon-upload2"
-        size="mini"
-        @click="handleUpload"
-        v-if="patientUploadButtonVisible == 'true'"
-        >导入</el-button
-      >
-      <el-button
-        type="primary"
-        plain
-        size="mini"
-        @click="handleback"
-        v-if="this.$router.currentRoute.path == '/patient/ImportDetails'"
-        >返回</el-button
-      >
-      <el-button
-        type="warning"
-        plain
-        icon="el-icon-download"
-        size="mini"
-        @click="handleExport"
-        v-if="this.$router.currentRoute.path == '/task/Satisfactionsurvey'"
-        >导出</el-button
-      >
-      <Button
-        v-show="collapsiable"
-        type="text"
-        @click="shiftCollapsiable"
-        size="mini"
-      >
+      <el-button type="warning" plain icon="el-icon-upload2" size="mini" @click="handleUpload"
+        v-if="patientUploadButtonVisible == 'true'">导入</el-button>
+      <el-button type="primary" plain size="mini" @click="handleback"
+        v-if="this.$router.currentRoute.path == '/patient/ImportDetails'">返回</el-button>
+      <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+        v-if="this.$router.currentRoute.path == '/task/Satisfactionsurvey'">导出</el-button>
+      <Button v-show="collapsiable" type="text" @click="shiftCollapsiable" size="mini">
         <span>
           {{ fold ? "收起" : "展开" }}
           <i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
         </span>
       </Button>
     </div>
-
     <!-- 导入添加-->
     <el-dialog title="导入" :visible.sync="open" width="600px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="110px">
@@ -73,27 +30,13 @@
             <template slot="label">
               {{ item.deptAlias }}
             </template>
-            <el-select
-              v-model="item.departmentName"
-              placeholder="请选择科室"
-              style="width: 208px"
-              @change="changeway($event, index)"
-            >
-              <el-option
-                v-for="item in form.departments"
-                :key="item.id"
-                :label="item.departmentName"
-                :value="item.departmentName"
-              >
+            <el-select v-model="item.departmentName" placeholder="请选择科室" style="width: 208px"
+              @change="changeway($event, index)">
+              <el-option v-for="item in form.departments" :key="item.id" :label="item.departmentName"
+                :value="item.departmentName">
               </el-option>
             </el-select>
-            <el-button
-              type="primary"
-              plain
-              style="margin-left: 8px"
-              @click="additem(item, index)"
-              >添加</el-button
-            >
+            <el-button type="primary" plain style="margin-left: 8px" @click="additem(item, index)">添加</el-button>
           </el-form-item>
         </div>
       </el-form>
@@ -103,45 +46,26 @@
       </div>
     </el-dialog>
     <!-- //导入 -->
-    <el-dialog
-      title="导入"
-      :visible.sync="uploadopen"
-      width="400px"
-      append-to-body
-    >
-      <el-upload
-        drag
-        class="upload-demo"
-        ref="upload"
-        :action="action.url"
-        :headers="action.headers"
-        :on-preview="handlePreview"
-        :on-remove="handleRemove"
-        :file-list="fileList"
-        :auto-upload="false"
-        :on-success="handleAvatarSuccess"
-        :data="action.data"
-        :on-exceed="exceedFile"
-        :limit="1"
-      >
+    <el-dialog title="导入" :visible.sync="uploadopen" width="400px" append-to-body>
+      <el-form :model="action.data" ref="queryForm" size="small" :inline="true" label-width="110px">
+        <el-form-item label="批次名称" prop="importName">
+          <el-input v-model="action.data.importName" placeholder="请输入批次名称" />
+        </el-form-item>
+      </el-form>
+      <el-upload drag class="upload-demo" ref="upload" :action="action.url" :headers="action.headers"
+        :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
+        :on-success="handleAvatarSuccess" :data="action.data" :on-exceed="exceedFile" :limit="1">
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip" style="line-height: 25px">
           <div>
-            1.
-            <span
-              style="color: #1890ff; cursor: pointer"
-              @click="importTemplate"
-              >下载导入模板</span
-            >
+            1.<span style="color: #1890ff; cursor: pointer" @click="importTemplate">下载导入模板</span>
           </div>
           <div>2.最大支持2MB的xls/xlsx文件</div>
           <div>3.一次导入患者数量不能超过5000</div>
           <div>4.同一手机号每月可最多拔打{{ countsum }}次</div>
-
-          <el-checkbox v-model="isDistinct" style="font-size: 12px"
-            >自动去除当日重复记录</el-checkbox
-          >
+          <el-checkbox v-model="action.data.isDistinct" :true-label="1" :false-label="0"
+            style="font-size: 12px">自动去除当日重复记录</el-checkbox>
         </div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
@@ -150,19 +74,8 @@
       </div>
     </el-dialog>
     <!-- 添加或修改科室信息对话框 -->
-    <el-dialog
-      title="添加"
-      :visible.sync="openadd"
-      width="1000px"
-      append-to-body
-    >
-      <el-form
-        ref="formadd"
-        :model="formadd"
-        :rules="rulesadd"
-        label-width="120px"
-        :inline="true"
-      >
+    <el-dialog title="添加" :visible.sync="openadd" width="1000px" append-to-body>
+      <el-form ref="formadd" :model="formadd" :rules="rulesadd" label-width="120px" :inline="true">
         <!-- <el-form-item label="上级科室id" prop="parentDepartmentId">
           <el-input
             v-model="form.parentDepartmentId"
@@ -181,73 +94,32 @@
         <div class="nameinformation">基本信息</div>
         <div class="content">
           <el-form-item label="科室名称" prop="departmentName">
-            <el-input
-              maxlength="100"
-              v-model="formadd.departmentName"
-              placeholder="请输入科室名称"
-            />
+            <el-input maxlength="100" v-model="formadd.departmentName" placeholder="请输入科室名称" />
           </el-form-item>
           <el-form-item label="科室代码" prop="departmentCode">
-            <el-input
-              maxlength="30"
-              onKeyUp="value=value.replace(/[\W]/g,'')"
-              v-model="formadd.departmentCode"
-              placeholder="请输入科室代码"
-            />
+            <el-input maxlength="30" onKeyUp="value=value.replace(/[\W]/g,'')" v-model="formadd.departmentCode"
+              placeholder="请输入科室代码" />
           </el-form-item>
           <el-form-item label="所属机构" prop="hospitalAgencyName">
-            <el-cascader
-              class="custom-cascader"
-              clearable
-              :props="{ checkStrictly: true }"
-              :options="treeOptions"
-              @change="change"
-              style="width: 205px; color: black"
-              v-model="formadd.hospitalAgencyIdtwo"
-              :show-all-levels="false"
-              :placeholder="
-                formadd.hospitalAgencyName ? formadd.hospitalAgencyName : ''
-              "
-              ref="cascader"
-              :key="isResouceShow"
-            ></el-cascader>
+            <el-cascader class="custom-cascader" clearable :props="{ checkStrictly: true }" :options="treeOptions"
+              @change="change" style="width: 205px; color: black" v-model="formadd.hospitalAgencyIdtwo"
+              :show-all-levels="false" :placeholder="formadd.hospitalAgencyName ? formadd.hospitalAgencyName : ''
+                " ref="cascader" :key="isResouceShow"></el-cascader>
           </el-form-item>
           <el-form-item label="节点类型" prop="nodeType">
-            <el-select
-              v-model="formadd.nodeType"
-              placeholder="请选择"
-              style="width: 205px"
-              clearable
-            >
-              <el-option
-                v-for="item in nodeTypeoptions"
-                :key="item.dictValue"
-                :label="item.dictLabel"
-                :value="item.dictValue"
-              >
+            <el-select v-model="formadd.nodeType" placeholder="请选择" style="width: 205px" clearable>
+              <el-option v-for="item in nodeTypeoptions" :key="item.dictValue" :label="item.dictLabel"
+                :value="item.dictValue">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="科室简称" prop="departmentAbbreviation">
-            <el-input
-              maxlength="100"
-              v-model="formadd.departmentAbbreviation"
-              placeholder="请输入科室简称"
-            />
+            <el-input maxlength="100" v-model="formadd.departmentAbbreviation" placeholder="请输入科室简称" />
           </el-form-item>
           <el-form-item label="科室类型" prop="departmentType">
-            <el-select
-              v-model="formadd.departmentType"
-              placeholder="请选择"
-              style="width: 205px"
-              clearable=""
-            >
-              <el-option
-                v-for="item in departmentoptions"
-                :key="item.dictValue"
-                :label="item.dictLabel"
-                :value="item.dictValue"
-              >
+            <el-select v-model="formadd.departmentType" placeholder="请选择" style="width: 205px" clearable="">
+              <el-option v-for="item in departmentoptions" :key="item.dictValue" :label="item.dictLabel"
+                :value="item.dictValue">
               </el-option>
             </el-select>
           </el-form-item>
@@ -258,27 +130,13 @@
           />
         </el-form-item> -->
           <el-form-item label="科室负责人姓名" prop="departmentPersonName">
-            <el-input
-              maxlength="20"
-              v-model="formadd.departmentPersonName"
-              placeholder="请输入科室负责人姓名"
-            />
+            <el-input maxlength="20" v-model="formadd.departmentPersonName" placeholder="请输入科室负责人姓名" />
           </el-form-item>
-
           <el-form-item label="上级科室" prop="parentDepartmentId">
-            <el-select
-              v-model="formadd.parentDepartmentName"
-              placeholder="请选择"
-              style="width: 205px"
-              @change="changeparentDepartment"
-              clearable
-            >
-              <el-option
-                v-for="item in optionsparentDepartment"
-                :key="item.id"
-                :label="item.departmentName"
-                :value="item.id"
-              >
+            <el-select v-model="formadd.parentDepartmentName" placeholder="请选择" style="width: 205px"
+              @change="changeparentDepartment" clearable>
+              <el-option v-for="item in optionsparentDepartment" :key="item.id" :label="item.departmentName"
+                :value="item.id">
               </el-option>
             </el-select>
           </el-form-item>
@@ -286,97 +144,45 @@
         <div class="nameinformation">扩展信息</div>
         <div class="content">
           <el-form-item label="提供服务类别" prop="provideServiceCategory">
-            <el-select
-              clearable
-              v-model="formadd.provideServiceCategory"
-              placeholder="请选择"
-              style="width: 205px"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.dictValue"
-                :label="item.dictLabel"
-                :value="item.dictValue"
-              >
+            <el-select clearable v-model="formadd.provideServiceCategory" placeholder="请选择" style="width: 205px">
+              <el-option v-for="item in options" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="细分类别" prop="subdivisionCategoryId">
-            <el-select
-              v-model="formadd.subdivisionCategoryName"
-              placeholder="请选择"
-              style="width: 205px"
-              clearable
-              @change="optionsubdivision"
-            >
-              <el-option
-                v-for="item in optionsubdivisionCategory"
-                :key="item.subdivisionCategoryCode"
-                :label="item.subdivisionCategoryName"
-                :value="item.subdivisionCategoryCode"
-              >
+            <el-select v-model="formadd.subdivisionCategoryName" placeholder="请选择" style="width: 205px" clearable
+              @change="optionsubdivision">
+              <el-option v-for="item in optionsubdivisionCategory" :key="item.subdivisionCategoryCode"
+                :label="item.subdivisionCategoryName" :value="item.subdivisionCategoryCode">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="标准科室对照" prop="normDepartmentCompareId">
-            <el-select
-              v-model="formadd.normDepartmentCompareId"
-              placeholder="请选择"
-              style="width: 205px"
-              clearable
-            >
-              <el-option
-                v-for="item in compareList"
-                :key="item.departmentId"
-                :label="item.departmentName"
-                :value="item.departmentId"
-              >
+            <el-select v-model="formadd.normDepartmentCompareId" placeholder="请选择" style="width: 205px" clearable>
+              <el-option v-for="item in compareList" :key="item.departmentId" :label="item.departmentName"
+                :value="item.departmentId">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="编制床位数" prop="prepareBedsCount">
-            <el-input
-              maxlength="8"
-              onKeyUp="value=value.replace(/[\W]/g,'')"
-              v-model="formadd.prepareBedsCount"
-              placeholder="请输入编制床位数"
-            />
+            <el-input maxlength="8" onKeyUp="value=value.replace(/[\W]/g,'')" v-model="formadd.prepareBedsCount"
+              placeholder="请输入编制床位数" />
           </el-form-item>
           <el-form-item label="科室电话" prop="departmentPhone">
-            <el-input
-              maxlength="12"
-              onKeyUp="value=value.replace(/[\W]/g,'')"
-              v-model="formadd.departmentPhone"
-              placeholder="请输入科室电话"
-            />
+            <el-input maxlength="12" onKeyUp="value=value.replace(/[\W]/g,'')" v-model="formadd.departmentPhone"
+              placeholder="请输入科室电话" />
           </el-form-item>
           <el-form-item label="科室邮箱" prop="departmentMail">
-            <el-input
-              maxlength="20"
-              v-model="formadd.departmentMail"
-              placeholder="请输入科室邮箱"
-            />
+            <el-input maxlength="20" v-model="formadd.departmentMail" placeholder="请输入科室邮箱" />
           </el-form-item>
           <el-form-item label="成立日期" prop="establishDate">
-            <el-date-picker
-              clearable
-              v-model="formadd.establishDate"
-              type="date"
-              style="width: 205px"
-              value-format="yyyy-MM-dd"
-              placeholder="请选择成立日期"
-            >
+            <el-date-picker clearable v-model="formadd.establishDate" type="date" style="width: 205px"
+              value-format="yyyy-MM-dd" placeholder="请选择成立日期">
             </el-date-picker>
           </el-form-item>
           <el-form-item label="撤销日期" prop="revokeDate">
-            <el-date-picker
-              clearable
-              v-model="formadd.revokeDate"
-              type="date"
-              style="width: 205px"
-              value-format="yyyy-MM-dd"
-              placeholder="请选择撤销日期"
-            >
+            <el-date-picker clearable v-model="formadd.revokeDate" type="date" style="width: 205px"
+              value-format="yyyy-MM-dd" placeholder="请选择撤销日期">
             </el-date-picker>
           </el-form-item>
         </div>
@@ -387,23 +193,12 @@
       </div>
     </el-dialog>
     <!-- 手机号 -->
-    <el-dialog
-      :title="titlemsg"
-      :visible.sync="openphone"
-      width="900px"
-      append-to-body
-      class="titleMSG"
-    >
+    <el-dialog :title="titlemsg" :visible.sync="openphone" width="900px" append-to-body class="titleMSG">
       <el-table v-loading="loading" :data="patientInfoList">
         <el-table-column label="科室名称" align="center" prop="deptAlias" />
         <el-table-column label="就诊时间" align="center" prop="visitDate" />
         <el-table-column label="姓名" align="center" prop="patientName" />
-        <el-table-column
-          label="联系电话"
-          align="center"
-          prop="patientPhone"
-          width="120"
-        />
+        <el-table-column label="联系电话" align="center" prop="patientPhone" width="120" />
         <el-table-column label="年龄" align="center" prop="age" />
         <el-table-column label="诊断" align="center" prop="mainDiagnosis" />
       </el-table>
@@ -485,13 +280,11 @@ export default {
       form: {},
       uploadopen: false,
       fileList: [],
-      isDistinct: true,//是否自动去重，true表示去重
-
       action: {
         data: {
-          isDistinct: '',
+          isDistinct: undefined,
+          importName: "",
         },
-
         headers: {
           Authorization: "Bearer " + getToken(),
         },
@@ -508,10 +301,8 @@ export default {
         deptAliasVOS: {
           departmentName: [
             { required: true, message: "1111111", trigger: "blur", }
-
           ]
         },
-
       },
       treeOptions: [],
       // 细分
@@ -566,15 +357,11 @@ export default {
     this.minShowCtrol()
     this.$emit('fold', this.fold)
     const currentRoute = this.$router.currentRoute;
-    console.log(currentRoute, 'currentRoute')
-
   },
   watch: {
     query: {
       handler(val) {
-        console.log(val, 'val')
         this.querlist = val
-
       },
       deep: true,
       immediate: true,
@@ -590,23 +377,16 @@ export default {
     }
   },
   methods: {
-
-
     exceedFile(files, fileList) {
-      console.log(files, fileList, 'shangchuan')
       // this.$modal.msgSuccess("添加成功");
-
       this.$message.warning(
         `只允许上传一个.xls/.xlsx文件！！`
       );
-
     },
-
     handleAvatarSuccess(response, file, fileList) {
       console.log(response, file, fileList, 'response, file, fileList')
       if (response.code == 500 && !response.data) {
         this.$modal.msgError(response.msg);
-
       } else if (response.code == 5002) {
         this.openphone = true;
         this.patientInfoList = response.data
@@ -621,8 +401,7 @@ export default {
           this.departmentsshow = true
         }
         this.open = true;
-      }
-      else if (response.code == 200 && !response.data) {
+      } else if (response.code == 200 && !response.data) {
         this.$modal.msgSuccess(response.msg);
         this.$emit('handleRules')
       } else if (response.code == 200 && response.data) {
@@ -633,17 +412,11 @@ export default {
       this.fileList = [];
     },
     handleRemove(file, fileList) {
-      console.log(file, fileList);
     },
     handlePreview(file) {
     },
     //导入相关的方法
     submitUpload() {
-      if (this.isDistinct == true) {
-        this.action.data.isDistinct = 1
-      } else {
-        this.action.data.isDistinct = 0
-      }
       this.$refs.upload.submit();
     },
     //取消导入
@@ -684,7 +457,7 @@ export default {
     handleUpload() {
       this.getcount()
       this.uploadopen = true;
-      this.isDistinct = true;
+      this.action.data.isDistinct = 1;
       this.fileList = [];
       this.form = {};
 
@@ -726,32 +499,23 @@ export default {
       if (localStorage.getItem('roleKey') != 'admin') {
         this.getLeafIds(this.treeOptions)
       }
-      console.log(item, index, 'item')
       // this.$emit('additem',item,index)
-
     },
     // 点击事件
     changeway(e, index) {
-      console.log(e, index, 'e')
       // this.$set(this.form.deptAliasVOS[this.indexadd], 'departmentName', this.formadd.departmentName)
-
       // this.form.deptAliasVOS[index].departmentName = this.form.departments.find(f => f.id == e).departmentName
       // this.form.deptAliasVOS[index].departmentId = e
-
       this.$nextTick(() => {
         this.$forceUpdate()
       })
     },
     getLeafIds(nodes) {
-      console.log(nodes, ';node')
       this.formadd.hospitalAgencyIdtwo = JSON.parse(localStorage.getItem('user')).hospitalAgencyId;
       let leafIds = [];
       nodes.forEach(node => {
-
         if (node.id == this.formadd.hospitalAgencyIdtwo) {
           this.formadd.hospitalAgencyName = node.label;
-
-
         } else {
           if (node.children) {
             // 如果有子节点，递归调用getLeafIds
@@ -760,9 +524,7 @@ export default {
             // 如果没有子节点，取当前节点的id
             leafIds.push(node.id);
           }
-
         }
-
       });
       return leafIds;
     },
@@ -783,7 +545,6 @@ export default {
     },
     // 所属机构
     change(e) {
-      console.log(this.formadd.hospitalAgencyIdtwo)
       if (e) {
         this.formadd.hospitalAgencyId = e[e.length - 1];
         if (this.formadd.hospitalAgencyId) {
@@ -861,7 +622,6 @@ export default {
       // this.form.subdivisionCategoryId = this.optionsubdivisionCategory.find(
       //   (e) => e.id == this.form.subdivisionCategoryId
       // ).subdivisionCategoryName;
-      // console.log(this.form.subdivisionCategoryName)
     },
     // 表单重置
     reset() {
@@ -913,12 +673,9 @@ export default {
               departmentName: this.formadd.departmentName,
               id: ''
             }
-            console.log(this.formadd, 'this.formadd')
-            console.log(this.form, 'this.form')
             addDepartment(this.formadd).then((response) => {
               this.$modal.msgSuccess("添加成功");
               this.form.departments.push(obj)
-              console.log(this.form.deptAliasVOS)
               // this.form.deptAliasVOS[this.indexadd].departmentName = this.formadd.departmentName
               this.$set(this.form.deptAliasVOS[this.indexadd], 'departmentName', this.formadd.departmentName)
               this.openadd = false;
@@ -933,7 +690,6 @@ export default {
       // this.$forceUpdate()
       var emptyItems = []
       emptyItems = this.form.deptAliasVOS.filter(f => f.departmentName == "" || f.departmentName == null)
-      console.log(emptyItems, 'this.emptyItems')
       if (emptyItems.length > 0) {
         this.$modal.msgError("必填项请填写完整,再进行提交");
       } else {
@@ -1004,16 +760,21 @@ export default {
     height: 28px !important;
   }
 }
+
 ::v-deep .el-checkbox__label {
   font-size: 12px;
 }
+
 ::v-deep .el-checkbox__inner {
   width: 12px;
   height: 12px;
 }
+
 .custom-cascader ::v-deep .el-input__inner::placeholder {
-  color: #606266; /* 你想要的颜色 */
+  color: #606266;
+  /* 你想要的颜色 */
 }
+
 .nameinformation {
   border-left: 3px solid #4d9de7;
   width: 200px;
@@ -1027,6 +788,7 @@ export default {
 .content {
   margin: 22px;
 }
+
 .el-cascader .el-input input::-webkit-input-placeholder {
   color: #686a6d;
 }
@@ -1038,11 +800,14 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.7); /* 半透明背景 */
+  background-color: rgba(255, 255, 255, 0.7);
+  /* 半透明背景 */
   // display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000; /* 确保遮罩层在顶部 */
+  z-index: 1000;
+
+  /* 确保遮罩层在顶部 */
   .maskimg {
     position: absolute;
     // top: 49%;
@@ -1050,6 +815,7 @@ export default {
 
     left: 50%;
     transform: translate(-50%, -50%);
+
     .text {
       position: absolute;
       left: 19%;
@@ -1057,6 +823,7 @@ export default {
       // color: #1989fa;
       color: #f28e01;
     }
+
     // 加载
     .newloding {
       margin-top: 10px;
@@ -1068,6 +835,7 @@ export default {
       // background: beige;
       width: 200px;
     }
+
     .progress-bar {
       position: absolute;
       top: 23px;
@@ -1075,6 +843,7 @@ export default {
       height: 12px;
       border-radius: 6px;
       background-color: rgb(255, 237, 212);
+
       .inner {
         position: absolute;
         top: 0;
@@ -1089,12 +858,14 @@ export default {
         background-image: url(~@/assets/images/jd.png);
       }
     }
+
     .progress {
       width: 0%;
       height: 100%;
       background-color: #00aaff;
       transition: width 1s ease-in-out;
     }
+
     .runner {
       width: 60px;
       height: 24px;
@@ -1111,23 +882,28 @@ export default {
       0% {
         left: 0;
       }
+
       100% {
         left: var(--left);
       }
     }
+
     @keyframes changeWidth {
       0% {
         width: 0;
       }
+
       100% {
         width: var(--left);
         background-position: 40px 0;
       }
     }
+
     @keyframes shrink {
       0% {
         background-position: 0 0;
       }
+
       100% {
         background-position: 40px 0;
       }