diff --git a/src/App.vue b/src/App.vue
index 3b3a1c7..aec76a8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,4 +32,20 @@ export default {
   font-size: 14px;
   border-radius: 15px;
 }
+.appeal .el-button{
+  padding: 7px 10px;
+  font-size: 14px;
+  border-radius: 15px;
+  width: 63px;
+}
+.el-button--text{
+  padding: 5px 10px;
+}
+.el-loading-spinner {
+    top: 50%;
+    /* margin-top: -21px; */
+    width: 90%;
+    text-align: center;
+    position: fixed;
+}
 </style>
diff --git a/src/components/AliOSS/index.vue b/src/components/AliOSS/index.vue
index f5f9df7..324f3f8 100644
--- a/src/components/AliOSS/index.vue
+++ b/src/components/AliOSS/index.vue
@@ -54,25 +54,29 @@ export default {
         console.log(fileList)
         fileList.forEach(item => {
           if (item.status === 'ready') {
-            const suffix = item.name.split('.')[1]
+            // const suffix = item.name.split('.')[1]
+            const suffix = item.name.substr(item.name.lastIndexOf('.')+1)
             const fileName = UUID.generate() + '.' + suffix
             item.name = fileName
             OSS(item.raw, fileName).then(res => {
-              this.$emit('input', res.url)
-              item.url = res.url
+              
+              this.$emit('input', 'http://storage.myntv.cn/'+res.name)
+              item.url = 'http://storage.myntv.cn/'+res.name
               item.status = 'success'
               const list = fileList.filter(item => item.status === 'success').map(item => item.url)
+              console.log(list);
               this.$emit('input', list)
             })
           }
         })
       } else {
-        const suffix = file.name.split('.')[0]
+        // const suffix = file.name.split('.')[0]
+        const suffix = item.name.substr(item.name.lastIndexOf('.')+1)
         const fileName = UUID.generate() + '.' + suffix
         file.name = fileName
         this.fileList = [file]
         OSS(file.raw, fileName).then(res => {
-          this.$emit('input', res.url)
+          this.$emit('input', 'http://storage.myntv.cn/'+res.name)
         })
       }
     },
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index a9cba01..4f2f359 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,8 +1,12 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        <span
+          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
+          class="no-redirect"
+          >{{ item.meta.title }}</span
+        >
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
@@ -10,61 +14,73 @@
 </template>
 
 <script>
-import pathToRegexp from 'path-to-regexp'
+import pathToRegexp from "path-to-regexp";
 
 export default {
   data() {
     return {
       levelList: null
-    }
+    };
   },
   watch: {
     $route(route) {
       // if you go to the redirect page, do not update the breadcrumbs
-      if (route.path.startsWith('/redirect/')) {
-        return
+      if (route.path.startsWith("/redirect/")) {
+        return;
       }
-      this.getBreadcrumb()
+      this.getBreadcrumb();
     }
   },
   created() {
-    this.getBreadcrumb()
+    this.getBreadcrumb();
   },
   methods: {
     getBreadcrumb() {
       // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      const first = matched[0]
+      let matched = this.$route.matched.filter(
+        item => item.meta && item.meta.title
+      );
+      const first = matched[0];
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
+        matched = [{ path: "/dashboard", meta: { title: "首页" } }].concat(
+          matched
+        );
       }
 
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+      this.levelList = matched.filter(
+        item => item.meta && item.meta.title && item.meta.breadcrumb !== false
+      );
+      // console.log(this.levelList);
+      if (this.levelList.length > 1) {
+        this.levelList.splice(0, 1);
+      }
     },
     isDashboard(route) {
-      const name = route && route.name
+      const name = route && route.name;
       if (!name) {
-        return false
+        return false;
       }
-      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+      return (
+        name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase()
+      );
     },
     pathCompile(path) {
       // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
-      const { params } = this.$route
-      var toPath = pathToRegexp.compile(path)
-      return toPath(params)
+      const { params } = this.$route;
+      var toPath = pathToRegexp.compile(path);
+      return toPath(params);
     },
     handleLink(item) {
-      const { redirect, path } = item
+      const { redirect, path } = item;
       if (redirect) {
-        this.$router.push(redirect)
-        return
+        this.$router.push(redirect);
+        return;
       }
-      this.$router.push(this.pathCompile(path))
+      this.$router.push(this.pathCompile(path));
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
index 530b3d5..785767d 100644
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@@ -27,6 +27,7 @@ export default {
   },
   methods: {
     linkProps(to) {
+      console.log(to);
       if (this.isExternal) {
         return {
           href: to,
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 74e49c5..81fe1e2 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -3,6 +3,7 @@
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :id="activeMenu" wrap-class="scrollbar-wrapper">
       <!-- {{activeMenu}} -->
+      <!-- dddd activeMenu-->
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
diff --git a/src/router/index.js b/src/router/index.js
index 58f00f1..0292eda 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -112,7 +112,7 @@ export const constantRoutes = [
         path: 'detail',
         component: () => import('@/views/convenience/detail'),
         name: 'ConvenienceDetail',
-        meta: { title: '工单详情', icon: 'convenience', affix: true },
+        meta: { title: '工单详情', icon: 'convenience', affix: true ,activeMenu:'/convenience/list'},
         hidden: true
       },
       {
diff --git a/src/views/convenience/add.vue b/src/views/convenience/add.vue
index d89a905..2562347 100644
--- a/src/views/convenience/add.vue
+++ b/src/views/convenience/add.vue
@@ -13,7 +13,10 @@
       class="el-form"
     >
       <el-form-item label="受理人" prop="residentInformation">
-        <el-input v-model="searchInput" placeholder="群众身份证号或者手机号" />
+        <el-input
+          v-model="convenience.residentInformation"
+          placeholder="群众身份证号或者手机号"
+        />
       </el-form-item>
 
       <el-form-item label="办事项目">
@@ -65,9 +68,9 @@
 </template>
 
 <script>
-import { add, typeList } from '@/api/convenience'
-import { info } from '@/api/staff'
-import AliOss from '@/components/AliOSS/index.vue'
+import { add, typeList } from "@/api/convenience";
+import { info } from "@/api/staff";
+import AliOss from "@/components/AliOSS/index.vue";
 
 // import Pagination from "@/components/Pagination";
 // import { list, typeList } from "@/api/convenience";
@@ -79,70 +82,98 @@ export default {
   },
   data() {
     var checkInfo = (rule, value, callback) => {
-      info({ param: this.searchInput || undefined }).then(res => {
-        if (!res.d) {
-          return callback(new Error('查无此人'))
-        } else {
-          this.convenience.residentInformation = res.d.id
-        }
-      })
-    }
+      // console.log(value);
+      // if (value === undefined) {
+      //   console.log('if');
+      //   return callback(new Error("受理人不能为空"));
+      // } else {
+      //   console.log('else');
+      //   info({ param: this.searchInput || undefined }).then(res => {
+      //     if (!res.d) {
+      //       return callback(new Error("查无此人"));
+      //     } else {
+      //       this.convenience.residentInformation = res.d.id;
+      //     }
+      //   });
+      // }
+      if (value === "") {
+        callback(new Error("受理人不能为空"));
+        // console.log('value==<>');
+      } else {
+        info({ param: this.convenience.residentInformation || undefined }).then(
+          res => {
+            if (!res.d) {
+              return callback(new Error("查无此人"));
+            } else {
+              this.searchInput = res.d.id;
+              callback();
+              // this.convenience.residentInformation = res.d.id;
+            }
+          }
+        );
+      }
+    };
     return {
       convenience: {
-        residentInformation: undefined,
+        residentInformation: "",
         eventTypeId: undefined,
         remark: undefined,
-        sponsor: 'STAFF',
+        sponsor: "STAFF",
         attachment: undefined
       },
       typeOptions: [],
       rules: {
-        residentInformation: [{ validator: checkInfo, trigger: 'blur' }]
+        residentInformation: [{ validator: checkInfo, trigger: "blur" }]
       },
       fileList: undefined,
       searchInput: undefined
-    }
+    };
   },
   mounted() {
-    this.getTypeList()
+    this.getTypeList();
   },
   methods: {
     getTypeList() {
       typeList().then(res => {
-        this.typeOptions = []
+        this.typeOptions = [];
         res.d.map(i => {
-          const children = []
+          const children = [];
 
           i.eventTypesList.map(c => {
             const level2 = {
               label: c.eventName,
               value: c.id
-            }
-            children.push(level2)
-          })
+            };
+            children.push(level2);
+          });
           const level1 = {
             label: i.eventName,
             children
-          }
+          };
 
-          this.typeOptions.push(level1)
-        })
-      })
+          this.typeOptions.push(level1);
+        });
+      });
     },
     handleAdd() {
-      add(this.convenience).then(res => {
-        if (res.c === 200) {
-          this.$notify.success('创建成功')
-          this.$router.push('/convenience/list')
+      this.$refs.convenienceForm.validate(valid => {
+        if (valid) {
+          this.convenience.residentInformation = this.searchInput;
+          add(this.convenience).then(res => {
+            if (res.c === 200) {
+              this.$notify.success("创建成功");
+              this.$router.push("/convenience/list");
+            }
+          });
         }
-      })
+      });
     },
     handlePreview() {},
     handleRemove() {},
     beforeRemove() {},
     handleExceed() {}
   }
-}
+};
 </script>
 
 <style scope></style>
diff --git a/src/views/convenience/detail.vue b/src/views/convenience/detail.vue
index fa9eefc..074ae32 100644
--- a/src/views/convenience/detail.vue
+++ b/src/views/convenience/detail.vue
@@ -17,13 +17,13 @@
               }}</span>
 
               <el-cascader
+                ref="cascader"
                 v-else
                 v-model="convenience.eventType.id"
                 :options="typeOptions"
                 :show-all-levels="false"
                 :props="{ emitPath: false }"
                 placeholder="编辑"
-                clearable
                 @change="handleEventTypeChange"
               />
               <el-button
@@ -37,8 +37,9 @@
                 "
                 icon="el-icon-edit"
                 type="text"
-                @click="isEventTypeChange = !isEventTypeChange"
-              >{{ isEventTypeChange ? "取消" : "编辑" }}</el-button>
+                @click="cascader"
+                >{{ isEventTypeChange ? "取消" : "编辑" }}</el-button
+              >
               <!-- <i class="icon_timer"></i
               ><span class="text_timer">
                 {{
@@ -73,7 +74,7 @@
                   }`
                 }} -->
             </div>
-            <div style="color:#787878;font-size:14px;margin-top:10px">
+            <div style="color:#787878;font-size:14px;">
               <!-- <el-tag type="danger" style="color:#ff5f40;background:#ffe0da">{{
                 convenience && convenience.phase | phaseFilter
               }}</el-tag> -->
@@ -101,6 +102,14 @@
               @click="handleChangeEventType"
               >编辑</el-button
             > -->
+            <!-- v-if="convenience && convenience.phase === 'PENDING_ORDER'" -->
+            <el-button
+              v-if="convenience && convenience.phase === 'PENDING_ORDER'"
+              style="margin-right:16px"
+              type="primary"
+              @click="handleUpdate(5)"
+              ><i class="icon_jd" />接单</el-button
+            >
             <el-button
               v-if="
                 convenience &&
@@ -109,9 +118,11 @@
                   convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
                   convenience.statusList[0].status !== 'FORWARDED'
               "
+              style="margin-right:16px"
               type="primary"
               @click="handleUpdate(6)"
-            >要件齐备，开始办理</el-button>
+              ><i class="icon_yj" />要件齐备，开始办理</el-button
+            >
             <el-button
               v-if="
                 convenience &&
@@ -119,8 +130,8 @@
                   convenience.phase === 'PROCESSING' &&
                   convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
                   convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
-                  convenience.statusList[0].status !=='WAIT_APPLY' &&
-                  convenience.statusList[0].status !=='FORWARDED'
+                  convenience.statusList[0].status !== 'WAIT_APPLY' &&
+                  convenience.statusList[0].status !== 'FORWARDED'
               "
               style="margin-right:16px;"
               type="primary"
@@ -142,7 +153,8 @@
               style="margin-right:16px;"
               type="primary"
               @click="handleApprovalReminder(11)"
-            ><i class="icon_sh" />发起审批</el-button>
+              ><i class="icon_sh" />发起审批</el-button
+            >
 
             <el-button
               v-if="
@@ -155,7 +167,8 @@
               "
               type="primary"
               @click="handleUpdate(14)"
-            ><i class="icon_zj" />转交任务</el-button>
+              ><i class="icon_zj" />转交任务</el-button
+            >
           </div>
         </div>
         <div class="hr" />
@@ -175,18 +188,18 @@
             </div>
             </el-col
           > -->
-          <el-col
-            :span="6"
-          ><div>
-            申办人：{{ convenience && convenience.residentInformation.name }}
-          </div></el-col>
-          <el-col
-            :span="6"
-          ><div>
-            受理人：{{
-              convenience && convenience.currentResponsiblePerson.name
-            }}
-          </div></el-col>
+          <el-col :span="6"
+            ><div>
+              申办人：{{ convenience && convenience.residentInformation.name }}
+            </div></el-col
+          >
+          <el-col :span="6"
+            ><div>
+              受理人：{{
+                convenience && convenience.firstResponsiblePerson.name
+              }}
+            </div></el-col
+          >
           <el-col :span="6" style="text-align:right">
             总办理时长：<i class="icon_timer" /><span class="text_timer">
               {{
@@ -235,7 +248,7 @@
           </el-col> -->
 
           <el-col
-            :span="24"
+            :span="6"
             style="display: flex;align-items: center;flex-direction:column"
           >
             <div
@@ -244,7 +257,37 @@
             >
               任务状态：<span style="color:#ff5a00">{{
                 convenience && convenience.statusList[0].status | statusFilter
-              }}</span><el-button
+              }}</span>
+              <el-popover
+                placement="top"
+                width="160"
+                v-model="cxPop"
+                v-if="
+                  convenience &&
+                    convenience.phase !== 'FINISH' &&
+                    convenience.statusList[0].status === 'SUBMIT_APPLY'
+                "
+              >
+                <p>确定撤销审批吗？</p>
+                <div style="text-align: right; margin: 0">
+                  <el-button size="mini" type="text" @click="cxPop = false"
+                    >取消</el-button
+                  >
+                  <el-button
+                    type="primary"
+                    size="mini"
+                    @click="handleUpdate(12)"
+                    >确定</el-button
+                  >
+                </div>
+                <el-button
+                  slot="reference"
+                  type="primary"
+                  style="margin-left:10px"
+                  >撤回</el-button
+                >
+              </el-popover>
+              <!-- <el-button
                 v-if="
                   convenience &&
                     convenience.phase !== 'FINISH' &&
@@ -253,7 +296,8 @@
                 type="primary"
                 style="margin-left:10px"
                 @click="handleUpdate(12)"
-              >撤销</el-button>
+                >撤销</el-button
+              > -->
               <el-button
                 v-if="
                   convenience &&
@@ -265,7 +309,8 @@
                 style="margin-left:10px"
                 type="primary"
                 @click="handleUpdate(9)"
-              >撤销转交超限审批</el-button>
+                >撤销转交审批</el-button
+              >
 
               <div
                 v-if="
@@ -274,38 +319,35 @@
                 "
                 style="margin-left:10px"
               >
-                <el-button
-                  type="success"
-                  @click="handleApprove(true)"
-                >通过</el-button><el-button
-                  type="danger"
-                  @click="handleApprove(false)"
-                >驳回</el-button>
+                <el-button type="success" @click="handleApprove(true)"
+                  >通过</el-button
+                ><el-button type="danger" @click="handleApprove(false)"
+                  >驳回</el-button
+                >
               </div>
             </div>
-            <ul v-if="convenience" class="approveUl">
+            <!-- <ul v-if="convenience" class="approveUl">
               <li v-for="(item, index) in convenience.applyVoList" :key="index">
-                <el-tag
-                  type="info"
-                  style="display: flex;align-items: center;"
-                ><i
-                  :class="{
-                    icon_approve: true,
-                    approve_pass: item.approve,
-                    approve_null: item.approve === null,
-                    approve_no: !item.approve
-                  }"
-                />{{
-                  `${item.residentInformation.name}${
-                    item.approve
-                      ? "已同意"
-                      : item.approve === null
+                <el-tag type="info" style="display: flex;align-items: center;"
+                  ><i
+                    :class="{
+                      icon_approve: true,
+                      approve_pass: item.approve,
+                      approve_null: item.approve === null,
+                      approve_no: !item.approve
+                    }"
+                  />{{
+                    `${item.residentInformation.name}${
+                      item.approve
+                        ? "已同意"
+                        : item.approve === null
                         ? "审批中"
                         : "已驳回"
-                  }`
-                }}</el-tag>
+                    }`
+                  }}</el-tag
+                >
               </li>
-            </ul>
+            </ul> -->
             <!-- <div>
               <span
                 >(审批人:{{
@@ -390,6 +432,52 @@
 
             <!-- </div> -->
           </el-col>
+          <el-col
+            :span="6"
+            style="display:flex"
+            class="appeal"
+            v-if="convenience && convenience.evaluation"
+          >
+            <div>
+              办事评价：
+              {{ convenience && convenience.evaluation | evaluationFilter }}
+            </div>
+            <el-button
+              type="primary"
+              style="position: relative;top: -10px;left: 20px;"
+              @click="handleUpdate(16)"
+              >申诉</el-button
+            ></el-col
+          >
+        </el-row>
+        <el-row>
+          <el-col
+            :span="24"
+            style="display: flex;align-items: center;flex-direction:column"
+          >
+            <ul v-if="convenience" class="approveUl">
+              <li v-for="(item, index) in convenience.applyVoList" :key="index">
+                <el-tag type="info" style="display: flex;align-items: center;"
+                  ><i
+                    :class="{
+                      icon_approve: true,
+                      approve_pass: item.approve,
+                      approve_null: item.approve === null,
+                      approve_no: !item.approve
+                    }"
+                  />{{
+                    `${item.residentInformation.name}${
+                      item.approve
+                        ? "已同意"
+                        : item.approve === null
+                        ? "审批中"
+                        : "已驳回"
+                    }`
+                  }}</el-tag
+                >
+              </li>
+            </ul>
+          </el-col>
         </el-row>
         <!-- <div style="margin-top:32px;color:#787878">
           <el-row :gutter="20" style="color:#787878">
@@ -453,14 +541,15 @@
                       ? this.acceptanceTime.second
                       : this.acceptanceTime.second
                   }`
-                }}</span><span
+                }}</span
+                ><span
                   v-if="acceptanceMsec > 57600 && acceptanceMsec < 86400"
                   class="timeout"
-                ><i class="icon_timeout" />即将超时</span>
-                <span
-                  v-if="acceptanceMsec > 86400"
-                  class="timeout"
-                ><i class="icon_timeout" />已超时</span>
+                  ><i class="icon_timeout" />即将超时</span
+                >
+                <span v-if="acceptanceMsec > 86400" class="timeout"
+                  ><i class="icon_timeout" />已超时</span
+                >
               </div>
             </div>
           </el-col>
@@ -503,16 +592,16 @@
             <i class="a_times icon_finish" />
             <p>办结</p>
             <div class="timerDiv">
+              <div class="text_left">
+                法定时长
+                {{ convenience && convenience.eventType.legalTimeLimit }}小时内
+              </div>
               <div class="text_left">
                 承诺时长
                 {{
                   convenience && convenience.eventType.commitmentTimeLimit
                 }}小时内
               </div>
-              <div class="text_left">
-                法定时长
-                {{ convenience && convenience.eventType.legalTimeLimit }}小时内
-              </div>
               <div class="text_left">
                 实际时长
                 <span class="duration">
@@ -544,7 +633,8 @@
                         convenience.eventType.commitmentTimeLimit * 3600)
                   "
                   class="timeout"
-                ><i class="icon_timeout" />已超时</span>
+                  ><i class="icon_timeout" />已超时</span
+                >
                 <span
                   v-else-if="
                     finishMsec >=
@@ -552,7 +642,8 @@
                         convenience.eventType.timeoutReminder * 3600)
                   "
                   class="timeout"
-                ><i class="icon_timeout" />即将超时</span>
+                  ><i class="icon_timeout" />即将超时</span
+                >
               </div>
             </div>
           </el-col>
@@ -678,7 +769,8 @@
           type="primary"
           style="margin-right:73px;"
           @click="handleContact"
-        >发起沟通</el-button>
+          >发起沟通</el-button
+        >
       </div>
 
       <div class="timeLine">
@@ -688,15 +780,18 @@
             :key="index"
             :timestamp="item.createDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')"
             placement="top"
-          >
-            <!-- 'url(' + convenience.currentResponsiblePerson.avatar + ')' -->
-            <!-- 'url(https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)' -->
+            ><i
+              v-if="convenience.residentInformation.id === item.from.id"
+              class="timeLine_self"
+            ></i
+            ><i v-else class="timeLine_staff"></i>
             <i
               class="timeline_avatar"
               :style="{
                 background: 'url(' + item.from.avatar + ')'
               }"
             />
+
             <el-card
               shadow="never"
               :class="{
@@ -710,24 +805,41 @@
 
               <p v-if="item.type === 11">审批人：{{ getNames(item.to) }}</p>
               <p v-if="item.type === 3">
-                被沟通人：<span v-for="item in item.to" :key="item.id">{{
-                  item.name
-                }}</span>
+                被沟通人：{{ getNames(item.to) }}
+                <!-- <span v-for="item in item.to" :key="item.id">{{
+                  getNames(item.to)
+                }}</span> -->
               </p>
-              <p v-for="(item, index) in item.attachmentList" :key="index">
+              <p
+                v-for="(attachment, index) in item.attachmentList"
+                :key="index"
+              >
                 <!-- url.substr(url.lastIndexOf(".") + 1) -->
                 <span
                   v-if="
-                    isAssetTypeAnImage(item.substr(item.lastIndexOf('.') + 1))
+                    isAssetTypeAnImage(
+                      attachment.substr(attachment.lastIndexOf('.') + 1)
+                    )
                   "
                   style="cursor: pointer"
-                  @click="handleSetPreviewImg(item)"
-                ><i class="icon_fujian" />{{
-                  item.substring(item.lastIndexOf("/") + 1)
-                }}</span>
-                <el-link v-else :href="item" :underline="false" target="_blank">
+                  @click="handleSetPreviewImg(attachment)"
+                >
+                  <i
+                    v-if="convenience.residentInformation.id === item.from.id"
+                    class="icon_fujian_self"
+                  /><i v-else class="icon_fujian" />
+                  {{
+                    attachment.substring(attachment.lastIndexOf("/") + 1)
+                  }}</span
+                >
+                <el-link
+                  v-else
+                  :href="attachment"
+                  :underline="false"
+                  target="_blank"
+                >
                   <i class="icon_fujian" />
-                  {{ item.substring(item.lastIndexOf("/") + 1) }}
+                  {{ attachment.substring(attachment.lastIndexOf("/") + 1) }}
                 </el-link>
               </p>
               <p v-if="item.type === 13 || item.type === 10">
@@ -738,7 +850,8 @@
                 <span
                   v-if="item.type === 14 || item.type === 8"
                   style="margin-left:164px"
-                >被转交人：{{ item.to[0].name }}</span>
+                  >被转交人：{{ item.to[0].name }}</span
+                >
               </p>
               <!-- <p v-if="item.type === 14 || item.type === 8">
                 被转交人：{{ item.to[0].name }}
@@ -754,10 +867,10 @@
                   item.type === 11
                     ? "审批备注："
                     : item.type === 14
-                      ? "转交备注："
-                      : item.type === 1
-                        ? "文字说明："
-                        : "备注："
+                    ? "转交备注："
+                    : item.type === 1
+                    ? "文字说明："
+                    : "备注："
                 }}{{ item.remark }}
               </p>
             </el-card>
@@ -767,7 +880,7 @@
     </div>
 
     <el-dialog :visible.sync="dialogPreviewImg" width="500px">
-      <img width="100%" :src="dialogImageUrl" alt="">
+      <img width="100%" :src="dialogImageUrl" alt="" />
     </el-dialog>
 
     <el-dialog
@@ -817,10 +930,9 @@
         </el-form>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button
-          type="default"
-          @click="contactDialog = false"
-        >取消</el-button>
+        <el-button type="default" @click="contactDialog = false"
+          >取消</el-button
+        >
         <el-button type="primary" @click="createContact">提交</el-button>
       </span>
     </el-dialog>
@@ -894,6 +1006,8 @@
               `${
                 convenience && convenience.statusList[0].status === 'WAIT_APPLY'
                   ? '请输入不通过理由'
+                  : updateType === 16
+                  ? '申诉理由'
                   : '备注'
               }`
             "
@@ -924,10 +1038,9 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
-        <el-button
-          type="primary"
-          @click="handleConfirmApprovalReminder"
-        >发起审批</el-button>
+        <el-button type="primary" @click="handleConfirmApprovalReminder"
+          >发起审批</el-button
+        >
       </span>
     </el-dialog>
 
@@ -962,65 +1075,66 @@ import {
   communicationList,
   update,
   typeList
-} from '@/api/convenience'
-import { parseTime } from '@/utils'
-import { staffList } from '@/api/staff'
-import AliOss from '@/components/AliOSS/index.vue'
+} from "@/api/convenience";
+import { parseTime } from "@/utils";
+import { staffList } from "@/api/staff";
+import AliOss from "@/components/AliOSS/index.vue";
 
 export default {
   filters: {
     sponsorFilter(status) {
       const statusMap = {
-        SELF: '居民',
-        STAFF: '工作人员'
-      }
-      return statusMap[status]
+        SELF: "群众",
+        STAFF: "工作人员"
+      };
+      return statusMap[status];
     },
     phaseFilter(status) {
       const statusMap = {
-        PENDING_ORDER: '待接单',
-        PREREQUISITES: '要件准备中',
-        PROCESSING: '办理中',
-        FINISH: '办结'
-      }
-      return statusMap[status]
+        PENDING_ORDER: "待接单",
+        PREREQUISITES: "要件准备中",
+        PROCESSING: "办理中",
+        FINISH: "办结"
+      };
+      return statusMap[status];
     },
     statusFilter(status) {
       const statusMap = {
-        MINE: '待我处理',
-        FORWARDED: '已转交',
-        FORWARDED_APPLY: '转交超限审批中',
-        SUBMIT_APPLY: '已提交审批',
-        WAIT_APPLY: '待审核'
-      }
-      return statusMap[status]
+        MINE: "我处理",
+        FORWARDED: "已转交",
+        FORWARDED_APPLY: "转交超限审批中",
+        SUBMIT_APPLY: "已提交审批",
+        WAIT_APPLY: "待审核"
+      };
+      return statusMap[status];
     },
     typeFilter(status) {
       const statusMap = {
-        1: '建立工单',
-        2: '撤销工单',
-        3: '沟通',
-        4: '调整工单类别',
-        5: '接单',
-        6: '要件齐备',
-        7: '办结',
-        8: '转交超限审批提交',
-        9: '转交超限审批撤销',
-        10: '转交超限审批',
-        11: '发起审批',
-        12: '撤销审批',
-        13: '审批操作',
-        14: '转交'
-      }
-      return statusMap[status]
+        1: "建立工单",
+        2: "撤销工单",
+        3: "沟通",
+        4: "调整工单类别",
+        5: "接单",
+        6: "要件齐备",
+        7: "办结",
+        8: "转交超限审批提交",
+        9: "转交超限审批撤销",
+        10: "转交超限审批",
+        11: "发起审批",
+        12: "撤销审批",
+        13: "审批操作",
+        14: "转交",
+        16: "提示"
+      };
+      return statusMap[status];
     },
     evaluationFilter(status) {
       const statusMap = {
-        1: '不满意',
-        2: '满意',
-        3: '非常满意'
-      }
-      return statusMap[status]
+        1: "不满意",
+        2: "满意",
+        3: "非常满意"
+      };
+      return statusMap[status];
     }
     // 1 不满意, 2 满意, 3 非常满意
   },
@@ -1044,7 +1158,7 @@ export default {
         evaluation: undefined
       },
       rules: {
-        ids: [{ required: true, message: '请选择操作对象', trigger: 'change' }]
+        ids: [{ required: true, message: "请选择操作对象", trigger: "change" }]
         // category: [{ required: true, message: '请选择栏目板块', trigger: 'change' }]
       },
       updateType: undefined,
@@ -1057,30 +1171,30 @@ export default {
       prerequisitesInterval: undefined,
       preMsec: 0,
       prerequisitesTime: {
-        hour: '--',
-        minute: '--',
-        second: '--'
+        hour: "--",
+        minute: "--",
+        second: "--"
       },
       finishTimeInterval: undefined,
       finishMsec: 0,
       finishTime: {
-        hour: '--',
-        minute: '--',
-        second: '--'
+        hour: "--",
+        minute: "--",
+        second: "--"
       },
       acceptanceInterval: undefined,
       acceptanceMsec: 0,
       acceptanceTime: {
-        hour: '--',
-        minute: '--',
-        second: '--'
+        hour: "--",
+        minute: "--",
+        second: "--"
       },
       totalTimeInterval: undefined,
       totalMsec: 0,
       totalTime: {
-        hour: '--',
-        minute: '--',
-        second: '--'
+        hour: "--",
+        minute: "--",
+        second: "--"
       },
       dialogPreviewImg: false,
       dialogImageUrl: undefined,
@@ -1089,68 +1203,74 @@ export default {
       typeOptions: [],
       eventTypeId: undefined,
       applyDetail: false,
-      isEventTypeChange: false
-    }
+      isEventTypeChange: false,
+      cxPop: false
+    };
   },
   created() {
-    this.getInfo()
-    this.getStaffList()
-    this.getCommunicationList()
-    this.getTypeList()
+    this.getInfo();
+    this.getStaffList();
+    this.getCommunicationList();
+    this.getTypeList();
   },
   methods: {
     getInfo() {
       info({ id: this.id }).then(res => {
-        this.convenience = res.d
-        const tempData = Object.assign({}, this.convenience)
-        const now = Date.parse(new Date()).toString() / 1000
-        clearInterval(this.acceptanceInterval)
-        clearInterval(this.prerequisitesInterval)
-        clearInterval(this.finishTimeInterval)
-        clearInterval(this.totalTimeInterval)
+        this.convenience = res.d;
+        const tempData = Object.assign({}, this.convenience);
+        const now = Date.parse(new Date()).toString() / 1000;
+        // console.log(now);
+        clearInterval(this.acceptanceInterval);
+        clearInterval(this.prerequisitesInterval);
+        clearInterval(this.finishTimeInterval);
+        clearInterval(this.totalTimeInterval);
         switch (tempData.phase) {
           // 待接单
-          case 'PENDING_ORDER':
+          case "PENDING_ORDER":
             if (tempData.acceptanceTime === null) {
-              this.acceptanceMsec = now - this.convenience.createDate
-              this.countdown(tempData.phase)
+              this.acceptanceMsec = now - this.convenience.createDate;
+              this.countdown(tempData.phase);
             }
-            break
+            break;
           // 要件准备
-          case 'PREREQUISITES':
+          case "PREREQUISITES":
             if (tempData.prerequisitesTime === null) {
-              this.preMsec = now - this.convenience.createDate
-              this.acceptanceMsec = tempData.acceptanceTime
-              this.timeFormat('acceptanceTime', this.acceptanceMsec)
-              this.countdown(tempData.phase)
+              this.preMsec =
+                now - tempData.createDate - tempData.acceptanceTime;
+              this.acceptanceMsec = tempData.acceptanceTime;
+              this.timeFormat("acceptanceTime", this.acceptanceMsec);
+              this.countdown(tempData.phase);
             }
-            break
+            break;
           // 办理中
-          case 'PROCESSING':
+          case "PROCESSING":
             if (tempData.finishTime === null) {
               this.finishMsec =
-                now - this.preMsec - this.convenience.createDate
-              this.acceptanceMsec = tempData.acceptanceTime
-              this.preMsec = tempData.prerequisitesTime
-              this.timeFormat('acceptanceTime', this.acceptanceMsec)
-              this.timeFormat('prerequisitesTime', this.preMsec)
-              this.countdown(tempData.phase)
+                now -
+                tempData.createDate -
+                tempData.acceptanceTime -
+                tempData.prerequisitesTime;
+              this.acceptanceMsec = tempData.acceptanceTime;
+              this.preMsec = tempData.prerequisitesTime;
+              this.timeFormat("acceptanceTime", this.acceptanceMsec);
+              this.timeFormat("prerequisitesTime", this.preMsec);
+              this.countdown(tempData.phase);
             }
-            break
+            break;
           // 办结
-          case 'FINISH':
+          case "FINISH":
             // console.log(123);
             if (tempData.finishTime !== null) {
-              this.finishMsec = tempData.finishTime
-              this.acceptanceMsec = tempData.acceptanceTime
-              this.preMsec = tempData.prerequisitesTime
-              this.timeFormat('acceptanceTime', this.acceptanceMsec)
-              this.timeFormat('prerequisitesTime', this.preMsec)
-              this.timeFormat('finishTime', this.finishMsec)
+              this.finishMsec = tempData.finishTime;
+              this.acceptanceMsec = tempData.acceptanceTime;
+              this.preMsec = tempData.prerequisitesTime;
+              this.timeFormat("acceptanceTime", this.acceptanceMsec);
+              this.timeFormat("prerequisitesTime", this.preMsec);
+              this.timeFormat("finishTime", this.finishMsec);
 
-              this.countdown(tempData.phase)
+              this.countdown(tempData.phase);
             }
-            break
+            break;
         }
         // const now = Date.parse(new Date()).toString() / 1000;
         // switch (this.convenience.phase) {
@@ -1186,74 +1306,75 @@ export default {
         //     this.countdown(this.convenience.phase);
         //     break;
         // }
-      })
+      });
     },
     getTypeList() {
       typeList().then(res => {
-        this.typeOptions = []
+        this.typeOptions = [];
         res.d.map(i => {
-          const children = []
+          const children = [];
 
           i.eventTypesList.map(c => {
             const level2 = {
               label: c.eventName,
               value: c.id
-            }
-            children.push(level2)
-          })
+            };
+            children.push(level2);
+          });
           const level1 = {
             label: i.eventName,
             children
-          }
+          };
 
-          this.typeOptions.push(level1)
-        })
-      })
+          this.typeOptions.push(level1);
+        });
+      });
     },
     countdown(phase) {
-      if (phase === 'PENDING_ORDER') {
+      if (phase === "PENDING_ORDER") {
         this.acceptanceInterval = setInterval(() => {
-          this.timeFormat('acceptanceTime', this.acceptanceMsec)
-          this.acceptanceMsec++
-        }, 1000)
+          this.timeFormat("acceptanceTime", this.acceptanceMsec);
+          this.acceptanceMsec++;
+        }, 1000);
         // 当前阶段的时间加上
-        this.totalMsec = this.acceptanceMsec
+        this.totalMsec = this.acceptanceMsec;
         this.totalTimeInterval = setInterval(() => {
-          this.timeFormat('totalTime', this.totalMsec)
-          this.totalMsec++
-        }, 1000)
-      } else if (phase === 'PREREQUISITES') {
+          this.timeFormat("totalTime", this.totalMsec);
+          this.totalMsec++;
+        }, 1000);
+      } else if (phase === "PREREQUISITES") {
         this.prerequisitesInterval = setInterval(() => {
-          this.timeFormat('prerequisitesTime', this.preMsec)
-          this.preMsec++
-        }, 1000)
-        this.totalMsec = this.convenience.acceptanceTime + this.preMsec
+          this.timeFormat("prerequisitesTime", this.preMsec);
+          this.preMsec++;
+        }, 1000);
+        this.totalMsec = this.convenience.acceptanceTime + this.preMsec;
         this.totalTimeInterval = setInterval(() => {
-          this.timeFormat('totalTime', this.totalMsec)
-          this.totalMsec++
-        }, 1000)
-      } else if (phase === 'PROCESSING') {
+          this.timeFormat("totalTime", this.totalMsec);
+          this.totalMsec++;
+        }, 1000);
+      } else if (phase === "PROCESSING") {
         this.finishTimeInterval = setInterval(() => {
           // console.log(233);
-          this.timeFormat('finishTime', this.finishMsec)
-          this.finishMsec++
-        }, 1000)
+          this.timeFormat("finishTime", this.finishMsec);
+          this.finishMsec++;
+        }, 1000);
         this.totalMsec =
           this.convenience.acceptanceTime +
           this.convenience.prerequisitesTime +
-          this.finishMsec
+          this.finishMsec;
+        console.log(this.totalMsec);
         this.totalTimeInterval = setInterval(() => {
-          this.timeFormat('totalTime', this.totalMsec)
-          this.totalMsec++
-        }, 1000)
-      } else if (phase === 'FINISH') {
+          this.timeFormat("totalTime", this.totalMsec);
+          this.totalMsec++;
+        }, 1000);
+      } else if (phase === "FINISH") {
         // console.log(233);
-        this.finishMsec
+        this.finishMsec;
         this.totalMsec =
           this.convenience.acceptanceTime +
           this.convenience.prerequisitesTime +
-          this.convenience.finishTime
-        this.timeFormat('totalTime', this.totalMsec)
+          this.convenience.finishTime;
+        this.timeFormat("totalTime", this.totalMsec);
         // this.totalTimeInterval = setInterval(() => {
         //   this.totalMsec++;
         // }, 1000);
@@ -1369,16 +1490,16 @@ export default {
     timeFormat(obj, timeStamp) {
       this[obj].hour =
         Math.floor(timeStamp / 3600) < 9
-          ? '0' + Math.floor(timeStamp / 3600)
-          : Math.floor(timeStamp / 3600)
+          ? "0" + Math.floor(timeStamp / 3600)
+          : Math.floor(timeStamp / 3600);
       this[obj].minute =
         Math.floor(((timeStamp % 86400) % 3600) / 60) < 9
-          ? '0' + Math.floor(((timeStamp % 86400) % 3600) / 60)
-          : Math.floor(((timeStamp % 86400) % 3600) / 60)
+          ? "0" + Math.floor(((timeStamp % 86400) % 3600) / 60)
+          : Math.floor(((timeStamp % 86400) % 3600) / 60);
       this[obj].second =
         Math.floor(((timeStamp % 86400) % 3600) % 60) < 9
-          ? '0' + Math.floor(((timeStamp % 86400) % 3600) % 60)
-          : Math.floor(((timeStamp % 86400) % 3600) % 60)
+          ? "0" + Math.floor(((timeStamp % 86400) % 3600) % 60)
+          : Math.floor(((timeStamp % 86400) % 3600) % 60);
     },
     getCommunicationList() {
       communicationList({ id: this.id }).then(res => {
@@ -1386,10 +1507,10 @@ export default {
           const obj = {
             label: item.name,
             value: item.id
-          }
-          this.communicationOptions.push(obj)
-        })
-      })
+          };
+          this.communicationOptions.push(obj);
+        });
+      });
     },
     getStaffList() {
       staffList().then(res => {
@@ -1397,10 +1518,10 @@ export default {
           const obj = {
             label: item.name,
             value: item.id
-          }
-          this.staffOptions.push(obj)
-        })
-      })
+          };
+          this.staffOptions.push(obj);
+        });
+      });
     },
     resetPayload() {
       this.payload = {
@@ -1411,36 +1532,37 @@ export default {
         attachmentList: undefined,
         approve: undefined,
         evaluation: undefined
-      }
-      this.spr = []
-      this.bzjr = undefined
+      };
+      this.spr = [];
+      this.bzjr = undefined;
     },
     handleRevoke() {
       const payload = {
         id: this.id,
         version: this.convenience.version,
         type: 2
-      }
+      };
       update(payload).then(res => {
         // console.log(res);
-        this.$notify.success('撤销成功')
-      })
+        this.$notify.success("撤销成功");
+      });
     },
     handleContact() {
+      this.resetPayload();
       this.$nextTick(() => {
-        this.$refs.contractForm.clearValidate()
-      })
-      this.contactDialog = true
-      this.payload.type = 3
-      this.payload.id = this.id
-      this.payload.version = this.convenience.version
+        this.$refs.contractForm.clearValidate();
+      });
+      this.contactDialog = true;
+      this.payload.type = 3;
+      this.payload.id = this.id;
+      this.payload.version = this.convenience.version;
     },
     getNames(arr) {
-      const temp = []
+      const temp = [];
       arr.map(item => {
-        temp.push(item.name)
-      })
-      return temp.join(',')
+        temp.push(item.name);
+      });
+      return temp.join(",");
     },
     handlePreview() {},
     handleRemove() {},
@@ -1461,27 +1583,27 @@ export default {
           update(this.payload).then(res => {
             // console.log(res);
             if (res.c === 200) {
-              this.$notify.success('提交成功')
+              this.$notify.success("提交成功");
             }
-            this.getInfo()
-            this.contactDialog = false
-          })
+            this.getInfo();
+            this.contactDialog = false;
+          });
         }
-      })
+      });
     },
     handleApprove(approve) {
-      const applyType = this.convenience.applyType
-      this.updateType = applyType === 'FORWARDED' ? 10 : 13
-      this.payload.id = this.convenience.id
-      this.payload.version = this.convenience.version
-      this.payload.type = this.updateType
-      this.payload.approve = approve
+      const applyType = this.convenience.applyType;
+      this.updateType = applyType === "FORWARDED" ? 10 : 13;
+      this.payload.id = this.convenience.id;
+      this.payload.version = this.convenience.version;
+      this.payload.type = this.updateType;
+      this.payload.approve = approve;
 
       if (approve) {
         // console.log(this.payload);
-        this.updateData()
+        this.updateData();
       } else {
-        this.applyDialog = true
+        this.applyDialog = true;
       }
       // id: this.id,
       //   version: undefined,
@@ -1492,51 +1614,51 @@ export default {
       //   evaluation: undefined
     },
     handleApprovalReminder() {
-      this.dialogApprovalReminder = true
+      this.dialogApprovalReminder = true;
     },
     handleConfirmApprovalReminder() {
-      this.dialogApprovalReminder = false
-      this.handleUpdate(11)
+      this.dialogApprovalReminder = false;
+      this.handleUpdate(11);
     },
     handleUpdate(type) {
       // console.log(type);
-      this.resetPayload()
-      this.updateType = type
-      this.payload.id = this.convenience.id
-      this.payload.version = this.convenience.version
-      this.payload.type = type
+      this.resetPayload();
+      this.updateType = type;
+      this.payload.id = this.convenience.id;
+      this.payload.version = this.convenience.version;
+      this.payload.type = type;
       switch (type) {
         case 6:
           // 要件齐备
-          this.applyDialog = true
-          break
+          this.applyDialog = true;
+          break;
         case 7:
           // 办结
-          this.applyDialog = true
-          break
+          this.applyDialog = true;
+          break;
         case 10:
           // 转交超限审批
           // this.approve;
-          break
+          break;
         case 11:
           // 发起审批
-          this.applyDialog = true
-          break
+          this.applyDialog = true;
+          break;
 
-          // case 12:
-          //   // 撤销审批
-          //   break;
+        // case 12:
+        //   // 撤销审批
+        //   break;
 
         case 13:
           // 审批操作
-          this.applyDialog = true
-          break
+          this.applyDialog = true;
+          break;
         case 14:
           // console.log("handle14");
           // 转交
           const frequencys = this.convenience.records.filter(
             m => m.frequency !== null
-          )
+          );
           if (
             frequencys.filter(
               item =>
@@ -1544,20 +1666,20 @@ export default {
                 this.convenience.eventType.referralRestrictions
             ).length > 0
           ) {
-            this.updateType = 8
-            this.confirmDialog = true
+            this.updateType = 8;
+            this.confirmDialog = true;
           } else {
-            this.updateType = 14
-            this.applyDialog = true
+            this.updateType = 14;
+            this.applyDialog = true;
           }
-          break
+          break;
         case 16:
           // 评价申诉
-          this.applyDialog = true
-          break
+          this.applyDialog = true;
+          break;
         default:
-          this.updateData()
-          break
+          this.updateData();
+          break;
       }
     },
     handleEventTypeChange(val) {
@@ -1568,9 +1690,9 @@ export default {
         type: 4,
         version: this.convenience.version,
         remark: val
-      }
-      this.updateType = 4
-      this.updateData()
+      };
+      this.updateType = 4;
+      this.updateData();
       // this.dialogEventType = false;
     },
     handleChange(val) {
@@ -1582,48 +1704,59 @@ export default {
       // })
       // console.log(this.payload);
       // console.log(this.payload.type);
-      this.updateData()
-      this.applyDialog = false
+      this.updateData();
+      this.applyDialog = false;
     },
     handleContinue() {
       setTimeout(() => {
-        this.confirmDialog = false
-      }, 100)
-      this.applyDialog = true
+        this.confirmDialog = false;
+      }, 100);
+      this.applyDialog = true;
     },
     updateData() {
       // console.log(this.updateType);
       switch (this.updateType) {
         case 6:
-          break
+          break;
         case 8:
-          this.payload.ids.push(this.spr)
-          this.payload.ids.push(this.bzjr)
-          this.payload.type = 8
-          break
+          this.payload.ids.push(this.spr);
+          this.payload.ids.push(this.bzjr);
+          this.payload.type = 8;
+          break;
         case 11:
-          this.payload.id = this.convenience.id
-          this.payload.version = this.convenience.version
-          this.payload.ids = this.spr
-          break
+          this.payload.id = this.convenience.id;
+          this.payload.version = this.convenience.version;
+          this.payload.ids = this.spr;
+          break;
         case 14:
-          this.payload.type = 14
-          this.payload.ids.push(this.bzjr)
-          break
+          this.payload.type = 14;
+          this.payload.ids.push(this.bzjr);
+          break;
       }
       update(this.payload).then(res => {
         if (res.c === 200) {
-          this.$notify.success('操作成功')
+          this.$notify.success("操作成功");
           if (this.updateType === 13) {
-            this.$router.push('/convenience/list')
-            return
+            this.$router.push("/convenience/list");
+            return;
           }
           if (this.updateType === 4) {
-            this.isEventTypeChange = false
+            this.isEventTypeChange = false;
           }
-          this.getInfo()
+          if (this.updateType === 12) {
+            this.cxPop = false;
+          }
+          // if (this.updateType===12){
+          //   this.$notify.success('撤销成功')
+          // }
+          // if(this.updateType===10||this.updateType===13){
+          //   if(this.payload.approve){
+          //     this.$notify.success('审批通过')
+          //   }
+          // }
+          this.getInfo();
         }
-      })
+      });
     },
     // handlePreviewAttachment(url) {
     //   const fileType = url.substr(url.lastIndexOf(".") + 1);
@@ -1635,15 +1768,15 @@ export default {
     // },
     isAssetTypeAnImage(ext) {
       return (
-        ['png', 'jpg', 'jpeg', 'bmp', 'gif'].indexOf(ext.toLowerCase()) !== -1
-      )
+        ["png", "jpg", "jpeg", "bmp", "gif"].indexOf(ext.toLowerCase()) !== -1
+      );
     },
     handleSetPreviewImg(imgurl) {
-      this.dialogImageUrl = imgurl
-      this.dialogPreviewImg = true
+      this.dialogImageUrl = imgurl;
+      this.dialogPreviewImg = true;
     },
     handleChangeEventType() {
-      this.dialogEventType = true
+      this.dialogEventType = true;
     },
     eventTypeUpdate() {
       this.payload = {
@@ -1651,17 +1784,26 @@ export default {
         type: 4,
         version: this.convenience.version,
         remark: this.eventTypeId
-      }
-      this.updateType = 4
-      this.updateData()
-      this.dialogEventType = false
+      };
+      this.updateType = 4;
+      this.updateData();
+      this.dialogEventType = false;
+    },
+    cascader() {
+      this.isEventTypeChange = !this.isEventTypeChange;
+      this.$nextTick(() => {
+        console.log(this.$refs.cascader)
+        const tempRef = this.$refs.cascader;
+        tempRef.$el.style.display='inline-block'
+        this.$refs.cascader.focusFirstNode()
+      }, 100);
     }
   },
   beforeRouteLeave(to, from, next) {
-    clearInterval(this.acceptanceInterval)
-    clearInterval(this.prerequisitesInterval)
-    clearInterval(this.finishTimeInterval)
-    next()
+    clearInterval(this.acceptanceInterval);
+    clearInterval(this.prerequisitesInterval);
+    clearInterval(this.finishTimeInterval);
+    next();
   }
   // timeFormat(timeStamp) {
   //   const timeStr = `${
@@ -1679,7 +1821,7 @@ export default {
   //   }`;
   //   return timeStr;
   // }
-}
+};
 </script>
 
 <style scope>
@@ -1803,6 +1945,15 @@ export default {
   vertical-align: top;
   margin-right: 12px;
 }
+.icon_fujian_self {
+  background: url("./img/icon_fujian_self.png") no-repeat;
+  background-size: cover;
+  width: 32px;
+  height: 32px;
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 12px;
+}
 .timeline_avatar {
   width: 73px;
   height: 74px;
@@ -1906,6 +2057,7 @@ h3 {
 /* .el */
 .el-timeline-item__timestamp {
   color: #787878;
+  padding-left: 25px;
 }
 .approveUl > li > .el-tag.el-tag--info {
   background-color: #f9f9f9;
@@ -1941,7 +2093,44 @@ h3 {
   margin-right: 4px;
   /* vertical-align: top; */
 }
-/* .eventType > input {
-  border:none;
+.timeLine_staff {
+  background: url("./img/timeLine_staff.png") no-repeat;
+  background-size: cover;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 2px;
+}
+.timeLine_self {
+  background: url("./img/timeLine_self.png") no-repeat;
+  background-size: cover;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 2px;
+}
+.icon_jd {
+  background: url("./img/icon_jd.png") no-repeat;
+  width: 20px;
+  height: 19px;
+  display: inline-block;
+  background-size: cover;
+  margin-right: 4px;
+  vertical-align: top;
+}
+.icon_yj {
+  background: url("./img/icon_yj.png") no-repeat;
+  width: 17px;
+  height: 19px;
+  display: inline-block;
+  background-size: cover;
+  margin-right: 7px;
+  vertical-align: top;
+}
+/* .el-cascader-panel{
+  display: -webkit-inline-box;
 } */
+
 </style>
diff --git a/src/views/convenience/img/icon_acceptance.png b/src/views/convenience/img/icon_acceptance.png
index 0a8a0e6..5eabe7e 100644
Binary files a/src/views/convenience/img/icon_acceptance.png and b/src/views/convenience/img/icon_acceptance.png differ
diff --git a/src/views/convenience/img/icon_finish.png b/src/views/convenience/img/icon_finish.png
index 5ee0260..5bf54f6 100644
Binary files a/src/views/convenience/img/icon_finish.png and b/src/views/convenience/img/icon_finish.png differ
diff --git a/src/views/convenience/img/icon_fujian_self.png b/src/views/convenience/img/icon_fujian_self.png
new file mode 100644
index 0000000..7a781ed
Binary files /dev/null and b/src/views/convenience/img/icon_fujian_self.png differ
diff --git a/src/views/convenience/img/icon_jd.png b/src/views/convenience/img/icon_jd.png
new file mode 100644
index 0000000..88a697a
Binary files /dev/null and b/src/views/convenience/img/icon_jd.png differ
diff --git a/src/views/convenience/img/icon_prepare.png b/src/views/convenience/img/icon_prepare.png
index 9f27390..6120554 100644
Binary files a/src/views/convenience/img/icon_prepare.png and b/src/views/convenience/img/icon_prepare.png differ
diff --git a/src/views/convenience/img/icon_yj.png b/src/views/convenience/img/icon_yj.png
new file mode 100644
index 0000000..96e3888
Binary files /dev/null and b/src/views/convenience/img/icon_yj.png differ
diff --git a/src/views/convenience/img/timeLine_self.png b/src/views/convenience/img/timeLine_self.png
new file mode 100644
index 0000000..d8f5a41
Binary files /dev/null and b/src/views/convenience/img/timeLine_self.png differ
diff --git a/src/views/convenience/img/timeLine_staff.png b/src/views/convenience/img/timeLine_staff.png
new file mode 100644
index 0000000..fdbc172
Binary files /dev/null and b/src/views/convenience/img/timeLine_staff.png differ
diff --git a/src/views/convenience/list.vue b/src/views/convenience/list.vue
index 75f3d41..a447ca4 100644
--- a/src/views/convenience/list.vue
+++ b/src/views/convenience/list.vue
@@ -3,7 +3,7 @@
     <div class="filter-container">
       <el-button
         type="primary"
-        style="position:absolute;right:50px;top:120px"
+        style="position:absolute;right:50px;margin-top:80px"
         @click="$router.push('/convenience/add')"
       ><i class="el-icon-plus" /> 直接建立工单</el-button>
       <div class="title">工单列表</div>
@@ -31,7 +31,7 @@
       <br>
     </div>
 
-    <div class="convenienceList">
+    <div class="convenienceList" v-loading="listLoading">
       <div
         v-for="(item, index) in list"
         :key="item.id"
@@ -43,7 +43,7 @@
         <div class="convenience_item_title" style="flex:1">
           <i class="icon_list" />
           <div>
-            <div class="cTitle">城乡养老保险个人变更登记</div>
+            <div class="cTitle">{{ item.eventType.eventName }}</div>
             <div class="createDate">
               {{ item.sponsor | sponsorFilter }}创建于{{
                 item.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
@@ -56,13 +56,16 @@
             <p>流水号：{{ item.serialNumber }}</p>
             <p>
               阶段：{{ item.phase | phaseFilter }}
-              <i v-if="timers&&timers[index].status !== null" class="icon_timeout" />
+              <i
+                class="icon_timeout"
+                v-if="timers && timers[index].status !== null"
+              ></i>
               <span style="color:#ff3000">{{
                 timers && timers[index].status === null
                   ? ""
-                  : timers&&timers[index].status
-                    ? "已超时"
-                    : "即将超时"
+                  : timers && timers[index].status
+                  ? "已超时"
+                  : "即将超时"
               }}</span>
             </p>
           </div>
@@ -76,10 +79,12 @@
             </p>
           </div>
           <div style="flex:1">
-            <p>受理人：{{ item.currentResponsiblePerson.name }}</p>
+            <p>受理人：{{ item.firstResponsiblePerson.name }}</p>
           </div>
-          <div style="flex:1">
-            <p style="font-size:20px;color:#ff6918">
+          <div
+            style="flex:1;align-items: center;justify-items: center;display: flex;"
+          >
+            <!-- <p style="font-size:20px;color:#ff6918">
               <i class="icon_timer" />{{
                 (timers && timeFormat(timers[index].time)) || "00:00:00"
               }}
@@ -87,12 +92,28 @@
             <p>
               <el-button
                 v-if="item.phase === 'PENDING_ORDER'"
-                style="margin-left:50px"
+                style="margin-left:44px;font-size:14px;padding:7px 10px;width:70px"
                 type="primary"
                 size="mini"
                 @click="handleUpdate(item, 5)"
-              >接单</el-button>
-            </p>
+                >接单</el-button
+              >
+            </p> -->
+            <div style="font-size:20px;color:#ff6918">
+              <i class="icon_timer" />{{
+                (timers && timeFormat(timers[index].time)) || "00:00:00"
+              }}
+              <div>
+                <el-button
+                  v-if="item.phase === 'PENDING_ORDER'"
+                  style="margin-left:44px;font-size:14px;padding:7px 10px;width:70px;margin-top:12px"
+                  type="primary"
+                  size="mini"
+                  @click.stop="handleUpdate(item, 5)"
+                  >接单</el-button
+                >
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -198,10 +219,10 @@ export default {
   filters: {
     sponsorFilter(status) {
       const statusMap = {
-        SELF: '居民',
-        STAFF: '工作人员'
-      }
-      return statusMap[status]
+        SELF: "群众",
+        STAFF: "工作人员"
+      };
+      return statusMap[status];
     },
     phaseFilter(status) {
       const statusMap = {
@@ -214,13 +235,13 @@ export default {
     },
     statusFilter(status) {
       const statusMap = {
-        MINE: '待我处理',
-        FORWARDED: '已转交',
-        FORWARDED_APPLY: '转交超限审批中',
-        SUBMIT_APPLY: '提交申请',
-        WAIT_APPLY: '待审核'
-      }
-      return statusMap[status]
+        MINE: "我处理",
+        FORWARDED: "已转交",
+        FORWARDED_APPLY: "转交超限审批中",
+        SUBMIT_APPLY: "已提交审批",
+        WAIT_APPLY: "待审核"
+      };
+      return statusMap[status];
     },
     typeFilter(status) {
       const statusMap = {
@@ -302,12 +323,13 @@ export default {
     getList() {
       this.listLoading = true
       list(this.listQuery).then(res => {
-        this.list = res.d.records
-        this.listLoading = false
-        clearInterval(this.timersInterval)
-        const tempData = res.d.records
-        const now = Date.parse(new Date()).toString() / 1000
-        const arr = []
+        this.list = res.d.records;
+        this.listLoading = false;
+        clearInterval(this.timersInterval);
+        const tempData = res.d.records;
+        const now = Date.parse(new Date()).toString() / 1000;
+        // console.log(now);
+        const arr = [];
         tempData.map((item, index) => {
           let msec = []
           let obj = {}
@@ -324,7 +346,7 @@ export default {
               break
             case 'PREREQUISITES':
               // 要件准备
-              msec = now - item.createDate - item.acceptanceTime
+              msec = now - item.createDate;
               obj = {
                 time: msec,
                 phase: item.phase,
@@ -334,11 +356,7 @@ export default {
               break
             case 'PROCESSING':
               // 办理中
-              msec =
-                now -
-                item.createDate -
-                item.acceptanceTime -
-                item.prerequisitesTime
+              msec = now - item.createDate;
               obj = {
                 time: msec,
                 phase: item.phase,
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index 43be3f6..f4c2ca9 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -1,396 +1,64 @@
 <template>
-  <el-row :gutter="40" class="panel-group">
+  <!-- <el-row :gutter="40" class="panel-group">
     <el-col
       v-for="(value, key, index) in statisticalData"
       :key="index"
       :xs="12"
       :sm="12"
-      :lg="6"
+      :lg="key==='all'?12:6"
       class="card-panel-col"
     >
       <div class="card-panel">
         <div class="card-panel-icon-wrapper icon-people">
           <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+          <i class="icon_"></i>
         </div>
         <div class="card-panel-description">
+          <div v-if="key==='all'">累计服务量 ：</div>
           <div class="card-panel-text">
             {{ key == "all" ? "总服务量" : key }}
           </div>
+          <div class="numText">{{value}}</div>
           <count-to
             :start-val="0"
             :end-val="value"
             :duration="2600"
             class="card-panel-num"
-          />
+          /> 
         </div>
       </div>
     </el-col>
-    <!-- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            不满意率
+  </el-row> -->
+  <el-row :gutter="20">
+    <el-col
+      v-for="(value, key, index) in statisticalData"
+      :key="index"
+      :xs="12"
+      :sm="12"
+      :lg="key === 'all' ? 12 : 6"
+    >
+      <div class="countLayout">
+        <i :class="`countIcon icon_${index}`"></i>
+        <span v-if="key === 'all'" style="font-size:24px"
+          >累计服务量 ：<span style="color:#ff663d;font-size:49px;vertical-align: middle;">{{ value }}</span></span
+        >
+        <div
+          v-else
+          style="flex: 1;text-align: right;padding-right:51px;font-size:16px;"
+        >
+          <div style="margin-bottom:17px">{{ key }}</div>
+          <div style="font-size:20px;color:#787878;">
+            {{ formatUnit(key, value) }}
           </div>
-          <count-to
-            :start-val="0"
-            :end-val="102400"
-            :duration="2600"
-            class="card-panel-num"
-          />
         </div>
       </div>
     </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="message" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            不满意量
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="81212"
-            :duration="3000"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            平均办结时间
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="9280"
-            :duration="3200"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            平均受理时间
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            按时办结率
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            按时办结量
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            按时受理率:
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            按时受理量
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            未办结率
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            未办结量
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            未受理率
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            未受理量
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            满意率
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            满意量
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            群众非常满意率
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            超时办结率
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            超时办结量
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            超时受理率
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            超时受理量
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            非常满意量
-          </div>
-          <count-to
-            :start-val="0"
-            :end-val="13600"
-            :duration="3600"
-            class="card-panel-num"
-          />
-        </div>
-      </div>
-    </el-col> -->
   </el-row>
 </template>
 
 <script>
-import CountTo from 'vue-count-to'
-import { statisticalData } from '@/api/statisticalData'
+import CountTo from "vue-count-to";
+import { statisticalData } from "@/api/statisticalData";
 
 export default {
   components: {
@@ -403,10 +71,10 @@ export default {
         eventTypeId: undefined
       },
       statisticalData: undefined
-    }
+    };
   },
   created() {
-    this.getStatisticalData()
+    this.getStatisticalData();
   },
   methods: {
     // handleSetLineChartData(type) {
@@ -414,14 +82,141 @@ export default {
     // }
     getStatisticalData() {
       statisticalData(this.listQuery).then(res => {
-        this.statisticalData = res.d
-      })
-    }
+        this.statisticalData = res.d;
+      });
+    },
+    formatUnit(key, value) {
+      // console.log(key,value);
+      let str = '';
+      if (key.indexOf("率")!= -1) {
+        str = `${(value * 100).toFixed(2)}%`;
+      } else if (key.indexOf("时间")!= -1) {
+        str = this.timeFormat(value);
+      } else {
+        str = value;
+      }
+      console.log(str);
+      return str
+    },
+    timeFormat(timeStamp) {
+      const timeStr = `${
+        Math.floor(timeStamp / 3600) < 9
+          ? '0' + Math.floor(timeStamp / 3600)
+          : Math.floor(timeStamp / 3600)
+      }:${
+        Math.floor(((timeStamp % 86400) % 3600) / 60) < 9
+          ? '0' + Math.floor(((timeStamp % 86400) % 3600) / 60)
+          : Math.floor(((timeStamp % 86400) % 3600) / 60)
+      }:${
+        Math.floor(((timeStamp % 86400) % 3600) % 60) < 9
+          ? '0' + Math.floor(((timeStamp % 86400) % 3600) % 60)
+          : Math.floor(((timeStamp % 86400) % 3600) % 60)
+      }`
+      return timeStr
+    },
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
+.countLayout {
+  background: #fff;
+  margin-bottom: 18px;
+  display: flex;
+  align-items: center;
+}
+.countIcon {
+  display: inline-block;
+  background-size: cover !important;
+  width: 60px;
+  height: 60px;
+  margin: 38px 38px 38px 55px;
+  vertical-align: middle;
+}
+.icon_0 {
+  background: url("./img/icon_0.png") no-repeat;
+}
+.icon_1 {
+  background: url("./img/icon_1.png") no-repeat;
+}
+.icon_2 {
+  background: url("./img/icon_2.png") no-repeat;
+}
+.icon_3 {
+  background: url("./img/icon_3.png") no-repeat;
+}
+.icon_4 {
+  background: url("./img/icon_3.png") no-repeat;
+}
+.icon_5 {
+  background: url("./img/icon_4.png") no-repeat;
+}
+.icon_6 {
+  background: url("./img/icon_4.png") no-repeat;
+}
+.icon_7 {
+  background: url("./img/icon_5.png") no-repeat;
+}
+.icon_8 {
+  background: url("./img/icon_5.png") no-repeat;
+}
+.icon_9 {
+  background: url("./img/icon_6.png") no-repeat;
+}
+.icon_10 {
+  background: url("./img/icon_6.png") no-repeat;
+}
+.icon_11 {
+  background: url("./img/icon_7.png") no-repeat;
+}
+.icon_12 {
+  background: url("./img/icon_7.png") no-repeat;
+}
+.icon_13 {
+  background: url("./img/icon_8.png") no-repeat;
+}
+.icon_14 {
+  background: url("./img/icon_8.png") no-repeat;
+}
+.icon_15 {
+  background: url("./img/icon_9.png") no-repeat;
+  width: 63px;
+  height: 54px;
+}
+.icon_16 {
+  background: url("./img/icon_9.png") no-repeat;
+  width: 63px;
+  height: 54px;
+}
+.icon_17 {
+  background: url("./img/icon_10.png") no-repeat;
+  width: 63px;
+  height: 54px;
+}
+.icon_18 {
+  background: url("./img/icon_10.png") no-repeat;
+  width: 63px;
+  height: 54px;
+}
+.icon_19 {
+  background: url("./img/icon_11.png") no-repeat;
+  width: 63px;
+  height: 54px;
+}
+.icon_20 {
+  background: url("./img/icon_11.png") no-repeat;
+  width: 63px;
+  height: 54px;
+}
+// .icon_21{
+//   background:url('./img/icon_1.png')no-repeat;
+// }
+.numText {
+  font-size: 20px;
+  color: #787878;
+  font-family: PingFang-SC-Regular;
+  text-align: right;
+}
 .panel-group {
   margin-top: 18px;
 
diff --git a/src/views/dashboard/admin/components/img/icon_0.png b/src/views/dashboard/admin/components/img/icon_0.png
new file mode 100644
index 0000000..fd3ab93
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_0.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_1.png b/src/views/dashboard/admin/components/img/icon_1.png
new file mode 100644
index 0000000..6af1472
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_1.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_10.png b/src/views/dashboard/admin/components/img/icon_10.png
new file mode 100644
index 0000000..d248ef2
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_10.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_11.png b/src/views/dashboard/admin/components/img/icon_11.png
new file mode 100644
index 0000000..53c4fab
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_11.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_2.png b/src/views/dashboard/admin/components/img/icon_2.png
new file mode 100644
index 0000000..5f6cebc
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_2.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_3.png b/src/views/dashboard/admin/components/img/icon_3.png
new file mode 100644
index 0000000..0be625a
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_3.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_4.png b/src/views/dashboard/admin/components/img/icon_4.png
new file mode 100644
index 0000000..858c6bb
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_4.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_5.png b/src/views/dashboard/admin/components/img/icon_5.png
new file mode 100644
index 0000000..720ce9e
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_5.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_6.png b/src/views/dashboard/admin/components/img/icon_6.png
new file mode 100644
index 0000000..e7fbff7
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_6.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_7.png b/src/views/dashboard/admin/components/img/icon_7.png
new file mode 100644
index 0000000..f3e8078
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_7.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_8.png b/src/views/dashboard/admin/components/img/icon_8.png
new file mode 100644
index 0000000..06eefd4
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_8.png differ
diff --git a/src/views/dashboard/admin/components/img/icon_9.png b/src/views/dashboard/admin/components/img/icon_9.png
new file mode 100644
index 0000000..c7ec13b
Binary files /dev/null and b/src/views/dashboard/admin/components/img/icon_9.png differ
diff --git a/src/views/login/img/login_titleLine_left.png b/src/views/login/img/login_titleLine_left.png
new file mode 100644
index 0000000..455a760
Binary files /dev/null and b/src/views/login/img/login_titleLine_left.png differ
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 5aa001b..f6425bd 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -2,8 +2,10 @@
   <div
     class="login-container"
     style="display: flex;
-    align-items: center;"
+    align-items: center;flex-direction: column;
+    justify-content: center;"
   >
+  <div class="systemTitle"><i class="login_titleLine_left"/>壤塘家园定点服务系统 <i class="login_titleLine_left" style="transform: rotate(180deg);margin-left:29px"/></div>
     <div
       style="background: white;
     width: 1053px;
@@ -444,5 +446,21 @@ $light_gray: #1890ff;
     padding: 10px;
     cursor: pointer;
   }
+  .login_titleLine_left{
+    background: url('./img/login_titleLine_left.png')no-repeat;
+    background-size: cover;
+    display: inline-block;
+    width: 315px;
+    height: 1px;
+    margin-right: 29px;
+    vertical-align: middle;
+  }
+  .systemTitle{
+        font-size: 37px;
+    color: rgb(255, 255, 255);
+    margin-bottom: 63px;
+    min-width: 1098px;
+    margin: 63px auto;
+  }
 }
 </style>
diff --git a/src/views/workBook/list.vue b/src/views/workBook/list.vue
index bd038e8..192f9cf 100644
--- a/src/views/workBook/list.vue
+++ b/src/views/workBook/list.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import Pagination from '@/components/Pagination'
+// import Pagination from '@/components/Pagination'
 import { workBookList } from '@/api/workBook'
 
 export default {