统计页面

src/api/admin/repair/repairStats.js

@@ -53,7 +53,7 @@ export function repairStats (parameter) {
     params: parameter
   })
 }
-
+//第四行  左侧 楼层负责人情况统计
 export function floorStats (parameter) {
   return axios({
     url: api.repairStats + '/floorStats',
@@ -61,23 +61,23 @@ export function floorStats (parameter) {
     params: parameter
   })
 }
-
+//第四行  右上 设备故障统计
-export function selectDeviceStats (parameter) {
+export function deviceStats (parameter) {
   return axios({
     url: api.repairStats + '/deviceStats',
     method: 'get',
     params: parameter
   })
 }
-
+//第四行  右下 故障类型统计
-export function selectFailureStats (parameter) {
+export function failureStats (parameter) {
   return axios({
     url: api.repairStats + '/failureStats',
     method: 'get',
     params: parameter
   })
 }
-
+//第五行 设备、品牌、评价 统计
 export function deviceTypeStats (parameter) {
   return axios({
     url: api.repairStats + '/deviceTypeStats',

src/views/admin/repair/RepairStatistics.vue

@@ -30,8 +30,8 @@
     <div class="caseStatisticsView">
       <div class="headView">
         <div class="titleView">工单统计</div>
-        <div class="typeView">
+        <div class="typeView" style="width: 200px;">
-          <a-range-picker @change="onChange" />
+          <a-range-picker v-model="dateRange2" @change="onChange2" />
         </div>
       </div>
       <div class="contentView">
@@ -66,10 +66,9 @@
       <div class="caseStatusView">
         <div class="headView">
           <div class="titleView">工单完成情况</div>
-          <!--          <div class="typeView">-->
+          <div class="typeView" style="width: 200px;">
-          <!--            <div class="type activity">本周</div>-->
+            <a-range-picker v-model="dateRange3L" @change="onChange3L" />
-          <!--            <div class="type">本年</div>-->
+          </div>
-          <!--          </div>-->
         </div>
         <div class="contentView">
           <div class="circularView">
@@ -84,6 +83,9 @@
       <div class="evaluateView">
         <div class="headView">
           <div class="titleView">评价情况</div>
+          <div class="typeView" style="width: 200px;">
+            <a-range-picker v-model="dateRange3R" @change="onChange3R" />
+          </div>
         </div>
         <div class="contentView">
           <div id="echart3" style="width: 400px; height: 300px"></div>
@@ -94,24 +96,8 @@
       <div class="floorView">
         <div class="headView">
           <div class="titleView">网格长</div>
-          <div class="conditionView">
+          <div class="typeView" style="width: 200px;">
-            <a-select :value="floor.type" @select="selectFloor" style="width: 120px;margin-right: 10px">
+          <a-range-picker v-model="dateRange4L" @change="onChange4L" />
-              <a-select-option value="month">按月</a-select-option>
-              <a-select-option value="year">按年</a-select-option>
-            </a-select>
-            <a-date-picker
-              v-if="floor.type == 'year' || floor.type == ''"
-              format="YYYY"
-              mode="year"
-              :value="floor.time"
-              placeholder="选择年份"
-              :open="floor.open"
-              @openChange="openChange"
-              @panelChange="panelChange"
-            >
-            </a-date-picker>
-            <a-month-picker v-if='floor.type =="month"' @change="clickFloor" :value="floor.time"
-                            placeholder="请选择月" />
           </div>
         </div>
         <div class="contentView">
@@ -122,24 +108,8 @@
         <div class="blockView">
           <div class="headView">
             <div class="titleView">故障统计</div>
-            <div class="conditionView">
+            <div class="typeView" style="width: 200px;">
-              <a-select :value="fault.type" @select="selectFault" style="width: 120px;margin-right: 10px">
+              <a-range-picker v-model="dateRange4R1" @change="onChange4R1" />
-                <a-select-option value="month">按月</a-select-option>
-                <a-select-option value="year">按年</a-select-option>
-              </a-select>
-              <a-date-picker
-                v-if="fault.type == 'year' || fault.type == ''"
-                format="YYYY"
-                mode="year"
-                :value="fault.time"
-                placeholder="选择年份"
-                :open="fault.open"
-                @openChange="openFaultChange"
-                @panelChange="panelFaultChange"
-              >
-              </a-date-picker>
-              <a-month-picker v-if='fault.type =="month"' @change="clickFault" :value="fault.time"
-                              placeholder="请选择月" />
             </div>
           </div>
           <div class="contentView">
@@ -149,24 +119,8 @@
         <div class="blockView">
           <div class="headView">
             <div class="titleView">故障类型</div>
-            <div class="conditionView">
+            <div class="typeView" style="width: 200px;">
-              <a-select :value="faultType.type" @select="selectFaultType" style="width: 120px;margin-right: 10px">
+              <a-range-picker v-model="dateRange4R2" @change="onChange4R2" />
-                <a-select-option value="month">按月</a-select-option>
-                <a-select-option value="year">按年</a-select-option>
-              </a-select>
-              <a-date-picker
-                v-if="faultType.type == 'year' || faultType.type == ''"
-                format="YYYY"
-                mode="year"
-                :value="faultType.time"
-                placeholder="选择年份"
-                :open="faultType.open"
-                @openChange="openFaultTypeChange"
-                @panelChange="panelFaultTypeChange"
-              >
-              </a-date-picker>
-              <a-month-picker v-if='faultType.type =="month"' @change="clickFaultType" :value="faultType.time"
-                              placeholder="请选择月" />
             </div>
           </div>
           <div class="contentView">
@@ -179,33 +133,17 @@
     <div class="tableView">
       <div class="headView">
         <div class="titleView">项目详情</div>
-        <div class="conditionView">
+        <div class="typeView" style="width: 200px;">
-          <a-select :value="deviceType.type" @select="selectDeviceType" style="width: 120px;margin-right: 10px">
+          <a-range-picker v-model="dateRange5" @change="onChange5" />
-            <a-select-option value="month">按月</a-select-option>
-            <a-select-option value="year">按年</a-select-option>
-          </a-select>
-          <a-date-picker
-            v-if="deviceType.type == 'year' || deviceType.type == ''"
-            format="YYYY"
-            mode="year"
-            :value="deviceType.time"
-            placeholder="选择年份"
-            :open="deviceType.open"
-            @openChange="openDeviceTypeChange"
-            @panelChange="panelDeviceTypeChange"
-          >
-          </a-date-picker>
-          <a-month-picker v-if='deviceType.type =="month"' @change="clickDeviceType" :value="deviceType.time"
-                          placeholder="请选择月" />
         </div>
       </div>
       <div class="contentView">
         <a-table
+          size="default"
+          ref="table"
           style="width: 100%"
           :columns="columns"
           :data-source="loadData"
-          showPagination="true"
-          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
 
         >
         </a-table>
@@ -217,22 +155,36 @@
 
 <script>
 import * as echarts from 'echarts'
+import moment from 'moment'
+import { STable } from '@/components'
 
 import {
   repairAdminStats,
   repairStats,
   floorStats,
-  deviceTypeStats,
+  deviceStats,
-  selectDeviceStats,
+  failureStats,
-  selectFailureStats
+  deviceTypeStats
 } from '@/api/admin/repair/repairStats'
 
+//常量计算当前周的开始与结束
+const initStart=moment().startOf('isoWeek'),initEnd=moment().endOf('isoWeek');
+
 export default {
   name: 'RepairStatistics',
+  components: {
+    STable
+  },
   data () {
     return {
+      dateRange2: [initStart, initEnd],
+      dateRange3L: [initStart, initEnd],
+      dateRange3R: [initStart, initEnd],
+      dateRange4L: [initStart, initEnd],
+      dateRange4R1: [initStart, initEnd],
+      dateRange4R2: [initStart, initEnd],
+      dateRange5: [initStart, initEnd],
       baseUrl: process.env.BASE_URL,
-      type: '',
       adminStatsCount: [],
       repairStatsCount: [],
       finishCount: [],
@@ -303,260 +255,124 @@ export default {
           dataIndex: 'll'
         }
       ],
-      // 加载数据方法 必须为 Promise 对象
+      loadData: []
-      loadData: [],
-      startTime: '',
-      endTime: ''
     }
   },
   mounted () {
-    this.adminStats()
+    this.adminStats()//第一行工单统计
-    this.repairCount()
+    this.repairCount2()//第二行  工单统计
-    this.getfloorStats()
+    this.repairCount3L()//三行  工单完成情况
-    this.deviceStats()
+    this.repairCount3R()//三行  评价情况
-    this.faultStats()
+    this.floorStats()//第四行  左侧 楼层负责人情况统计
-    this.selectFailureStats()
+    this.deviceStats()// 第四行  右上设备  故障统计
+    this.failureStats()//第四行  右下 故障类型统计
+    this.deviceTypeStats()//第五行 设备、品牌、评价 统计
   },
   methods: {
-    onChange (value, dateString) {
+    onChange2 () {
-      this.startTime = dateString[0]
+      this.repairCount2();
-      this.endTime = dateString[1]
-      repairStats({ startDate: this.startTime, endDate: this.endTime }).then(res => {
-        console.log(res.currentMonth.wc)
-        this.repairStatsCount = res.currentMonth.stats
-        this.finishCount = res.currentMonth.wc
-        this.timeout = res.currentMonth.timeout
-        this.pj = res.currentMonth.pj
-        this.createEchartCake('echart1', {
-          bottom: 10,
-          left: 'right',
-          orient: 'vertical'
-        }, this.finishCount)
-        this.createEchartCake('echart2', {
-          bottom: 10,
-          left: 'right',
-          orient: 'vertical'
-        }, this.timeout)
-        this.createEchartCake('echart3', {
-          bottom: 10,
-          left: 'right',
-          orient: 'vertical'
-        }, this.pj)
-      })
-
     },
-    // 使用openChange事件控制日期下拉面板显示与收起
+    onChange3L() {
-    openChange (open) {
+      this.repairCount3L();
-      this.floor.open = open
     },
-    // 使用panelChange事件控制选中年份的方法
+    onChange3R() {
-    panelChange (value) {
+      this.repairCount3R();
-      // 接收panelChange返回的值
-      this.floor.time = value
-      const date1 = new Date(this.floor.time).getFullYear()
-      floorStats({ date: date1 }).then(res => {
-        this.createEchartLine('echart4', res.data)
-      })
-      this.floor.open = false
     },
-    // 选择-楼层负责人情况
+    onChange4L(){
-    selectFloor (value, option) {
+      this.floorStats();
-      this.floor.type = value
     },
-    clickFloor (a, c) {
+    onChange4R1(){
-      this.floor.time = c
+      this.deviceStats();
-      console.log(c)
-      floorStats({ date: c }).then(res => {
-        this.createEchartLine('echart4', res.data)
-      })
     },
-
+    onChange4R2(){
-    // 故障统计 使用openChange事件控制日期下拉面板显示与收起
+      this.failureStats();
-    openFaultChange (open) {
-      this.fault.open = open
     },
-    // 使用panelChange事件控制选中年份的方法
+    onChange5(){
-    panelFaultChange (value) {
+      this.deviceTypeStats();
-      // 接收panelChange返回的值
-      this.fault.time = value
-      const date1 = new Date(this.fault.time).getFullYear()
-      selectDeviceStats({ date: date1 }).then(res => {
-        this.faultStatsCount = res.data
-        this.createColumnEcharrt('echart5', res.data)
-      })
-      this.fault.open = false
     },
-    // 选择-楼层负责人情况
-    selectFault (value, option) {
-      this.fault.type = value
-    },
-    clickFault (a, c) {
-      this.fault.time = c
-      selectDeviceStats({ date: c }).then(res => {
-        this.faultStatsCount = res.data
-        this.createColumnEcharrt('echart5', res.data)
-      })
-    },
-
-    // 故障类型 使用openChange事件控制日期下拉面板显示与收起
-    openFaultTypeChange (open) {
-      this.faultType.open = open
-    },
-    // 使用panelChange事件控制选中年份的方法
-    panelFaultTypeChange (value) {
-      // 接收panelChange返回的值
-      this.faultType.time = value
-      const date1 = new Date(this.faultType.time).getFullYear()
-      selectFailureStats({ date: date1 }).then(res => {
-        console.log(res)
-        this.selectFaultStatsCount = res.data
-        this.createEchartCake('echart6', {
-          bottom: 10,
-          left: 'right',
-          orient: 'vertical'
-        }, this.selectFaultStatsCount)
-      })
-      this.faultType.open = false
-
-    },
-    // 选择-楼层负责人情况
-    selectFaultType (value, option) {
-      this.faultType.type = value
-    },
-    clickFaultType (a, c) {
-      this.faultType.time = c
-      selectFailureStats({ date: c }).then(res => {
-        console.log(res)
-        this.selectFaultStatsCount = res.data
-        this.createEchartCake('echart6', {
-          bottom: 10,
-          left: 'right',
-          orient: 'vertical'
-        }, this.selectFaultStatsCount)
-      })
-    },
-
-    // 使用openChange事件控制日期下拉面板显示与收起
-    openDeviceTypeChange (open) {
-      this.deviceType.open = open
-    },
-    // 使用panelChange事件控制选中年份的方法
-    panelDeviceTypeChange (value) {
-      // 接收panelChange返回的值
-      this.deviceType.time = value
-      this.deviceType.open = false
-      const date1 = new Date(this.deviceType.time).getFullYear()
-      deviceTypeStats({ date: date1 }).then(res => {
-        this.loadData = res.rows
-      })
-    },
-    // 选择-楼层负责人情况
-    selectDeviceType (value, option) {
-      this.deviceType.type = value
-    },
-    clickDeviceType (a, c) {
-      console.log(c)
-      this.deviceType.time = c
-      deviceTypeStats({ date: c }).then(res => {
-        this.loadData = res.rows
-      })
-    },
-
     adminStats () {
       repairAdminStats().then(res => {
         this.adminStatsCount = res.repairAdminStats
       })
     },
-    deviceStats () {
+    repairCount2 (){
-      let date = this.formatDate()
+      const startDate = this.dateRange2[0].format('YYYY-MM-DD');
-      deviceTypeStats({ date: date }).then(res => {
+      const endDate = this.dateRange2[1].format('YYYY-MM-DD');
-        this.loadData = res.rows
+      repairStats({ startDate: startDate, endDate: endDate, type: 'repair' }).then(res => {
-      })
-    },
-    faultStats () {
-      let date = this.formatDate()
-
-      selectDeviceStats({ date: date }).then(res => {
-        this.faultStatsCount = res.data
-        this.createColumnEcharrt('echart5', res.data)
-      })
-    },
-    selectFailureStats () {
-      let date = this.formatDate()
-
-      selectFailureStats({ date: date }).then(res => {
-        console.log(res)
-        this.selectFaultStatsCount = res.data
-        this.createEchartCake('echart6', {
-          bottom: 10,
-          left: 'right',
-          orient: 'vertical'
-        }, this.selectFaultStatsCount)
-      })
-    },
-    repairCount () {
-      var now = new Date() // 当前日期
-      var nowYear = now.getFullYear() // 当前年
-      var nowMonth = now.getMonth() // 当前月 （值为0~11）
-      let date = this.formatDate(new Date())
-      console.log(date)
-      let lastDay = new Date(nowYear, nowMonth + 1, 0)
-      let endDate = this.formatDate(lastDay)
-      console.log()
-      repairStats({ startDate: date, endDate: endDate, type: 'repair' }).then(res => {
         this.repairStatsCount = res.data.stats
       })
-      repairStats({ startDate: date, endDate: endDate, type: 'end' }).then(res => {
+    },
-        this.finishCount = res.data.wc
+    repairCount3L (){
-        this.timeout = res.data.timeout
+      const startDate = this.dateRange3L[0].format('YYYY-MM-DD');
-        this.createEchartCake('echart1', {
+      const endDate = this.dateRange3L[1].format('YYYY-MM-DD');
-          bottom: 10,
+      repairStats({startDate: startDate, endDate: endDate, type: 'end'}).then(res => {
-          left: 'right',
+          this.finishCount = res.data.wc
-          orient: 'vertical'
+          this.timeout = res.data.timeout
-        }, this.finishCount)
+          this.createEchartCake('echart1', {
-        this.createEchartCake('echart2', {
+              bottom: 10,
-          bottom: 10,
+              left: 'right',
-          left: 'right',
+              orient: 'vertical'
-          orient: 'vertical'
+            }, ['#91cd77', '#ef6567'], this.finishCount)
-        }, this.timeout)
+          this.createEchartCake('echart2', {
-        this.createEchartCake('echart3', {
+              bottom: 10,
-          bottom: 10,
+              left: 'right',
-          left: 'right',
+              orient: 'vertical'
-          orient: 'vertical'
+            }, ['#ef6567', '#fc8251', '#f9c956', '#91cd77'], this.timeout)
-        }, this.pj)
       })
-      repairStats({ startDate: date, endDate: endDate, type: 'eval' }).then(res => {
+    },
-        this.pj = res.data.pj
+    repairCount3R (){
-
+      const startDate = this.dateRange3R[0].format('YYYY-MM-DD');
-        this.createEchartCake('echart3', {
+      const endDate = this.dateRange3R[1].format('YYYY-MM-DD');
-          bottom: 10,
+      repairStats({ startDate: startDate, endDate: endDate, type: 'eval' }).then(res => {
-          left: 'right',
+          this.pj = res.data.pj
-          orient: 'vertical'
+          this.createEchartCake('echart3', {
-        }, this.pj)
+              bottom: 10,
+              left: 'right',
+              orient: 'vertical'
+            }, ['#91cd77','#fc8251','#ef6567'],this.pj)
       })
     },
     // 楼层负责人情况
-    getfloorStats () {
+    floorStats () {
-      let date = this.formatDate()
+      const startDate = this.dateRange4L[0].format('YYYY-MM-DD');
-      floorStats({ date: date }).then(res => {
+      const endDate = this.dateRange4L[1].format('YYYY-MM-DD');
+      floorStats({startDate: startDate, endDate: endDate}).then(res => {
         this.createEchartLine('echart4', res.data)
       })
     },
-    formatDate (date) {
+    //故障统计
-      let year = date.getFullYear() // 获取完整的年份(4位)
+    deviceStats () {
-      let month = date.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
+      const startDate = this.dateRange4R1[0].format('YYYY-MM-DD');
-      let strDate = date.getDate() // 获取当前日(1-31)
+      const endDate = this.dateRange4R1[1].format('YYYY-MM-DD');
-      if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
+      deviceStats({ startDate: startDate, endDate: endDate }).then(res => {
-      if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
+          this.faultStatsCount = res.data
-      return `${year}-${month}-${strDate}`
+          this.createColumnEcharrt('echart5', res.data)
+      })
+    },
+    //第四行  右下 故障类型统计
+    failureStats () {
+      const startDate = this.dateRange4R2[0].format('YYYY-MM-DD');
+      const endDate = this.dateRange4R2[1].format('YYYY-MM-DD');
+      failureStats({ startDate: startDate, endDate: endDate }).then(res => {
+        this.selectFaultStatsCount = res.data
+        this.createEchartCake('echart6', {
+            bottom: 10,
+            left: 'right',
+            orient: 'vertical'
+          },['#ef6567', '#fc8251', '#f9c956', '#91cd77'],this.selectFaultStatsCount)
+      })
+    },
+    //第五行 设备、品牌、评价 统计
+    deviceTypeStats () {
+      const startDate = this.dateRange5[0].format('YYYY-MM-DD');
+      const endDate = this.dateRange5[1].format('YYYY-MM-DD');
+      deviceTypeStats({ startDate: startDate, endDate: endDate}).then(res => {
+        this.loadData = res.rows
+      })
     },
 
-    onSelectChange (selectedRowKeys, selectedRows) {
+    createEchartCake(id, legend, colors, data) {
-      this.selectedRowKeys = selectedRowKeys
+      //console.log(data)
-      this.selectedRows = selectedRows
-    },
-    createEchartCake (id, legend, data) {
-      console.log(data)
       // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(document.getElementById(id))
       // 指定图表的配置项和数据
@@ -565,6 +381,7 @@ export default {
           trigger: 'item'
         },
         legend: legend,
+        color: colors,
         series: [
           {
             name: '完成率',
@@ -610,6 +427,7 @@ export default {
           }
         },
         legend: {},
+        color: ['#75bedc','#f9c956'],
         grid: {
           left: '3%',
           right: '4%',
@@ -628,11 +446,13 @@ export default {
           {
             name: '故障数量',
             type: 'bar',
+            barWidth: '5px',
             data: data.total
           },
           {
-            name: '数量类型',
+            name: '已完成数量',
             type: 'bar',
+            barWidth: '5px',
             data: data.finish
           }
         ]
@@ -656,13 +476,9 @@ export default {
         data.total,
         data.finish
       ]
-      const totalData = []
+      //计算，总数-已完成=未完成
       for (let i = 0; i < rawData[0].length; ++i) {
-        let sum = 0
+        rawData[0][i]-=rawData[1][i];
-        for (let j = 0; j < rawData.length; ++j) {
-          sum += rawData[j][i]
-        }
-        totalData.push(sum)
       }
       const grid = {
         left: 100,
@@ -678,20 +494,19 @@ export default {
           name,
           type: 'bar',
           stack: 'total',
-          barWidth: '60%',
+          barWidth: '10px',
           label: {
             show: true,
-            formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
+            formatter: (params) => params.value>0 ? params.value : ""
           },
-          data: rawData[sid].map((d, did) =>
+          data: rawData[sid].map((d, did) => rawData[sid][did])
-            totalData[did] <= 0 ? 0 : d / totalData[did]
-          )
         }
       })
       let option = {
         legend: {
           selectedMode: false
         },
+        color: ['#f9c956','#75bedc'],
         grid,
         yAxis: {
           type: 'value'