完善工单统计。

06869dd3 · Mr. Lan · 19764596 · 06869dd3 · 06869dd3 · 06869dd3
Commit 06869dd3 authored Aug 01, 2020 by Mr. Lan
5 changed files
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ b/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',
+          left: '25',
-          right: '10',
+          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: '运维',
+            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: '测试',
            type: 'line',
-            stack: '总量',
+            data: this.statisticsData.total
-            data: [150, 232, 201, 154, 190, 4, 2]
          },
          {
-            name: 'UI设计',
+            name: '待办工单',
            type: 'line',
-            stack: '总量',
+            data: this.statisticsData.processing
-            data: [320, 332, 301, 334, 390, 1, 7]
          },
          {
-            name: '前端',
+            name: '已完成工单',
            type: 'line',
-            stack: '总量',
+            data: this.statisticsData.over
-            data: [150, 376, 256, 289, 179, 5, 12]
          }
        ]
      })

--- a/src/views/dashboard/admin/components/TicketSubmissionRanking.vue
+++ b/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,
+          top: 45,
-          left: '2%',
+          left: '3%',
-          right: '2%',
+          right: '5%',
-          bottom: '3%',
+          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
          }
        ]
      })

--- a/src/views/dashboard/admin/components/processOrderList.vue
+++ b/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>
--- a/src/views/dashboard/admin/index.vue
+++ b/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 processOrderList from './components/processOrderList'
-import ProcessingTicketRanking from './components/ProcessingTicketRanking'
+// import TodoWorkOrderRanking from './components/TodoWorkOrderRanking'
+// import ProcessingTicketRanking from './components/ProcessingTicketRanking'
 export default {
  name: 'DashboardAdmin',
@@ -39,11 +40,12 @@ export default {
    PanelGroup,
    LineChart,
    TicketSubmissionRanking,
-    TodoWorkOrderRanking,
+    processOrderList
-    ProcessingTicketRanking
+    // TodoWorkOrderRanking,
+    // ProcessingTicketRanking
  },
  // eslint-disable-next-line vue/require-prop-types
-  props: ['panelGroupValue'],
+  props: ['dashboardValue'],
  data() {
    return {

--- a/src/views/dashboard/index.vue
+++ b/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
    })
  }