今日工单情况修改为当日工单趋势图

src/components/OnDutyToday.vue

@@ -2,7 +2,7 @@
   <div class="on-duty-today">
     <div class="on-duty-today__inner" :class="{marquee_top:animate}" :style="{transform:'translateY('+(2.7125*n)+'rem)'}">
       <div class="on-duty-today__list" v-for="(item1,i) in workList" :key="i">
-        <div class="on-duty-today__item" v-for="item2 in item1" :key="item2[2]">
+        <div class="on-duty-today__item" v-for="(item2,j) in item1" :key="j">
           <OnDutyTodayPie :workListItem="item2"></OnDutyTodayPie>
         </div>
       </div>

src/components/TodayWorkOrder.vue

@@ -12,9 +12,11 @@ export default {
     return {
       timer: null,
       myChart: null,
-      todayWorkOrder: [], // 今日工单情况
-      todayGroupWorkOrderNum: [], // 今日工单情况,图表数据,数量
-      todayGroupWorkOrderName: []// 今日工单情况,图表数据,名称
+      todayWorkOrder: [], // 当日工单趋势图
+      todayGroupWorkOrderNum1: [], // 当日工单趋势图,图表数据,工单趋势
+      todayGroupWorkOrderNum2: [], // 当日工单趋势图,图表数据,执行中趋势
+      todayGroupWorkOrderNum3: [], // 当日工单趋势图,图表数据,超时工单趋势
+      todayGroupWorkOrderTimes: [] // 当日工单趋势图,图表数据,时间点
     }
   },
   methods: {
@@ -23,116 +25,111 @@ export default {
       this.myChart = echarts.init(this.$refs.TodayWorkOrder)
 
       const option = {
-        title: {
-          text: '已完成工单数（单）',
-          top: 10,
-          left: 15,
+        color: ['#49b856', '#c27073', '#c2ab70'],
+        legend: {
+          data: ['工单趋势', '执行中趋势', '超时工单趋势'],
           textStyle: {
-            color: '#d4d6d7',
-            fontSize: 12
+            color: '#d4d6d7', // 更改坐标轴文字颜色
+            fontSize: 12 // 更改坐标轴文字大小
           }
         },
-        grid: {
-          left: '5%',
-          top: '25%',
-          bottom: '20%',
-          right: '5%'
-        },
-        xAxis: {
-          data: this.todayGroupWorkOrderName,
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#709cc2'
-            }
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#d4d6d7',
-              fontSize: 12
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
             }
           }
         },
-        yAxis: [
+        grid: {
+          left: '2%',
+          top: '13%',
+          bottom: '10%',
+          right: '2%',
+          containLabel: true
+        },
+        xAxis: [
           {
-            max: function (value) {
-              return value.max
-            },
-            splitNumber: 5,
-            minInterval: 1,
-            axisTick: {
-              show: false
+            type: 'category',
+            boundaryGap: false,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#d4d6d7', // 更改坐标轴文字颜色
+                fontSize: 12 // 更改坐标轴文字大小
+              }
             },
             axisLine: {
               lineStyle: {
-                color: '#709cc2'
+                color: '#709cc2' // 更改坐标轴颜色
               }
             },
+            data: this.todayGroupWorkOrderTimes
+          }
+        ],
+        yAxis: [
+          {
+            max: function (value) {
+              return value.max
+            },
             axisLabel: {
+              show: true,
               textStyle: {
-                color: '#d4d6d7',
-                fontSize: 12
+                color: '#d4d6d7', // 更改坐标轴文字颜色
+                fontSize: 12 // 更改坐标轴文字大小
               }
             },
-            splitArea: {
-              areaStyle: {
-                color: 'rgba(255,255,255,.5)'
+            axisLine: {
+              lineStyle: {
+                color: '#709cc2' // 更改坐标轴颜色
               }
             },
             splitLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgba(255, 255, 255, 0.1)',
-                type: 'dashed'
-              }
+              show: false
             }
           }
         ],
         series: [
           {
-            name: 'hill',
-            type: 'pictorialBar',
-            barCategoryGap: '0%',
-            barWidth: 122,
-            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
+            name: '工单趋势',
+            smooth: true,
+            type: 'line',
+            // label: {
+            //   show: true,
+            //   position: 'top'
+            // },
+            areaStyle: {
+              color: '#49b856'
             },
-            itemStyle: {
-              normal: {
-                color: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: 'rgba(112,194,130, .1)' //  0%  处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: 'rgba(112,194,130, .8)' //  100%  处的颜色
-                    }
-                  ],
-                  global: false //  缺省为  false
-                }
-              },
-              emphasis: {
-                opacity: 1
-              }
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.todayGroupWorkOrderNum1
+          },
+          {
+            name: '执行中趋势',
+            smooth: true,
+            type: 'line',
+            areaStyle: {
+              color: '#c27073'
+            },
+            emphasis: {
+              focus: 'series'
             },
-            data: this.todayGroupWorkOrderNum,
-            z: 10
+            data: this.todayGroupWorkOrderNum2
+          },
+          {
+            name: '超时工单趋势',
+            smooth: true,
+            type: 'line',
+            areaStyle: {
+              color: '#c2ab70'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.todayGroupWorkOrderNum3
           }
         ]
       }
@@ -140,24 +137,28 @@ export default {
     },
     // 获取数据
     async getData () {
+      const srartTime = this.$moment().format('YYYY-MM-DD') // 今天
+      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
       const result = await post(
-        `/largeScreen/getData/todayWorkOrder/${this.hospitalId}`
+        `/largeScreen/getData/getTendencyList/${this.hospitalId}`,
+        { srartTime, endTime }
       )
       this.todayWorkOrder = []
-      this.todayGroupWorkOrderNum = []
-      this.todayGroupWorkOrderName = []
+      this.todayGroupWorkOrderNum1 = []
+      this.todayGroupWorkOrderNum2 = []
+      this.todayGroupWorkOrderNum3 = []
+      this.todayGroupWorkOrderTimes = []
       this.todayWorkOrder = result.todayWorkOrder[0]
       this.$emit('todayWorkOrderHandle', JSON.stringify(this.todayWorkOrder))
-      // if (result.todayGroupWorkOrder.length > 0) {
-      if (result.todayGroupWorkOrder.length > 5) {
-        result.todayGroupWorkOrder = result.todayGroupWorkOrder.slice(0, 5)
-      }
-      result.todayGroupWorkOrder.forEach(item => {
-        this.todayGroupWorkOrderNum.push(item[2]) // 获取到的数据
-        this.todayGroupWorkOrderName.push(item[1]) // 获取到的名称
+      result.list.forEach(item => {
+        this.todayGroupWorkOrderTimes.push(
+          this.$moment(item[0]).format('HH') + ':00'
+        ) // 获取到的数据,时间点
+        this.todayGroupWorkOrderNum1.push(item[1]) // 获取到的数据,工单趋势
+        this.todayGroupWorkOrderNum2.push(item[2]) // 获取到的数据,执行中趋势
+        this.todayGroupWorkOrderNum3.push(item[3]) // 获取到的数据,超时工单趋势
       })
       this.draw()
-      // }
       this.polling()
     },
     // 轮询请求
@@ -178,7 +179,7 @@ export default {
 </script>
 
 <style lang="less">
-.today-work-order{
+.today-work-order {
   height: 2.3875rem;
   margin: 0 auto;
 }

src/views/AppIndex.vue

@@ -34,10 +34,10 @@
               </h2>
               <OnDutyToday @todayBeOnDutyHandle="todayBeOnDutyHandle"></OnDutyToday>
             </div>
-            <!-- 今日工单情况 -->
+            <!-- 当日工单趋势图 -->
             <div class="app-item">
               <h2 class="app-item__header app-item__header--big">
-                今日工单情况
+                当日工单趋势图
                 <ul class="app-item__headerData">
                   <li class="app-item__headerDataItem">执行中<em>{{todayWorkOrder[0]}}</em></li>
                   <li class="app-item__headerDataItem">已超时<em>{{todayWorkOrder[1]}}</em></li>
@@ -110,7 +110,7 @@ export default {
     GroupPraise, // 近三十天各小组好评率排行榜
     GroupPerformance, // 近三十天各小组完成以及异常工单数
     OnDutyToday, // 今日当班情况
-    TodayWorkOrder, // 今日工单情况
+    TodayWorkOrder, // 当日工单趋势图
     PointsRanking, // 今日积分前三人员
     BusinessTypeRatio, // 近三十天各业务类型占比
     ErrorWorkOrder, // 今日工单异常情况
@@ -121,7 +121,7 @@ export default {
   data () {
     return {
       todayBeOnDuty: [], // 今日当班情况
-      todayWorkOrder: [], // 今日工单情况
+      todayWorkOrder: [], // 当日工单趋势图
       todayAbnormityWorkOrder: [], // 今日工单异常情况
       dictionary: [], // 近三十天各类型工单按时送达率趋势
       currentDictionary: -1// 近三十天各类型工单按时送达率趋势(id)
@@ -132,7 +132,7 @@ export default {
     todayBeOnDutyHandle (value) {
       this.todayBeOnDuty = JSON.parse(value)
     },
-    // 今日工单情况
+    // 当日工单趋势图
     todayWorkOrderHandle (value) {
       this.todayWorkOrder = JSON.parse(value)
     },

vue.config.js

@@ -10,7 +10,7 @@ module.exports = {
     hotOnly: false, // 是否开启热更新
     proxy: {
       '/service': {
-        target: 'http://192.168.3.87', // API服务器的地址
+        target: 'http://192.168.3.108', // API服务器的地址
         ws: true, // 代理websockets
         changeOrigin: true, // 虚拟的站点需要更管origin
         pathRewrite: {