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 8062b11..074ae32 100644
--- a/src/views/convenience/detail.vue
+++ b/src/views/convenience/detail.vue
@@ -1,21 +1,45 @@
 <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">
         <div class="convenienceTitle">
-          <i class="icon_list"></i>
+          <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
+                ref="cascader"
+                v-else
+                v-model="convenience.eventType.id"
+                :options="typeOptions"
+                :show-all-levels="false"
+                :props="{ emitPath: false }"
+                placeholder="编辑"
+                @change="handleEventTypeChange"
+              />
+              <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="cascader"
+                >{{ isEventTypeChange ? "取消" : "编辑" }}</el-button
+              >
               <!-- <i class="icon_timer"></i
               ><span class="text_timer">
                 {{
@@ -50,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> -->
@@ -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' &&
@@ -71,12 +98,19 @@
                   convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
                   convenience.statusList[0].status !== 'FORWARDED'
               "
-              @click="handleChangeEventType"
               type="primary"
+              @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
-              type="primary"
               v-if="
                 convenience &&
                   convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
@@ -84,19 +118,26 @@
                   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 &&
                   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" />
               办结
             </el-button>
 
@@ -109,9 +150,10 @@
                   convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
                   convenience.statusList[0].status !== 'FORWARDED'
               "
+              style="margin-right:16px;"
               type="primary"
               @click="handleApprovalReminder(11)"
-              >发起审批</el-button
+              ><i class="icon_sh" />发起审批</el-button
             >
 
             <el-button
@@ -120,15 +162,16 @@
                   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" />转交任务</el-button
             >
           </div>
         </div>
-        <div class="hr"></div>
+        <div class="hr" />
         <el-row :gutter="20" style="color:#787878;margin-bottom:30px">
           <el-col :span="6">
             <div>流水号：{{ convenience && convenience.serialNumber }}</div>
@@ -153,21 +196,12 @@
           <el-col :span="6"
             ><div>
               受理人：{{
-                convenience && convenience.currentResponsiblePerson.name
+                convenience && convenience.firstResponsiblePerson.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">
-            总办理时长：<i class="icon_timer"></i
-            ><span class="text_timer">
+          <el-col :span="6" style="text-align:right">
+            总办理时长：<i class="icon_timer" /><span class="text_timer">
               {{
                 `${
                   this.totalTime.hour > 9
@@ -185,24 +219,158 @@
               }}
             </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="6"
+            style="display: flex;align-items: center;flex-direction:column"
+          >
             <div
-              style="margin-left:10px"
+              style="width:100%;display: flex;align-items: center;"
+              class="status_btn"
+            >
+              任务状态：<span style="color:#ff5a00">{{
+                convenience && convenience.statusList[0].status | statusFilter
+              }}</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' &&
+                    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 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> -->
+            <!-- <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
+            </div> -->
+
+            <!-- <div
               v-if="
                 convenience &&
                   convenience.phase !== 'FINISH' &&
@@ -225,14 +393,14 @@
               >
             </div>
             <div
-              style="margin-left:10px"
               v-if="
                 convenience &&
                   convenience.phase !== 'FINISH' &&
                   convenience.statusList[0].status === 'SUBMIT_APPLY'
               "
-            >
-              <el-popover
+              style="margin-left:10px"
+            > -->
+            <!-- <el-popover
                 placement="bottom-start"
                 title=""
                 width="410"
@@ -250,19 +418,65 @@
                         approve_null: item.approve === null,
                         approve_no: !item.approve
                       }"
-                    ></i
-                    >{{ item.residentInformation.name }}
+                    />{{ item.residentInformation.name }}
                   </li>
                 </ul>
                 <el-button
                   type="primary"
-                  @click="handleUpdate(12)"
                   style="position:relative;left:155px;"
+                  @click="handleUpdate(12)"
                   >撤销</el-button
                 >
-                <el-link type="primary" slot="reference">查看审批详情</el-link>
-              </el-popover>
+                <el-link slot="reference" type="primary">查看审批详情</el-link>
+              </el-popover> -->
+
+            <!-- </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">
@@ -307,7 +521,7 @@
 
         <el-row class="text-center acceptanceOptionsLayout">
           <el-col :span="8">
-            <i class="a_times icon_acceptance"></i>
+            <i class="a_times icon_acceptance" />
             <p>受理</p>
             <div class="timerDiv">
               <div class="text_left">承诺时长 24小时内</div>
@@ -329,23 +543,23 @@
                   }`
                 }}</span
                 ><span
-                  class="timeout"
                   v-if="acceptanceMsec > 57600 && acceptanceMsec < 86400"
-                  ><i class="icon_timeout"></i>即将超时</span
+                  class="timeout"
+                  ><i class="icon_timeout" />即将超时</span
                 >
-                <span class="timeout" v-if="acceptanceMsec > 86400"
-                  ><i class="icon_timeout"></i>已超时</span
+                <span v-if="acceptanceMsec > 86400" class="timeout"
+                  ><i class="icon_timeout" />已超时</span
                 >
               </div>
             </div>
           </el-col>
           <el-col :span="8">
-            <div class="line_left"></div>
-            <div class="line_right"></div>
-            <i class="a_times icon_prepare"></i>
+            <div class="line_left" />
+            <div class="line_right" />
+            <i class="a_times icon_prepare" />
             <p>要件准备</p>
             <div class="timerDiv">
-              <div>承诺时长 24小时内</div>
+              <div>承诺时长 尽快</div>
               <div>
                 实际时长
                 <span class="duration">{{
@@ -363,31 +577,31 @@
                       : this.prerequisitesTime.second
                   }`
                 }}</span>
-                <span
-                  class="timeout"
+                <!-- <span
                   v-if="acceptanceMsec > 57600 && acceptanceMsec < 86400"
-                  ><i class="icon_timeout"></i>即将超时</span
-                >
-                <span class="timeout" v-if="acceptanceMsec > 86400"
-                  ><i class="icon_timeout"></i>已超时</span
+                  class="timeout"
+                  ><i class="icon_timeout" />即将超时</span
                 >
+                <span v-if="acceptanceMsec > 86400" class="timeout"
+                  ><i class="icon_timeout" />已超时</span
+                > -->
               </div>
             </div>
           </el-col>
           <el-col :span="8">
-            <i class="a_times icon_finish"></i>
+            <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">
@@ -407,21 +621,28 @@
                     }`
                   }}
                 </span>
+                <!-- {{
+                  finishMsec +
+                    ":" +
+                    convenience&&convenience.eventType.commitmentTimeLimit * 3600
+                }} -->
                 <span
-                  class="timeout"
                   v-if="
-                    finishMsec >= convenience &&
-                      convenience.eventType.commitmentTimeLimit * 3600
+                    finishMsec >=
+                      (convenience &&
+                        convenience.eventType.commitmentTimeLimit * 3600)
                   "
-                  ><i class="icon_timeout"></i>已超时</span
+                  class="timeout"
+                  ><i class="icon_timeout" />已超时</span
                 >
                 <span
-                  class="timeout"
                   v-else-if="
-                    finishMsec >= convenience &&
-                      convenience.eventType.timeoutReminder * 3600
+                    finishMsec >=
+                      (convenience &&
+                        convenience.eventType.timeoutReminder * 3600)
                   "
-                  ><i class="icon_timeout"></i>即将超时</span
+                  class="timeout"
+                  ><i class="icon_timeout" />即将超时</span
                 >
               </div>
             </div>
@@ -535,7 +756,8 @@
           </div>
         </div> -->
       </div>
-    </el-card>
+    </div>
+    <!-- </el-card> -->
 
     <div class="recordLayout">
       <div style="border-left:5px solid #1890ff;padding-left:5px;float: left;">
@@ -543,10 +765,10 @@
       </div>
       <div style="float: right">
         <el-button
+          v-if="convenience && convenience.phase !== 'FINISH'"
           type="primary"
           style="margin-right:73px;"
           @click="handleContact"
-          v-if="convenience && convenience.phase !== 'FINISH'"
           >发起沟通</el-button
         >
       </div>
@@ -554,20 +776,24 @@
       <div class="timeLine">
         <el-timeline v-if="convenience">
           <el-timeline-item
-            :timestamp="item.createDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')"
-            placement="top"
             v-for="(item, index) in convenience.records"
             :key="index"
-          >
-            <!-- 'url(' + convenience.currentResponsiblePerson.avatar + ')' -->
-            <!-- 'url(https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)' -->
+            :timestamp="item.createDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')"
+            placement="top"
+            ><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 + ')'
               }"
-            ></i>
+            />
+
             <el-card
+              shadow="never"
               :class="{
                 contact_staff:
                   convenience.residentInformation.id !== item.from.id,
@@ -575,37 +801,61 @@
                   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">
-                被沟通人：<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
-                  style="cursor: pointer"
                   v-if="
-                    isAssetTypeAnImage(item.substr(item.lastIndexOf('.') + 1))
+                    isAssetTypeAnImage(
+                      attachment.substr(attachment.lastIndexOf('.') + 1)
+                    )
                   "
-                  @click="handleSetPreviewImg(item)"
-                  ><i class="icon_fujian"></i
-                  >{{ item.substring(item.lastIndexOf("/") + 1) }}</span
+                  style="cursor: pointer"
+                  @click="handleSetPreviewImg(attachment)"
                 >
-                <el-link v-else :href="item" :underline="false" target="_blank">
-                  <i class="icon_fujian"></i>
-                  {{ item.substring(item.lastIndexOf("/") + 1) }}
+                  <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" />
+                  {{ attachment.substring(attachment.lastIndexOf("/") + 1) }}
                 </el-link>
               </p>
               <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
+                  v-if="item.type === 14 || item.type === 8"
+                  style="margin-left:164px"
+                  >被转交人：{{ 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>
@@ -643,16 +893,16 @@
       :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
+          ref="contractForm"
           style="width:100%"
           :rules="rules"
           :model="payload"
-          ref="contractForm"
         >
-          <el-form-item label="选择沟通人" prop="ids">
+          <el-form-item label="选择被沟通人" prop="ids">
             <el-select
               v-model="payload.ids"
               multiple
@@ -664,16 +914,15 @@
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
-              >
-              </el-option>
+              />
             </el-select>
           </el-form-item>
-          <el-form-item label="备注" prop="remark">
+          <el-form-item label="请输入沟通内容" prop="remark">
             <el-input
-              type="textarea"
               v-model="payload.remark"
+              type="textarea"
               placeholder="请输入"
-            ></el-input>
+            />
           </el-form-item>
           <el-form-item prop="attachmentList">
             <AliOss v-model="payload.attachmentList" multiple />
@@ -688,10 +937,11 @@
       </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>
@@ -709,31 +959,30 @@
       :close-on-press-escape="false"
     >
       <div class="preview-container">
-        <el-form style="width:100%" ref="updateForm" :rules="rules">
+        <el-form ref="updateForm" style="width:100%" :rules="rules">
           <el-form-item
-            label="选择审批人"
             v-if="updateType === 8 || updateType === 11"
+            label="选择审批人"
           >
             <el-select
-              @change="handleChange"
               v-model="spr"
               placeholder="请选择"
               style="width:100%"
               :multiple="updateType !== 8"
+              @change="handleChange"
             >
               <el-option
                 v-for="item in staffOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
-              >
-              </el-option>
+              />
             </el-select>
           </el-form-item>
 
           <el-form-item
-            label="选择被转交人"
             v-if="updateType === 8 || updateType === 14"
+            label="选择被转交人"
           >
             <el-select v-model="bzjr" placeholder="请选择" style="width:100%">
               <el-option
@@ -741,8 +990,7 @@
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
-              >
-              </el-option>
+              />
             </el-select>
           </el-form-item>
 
@@ -758,16 +1006,18 @@
               `${
                 convenience && convenience.statusList[0].status === 'WAIT_APPLY'
                   ? '请输入不通过理由'
+                  : updateType === 16
+                  ? '申诉理由'
                   : '备注'
               }`
             "
           >
             <el-input
+              v-model="payload.remark"
               type="textarea"
               :autosize="{ minRows: 4, maxRows: 4 }"
-              v-model="payload.remark"
               placeholder="请输入"
-            ></el-input>
+            />
           </el-form-item>
         </el-form>
       </div>
@@ -794,15 +1044,12 @@
       </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"
@@ -812,13 +1059,12 @@
           placeholder="选择办事项目"
           style="width:100%"
           clearable
-        ></el-cascader>
+        />
       </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>
 
@@ -838,7 +1084,7 @@ export default {
   filters: {
     sponsorFilter(status) {
       const statusMap = {
-        SELF: "居民",
+        SELF: "群众",
         STAFF: "工作人员"
       };
       return statusMap[status];
@@ -854,7 +1100,7 @@ export default {
     },
     statusFilter(status) {
       const statusMap = {
-        MINE: "待我处理",
+        MINE: "我处理",
         FORWARDED: "已转交",
         FORWARDED_APPLY: "转交超限审批中",
         SUBMIT_APPLY: "已提交审批",
@@ -877,7 +1123,8 @@ export default {
         11: "发起审批",
         12: "撤销审批",
         13: "审批操作",
-        14: "转交"
+        14: "转交",
+        16: "提示"
       };
       return statusMap[status];
     },
@@ -955,7 +1202,9 @@ export default {
       dialogEventType: false,
       typeOptions: [],
       eventTypeId: undefined,
-      applyDetail: false
+      applyDetail: false,
+      isEventTypeChange: false,
+      cxPop: false
     };
   },
   created() {
@@ -970,6 +1219,7 @@ export default {
         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);
@@ -985,17 +1235,21 @@ export default {
           // 要件准备
           case "PREREQUISITES":
             if (tempData.prerequisitesTime === null) {
-              this.preMsec = now - this.convenience.createDate;
+              this.preMsec =
+                now - tempData.createDate - tempData.acceptanceTime;
               this.acceptanceMsec = tempData.acceptanceTime;
               this.timeFormat("acceptanceTime", this.acceptanceMsec);
               this.countdown(tempData.phase);
             }
             break;
-          // 办结
+          // 办理中
           case "PROCESSING":
             if (tempData.finishTime === null) {
               this.finishMsec =
-                now - this.preMsec - this.convenience.createDate;
+                now -
+                tempData.createDate -
+                tempData.acceptanceTime -
+                tempData.prerequisitesTime;
               this.acceptanceMsec = tempData.acceptanceTime;
               this.preMsec = tempData.prerequisitesTime;
               this.timeFormat("acceptanceTime", this.acceptanceMsec);
@@ -1003,6 +1257,20 @@ export default {
               this.countdown(tempData.phase);
             }
             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) {
@@ -1044,16 +1312,16 @@ export default {
       typeList().then(res => {
         this.typeOptions = [];
         res.d.map(i => {
-          let children = [];
+          const children = [];
 
           i.eventTypesList.map(c => {
-            let level2 = {
+            const level2 = {
               label: c.eventName,
               value: c.id
             };
             children.push(level2);
           });
-          let level1 = {
+          const level1 = {
             label: i.eventName,
             children
           };
@@ -1086,6 +1354,7 @@ export default {
         }, 1000);
       } else if (phase === "PROCESSING") {
         this.finishTimeInterval = setInterval(() => {
+          // console.log(233);
           this.timeFormat("finishTime", this.finishMsec);
           this.finishMsec++;
         }, 1000);
@@ -1093,18 +1362,144 @@ export default {
           this.convenience.acceptanceTime +
           this.convenience.prerequisitesTime +
           this.finishMsec;
+        console.log(this.totalMsec);
         this.totalTimeInterval = setInterval(() => {
           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);
+      } else {
+        // 除FINISH外total都要计时
+        // this.totalTimeInterval = setInterval(() => {
+        //   this.timeFormat(this.totalTime, this.totalMsec);
+        //   this.totalMsec++;
+        // }, 1000);
       }
+
+      // if (phase === "PENDING_ORDER") {
+      //   // 受理
+      //   if (this.convenience.acceptanceTime === null) {
+      //     this.acceptanceInterval = setInterval(() => {
+      //       this.acceptanceTime.hour = Math.floor(this.acceptanceMsec / 3600);
+      //       this.acceptanceTime.minute = Math.floor(
+      //         ((this.acceptanceMsec % 86400) % 3600) / 60
+      //       );
+      //       this.acceptanceTime.second = Math.floor(
+      //         ((this.acceptanceMsec % 86400) % 3600) % 60
+      //       );
+      //       this.totalTime = this.acceptanceTime;
+      //       this.acceptanceMsec++;
+      //     }, 1000);
+      //   } else {
+      //     this.acceptanceTime.hour = Math.floor(this.acceptanceMsec / 3600);
+      //     this.acceptanceTime.minute = Math.floor(
+      //       ((this.acceptanceMsec % 86400) % 3600) / 60
+      //     );
+      //     this.acceptanceTime.second = Math.floor(
+      //       ((this.acceptanceMsec % 86400) % 3600) % 60
+      //     );
+      //   }
+      // } else if (phase === "PREREQUISITES") {
+      //   // 要件准备
+      //   if (this.convenience.prerequisitesTime === null) {
+      //     this.prerequisitesInterval = setInterval(() => {
+      //       this.prerequisitesTime.hour = Math.floor(this.preMsec / 3600);
+      //       this.prerequisitesTime.minute = Math.floor(
+      //         ((this.preMsec % 86400) % 3600) / 60
+      //       );
+      //       this.prerequisitesTime.second = Math.floor(
+      //         ((this.preMsec % 86400) % 3600) % 60
+      //       );
+      //       // this.totalTime = this.acceptanceTime;
+      //       this.totalMsec = this.acceptanceMsec + this.preMsec;
+      //       this.totalTime.hour = Math.floor(this.totalMsec / 3600);
+      //       this.totalTime.minute = Math.floor(
+      //         ((this.totalMsec % 86400) % 3600) / 60
+      //       );
+      //       this.totalTime.second = Math.floor(
+      //         ((this.totalMsec % 86400) % 3600) % 60
+      //       );
+      //       this.preMsec++;
+      //     }, 1000);
+      //   } else {
+      //     this.prerequisitesTime.hour = Math.floor(this.preMsec / 3600);
+      //     this.prerequisitesTime.minute = Math.floor(
+      //       ((this.preMsec % 86400) % 3600) / 60
+      //     );
+      //     this.prerequisitesTime.second = Math.floor(
+      //       ((this.preMsec % 86400) % 3600) % 60
+      //     );
+      //   }
+      // } else if (phase === "PROCESSING") {
+      //   // 办结
+      //   if (this.convenience.finishTime === null) {
+      //     this.finishTimeInterval = setInterval(() => {
+      //       this.finishTime.hour = Math.floor(this.finishMsec / 3600);
+      //       this.finishTime.minute = Math.floor(
+      //         ((this.finishMsec % 86400) % 3600) / 60
+      //       );
+      //       this.finishTime.second = Math.floor(
+      //         ((this.finishMsec % 86400) % 3600) % 60
+      //       );
+      //       this.finishMsec++;
+      //     }, 1000);
+      //   } else {
+      //     this.finishTime.hour = Math.floor(this.finishMsec / 3600);
+      //     this.finishTime.minute = Math.floor(
+      //       ((this.finishMsec % 86400) % 3600) / 60
+      //     );
+      //     this.finishTime.second = Math.floor(
+      //       ((this.finishMsec % 86400) % 3600) % 60
+      //     );
+      //     console.log(this.convenience.finishTime);
+      //   }
+      // } else {
+      //   this.acceptanceTime.hour = Math.floor(this.acceptanceMsec / 3600);
+      //   this.acceptanceTime.minute = Math.floor(
+      //     ((this.acceptanceMsec % 86400) % 3600) / 60
+      //   );
+      //   this.acceptanceTime.second = Math.floor(
+      //     ((this.acceptanceMsec % 86400) % 3600) % 60
+      //   );
+      //   this.prerequisitesTime.hour = Math.floor(this.preMsec / 3600);
+      //   this.prerequisitesTime.minute = Math.floor(
+      //     ((this.preMsec % 86400) % 3600) / 60
+      //   );
+      //   this.prerequisitesTime.second = Math.floor(
+      //     ((this.preMsec % 86400) % 3600) % 60
+      //   );
+      //   this.finishTime.hour = Math.floor(this.finishMsec / 3600);
+      //   this.finishTime.minute = Math.floor(
+      //     ((this.finishMsec % 86400) % 3600) / 60
+      //   );
+      //   this.finishTime.second = Math.floor(
+      //     ((this.finishMsec % 86400) % 3600) % 60
+      //   );
+      // }
     },
     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 => {
@@ -1148,11 +1543,12 @@ export default {
         type: 2
       };
       update(payload).then(res => {
-        console.log(res);
+        // console.log(res);
         this.$notify.success("撤销成功");
       });
     },
     handleContact() {
+      this.resetPayload();
       this.$nextTick(() => {
         this.$refs.contractForm.clearValidate();
       });
@@ -1162,7 +1558,7 @@ export default {
       this.payload.version = this.convenience.version;
     },
     getNames(arr) {
-      let temp = [];
+      const temp = [];
       arr.map(item => {
         temp.push(item.name);
       });
@@ -1225,7 +1621,7 @@ export default {
       this.handleUpdate(11);
     },
     handleUpdate(type) {
-      console.log(type);
+      // console.log(type);
       this.resetPayload();
       this.updateType = type;
       this.payload.id = this.convenience.id;
@@ -1260,7 +1656,7 @@ export default {
         case 14:
           // console.log("handle14");
           // 转交
-          let frequencys = this.convenience.records.filter(
+          const frequencys = this.convenience.records.filter(
             m => m.frequency !== null
           );
           if (
@@ -1286,8 +1682,21 @@ export default {
           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=>{
@@ -1331,6 +1740,20 @@ export default {
             this.$router.push("/convenience/list");
             return;
           }
+          if (this.updateType === 4) {
+            this.isEventTypeChange = false;
+          }
+          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();
         }
       });
@@ -1365,6 +1788,15 @@ export default {
       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) {
@@ -1373,12 +1805,29 @@ export default {
     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;
@@ -1422,14 +1871,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) {
@@ -1446,6 +1895,7 @@ export default {
 }
 .timeout {
   color: #ff3000;
+  position: absolute;
 }
 .icon_timeout {
   width: 12px;
@@ -1495,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;
@@ -1517,7 +1976,7 @@ export default {
 .recordLayout {
   padding-top: 26px;
   background: #fff;
-  margin-top: 25px;
+  /* margin-top: 25px; */
 }
 .timeLine {
   padding: 130px 73px;
@@ -1530,7 +1989,7 @@ export default {
   text-align: left;
 }
 .timerDiv {
-  width: 225px;
+  width: 137px;
   text-align: left;
   margin: 0 auto;
   line-height: 25px;
@@ -1542,10 +2001,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 {
@@ -1567,4 +2027,110 @@ 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;
+  padding-left: 25px;
+}
+.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; */
+}
+.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 dd4e21a..ad27b6c 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
       >
@@ -32,7 +32,7 @@
       <br />
     </div>
 
-    <div class="convenienceList">
+    <div class="convenienceList" v-loading="listLoading">
       <div
         v-for="(item, index) in list"
         :key="item.id"
@@ -44,7 +44,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}")
@@ -57,11 +57,14 @@
             <p>流水号：{{ item.serialNumber }}</p>
             <p>
               阶段：{{ item.phase | phaseFilter }}
-              <i class="icon_timeout" v-if="timers&&timers[index].status !== null"></i>
+              <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>
@@ -77,10 +80,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"
               }}
@@ -88,13 +93,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>
+            </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>
@@ -200,7 +220,7 @@ export default {
   filters: {
     sponsorFilter(status) {
       const statusMap = {
-        SELF: "居民",
+        SELF: "群众",
         STAFF: "工作人员"
       };
       return statusMap[status];
@@ -216,10 +236,10 @@ export default {
     },
     statusFilter(status) {
       const statusMap = {
-        MINE: "待我处理",
+        MINE: "我处理",
         FORWARDED: "已转交",
         FORWARDED_APPLY: "转交超限审批中",
-        SUBMIT_APPLY: "提交申请",
+        SUBMIT_APPLY: "已提交审批",
         WAIT_APPLY: "待审核"
       };
       return statusMap[status];
@@ -309,6 +329,7 @@ export default {
         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 = [];
@@ -326,7 +347,7 @@ export default {
               break;
             case "PREREQUISITES":
               // 要件准备
-              msec = now - item.createDate - item.acceptanceTime;
+              msec = now - item.createDate;
               obj = {
                 time: msec,
                 phase: item.phase,
@@ -336,11 +357,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/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 93ebb7e..a4d92fc 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>