前端gjy

src/router/index.js

@@ -77,6 +77,41 @@ export const constantRoutes = [
         hidden: true
       }
     ]
+  },
+  {
+    path: '/work',
+    component: Layout,
+    meta: {
+      title: 'workNotification',
+      icon: 'jobNotice'
+    },
+    name: 'work',
+    children: [
+      {
+        path: 'work',
+        component: () =>
+          import(/* webpackChunkName: "work" */ '@/views/newTask/listPage'),
+        name: 'workNotification',
+        meta: {
+          title: 'work',
+          noCache: true,
+          affix: true,
+          auth: 'workTask'
+        }
+      },
+      {
+        path: 'message',
+        component: () =>
+          import(/* webpackChunkName: "message" */ '@/views/newTask/message'),
+        name: 'message',
+        meta: {
+          title: 'message',
+          noCache: true,
+          affix: true,
+          auth: 'workInformation'
+        }
+      }
+    ]
   }
 ]
 

src/views/home/index.vue

@@ -178,13 +178,13 @@ export default {
   async mounted () {
     //获取新闻列表
     this.getNewList()
-    // noticeNumber().toPromise().then(res => {
-    //   const { task = 0, remind = 0, overdue = 0, news = 0 } = res
-    //   this.number.task = task
-    //   this.number.remind = remind
-    //   this.number.overdue = overdue
-    //   this.number.news = news
-    // })
+    noticeNumber().toPromise().then(res => {
+      const { task = 0, remind = 0, overdue = 0, news = 0 } = res
+      this.number.task = task
+      this.number.remind = remind
+      this.number.overdue = overdue
+      this.number.news = news
+    })
     if (this.vesselBankFlag !== 'V') {
       EventBus.$emit('addShipScript', () => {
         this.initShipMap()

src/views/newTask/listPage.vue

@@ -77,18 +77,18 @@
             SERVICER 服务商
             SYSTEM
             VOYAGE-->
-            <!-- 通知通函 -->
-            <img v-show="i.businessType === 'CIRCULAR'"
-                 src="@/assets/newTaks/tzth.png" />
-            <!-- 证书 -->
-            <img v-if="i.businessType === 'CERTIFICATE'"
-                 src="@/assets/newTaks/zs.png" />
-            <!-- 船员 -->
-            <img v-if="i.businessType === 'CREW'"
-                 src="@/assets/newTaks/cygl.png" />
-            <!-- 财务 -->
-            <img v-if="i.businessType === 'FINANCE'"
-                 src="@/assets/newTaks/cwgl.png" />
+            <!-- 出入库 -->
+            <img v-show="i.businessType === 'WAREHOUSE'"
+                 src="@/assets/newTaks/churuku.png" />
+            <!-- 采购 -->
+            <img v-if="i.businessType === 'PROCUREMENT'"
+                 src="@/assets/newTaks/caigou.png" />
+            <!-- 统计报表 -->
+            <img v-if="i.businessType === 'REPORT'"
+                 src="@/assets/newTaks/baobiao.png" />
+            <!-- 销售 -->
+            <img v-if="i.businessType === 'SALE'"
+                 src="@/assets/newTaks/xiaoshou.png" />
             <!-- 体系 -->
             <img v-if="i.businessType === 'ISM'"
                  src="@/assets/newTaks/txgl.png" />
@@ -393,88 +393,9 @@ export default {
         if (!url) {
           EventBus.$emit('error', this.$t('workNotification.noRelatedType'))
         } else {
-          if (url === 'appPurDetail' || url === 'appPurDetailMa') {
-            this.$router.push({
-              name: url,
-              query: {
-                applId: data.businessId,
-                pageBtnShowType: false,
-                title: data.title,
-                code: data.businessCode,
-              },
-            })
-          } else if (url === 'certificateList') {
-            this.$router.push({
-              name: url,
-              query: {
-                id: data.businessId,
-                title: data.title,
-                code: data.businessCode,
-                vesselId: data.vesselId,
-                vesselName: data.vesselName,
-                isRefresh: true
-              },
-            })
-          }
-          // 产品-船舶检查
-          else if (url === 'inspectionPscDetails') {
-            this.$router.push({
-              name: url,
-              query: {
-                id: data.businessId,
-              },
-            })
-          } else if (url === 'inspectionFscDetails') {
-            this.$router.push({
-              name: url,
-              query: {
-                id: data.businessId,
-              },
-            })
-          } else if (url === 'faultinessDetails') {
-            this.$router.push({
-              name: url,
-              query: {
-                id: data.businessId,
-              },
-            })
-          } else if (url === 'inspectionDetails') {
-            this.$router.push({
-              name: url,
-              query: {
-                id: data.businessId,
-              },
-            })
-          } else if (url === 'visitingDetails') {
-            this.$router.push({
-              name: url,
-              query: {
-                id: data.businessId,
-              },
-            })
-          }
-          // 产品--体系
-          else if (url === 'circulationStatement') {
-            sessionStorage.setItem('work_where', '2')
-            this.$router.push({
-              name: url
-            })
-          } else if (url === 'systemOperation') {
-            sessionStorage.setItem('work_oper', '2')
             this.$router.push({
               name: url
             })
-          } else {
-            this.$router.push({
-              name: url,
-              query: {
-                id: data.businessId,
-                code: data.businessCode,
-                typeShow: this.typeShow,
-                vesselId: data.vesselId
-              }
-            })
-          }
           // 产品 船舶检查
         }
       }
@@ -588,9 +509,10 @@ li {
     padding: 10px 30px;
     cursor: pointer;
     .taskList-icon {
-      width: 44px;
-      height: 44px;
+      width: 34px;
+      height: 34px;
       float: left;
+      margin-top:5px;
       margin-right: 20px;
     }
     .taskList-font {

src/views/newTask/message.vue

@@ -56,18 +56,18 @@
             SYSTEM
             INS 船舶检查
             VOYAGE-->
-            <!-- 通知通函 -->
-            <img v-if="i.businessType === 'CIRCULAR'"
-                 src="@/assets/newTaks/tzth.png" />
-            <!-- 证书 -->
-            <img v-if="i.businessType === 'CERTIFICATE'"
-                 src="@/assets/newTaks/zs.png" />
-            <!-- 船员 -->
-            <img v-if="i.businessType === 'CREW'"
-                 src="@/assets/newTaks/cygl.png" />
-            <!-- 财务 -->
-            <img v-if="i.businessType === 'FINANCE'"
-                 src="@/assets/newTaks/cwgl.png" />
+            <!-- 出入库 -->
+            <img v-show="i.businessType === 'WAREHOUSE'"
+                 src="@/assets/newTaks/churuku.png" />
+            <!-- 采购 -->
+            <img v-if="i.businessType === 'PROCUREMENT'"
+                 src="@/assets/newTaks/caigou.png" />
+            <!-- 统计报表 -->
+            <img v-if="i.businessType === 'REPORT'"
+                 src="@/assets/newTaks/baobiao.png" />
+            <!-- 销售 -->
+            <img v-if="i.businessType === 'SALE'"
+                 src="@/assets/newTaks/xiaoshou.png" />
             <!-- 体系 -->
             <img v-if="i.businessType === 'ISM'"
                  src="@/assets/newTaks/txgl.png" />
@@ -310,87 +310,10 @@ export default {
           if (!url) {
             EventBus.$emit('error', this.$t('workNotification.noRelatedType'))
           } else {
-            if (url === 'appPurDetail' || url === 'appPurDetailMa') {
-              this.$router.push({
-                name: url,
-                query: {
-                  applId: data.businessId,
-                  pageBtnShowType: false,
-                  title: data.title,
-                  code: data.businessCode,
-                },
-              })
-            } else if (url === 'certificateList') {
-              this.$router.push({
-                name: url,
-                query: {
-                  id: data.businessId,
-                  title: data.title,
-                  code: data.businessCode,
-                  vesselId: data.vesselId,
-                  vesselName: data.vesselName,
-                },
-              })
-            }
-            // 产品-船舶检查
-            else if (url === 'inspectionPscDetails') {
-              this.$router.push({
-                name: url,
-                query: {
-                  id: data.businessId,
-                },
-              })
-            } else if (url === 'inspectionFscDetails') {
-              this.$router.push({
-                name: url,
-                query: {
-                  id: data.businessId,
-                },
-              })
-            } else if (url === 'faultinessDetails') {
-              this.$router.push({
-                name: url,
-                query: {
-                  id: data.businessId,
-                },
-              })
-            } else if (url === 'inspectionDetails') {
-              this.$router.push({
-                name: url,
-                query: {
-                  id: data.businessId,
-                },
-              })
-            } else if (url === 'visitingDetails') {
-              this.$router.push({
-                name: url,
-                query: {
-                  id: data.businessId,
-                },
-              })
-            }
-            // 产品--体系
-            else if (url === 'circulationStatement') {
-              sessionStorage.setItem('work_where', '2')
               this.$router.push({
                 name: url,
               })
-            } else if (url === 'systemOperation') {
-              sessionStorage.setItem('work_oper', '2')
-              this.$router.push({
-                name: url,
-              })
-            } else {
-              this.$router.push({
-                name: url,
-                query: {
-                  id: data.businessId,
-                  title: data.title,
-                  code: data.businessCode,
-                  typeShow: this.typeShow,
-                },
-              })
-            }
+           
           }
         }
       })
@@ -473,9 +396,10 @@ li {
     padding: 10px 30px;
     cursor: pointer;
     .taskList-icon {
-      width: 44px;
-      height: 44px;
+      width: 34px;
+      height: 34px;
       float: left;
+      margin-top:5px;
       margin-right: 20px;
     }
     .taskList-font {

src/views/purchasingManagement/procurementPlanAdd.vue

@@ -785,7 +785,7 @@ export default {
         this.dataList.protein&&String(this.dataList.protein).indexOf('.') != -1 &&
           String(this.dataList.protein).length -
             (String(this.dataList.protein).indexOf('.') + 1) >
-            2||this.dataList.protein>80||this.dataList.protein<1){
+            2||this.dataList.protein&&this.dataList.protein>80||this.dataList.protein&&this.dataList.protein<1){
         this.$message({
           message: '蛋白占比输入错误',
           type: 'warning'
@@ -796,7 +796,7 @@ export default {
         this.dataList.impurity&&String(this.dataList.impurity).indexOf('.') != -1 &&
           String(this.dataList.impurity).length -
             (String(this.dataList.impurity).indexOf('.') + 1) >2
-            ||this.dataList.impurity>40||this.dataList.impurity<1) {
+            ||this.dataList.impurity&&this.dataList.impurity>40||this.dataList.impurity&&this.dataList.impurity<1) {
         this.$message({
           message: '杂质输入错误',
           type: 'warning'
@@ -807,7 +807,7 @@ export default {
         this.dataList.mildewGrain&&String(this.dataList.mildewGrain).indexOf('.') != -1 &&
           String(this.dataList.mildewGrain).length -
             (String(this.dataList.mildewGrain).indexOf('.') + 1) >
-            2||this.dataList.mildewGrain>40||this.dataList.mildewGrain<1) {
+            2||this.dataList.mildewGrain&&this.dataList.mildewGrain>40||this.dataList.mildewGrain&&this.dataList.mildewGrain<1) {
         this.$message({
           message: '霉变粒输入错误',
           type: 'warning'
@@ -818,7 +818,7 @@ export default {
         this.dataList.jiaorenli&&String(this.dataList.jiaorenli).indexOf('.') != -1 &&
           String(this.dataList.jiaorenli).length -
             (String(this.dataList.jiaorenli).indexOf('.') + 1) >
-            2||this.dataList.jiaorenli>40||this.dataList.jiaorenli<1) {
+            2||this.dataList.jiaorenli&&this.dataList.jiaorenli>40||this.dataList.jiaorenli&&this.dataList.jiaorenli<1) {
         this.$message({
           message: '热损伤输入错误',
           type: 'warning'
@@ -829,7 +829,7 @@ export default {
         this.dataList.imperfectGrain&&String(this.dataList.imperfectGrain).indexOf('.') != -1 &&
           String(this.dataList.imperfectGrain).length -
             (String(this.dataList.imperfectGrain).indexOf('.') + 1) >
-            2||this.dataList.imperfectGrain>40||this.dataList.imperfectGrain<1) {
+            2||this.dataList.imperfectGrain&&this.dataList.imperfectGrain>40||this.dataList.imperfectGrain&&this.dataList.imperfectGrain<1) {
         this.$message({
           message: '不完善粒输入错误',
           type: 'warning'

src/views/purchasingManagement/procurementPlanEdit.vue

@@ -821,7 +821,7 @@ export default {
         this.dataList.protein&&String(this.dataList.protein).indexOf('.') != -1 &&
           String(this.dataList.protein).length -
             (String(this.dataList.protein).indexOf('.') + 1) >
-            2||this.dataList.protein>80||this.dataList.protein<1){
+            2||this.dataList.protein&&this.dataList.protein>80||this.dataList.protein&&this.dataList.protein<1){
         this.$message({
           message: '蛋白占比输入错误',
           type: 'warning'
@@ -829,7 +829,7 @@ export default {
         return
       }
       if (
-        this.dataList.impurity&&String(this.dataList.impurity).indexOf('.') != -1 &&
+        this.dataList.impurity!=''&&this.dataList.impurity!=undefined&&String(this.dataList.impurity).indexOf('.') != -1 &&
           String(this.dataList.impurity).length -
             (String(this.dataList.impurity).indexOf('.') + 1) >2
             ||this.dataList.impurity>40||this.dataList.impurity<1) {
@@ -840,7 +840,7 @@ export default {
         return
       }
       if (
-        this.dataList.mildewGrain&&String(this.dataList.mildewGrain).indexOf('.') != -1 &&
+        this.dataList.mildewGrain!=''&&this.dataList.mildewGrain!=undefined&&String(this.dataList.mildewGrain).indexOf('.') != -1 &&
           String(this.dataList.mildewGrain).length -
             (String(this.dataList.mildewGrain).indexOf('.') + 1) >
             2||this.dataList.mildewGrain>40||this.dataList.mildewGrain<1) {
@@ -851,7 +851,7 @@ export default {
         return
       }
       if (
-        this.dataList.jiaorenli&&String(this.dataList.jiaorenli).indexOf('.') != -1 &&
+        this.dataList.jiaorenli!=''&&this.dataList.jiaorenli!=undefined&&String(this.dataList.jiaorenli).indexOf('.') != -1 &&
           String(this.dataList.jiaorenli).length -
             (String(this.dataList.jiaorenli).indexOf('.') + 1) >
             2||this.dataList.jiaorenli>40||this.dataList.jiaorenli<1) {
@@ -862,7 +862,7 @@ export default {
         return
       }
       if (
-        this.dataList.imperfectGrain&&String(this.dataList.imperfectGrain).indexOf('.') != -1 &&
+        this.dataList.imperfectGrain!=''&&this.dataList.imperfectGrain!=undefined&&String(this.dataList.imperfectGrain).indexOf('.') != -1 &&
           String(this.dataList.imperfectGrain).length -
             (String(this.dataList.imperfectGrain).indexOf('.') + 1) >
             2||this.dataList.imperfectGrain>40||this.dataList.imperfectGrain<1) {

src/views/salesManagement/salesPlanAdd.vue

@@ -888,67 +888,57 @@ export default {
         return
       }
       if (
-        (this.dataList.protein &&
-          String(this.dataList.protein).indexOf('.') != -1 &&
+        this.dataList.protein&&String(this.dataList.protein).indexOf('.') != -1 &&
           String(this.dataList.protein).length -
             (String(this.dataList.protein).indexOf('.') + 1) >
-            2||this.dataList.protein>80||this.dataList.protein<1)
-      ) {
+            2||this.dataList.protein&&this.dataList.protein>80||this.dataList.protein&&this.dataList.protein<1){
         this.$message({
           message: '蛋白占比输入错误',
-          type: 'warning',
+          type: 'warning'
         })
         return
       }
       if (
-        this.dataList.impurity &&
-        String(this.dataList.impurity).indexOf('.') != -1 &&
-        String(this.dataList.impurity).length -
-          (String(this.dataList.impurity).indexOf('.') + 1) >
-          2||this.dataList.impurity>40||this.dataList.impurity<1
-      ) {
+        this.dataList.impurity&&String(this.dataList.impurity).indexOf('.') != -1 &&
+          String(this.dataList.impurity).length -
+            (String(this.dataList.impurity).indexOf('.') + 1) >2
+            ||this.dataList.impurity&&this.dataList.impurity>40||this.dataList.impurity&&this.dataList.impurity<1) {
         this.$message({
           message: '杂质输入错误',
-          type: 'warning',
+          type: 'warning'
         })
         return
       }
       if (
-        this.dataList.mildewGrain &&
-        String(this.dataList.mildewGrain).indexOf('.') != -1 &&
-        String(this.dataList.mildewGrain).length -
-          (String(this.dataList.mildewGrain).indexOf('.') + 1) >
-          2||this.dataList.mildewGrain>40||this.dataList.mildewGrain<1
-      ) {
+        this.dataList.mildewGrain&&String(this.dataList.mildewGrain).indexOf('.') != -1 &&
+          String(this.dataList.mildewGrain).length -
+            (String(this.dataList.mildewGrain).indexOf('.') + 1) >
+            2||this.dataList.mildewGrain&&this.dataList.mildewGrain>40||this.dataList.mildewGrain&&this.dataList.mildewGrain<1) {
         this.$message({
           message: '霉变粒输入错误',
-          type: 'warning',
+          type: 'warning'
         })
         return
       }
       if (
-        this.dataList.jiaorenli &&
-        String(this.dataList.jiaorenli).indexOf('.') != -1 &&
-        String(this.dataList.jiaorenli).length -
-          (String(this.dataList.jiaorenli).indexOf('.') + 1) >
-          2||this.dataList.jiaorenli>40||this.dataList.jiaorenli<1
-      ) {
+        this.dataList.jiaorenli&&String(this.dataList.jiaorenli).indexOf('.') != -1 &&
+          String(this.dataList.jiaorenli).length -
+            (String(this.dataList.jiaorenli).indexOf('.') + 1) >
+            2||this.dataList.jiaorenli&&this.dataList.jiaorenli>40||this.dataList.jiaorenli&&this.dataList.jiaorenli<1) {
         this.$message({
           message: '热损伤输入错误',
-          type: 'warning',
+          type: 'warning'
         })
         return
       }
       if (
-        this.dataList.imperfectGrain &&
-        String(this.dataList.imperfectGrain).indexOf('.') != -1 &&
-        String(this.dataList.imperfectGrain).length -
-          (String(this.dataList.imperfectGrain).indexOf('.') + 1) >
-          2||this.dataList.imperfectGrain>40||this.dataList.imperfectGrain<1
-      ) {
+        this.dataList.imperfectGrain&&String(this.dataList.imperfectGrain).indexOf('.') != -1 &&
+          String(this.dataList.imperfectGrain).length -
+            (String(this.dataList.imperfectGrain).indexOf('.') + 1) >
+            2||this.dataList.imperfectGrain&&this.dataList.imperfectGrain>40||this.dataList.imperfectGrain&&this.dataList.imperfectGrain<1) {
         this.$message({
           message: '不完善粒输入错误',
-          type: 'warning',
+          type: 'warning'
         })
         return
       }

src/views/salesManagement/salesPlanEdit.vue

@@ -790,67 +790,57 @@ export default {
         return
       }
       if (
-        (this.dataList.protein &&
-          String(this.dataList.protein).indexOf('.') != -1 &&
+        this.dataList.protein!=''&&this.dataList.protein!=undefined&&String(this.dataList.protein).indexOf('.') != -1 &&
           String(this.dataList.protein).length -
             (String(this.dataList.protein).indexOf('.') + 1) >
-            2||this.dataList.protein>80||this.dataList.protein<1)
-      ) {
+            2||this.dataList.protein>80||this.dataList.protein<1){
         this.$message({
           message: '蛋白占比输入错误',
-          type: 'warning',
+          type: 'warning'
         })
         return
       }
       if (
-        this.dataList.impurity &&
-        String(this.dataList.impurity).indexOf('.') != -1 &&
-        String(this.dataList.impurity).length -
-          (String(this.dataList.impurity).indexOf('.') + 1) >
-          2||this.dataList.impurity>40||this.dataList.impurity<1
-      ) {
+        this.dataList.impurity!=''&&this.dataList.impurity!=undefined&&String(this.dataList.impurity).indexOf('.') != -1 &&
+          String(this.dataList.impurity).length -
+            (String(this.dataList.impurity).indexOf('.') + 1) >2
+            ||this.dataList.impurity>40||this.dataList.impurity<1) {
         this.$message({
           message: '杂质输入错误',
-          type: 'warning',
+          type: 'warning'
         })
         return
       }
       if (
-        this.dataList.mildewGrain &&
-        String(this.dataList.mildewGrain).indexOf('.') != -1 &&
-        String(this.dataList.mildewGrain).length -
-          (String(this.dataList.mildewGrain).indexOf('.') + 1) >
-          2||this.dataList.mildewGrain>40||this.dataList.mildewGrain<1
-      ) {
+        this.dataList.mildewGrain!=''&&this.dataList.mildewGrain!=undefined&&String(this.dataList.mildewGrain).indexOf('.') != -1 &&
+          String(this.dataList.mildewGrain).length -
+            (String(this.dataList.mildewGrain).indexOf('.') + 1) >
+            2||this.dataList.mildewGrain>40||this.dataList.mildewGrain<1) {
         this.$message({
           message: '霉变粒输入错误',
-          type: 'warning',
+          type: 'warning'
         })
         return
       }
       if (
-        this.dataList.jiaorenli &&
-        String(this.dataList.jiaorenli).indexOf('.') != -1 &&
-        String(this.dataList.jiaorenli).length -
-          (String(this.dataList.jiaorenli).indexOf('.') + 1) >
-          2||this.dataList.jiaorenli>40||this.dataList.jiaorenli<1
-      ) {
+        this.dataList.jiaorenli!=''&&this.dataList.jiaorenli!=undefined&&String(this.dataList.jiaorenli).indexOf('.') != -1 &&
+          String(this.dataList.jiaorenli).length -
+            (String(this.dataList.jiaorenli).indexOf('.') + 1) >
+            2||this.dataList.jiaorenli>40||this.dataList.jiaorenli<1) {
         this.$message({
           message: '热损伤输入错误',
-          type: 'warning',
+          type: 'warning'
         })
         return
       }
       if (
-        this.dataList.imperfectGrain &&
-        String(this.dataList.imperfectGrain).indexOf('.') != -1 &&
-        String(this.dataList.imperfectGrain).length -
-          (String(this.dataList.imperfectGrain).indexOf('.') + 1) >
-          2||this.dataList.imperfectGrain>40||this.dataList.imperfectGrain<1
-      ) {
+        this.dataList.imperfectGrain!=''&&this.dataList.imperfectGrain!=undefined&&String(this.dataList.imperfectGrain).indexOf('.') != -1 &&
+          String(this.dataList.imperfectGrain).length -
+            (String(this.dataList.imperfectGrain).indexOf('.') + 1) >
+            2||this.dataList.imperfectGrain>40||this.dataList.imperfectGrain<1) {
         this.$message({
           message: '不完善粒输入错误',
-          type: 'warning',
+          type: 'warning'
         })
         return
       }

src/views/workNotification/components/MessageItem.vue

@@ -0,0 +1,295 @@
+<template>
+  <!--  v-loading="isLoading" -->
+  <div class="message-item"
+       @click="handleClick">
+    <el-row class="full"
+            type="flex"
+            align="middle">
+      <el-col class="item-left">
+        <el-row class="title"
+                type="flex"
+                align="middle">
+          <div class="icon-place"
+               :class="iconClass"></div>
+          {{ title }}
+        </el-row>
+        <el-row class="desc"
+                type="flex"
+                align="middle">
+          <div class="icon-place"></div>
+          {{ desc }}
+        </el-row>
+      </el-col>
+      <el-col class="item-right">
+        <el-row class="full"
+                type="flex"
+                align="middle">
+          <el-col>
+            <div class="time">{{ time }}</div>
+          </el-col>
+          <el-col>
+            <el-button class="handle-btn"
+                       :class="handleBtnClass"
+                       type="text">{{ statusText }}</el-button>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import handleType from '../types/handleType'
+import i18n from '@/lang'
+import * as utils from '../utils'
+import { msgConfirmed } from '@/model/indexRx'
+import { EventBus } from 'base-core-lib'
+const HandleConfig = {
+  [handleType.RETURN]: {
+    iconClass: 'need-handle',
+    btnClass: 'need-handle',
+    btnText: i18n.t('workNotification.msg.needHandle')
+  },
+  [handleType.NEED_HANDLE]: {
+    iconClass: 'need-handle',
+    btnClass: 'need-handle',
+    btnText: i18n.t('workNotification.msg.needHandle')
+  },
+  [handleType.NEED_CONFIRMED]: {
+    iconClass: 'need-confirmed',
+    btnClass: 'need-confirmed',
+    btnText: i18n.t('workNotification.msg.needConfirmed')
+  },
+  [handleType.CONFIRMED]: {
+    iconClass: 'confirmed',
+    btnClass: 'confirmed',
+    btnText: i18n.t('workNotification.msg.confirmed')
+  },
+  [handleType.HANDLED]: {
+    iconClass: 'handled',
+    btnClass: 'handled',
+    btnText: i18n.t('workNotification.msg.handled')
+  },
+  [handleType.COMPLETED]: {
+    iconClass: 'completed',
+    btnClass: 'completed',
+    btnText: i18n.t('workNotification.msg.completed')
+  }
+}
+
+export default {
+  name: 'MessageItem',
+  // filters: {
+  //   datetimeAgo
+  // },
+  props: ['info'],
+  data () {
+    return {
+      isLoading: false
+    }
+  },
+  computed: {
+    title () {
+      return this.info && this.info.messageTitle
+    },
+    desc () {
+      return this.info && this.info.messageContent
+    },
+    time () {
+      return this.info && this.info.showTime
+    },
+    acceptanceType () {
+      return this.info.acceptanceType
+    },
+    iconClass () {
+      var at = this.info.acceptanceType
+      return HandleConfig[at] && HandleConfig[at].iconClass
+    },
+    statusText () {
+      var at = this.info.acceptanceType
+      return HandleConfig[at] && HandleConfig[at].btnText
+    },
+    handleBtnClass () {
+      var at = this.info.acceptanceType
+      return HandleConfig[at] && HandleConfig[at].btnClass
+    }
+  },
+  methods: {
+    async handleClick () {
+      try {
+        this.isLoading = true
+        await msgConfirmed({ id: this.info.id }).toPromise()
+        this.isLoading = false
+      } catch (error) {
+        this.isLoading = false
+      }
+
+      const id = this.info.businessId
+      const title = this.info.messageContent
+      const url = utils.code2Url(
+        this.info.businessType,
+        this.info.businessCode,
+        this.info.acceptanceType
+      )
+      if (!url) {
+        EventBus.$emit('error', this.$t('workNotification.noRelatedType'))
+      } else {
+        if (
+          url == 'certificateDetailSecond' ||
+          url == 'certificateDetailThird'
+        ) {
+          let num = url == 'certificateDetailSecond' ? 'second' : 'third'
+          this.$router.push({
+            name: 'certificateDetail',
+            query: {
+              id: id,
+              title: title,
+              code: this.info.businessCode,
+              tabNum: num
+            }
+          })
+        } else if (url === 'systemOperation') {
+          sessionStorage.setItem('ws-pf_systemFile', 2)
+          this.$router.push({
+            name: url,
+            query: { id: id, title: title, code: this.info.businessCode }
+          })
+        } else {
+          this.$router.push({
+            name: url,
+            query: { id: id, title: title, code: this.info.businessCode }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.message-item {
+  height: 86px;
+  background: #fff;
+  padding-left: 20px;
+  padding-right: 20px;
+  cursor: pointer;
+
+  & + .message-item {
+    margin-top: 10px;
+  }
+}
+
+.full {
+  width: 100%;
+  height: 100%;
+}
+
+.item-left {
+  .icon-place {
+    width: 15px;
+    height: 15px;
+    display: inline-block;
+    background-position: center;
+    background-size: contain;
+    margin-right: 8px;
+
+    &.need-handle {
+      //待处理
+      color: #f56c6c;
+      background: url(../../../assets/images/page/notification/mail_blue_close.png)
+        no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+    &.need-confirmed {
+      //待查看
+      color: #f56c6c;
+      background: url(../../../assets/images/page/notification/mail_blue_close.png)
+        no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+    &.confimed {
+      //已查看
+      color: #333;
+      background: url(../../../assets/images/page/notification/mail_gray_open.png)
+        no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+    &.handled {
+      //已处理
+      color: #1d6ced;
+      background: url(../../../assets/images/page/notification/mail_blue_open.png)
+        no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+    &.completed {
+      //已完成
+      color: #333;
+      background: url(../../../assets/images/page/notification/mail_gray_open.png)
+        no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+  }
+
+  .title {
+    color: #333333;
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 6px;
+  }
+
+  .desc {
+    color: #666666;
+    font-size: 14px;
+  }
+}
+.item-right {
+  width: 280px;
+
+  .time {
+    color: #999;
+    font-size: 14px;
+    text-align: right;
+    border-right: 1px solid #ccc;
+    padding-right: 20px;
+    line-height: 28px;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 160px;
+  }
+
+  .handle-btn {
+    width: 90px;
+    margin-left: 20px;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &.need-handle {
+      //待处理
+      color: #f56c6c;
+    }
+    &.need-confirmed {
+      //待查看
+      color: #f56c6c;
+    }
+    &.confimed {
+      //已查看
+      color: #333;
+    }
+    &.handled {
+      //已处理
+      color: #1d6ced;
+    }
+    &.completed {
+      //已完成
+      color: #333;
+    }
+  }
+}
+</style>

src/views/workNotification/components/WorkNotificationItem.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="work-notification-item">
+    <div class="desc-group">
+      <span class="yhimg"></span>
+      <div class="content">
+        <div class="work-notification-title">{{ info.messageTitle }}</div>
+        <div class="work-notification-padding">{{ info. messageContent }}</div>
+      </div>
+    </div>
+    <div class="right-group">
+      <div class="warn-icon"
+           v-if="isOutOfDate && isOutOfDateType">
+        <img src="../../../assets/images/common/notification/limit.png">
+      </div>
+      <div class="right">
+        <p class="notification-size">{{ info.showTime	 | dateFilter }}</p>
+      </div>
+      <div class="action">
+        <el-button @click="showDialog = true">{{ $t('workNotification.handleLater') }}</el-button>
+        <el-button type="primary"
+                   @click="handleNow">{{ $t('workNotification.handle') }}</el-button>
+      </div>
+    </div>
+    <ws-dialog :title="$t('workNotification.handleLater')"
+               :visible.sync="showDialog"
+               @closed="days = '0'"
+               width="500px">
+      <div class="dialog-content">
+        <ws-form label-width="180px"
+                 style="width: 100%">
+          <ws-form-item :label="$t('workNotification.inputDelayDays')"
+                        required>
+            <ws-input v-model="days"></ws-input>
+          </ws-form-item>
+        </ws-form>
+        <ws-radio-group v-model="days">
+          <ws-radio label="1">{{ $t('workNotification.oneDay') }}</ws-radio>
+          <ws-radio label="7">{{ $t('workNotification.oneWeek') }}</ws-radio>
+          <ws-radio label="30">{{ $t('workNotification.oneMonth') }}</ws-radio>
+        </ws-radio-group>
+      </div>
+      <div slot="footer">
+        <ws-button @click="showDialog = false">{{ $t('button.cancel') }}</ws-button>
+        <ws-button @click="doHandleLater"
+                   type="primary">{{ $t('button.confirm') }}</ws-button>
+      </div>
+    </ws-dialog>
+  </div>
+</template>
+
+<script>
+import notificationType from '../types/notificationType';
+import * as utils from '../utils';
+import { handleLater } from '@/model/indexRx';
+import XEUtils from 'xe-utils';
+import { EventBus, dayjs } from 'base-core-lib'
+export default {
+  name: 'WorkNotificationItem',
+  //filters: {
+  //  dateFilter(date) {
+  //    const now = new Date();
+  //    const targetDate = new Date(date);
+  //    now.setHours(now.getHours() + 8);
+  //    targetDate.setHours(targetDate.getHours() + 8);
+  //    // 如果时间差小于一天  17:30
+  //    if (now - targetDate < 24 * 60 * 60 * 1000) {
+  //      return `${targetDate.toISOString().slice(11, 16)} `
+  //      // eslint-disable-next-line brace-style
+  //    }
+  //    // 如果时间差小于一年  07-20 17:30
+  //    else if (now - targetDate < 24 * 60 * 60 * 1000 * 365) {
+  //      return `${targetDate.toISOString().slice(5, 10)} ${targetDate.toISOString().slice(11, 16)} `
+  //     // eslint-disable-next-line brace-style
+  //    }
+  // 如果时间差大于一年  2019-07-20 17:30
+  //    else {
+  //      return `${targetDate.toISOString().slice(0, 10)} ${targetDate.toISOString().slice(11, 16)} `
+  //   }
+  //  }
+  //},
+  filters: {
+    dateFilter (date) {
+      let currDate = XEUtils.toStringDate(date);
+      // let newDate = new Date();
+      if (XEUtils.isDate(currDate)) {
+        // if (newDate.getFullYear() === currDate.getFullYear() && newDate.getMonth() === currDate.getMonth() && newDate.getDay() === currDate.getDay()) {
+        if (dayjs().year() === dayjs(currDate).year() && (dayjs().month() + 1) === (dayjs(currDate).month() + 1) && dayjs().day() === dayjs(currDate).day()) {
+          return XEUtils.toDateString(currDate, 'HH:mm');
+          // } else if (newDate.getFullYear() === currDate.getFullYear()) {
+        } else if (dayjs().year() === dayjs(currDate).year()) {
+          return XEUtils.toDateString(currDate, 'MM-dd HH:mm');
+        } else {
+          return XEUtils.toDateString(currDate, 'yyyy-MM-dd HH:mm');
+        }
+      } else {
+        return '';
+      }
+    }
+  },
+  props: {
+    info: Object,
+  },
+  data () {
+    return {
+      msgKey: 0,
+      showDialog: false,
+      days: '0',
+    }
+  },
+  computed: {
+    isOutOfDate () {
+      // 任务超期时间
+      // const behindTime = new Date(this.info.behindTime);
+      // behindTime.setHours(23, 59, 59);
+      const behindTime = dayjs(this.info.behindTime).format('YYYY-MM-DD') + ' 23:59:59'
+      // 任务未在任务日期当天23:59前处理的，该任务被标识为超期
+      // 现在时间过了任务日期当天23:59,并且任务状态处在未处理状态的 返回true
+      return this.info.acceptanceType === 'NEED_HANDLE' && dayjs() > behindTime
+    },
+    isOutOfDateType () {
+      return !(this.info.businessType !== notificationType.SEAFARERS_MANAGEMENT && this.info.businessType !== notificationType.SHIP_CERTIFICATE);
+    }
+  },
+  methods: {
+    handleNow () {
+      const info = this.info;
+      const id = info.businessId;
+      const title = info.messageContent;
+      const url = this.checkType(info);
+      if (!url) {
+        EventBus.$emit('error', this.$t('workNotification.noRelatedType'))
+      } else {
+        if (url === 'appPurDetail' || url === 'appPurDetailMa') {
+          this.$router.push({ name: url, query: { id: id, applId: id, pageBtnShowType: false, title: title, code: info.businessCode } });
+        } else if (url === 'systemOperation') {
+          sessionStorage.setItem('ws-pf_systemFile', 2)
+          this.$router.push({ name: url, query: { id: id, applId: id, pageBtnShowType: false, title: title, code: info.businessCode } });
+        } else {
+          this.$router.push({ name: url, query: { id: id, title: title, code: info.businessCode } });
+        }
+      }
+    },
+    async doHandleLater () {
+      try {
+        const info = this.info;
+        const time = this.nowFormatDate('YYYY-MM-DD HH:mm:ss')
+        await handleLater({
+          id: info.id,
+          time,
+          delay: this.days,
+        }).toPromise()
+        EventBus.$emit('success', this.$t('workNotification.successDelay'))
+        this.showDialog = false;
+        this.$emit('handleLater');
+      } catch (error) {
+        EventBus.$emit('error', this.$t('workNotification.errorDelay'))
+        this.showDialog = false;
+      }
+    },
+    checkType () {
+      return utils.code2Url(this.info.businessType, this.info.businessCode, this.info.acceptanceType);
+    },
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+.work-notification-title {
+  color: #333;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.yhimg:before {
+  top: 3px;
+  position: relative;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  content: '';
+  background: url(../../../assets/images/page/certificate/certificateBlue.png)
+    no-repeat;
+}
+
+.work-notification-padding {
+  margin-top: 16px;
+  color: #666666;
+}
+
+.work-notification-item {
+  margin-top: 10px;
+  padding: 20px 0 20px 20px;
+  background: #fff;
+  position: relative;
+  display: flex;
+  font-size: 14px;
+  color: grey;
+}
+
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.work-notification-divider {
+  border-right: 1px solid gray;
+}
+
+.right {
+  text-align: right;
+  line-height: 20px;
+}
+
+.padding-right {
+  padding-right: 15px;
+  color: #999999;
+}
+
+.notification-size {
+  color: #999;
+  font-size: 14px;
+  text-align: right;
+  border-right: 1px solid #ccc;
+  padding-right: 20px;
+  line-height: 28px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.warn-icon {
+  position: absolute;
+  right: 300px;
+}
+.desc-group {
+  flex: 1;
+  text-align: left;
+  display: flex;
+  .content {
+    margin-left: 8px;
+  }
+}
+.right-group {
+  flex: none;
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+  .action {
+    padding: 0 16px;
+  }
+}
+</style>
+

src/views/workNotification/message.vue

@@ -0,0 +1,530 @@
+<!-- 工作通知模块 消息 -->
+<template>
+  <div class="message-container">
+    <!-- <ws-common-loading v-if="initLoading"></ws-common-loading> -->
+    <div class="work-notification-container">
+      <div class="work-notification-flex">
+        <span class="work-notification-size">{{ $t('workNotification.busModule') }}{{$t('common.colon')}}</span>
+        <div class="work-notification-top">
+          <!-- <el-badge :value="number.sum"
+                    :hidden="!number.sum"
+                    class="item">
+            <ws-button @click="switchTab(tabIndex)"
+                       size="small"
+                       :class="
+                `notification-btn ${tabIndex === tabIndex &&
+                  'notification-button'}`
+              ">{{ $t('workNotification.all') }}
+            </ws-button>
+          </el-badge> -->
+
+          <!-- 出入库任务 -->
+          <el-badge :value="number.warehouse"
+                    :hidden="number.warehouse <= 0"
+                    class="item"
+                    v-if="crewFlag">
+            <el-button @click="switchTab(notificationType.WAREHOUSE)"
+                       size="small"
+                       :class="
+                `notification-btn ${tabIndex === notificationType.WAREHOUSE &&
+                  'notification-button'}`
+              ">
+              {{ $t('workNotification.warehouse') }}
+            </el-button>
+          </el-badge>
+
+          <!-- 体系 -->
+          <el-badge :value="number.sale"
+                    :hidden="number.sale <= 0"
+                    class="item"
+                    v-if="ismFlag">
+            <el-button @click="switchTab(notificationType.SALE)"
+                       size="small"
+                       :class="
+                `notification-btn ${tabIndex === notificationType.SALE &&
+                  'notification-button'}`
+              ">
+              {{ $t('workNotification.ism') }}
+            </el-button>
+          </el-badge>
+
+          <!-- 采购管理PROCUREMENT -->
+          <el-badge :value="number.procurement"
+                    :hidden="number.procurement <= 0"
+                    class="item"
+                    v-if="financeFlag">
+            <el-button @click="switchTab(notificationType.PROCUREMENT)"
+                       size="small"
+                       :class="
+                `notification-btn ${tabIndex === notificationType.PROCUREMENT &&
+                  'notification-button'}`
+              ">
+              {{ $t('workNotification.finance') }}
+            </el-button>
+          </el-badge>
+
+          <!-- 统计报表 -->
+          <el-badge :value="number.report"
+                    :hidden="number.report <= 0"
+                    class="item"
+                    v-if="servicerFlag">
+            <el-button @click="switchTab(notificationType.REPORT)"
+                       size="small"
+                       :class="
+                `notification-btn ${tabIndex === notificationType.REPORT &&
+                  'notification-button'}`
+              ">
+              {{ $t('workNotification.report') }}
+            </el-button>
+          </el-badge>
+        </div>
+      </div>
+      <div class="work-notification-time">
+        <span class="work-notification-size1">{{ $t('workNotification.noticeTime') }}{{$t('common.colon')}}</span>
+        <div class="block work-top">
+          <el-date-picker v-model="dateRange"
+                          :picker-options="pickerOptions"
+                          type="daterange"
+                          range-separator="~"
+                          :start-placeholder="$t('workNotification.startPlaceholder')"
+                          :end-placeholder="$t('workNotification.endPlaceholder')"
+                          value-format="yyyy-MM-dd"
+                          @change="initMessageList()" />
+        </div>
+      </div>
+    </div>
+    <div class="scroll-container"
+         v-infinite-scroll="moreMessageList">
+      <message-item v-for="item in messageList"
+                    :key="item.id"
+                    :info="item"></message-item>
+      <div v-if="!initLoading && (!messageList || messageList.length == 0)"
+           class="img-bg">
+        <div class="box">
+          <img src="../../assets/images/onData.png"
+               alt="" />
+          <div>{{ $t('workNotification.empty') }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import notificationType from './types/notificationType'
+import { getQueryPage, countAmount } from '@/model/indexRx'
+import MessageItem from './components/MessageItem'
+import { EventBus } from 'base-core-lib'
+export default {
+  components: { MessageItem },
+  data () {
+    return {
+      navigationFlag: false,
+      materielFlag: false,
+      sparepartFlag: false,
+      repairFlag: false,
+      maintainFlag: false,
+      servicerFlag: false,
+      oilFlag: false, //油品
+      monitorManagerFlag: false,
+      certificateFlag: false,
+      purchasFlag: false,
+      crewFlag: false,
+      financeFlag: false,
+      vesselNoonReportFlag: false,
+      ismFlag: false,
+      notificationType,
+      dateRange: [],
+      pickerOptions: {},
+      initLoading: false,
+      isLoadingMore: false,
+      tabIndex: '',
+      tabIndexs: [],
+      currentPage: 1,
+      pageSize: 20,
+      total: 0, // 总条目
+      messageList: [],
+      // 动态显示角标
+      number: {
+        // 总数
+        sum: 0,
+        //通知通函
+        circular: 0,
+        // 船舶证书
+        certificate: 0,
+        // 采购管理
+        purchas: 0,
+        // 船员管理
+        crew: 0,
+        // 财务管理
+        finance: 0,
+        // 船舶午报
+        vesselNoonReport: 0,
+        // 体系
+        ism: 0,
+        monitor: 0,
+        //油品
+        oil: 0,
+        // 服务商
+        servicer: 0,
+        //维保
+        maintain: 0,
+        //修船
+        repair: 0,
+        //备件
+        sparepart: 0,
+        //物料
+        materiel: 0,
+        //航海
+        navigation: 0
+      }
+    }
+  },
+  mounted () {
+    this.getAmount()
+    this.initMessageList()
+  },
+  methods: {
+    getAmount () {
+      // 通函通知没有权限，都能看见
+      this.tabIndexs.push(notificationType.CIRCULAR)
+
+      if (this.permissionIf('crewManagement')) {
+        this.tabIndexs.push(notificationType.CREW)
+        this.crewFlag = true
+      }
+      if (this.permissionIf('certificateManagement')) {
+        this.tabIndexs.push(notificationType.CERTIFICATE)
+        this.certificateFlag = true
+      }
+      if (this.permissionIf('procurement')) {
+        this.tabIndexs.push(notificationType.PURCHASE)
+        this.purchasFlag = true
+      }
+      if (this.permissionIf('financeManagement')) {
+        this.tabIndexs.push(notificationType.FINANCE)
+        this.financeFlag = true
+      }
+      if (this.permissionIf('dynamicRport.report.review')) {
+        this.tabIndexs.push(notificationType.VESSEL_NOON_REPORT)
+        this.vesselNoonReportFlag = true
+      }
+      if (this.permissionIf('ismManager')) {
+        this.tabIndexs.push(notificationType.ISM)
+        this.ismFlag = true
+      }
+      if (this.permissionIf('monitorManager')) {
+        this.tabIndexs.push(notificationType.MONITOR)
+        this.monitorManagerFlag = true
+      }
+
+      if (this.permissionIf('oil')) {
+        this.tabIndexs.push(notificationType.OIL)
+        this.oilFlag = true
+      }
+
+      if (this.permissionIf('servicer')) {
+        this.tabIndexs.push(notificationType.SERVICER)
+        this.servicerFlag = true
+      }
+
+      if (this.permissionIf('maintenanceManagement')) {
+        this.tabIndexs.push(notificationType.MAINTAIN)
+        this.maintainFlag = true
+      }
+
+      if (this.permissionIf('repairManager')) {
+        this.tabIndexs.push(notificationType.REPAIR)
+        this.repairFlag = true
+      }
+
+      if (this.permissionIf('spareParts')) {
+        this.tabIndexs.push(notificationType.SPAREPART)
+        this.sparepartFlag = true
+      }
+
+      if (this.permissionIf('materiel')) {
+        this.tabIndexs.push(notificationType.MATERIEL)
+        this.materielFlag = true
+      }
+      if (this.permissionIf('navigationManagement')) {
+        this.tabIndexs.push(notificationType.NAVIGATION)
+        this.navigationFlag = true
+      }
+
+      this.tabIndex = this.tabIndexs.join(',')
+      const params = {
+        staffId: sessionStorage.getItem('ws-pf_userId'),
+        isTask: 0
+      }
+      if (this.dateRange.length > 0) {
+        params.createDateStart =
+          this.dateRange[0] === undefined ? '' : this.dateRange[0] + ' 00:00:00'
+        params.createDateEnd =
+          this.dateRange[1] === undefined ? '' : this.dateRange[1] + ' 23:59:59'
+      }
+      countAmount(params).toPromise()
+        .then(res => {
+          this.number.sum = 0
+          const content = res.content
+
+          content.forEach(item => {
+            // if (item.businessType === notificationType.CREW) {
+            //   // 船员管理
+            //   this.number.crew = item.number;
+            //   this.number.sum += parseInt(item.number);
+            // } else if (item.businessType === notificationType.FINANCE) {
+            //   // 财务管理
+            //   this.number.finance = item.number;
+            //   this.number.sum += parseInt(item.number);
+            // } else if (item.businessType === notificationType.PURCHASE) {
+            //   // 采购管理
+            //   this.number.purchas = item.number;
+            //   this.number.sum += parseInt(item.number);
+            // } else if (item.businessType === notificationType.CERTIFICATE) {
+            //   // 船舶证书
+            //   this.number.certificate = item.number;
+            //   this.number.sum += parseInt(item.number);
+            // } else if (item.businessType === notificationType.VESSEL_NOON_REPORT) {
+            //   // 船舶午报
+            //   this.number.vesselNoonReport = item.number;
+            //   this.number.sum += parseInt(item.number);
+            // }
+            if (item.businessType === 'WAREHOUSE') {
+              this.number.warehouse = item.number
+            } else if (item.businessType === 'PROCUREMENT') {
+              this.number.procuement = item.number
+            } else if (item.businessType === 'REPORT') {
+              this.number.report = item.number
+            } else if (item.businessType === 'SALE') {
+              this.number.sale = item.number
+            }
+
+            this.tabIndexs.forEach(ite => {
+              if (item.businessType === ite) {
+                // 船员管理
+                this.number.sum += parseInt(item.number)
+              }
+            })
+          })
+        })
+        .catch(error => {
+          EventBus.$emit('error', error)
+        })
+    },
+
+    async initMessageList () {
+      this.currentPage = 1
+      // this.elLoading()
+      this.initLoading = true
+      var res = await this._getMessageList(
+        this.currentPage,
+        this.tabIndex,
+        this.dateRange
+      )
+      if (res) {
+        this.total = res.total || 0
+        this.messageList = res.records || []
+        this.initLoading = false
+        // this.elLoading('end')
+      }
+    },
+
+    async moreMessageList () {
+      if (this.messageList.length >= this.total) {
+        return
+      }
+      if (this.initLoading) {
+        return
+      }
+      if (this.isLoadingMore) {
+        return
+      }
+
+      this.currentPage++
+
+      this.isLoadingMore = true
+      var res = await this._getMessageList(
+        this.currentPage,
+        this.tabIndex,
+        this.dateRange
+      )
+      this.isLoadingMore = false
+
+      if (res) {
+        this.messageList = this.messageList.concat(res.records || [])
+      }
+    },
+
+    switchTab (index) {
+      this.tabIndex = index
+      this.dateRange = []
+      this.initMessageList()
+    },
+
+    /**
+     * 获取消息列表
+     * @page 第几页
+     * @businessType 类型
+     * @dateRange 时间范围 允许为空
+     *
+     * @return Object 当请求失败时返回null
+     */
+    _getMessageList (page, businessType, dateRange) {
+      return new Promise(next => {
+        const params = {
+          staffId: sessionStorage.getItem('ws-pf_userId'),
+          currentPage: page,
+          pageSize: this.pageSize,
+          businessType: businessType
+        }
+        if (dateRange != null && dateRange.length > 0) {
+          params.createDateStart =
+            dateRange[0] === undefined ? '' : dateRange[0] + ' 00:00:00'
+          params.createDateEnd =
+            dateRange[1] === undefined ? '' : dateRange[1] + ' 23:59:59'
+        }
+
+        getQueryPage(params).toPromise()
+          .then(response => {
+            next(response)
+          })
+          .catch(() => {
+            next(null)
+          })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.message-container {
+  padding: 10px;
+}
+
+.work-notification-container {
+  padding: 30px 0 20px 20px;
+  margin-bottom: 10px;
+  // margin: 10px 10px 0 10px;
+  background: #fff;
+}
+
+.work-notification-flex {
+  display: flex;
+}
+
+.work-notification-size {
+  font-size: 14px;
+  color: #666666;
+  width: 100px;
+}
+
+.work-notification-top {
+  margin: -20px 0 0 5px;
+}
+
+.notification-btn {
+  background: #ffffff;
+  border: none;
+  font-size: 14px;
+  color: #333333;
+  width: 100px;
+}
+
+.notification-btn:hover {
+  color: #1d6ced;
+}
+
+.notification-button {
+  background: #eee !important;
+  border: 1px solid #eee !important;
+}
+
+.work-notification-time {
+  display: flex;
+}
+
+.work-notification-size1 {
+  font-size: 14px;
+  color: #666666;
+  padding-top: 20px;
+}
+
+.work-notification-all {
+  font-size: 14px;
+  color: #444;
+  position: relative;
+  top: -12px;
+  margin-left: 5px;
+}
+
+.item {
+  margin-top: 10px;
+  margin-right: 62px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+  width: 483px;
+  height: 32px;
+  border: 1px solid #cccccc;
+}
+
+/deep/ .el-range-input {
+  color: #333333;
+}
+
+.work-top {
+  padding-top: 10px;
+  margin-left: 5px;
+}
+
+.scroll-container {
+  margin-right: -2px;
+  height: calc(100vh - 188px);
+  overflow-y: scroll;
+  // padding-left: 10px;
+  // padding-right: 10px;
+  &::-webkit-scrollbar {
+    width: none;
+    height: none;
+  }
+}
+
+/deep/ .element.style {
+  position: absolute;
+}
+
+/deep/ .el-input__icon,
+.el-range__icon,
+.el-icon-date {
+  position: absolute !important;
+  right: 10px !important;
+}
+/deep/ .el-input__icon.el-range__close-icon {
+  right: 32px !important;
+}
+
+.img-bg {
+  background-color: #fff;
+  text-align: center;
+  height: 100%;
+  line-height: 100%;
+  position: relative;
+}
+
+.img-bg .box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -145px;
+  margin-left: -236px;
+}
+
+.img-bg .box div {
+  margin-top: 20px;
+  font-size: 14px;
+  color: #333;
+}
+</style>

src/views/workNotification/types/handleType.js

@@ -0,0 +1,11 @@
+const Type = {
+  NEED_HANDLE: 'NEED_HANDLE', // 待处理
+  NEED_CONFIRMED: 'NEED_CONFIRMED', // 待查看
+  CONFIRMED: 'CONFIRMED', // 已查看
+  HANDLED: 'HANDLED', // 已处理
+  COMPLETED: 'COMPLETED', // 已完成
+  RETURN: 'RETURN', // 退回
+  TO_BE_MORE: 'TO_BE_MORE'
+}
+
+export default Type;

src/views/workNotification/types/notificationType.js

@@ -0,0 +1,22 @@
+const TYPE = {
+  ALL:
+    'FINANCE,CREW,PURCHASE,CERTIFICATE,VESSEL-NOON-REPORT,ISM,MONITOR,OIL,SERVICER,MAINTAIN,REPAIR,SPAREPART,MATERIEL,NAVIGATION,CIRCULAR,SHIP_INSPECTION',
+  CERTIFICATE: 'CERTIFICATE', // 船舶证书
+  CREW: 'CREW', // 船员管理
+  FINANCE: 'FINANCE', // 财务管理
+  PURCHASE: 'PURCHASE', // 采购管理
+  VESSEL_NOON_REPORT: 'VESSEL-NOON-REPORT', // 船舶午报
+  ISM: 'ISM', // 体系,
+  MONITOR: 'MONITOR', // 海务
+  OIL: 'OIL', // 油品
+  SERVICER: 'SERVICER', //服务商
+  MAINTAIN: 'MAINTAIN', //维保
+  REPAIR: 'REPAIR', //修船
+  SPAREPART: 'SPAREPART', //备件
+  MATERIEL: 'MATERIEL', //物料
+  NAVIGATION: 'NAVIGATION', //航海
+  CIRCULAR: 'CIRCULAR', //通函通知
+  SHIP_INSPECTION:'SHIP-INSPECTION', // 船舶检查
+};
+Object.freeze(TYPE);
+export default TYPE;

src/views/workNotification/utils/index.js

@@ -0,0 +1,841 @@
+import HandleType from '../types/handleType'
+
+// 根据业务类型和业务码获取对应url
+export function code2Url (type, code, state) {
+  switch (type) {
+    // 判断 出入库
+    case 'INOUTTASK':
+      return checkoutput(code, state)
+    // 判断 采购
+    case 'PROCUREMENT':
+      return checkpurchase(code, state)
+    // 判断 统计报表
+    case 'REPORT':
+      return checkPurchase(code, state)
+    // 判断 销售
+    case 'SALE':
+      return sale(code, state)
+    default:
+      return ''
+  }
+}
+
+export function checkNavigation (code, state) {
+  // 航海
+  let url = ''
+  switch (code) {
+    case 'NAVIGATION-APPLY':
+      url = 'applicationDetail'
+      break
+    case 'NAVIGATION_SHIP_SUPPLY':
+      url = 'shipSupplyDetail'
+      break
+    case 'NAVIGATION-APPL-CONFIRM':
+      url = 'applicationDetail';
+      break;
+    case 'NAVIGATION-APPL-RETURN':
+      url = 'applicationDetail';
+      break;
+    case 'NAVIGATION-APPL-SUBMIT':
+      url = 'applicationDetail';
+      break;
+  }
+  return url
+}
+// 通知通函
+export function checkCircular (code, state) {
+  if (code === 'CIRCULAR-MANAGEMENT-RECEIVE') {
+    // 通知通函
+    return 'notificationItDetail'
+  }
+  if (code === 'CIRCULAR-MANAGEMENT-POSTED') {
+    // 通知通函
+    return 'notificationDetail'
+  }
+  return undefined
+}
+
+export function checkMateriel (code, state) {
+  // 物料
+  let url = ''
+  switch (code) {
+    // 申请单_物料
+    case 'PURCHASE-MA-APPL14':
+      url = 'appPurDetailMa'
+      // url = "applDetailMa";
+      break
+
+    case 'MATERIAL_APPLINFO_MESSAGE':
+      url = 'appPurDetailMa'
+      break
+    case 'PURCHASE-MA-APPL':
+      url = 'maApplicationLabel'
+      break
+
+    case 'MATERIEL-OUT-STORE':
+      url = isEdited(state) ? 'deliveryEdit' : 'deliveryLabel'
+      break
+    // 新增的物料申请
+    case 'MATERIEL-APPL-CONFIRM':
+      url = 'maApplicationEdit'
+      break
+    case 'MATERIEL-APPL-SUBMIT':
+      url = 'maApplicationLabel'
+      break
+    case 'MATERIEL-APPL-RETURN':
+      url = 'maApplicationEdit'
+      break
+    case 'MATERIEL-MAT-APPL':
+      url = isEdited(state) ? 'maApplicationEdit' : 'maApplicationLabel'
+      break
+    // 新增物料库存盘点
+    case 'MATERIEL-CHECK-CONFIRM':
+      url = 'inventoryCountEdit'
+      break
+    case 'MATERIEL-CHECK-SUBMIT':
+      url = 'inventoryCountLabel'
+      break
+    case 'MATERIEL-CHECK-RETURN':
+      url = 'inventoryCountEdit'
+      break
+    case 'MATERIEL-MAT-CHECK':
+      url = isEdited(state) ? 'inventoryCountEdit' : 'inventoryCountLabel'
+      break
+    // 质量反馈
+    case 'MATERIEL-FB-ADD':
+      url = 'materielQualityFeedbackEdit'
+      break
+    case 'MATERIEL-FB-CONFIRM':
+      url = 'materielQualityFeedbackEdit'
+      break
+    case 'MATERIEL-FB-SUBMIT':
+      url = 'materielQualityFeedbackDetail'
+      break
+    case 'MATERIEL-FB-RETURN':
+      url = 'materielQualityFeedbackEdit'
+      break
+    case 'MATERIEL-FB-AUDIT-SUBMIT':
+      url = 'materielQualityFeedbackDetail'
+      break
+    case 'MATERIEL-FB-AUDIT-CONFIRM':
+      url = 'materielQualityFeedbackDetail'
+      break
+    case 'MATERIEL-FEEDBACK-WORKFLOW':
+      url = isEdited(state)
+        ? 'materielQualityFeedbackEdit'
+        : 'materielQualityFeedbackDetail'
+      break
+    // 物料供船
+    case 'MATERIEL-IN-STORE': // 待入库
+      url = 'maShipSupplyEdit'
+      break
+    case 'MATERIEL-IN-STORE-SUBMIT': // 待提交签收单
+      url = 'maShipSupplyLabel'
+      break
+    // 物料出库
+    case 'MATERIEL-OUT-CONFIRM': // 待确认任务
+      url = 'deliveryLabel'
+      break
+    case 'MATERIEL-OUT-RETURN': // 退回做成人任务
+      url = 'deliveryEdit'
+      break
+  }
+  return url
+}
+
+export function checkSparepart (code, state) {
+  // 备件
+  let url = ''
+
+  switch (code) {
+    // case "SPAREPART-FEEDBACK-WORKFLOW":
+    //   url = "qualityFeedbackEdit";
+    //   break;
+    // case 'SPAREPART-TRANSACTION-WORKFLOW':
+    //   url = 'businessEdit';
+    //   break;
+    case 'SPAREPART_APPLINFO_MESSAGE':
+      url = 'appPurDetail'
+      break
+    case 'PURCHASE-SP-APPL':
+      url = 'appPurDetail'
+      break
+    // 备件入库
+    case 'SPAREPART-IN-STORE':
+      url = 'shipSupplyEdit'
+      break
+    case 'SPAREPART-OUT-STORE':
+      url = 'theLibraryStatic'
+      break
+    case 'SPAREPART-FEEDBACK-WORKFLOW':
+      url = isEdited(state) ? 'qualityFeedbackEdit' : 'qualityFeedbackDetail'
+      break
+    case 'SPAREPART-TRANSACTION-WORKFLOW':
+      url = 'nonlocalBusinessDetail'
+      break
+    // case 'SPAREPART-SP-APPL':
+    //   url = 'clientEdit';
+    //   break;
+    // case 'SPAREPART-SP-CHECK':
+    //   url = 'inventoryDrawEdit';
+    //   break;
+    // 新增部分 2020-6-9
+    case 'SPAREPART-APPL-CONFIRM':
+      url = 'clientEdit'
+      break
+    case 'SPAREPART-APPL-SUBMIT':
+      url = 'staticDetail' //TODO 路由没有
+      break
+    case 'SPAREPART-APPL-RETURN':
+      url = 'clientEdit'
+      break
+    case 'SPAREPART-SP-APPL':
+      url = isEdited(state) ? 'clientEdit' : 'staticDetail'
+      break
+    // case 'SPAREPART-CHECK-RETURN':
+    //   url = 'inventoryDrawEdit'
+    //   break;
+    case 'SPAREPART-OUT-CONFIRM':
+      url = 'theLibraryStatic'
+      break
+    case 'SPAREPART-OUT-RETURN':
+      url = 'theLibraryEdit'
+      break
+    // 库存盘点
+    case 'SPAREPART-CHECK-RETURN':
+      url = 'inventoryDrawEdit'
+      break
+    case 'SPAREPART-SP-CHECK':
+      url = isEdited(state) ? 'inventoryDrawEdit' : 'inventoryDrawStatic'
+      break
+    case 'SPAREPART-CHECK-CONFIRM':
+      url = 'inventoryDrawEdit'
+      break
+    case 'SPAREPART-CHECK-SUBMIT':
+      url = 'inventoryDrawStatic'
+      break
+    case 'SPAREPART-IN-STORE-SUBMIT':
+      url = 'shipSupplyStatic'
+      break
+    // 备件质量反馈
+    case 'SPAREPART-FB-ADD':
+      url = 'qualityFeedbackEdit'
+      break
+    case 'SPAREPART-FB-CONFIRM':
+      url = 'qualityFeedbackEdit'
+      break
+    case 'SPAREPART-FB-SUBMIT':
+      url = 'qualityFeedbackDetail'
+      break
+    case 'SPAREPART-FB-RETURN':
+      url = 'qualityFeedbackEdit'
+      break
+    case 'SPAREPART-FB-AUDIT-SUBMIT':
+      url = 'qualityFeedbackDetail'
+      break
+    case 'SPAREPART-FB-AUDIT-CONFIRM':
+      url = 'qualityFeedbackDetail'
+      break
+  }
+  return url
+}
+
+export function checkRepair (code, state) {
+  // 修船
+  let url = ''
+  switch (code) {
+    case 'REPAIR-VOYAGE-APPL':
+      url = isEdited(state)
+        ? 'detailEditRequisitionVoyage'
+        : 'detailRequisitionVoyage' // 航修申请单
+      break
+    case 'REPAIR-VOYAGE-BUDGET':
+      url = isEdited(state)
+        ? 'projectBudgetBillDatail'
+        : 'projectBudgetBillLabel'
+      break
+    case 'REPAIR-VOYAGE-ACCEPTANCE':
+      url = isEdited(state)
+        ? 'detailEditAcceptanceReport'
+        : 'detailAcceptanceReport' // 航修验收单
+      break
+    case 'REPAIR-VOYAGE-SETTLEMENT':
+      url = isEdited(state)
+        ? 'statementGenerateList'
+        : 'statementGenerateDatail' // 航修结算单
+      break
+    case 'REPAIR-SELF-SETTLEMENT':
+      url = isEdited(state) ? 'detailEditSettlement' : 'detailSettlement' // 自修结算单
+      break
+    case 'REPAIR-QUALITY-FEEDBACK':
+      url = isEdited(state) ? 'qualityList' : 'qualityDetail' // 质量反馈
+      break
+    case 'REPAIR-YEAR-PLAN':
+      url = isEdited(state) ? 'annualRepairList' : 'annualRepairDetail' // 年度计划
+      break
+    case 'REPAIR-YARD-APPLY':
+      url = isEdited(state)
+        ? 'detailEditRequisitionFactory'
+        : 'detailRequisitionFactory' // 厂修申请单
+      break
+    case 'REPAIR-YARD-PROJECT':
+      url = isEdited(state)
+        ? 'factoryProjectDetailChange'
+        : 'factoryProjectDetailLable'
+      break
+    case 'REPAIR-YARD-BUDGET':
+      url = isEdited(state)
+        ? 'factoryProjectBudgetDatailChange'
+        : 'factoryProjectBudgetDatailLabel'
+      break
+    case 'REPAIR-YARD-ACCEPTANCE':
+      url = isEdited(state) ? 'acceptanceList' : 'acceptanceDetail' // 厂修验收单
+      break
+  }
+  return url
+}
+
+export function checkMaintain (code, state, typeShow) {
+  // 维修保养
+  let url = ''
+  switch (code) {
+    case 'MAINTAIN-WORKORDER':
+      // 工单报告
+      url = 'maintenanceReportList'
+      break
+    case 'MAINTAIN-TIMER':
+      //计时器
+      url = isWarnDely(state, typeShow)
+        ? 'clockUpdateHistory'
+        : 'equipmentTimer'
+      break
+    case 'MAINTAIN-CHECKREPORT':
+      // 检查报告
+      url = isWarnDely(state, typeShow)
+        ? isEdited(state)
+          ? 'inspectionReportEdit'
+          : 'inspectionReportDetail'
+        : 'inspectionReportList'
+      break
+    case 'MAINTAIN-CHECKREPORT-MSG':
+      // 检查报告消息
+      url = 'inspectionReportDetail'
+      break
+    case 'MAINTAIN-CHECKREPORT-EDIT':
+      url = isWarnDely(state, typeShow)
+        ? isEdited(state)
+          ? 'inspectionReportEdit'
+          : 'inspectionReportDetail'
+        : 'inspectionReportList'
+      break
+  }
+  return url
+}
+
+export function checkOil (code, state) {
+  // 油品
+  let url = ''
+  switch (code) {
+    case 'OIL-MONTHLY-CONSUMPTION-APPROVE':
+      // url = "fuelConsumptionMonthAdd";
+      url = isEdited(state)
+        ? 'fuelConsumptionMonthEdit'
+        : 'fuelConsumptionMonthDetail'
+      break
+    case 'OIL-VOYAGE-CONSUMPTION-APPROVE':
+      // url = "fuelConsVoyageEdit";
+      url = isEdited(state) ? 'fuelConsVoyageEdit' : 'fuelConsVoyageDetail'
+      break
+    case 'OIL-APPLY-APPROVE':
+      url = isEdited(state)
+        ? 'applicationRefuelingEdit'
+        : 'applicationRefuelingDetail'
+      break
+    case 'OIL-BUNKERING-REPORT-APPROVE':
+      url = isEdited(state) ? 'retrofitReportEdit' : 'retrofitReportDetail'
+      break
+    case 'OIL-FEEDBACK-APPROVE':
+      url = isEdited(state) ? 'qualityFeedbacksAdd' : 'qualityFeedbacksDetail'
+      break
+  }
+  return url
+}
+
+export function checkServicer (code, state) {
+  // 服务商
+  let url = ''
+  switch (code) {
+    case 'SERVICER-MERCHANT-ADD':
+      url = isEdited(state) ? 'serviceProviderEdit' : 'serviceProviderDetail'
+      break
+  }
+  return url
+}
+
+export function checkInspection (code, state) {
+  // 产品 船舶检查
+  let url = ''
+  switch (code) {
+    case 'ISM-SHIPPSC-INSPECTION-REPORT':
+      url = isEdited(state) ? 'inspectionPscNewly' : 'inspectionPscDetails'
+      break
+    case 'ISM-SHIPFSC-INSPECTION-REPORT':
+      url = isEdited(state) ? 'inspectionFscNewly' : 'inspectionFscDetails'
+      break
+    case 'INS-VISIT-SHIP':
+      url = isEdited(state) ? 'visitingNewly' : 'visitingDetails'
+      break
+    case 'INS-INCOMPATIBLE-REPORT':
+      url = isEdited(state) ? 'faultinessNewly' : 'faultinessDetails'
+      break
+    // 产品- 船舶自查
+    case 'INS-SHIPSELF-INSPECTION-REPORT':
+      url = isEdited(state) ? 'inspectionNewly' : 'inspectionDetails'
+      break
+    case 'INS-SHIPPSC-INSPECTION-REPORT':
+      url = isEdited(state) ? 'inspectionPscNewly' : 'inspectionPscDetails'
+      break
+    case 'INS-SHIPFSC-INSPECTION-REPORT':
+      url = isEdited(state) ? 'inspectionFscNewly' : 'inspectionFscDetails'
+      break
+  }
+  return url
+}
+
+export function checkIsm (code, state) {
+  // 体系
+  let url = ''
+  switch (code) {
+    // 产品-体系-start
+    case 'TX-FILE-RECEIVE-CODE':
+      url = 'circulationStatement'
+      break
+    case 'TX-FILE-RECEIVE':
+      url = 'circulationStatement'
+      break
+    // 修改文件 ISM-SYSTEM-OPERATION
+    case 'ISM-SYSTEM-OPERATION':
+      url = 'systemOperation'
+      break
+
+    // 产品-体系-end
+    // case 'ISM-SYSTEM-OPERATION':
+    //   url = 'systemOperation'
+    //   break
+    case 'ISM-SYSTEM-FILE':
+      url = 'systemOperation'
+      break
+    case 'ISM-FSCXT-INSPECTION-REPORT':
+      url = isEdited(state)
+        ? 'inspectionReportFscEditqgxt'
+        : 'inspectionReportFscDetailqgxt'
+      break
+    case 'ISM-SELFXT-INS-REPORT':
+      url = isEdited(state) ? 'selfReportEditqgxt' : 'selfReportDetailqgxt'
+      break
+
+    case 'ISM-VISIT-VESSEL-PLAN':
+      url = isEdited(state) ? 'visitingPlanEdit' : 'visitingPlanDetail'
+      break
+    case 'ISM-VISIT-VESSEL-REPORT':
+      url = isEdited(state)
+        ? 'visitingReportqgxtEdit'
+        : 'visitingReportqgxtDetail'
+      break
+    case 'NCOMPATIBLE-REPORT':
+      url = isEdited(state) ? 'nonConformEdit' : 'nonConformDetail'
+      break
+
+    // case 'ISM-INCOMPATIBLE-REPORT':
+    //   url = isEdited(state) ? 'nonConformEdit' : 'nonConformCheck'
+    //   break
+    // 产品- 缺陷管理-不符合报告
+    case 'ISM-INCOMPATIBLE-REPORT':
+      url = isEdited(state) ? 'faultinessNewly' : 'faultinessDetails'
+      break
+    // 产品- 船舶自查
+    case 'ISM-SHIPSELF-INSPECTION-REPORT':
+      url = isEdited(state) ? 'inspectionNewly' : 'inspectionDetails'
+      break
+    // 产品- 岸基访船
+    case 'ISM-VISIT-SHIP':
+      url = isEdited(state) ? 'visitingNewly' : 'visitingDetails'
+      break
+
+    // case 'ISM-SHIPSELF-INSPECTION-REPORT':
+    //   url = isEdited(state) ? 'selfReportEdit' : 'selfReportDetail'
+    //   break
+    // 产品 =船舶检查
+    case 'ISM-SHIPPSC-INSPECTION-REPORT':
+      url = isEdited(state) ? 'inspectionPscNewly' : 'inspectionPscDetails'
+      break
+    case 'ISM-SHIPFSC-INSPECTION-REPORT':
+      url = isEdited(state) ? 'inspectionFscNewly' : 'inspectionFscDetails'
+      break
+    // case 'ISM-SHIPPSC-INSPECTION-REPORT':
+    //   url = isEdited(state)
+    //     ? 'inspectionReportPscEdit'
+    //     : 'inspectionReportPscDetail'
+    //   break
+    // case 'ISM-SHIPFSC-INSPECTION-REPORT':
+    //   url = isEdited(state)
+    //     ? 'inspectionReportFscEdit'
+    //     : 'inspectionReportFscDetail'
+    //   break
+    case 'SYSTEM-OPERATION':
+      url = 'systemOperation'
+      break
+    // case 'ISM-VISIT-SHIP':
+    //   url = isEdited(state) ? 'visitingReportEdit' : 'visitingReportDetail'
+    //   break
+    case 'ISM-COMP-INS-REPORT':
+      url = 'companyInspectionReportSave'
+      break
+    case 'ISM-SELFFY-INS-REPORT':
+      url = 'selfReportUpdate'
+      break
+    case 'ISM-INC-STUA-REPORT':
+      url = isEdited(state)
+        ? 'nonConformConditionAdd'
+        : 'nonConformConditionEdit'
+      break
+
+    case 'ISM-SITE-SUPERVISION-REPORT':
+      url = isEdited(state)
+        ? 'shipSiteSupervisionReportEdit'
+        : 'shipSiteSupervisionReportDetail'
+      break
+    case 'ISM-THIRD-INSPECTION-REPORT':
+      url = isEdited(state)
+        ? 'thirdPartyInspectionReportEdit'
+        : 'thirdPartyInspectionReportDetail'
+      break
+    // case 'TX-FILE-RECEIVE':
+    //   url = 'systemOperation';
+    //   break;
+    // case 'TX-FILE-RECEIVE-CODE':
+    //   url = 'systemOperation';
+    //   break;
+  }
+  return url
+}
+export function checkMonitor (code, state) {
+  // 海务
+  let url = ''
+  switch (code) {
+    case 'Voyage-Plan':
+      url = 'voyagePlanEdit'
+      break
+    case 'Voyage-Plan-Submit':
+      url = 'voyagePlanDetail'
+      break
+    case 'Voyage-Plan-Commit':
+      url = 'voyagePlanEdit'
+      break
+    case 'Voyage-Plan-Submission':
+      url = 'voyagePlanDetail'
+      break
+    case 'MONITOR-VOYAGE-PLAN':
+      url = 'voyagePlanDetail'
+      break
+    case 'Voyage-Mission-Audit':
+      url = 'voyageTaskDetail'
+      break
+    case 'Voyage-Mission-Submit':
+      url = 'voyageTaskEdit'
+      break
+    case 'Voyage-Mission-Return':
+      // url = isEdited(state) ? "voyageTaskEdit" : "voyageTaskDetail";
+      url = 'voyageTaskEdit'
+      break
+    case 'VoyageMission-Add':
+      url = 'voyageTaskEdit'
+      break
+    case 'VoyageMission-Submit':
+      url = 'voyageTaskEdit'
+      break
+    case 'VoyageMission-Return':
+      url = 'voyageTaskDetail'
+      break
+    case 'Department-Improve':
+      url = 'voyageTaskDetail'
+      break
+    case 'Reviewed-By-Department':
+      url = 'voyageTaskDetail'
+      break
+    case 'Reviewed-By-General':
+      url = 'voyageTaskDetail'
+      break
+    case 'Implementation-Feedback':
+      url = 'voyageTaskDetail'
+      break
+    case 'Dynamic-Report-Confirm':
+      url = 'checkReports'
+      break
+    case 'Voyage-Mission-Msg':
+      url = 'voyageTaskDetailNew'
+      break
+    case 'Voyage-Mission-Return-New':
+      url = 'voyageTaskEditNew'
+      break
+    case 'Voyage-Mission-Audit-New':
+      url = 'voyageTaskDetailNew'
+      break
+    case 'Department-Improve-New':
+      url = 'voyageTaskDetailNew'
+      break
+    case 'Reviewed-By-General-New':
+      url = 'voyageTaskDetailNew'
+      break
+    case 'Implementation-Feedback-New':
+      url = 'voyageTaskDetailNew'
+      break
+  }
+  if (code && code !== '') {
+    if (
+      code.includes('RETURNED_BY_DEPARTMENT') ||
+      code.includes('REVIEWED_BY_DEPARTMENT')
+    ) {
+      url = 'voyageTaskDetail'
+    } else if (
+      code.includes('Returned-By-Department-New') ||
+      code.includes('Reviewed-By-Department-New')
+    ) {
+      url = 'voyageTaskDetailNew'
+    }
+  }
+  return url
+}
+
+export function checkVessel (code, state) {
+  let url = ''
+  switch (code) {
+    case 'VESSEL-NOON-REPORT':
+    case 'DYNAMIC-REPORT-CONFIRM':
+    case 'DYNAMIC-REPORT-VIEW':
+      url = 'dynamicReportView'
+      break
+  }
+  return url
+}
+
+export function checkoutput (code, state) {
+  let url = ''
+  let compDomainName = sessionStorage.getItem('ws-pf_compDomainName')
+  switch (code) {
+    // 出入库
+    case 'INOUTTASK-TASK-APPROVE':
+      url =  'tranManagementWarehouseInOuttask'
+      break
+    default:
+      url = undefined
+  }
+  return url
+}
+
+export function checkpurchase (code, state) {
+  let url = ''
+  switch (code) {
+    case 'PROCUREMENT-CLOSE-REPORT':
+      url = 'purchaseClosingCashierList'
+      break
+      case 'PROCUREMENT-RECEIPT-REPORT':
+      url = 'purchaseReceiptStatisticsList'
+      break
+      case 'PROCUREMENT-ORDER-APPROVE':
+      url = 'purchaseOrderList'
+      break
+    default:
+      url = undefined
+  }
+  return url
+}
+
+export function checkPurchase (code, state) {
+  let url = ''
+  switch (code) {
+    // 申请单-备件
+    case 'PURCHASE-SP-APPL-REMIND':
+      url = 'sparepart'
+      break
+    // 申请单-物料
+    case 'PURCHASE-MA-APPL-REMIND':
+      url = 'sparepartMa'
+      break
+    // 询价单-备件
+    case 'PURCHASE-SP-PARITY-SUBMITTED':
+      url = 'parityDetail'
+      break
+    // 询价单-物料
+    case 'PURCHASE-MA-PARITY-SUBMITTED':
+      url = 'parityDetailMa'
+      break
+    case 'PURCHASE-SP-APPL':
+      url = 'appPurDetail'
+      // url = "applDetail";
+      break
+    // 比价单-备件
+    case 'PURCHASE-SP-PARITY':
+      url = 'parityDetail'
+      break
+
+    case 'PURCHASE-SP-PURCHASE-SUBMITTED':
+      url = 'purchasDetail'
+      break
+    case 'PURCHASE-MA-PURCHASE-SUBMITTED':
+      url = 'purchasDetailMa'
+      break
+
+    case 'PURCHASE-SP-PURCHASE-SEND':
+      url = 'purchasDetail'
+      break
+    case 'PURCHASE-MA-PURCHASE-SEND':
+      url = 'purchasDetailMa'
+      break
+
+    case 'PURCHASE-SP-BILL-SUBMITTED':
+      url = 'billDetail'
+      break
+    case 'PURCHASE-MA-BILL-SUBMITTED':
+      url = 'billDetailMa'
+      break
+
+    // 采购单-备件
+    case 'PURCHASE-SP-PURCHAS':
+      url = 'purchasDetail'
+      break
+    // 结算单-备件
+    case 'PURCHASE-SP-BILL':
+      url = 'billDetail'
+      break
+    // 申请单_物料
+    case 'PURCHASE-MA-APPL':
+    case 'PURCHASE-MA-APPL14':
+      url = 'appPurDetailMa'
+      // url = "applDetailMa";
+      break
+    // 比价单_物料
+    case 'PURCHASE-MA-PARITY':
+      url = 'parityDetailMa'
+      break
+    // 采购单-物料
+    case 'PURCHASE-MA-PURCHAS':
+      url = 'purchasDetailMa'
+      break
+    // 结算单-物料
+    case 'PURCHASE-MA-BILL':
+      url = 'billDetailMa'
+      break
+    // 申请单-海图
+    case 'PURCHASE-MAP-APPL':
+      url = 'applDetailMap'
+      break
+    // 比价单-海图
+    case 'PURCHASE-MAP-PARITY':
+      url = 'parityDetailMap'
+      break
+    case 'PURCHASE-NAV-APPL-REMIND':
+      url = 'sparepartMap';
+      break;
+    case 'PURCHASE-NAV-PURCHASE-SUBMITTED':
+      url = 'purchasDetailMap';
+      break;
+    case 'PURCHASE-NAV-PARITY-SUBMITTED':
+      url = 'parityDetailMap';
+      break;
+    case 'PURCHASE-NAV-PURCHASE-SEND':
+      url = 'purchasDetailMap';
+      break;
+    case 'PURCHASE-MAP-PURCHAS':
+      url = 'purchasDetailMap';
+      break;
+    case 'PURCHASE-NAV-BILL-SUBMITTED':
+      url = 'billDetailMap';
+      break;
+    case 'PURCHASE-MAP-BILL':
+      url = 'billDetailMap';
+      break;
+    // 2020-07-14
+    case 'PURCHASE-SP-BILL-SUBMIT':
+      url = 'billDetail';
+      break;
+    case 'PURCHASE-SP-BILL-AUDIT':
+      url = 'billDetail';
+      break;
+    case 'PURCHASE-MA-BILL-SUBMIT':
+      url = 'billDetailMa';
+      break;
+    case 'PURCHASE-MA-BILL-AUDIT':
+      url = 'billDetailMa';
+      break;
+    case 'PURCHASE-NAV-BILL-SUBMIT':
+      url = 'billDetailMap';
+      break;
+    case 'PURCHASE-NAV-BILL-AUDIT':
+      url = 'billDetailMap';
+      break;
+    default:
+      url = undefined
+  }
+  return url
+}
+
+export function sale (code, state) {
+  if (code === 'SALE-CLOSE-REPORT') {
+    // 销售平仓统计
+    return 'salesClosingCashierList'
+  }
+  if (code === 'SALE-RECEIPT-REPORT') {
+    // 销售出库统计
+    return 'salesDeliveryReportList'
+  }
+  if (code === 'SALE-ORDER-APPROVE') {
+    // 销售订单
+    return 'salesOrderList'
+  }
+  return undefined
+}
+
+// 调度
+export function checkDispatch (code, state) {
+  let url = ''
+  switch (code) {
+    // 航次指令
+    case 'DISPATCH-VOYAGE-COMMAND':
+      url = isEdited(state) ? 'addVoyageInstruction' : 'detailVoyageInstruction'
+      break
+    // 动态报
+    case 'DISPATCH-DYNAMIC-REPORT':
+      url = isEdited(state) ? 'addDynamicNewspaper' : 'detailDynamicNewspaper'
+      break
+    default:
+      url = undefined
+  }
+  return url
+}
+
+export function isHandled (state) {
+  if (
+    state === HandleType.COMPLETED ||
+    state === HandleType.HANDLED ||
+    state === HandleType.NEED_CONFIRMED
+  ) {
+    return true
+  }
+  return false
+}
+
+// 是否是已退回、待完善的状态
+export function isEdited (state) {
+  if (state === HandleType.RETURN || state === HandleType.TO_BE_MORE) {
+    return true
+  }
+  return false
+}
+
+export function isWarnDely (state, typeShow) {
+  if (typeShow === '0') {
+    return true
+  }
+  return false
+}

src/views/workNotification/work.vue

@@ -0,0 +1,510 @@
+<!-- 工作通知模块 任务 -->
+<template>
+  <div>
+    <!-- <ws-common-loading v-if="initLoading"></ws-common-loading> -->
+    <div class="work-notification-container">
+      <div class="work-notification-flex">
+        <span class="work-notification-size">{{ $t('workNotification.busModule') }}{{$t('common.colon')}}</span>
+        <div class="work-notification-top">
+         <el-badge :value="number.warehouse"
+                    :hidden="number.warehouse <= 0"
+                    class="item"
+                    v-if="crewFlag">
+            <el-button @click="switchTab(notificationType.WAREHOUSE)"
+                       size="small"
+                       :class="
+                `notification-btn ${tabIndex === notificationType.WAREHOUSE &&
+                  'notification-button'}`
+              ">
+              {{ $t('workNotification.warehouse') }}
+            </el-button>
+          </el-badge>
+
+          <!-- 体系 -->
+          <el-badge :value="number.sale"
+                    :hidden="number.sale <= 0"
+                    class="item"
+                    v-if="ismFlag">
+            <el-button @click="switchTab(notificationType.SALE)"
+                       size="small"
+                       :class="
+                `notification-btn ${tabIndex === notificationType.SALE &&
+                  'notification-button'}`
+              ">
+              {{ $t('workNotification.ism') }}
+            </el-button>
+          </el-badge>
+
+          <!-- 采购管理PROCUREMENT -->
+          <el-badge :value="number.procurement"
+                    :hidden="number.procurement <= 0"
+                    class="item"
+                    v-if="financeFlag">
+            <el-button @click="switchTab(notificationType.PROCUREMENT)"
+                       size="small"
+                       :class="
+                `notification-btn ${tabIndex === notificationType.PROCUREMENT &&
+                  'notification-button'}`
+              ">
+              {{ $t('workNotification.finance') }}
+            </el-button>
+          </el-badge>
+
+          <!-- 统计报表 -->
+          <el-badge :value="number.report"
+                    :hidden="number.report <= 0"
+                    class="item"
+                    v-if="servicerFlag">
+            <el-button @click="switchTab(notificationType.REPORT)"
+                       size="small"
+                       :class="
+                `notification-btn ${tabIndex === notificationType.REPORT &&
+                  'notification-button'}`
+              ">
+              {{ $t('workNotification.report') }}
+            </el-button>
+          </el-badge>
+        </div>
+      </div>
+      <div class="work-notification-time">
+        <span class="work-notification-size1">{{ $t('workNotification.noticeTime') }}{{$t('common.colon')}}</span>
+        <div class="block work-top">
+          <el-date-picker v-model="dateRange"
+                          :picker-options="pickerOptions"
+                          type="daterange"
+                          range-separator="~"
+                          :start-placeholder="$t('workNotification.startPlaceholder')"
+                          :end-placeholder="$t('workNotification.endPlaceholder')"
+                          value-format="yyyy-MM-dd"
+                          @change="getWorkList" />
+        </div>
+      </div>
+    </div>
+    <div id="message"
+         class="scroll-container"
+         v-infinite-scroll="getWorkListAppend">
+      <WorkNotificationItem v-for="(item, index) in workNotificationList"
+                            :key="'key' + index"
+                            :info="item"
+                            @handleLater="getWorkList" />
+      <div v-if="workNotificationList.length === 0 && !initLoading"
+           class="img-bg">
+        <div class="box">
+          <img src="../../assets/images/onData.png"
+               alt="" />
+          <div>{{ $t('workNotification.empty') }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import WorkNotificationItem from './components/WorkNotificationItem'
+import { getQueryPage, countAmount } from '@/model/indexRx'
+import notificationType from './types/notificationType'
+import { EventBus } from 'base-core-lib'
+export default {
+  name: 'Work',
+  components: {
+    WorkNotificationItem
+  },
+  data () {
+    return {
+      navigationFlag: false,
+      materielFlag: false,
+      sparepartFlag: false,
+      repairFlag: false,
+      maintainFlag: false,
+      servicerFlag: false,
+      oilFlag: false, //油品
+      monitorManagerFlag: false,
+      certificateFlag: false,
+      purchasFlag: false,
+      crewFlag: false,
+      financeFlag: false,
+      vesselNoonReportFlag: false,
+      ismFlag: false,
+      notificationType: notificationType,
+      dateRange: [], // 通知时间的双向绑定
+      tabIndex: '',
+      // notificationType.ALL
+      tabIndexs: [],
+      pickerOptions: {},
+      initLoading: false,
+      pageSize: 20,
+      currentPage: 1,
+      total: 10,
+      order: '',
+      businessType: '',
+      createDateStart: '',
+      createDateEnd: '',
+      // 动态显示角标
+      number: {
+        // 总数
+        sum: 0,
+        //通知通函
+        circular: 0,
+        // 船舶证书
+        certificate: 0,
+        // 采购管理
+        purchas: 0,
+        // 船员管理
+        crew: 0,
+        // 财务管理
+        finance: 0,
+        //船舶午报
+        vesselNoonReport: 0,
+        // 体系
+        ism: 0,
+        monitor: 0,
+        //油品
+        oil: 0,
+        // 服务商
+        servicer: 0,
+        //维保
+        maintain: 0,
+        //修船
+        repair: 0,
+        //备件
+        sparepart: 0,
+        //物料
+        materiel: 0,
+        //航海
+        navigation: 0
+      },
+      workNotificationList: [] // 初始化列表数组
+    }
+  },
+  computed: {},
+  mounted () {
+    this.getAmount()
+    this.getWorkList()
+  },
+
+  methods: {
+    // tab切换
+    switchTab (index) {
+      this.tabIndex = index === 'all' ? this.tabIndexs.join(',') : index
+      this.dateRange = []
+      this.getWorkList()
+    },
+
+    // 通知时间的函数
+    getWorkList () {
+      // this.elLoading()
+      this.initLoading = true
+      this.currentPage = 1
+      const time = this.nowFormatDate('YYYY-MM-DD HH:mm:ss')
+      const params = {
+        staffId: sessionStorage.getItem('ws-pf_userId'),
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        acceptanceTypes: 'NEED_HANDLE,RETURN',
+        businessType: this.tabIndex,
+        showTime: time
+      }
+
+      // 调用时间
+      if (this.dateRange != null && this.dateRange.length > 0) {
+        params.createDateStart =
+          this.dateRange[0] === undefined ? '' : this.dateRange[0] + ' 00:00:00'
+        params.createDateEnd =
+          this.dateRange[1] === undefined ? '' : this.dateRange[1] + ' 23:59:59'
+      }
+
+      getQueryPage(params).toPromise()
+        .then(response => {
+          this.initLoading = false
+          // this.elLoading('end')
+          this.workNotificationList = []
+          this.total = response.total
+          this.workNotificationList = response.records
+          if (this.workNotificationList.length >= this.pageSize) {
+            this.currentPage += 1
+          }
+        })
+        .catch((error) => {
+          EventBus.$emit('error', error || this.$t('common.error'))
+        })
+    },
+    // 分页加载方法
+    getWorkListAppend () {
+      if (
+        this.workNotificationList.length >= this.total ||
+        this.currentPage <= 1
+      ) {
+        return
+      }
+      const time = this.nowFormatDate('YYYY-MM-DD HH:mm:ss')
+      const params = {
+        staffId: sessionStorage.getItem('ws-pf_userId'),
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        acceptanceTypes: 'NEED_HANDLE,RETURN',
+        businessType: this.tabIndex,
+        showTime: time
+      }
+
+      // 调用时间
+      if (this.dateRange != null && this.dateRange.length > 0) {
+        params.createDateStart =
+          this.dateRange[0] === undefined ? '' : this.dateRange[0] + ' 00:00:00'
+        params.createDateEnd =
+          this.dateRange[1] === undefined ? '' : this.dateRange[1] + ' 23:59:59'
+      }
+
+      getQueryPage(params).toPromise()
+        .then(response => {
+          this.total = response.total
+          this.workNotificationList = this.workNotificationList.concat(
+            response.records
+          )
+          if (this.workNotificationList.length >= this.pageSize) {
+            this.currentPage += 1
+          }
+        })
+        .catch((error) => {
+          EventBus.$emit('error', error || this.$t('common.error'))
+        })
+    },
+
+    // 获取工作类型 分类总数
+    getAmount () {
+      if (this.permissionIf('crewManagement')) {
+        this.tabIndexs.push(notificationType.CREW)
+        this.crewFlag = true
+      }
+      if (this.permissionIf('certificateManagement')) {
+        this.tabIndexs.push(notificationType.CERTIFICATE)
+        this.certificateFlag = true
+      }
+      if (this.permissionIf('procurement')) {
+        this.tabIndexs.push(notificationType.PURCHASE)
+        this.purchasFlag = true
+      }
+      if (this.permissionIf('financeManagement')) {
+        this.tabIndexs.push(notificationType.FINANCE)
+        this.financeFlag = true
+      }
+      if (this.permissionIf('dynamicRport.report.review')) {
+        this.tabIndexs.push(notificationType.VESSEL_NOON_REPORT)
+        this.vesselNoonReportFlag = true
+      }
+      if (this.permissionIf('ismManager')) {
+        this.tabIndexs.push(notificationType.ISM)
+        this.ismFlag = true
+      }
+      if (this.permissionIf('monitorManager')) {
+        this.tabIndexs.push(notificationType.MONITOR)
+        this.monitorManagerFlag = true
+      }
+
+      if (this.permissionIf('oil')) {
+        this.tabIndexs.push(notificationType.OIL)
+        this.oilFlag = true
+      }
+
+      if (this.permissionIf('servicer')) {
+        this.tabIndexs.push(notificationType.SERVICER)
+        this.servicerFlag = true
+      }
+
+      if (this.permissionIf('maintenanceManagement')) {
+        this.tabIndexs.push(notificationType.MAINTAIN)
+        this.maintainFlag = true
+      }
+
+      if (this.permissionIf('repairManager')) {
+        this.tabIndexs.push(notificationType.REPAIR)
+        this.repairFlag = true
+      }
+
+      if (this.permissionIf('spareParts')) {
+        this.tabIndexs.push(notificationType.SPAREPART)
+        this.sparepartFlag = true
+      }
+
+      if (this.permissionIf('materiel')) {
+        this.tabIndexs.push(notificationType.MATERIEL)
+        this.materielFlag = true
+      }
+
+      if (this.permissionIf('navigationManagement')) {
+        this.tabIndexs.push(notificationType.NAVIGATION)
+        this.navigationFlag = true
+      }
+      // 通函通知没有权限，都能看见
+      this.tabIndexs.push(notificationType.CIRCULAR)
+
+      this.tabIndex = this.tabIndexs.join(',')
+      const time = this.nowFormatDate('YYYY-MM-DD HH:mm:ss')
+      const params = {
+        staffId: sessionStorage.getItem('ws-pf_userId'),
+        acceptanceTypes: 'NEED_HANDLE,RETURN',
+        isTask: 1,
+        showTime: time
+      }
+      if (this.dateRange.length > 0) {
+        params.createDateStart =
+          this.dateRange[0] === undefined ? '' : this.dateRange[0] + ' 00:00:00'
+        params.createDateEnd =
+          this.dateRange[1] === undefined ? '' : this.dateRange[1] + ' 23:59:59'
+      }
+      countAmount(params).toPromise()
+        .then(res => {
+          // this.number.sum = res.data.sum;
+          this.number.sum = 0
+          const content = res.content
+          content.forEach(item => {
+            //   // if (item.businessType === notificationType.CREW) {
+            //   //   // 船员管理
+            //   //   debugger
+            //   //   this.number.crew = item.number;
+            //   //   this.number.sum += parseInt(item.number);
+            //   // } else if (item.businessType === notificationType.FINANCE) {
+            //   //   // 财务管理
+            //   //   this.number.finance = item.number;
+            //   //   this.number.sum += parseInt(item.number);
+            //   // } else if (item.businessType === notificationType.PURCHASE) {
+            //   //   // 采购管理
+            //   //   this.number.purchas = item.number;
+            //   //   this.number.sum += parseInt(item.number);
+            //   // } else if (item.businessType === notificationType.CERTIFICATE) {
+            //   //   // 船舶证书
+            //   //   this.number.certificate = item.number;
+            //   //   this.number.sum += parseInt(item.number);
+            //   // } else if (item.businessType === notificationType.VESSEL_NOON_REPORT) {
+            //   //   // 船舶午报
+            //   //   this.number.vesselNoonReport = item.number;
+            //   //   this.number.sum += parseInt(item.number);
+            //   // }
+            if (item.businessType === 'WAREHOUSE') {
+              this.number.warehouse = item.number
+            } else if (item.businessType === 'PROCUREMENT') {
+              this.number.procuement = item.number
+            } else if (item.businessType === 'REPORT') {
+              this.number.report = item.number
+            } else if (item.businessType === 'SALE') {
+              this.number.sale = item.number
+            }
+
+            this.tabIndexs.forEach(ite => {
+              if (item.businessType === ite) {
+                this.number.sum += parseInt(item.number)
+              }
+            })
+          })
+        })
+        .catch(error => {
+          EventBus.$emit('error', error)
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.work-notification-container {
+  margin: 10px 10px 0 10px;
+  padding: 30px 0 20px 20px;
+  background: #fff;
+}
+
+.work-notification-flex {
+  display: flex;
+}
+
+.work-notification-size {
+  font-size: 14px;
+  color: #666666;
+  width: 100px;
+}
+
+.work-notification-top {
+  margin: -20px 0 0 5px;
+}
+
+.notification-btn {
+  background: #ffffff;
+  border: none;
+  font-size: 14px;
+  color: #333333;
+  width: 100px;
+}
+
+.notification-btn:hover {
+  color: #1d6ced;
+}
+
+.notification-button {
+  background: #eee !important;
+  border: 1px solid #eee !important;
+}
+
+.work-notification-time {
+  display: flex;
+}
+
+.work-notification-size1 {
+  font-size: 14px;
+  color: #666666;
+  padding-top: 20px;
+}
+
+.work-notification-all {
+  font-size: 14px;
+  color: #444;
+  position: relative;
+  top: -12px;
+  margin-left: 5px;
+}
+
+.item {
+  margin-top: 10px;
+  margin-right: 62px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+  width: 483px;
+  height: 32px;
+  border: 1px solid #cccccc;
+}
+
+.work-top {
+  padding-top: 10px;
+  margin-left: 5px;
+}
+
+.scroll-container {
+  height: calc(100vh - 180px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-left: 10px;
+  padding-right: 8px;
+}
+
+.img-bg {
+  background-color: #fff;
+  text-align: center;
+  margin-top: 10px;
+  height: calc(100% - 10px);
+  line-height: 100%;
+  position: relative;
+}
+
+.img-bg .box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -145px;
+  margin-left: -236px;
+}
+
+.img-bg .box div {
+  margin-top: 20px;
+  font-size: 14px;
+  color: #333;
+}
+</style>