diff --git a/src/App.vue b/src/App.vue
index ec9032c..213cd41 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,30 @@
 
 <script>
 export default {
-  name: 'App'
-}
+  name: "App"
+};
 </script>
+<style>
+.app-container .el-button--primary {
+  border-radius: 21px;
+  box-shadow: 1px 1px 2px 0px #4081ff;
+  padding: 10px 38px;
+  font-size: 18px;
+}
+.el-dialog .el-dialog__footer .el-button {
+  border-radius: 18px;
+  font-size: 14px;
+  padding: 10px 20px;
+  min-width: 98px;
+}
+.status_btn .el-button {
+  padding: 7px 10px;
+  font-size: 14px;
+  border-radius: 15px;
+}
+.status_btn .el-button--success {
+  padding: 7px 10px;
+  font-size: 14px;
+  border-radius: 15px;
+}
+</style>
diff --git a/src/components/AliOSS/index.vue b/src/components/AliOSS/index.vue
index c77a6ce..f5f9df7 100644
--- a/src/components/AliOSS/index.vue
+++ b/src/components/AliOSS/index.vue
@@ -12,7 +12,7 @@
     <!-- :on-exceed="handleExceed"
     :before-remove="beforeRemove"
     :on-preview="handlePreview" -->
-    <el-button size="small" type="primary">点击上传</el-button>
+    <el-button size="small" type="default" plain style="background:#fff;border:1px solid #4081ff;color:#4081ff">上传附件</el-button>
   </el-upload>
 </template>
 
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index e224ff7..a9cba01 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -37,7 +37,7 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
@@ -70,9 +70,11 @@ export default {
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
-  font-size: 14px;
+  // font-size: 14px;
+  font-size: 16px;
   line-height: 50px;
-  margin-left: 8px;
+  // margin-left: 8px;
+  margin-left: 20px;
 
   .no-redirect {
     color: #97a8be;
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 0c0b7b5..78eccec 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,5 +1,6 @@
 <template>
   <section class="app-main">
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view :key="key" />
@@ -9,8 +10,12 @@
 </template>
 
 <script>
+import Breadcrumb from "@/components/Breadcrumb";
 export default {
   name: 'AppMain',
+   components: {
+    Breadcrumb,
+    },
   computed: {
     cachedViews() {
       return this.$store.state.tagsView.cachedViews
@@ -55,4 +60,7 @@ export default {
     padding-right: 15px;
   }
 }
+.app-breadcrumb.el-breadcrumb{
+  font-size: 16px !important;
+  }
 </style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 37bc1e6..e72c05d 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <!-- <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
         <error-log class="errLog-container right-menu-item hover-effect" />
@@ -16,11 +16,19 @@
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-      </template>
+      </template> -->
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <!-- <div class="avatar-wrapper"> -->
+      <img :src="avatar" class="user-avatar" />
+      <span>{{name}}</span>
+      <el-button icon="el-icon-switch-button" type="text" style="margin-left:26px;margin-right:20px">退出登录</el-button>
+      <!-- <div><i ></i>退出登录</div> -->
+      <!-- <i class="el-icon-caret-bottom" /> -->
+      <!-- </div> -->
+
+      <!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img :src="avatar" class="user-avatar">
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -40,19 +48,19 @@
             <span style="display:block;">Log Out</span>
           </el-dropdown-item>
         </el-dropdown-menu>
-      </el-dropdown>
+      </el-dropdown> -->
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import ErrorLog from '@/components/ErrorLog'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import Hamburger from "@/components/Hamburger";
+import ErrorLog from "@/components/ErrorLog";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import Search from "@/components/HeaderSearch";
 
 export default {
   components: {
@@ -64,22 +72,18 @@ export default {
     Search
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ])
+    ...mapGetters(["sidebar", "avatar", "device","name"])
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      await this.$store.dispatch("user/logout");
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -88,18 +92,18 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -116,6 +120,8 @@ export default {
     float: right;
     height: 100%;
     line-height: 50px;
+    display: flex;
+    align-items: center;
 
     &:focus {
       outline: none;
@@ -131,13 +137,20 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
+    .user-avatar {
+      cursor: pointer;
+      width: 28px;
+      height: 28px;
+      border-radius: 28px;
+      margin-right: 13px;
+    }
 
     .avatar-container {
       margin-right: 30px;
@@ -148,9 +161,9 @@ export default {
 
         .user-avatar {
           cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
+          width: 28px;
+          height: 28px;
+          border-radius: 28px;
         }
 
         .el-icon-caret-bottom {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index c9622d2..733f8a2 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -5,7 +5,7 @@
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
-        <tags-view v-if="needTagsView" />
+        <!-- <tags-view v-if="needTagsView" /> -->
       </div>
       <app-main />
       <!-- <right-panel v-if="showSettings">
diff --git a/src/router/index.js b/src/router/index.js
index 0fd3c00..ac788f0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -72,6 +72,7 @@ export const constantRoutes = [
   },
   {
     path: '/',
+    name:'Dashboard',
     component: Layout,
     redirect: '/dashboard',
     children: [
@@ -127,6 +128,7 @@ export const constantRoutes = [
     path: '/workBook',
     component: Layout,
     name: 'WorkBook',
+    redirect: '/workBook/list',
     meta: {
       title: '工作手册',
       icon: 'list',
diff --git a/src/utils/index.js b/src/utils/index.js
index d503499..0178c60 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -392,3 +392,19 @@ export function errorCodeMap(code) {
   }
   return errorCodeMap[code]
 }
+// export function 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;
+// }
\ No newline at end of file
diff --git a/src/views/convenience/add.vue b/src/views/convenience/add.vue
index 23f6247..d89a905 100644
--- a/src/views/convenience/add.vue
+++ b/src/views/convenience/add.vue
@@ -6,14 +6,14 @@
     <!-- bbc -->
     <el-form
       ref="convenienceForm"
-      style="width:480px"
+      style="width:680px"
       :model="convenience"
       :rules="rules"
       label-width="80px"
       class="el-form"
     >
       <el-form-item label="受理人" prop="residentInformation">
-        <el-input v-model="searchInput" placeholder="请输入受理人手机号或身份证号" />
+        <el-input v-model="searchInput" placeholder="群众身份证号或者手机号" />
       </el-form-item>
 
       <el-form-item label="办事项目">
@@ -23,7 +23,7 @@
           :options="typeOptions"
           :show-all-levels="false"
           :props="{ emitPath: false }"
-          placeholder="选择办事项目"
+          placeholder="选择大项目"
           style="width:100%"
           clearable
         />
@@ -34,6 +34,7 @@
           v-model="convenience.remark"
           type="textarea"
           placeholder="请输入"
+          :autosize="{ minRows: 6, maxRows: 8 }"
         />
       </el-form-item>
 
@@ -57,7 +58,7 @@
         </el-upload> -->
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="handleAdd">发起办事</el-button>
+        <el-button type="primary" @click="handleAdd">创建工单</el-button>
       </el-form-item>
     </el-form>
   </div>
diff --git a/src/views/convenience/detail.vue b/src/views/convenience/detail.vue
index aec9b3a..262891a 100644
--- a/src/views/convenience/detail.vue
+++ b/src/views/convenience/detail.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="app-container">
-    <div class="filter-container">
-      <!-- abc -->
-    </div>
+  <div class="app-container" style="padding-top:0">
+    <!-- <div class="filter-container">
+    </div> -->
 
-    <el-card class="box-card" shadow="never">
+    <!-- <el-card class="box-card" shadow="never"> -->
+    <div class="recordLayout">
       <div style="border-left:5px solid #1890ff;padding-left:5px">工单详情</div>
 
       <div class="convenienceInfo">
@@ -12,10 +12,34 @@
           <i class="icon_list" />
           <div style="flex:1">
             <div class="eventType">
-              {{ convenience && convenience.eventType.eventName }}
-              <el-tag type="danger" style="color:#ff5f40;background:#ffe0da">{{
-                convenience && convenience.phase | phaseFilter
-              }}</el-tag>
+              <span v-if="!isEventTypeChange">{{
+                convenience && convenience.eventType.eventName
+              }}</span>
+
+              <el-cascader
+                v-else
+                v-model="convenience.eventType.id"
+                :options="typeOptions"
+                :show-all-levels="false"
+                :props="{ emitPath: false }"
+                placeholder="编辑"
+                @change="handleEventTypeChange"
+                clearable
+              />
+              <el-button
+                v-if="
+                  convenience &&
+                    convenience.phase !== 'FINISH' &&
+                    convenience.statusList[0].status !== 'WAIT_APPLY' &&
+                    convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
+                    convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
+                    convenience.statusList[0].status !== 'FORWARDED'
+                "
+                icon="el-icon-edit"
+                type="text"
+                @click="isEventTypeChange = !isEventTypeChange"
+                >{{ isEventTypeChange ? "取消" : "编辑" }}</el-button
+              >
               <!-- <i class="icon_timer"></i
               ><span class="text_timer">
                 {{
@@ -58,11 +82,14 @@
                 convenience &&
                   convenience.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
               }}
+              <el-tag type="danger" style="color:#ff5f40;background:#ffe0da">{{
+                convenience && convenience.phase | phaseFilter
+              }}</el-tag>
             </div>
           </div>
           <!-- style="display: flex;flex-direction: row;justify-content: center;width: 25%;" -->
           <div>
-            <el-button
+            <!-- <el-button
               v-if="
                 convenience &&
                   convenience.phase !== 'FINISH' &&
@@ -73,7 +100,8 @@
               "
               type="primary"
               @click="handleChangeEventType"
-            >编辑</el-button>
+              >编辑</el-button
+            > -->
             <el-button
               v-if="
                 convenience &&
@@ -84,21 +112,28 @@
               "
               type="primary"
               @click="handleUpdate(6)"
-            >要件齐备，开始办理</el-button>
+              >要件齐备，开始办理</el-button
+            >
             <el-button
               v-if="
                 convenience &&
                   convenience.phase !== 'FINISH' &&
                   convenience.phase === 'PROCESSING' &&
-                  convenience.statusList[0].status !== 'SUBMIT_APPLY'
+                  convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
+                  convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
+                  convenience.statusList[0].status !=='WAIT_APPLY' &&
+                  convenience.statusList[0].status !=='FORWARDED'
               "
+              style="margin-right:16px;"
               type="primary"
               @click="handleUpdate(7)"
             >
+              <i class="icon_bj"></i>
               办结
             </el-button>
 
             <el-button
+            style="margin-right:16px;"
               v-if="
                 convenience &&
                   convenience.phase !== 'FINISH' &&
@@ -109,7 +144,8 @@
               "
               type="primary"
               @click="handleApprovalReminder(11)"
-            >发起审批</el-button>
+              ><i class="icon_sh"></i>发起审批</el-button
+            >
 
             <el-button
               v-if="
@@ -117,11 +153,13 @@
                   convenience.phase !== 'FINISH' &&
                   convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
                   convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
-                  convenience.statusList[0].status !== 'FORWARDED'
+                  convenience.statusList[0].status !== 'FORWARDED' &&
+                  convenience.statusList[0].status !== 'WAIT_APPLY'
               "
               type="primary"
               @click="handleUpdate(14)"
-            >转交任务</el-button>
+              ><i class="icon_zj"></i>转交任务</el-button
+            >
           </div>
         </div>
         <div class="hr" />
@@ -141,27 +179,19 @@
             </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-row>
-        <el-row
-          :gutter="20"
-          style="color:#787878;display: flex;align-items: center;"
-        >
-          <!-- <el-col :span="6">
-            任务阶段：{{ convenience && convenience.phase | phaseFilter }}
-          </el-col> -->
-          <el-col :span="6">
+          <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" style="text-align:right">
             总办理时长：<i class="icon_timer" /><span class="text_timer">
               {{
                 `${
@@ -180,26 +210,129 @@
               }}
             </span>
           </el-col>
+        </el-row>
+        <el-row
+          :gutter="20"
+          style="color:#787878;display: flex;align-items: center;"
+        >
+          <!-- <el-col :span="6">
+            任务阶段：{{ convenience && convenience.phase | phaseFilter }}
+          </el-col> -->
+          <!-- <el-col :span="6">
+            总办理时长：<i class="icon_timer" /><span class="text_timer">
+              {{
+                `${
+                  this.totalTime.hour > 9
+                    ? this.totalTime.hour
+                    : this.totalTime.hour
+                }:${
+                  this.totalTime.minute > 9
+                    ? this.totalTime.minute
+                    : this.totalTime.minute
+                }:${
+                  this.totalTime.second > 9
+                    ? this.totalTime.second
+                    : this.totalTime.second
+                }`
+              }}
+            </span>
+          </el-col> -->
 
-          <el-col :span="18" style="display: flex;align-items: center;">
-            任务状态：{{
-              convenience && convenience.statusList[0].status | statusFilter
-            }}
+          <el-col
+            :span="24"
+            style="display: flex;align-items: center;flex-direction:column"
+          >
             <div
+              style="width:100%;display: flex;align-items: center;"
+              class="status_btn"
+            >
+              任务状态：<span style="color:#ff5a00">{{
+                convenience && convenience.statusList[0].status | statusFilter
+              }}</span
+              ><el-button
+                v-if="
+                  convenience &&
+                    convenience.phase !== 'FINISH' &&
+                    convenience.statusList[0].status === 'SUBMIT_APPLY'
+                "
+                type="primary"
+                style="margin-left:10px"
+                @click="handleUpdate(12)"
+                >撤销</el-button
+              >
+              <el-button
+                v-if="
+                  convenience &&
+                    convenience.phase !== 'FINISH' &&
+                    convenience.statusList[0].status === 'FORWARDED_APPLY' &&
+                    convenience &&
+                    convenience.applyType === 'FORWARDED'
+                "
+                style="margin-left:10px"
+                type="primary"
+                @click="handleUpdate(9)"
+                >撤销转交超限审批</el-button
+              >
+
+              <div
+                v-if="
+                  convenience &&
+                    convenience.statusList[0].status === 'WAIT_APPLY'
+                "
+                style="margin-left:10px"
+              >
+                <el-button type="success" @click="handleApprove(true)"
+                  >通过</el-button
+                ><el-button type="danger" @click="handleApprove(false)"
+                  >驳回</el-button
+                >
+              </div>
+            </div>
+            <ul class="approveUl" v-if="convenience">
+              <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>
+            <!-- <div>
+              <span
+                >(审批人:{{
+                  convenience &&
+                    convenience.applyVoList[0].residentInformation.name
+                }})</span
+              >
+              
+            </div> -->
+            <!-- <div
               v-if="
                 convenience && convenience.statusList[0].status === 'WAIT_APPLY'
               "
               style="margin-left:10px"
             >
-              <el-button
-                type="success"
-                @click="handleApprove(true)"
-              >通过</el-button><el-button
-                type="danger"
-                @click="handleApprove(false)"
-              >驳回</el-button>
-            </div>
-            <div
+              <el-button type="success" @click="handleApprove(true)"
+                >通过</el-button
+              ><el-button type="danger" @click="handleApprove(false)"
+                >驳回</el-button
+              >
+            </div> -->
+
+            <!-- <div
               v-if="
                 convenience &&
                   convenience.phase !== 'FINISH' &&
@@ -208,15 +341,18 @@
                   convenience.applyType === 'FORWARDED'
               "
             >
-              <span>(审批人:{{
-                convenience &&
-                  convenience.applyVoList[0].residentInformation.name
-              }})</span>
+              <span
+                >(审批人:{{
+                  convenience &&
+                    convenience.applyVoList[0].residentInformation.name
+                }})</span
+              >
               <el-button
                 style="margin-left:10px"
                 type="primary"
                 @click="handleUpdate(9)"
-              >撤销转交审批</el-button>
+                >撤销转交审批</el-button
+              >
             </div>
             <div
               v-if="
@@ -225,8 +361,8 @@
                   convenience.statusList[0].status === 'SUBMIT_APPLY'
               "
               style="margin-left:10px"
-            >
-              <el-popover
+            > -->
+            <!-- <el-popover
                 placement="bottom-start"
                 title=""
                 width="410"
@@ -251,10 +387,12 @@
                   type="primary"
                   style="position:relative;left:155px;"
                   @click="handleUpdate(12)"
-                >撤销</el-button>
+                  >撤销</el-button
+                >
                 <el-link slot="reference" type="primary">查看审批详情</el-link>
-              </el-popover>
-            </div>
+              </el-popover> -->
+
+            <!-- </div> -->
           </el-col>
         </el-row>
         <!-- <div style="margin-top:32px;color:#787878">
@@ -319,14 +457,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>
@@ -336,7 +475,7 @@
             <i class="a_times icon_prepare" />
             <p>要件准备</p>
             <div class="timerDiv">
-              <div>承诺时长 24小时内</div>
+              <div>承诺时长 尽快</div>
               <div>
                 实际时长
                 <span class="duration">{{
@@ -354,14 +493,14 @@
                       : this.prerequisitesTime.second
                   }`
                 }}</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>
@@ -398,20 +537,29 @@
                     }`
                   }}
                 </span>
+                <!-- {{
+                  finishMsec +
+                    ":" +
+                    convenience&&convenience.eventType.commitmentTimeLimit * 3600
+                }} -->
                 <span
                   v-if="
-                    finishMsec >= convenience &&
-                      convenience.eventType.commitmentTimeLimit * 3600
+                    finishMsec >=
+                      (convenience &&
+                        convenience.eventType.commitmentTimeLimit * 3600)
                   "
                   class="timeout"
-                ><i class="icon_timeout" />已超时</span>
+                  ><i class="icon_timeout" />已超时</span
+                >
                 <span
                   v-else-if="
-                    finishMsec >= convenience &&
-                      convenience.eventType.timeoutReminder * 3600
+                    finishMsec >=
+                      (convenience &&
+                        convenience.eventType.timeoutReminder * 3600)
                   "
                   class="timeout"
-                ><i class="icon_timeout" />即将超时</span>
+                  ><i class="icon_timeout" />即将超时</span
+                >
               </div>
             </div>
           </el-col>
@@ -524,7 +672,8 @@
           </div>
         </div> -->
       </div>
-    </el-card>
+    </div>
+    <!-- </el-card> -->
 
     <div class="recordLayout">
       <div style="border-left:5px solid #1890ff;padding-left:5px;float: left;">
@@ -536,7 +685,8 @@
           type="primary"
           style="margin-right:73px;"
           @click="handleContact"
-        >发起沟通</el-button>
+          >发起沟通</el-button
+        >
       </div>
 
       <div class="timeLine">
@@ -556,6 +706,7 @@
               }"
             />
             <el-card
+              shadow="never"
               :class="{
                 contact_staff:
                   convenience.residentInformation.id !== item.from.id,
@@ -563,7 +714,7 @@
                   convenience.residentInformation.id === item.from.id
               }"
             >
-              <h4>{{ item.content }}</h4>
+              <h3>{{ item.content }}</h3>
 
               <p v-if="item.type === 11">审批人：{{ getNames(item.to) }}</p>
               <p v-if="item.type === 3">
@@ -579,7 +730,10 @@
                   "
                   style="cursor: pointer"
                   @click="handleSetPreviewImg(item)"
-                ><i class="icon_fujian" />{{ item.substring(item.lastIndexOf("/") + 1) }}</span>
+                  ><i class="icon_fujian" />{{
+                    item.substring(item.lastIndexOf("/") + 1)
+                  }}</span
+                >
                 <el-link v-else :href="item" :underline="false" target="_blank">
                   <i class="icon_fujian" />
                   {{ item.substring(item.lastIndexOf("/") + 1) }}
@@ -588,10 +742,17 @@
               <p v-if="item.type === 13 || item.type === 10">
                 审批结果：{{ item.approve ? "通过" : "驳回" }}
               </p>
-              <p v-if="item.frequency">已转交次数：{{ item.frequency }}</p>
-              <p v-if="item.type === 14 || item.type === 8">
-                被转交人：{{ item.to[0].name }}
+              <p v-if="item.frequency">
+                已转交次数：{{ item.frequency }}
+                <span
+                  style="margin-left:164px"
+                  v-if="item.type === 14 || item.type === 8"
+                  >被转交人：{{ item.to[0].name }}</span
+                >
               </p>
+              <!-- <p v-if="item.type === 14 || item.type === 8">
+                被转交人：{{ item.to[0].name }}
+              </p> -->
               <p v-if="item.type === 8">
                 转交超限审批人：{{ item.to[0].name }}
               </p>
@@ -603,10 +764,10 @@
                   item.type === 11
                     ? "审批备注："
                     : item.type === 14
-                      ? "转交备注："
-                      : item.type === 1
-                        ? "文字说明："
-                        : "备注："
+                    ? "转交备注："
+                    : item.type === 1
+                    ? "文字说明："
+                    : "备注："
                 }}{{ item.remark }}
               </p>
             </el-card>
@@ -616,7 +777,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
@@ -629,7 +790,7 @@
       :close-on-press-escape="false"
     >
       <div slot="title" class="dialog-title">
-        <span class="title-text">数据详情</span>
+        <span class="title-text">发起沟通</span>
       </div>
       <div class="preview-container">
         <el-form
@@ -638,7 +799,7 @@
           :rules="rules"
           :model="payload"
         >
-          <el-form-item label="选择沟通人" prop="ids">
+          <el-form-item label="选择被沟通人" prop="ids">
             <el-select
               v-model="payload.ids"
               multiple
@@ -653,7 +814,7 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="备注" prop="remark">
+          <el-form-item label="请输入沟通内容" prop="remark">
             <el-input
               v-model="payload.remark"
               type="textarea"
@@ -666,16 +827,18 @@
         </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>
 
-    <el-dialog title="提示" :visible.sync="confirmDialog" width="30%" center>
-      <span>转交次数已经超限，继续转交会提交转交超限审批， 是否要继续转交？</span>
+    <el-dialog title="提示" :visible.sync="confirmDialog" width="434px" center>
+      <div style="text-align: center;line-height: 25px;">
+        转交次数已经超限，继续转交会提交转交超限审批，
+      </div>
+      <div style="text-align: center;line-height: 25px;">是否要继续转交？</div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="confirmDialog = false">取消</el-button>
         <el-button type="primary" @click="handleContinue">继续转交</el-button>
@@ -770,22 +933,18 @@
       </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>
 
-    <el-dialog
+    <!-- <el-dialog
       title="编辑办事项目"
       :visible.sync="dialogEventType"
       width="30%"
       center
     >
-      <!-- <div class="text-center">
-        {{ convenience && convenience.eventType.approvalReminder }}
-      </div> -->
       <div>
         <el-cascader
           v-model="eventTypeId"
@@ -798,10 +957,9 @@
         />
       </div>
       <span slot="footer" class="dialog-footer">
-        <!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
         <el-button type="primary" @click="eventTypeUpdate">变更</el-button>
       </span>
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 
@@ -812,65 +970,65 @@ 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: "转交"
+      };
+      return statusMap[status];
     },
     evaluationFilter(status) {
       const statusMap = {
-        1: '不满意',
-        2: '满意',
-        3: '非常满意'
-      }
-      return statusMap[status]
+        1: "不满意",
+        2: "满意",
+        3: "非常满意"
+      };
+      return statusMap[status];
     }
     // 1 不满意, 2 满意, 3 非常满意
   },
@@ -894,7 +1052,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,
@@ -907,30 +1065,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,
@@ -938,54 +1096,69 @@ export default {
       dialogEventType: false,
       typeOptions: [],
       eventTypeId: undefined,
-      applyDetail: false
-    }
+      applyDetail: false,
+      isEventTypeChange: 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;
+        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 - this.convenience.createDate;
+              this.acceptanceMsec = tempData.acceptanceTime;
+              this.timeFormat("acceptanceTime", this.acceptanceMsec);
+              this.countdown(tempData.phase);
             }
-            break
-          // 办结
-          case 'PROCESSING':
+            break;
+          // 办理中
+          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 - 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);
             }
-            break
+            break;
+          // 办结
+          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.countdown(tempData.phase);
+            }
+            break;
         }
         // const now = Date.parse(new Date()).toString() / 1000;
         // switch (this.convenience.phase) {
@@ -1021,68 +1194,74 @@ 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;
         this.totalTimeInterval = setInterval(() => {
-          this.timeFormat('totalTime', this.totalMsec)
-          this.totalMsec++
-        }, 1000)
-      } else if (phase === 'FINISH') {
-        this.finishMsec
+          this.timeFormat("totalTime", this.totalMsec);
+          this.totalMsec++;
+        }, 1000);
+      } else if (phase === "FINISH") {
+        // console.log(233);
+        this.finishMsec;
+        this.totalMsec =
+          this.convenience.acceptanceTime +
+          this.convenience.prerequisitesTime +
+          this.convenience.finishTime;
+        this.timeFormat("totalTime", this.totalMsec);
         // this.totalTimeInterval = setInterval(() => {
         //   this.totalMsec++;
         // }, 1000);
@@ -1196,9 +1375,18 @@ export default {
       // }
     },
     timeFormat(obj, timeStamp) {
-      this[obj].hour = Math.floor(timeStamp / 3600)
-      this[obj].minute = Math.floor(((timeStamp % 86400) % 3600) / 60)
-      this[obj].second = Math.floor(((timeStamp % 86400) % 3600) % 60)
+      this[obj].hour =
+        Math.floor(timeStamp / 3600) < 9
+          ? "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);
+      this[obj].second =
+        Math.floor(((timeStamp % 86400) % 3600) % 60) < 9
+          ? "0" + Math.floor(((timeStamp % 86400) % 3600) % 60)
+          : Math.floor(((timeStamp % 86400) % 3600) % 60);
     },
     getCommunicationList() {
       communicationList({ id: this.id }).then(res => {
@@ -1206,10 +1394,10 @@ export default {
           const obj = {
             label: item.name,
             value: item.id
-          }
-          this.communicationOptions.push(obj)
-        })
-      })
+          };
+          this.communicationOptions.push(obj);
+        });
+      });
     },
     getStaffList() {
       staffList().then(res => {
@@ -1217,10 +1405,10 @@ export default {
           const obj = {
             label: item.name,
             value: item.id
-          }
-          this.staffOptions.push(obj)
-        })
-      })
+          };
+          this.staffOptions.push(obj);
+        });
+      });
     },
     resetPayload() {
       this.payload = {
@@ -1231,36 +1419,36 @@ 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('撤销成功')
-      })
+        // console.log(res);
+        this.$notify.success("撤销成功");
+      });
     },
     handleContact() {
       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() {},
@@ -1281,27 +1469,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,
@@ -1312,51 +1500,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
+      // console.log(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 =>
@@ -1364,24 +1552,37 @@ 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) {
+      // console.log(val);
+      // handle
+      this.payload = {
+        id: this.id,
+        type: 4,
+        version: this.convenience.version,
+        remark: val
+      };
+      this.updateType = 4;
+      this.updateData();
+      // this.dialogEventType = false;
+    },
     handleChange(val) {
-      console.log(val)
+      // console.log(val);
     },
     apply() {
       // this.$refs.updateForm.validate(valid=>{
@@ -1389,45 +1590,48 @@ 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;
           }
-          this.getInfo()
+          if (this.updateType === 4) {
+            this.isEventTypeChange = false;
+          }
+          this.getInfo();
         }
-      })
+      });
     },
     // handlePreviewAttachment(url) {
     //   const fileType = url.substr(url.lastIndexOf(".") + 1);
@@ -1439,15 +1643,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 = {
@@ -1455,24 +1659,41 @@ 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;
     }
   },
   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 = `${
+  //     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 scope>
 .convenienceInfo {
   padding: 40px 50px;
+  margin-bottom: 10px;
 }
 .convenienceTitle {
   display: flex;
@@ -1516,14 +1737,14 @@ export default {
   border-top: 4px solid #f2f2f2;
   position: absolute;
   left: 30%;
-  width: 227px;
+  width: 15%;
   top: 28%;
 }
 .line_right {
   border-top: 4px solid #f2f2f2;
   position: absolute;
   right: 30%;
-  width: 227px;
+  width: 15%;
   top: 28%;
 }
 .acceptanceOptionsLayout div p:nth-child(2) {
@@ -1540,6 +1761,7 @@ export default {
 }
 .timeout {
   color: #ff3000;
+  position: absolute;
 }
 .icon_timeout {
   width: 12px;
@@ -1611,7 +1833,7 @@ export default {
 .recordLayout {
   padding-top: 26px;
   background: #fff;
-  margin-top: 25px;
+  /* margin-top: 25px; */
 }
 .timeLine {
   padding: 130px 73px;
@@ -1624,7 +1846,7 @@ export default {
   text-align: left;
 }
 .timerDiv {
-  width: 225px;
+  width: 137px;
   text-align: left;
   margin: 0 auto;
   line-height: 25px;
@@ -1636,10 +1858,11 @@ export default {
   display: inline-block;
   line-height: 30px;
   width: 100%;
-  padding: 0 28px;
+  padding: 0 80px;
 }
 .approveUl > li {
-  width: 50%;
+  /* width: 50%; */
+  margin-right: 10px;
   float: left;
 }
 .icon_approve {
@@ -1661,4 +1884,72 @@ export default {
   background: url("./img/approve_null.png") no-repeat;
   background-size: cover;
 }
+/* .timeLine > .el-card {
+  border-radius: 0;
+  border: none;
+}
+.timeLine > .el-card__body {
+  padding: 5px 48px;
+} */
+.contact_staff {
+  border: none;
+  color: #787878;
+}
+.contact_self {
+  border: none;
+  color: #787878;
+}
+.contact_staff > .el-card__body {
+  padding: 20px 48px 15px 48px;
+}
+h3 {
+  color: #000000;
+}
+.el-timeline-item__content {
+  margin-bottom: 63px;
+}
+.el-timeline-item__timestamp.is-top {
+  margin-bottom: 22px;
+}
+/* .el */
+.el-timeline-item__timestamp {
+  color: #787878;
+}
+.approveUl > li > .el-tag.el-tag--info {
+  background-color: #f9f9f9;
+  border: 0;
+  color: #787878;
+  height: 42px;
+  border-radius: 10px;
+}
+.icon_zj {
+  background: url("./img/icon_zj.png") no-repeat;
+  width: 21px;
+  height: 19px;
+  display: inline-block;
+  background-size: cover;
+  margin-right: 6px;
+  vertical-align: top;
+}
+.icon_sh {
+  background: url("./img/icon_sh.png") no-repeat;
+  width: 19px;
+  height: 20px;
+  display: inline-block;
+  background-size: cover;
+  margin-right: 6px;
+  vertical-align: top;
+}
+.icon_bj {
+  background: url("./img/icon_bj.png") no-repeat;
+  width: 20px;
+  height: 14px;
+  display: inline-block;
+  background-size: cover;
+  margin-right: 4px;
+  /* vertical-align: top; */
+}
+/* .eventType > input {
+  border:none;
+} */
 </style>
diff --git a/src/views/convenience/img/icon_bj.png b/src/views/convenience/img/icon_bj.png
new file mode 100644
index 0000000..ae7c1c6
Binary files /dev/null and b/src/views/convenience/img/icon_bj.png differ
diff --git a/src/views/convenience/img/icon_sh.png b/src/views/convenience/img/icon_sh.png
new file mode 100644
index 0000000..6c46b7e
Binary files /dev/null and b/src/views/convenience/img/icon_sh.png differ
diff --git a/src/views/convenience/img/icon_zj.png b/src/views/convenience/img/icon_zj.png
new file mode 100644
index 0000000..efd52fb
Binary files /dev/null and b/src/views/convenience/img/icon_zj.png differ
diff --git a/src/views/convenience/list.vue b/src/views/convenience/list.vue
index 61db325..eb9671f 100644
--- a/src/views/convenience/list.vue
+++ b/src/views/convenience/list.vue
@@ -1,31 +1,12 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" style="padding-top:15px">
     <div class="filter-container">
-      <!-- <el-button
-        class="filter-item"
-        style="margin-left: 10px;"
-        type="primary"
-        icon="el-icon-edit"
-        @click="handleJump('create')"
-      >新增
-      </el-button>
-      <el-button
-        class="filter-item"
-        style="margin-left: 10px;"
-        type="primary"
-        @click="handleExport"
-      >导出
-      </el-button> -->
-      <!-- <el-cascader
-        v-model="selectType"
-        :options="types"
-        @change="handleTypeChange"
-      ></el-cascader> -->
       <el-button
         type="primary"
         style="position:absolute;right:50px;top:120px"
         @click="$router.push('/convenience/add')"
-      ><i class="el-icon-plus" /> 直接建立工单</el-button>
+        ><i class="el-icon-plus" /> 直接建立工单</el-button
+      >
       <div class="title">工单列表</div>
       <div style="margin-bottom:15px;margin-top:15px" />
       <el-radio-group v-model="listQuery.phase">
@@ -35,108 +16,25 @@
         <el-radio-button label="PROCESSING">办理中</el-radio-button>
         <el-radio-button label="FINISH">已办结</el-radio-button>
       </el-radio-group>
-      <br>
-      <br>
+      <br />
+      <br />
       <el-radio-group v-model="listQuery.status">
         <el-radio-button :label="undefined">全部状态</el-radio-button>
         <el-radio-button label="MINE">我处理</el-radio-button>
         <el-radio-button label="FORWARDED">已转交</el-radio-button>
-        <el-radio-button
-          label="FORWARDED_APPLY"
-        >转交超限审批中</el-radio-button>
+        <el-radio-button label="FORWARDED_APPLY"
+          >转交超限审批中</el-radio-button
+        >
         <el-radio-button label="SUBMIT_APPLY">已提交审批</el-radio-button>
         <el-radio-button label="WAIT_APPLY">待我审批</el-radio-button>
       </el-radio-group>
-      <br>
-      <br>
+      <br />
+      <br />
     </div>
 
-    <!-- <el-table
-      class="tb"
-      v-loading="listLoading"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%;"
-    >
-      <el-table-column label="流水号" min-width="150px" align="center">
-        <template slot-scope="scope">
-          <el-tag
-            style="cursor: pointer"
-            @click="
-              $router.push({
-                path: '/convenience/detail',
-                query: { id: scope.row.id }
-              })
-            "
-            >{{ scope.row.serialNumber }}</el-tag
-          >
-        </template>
-      </el-table-column>
-
-      <el-table-column label="阶段" min-width="150px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.phase | phaseFilter }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="发起人" min-width="150px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.sponsor | sponsorFilter }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="申办人" min-width="150px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.residentInformation.name }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="办理人" min-width="150px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.currentResponsiblePerson.name }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="申请事项" min-width="150px" align="center">
-        <template slot-scope="scope">
-          <span>{{
-            scope.row.eventType && scope.row.eventType.eventName
-          }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="创建时间" min-width="150px" align="center">
-        <template slot-scope="scope">
-          <span class="">{{
-            scope.row.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
-          }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="任务状态" min-width="150px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.statusList[0].status | statusFilter }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="操作" width="300px" fixed="right" align="center">
-        <template slot-scope="scope">
-          <el-button
-            v-if="scope.row.phase === 'PENDING_ORDER'"
-            type="primary"
-            size="mini"
-            @click="handleUpdate(scope.row, 5)"
-            >接单</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table> -->
-
     <div class="convenienceList">
       <div
-        v-for="item in list"
+        v-for="(item, index) in list"
         :key="item.id"
         class="convenience_item"
         @click="
@@ -172,17 +70,19 @@
           </div>
           <div style="flex:1">
             <p style="font-size:20px;color:#ff6918">
-              <i class="icon_timer" />04:25:30
+              <i class="icon_timer" />{{
+                (timers && timeFormat(timers[index].time)) || "00:00:00"
+              }}
             </p>
             <p>
-              <!-- v-if="item.phase === 'PENDING_ORDER'" -->
               <el-button
                 v-if="item.phase === 'PENDING_ORDER'"
                 style="margin-left:50px"
                 type="primary"
                 size="mini"
                 @click="handleUpdate(item, 5)"
-              >接单</el-button>
+                >接单</el-button
+              >
             </p>
           </div>
         </div>
@@ -276,10 +176,10 @@
 
 <script>
 // import Pagination from "@/components/Pagination";
-import { list, typeList, update } from '@/api/convenience'
-import { parseTime } from '@/utils'
-import { staffList } from '@/api/staff'
-import AliOss from '@/components/AliOSS/index.vue'
+import { list, typeList, update } from "@/api/convenience";
+import { parseTime } from "@/utils";
+import { staffList } from "@/api/staff";
+import AliOss from "@/components/AliOSS/index.vue";
 
 export default {
   components: {
@@ -289,48 +189,48 @@ 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: "转交"
+      };
+      return statusMap[status];
     }
   },
   data() {
@@ -361,68 +261,126 @@ export default {
       },
       msec: 0,
       rules: {
-        ids: [{ required: true, message: '请选择操作对象', trigger: 'change' }]
-      }
-    }
+        ids: [{ required: true, message: "请选择操作对象", trigger: "change" }]
+      },
+      timers: undefined,
+      timersInterval:undefined
+    };
   },
   watch: {
-    'listQuery.phase': {
+    "listQuery.phase": {
       // 深度监听，可监听到对象、数组的变化
       handler(val) {
-        this.listQuery.phase = val
-        this.getList()
+        this.listQuery.phase = val;
+        this.getList();
       },
       deep: true // true 深度监听
     },
-    'listQuery.status': {
+    "listQuery.status": {
       // 深度监听，可监听到对象、数组的变化
       handler(val) {
-        this.listQuery.status = val
-        this.getList()
+        this.listQuery.status = val;
+        this.getList();
       },
       deep: true // true 深度监听
     }
   },
   created() {
-    this.getList()
-    this.getStaffList()
+    this.getList();
+    this.getStaffList();
   },
   methods: {
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       list(this.listQuery).then(res => {
-        this.list = res.d.records
-        this.listLoading = false
-
-        const tempData = res.d.records
-        const now = Date.parse(new Date()).toString() / 1000
-        tempData.map(item => {
+        this.list = res.d.records;
+        this.listLoading = false;
+        clearInterval(this.timersInterval)
+        const tempData = res.d.records;
+        const now = Date.parse(new Date()).toString() / 1000;
+        let arr = [];
+        tempData.map((item, index) => {
+          // console.log(item);
           // PREREQUISITES: "要件准备中",
           // PROCESSING: "办理中",
           // FINISH: "办结"
+          let msec = [];
+          let obj = {};
           switch (item.phase) {
-            case 'PENDING_ORDER':
-              console.log(item.createDate)
-              // this.countdown()
-              this.msec = now - item.createDate
-              // this.timeFormat(now-item.createDate)
-              // this.msec=item.createDate
-              break
-            case 'PREREQUISITES':
-              this.msec = now - item.createDate
-              break
-            case 'PROCESSING':
-              break
-            case 'FINISH':
-              break
+            case "PENDING_ORDER":
+              // 待接单
+              // console.log(item.createDate)
+              // this.timers[index]++;
+              msec = now - item.createDate;
+              // msec++;
+              // console.log(msec);
+              obj = {
+                time: msec,
+                phase: item.phase
+              };
+
+              arr.push(obj);
+              break;
+            case "PREREQUISITES":
+              // 要件准备
+              // console.log(index);
+              // console.log(now);
+              // console.log(item.createDate);
+              // console.log(item.acceptanceTime);
+              // console.log(now - item.createDate - item.acceptanceTime);
+              msec = now - item.createDate - item.acceptanceTime;
+              obj = {
+                time: msec,
+                phase: item.phase
+              };
+              arr.push(obj);
+              break;
+            case "PROCESSING":
+              // 办理中
+              msec =
+                now -
+                item.createDate -
+                item.acceptanceTime -
+                item.prerequisitesTime;
+              obj = {
+                time: msec,
+                phase: item.phase
+              };
+              arr.push(obj);
+              break;
+            case "FINISH":
+              msec =
+                item.acceptanceTime + item.prerequisitesTime + item.finishTime;
+              obj = {
+                time: msec,
+                phase: item.phase
+              };
+              arr.push(obj);
+              // 办结
+              break;
+            default:
+              // console.log("default");
+              break;
           }
-        })
-      })
+        });
+        // console.log(arr);
+        this.timersInterval = setInterval(() => {
+          // console.log(arr);
+          if (arr.length > 0) {
+            arr.map(item => {
+              if (item.phase !== "FINISH") {
+                item.time++;
+              }
+            });
+          }
+          this.timers = arr;
+        }, 1000);
+      });
     },
     getTypeList() {
       typeList().then(res => {
-        console.log(res)
-      })
+        // console.log(res);
+      });
     },
     getStaffList() {
       staffList().then(res => {
@@ -430,10 +388,10 @@ export default {
           const obj = {
             label: item.name,
             value: item.id
-          }
-          this.staffOptions.push(obj)
-        })
-      })
+          };
+          this.staffOptions.push(obj);
+        });
+      });
     },
     handleTypeChange() {},
     resetPayload() {
@@ -445,140 +403,105 @@ export default {
         attachmentList: undefined,
         approve: undefined,
         evaluation: undefined
-      }
+      };
     },
     handleUpdate(row, type) {
-      this.resetPayload()
+      this.resetPayload();
       this.$nextTick(() => {
-        this.$refs.applyForm.clearValidate()
-      })
-      this.updateType = type
-      this.payload.id = row.id
-      this.payload.version = row.version
-      this.payload.type = type
+        this.$refs.applyForm.clearValidate();
+      });
+      this.updateType = type;
+      this.payload.id = row.id;
+      this.payload.version = row.version;
+      this.payload.type = type;
       switch (type) {
         case 5:
-          this.applyDialog = true
-          break
+          this.applyDialog = true;
+          break;
         case 6:
-          this.applyDialog = true
-          break
+          this.applyDialog = true;
+          break;
         case 11:
-          this.applyDialog = true
-          break
+          this.applyDialog = true;
+          break;
         case 13:
-          this.applyDialog = true
-          break
+          this.applyDialog = true;
+          break;
         case 14:
-          this.applyDialog = true
-          break
+          this.applyDialog = true;
+          break;
         default:
-          this.updateData()
-          break
+          this.updateData();
+          break;
       }
     },
     updateData() {
       update(this.payload).then(res => {
         if (res.c === 200) {
-          this.$notify.success('操作成功')
-          this.getList()
+          this.$notify.success("操作成功");
+          this.getList();
         }
-      })
+      });
     },
     apply() {
       this.$nextTick(() => {
         this.$refs.applyForm.validate(valid => {
           if (valid) {
-            this.updateData()
-            this.applyDialog = false
+            this.updateData();
+            this.applyDialog = false;
           }
-        })
-      }, 100)
+        });
+      }, 100);
     },
     handleFilterPhase(phase, event) {
       // console.log(event.target.tagName==='SPAN');
-      if (event.target.tagName === 'SPAN') {
+      if (event.target.tagName === "SPAN") {
         event.target.parentElement.setAttribute(
-          'class',
-          'el-button el-button--' +
-            (phase === undefined ? 'primary' : 'default') +
-            ' el-button--medium is-round'
-        )
+          "class",
+          "el-button el-button--" +
+            (phase === undefined ? "primary" : "default") +
+            " el-button--medium is-round"
+        );
       } else {
         event.target.setAttribute(
-          'class',
-          'el-button el-button--' +
-            (phase === undefined ? 'primary' : 'default') +
-            ' el-button--medium is-round'
-        )
+          "class",
+          "el-button el-button--" +
+            (phase === undefined ? "primary" : "default") +
+            " el-button--medium is-round"
+        );
       }
-      this.listQuery.phase = phase
-      this.getList()
+      this.listQuery.phase = phase;
+      this.getList();
     },
     handleFilterStatus(status) {
-      this.listQuery.status = status
-      this.getList()
+      this.listQuery.status = status;
+      this.getList();
     },
     handlePreview() {},
     handleRemove() {},
     beforeRemove() {},
     handleExceed() {},
     timeFormat(timeStamp) {
-      // console.log(timeStamp);
-      const timeStr = `${Math.floor(timeStamp / 3600)}:${Math.floor(
-        ((timeStamp % 86400) % 3600) / 60
-      )}:${Math.floor(((timeStamp % 86400) % 3600) % 60)}`
-      // console.log(time);
-      // return time
-      return timeStr
-      // console.log(Math.floor(timeStamp / 3600));
-      // this[obj].hour = Math.floor(timeStamp / 3600);
-      // this[obj].minute = Math.floor(((timeStamp % 86400) % 3600) / 60);
-      // this[obj].second = Math.floor(((timeStamp % 86400) % 3600) % 60);
+      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;
     },
-    countdown(msec) {
-      this.console.log(msec)
-
-      // if (phase === "PENDING_ORDER") {
-      //   this.acceptanceInterval = setInterval(() => {
-      //     this.timeFormat("acceptanceTime", this.acceptanceMsec);
-      //     this.acceptanceMsec++;
-      //   }, 1000);
-      //   // 当前阶段的时间加上
-      //   this.totalMsec = this.acceptanceMsec;
-      //   this.totalTimeInterval = setInterval(() => {
-      //     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.totalTimeInterval = setInterval(() => {
-      //     this.timeFormat("totalTime", this.totalMsec);
-      //     this.totalMsec++;
-      //   }, 1000);
-      // } else if (phase === "PROCESSING") {
-      //   this.finishTimeInterval = setInterval(() => {
-      //     this.timeFormat("finishTime", this.finishMsec);
-      //     this.finishMsec++;
-      //   }, 1000);
-      //   this.totalMsec =
-      //     this.convenience.acceptanceTime +
-      //     this.convenience.prerequisitesTime +
-      //     this.finishMsec;
-      //   this.totalTimeInterval = setInterval(() => {
-      //     this.timeFormat("totalTime", this.totalMsec);
-      //     this.totalMsec++;
-      //   }, 1000);
-      // } else if (phase === "FINISH") {
-      //   this.finishMsec;
-      // }
+    countdown(index, status) {
+      //
     }
   }
-}
+};
 </script>
 
 <style scope>
@@ -652,10 +575,10 @@ export default {
   border: 0;
   font-size: 12px !important;
 }
-.el-radio-button:first-child .el-radio-button__inner{
+.el-radio-button:first-child .el-radio-button__inner {
   border-radius: 17px;
 }
-.el-radio-button:last-child .el-radio-button__inner{
+.el-radio-button:last-child .el-radio-button__inner {
   border-radius: 17px;
 }
 </style>
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 51b0125..f3ff56b 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner class="github-corner" />
+    <!-- <github-corner class="github-corner" /> -->
 
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
       <line-chart :chart-data="lineChartData" />
-    </el-row>
+    </el-row> -->
 
-    <el-row :gutter="32">
+    <!-- <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <raddar-chart />
@@ -24,9 +24,9 @@
           <bar-chart />
         </div>
       </el-col>
-    </el-row>
+    </el-row> -->
 
-    <el-row :gutter="8">
+    <!-- <el-row :gutter="8">
       <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
         <transaction-table />
       </el-col>
@@ -36,7 +36,7 @@
       <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
         <box-card />
       </el-col>
-    </el-row>
+    </el-row> -->
   </div>
 </template>
 
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 001d20e..7035e30 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -60,7 +60,7 @@
               />
               <!-- style="width:290px" -->
               <!-- <el-button @click="handleSms">获取验证码</el-button> -->
-              <button class="btn_getCode" type="button" :disabled="time!=5" @click="handleSms">
+              <button class="btn_getCode" type="button" :disabled="getCodeDisabled" @click="handleSms">
                 {{ codeText }}
               </button>
             </el-form-item>
@@ -134,7 +134,8 @@ export default {
       redirect: undefined,
       otherQuery: {},
       codeText: '获取验证码',
-      time: 5
+      time: 5,
+      getCodeDisabled:false
     }
   },
   watch: {
@@ -253,6 +254,7 @@ export default {
       }, {})
     },
     handleSms() {
+      this.getCodeDisabled=false;
       const payload = {
         phone: this.loginForm.username,
         category: 'SIGNIN'
@@ -266,6 +268,7 @@ export default {
         }
       }).then(res => {
         if (res.data.c === 200) {
+          this.getCodeDisabled=true;
           this.timer()
           this.$notify({
             title: '成功',
@@ -277,12 +280,14 @@ export default {
       })
     },
     timer() {
+      this.codeText = `${this.time}s 后重新获取`
       var interval = setInterval(() => {
         this.time--
         this.codeText = `${this.time}s 后重新获取`
         if (this.time === 0) {
           this.time = 5
           this.codeText = '获取验证码'
+          this.getCodeDisabled=false
           clearInterval(interval)
         }
       }, 1000)
diff --git a/src/views/workBook/img/comingSoon.png b/src/views/workBook/img/comingSoon.png
new file mode 100644
index 0000000..14973bc
Binary files /dev/null and b/src/views/workBook/img/comingSoon.png differ
diff --git a/src/views/workBook/list.vue b/src/views/workBook/list.vue
index aed5871..a0d2413 100644
--- a/src/views/workBook/list.vue
+++ b/src/views/workBook/list.vue
@@ -1,8 +1,16 @@
 <template>
   <div class="app-container">
-    <div class="filter-container" />
+    <!-- <div class="filter-container" /> -->
+    <div class="workBookLayout">
+      <div class="title">工作手册管理</div>
+      <div class="text-center"style="padding:10% 0">
+        <img class="img" src="./img/comingSoon.png" alt="" />
+        <h2>业务正在努力开发中...</h2>
+        <div style="color:#787878">该功能即将上线，请稍等</div>
+      </div>
+    </div>
 
-    <el-table
+    <!-- <el-table
       v-loading="listLoading"
       :data="list"
       border
@@ -45,13 +53,13 @@
           <span>{{ scope.row.releaseTime }}</span>
         </template>
       </el-table-column>
-    </el-table>
+    </el-table> -->
   </div>
 </template>
 
 <script>
-import Pagination from '@/components/Pagination'
-import { workBookList } from '@/api/workBook'
+import Pagination from "@/components/Pagination";
+import { workBookList } from "@/api/workBook";
 
 export default {
   components: { Pagination },
@@ -65,20 +73,35 @@ export default {
         size: 10,
         keyword: undefined
       }
-    }
+    };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     getList() {
       workBookList(this.listQuery).then(res => {
-        console.log(res)
-        this.list = res.d.records
-      })
+        console.log(res);
+        this.list = res.d.records;
+      });
     }
   }
-}
+};
 </script>
 
-<style></style>
+<style scoped>
+.workBookLayout {
+  background: #fff;
+  height: 100%;
+}
+.title {
+  border-left: 5px solid #1890ff;
+  padding-left: 8px;
+  font-size: 18px;
+  color: #000000;
+}
+.img {
+  width: 486px;
+  height: 268px;
+}
+</style>