完善工单统计。

src/views/dashboard/admin/components/LineChart.vue

@@ -25,11 +25,11 @@ export default {
     autoResize: {
       type: Boolean,
       default: true
+    },
+    statisticsData: {
+      type: Object,
+      required: true
     }
-    // chartData: {
-    //   type: Object,
-    //   required: true
-    // }
   },
   data() {
     return {
@@ -37,7 +37,7 @@ export default {
     }
   },
   watch: {
-    chartData: {
+    statisticsData: {
       deep: true,
       handler(val) {
         this.setOptions(val)
@@ -59,12 +59,12 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
+      this.setOptions(this.statisticsData)
     },
     setOptions({ expectedData, actualData } = {}) {
       this.chart.setOption({
         title: {
-          text: '本周工单统计',
+          text: '最近7天工单统计',
           textStyle: {
             fontSize: 15
           }
@@ -73,11 +73,11 @@ export default {
           trigger: 'axis'
         },
         legend: {
-          data: ['运维', '产品研发', '测试', 'UI设计', '前端']
+          data: ['工单总数', '待办工单', '已完成工单']
         },
         grid: {
-          left: '10',
-          right: '10',
+          left: '25',
+          right: '45',
           bottom: '20',
           top: '50',
           containLabel: true
@@ -85,41 +85,26 @@ export default {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+          data: this.statisticsData.datetime
         },
         yAxis: {
           type: 'value'
         },
         series: [
           {
-            name: '运维',
-            type: 'line',
-            stack: '总量',
-            data: [120, 132, 101, 134, 90, 4, 7]
-          },
-          {
-            name: '产品研发',
-            type: 'line',
-            stack: '总量',
-            data: [220, 182, 191, 234, 290, 8, 3]
-          },
-          {
-            name: '测试',
+            name: '工单总数',
             type: 'line',
-            stack: '总量',
-            data: [150, 232, 201, 154, 190, 4, 2]
+            data: this.statisticsData.total
           },
           {
-            name: 'UI设计',
+            name: '待办工单',
             type: 'line',
-            stack: '总量',
-            data: [320, 332, 301, 334, 390, 1, 7]
+            data: this.statisticsData.processing
           },
           {
-            name: '前端',
+            name: '已完成工单',
             type: 'line',
-            stack: '总量',
-            data: [150, 376, 256, 289, 179, 5, 12]
+            data: this.statisticsData.over
           }
         ]
       })

src/views/dashboard/admin/components/TicketSubmissionRanking.vue

@@ -21,6 +21,10 @@ export default {
     height: {
       type: String,
       default: '300px'
+    },
+    submitRankingData: {
+      type: Object,
+      required: true
     }
   },
   data() {
@@ -43,7 +47,6 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons')
-
       this.chart.setOption({
         title: {
           text: '工单提交排名',
@@ -58,10 +61,10 @@ export default {
           }
         },
         grid: {
-          top: 35,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
+          top: 45,
+          left: '3%',
+          right: '5%',
+          bottom: '20',
           containLabel: true
         },
         xAxis: {
@@ -70,13 +73,13 @@ export default {
         },
         yAxis: {
           type: 'category',
-          data: ['马七', '赵六', '王五', '李四', '张三', '兰玉磊']
+          data: this.submitRankingData.nickname
         },
         series: [
           {
             type: 'bar',
             barWidth: 20,
-            data: [367, 435, 693, 764, 890, 999]
+            data: this.submitRankingData.rankingCount
           }
         ]
       })

src/views/dashboard/admin/components/processOrderList.vue

+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    processOrderList: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart.setOption({
+        title: {
+          text: '最受欢迎的流程',
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          top: 45,
+          left: 10,
+          right: '5%',
+          bottom: 20,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.processOrderList.title
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          data: this.processOrderList.submit_count,
+          type: 'line',
+          areaStyle: {}
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/admin/index.vue

 <template>
   <div class="dashboard-editor-container">
-    <panel-group :panel-group-value="panelGroupValue" />
+    <panel-group :panel-group-value="dashboardValue.panelGroup" />
 
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart />
+      <line-chart :statistics-data="dashboardValue.statisticsData" />
     </el-row>
 
     <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
-          <TicketSubmissionRanking />
+          <TicketSubmissionRanking :submit-ranking-data="dashboardValue.submitRankingData" />
         </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-col :xs="24" :sm="24" :lg="16">
         <div class="chart-wrapper">
-          <TodoWorkOrderRanking />
+          <processOrderList :process-order-list="dashboardValue.processOrderList" />
         </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
+      <!-- <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <ProcessingTicketRanking />
         </div>
-      </el-col>
+      </el-col> -->
     </el-row>
   </div>
 </template>
@@ -30,8 +30,9 @@
 import PanelGroup from './components/PanelGroup'
 import LineChart from './components/LineChart'
 import TicketSubmissionRanking from './components/TicketSubmissionRanking'
-import TodoWorkOrderRanking from './components/TodoWorkOrderRanking'
-import ProcessingTicketRanking from './components/ProcessingTicketRanking'
+import processOrderList from './components/processOrderList'
+// import TodoWorkOrderRanking from './components/TodoWorkOrderRanking'
+// import ProcessingTicketRanking from './components/ProcessingTicketRanking'
 
 export default {
   name: 'DashboardAdmin',
@@ -39,11 +40,12 @@ export default {
     PanelGroup,
     LineChart,
     TicketSubmissionRanking,
-    TodoWorkOrderRanking,
-    ProcessingTicketRanking
+    processOrderList
+    // TodoWorkOrderRanking,
+    // ProcessingTicketRanking
   },
   // eslint-disable-next-line vue/require-prop-types
-  props: ['panelGroupValue'],
+  props: ['dashboardValue'],
   data() {
     return {
 

src/views/dashboard/index.vue

 <template>
   <div class="dashboard-container">
-    <adminDashboard v-if="dashboardStatus" :panel-group-value="panelGroupValue" />
+    <adminDashboard v-if="dashboardStatus" :dashboard-value="dashboardValue" />
   </div>
 </template>
 
@@ -18,7 +18,7 @@ export default {
   },
   created() {
     initData().then(response => {
-      this.panelGroupValue = response.data
+      this.dashboardValue = response.data
       this.dashboardStatus = true
     })
   }