综合大屏

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^0.19.2",
+        "big.js": "^7.0.1",
         "core-js": "^3.6.5",
         "echarts": "^4.0.4",
         "moment": "^2.27.0",
@@ -3691,12 +3692,16 @@
       }
     },
     "node_modules/big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true,
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-7.0.1.tgz",
+      "integrity": "sha512-iFgV784tD8kq4ccF1xtNMZnXeZzVuXWWM+ERFzKQjv+A5G9HC8CY3DuV45vgzFFcW+u2tIvmF95+AzWgs6BjCg==",
+      "license": "MIT",
       "engines": {
         "node": "*"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bigjs"
       }
     },
     "node_modules/binary-extensions": {
@@ -4113,6 +4118,16 @@
         "webpack": "^4.0.0"
       }
     },
+    "node_modules/cache-loader/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/cache-loader/node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
@@ -4947,6 +4962,16 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/copy-webpack-plugin/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/copy-webpack-plugin/node_modules/find-cache-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
@@ -5324,6 +5349,16 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/css-loader/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/css-loader/node_modules/camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
@@ -6662,6 +6697,16 @@
         "webpack": ">=2.0.0 <5.0.0"
       }
     },
+    "node_modules/eslint-loader/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/eslint-loader/node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
@@ -7535,6 +7580,16 @@
         "webpack": "^4.0.0"
       }
     },
+    "node_modules/file-loader/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/file-loader/node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
@@ -9810,6 +9865,16 @@
         "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
       }
     },
+    "node_modules/less-loader/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/less-loader/node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
@@ -9963,6 +10028,16 @@
         "node": ">=8.9.0"
       }
     },
+    "node_modules/loader-utils/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
@@ -10282,6 +10357,16 @@
         "webpack": "^4.4.0"
       }
     },
+    "node_modules/mini-css-extract-plugin/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mini-css-extract-plugin/node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
@@ -11725,6 +11810,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/postcss-loader/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/postcss-loader/node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
@@ -14526,6 +14621,16 @@
         "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
       }
     },
+    "node_modules/thread-loader/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/thread-loader/node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
@@ -15211,6 +15316,16 @@
         }
       }
     },
+    "node_modules/url-loader/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/url-loader/node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
@@ -15468,6 +15583,16 @@
         }
       }
     },
+    "node_modules/vue-loader/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/vue-loader/node_modules/hash-sum": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
@@ -15515,6 +15640,16 @@
         "loader-utils": "^1.0.2"
       }
     },
+    "node_modules/vue-style-loader/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/vue-style-loader/node_modules/hash-sum": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
@@ -16341,6 +16476,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/webpack/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/webpack/node_modules/enhanced-resolve": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",

package.json

@@ -5,13 +5,14 @@
   "scripts": {
     "start": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
-    "lint": "vue-cli-service lint --no-fix",
+    "lint": "vue-cli-service lint",
     "development": "node ./upload/development.js",
     "development120": "node ./upload/development120.js",
     "production": "node ./upload/production.js"
   },
   "dependencies": {
     "axios": "^0.19.2",
+    "big.js": "^7.0.1",
     "core-js": "^3.6.5",
     "echarts": "^4.0.4",
     "moment": "^2.27.0",

src/assets/font/demo_index.html

@@ -55,6 +55,18 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon icon_transport">&#xe8a4;</span>
+                <div class="name">费用包含</div>
+                <div class="code-name">&amp;#xe8a4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon icon_transport">&#xe672;</span>
+                <div class="name">工单信息</div>
+                <div class="code-name">&amp;#xe672;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon icon_transport">&#xe675;</span>
                 <div class="name">添加hover</div>
                 <div class="code-name">&amp;#xe675;</div>
@@ -1104,9 +1116,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'icon_transport';
-  src: url('iconfont.woff2?t=1750225745603') format('woff2'),
-       url('iconfont.woff?t=1750225745603') format('woff'),
-       url('iconfont.ttf?t=1750225745603') format('truetype');
+  src: url('iconfont.woff2?t=1751434589849') format('woff2'),
+       url('iconfont.woff?t=1751434589849') format('woff'),
+       url('iconfont.ttf?t=1751434589849') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -1133,6 +1145,24 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon icon_transport transport-feiyongbaohan"></span>
+            <div class="name">
+              费用包含
+            </div>
+            <div class="code-name">.transport-feiyongbaohan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon icon_transport transport-gongdanxinxi"></span>
+            <div class="name">
+              工单信息
+            </div>
+            <div class="code-name">.transport-gongdanxinxi
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon icon_transport transport-tianjiahover"></span>
             <div class="name">
               添加hover
@@ -2709,6 +2739,22 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#transport-feiyongbaohan"></use>
+                </svg>
+                <div class="name">费用包含</div>
+                <div class="code-name">#transport-feiyongbaohan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#transport-gongdanxinxi"></use>
+                </svg>
+                <div class="name">工单信息</div>
+                <div class="code-name">#transport-gongdanxinxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#transport-tianjiahover"></use>
                 </svg>
                 <div class="name">添加hover</div>

src/assets/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "icon_transport"; /* Project id 4543613 */
-  src: url('iconfont.woff2?t=1750225745603') format('woff2'),
-       url('iconfont.woff?t=1750225745603') format('woff'),
-       url('iconfont.ttf?t=1750225745603') format('truetype');
+  src: url('iconfont.woff2?t=1751434589849') format('woff2'),
+       url('iconfont.woff?t=1751434589849') format('woff'),
+       url('iconfont.ttf?t=1751434589849') format('truetype');
 }
 
 .icon_transport {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.transport-feiyongbaohan:before {
+  content: "\e8a4";
+}
+
+.transport-gongdanxinxi:before {
+  content: "\e672";
+}
+
 .transport-tianjiahover:before {
   content: "\e675";
 }

src/assets/font/iconfont.json

@@ -6,6 +6,20 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "2076322",
+      "name": "费用包含",
+      "font_class": "feiyongbaohan",
+      "unicode": "e8a4",
+      "unicode_decimal": 59556
+    },
+    {
+      "icon_id": "3278364",
+      "name": "工单信息",
+      "font_class": "gongdanxinxi",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
       "icon_id": "2488133",
       "name": "添加hover",
       "font_class": "tianjiahover",

src/assets/less/style.less

@@ -71,4 +71,48 @@ a {
   overflow: hidden;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+}
+
+.lineTopLeft{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: .075rem;
+  height: .075rem;
+  border: 1px solid #038094;
+  border-right: none;
+  border-bottom: none;
+}
+
+.lineTopRight{
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: .075rem;
+  height: .075rem;
+  border: 1px solid #038094;
+  border-left: none;
+  border-bottom: none;
+}
+
+.lineBottomLeft{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: .075rem;
+  height: .075rem;
+  border: 1px solid #038094;
+  border-right: none;
+  border-top: none;
+}
+
+.lineBottomRight{
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: .075rem;
+  height: .075rem;
+  border: 1px solid #038094;
+  border-left: none;
+  border-top: none;
 }

src/components/PriceProportion.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="points-ranking__wrap">
-    <div class="points-ranking" ref="CategoryProportion"></div>
+    <div class="points-ranking" ref="BusinessTotal"></div>
   </div>
 </template>
 
@@ -8,12 +8,10 @@
 import echarts from 'echarts'
 import { post, timerCommon } from './../http/http'
 export default {
-  name: 'CategoryProportion',
+  name: 'BusinessTotal',
   inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
-      total: 0,
-      sign: 'lastWeek',
       timer: null,
       myChart: null,
       gradeRankingList: []
@@ -22,9 +20,9 @@ export default {
   methods: {
     // 画图
     draw () {
-      this.myChart = echarts.init(this.$refs.CategoryProportion)
+      this.myChart = echarts.init(this.$refs.BusinessTotal)
       const option = {
-        color: ['#006FFF', '#00D5EA'], // 颜色数组
+        color: ['#33CC85', '#72C0DD', '#FAC958', '#546FC6'], // 颜色数组
         tooltip: {
           trigger: 'item'
         },
@@ -42,30 +40,18 @@ export default {
           bottom: 0,
           right: 0
         },
-        graphic: [{
-          type: 'text',
-          left: 'center',
-          top: '50%',
-          style: {
-            text: `总费用\n${this.total}元`, // 换行显示
-            textAlign: 'center',
-            textVerticalAlign: 'middle',
-            fill: '#949494', // 文字颜色
-            fontSize: 20
-          }
-        }],
         series: [
           {
             name: '',
             type: 'pie',
-            center: ['50%', '58%'],
+            center: ['50%', '63%'],
             radius: ['35%', '50%'],
             avoidLabelOverlap: true,
             label: {
               show: true,
               color: 'rgba(255, 255, 255, 0.85)',
               formatter: (params) => {
-                return `${params.name}\n${params.value}元`
+                return `${params.name}:${params.value}\n${params.percent}`
               },
               textStyle: {
                 lineHeight: 14
@@ -85,17 +71,8 @@ export default {
     },
     // 获取数据
     async getData () {
-      this.$emit('signEmit', this.sign)
-      let startTime
-      let endTime
-
-      if (this.sign === 'lastWeek') {
-        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-      } else if (this.sign === 'lastMonth') {
-        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
-      }
+      const startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
       const result = await post(
         '/itsm/report/index',
         {
@@ -104,20 +81,16 @@ export default {
           dutyId: this.dutyId,
           startDate: startTime,
           endDate: endTime,
-          type: 'itsmPriceProportion'
+          type: 'hsmsStatisticsDateTypeCount',
+          businessType: 'hsms'
         }
       )
       result.data = result.data || []
-      if (result.data.length) {
-        this.gradeRankingList = [
-          { name: '总工时', value: result.data[0].work_price || 0, percent: result.data[0].workPercent || '0%' },
-          { name: '总耗材', value: result.data[0].sum_price || 0, percent: result.data[0].sumPercent || '0%' }
-        ]
-        this.total = this.gradeRankingList.reduce((pre, cur) => pre + cur.value, 0)
-      } else {
-        this.gradeRankingList = []
-        this.total = 0
-      }
+      this.gradeRankingList = result.data.map(v => ({
+        name: v.statisticsDateType || '',
+        value: v.sum || 0,
+        percent: v.percent || '0%'
+      }))
       this.draw()
       this.polling()
     },
@@ -125,11 +98,6 @@ export default {
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
-        if (this.sign === 'lastWeek') {
-          this.sign = 'lastMonth'
-        } else if (this.sign === 'lastMonth') {
-          this.sign = 'lastWeek'
-        }
         this.getData()
       }, timerCommon)
     }

src/components/CategoryProportion.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="points-ranking__wrap">
-    <div class="points-ranking" ref="CategoryProportion"></div>
+    <div class="points-ranking" ref="CategoryTotal"></div>
   </div>
 </template>
 
@@ -8,11 +8,10 @@
 import echarts from 'echarts'
 import { post, timerCommon } from './../http/http'
 export default {
-  name: 'CategoryProportion',
+  name: 'CategoryTotal',
   inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
-      sign: 'lastWeek',
       timer: null,
       myChart: null,
       gradeRankingList: []
@@ -21,7 +20,7 @@ export default {
   methods: {
     // 画图
     draw () {
-      this.myChart = echarts.init(this.$refs.CategoryProportion)
+      this.myChart = echarts.init(this.$refs.CategoryTotal)
       const option = {
         color: ['#33CC85', '#72C0DD', '#FAC958', '#546FC6'], // 颜色数组
         tooltip: {
@@ -45,7 +44,7 @@ export default {
           {
             name: '',
             type: 'pie',
-            center: ['50%', '58%'],
+            center: ['50%', '63%'],
             radius: ['35%', '50%'],
             avoidLabelOverlap: true,
             label: {
@@ -72,17 +71,8 @@ export default {
     },
     // 获取数据
     async getData () {
-      this.$emit('signEmit', this.sign)
-      let startTime
-      let endTime
-
-      if (this.sign === 'lastWeek') {
-        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-      } else if (this.sign === 'lastMonth') {
-        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
-      }
+      const startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
       const result = await post(
         '/itsm/report/index',
         {
@@ -107,11 +97,6 @@ export default {
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
-        if (this.sign === 'lastWeek') {
-          this.sign = 'lastMonth'
-        } else if (this.sign === 'lastMonth') {
-          this.sign = 'lastWeek'
-        }
         this.getData()
       }, timerCommon)
     }

src/components/DeptPrice.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="points-ranking__wrap">
-    <div class="points-ranking" ref="DeptPrice"></div>
+    <div class="points-ranking" ref="DeliveryTotal"></div>
   </div>
 </template>
 
@@ -8,11 +8,10 @@
 import echarts from 'echarts'
 import { post, timerCommon } from './../http/http'
 export default {
-  name: 'DeptPrice',
+  name: 'DeliveryTotal',
   inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
-      sign: 'lastWeek',
       timer: null,
       myChart: null,
       gradeRankingListNum: [],
@@ -22,7 +21,7 @@ export default {
   methods: {
     // 画图
     draw () {
-      this.myChart = echarts.init(this.$refs.DeptPrice)
+      this.myChart = echarts.init(this.$refs.DeliveryTotal)
       var colorArray = [
         {
           top: '#6B97BD', // 第一
@@ -189,17 +188,8 @@ export default {
     },
     // 获取数据
     async getData () {
-      this.$emit('signEmit', this.sign)
-      let startTime
-      let endTime
-
-      if (this.sign === 'lastWeek') {
-        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-      } else if (this.sign === 'lastMonth') {
-        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
-      }
+      const startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
       const result = await post(
         '/itsm/report/index',
         {
@@ -208,18 +198,16 @@ export default {
           dutyId: this.dutyId,
           startDate: startTime,
           endDate: endTime,
-          type: 'itsmDeptPrice'
+          type: 'hsmsDeptCountTop5',
+          businessType: 'hsms'
         }
       )
       this.gradeRankingListNum = []
       this.gradeRankingListName = []
-      if (result.data.length > 5) {
-        result.data = result.data.slice(0, 5)
-      }
       if (result.data.length > 0) {
         result.data.forEach(item => {
-          this.gradeRankingListNum.push(item.price || 0) // 获取到的数据
-          this.gradeRankingListName.push(item.name || '') // 获取到的名称
+          this.gradeRankingListNum.push(item.sum || 0) // 获取到的数据
+          this.gradeRankingListName.push(item.dept || '') // 获取到的名称
         })
       }
       this.draw()
@@ -229,11 +217,6 @@ export default {
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
-        if (this.sign === 'lastWeek') {
-          this.sign = 'lastMonth'
-        } else if (this.sign === 'lastMonth') {
-          this.sign = 'lastWeek'
-        }
         this.getData()
       }, timerCommon)
     }

src/components/DeliveryUserTotal.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="points-ranking__wrap">
+    <div class="points-ranking" ref="DeliveryUserTotal"></div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import { post, timerCommon } from './../http/http'
+export default {
+  name: 'DeliveryUserTotal',
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
+  data () {
+    return {
+      timer: null,
+      myChart: null,
+      gradeRankingListNum: [],
+      gradeRankingListName: []
+    }
+  },
+  methods: {
+    // 画图
+    draw () {
+      this.myChart = echarts.init(this.$refs.DeliveryUserTotal)
+      var colorArray = [
+        {
+          top: '#6B97BD', // 第一
+          bottom: '#364C5F'
+        },
+        {
+          top: '#6B97BD', // 第二
+          bottom: '#364C5F'
+        },
+        {
+          top: '#6AB87D', // 第三
+          bottom: '#3D7057'
+        },
+        {
+          top: '#A09163', // 第四
+          bottom: '#504932'
+        },
+        {
+          top: '#6B97BD', // 第五
+          bottom: '#364C5F'
+        }
+      ]
+      const option = {
+        tooltip: {
+          show: false,
+          formatter: '{b}:{c}'
+        },
+        grid: {
+          left: 28,
+          top: 0,
+          bottom: 10,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          show: false,
+          position: 'top',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false,
+              alignWithLabel: false,
+              length: 5
+            },
+            splitLine: {
+              // 网格线
+              show: false
+            },
+            inverse: 'true', // 排序
+            axisLabel: {
+              margin: 16,
+              color: 'rgba(255,255,255,0.85)'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            data: this.gradeRankingListName
+          }
+        ],
+        series: [
+          {
+            name: 'xxx',
+            type: 'bar',
+            label: {
+              normal: {
+                show: true,
+                // position: [300, 0],
+                position: 'right',
+                formatter: '{c}',
+                textStyle: {
+                  color: '#fff'
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                show: true,
+                color: function (params) {
+                  const num = colorArray.length
+                  return {
+                    type: 'linear',
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      }
+                    ]
+                  }
+                },
+                barBorderRadius: 70,
+                borderWidth: 0,
+                borderColor: '#333'
+              }
+            },
+            barGap: '0%',
+            barCategoryGap: '70%',
+            barWidth: 8,
+            data: this.gradeRankingListNum
+          }
+        ]
+      }
+      this.myChart.setOption(option)
+    },
+    // 获取数据
+    async getData () {
+      const startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const result = await post(
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'hsmsUserScoreTop5',
+          businessType: 'hsms'
+        }
+      )
+      this.gradeRankingListNum = []
+      this.gradeRankingListName = []
+      if (result.data.length > 0) {
+        result.data.forEach(item => {
+          this.gradeRankingListNum.push(item.totalGrade || 0) // 获取到的数据
+          this.gradeRankingListName.push(item.userName || '') // 获取到的名称
+        })
+      }
+      this.draw()
+      this.polling()
+    },
+    // 轮询请求
+    polling () {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        this.getData()
+      }, timerCommon)
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.points-ranking__wrap {
+  height: 3.7rem;
+  overflow: hidden;
+  position: relative;
+  .points-ranking {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+</style>

src/components/PointsRanking.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="points-ranking__wrap">
-    <div class="points-ranking" ref="PointsRanking"></div>
+    <div class="points-ranking" ref="MaintenanceDepartmentTotal"></div>
   </div>
 </template>
 
@@ -8,11 +8,10 @@
 import echarts from 'echarts'
 import { post, timerCommon } from './../http/http'
 export default {
-  name: 'PointsRanking',
+  name: 'MaintenanceDepartmentTotal',
   inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
-      sign: 'lastWeek',
       timer: null,
       myChart: null,
       gradeRankingListNum: [],
@@ -22,7 +21,7 @@ export default {
   methods: {
     // 画图
     draw () {
-      this.myChart = echarts.init(this.$refs.PointsRanking)
+      this.myChart = echarts.init(this.$refs.MaintenanceDepartmentTotal)
       var colorArray = [
         {
           top: '#6B97BD', // 第一
@@ -189,17 +188,8 @@ export default {
     },
     // 获取数据
     async getData () {
-      this.$emit('signEmit', this.sign)
-      let startTime
-      let endTime
-
-      if (this.sign === 'lastWeek') {
-        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-      } else if (this.sign === 'lastMonth') {
-        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
-      }
+      const startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
       const result = await post(
         '/itsm/report/index',
         {
@@ -213,9 +203,6 @@ export default {
       )
       this.gradeRankingListNum = []
       this.gradeRankingListName = []
-      if (result.data.length > 5) {
-        result.data = result.data.slice(0, 5)
-      }
       if (result.data.length > 0) {
         result.data.forEach(item => {
           this.gradeRankingListNum.push(item.total || 0) // 获取到的数据
@@ -229,11 +216,6 @@ export default {
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
-        if (this.sign === 'lastWeek') {
-          this.sign = 'lastMonth'
-        } else if (this.sign === 'lastMonth') {
-          this.sign = 'lastWeek'
-        }
         this.getData()
       }, timerCommon)
     }

src/components/OnDutyToday.vue

@@ -1,124 +0,0 @@
-<template>
-  <div class="on-duty-today">
-    <div class="on-duty-today__inner">
-      <div class="on-duty-today__list">
-        <div class="on-duty-today__item">
-          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.total || 0}}</div>
-          <div class="on-duty-today__itemBody">总单数</div>
-        </div>
-        <div class="on-duty-today__item">
-          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.price || 0}}</div>
-          <div class="on-duty-today__itemBody">总费用（元）</div>
-        </div>
-        <div class="on-duty-today__item">
-          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.avg_response | formatHourMinute}}</div>
-          <div class="on-duty-today__itemBody">平均接单时间</div>
-        </div>
-        <div class="on-duty-today__item">
-          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.avg_handle | formatHourMinute}}</div>
-          <div class="on-duty-today__itemBody">平均解决时间</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { post, timerCommon } from './../http/http'
-export default {
-  name: 'OnDutyToday',
-  inject: ['parentDutyId', 'hosId', 'dutyId'],
-  data () {
-    return {
-      sign: 'lastWeek',
-      timer: null,
-      todayBeOnDuty: {} // 头部总当班人数
-    }
-  },
-  methods: {
-    // 获取数据
-    async getData () {
-      this.$emit('signEmit', this.sign)
-      let startTime
-      let endTime
-
-      if (this.sign === 'lastWeek') {
-        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-      } else if (this.sign === 'lastMonth') {
-        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
-      }
-      const result = await post(
-        '/itsm/report/index',
-        {
-          parentDutyId: this.parentDutyId,
-          hosId: this.hosId,
-          dutyId: this.dutyId,
-          startDate: startTime,
-          endDate: endTime,
-          type: 'itsmSummary'
-        }
-      )
-      this.todayBeOnDuty = result.data ? result.data[0] : {}
-      this.polling()
-    },
-    // 轮询请求
-    polling () {
-      clearTimeout(this.timer)
-      this.timer = setTimeout(() => {
-        if (this.sign === 'lastWeek') {
-          this.sign = 'lastMonth'
-        } else if (this.sign === 'lastMonth') {
-          this.sign = 'lastWeek'
-        }
-        this.getData()
-      }, timerCommon)
-    }
-  },
-  mounted () {
-    this.getData()
-  },
-  beforeDestroy () {
-    clearTimeout(this.timer)
-  }
-}
-</script>
-
-<style lang="less">
-.on-duty-today {
-  overflow: hidden;
-  height: 2.6625rem;
-  .on-duty-today__inner {
-    height: 100%;
-    .on-duty-today__list {
-      display: flex;
-      justify-content: space-between;
-      height: 100%;
-      .on-duty-today__item {
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-right: .4rem;
-        &:first-child {
-          margin-left: .4rem;
-        }
-        &:last-child {
-          margin-right: .4rem;
-        }
-        .on-duty-today__itemHeader{
-          font-size: .65rem;
-          color: #00D5EA;
-          font-weight: bold;
-        }
-        .on-duty-today__itemBody{
-          font-size: .2rem;
-          color: #FFFFFF;
-          margin-top: .1rem;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/PersonnelIntegral.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="points-ranking__wrap">
+    <div class="points-ranking" ref="PersonnelIntegral"></div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import { post, timerCommon } from './../http/http'
+export default {
+  name: 'PersonnelIntegral',
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
+  data () {
+    return {
+      timer: null,
+      myChart: null,
+      gradeRankingListNum: [],
+      gradeRankingListName: []
+    }
+  },
+  methods: {
+    // 画图
+    draw () {
+      this.myChart = echarts.init(this.$refs.PersonnelIntegral)
+      var colorArray = [
+        {
+          top: '#6B97BD', // 第一
+          bottom: '#364C5F'
+        },
+        {
+          top: '#6B97BD', // 第二
+          bottom: '#364C5F'
+        },
+        {
+          top: '#6AB87D', // 第三
+          bottom: '#3D7057'
+        },
+        {
+          top: '#A09163', // 第四
+          bottom: '#504932'
+        },
+        {
+          top: '#6B97BD', // 第五
+          bottom: '#364C5F'
+        }
+      ]
+      const option = {
+        tooltip: {
+          show: false,
+          formatter: '{b}:{c}'
+        },
+        grid: {
+          left: 28,
+          top: 0,
+          bottom: 10,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          show: false,
+          position: 'top',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false,
+              alignWithLabel: false,
+              length: 5
+            },
+            splitLine: {
+              // 网格线
+              show: false
+            },
+            inverse: 'true', // 排序
+            axisLabel: {
+              margin: 16,
+              color: 'rgba(255,255,255,0.85)'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            data: this.gradeRankingListName
+          }
+        ],
+        series: [
+          {
+            name: 'xxx',
+            type: 'bar',
+            label: {
+              normal: {
+                show: true,
+                // position: [300, 0],
+                position: 'right',
+                formatter: '{c}',
+                textStyle: {
+                  color: '#fff'
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                show: true,
+                color: function (params) {
+                  const num = colorArray.length
+                  return {
+                    type: 'linear',
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      }
+                    ]
+                  }
+                },
+                barBorderRadius: 70,
+                borderWidth: 0,
+                borderColor: '#333'
+              }
+            },
+            barGap: '0%',
+            barCategoryGap: '70%',
+            barWidth: 8,
+            data: this.gradeRankingListNum
+          }
+        ]
+      }
+      this.myChart.setOption(option)
+    },
+    // 获取数据
+    async getData () {
+      const startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const result = await post(
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmUserOrdersTop5'
+        }
+      )
+      this.gradeRankingListNum = []
+      this.gradeRankingListName = []
+      if (result.data.length > 0) {
+        result.data.forEach(item => {
+          this.gradeRankingListNum.push(item.count || 0) // 获取到的数据
+          this.gradeRankingListName.push(item.userName || '') // 获取到的名称
+        })
+      }
+      this.draw()
+      this.polling()
+    },
+    // 轮询请求
+    polling () {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        this.getData()
+      }, timerCommon)
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.points-ranking__wrap {
+  height: 3.7rem;
+  overflow: hidden;
+  position: relative;
+  .points-ranking {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+</style>

src/components/RealTimeDeliveryOrder.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="group-praise">
+    <div class="group-praise__content">
+      <div class="group-praise__circle">
+        <header class="group-praise__title">待接单</header>
+        <div class="group-praise__circleContent">
+          <p class="group-praise__circlePercent">
+            {{ dataInfo.waitCount || 0 }}
+          </p>
+          <div class="lineTopRight"></div>
+          <div class="lineBottomLeft"></div>
+        </div>
+      </div>
+      <div class="group-praise__circle">
+        <header class="group-praise__title">处理中</header>
+        <div class="group-praise__circleContent">
+          <p class="group-praise__circlePercent">
+            {{ dataInfo.doingCount || 0 }}
+          </p>
+          <div class="lineTopRight"></div>
+          <div class="lineBottomLeft"></div>
+        </div>
+      </div>
+      <div class="group-praise__circle">
+        <header class="group-praise__title">紧急工单</header>
+        <div class="group-praise__circleContent">
+          <p class="group-praise__circlePercent">
+            {{ dataInfo.emergencyCount || 0 }}
+          </p>
+          <div class="lineTopRight"></div>
+          <div class="lineBottomLeft"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { post, timerCommon } from './../http/http'
+export default {
+  name: 'RealTimeDeliveryOrder',
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
+  data () {
+    return {
+      timer: null,
+      dataInfo: {}
+    }
+  },
+  methods: {
+    // 故障工单实时动态
+    async getRealTimeDeliveryOrder () {
+      const startTime = this.$moment()
+        .startOf('day')
+        .format('YYYY-MM-DD HH:mm:ss') // 今日
+      const endTime = this.$moment()
+        .endOf('day')
+        .format('YYYY-MM-DD HH:mm:ss') // 今日
+      const result = await post(
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'hsmsOrderCount',
+          businessType: 'hsms'
+        }
+      )
+      this.dataInfo = result.data ? result.data[0] : {}
+      this.polling()
+    },
+    // 轮询请求
+    polling () {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        this.getRealTimeDeliveryOrder()
+      }, timerCommon)
+    }
+  },
+  mounted () {
+    this.getRealTimeDeliveryOrder()
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.group-praise {
+  height: 2.6625rem;
+  .group-praise__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 .2rem;
+    height: 100%;
+    .group-praise__title {
+      color: #fff;
+      font-size: .2rem;
+      text-align: center;
+    }
+    .group-praise__circleContent {
+      color: #fff;
+      font-size: 0.175rem;
+      height: .7875rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: .2rem;
+      background: linear-gradient( 90deg, #032430 0%, #023645 13%, #0B4D61 38%, #105A70 61%, #023645 87%, #06252B 100%);
+      position: relative;
+      .group-praise__circlePercent{
+        font-size: .475rem;
+      }
+    }
+    .group-praise__circle {
+      width: 1.425rem;
+    }
+  }
+}
+</style>

src/components/GroupPraise.vue

@@ -7,6 +7,8 @@
           <p class="group-praise__circlePercent">
             {{ dataInfo.pending || 0 }}
           </p>
+          <div class="lineTopRight"></div>
+          <div class="lineBottomLeft"></div>
         </div>
       </div>
       <div class="group-praise__circle">
@@ -15,6 +17,8 @@
           <p class="group-praise__circlePercent">
             {{ dataInfo.handler || 0 }}
           </p>
+          <div class="lineTopRight"></div>
+          <div class="lineBottomLeft"></div>
         </div>
       </div>
       <div class="group-praise__circle">
@@ -23,6 +27,8 @@
           <p class="group-praise__circlePercent">
             {{ dataInfo.overtime || 0 }}
           </p>
+          <div class="lineTopRight"></div>
+          <div class="lineBottomLeft"></div>
         </div>
       </div>
     </div>
@@ -32,7 +38,7 @@
 <script>
 import { post, timerCommon } from './../http/http'
 export default {
-  name: 'GroupPraise',
+  name: 'RealTimeRepairOrder',
   inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
@@ -41,14 +47,10 @@ export default {
     }
   },
   methods: {
-    // 工单实时动态
-    async getGroupPraise () {
-      const startTime = this.$moment()
-        .startOf('day')
-        .format('YYYY-MM-DD HH:mm:ss') // 今日
-      const endTime = this.$moment()
-        .endOf('day')
-        .format('YYYY-MM-DD HH:mm:ss') // 今日
+    // 故障工单实时动态
+    async getRealTimeRepairOrder () {
+      const startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
       const result = await post(
         '/itsm/report/index',
         {
@@ -67,12 +69,12 @@ export default {
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
-        this.getGroupPraise()
+        this.getRealTimeRepairOrder()
       }, timerCommon)
     }
   },
   mounted () {
-    this.getGroupPraise()
+    this.getRealTimeRepairOrder()
   },
   beforeDestroy () {
     clearTimeout(this.timer)
@@ -103,6 +105,7 @@ export default {
       justify-content: center;
       margin-top: .2rem;
       background: linear-gradient( 90deg, #032430 0%, #023645 13%, #0B4D61 38%, #105A70 61%, #023645 87%, #06252B 100%);
+      position: relative;
       .group-praise__circlePercent{
         font-size: .475rem;
       }

src/components/TimeUtilization.vue

@@ -1,202 +0,0 @@
-<template>
-  <div class="time-utilization" ref="TimeUtilization"></div>
-</template>
-
-<script>
-import echarts from 'echarts'
-import { post, timerCommon } from './../http/http'
-export default {
-  name: 'TimeUtilization',
-  inject: ['parentDutyId', 'hosId', 'dutyId'],
-  data () {
-    return {
-      sign: 'lastWeek',
-      timer: null,
-      myChart: null,
-      groupWorkRatioName: [],
-      groupWorkRatioNum: []
-    }
-  },
-  methods: {
-    // 画图
-    draw () {
-      this.myChart = echarts.init(this.$refs.TimeUtilization)
-
-      const option = {
-        grid: {
-          left: '5%',
-          top: '10%',
-          bottom: '10%',
-          right: '5%'
-        },
-        xAxis: {
-          data: this.groupWorkRatioName,
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#709cc2'
-            }
-          },
-          axisLabel: {
-            formatter: function (params) {
-              params = params.slice(0, 9)
-              const len = params.length
-              let str = ''
-              for (let i = 0; i < len; i++) {
-                str += params[i]
-                if (i % 4 === 0 && i !== 0) {
-                  str += '\n'
-                }
-              }
-              return str
-            },
-            textStyle: {
-              color: '#d4d6d7',
-              fontSize: 12
-            }
-          }
-        },
-        yAxis: [
-          {
-            minInterval: 1,
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#709cc2'
-              }
-            },
-            axisLabel: {
-              textStyle: {
-                color: '#d4d6d7',
-                fontSize: 12
-              }
-            },
-            splitArea: {
-              areaStyle: {
-                color: 'rgba(255,255,255,.5)'
-              }
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgba(255, 255, 255, 0.1)',
-                type: 'dashed'
-              }
-            }
-          }
-        ],
-        series: [
-          {
-            name: 'hill',
-            type: 'bar',
-            barCategoryGap: '0%',
-            barWidth: 24,
-            symbol:
-              'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
-            label: {
-              show: true,
-              position: 'top',
-              distance: 0,
-              color: '#70c2ab',
-              fontWeight: 'bold',
-              fontSize: 12
-            },
-            itemStyle: {
-              normal: {
-                color: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: '#00D5EA' //  0%  处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: '#00D5EA' //  100%  处的颜色
-                    }
-                  ],
-                  global: false //  缺省为  false
-                }
-              },
-              emphasis: {
-                opacity: 1
-              }
-            },
-            data: this.groupWorkRatioNum,
-            z: 10
-          }
-        ]
-      }
-      this.myChart.setOption(option)
-    },
-    // 获取数据
-    async getData () {
-      this.$emit('signEmit', this.sign)
-      let startTime
-      let endTime
-
-      if (this.sign === 'lastWeek') {
-        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-      } else if (this.sign === 'lastMonth') {
-        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
-      }
-      const result = await post(
-        '/itsm/report/index',
-        {
-          parentDutyId: this.parentDutyId,
-          hosId: this.hosId,
-          dutyId: this.dutyId,
-          startDate: startTime,
-          endDate: endTime,
-          type: 'itsmBuilding'
-        }
-      )
-      this.groupWorkRatioNum = []
-      this.groupWorkRatioName = []
-      result.data = result.data || []
-      result.data.forEach(item => {
-        this.groupWorkRatioNum.push(item.total || 0) // 获取到的数据
-        this.groupWorkRatioName.push(item.name || '') // 获取到的名称
-      })
-      console.log(this.groupWorkRatioName)
-      this.draw()
-      this.polling()
-    },
-    // 轮询请求
-    polling () {
-      clearTimeout(this.timer)
-      this.timer = setTimeout(() => {
-        if (this.sign === 'lastWeek') {
-          this.sign = 'lastMonth'
-        } else if (this.sign === 'lastMonth') {
-          this.sign = 'lastWeek'
-        }
-        this.getData()
-      }, timerCommon)
-    }
-  },
-  mounted () {
-    this.getData()
-  },
-  beforeDestroy () {
-    clearTimeout(this.timer)
-  }
-}
-</script>
-
-<style lang="less">
-.time-utilization {
-  height: 3.7rem;
-  margin: 0 auto;
-}
-</style>

src/components/TotalStatistics.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="on-duty-today">
+    <div class="on-duty-today__inner">
+      <!-- <div class="on-duty-today__list">
+        <div class="on-duty-today__item">
+          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.total || 0}}</div>
+          <div class="on-duty-today__itemBody">总单数</div>
+        </div>
+        <div class="on-duty-today__item">
+          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.price || 0}}</div>
+          <div class="on-duty-today__itemBody">总费用（元）</div>
+        </div>
+        <div class="on-duty-today__item">
+          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.avg_response | formatHourMinute}}</div>
+          <div class="on-duty-today__itemBody">平均接单时间</div>
+        </div>
+        <div class="on-duty-today__item">
+          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.avg_handle | formatHourMinute}}</div>
+          <div class="on-duty-today__itemBody">平均解决时间</div>
+        </div>
+      </div> -->
+      <div class="on-duty-today__header">
+        <div class="repair">
+          <div class="lineTopLeft"></div>
+          <div class="lineTopRight"></div>
+          <div class="lineBottomLeft"></div>
+          <div class="lineBottomRight"></div>
+
+          <div class="repair__name yellow">维修</div>
+          <div class="repair__content">
+            <div class="repair__total">
+              <div class="repair__totalName">总单数</div>
+              <div class="repair__totalNum">{{ itsmData.totalCount | quantitativeConversion }}</div>
+            </div>
+            <div class="repair__total">
+              <div class="repair__totalName">总费用（元）</div>
+              <div class="repair__totalNum">{{ itsmData.totalPrice | quantitativeConversion }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="total">
+          <div class="total__list">
+            <div class="total__icon">
+              <i class="icon_transport transport-feiyongbaohan"></i>
+            </div>
+            <div class="total__content">
+              <div class="total__contentName">总费用(元)<span class="total__contentDate">上月</span></div>
+              <div class="total__contentNum">{{ totalData.totalPrice | quantitativeConversion }}</div>
+            </div>
+          </div>
+          <div class="total__list">
+            <div class="total__icon">
+              <i class="icon_transport transport-gongdanxinxi"></i>
+            </div>
+            <div class="total__content">
+              <div class="total__contentName">总工单<span class="total__contentDate">上月</span></div>
+              <div class="total__contentNum">{{ totalData.totalCount | quantitativeConversion }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="delivery">
+          <div class="lineTopLeft"></div>
+          <div class="lineTopRight"></div>
+          <div class="lineBottomLeft"></div>
+          <div class="lineBottomRight"></div>
+
+          <div class="delivery__content">
+            <div class="delivery__total">
+              <div class="delivery__totalName">总单数</div>
+              <div class="delivery__totalNum">{{ hsmsData.totalCount | quantitativeConversion }}</div>
+            </div>
+            <div class="delivery__total">
+              <div class="delivery__totalName">总费用（元）</div>
+              <div class="delivery__totalNum">{{ hsmsData.totalPrice | quantitativeConversion }}</div>
+            </div>
+          </div>
+          <div class="delivery__name yellow">配送</div>
+        </div>
+      </div>
+      <div class="on-duty-today__footer">
+        <div class="on-duty-today__footerTag" v-if="businessData.incidentCount">维修：<span class="yellow">{{ businessData.incidentCount | quantitativeConversion }}</span></div>
+        <div class="on-duty-today__footerTag" v-if="businessData.specimenCount">标本：<span class="yellow">{{ businessData.specimenCount | quantitativeConversion }}</span></div>
+        <div class="on-duty-today__footerTag" v-if="businessData.inspectCount">患者陪检：<span class="yellow">{{ businessData.inspectCount | quantitativeConversion }}</span></div>
+        <div class="on-duty-today__footerTag" v-if="businessData.drugsJpCount">静配：<span class="yellow">{{ businessData.drugsJpCount | quantitativeConversion }}</span></div>
+        <div class="on-duty-today__footerTag" v-if="businessData.drugsCount">药品：<span class="yellow">{{ businessData.drugsCount | quantitativeConversion }}</span></div>
+        <div class="on-duty-today__footerTag" v-if="businessData.drugsHerbalCount">中草药：<span class="yellow">{{ businessData.drugsHerbalCount | quantitativeConversion }}</span></div>
+        <div class="on-duty-today__footerTag" v-if="businessData.bloodCount">血制品：<span class="yellow">{{ businessData.bloodCount | quantitativeConversion }}</span></div>
+        <div class="on-duty-today__footerTag" v-if="businessData.surgeryCount">手术：<span class="yellow">{{ businessData.surgeryCount | quantitativeConversion }}</span></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { post, timerCommon } from './../http/http'
+export default {
+  name: 'TotalStatistics',
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
+  data () {
+    return {
+      timer: null,
+      itsmData: {},
+      hsmsData: {},
+      totalData: {},
+      businessData: {}
+    }
+  },
+  methods: {
+    // 获取数据
+    async getData () {
+      const startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const result = await post(
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmHsmsCountPrice'
+        }
+      )
+      this.itsmData = result.data ? result.data.itsmData[0] : {}
+      this.hsmsData = result.data ? result.data.hsmsData[0] : {}
+      this.totalData = result.data ? result.data.totalData : {}
+      this.businessData = result.data ? result.data.businessData[0] : {}
+      this.polling()
+    },
+    // 轮询请求
+    polling () {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        this.getData()
+      }, timerCommon)
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.yellow{
+  color: #FFD653;
+}
+.on-duty-today {
+  overflow: hidden;
+  height: 3.2125rem;
+  padding: .2rem;
+  .on-duty-today__inner {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .on-duty-today__header {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      .repair{
+        width: 2.9rem;
+        color: #fff;
+        height: 100%;
+        background: linear-gradient( 90deg, #032430 0%, #023645 13%, #0B4D61 38%, #105A70 61%, #023645 87%, #06252B 100%);
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 0 .2rem;
+        .repair__name{
+          font-size: .275rem;
+          display: flex;
+          align-items: center;
+          margin-right: .2rem;
+        }
+        .repair__content{
+          .repair__total{
+            margin-top: .3rem;
+            &:first-of-type{
+              margin-top: 0;
+            }
+            .repair__totalName{
+              font-size: .2rem;
+            }
+            .repair__totalNum{
+              font-size: .375rem;
+              color: #00D5EA;
+              font-weight: bold;
+              margin-top: .1rem;
+            }
+          }
+        }
+      }
+      .total{
+        flex: 1;
+        padding: 0 .2rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .total__list{
+          display: flex;
+          align-items: center;
+          .total__icon{
+            width: .7rem;
+            height: .7rem;
+            border: 1px solid #00D5EA;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: .2rem;
+            .transport-feiyongbaohan{
+              color: #00D5EA;
+              font-size: .55rem;
+            }
+            .transport-gongdanxinxi{
+              color: #00D5EA;
+              font-size: .4rem;
+              margin-left: -0.02rem;
+              margin-top: 0.04rem;
+            }
+          }
+          .total__content{
+            .total__contentName{
+              font-size: .275rem;
+              .total__contentDate{
+                font-size: .175rem;
+                color: rgba(255,255,255,0.6);
+                margin-left: .0625rem;
+              }
+            }
+            .total__contentNum{
+              font-size: .4375rem;
+              font-weight: bold;
+              color: #00D5EA;
+            }
+          }
+        }
+      }
+      .delivery{
+        width: 2.9rem;
+        color: #fff;
+        height: 100%;
+        background: linear-gradient( 90deg, #032430 0%, #023645 13%, #0B4D61 38%, #105A70 61%, #023645 87%, #06252B 100%);
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 0 .2rem;
+
+        .delivery__name{
+          font-size: .275rem;
+          display: flex;
+          align-items: center;
+          margin-left: .2rem;
+        }
+        .delivery__content{
+          .delivery__total{
+            margin-top: .3rem;
+            &:first-of-type{
+              margin-top: 0;
+            }
+            .delivery__totalName{
+              font-size: .2rem;
+            }
+            .delivery__totalNum{
+              font-size: .375rem;
+              color: #00D5EA;
+              font-weight: bold;
+              margin-top: .1rem;
+            }
+          }
+        }
+      }
+    }
+    .on-duty-today__footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: .2rem;
+      margin-top: .2rem;
+      .on-duty-today__footerTag{
+        margin-right: .17rem;
+        &:last-of-type{
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/TodayWorkOrder.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="today-work-order" ref="TodayWorkOrder"></div>
+  <div class="today-work-order" ref="TrendChart"></div>
 </template>
 
 <script>
 import echarts from 'echarts'
 import { post, timerCommon } from './../http/http'
 export default {
-  name: 'TodayWorkOrder',
+  name: 'TrendChart',
   inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
-      sign: 'price',
+      sign: 'repair',
       timer: null,
       myChart: null,
       todayGroupWorkOrderNum1: [], // 当日工单趋势图,图表数据
@@ -20,7 +20,7 @@ export default {
   methods: {
     // 画图
     draw () {
-      this.myChart = echarts.init(this.$refs.TodayWorkOrder)
+      this.myChart = echarts.init(this.$refs.TrendChart)
 
       const option = {
         color: ['rgba(64, 93, 249, 1)'],
@@ -116,21 +116,24 @@ export default {
           dutyId: this.dutyId,
           startDate: startTime,
           endDate: endTime,
-          type: 'itsmReqCount'
+          type: 'itsmHsmsTrend'
         }
       )
       this.todayGroupWorkOrderNum1 = []
       this.todayGroupWorkOrderTimes = []
       result.data = result.data || []
-      result.data.forEach(item => {
-        this.todayGroupWorkOrderTimes.push(item.date || '') // 获取到的数据,时间点
 
-        if (this.sign === 'price') {
-          this.todayGroupWorkOrderNum1.push(item.price || 0) // 获取到的数据
-        } else if (this.sign === 'order') {
+      if (this.sign === 'repair') {
+        result.data.itsmTrend.forEach(item => {
+          this.todayGroupWorkOrderTimes.push(item.date || '') // 获取到的数据,时间点
           this.todayGroupWorkOrderNum1.push(item.total || 0) // 获取到的数据
-        }
-      })
+        })
+      } else if (this.sign === 'delivery') {
+        result.data.hsmsTrend.forEach(item => {
+          this.todayGroupWorkOrderTimes.push(item.date || '') // 获取到的数据,时间点
+          this.todayGroupWorkOrderNum1.push(item.total || 0) // 获取到的数据
+        })
+      }
       this.draw()
       this.polling()
     },
@@ -138,10 +141,10 @@ export default {
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
-        if (this.sign === 'price') {
-          this.sign = 'order'
-        } else if (this.sign === 'order') {
-          this.sign = 'price'
+        if (this.sign === 'repair') {
+          this.sign = 'delivery'
+        } else if (this.sign === 'delivery') {
+          this.sign = 'repair'
         }
         this.getData()
       }, timerCommon)

src/components/UserPrice.vue

@@ -1,143 +0,0 @@
-<template>
-  <div class="group-praise">
-    <div class="group-praise__content">
-      <div class="group-praise__circle">
-        <header class="group-praise__title">
-          <svg class="icon svg-icon" aria-hidden="true">
-            <use xlink:href="#transport-top1"></use>
-          </svg>
-        </header>
-        <div class="group-praise__circleContent">
-          {{ dataInfo[1] ? dataInfo[1].name : '' }}
-        </div>
-        <div class="group-praise__circleContent">
-          {{ dataInfo[1] ? (dataInfo[1].price || 0) + '元' : '' }}
-        </div>
-      </div>
-
-      <div class="group-praise__circle">
-        <header class="group-praise__title">
-          <svg class="icon svg-icon" aria-hidden="true">
-            <use xlink:href="#transport-top31"></use>
-          </svg>
-        </header>
-        <div class="group-praise__circleContent">
-          {{ dataInfo[0] ? dataInfo[0].name : '' }}
-        </div>
-        <div class="group-praise__circleContent">
-          {{ dataInfo[0] ? (dataInfo[0].price || 0) + '元' : '' }}
-        </div>
-      </div>
-
-      <div class="group-praise__circle">
-        <header class="group-praise__title">
-          <svg class="icon svg-icon" aria-hidden="true">
-            <use xlink:href="#transport-top5"></use>
-          </svg>
-        </header>
-        <div class="group-praise__circleContent">
-          {{ dataInfo[2] ? dataInfo[2].name : '' }}
-        </div>
-        <div class="group-praise__circleContent">
-          {{ dataInfo[2] ? (dataInfo[2].price || 0) + '元' : '' }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { post, timerCommon } from './../http/http'
-export default {
-  name: 'UserPrice',
-  inject: ['parentDutyId', 'hosId', 'dutyId'],
-  data () {
-    return {
-      sign: 'lastWeek',
-      timer: null,
-      dataInfo: []
-    }
-  },
-  methods: {
-    // 获取数据
-    async getData () {
-      this.$emit('signEmit', this.sign)
-      let startTime
-      let endTime
-
-      if (this.sign === 'lastWeek') {
-        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
-      } else if (this.sign === 'lastMonth') {
-        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
-        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
-      }
-      const result = await post(
-        '/itsm/report/index',
-        {
-          parentDutyId: this.parentDutyId,
-          hosId: this.hosId,
-          dutyId: this.dutyId,
-          startDate: startTime,
-          endDate: endTime,
-          type: 'itsmUserPrice'
-        }
-      )
-      const dataInfo = result.data || []
-      dataInfo.sort((a, b) => b.price - a.price)
-      this.dataInfo = dataInfo
-      this.polling()
-    },
-    // 轮询请求
-    polling () {
-      clearTimeout(this.timer)
-      this.timer = setTimeout(() => {
-        if (this.sign === 'lastWeek') {
-          this.sign = 'lastMonth'
-        } else if (this.sign === 'lastMonth') {
-          this.sign = 'lastWeek'
-        }
-        this.getData()
-      }, timerCommon)
-    }
-  },
-  mounted () {
-    this.getData()
-  },
-  beforeDestroy () {
-    clearTimeout(this.timer)
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.group-praise {
-  height: 2.6625rem;
-  .group-praise__content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 .2rem;
-    height: 100%;
-    .group-praise__title {
-      color: #fff;
-      font-size: .2rem;
-      text-align: center;
-      .svg-icon{
-        width: .8rem;
-        height: .8rem;
-      }
-    }
-    .group-praise__circleContent {
-      color: #fff;
-      font-size: .3rem;
-      margin-top: .1rem;
-      text-align: center;
-      height: .375rem;
-    }
-    .group-praise__circle {
-      width: 1.425rem;
-    }
-  }
-}
-</style>

src/main.js

@@ -16,16 +16,13 @@ import './assets/less/style.less'
 Vue.use(fullScreenContainer)
 Vue.prototype.$moment = moment
 
-// 分钟转为时分
-Vue.filter('formatHourMinute', (value) => {
-  if (!value) return '0分'
-  const duration = moment.duration(value, 'minutes')
-  const hours = Math.floor(duration.asHours())
-  const minutes = duration.minutes()
-  if (hours) {
-    return `${hours}时${minutes}分`
+// 超过10万，转换成单位万，保留两位小数（）
+Vue.filter('quantitativeConversion', (value) => {
+  if (!value) return 0
+  if (value >= 100000) {
+    return Math.floor(value / 10000 * 100) / 100 + '万'
   } else {
-    return `${minutes}分`
+    return value
   }
 })
 

src/views/AppIndex.vue

@@ -7,102 +7,78 @@
         <!-- 主体 -->
         <main class="app-index__main">
           <aside class="app-index__left">
-            <!-- 工单实时动态 -->
+            <!-- 故障工单实时动态 -->
             <div class="app-item">
-              <h2 class="app-item__header app-item__header--big">工单实时动态</h2>
-              <GroupPraise class="app-item__body"></GroupPraise>
+              <h2 class="app-item__header app-item__header--big">故障工单实时动态</h2>
+              <RealTimeRepairOrder class="app-item__body"></RealTimeRepairOrder>
             </div>
-            <!-- 科室维修量TOP5 -->
+            <!-- 上月维修科室排名TOP5 -->
             <div class="app-item">
               <h2 class="app-item__header app-item__header--big">
-                科室维修量TOP5
-                <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem" :class="{ active: pointsRankingSign == 'lastWeek' }">上周</li>
-                  <li class="app-item__headerDataItem" :class="{ active: pointsRankingSign == 'lastMonth' }">上月</li>
-                </ul>
+                上月维修科室排名TOP5
               </h2>
-              <PointsRanking class="app-item__body" @signEmit="pointsRankingSign = $event"></PointsRanking>
+              <MaintenanceDepartmentTotal class="app-item__body"></MaintenanceDepartmentTotal>
             </div>
-            <!-- 科室费用TOP5 -->
+            <!-- 上月维修人员积分TOP5 -->
             <div class="app-item">
               <h2 class="app-item__header app-item__header--big">
-                科室费用TOP5
-                <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem" :class="{ active: deptPriceSign == 'lastWeek' }">上周</li>
-                  <li class="app-item__headerDataItem" :class="{ active: deptPriceSign == 'lastMonth' }">上月</li>
-                </ul>
+                上月维修人员积分TOP5
               </h2>
-              <DeptPrice class="app-item__body" @signEmit="deptPriceSign = $event"></DeptPrice>
+              <PersonnelIntegral class="app-item__body"></PersonnelIntegral>
             </div>
           </aside>
           <article class="app-index__center">
-            <!-- 上周/上月汇总数据 -->
+            <!-- 汇总数据 -->
             <div class="app-item">
-              <h2 class="app-item__header app-item__header--big">
-                {{ onDutyTodaySign == 'lastWeek' ? '上周' : '上月' }}汇总数据
-                <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem" :class="{ active: onDutyTodaySign == 'lastWeek' }">上周</li>
-                  <li class="app-item__headerDataItem" :class="{ active: onDutyTodaySign == 'lastMonth' }">上月</li>
-                </ul>
-              </h2>
-              <OnDutyToday class="app-item__body" @signEmit="onDutyTodaySign = $event"></OnDutyToday>
+              <TotalStatistics class="app-item__body"></TotalStatistics>
             </div>
-            <!-- 报修数量趋势图 -->
+            <!-- 上月趋势图 -->
             <div class="app-item">
               <h2 class="app-item__header app-item__header--big">
-                报修数量趋势图
+                上月趋势图
                 <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem" :class="{ active: todayWorkOrderSign == 'price' }">费用</li>
-                  <li class="app-item__headerDataItem" :class="{ active: todayWorkOrderSign == 'order' }">工单</li>
+                  <li class="app-item__headerDataItem" :class="{ active: todayWorkOrderSign == 'repair' }">维修</li>
+                  <li class="app-item__headerDataItem" :class="{ active: todayWorkOrderSign == 'delivery' }">配送</li>
                 </ul>
               </h2>
-              <TodayWorkOrder class="app-item__body" @signEmit="todayWorkOrderSign = $event"></TodayWorkOrder>
+              <TrendChart class="app-item__body" @signEmit="todayWorkOrderSign = $event"></TrendChart>
             </div>
-            <!-- 楼栋故障分布 -->
-            <div class="app-item">
-              <h2 class="app-item__header app-item__header--big">
-                楼栋故障分布
-                <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem" :class="{ active: timeUtilizationSign == 'lastWeek' }">上周</li>
-                  <li class="app-item__headerDataItem" :class="{ active: timeUtilizationSign == 'lastMonth' }">上月</li>
-                </ul>
-              </h2>
-              <TimeUtilization class="app-item__body" @signEmit="timeUtilizationSign = $event"></TimeUtilization>
+            <div class="app-item-wrap">
+              <!-- 上月故障现象占比 -->
+              <div class="app-item">
+                <h2 class="app-item__header app-item__header--big">
+                  上月故障现象占比
+                </h2>
+                <CategoryTotal class="app-item__body"></CategoryTotal>
+              </div>
+              <!-- 上月业务分类工单占比 -->
+              <div class="app-item">
+                <h2 class="app-item__header app-item__header--big">
+                  上月业务分类工单占比
+                </h2>
+                <BusinessTotal class="app-item__body"></BusinessTotal>
+              </div>
             </div>
           </article>
           <aside class="app-index__right">
-            <!-- 维修人员费用Top3 -->
+            <!-- 故障工单实时动态 -->
             <div class="app-item">
-              <h2 class="app-item__header app-item__header--big">
-                维修人员费用TOP3
-                <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem" :class="{ active: userPriceSign == 'lastWeek' }">上周</li>
-                  <li class="app-item__headerDataItem" :class="{ active: userPriceSign == 'lastMonth' }">上月</li>
-                </ul>
-              </h2>
-              <UserPrice class="app-item__body" @signEmit="userPriceSign = $event"></UserPrice>
+              <h2 class="app-item__header app-item__header--big">配送陪检工单实时动态</h2>
+              <RealTimeDeliveryOrder class="app-item__body"></RealTimeDeliveryOrder>
             </div>
-            <!-- 故障现象占比 -->
+            <!-- 上月配送陪检科室排名TOP5 -->
             <div class="app-item">
               <h2 class="app-item__header app-item__header--big">
-                故障现象占比
-                <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem" :class="{ active: categoryProportionSign == 'lastWeek' }">上周</li>
-                  <li class="app-item__headerDataItem" :class="{ active: categoryProportionSign == 'lastMonth' }">上月</li>
-                </ul>
+                上月配送陪检科室排名TOP5
               </h2>
-              <CategoryProportion class="app-item__body" @signEmit="categoryProportionSign = $event"></CategoryProportion>
+              <DeliveryTotal class="app-item__body"></DeliveryTotal>
             </div>
-            <!-- 费用占比 -->
+            <!-- 上月配送陪检人员积分 -->
             <div class="app-item">
               <h2 class="app-item__header app-item__header--big">
-                费用占比
-                <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem" :class="{ active: priceProportionSign == 'lastWeek' }">上周</li>
-                  <li class="app-item__headerDataItem" :class="{ active: priceProportionSign == 'lastMonth' }">上月</li>
-                </ul>
+                上月配送陪检人员积分
               </h2>
-              <PriceProportion class="app-item__body" @signEmit="priceProportionSign = $event"></PriceProportion>
+              <DeliveryUserTotal class="app-item__body"></DeliveryUserTotal>
             </div>
           </aside>
         </main>
@@ -113,40 +89,34 @@
 
 <script>
 import AppHeader from '../components/AppHeader.vue'
-import GroupPraise from '../components/GroupPraise.vue'
-import OnDutyToday from '../components/OnDutyToday.vue'
-import TodayWorkOrder from '../components/TodayWorkOrder.vue'
-import PointsRanking from '../components/PointsRanking.vue'
-import DeptPrice from '../components/DeptPrice.vue'
-import TimeUtilization from '../components/TimeUtilization.vue'
-import UserPrice from '../components/UserPrice.vue'
-import CategoryProportion from '../components/CategoryProportion.vue'
-import PriceProportion from '../components/PriceProportion.vue'
+import RealTimeRepairOrder from '../components/RealTimeRepairOrder.vue'
+import RealTimeDeliveryOrder from '../components/RealTimeDeliveryOrder.vue'
+import TotalStatistics from '../components/TotalStatistics.vue'
+import TrendChart from '../components/TrendChart.vue'
+import MaintenanceDepartmentTotal from '../components/MaintenanceDepartmentTotal.vue'
+import DeliveryTotal from '../components/DeliveryTotal.vue'
+import DeliveryUserTotal from '../components/DeliveryUserTotal.vue'
+import PersonnelIntegral from '../components/PersonnelIntegral.vue'
+import CategoryTotal from '../components/CategoryTotal.vue'
+import BusinessTotal from '../components/BusinessTotal.vue'
 export default {
   name: 'AppIndex',
   components: {
     AppHeader, // 头部
-    GroupPraise, // 工单实时动态
-    OnDutyToday, // 上周汇总数据
-    TodayWorkOrder, // 报修数量趋势图
-    PointsRanking, // 科室维修量TOP5
-    DeptPrice, // 科室费用TOP5
-    TimeUtilization, // 楼栋故障分布
-    UserPrice, // 维修人员费用TOP5
-    CategoryProportion, // 故障现象占比
-    PriceProportion // 费用占比
+    RealTimeRepairOrder, // 故障工单实时动态
+    RealTimeDeliveryOrder, // 配送陪检工单实时动态
+    TotalStatistics, // 汇总数据
+    TrendChart, // 上月趋势图
+    MaintenanceDepartmentTotal, // 上月维修科室排名TOP5
+    DeliveryTotal, // 上月配送陪检科室排名TOP5
+    DeliveryUserTotal, // 运送人员排名TOP5
+    PersonnelIntegral, // 上月维修人员积分TOP5
+    CategoryTotal, // 上月故障现象占比
+    BusinessTotal // 上月业务分类工单占比
   },
   data () {
     return {
-      pointsRankingSign: 'lastWeek',
-      deptPriceSign: 'lastWeek',
-      onDutyTodaySign: 'lastWeek',
-      todayWorkOrderSign: 'price',
-      timeUtilizationSign: 'lastWeek',
-      userPriceSign: 'lastWeek',
-      categoryProportionSign: 'lastWeek',
-      priceProportionSign: 'lastWeek'
-
+      todayWorkOrderSign: 'repair'
     }
   },
   methods: {
@@ -193,6 +163,20 @@ export default {
   .bg {
     padding: 0.2rem;
   }
+  .app-item-wrap{
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    margin-top: .1rem;
+    .app-item{
+      margin-right: 0.1rem;
+      margin-top: 0;
+      flex: 1;
+      &:last-of-type{
+        margin-right: 0;
+      }
+    }
+  }
   // 各模块公共头部
   .app-item {
     position: relative;