近30天各小组完成以及异常工单数调整为科室当日建单TOP10

src/components/GroupPerformance.vue

@@ -13,9 +13,8 @@ export default {
   data () {
     return {
       timer: null,
-      groutWorkOrderListSuccessNum: [], // 获取到的正常单数
-      groutWorkOrderListErrorNum: [], // 获取到的异常单数
-      groutWorkOrderListName: [] // 获取到的小组名称
+      groutWorkOrderListNum: [], // 获取到的单数
+      groutWorkOrderListName: [] // 获取到的科室名称
     }
   },
   methods: {
@@ -24,346 +23,183 @@ export default {
       const myChart = echarts.init(
         document.getElementById('group-performance')
       )
-      var xData = this.groutWorkOrderListName
-      var lastYearData = this.groutWorkOrderListSuccessNum // 正常
-      var thisYearData = this.groutWorkOrderListErrorNum // 异常
-      var timeLineData = [1]
-      const legend = ['已完成工单数（单）', '异常工单数（单）']
-      var background = 'rgba(255,255,255,0)' // 背景
-      const textColor = '#fff'
-      const lineColor = 'rgba(255,255,255,0.2)'
-      const colors = [
+      var colorArray = [
         {
-          borderColor: 'rgba(112, 194, 130,1)',
-          start: 'rgba(112, 194, 130,0.8)',
-          end: 'rgba(112, 194, 130,0.1)'
+          top: '#c2ab70', // 第一
+          bottom: 'rgba(194, 171, 112, 0.5)',
+          borderColor: '#c2ab70'
         },
         {
-          borderColor: 'rgba(194, 112, 115,1)',
-          start: 'rgba(194, 112, 115,0.1)',
-          end: 'rgba(194, 112, 115,0.8)'
+          top: '#70c282', // 第二
+          bottom: 'rgba(112, 194, 130, 0.5)'
+        },
+        {
+          top: '#709cc2', // 第三
+          bottom: 'rgba(112, 156, 194, 0.5)'
+        },
+        {
+          top: '#709cc2', // 第四
+          bottom: 'rgba(112, 156, 194, 0.5)'
+        },
+        {
+          top: '#709cc2', // 第五
+          bottom: 'rgba(112, 156, 194, 0.5)'
         }
       ]
-      let borderData = []
-      const scale = 2
-      borderData = xData.map((item) => {
-        return scale
-      })
-      var option = {
-        baseOption: {
-          backgroundColor: background,
-          timeline: {
-            show: false,
-            top: 0,
-            data: []
+      const option = {
+        tooltip: {
+          show: false,
+          formatter: '{b}:{c}'
+        },
+        grid: {
+          left: '0%',
+          top: '5%',
+          right: '5%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          show: false,
+          position: 'top',
+          max: function (value) {
+            return value.max * 1.5
           },
-          legend: {
-            top: '3%',
-            right: 'left',
-            itemWidth: 20,
-            itemHeight: 5,
-            icon: 'none',
-            width: '100%',
-            itemGap: 124,
-            textStyle: {
-              color: '#ffffff',
-              fontSize: 14
-            },
-            data: legend
+          axisTick: {
+            show: false
           },
-          grid: [
-            {
-              show: false,
-              left: '5%',
-              top: '10%',
-              bottom: '8%',
-              containLabel: true,
-              width: '37%'
-            },
-            {
-              show: false,
-              left: '51%',
-              top: '10%',
-              bottom: '8%',
-              width: '0%'
-            },
-            {
-              show: false,
-              right: '2%',
-              top: '10%',
-              bottom: '8%',
-              containLabel: true,
-              width: '37%'
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff'
             }
-          ],
-          xAxis: [
-            {
-              type: 'value',
-              inverse: true,
-              axisLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              },
-              position: 'top',
-              axisLabel: {
-                show: false,
-                color: textColor
-              },
-              max: function (value) {
-                return Math.ceil(value.max * 1.5)
-              },
-              splitLine: {
-                show: false,
-                lineStyle: {
-                  color: lineColor
-                }
-              }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false,
+              alignWithLabel: false,
+              length: 5
             },
-            {
-              gridIndex: 1,
+            splitLine: {
+              // 网格线
               show: false
             },
-            {
-              gridIndex: 2,
-              axisLine: {
-                show: false
-              },
-              max: function (value) {
-                return Math.ceil(value.max * 1.5)
-              },
-              axisTick: {
-                show: false
-              },
-              position: 'top',
-              axisLabel: {
-                show: false,
-                color: textColor
-              },
-              splitLine: {
-                show: false,
-                lineStyle: {
-                  color: lineColor
-                }
+            inverse: 'true', // 排序
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
               }
-            }
-          ],
-          yAxis: [
-            {
-              type: 'category',
-              inverse: true,
-              position: 'right',
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: lineColor
-                }
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              data: xData
             },
-            {
-              gridIndex: 1,
-              type: 'category',
-              inverse: true,
-              position: 'left',
-              axisLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: true,
-                color: '#ffffff',
-                fontSize: 14,
-                align: 'center',
-                margin: -3
-              },
-              data: xData.map(function (params) {
-                var newParamsName = ''// 最终拼接成的字符串
-                var paramsNameNumber = params.length // 实际标签的个数
-                var provideNumber = 4 // 每行能显示的字的个数
-                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
-                /**
-                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-                 */
-                // 条件等同于rowNumber>1
-                if (paramsNameNumber > provideNumber) {
-                  /** 循环每一行,p表示行 */
-                  for (var p = 0; p < rowNumber; p++) {
-                    var tempStr = '' // 表示每一次截取的字符串
-                    var start = p * provideNumber // 开始截取的位置
-                    var end = start + provideNumber // 结束截取的位置
-                    // 此处特殊处理最后一行的索引值
-                    if (p === rowNumber - 1) {
-                      // 最后一次不换行
-                      tempStr = params.substring(start, paramsNameNumber)
-                    } else {
-                      // 每一次拼接字符串并换行
-                      tempStr = params.substring(start, end) + '\n'
-                    }
-                    newParamsName += tempStr // 最终拼成的字符串
-                  }
-                } else {
-                  // 将旧标签的值赋给新标签
-                  newParamsName = params
-                }
-                return {
-                  value: newParamsName,
-                  textStyle: {
-                    align: 'center'
-                  }
-                }
-              })
-            },
-            {
-              gridIndex: 2,
-              type: 'category',
-              inverse: true,
-              position: 'left',
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: lineColor
-                }
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              data: xData
-            }
-          ],
-          series: []
-        },
-        options: []
-      }
-
-      option.baseOption.timeline.data.push(timeLineData[0])
-      option.options.push({
+            data: this.groutWorkOrderListName
+          }
+        ],
         series: [
           {
-            name: '已完成工单数（单）',
+            name: 'xxx',
             type: 'bar',
-            barWidth: 10,
-            stack: '1',
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                  {
-                    offset: 0,
-                    color: colors[0].start
-                  },
-                  {
-                    offset: 1,
-                    color: colors[0].end
-                  }
-                ])
-              }
-            },
             label: {
               normal: {
                 show: true,
-                position: 'right',
-                offset: [-170, 2],
+                position: [300, 0],
+                formatter: '{c}',
                 textStyle: {
-                  color: '#fff',
-                  fontSize: 14
+                  color: '#fff'
                 }
               }
             },
-            data: lastYearData,
-            animationEasing: 'elasticOut'
-          },
-          {
-            name: '已完成工单数（单）',
-            type: 'bar',
-            barWidth: 25,
-            stack: '1',
             itemStyle: {
               normal: {
-                color: colors[0].borderColor
-              }
-            },
-            data: borderData
-          },
-          {
-            name: '异常工单数（单）',
-            type: 'bar',
-            stack: '2',
-            barWidth: 10,
-            xAxisIndex: 2,
-            yAxisIndex: 2,
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                  {
-                    offset: 0,
-                    color: colors[1].start
-                  },
-                  {
-                    offset: 1,
-                    color: colors[1].end
+                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'
               }
             },
-            label: {
-              show: true,
-              position: [140, 0],
-              textStyle: {
-                color: '#fff',
-                fontSize: 14
-              }
-            },
-            data: thisYearData,
-            animationEasing: 'elasticOut'
-          },
-          {
-            name: '异常工单数（单）',
-            type: 'bar',
-            barWidth: 25,
-            stack: '2',
-            itemStyle: {
-              normal: {
-                color: colors[1].borderColor
-              }
-            },
-            data: borderData
+            barGap: '0%',
+            barCategoryGap: '70%',
+            barWidth: 8,
+            data: this.groutWorkOrderListNum
           }
         ]
-      })
+      }
       myChart.setOption(option)
     },
     // 获取数据
     async getData () {
-      const srartTime = this.$moment()
-        .subtract(29, 'days')
-        .format('YYYY-MM-DD') // 近三十天
+      const srartTime = this.$moment().format('YYYY-MM-DD') // 今天
       const endTime = this.$moment().format('YYYY-MM-DD') // 今天
       const result = await post(
-        `/largeScreen/getData/groupWorkOrder/${this.hospitalId}`,
+        `/largeScreen/getData/getDeptOrderTop10/${this.hospitalId}`,
         { srartTime, endTime }
       )
-      this.groutWorkOrderListSuccessNum = []
-      this.groutWorkOrderListErrorNum = []
+      this.groutWorkOrderListNum = []
       this.groutWorkOrderListName = []
-      if (result.groutWorkOrderList.length > 5) {
-        result.groutWorkOrderList = result.groutWorkOrderList.slice(0, 5)
-      }
-      result.groutWorkOrderList.forEach((item) => {
-        this.groutWorkOrderListSuccessNum.push(item[1]) // 获取到的正常单数
-        this.groutWorkOrderListErrorNum.push(item[0]) // 获取到的异常单数
-        this.groutWorkOrderListName.push(item[3]) // 获取到的小组名称
+      result.list.forEach((item) => {
+        this.groutWorkOrderListNum.push(item[1]) // 获取到的异常单数
+        this.groutWorkOrderListName.push(item[0]) // 获取到的小组名称
       })
       this.draw()
       this.polling()
@@ -391,7 +227,7 @@ export default {
   height: 100%;
 }
 .group-performanceWrap {
-  width: 5.15rem;
+  // width: 5.15rem;
   height: 5.0625rem;
   margin: 0.2rem auto;
 }

src/views/AppIndex.vue

@@ -12,9 +12,9 @@
               <h2 class="app-item__header">近三十天各小组好评率排行榜</h2>
               <GroupPraise></GroupPraise>
             </div>
-            <!-- 近三十天各小组完成以及异常工单数 -->
+            <!-- 科室当日建单TOP10 -->
             <div class="app-item">
-              <h2 class="app-item__header">近三十天各小组完成以及异常工单数</h2>
+              <h2 class="app-item__header">科室当日建单TOP10</h2>
               <GroupPerformance></GroupPerformance>
             </div>
             <!-- 近三十天各小组人员工作时间利用率 -->
@@ -108,7 +108,7 @@ export default {
   components: {
     AppHeader, // 头部
     GroupPraise, // 近三十天各小组好评率排行榜
-    GroupPerformance, // 近三十天各小组完成以及异常工单数
+    GroupPerformance, // 科室当日建单TOP10
     OnDutyToday, // 今日当班情况
     TodayWorkOrder, // 当日工单趋势图
     PointsRanking, // 今日积分前三人员