大屏修改

src/components/AppHeader.vue

@@ -14,7 +14,7 @@
     <!-- /头部线条及标题 -->
     <div class="app-header__content">
       <!-- 累计工单数，标本送检，患者陪检 -->
-      <div class="app-header__contentCumulative">
+      <div class="app-header__contentToday">
         <!-- 今日工单数，标本送检，陪检人次 -->
         <AppToday></AppToday>
         <!-- /今日工单数，标本送检，陪检人次 -->
@@ -204,6 +204,9 @@ export default {
     align-items: center;
     width: 100%;
     height: 0.475rem;
+    .app-header__contentToday{
+      width: 8rem;
+    }
     .app-header__contentNews {
       display: flex;
       justify-content: space-between;

src/components/BusinessTypeRatio.vue

@@ -12,173 +12,240 @@ export default {
     return {
       timer: null,
       myChart: null,
+      associationTypeProportion: [],
       associationTypeProportionNum: [],
-      associationTypeProportionName: []
+      associationTypeProportionName: [],
+      associationTypeProportionAll: []
     }
   },
   methods: {
     // 画图
     draw () {
+      const that = this
       this.myChart = echarts.init(this.$refs.BusinessTypeRatio)
-      var colorArray = [
-        {
-          top: '#c2ab70', // 第一
-          bottom: 'rgba(194, 171, 112, 0.5)',
-          borderColor: '#c2ab70'
-        },
-        {
-          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)'
-        }
-      ]
       const option = {
         tooltip: {
-          show: false,
-          formatter: '{b}:{c}'
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
         grid: {
-          left: '5%',
+          show: false,
           top: '5%',
+          left: '5%',
           right: '5%',
-          bottom: '0%',
-          containLabel: true
+          bottom: '0%'
         },
-        xAxis: {
-          type: 'value',
-          show: false,
-          position: 'top',
-          max: function (value) {
-            return value.max * 1.5
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
+        // legend: {
+        //   left: '20%',
+        //   orient: 'horizontal',
+        //   itemWidth: 8,
+        //   itemHeight: 8,
+        //   icon: 'rect',
+        //   bottom: '0%',
+        //   data: this.associationTypeProportionName,
+        //   textStyle: {
+        //     color: '#fff'
+        //   },
+        //   formatter (name) {
+        //     const arr = that.associationTypeProportionAll.filter(item => item[0] === name)
+        //     return `${name} ${arr[0][1]}单 ${arr[0][2]}%`
+        //   }
+        // },
+        legend: [
+          {
+            right: '55%',
+            orient: 'horizontal',
+            itemWidth: 8,
+            itemHeight: 8,
+            icon: 'rect',
+            bottom: '20%',
+            data: this.associationTypeProportionName.slice(
+              0,
+              Math.ceil(this.associationTypeProportionName.length / 2)
+            ),
+            textStyle: {
               color: '#fff'
+            },
+            formatter (name) {
+              const arr = that.associationTypeProportionAll.filter(
+                (item) => item[0] === name
+              )
+              return `${name} ${arr[0][1]}单 ${arr[0][2]}%`
             }
           },
-          splitLine: {
-            show: false
-          }
-        },
-        yAxis: [
           {
-            type: 'category',
-            axisTick: {
-              show: false,
-              alignWithLabel: false,
-              length: 5
-            },
-            splitLine: {
-              // 网格线
-              show: false
+            left: '55%',
+            orient: 'horizontal',
+            itemWidth: 8,
+            itemHeight: 8,
+            icon: 'rect',
+            bottom: '24%',
+            data: this.associationTypeProportionName.slice(
+              Math.ceil(this.associationTypeProportionName.length / 2),
+              this.associationTypeProportionName.length
+            ),
+            textStyle: {
+              color: '#fff'
             },
-            inverse: 'true', // 排序
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#fff'
+            formatter (name) {
+              const arr = that.associationTypeProportionAll.filter(
+                (item) => item[0] === name
+              )
+              return `${name} ${arr[0][1]}单 ${arr[0][2]}%`
+            }
+          }
+        ],
+        color: [
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#c27073' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(194, 112, 115, 0.5)' // 100% 处的颜色
               }
-            },
-            data: this.associationTypeProportionName
+            ],
+            global: false // 缺省为 false
+          },
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#c2ab70' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(194, 171, 112, 0.5)' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#70c2ab' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(112, 194, 171, 0.5)' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#70c282' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(112, 194, 130, 0.5)' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#9cc270' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(156, 194, 112, 0.5)' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#709cc2' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(112, 156, 194, 0.5)' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#c270b0' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(194, 112, 176, 0.5)' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
           }
         ],
         series: [
           {
-            name: 'xxx',
-            type: 'bar',
+            name: '数据统计',
+            type: 'pie',
+            center: ['50%', '35%'],
+            roseType: 'radius',
             label: {
               normal: {
-                show: true,
-                position: [330, 0],
-                formatter: '{c}单',
-                textStyle: {
-                  color: '#fff'
-                }
+                show: false
+              },
+              emphasis: {
+                show: false
               }
             },
-            itemStyle: {
+            lableLine: {
               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'
+                show: false
+              },
+              emphasis: {
+                show: true
               }
             },
-            barGap: '0%',
-            barCategoryGap: '70%',
-            barWidth: 8,
-            data: this.associationTypeProportionNum
+            data: this.associationTypeProportion
           }
         ]
       }
@@ -186,17 +253,22 @@ export default {
     },
     // 获取数据
     async getData () {
-      const srartTime = this.$moment().format('YYYY-MM-DD') // 今天
+      const srartTime = this.$moment()
+        .subtract(29, 'days')
+        .format('YYYY-MM-DD') // 近三十天
       const endTime = this.$moment().format('YYYY-MM-DD') // 今天
       const result = await post(
-        `/largeScreen/getData/getTasktypeTop5/${this.hospitalId}`,
+        `/largeScreen/getData/associationTypeProportion/${this.hospitalId}`,
         { srartTime, endTime }
       )
       this.associationTypeProportionNum = []
       this.associationTypeProportionName = []
-      result.list.forEach((item) => {
+      this.associationTypeProportion = []
+      this.associationTypeProportionAll = result.associationTypeProportion
+      result.associationTypeProportion.forEach((item) => {
         this.associationTypeProportionNum.push(item[1]) // 获取到的数据
         this.associationTypeProportionName.push(item[0]) // 获取到的名称
+        this.associationTypeProportion.push({ value: item[1], name: item[0] }) // 获取到的名称
       })
       this.draw()
       this.polling()
@@ -220,7 +292,7 @@ export default {
 
 <style lang="less">
 .business-type-ratio {
-  height: 5rem;
+  height: 7rem;
   margin: 0 auto;
 }
 </style>

src/components/TimeUtilization.vue

@@ -23,7 +23,7 @@ export default {
 
       const option = {
         title: {
-          text: '时间利用率（%）',
+          text: '工单数量（单）',
           top: 5,
           left: 15,
           textStyle: {
@@ -56,9 +56,9 @@ export default {
         },
         yAxis: [
           {
-            max: 1,
-            min: 0,
-            interval: 0.25,
+            max: function (value) {
+              return value.max * 1.5
+            },
             axisTick: {
               show: false
             },
@@ -68,9 +68,6 @@ export default {
               }
             },
             axisLabel: {
-              formatter (value) {
-                return value * 100
-              },
               textStyle: {
                 color: '#d4d6d7',
                 fontSize: 12
@@ -140,22 +137,17 @@ export default {
     },
     // 获取数据
     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/groupWorkRatio/${this.hospitalId}`,
+        `/largeScreen/getData/getTasktypeTop5/${this.hospitalId}`,
         { srartTime, endTime }
       )
       this.groupWorkRatioNum = []
       this.groupWorkRatioName = []
-      if (result.groutWorkRatio.length > 5) {
-        result.groutWorkRatio = result.groutWorkRatio.slice(0, 5)
-      }
-      result.groutWorkRatio.forEach(item => {
-        this.groupWorkRatioNum.push(item[1] / 100) // 获取到的数据
-        this.groupWorkRatioName.push(item[2]) // 获取到的名称
+      result.list.forEach(item => {
+        this.groupWorkRatioNum.push(item[1]) // 获取到的数据
+        this.groupWorkRatioName.push(item[0]) // 获取到的名称
       })
       this.draw()
       this.polling()

src/views/AppIndex.vue

@@ -17,9 +17,9 @@
               <h2 class="app-item__header">科室当日建单TOP10</h2>
               <GroupPerformance></GroupPerformance>
             </div>
-            <!-- 近三十天各小组人员工作时间利用率 -->
+            <!-- 当日任务类型TOP5 -->
             <div class="app-item">
-              <h2 class="app-item__header">近三十天各小组人员工作时间利用率</h2>
+              <h2 class="app-item__header">当日任务类型TOP5</h2>
               <TimeUtilization></TimeUtilization>
             </div>
           </aside>
@@ -79,9 +79,9 @@
               <h2 class="app-item__header">近三十天人员按时到达率排行榜</h2>
               <OnTimeArrivalRate></OnTimeArrivalRate>
             </div>
-            <!-- 当日任务类型TOP5 -->
+            <!-- 近三十天各业务类型占比 -->
             <div class="app-item">
-              <h2 class="app-item__header">当日任务类型TOP5</h2>
+              <h2 class="app-item__header">近三十天各业务类型占比</h2>
               <BusinessTypeRatio></BusinessTypeRatio>
             </div>
           </aside>
@@ -112,10 +112,10 @@ export default {
     OnDutyToday, // 今日各人员工作情况
     TodayWorkOrder, // 当日工单趋势图
     PointsRanking, // 近三十天人员积分排行榜
-    BusinessTypeRatio, // 当日任务类型TOP5
+    BusinessTypeRatio, // 近三十天各业务类型占比
     ErrorWorkOrder, // 今日工单异常情况
     DeliveryRate, // 近三十天各类型工单按时送达率趋势
-    TimeUtilization, // 近三十天各小组人员工作时间利用率
+    TimeUtilization, // 当日任务类型TOP5
     OnTimeArrivalRate// 近三十天人员按时到达率排行榜
   },
   data () {