修改了对应统计页面

src/api/admin/repair/repairStats.js

@@ -62,6 +62,14 @@ export function floorStats (parameter) {
   })
 }
 
+export function selectDeviceStats (parameter) {
+  return axios({
+    url: api.repairStats + '/deviceStats',
+    method: 'get',
+    params: parameter
+  })
+}
+
 export function deviceTypeStats (parameter) {
   return axios({
     url: api.repairStats + '/deviceTypeStats',

src/views/admin/repair/RepairStatistics.vue

@@ -94,24 +94,23 @@
         <div class="headView">
           <div class="titleView">楼层负责人情况</div>
           <div class="conditionView">
-            <a-select default-value="week" style="width: 120px;margin-right: 10px">
+            <a-select :value="floor.type" @select="selectFloor" style="width: 120px;margin-right: 10px">
-              <a-select-option value="month" >按月</a-select-option>
+              <a-select-option value="month">按月</a-select-option>
               <a-select-option value="year">按年</a-select-option>
             </a-select>
             <a-date-picker
-              format='YYYY'
+              v-if="floor.type == 'year' || floor.type == ''"
-              mode='year'
+              format="YYYY"
-              :value='floor.time'
+              mode="year"
-              placeholder='选择年份'
+              :value="floor.time"
-              :open='floor.open'
+              placeholder="选择年份"
-              @change='onChange'
+              :open="floor.open"
-              @openChange='openChange'
+              @openChange="openChange"
-              @panelChange='panelChange'
+              @panelChange="panelChange"
             >
             </a-date-picker>
-            <!--            <a-date-picker mode='year' format='YYYY' @change='clickFloor' :value='floor.time'/>-->
+            <a-month-picker v-if='floor.type =="month"' @change="clickFloor" :value="floor.time"
-            <a-month-picker v-if='floor.type =="month"' @change='clickFloor' :value='floor.time'
+                            placeholder="请选择月" />
-                            placeholder='请选择月' />
           </div>
         </div>
         <div class="contentView">
@@ -123,11 +122,23 @@
           <div class="headView">
             <div class="titleView">故障统计</div>
             <div class="conditionView">
-              <a-select default-value="week" style="width: 120px;margin-right: 10px">
+              <a-select :value="fault.type" @select="selectFault" style="width: 120px;margin-right: 10px">
                 <a-select-option value="month">按月</a-select-option>
                 <a-select-option value="year">按年</a-select-option>
               </a-select>
-              <a-date-picker placeholder="请选择时间" />
+              <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">
@@ -154,18 +165,30 @@
 
     <div class="tableView">
       <div class="headView">
-        <div class="titleView">故障统计</div>
+        <div class="titleView">项目详情</div>
         <div class="conditionView">
-          <a-select default-value="week" style="width: 120px;margin-right: 10px">
+          <a-select :value="deviceType.type" @select="selectDeviceType" style="width: 120px;margin-right: 10px">
-            <a-select-option value="week">按周</a-select-option>
             <a-select-option value="month">按月</a-select-option>
             <a-select-option value="year">按年</a-select-option>
           </a-select>
-          <a-date-picker placeholder="请选择时间" />
+          <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
+          style="width: 100%"
           :columns="columns"
           :data-source="loadData"
           showPagination="true"
@@ -181,7 +204,13 @@
 
 <script>
 import * as echarts from 'echarts'
-import { repairAdminStats, repairStats, floorStats } from '@/api/admin/repair/repairStats'
+import {
+  repairAdminStats,
+  repairStats,
+  floorStats,
+  deviceTypeStats,
+  selectDeviceStats
+} from '@/api/admin/repair/repairStats'
 
 export default {
   name: 'RepairStatistics',
@@ -199,8 +228,24 @@ export default {
       queryParam: {},
       selectedRowKeys: [],
       selectedRows: [],
-      deviceType: '',
+      faultStatsCount: [],
+      deviceType: {
+        type: '',
+        time: '',
+        open: false
+      },
+      fault: {
+        type: '',
+        time: '',
+        open: false
+      },
       yearShowOne: false,
+      //
+      floor: {
+        type: '',
+        time: '',
+        open: false
+      },
       // 表头
       columns: [
         {
@@ -237,29 +282,7 @@ export default {
         }
       ],
       // 加载数据方法 必须为 Promise 对象
-      loadData: [
+      loadData: []
-        {
-          key: '1',
-          name: 'John Brown',
-          age: 32,
-          address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
-          tags: ['nice', 'developer']
-        },
-        {
-          key: '2',
-          name: 'Jim Green',
-          age: 42,
-          address: 'London No. 2 Lake Park, London No. 2 Lake Park',
-          tags: ['loser']
-        },
-        {
-          key: '3',
-          name: 'Joe Black',
-          age: 32,
-          address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
-          tags: ['cool', 'teacher']
-        }
-      ]
     }
   },
   mounted () {
@@ -267,6 +290,7 @@ export default {
     this.repairCount()
     this.getfloorStats()
     this.deviceStats()
+    this.faultStats()
 
     // this.createEchartCake('echart2', {
     //   bottom: 10,
@@ -278,8 +302,7 @@ export default {
     //   left: 'right',
     //   orient: 'vertical'
     // })
-    this.createEchartLine('echart4')
+
-    this.createColumnEcharrt('echart5')
     this.createEchartCake('echart6', {
       bottom: 'center',
       right: '10%',
@@ -287,33 +310,96 @@ export default {
     })
   },
   methods: {
+    // 使用openChange事件控制日期下拉面板显示与收起
+    openChange (open) {
+      this.floor.open = open
+    },
+    // 使用panelChange事件控制选中年份的方法
+    panelChange (value) {
+      // 接收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
+    },
+    // 选择-楼层负责人情况
+    selectFloor (value, option) {
+      this.floor.type = value
+    },
+    clickFloor (a, c) {
+      this.floor.time = c
+      console.log(c)
+      floorStats({ date: c }).then(res => {
+        this.createEchartLine('echart4', res.data)
+      })
+    },
 
-    // 弹出日历和关闭日历的回调
+    // 故障统计 使用openChange事件控制日期下拉面板显示与收起
-    openChangeOne (status) {
+    openFaultChange (open) {
-      if (status) {
+      this.fault.open = open
-        this.yearShowOne = true
-      }
     },
-    // 得到年份选择器的值
+    // 使用panelChange事件控制选中年份的方法
-    panelChangeOne (value) {
+    panelFaultChange (value) {
-      this.yearShowOne = false
+      // 接收panelChange返回的值
-      this.deviceType = value
+      this.fault.time = value
-      console.log(this.deviceType)
+      const date1 = new Date(this.fault.time).getFullYear()
+      this.fault.open = false
     },
-    selectWeek (value) {
+    // 选择-楼层负责人情况
-      this.deviceType = value
+    selectFault (value, option) {
-      console.log(this.deviceType)
+      this.fault.type = value
     },
+    clickFault (a, c) {
+      this.fault.time = c
+      console.log(c)
+    },
+
+    // 使用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 () {
-      deviceTypeStats({ date: '2024-08' }).then(res => {
+      let date = this.formatDate()
+      deviceTypeStats({ date: date }).then(res => {
         this.loadData = res.rows
       })
     },
+    faultStats () {
+      selectDeviceStats({ date: '2024-08' }).then(res => {
+        this.faultStatsCount = res.data
+        this.createColumnEcharrt('echart5', res.data)
+      })
+    },
+
     getYearCount () {
       this.type = 'year'
       repairStats().then(res => {
@@ -366,10 +452,18 @@ export default {
     },
     // 楼层负责人情况
     getfloorStats () {
-      floorStats().then(res => {
+      let date = this.formatDate()
-        console.log(res)
+      floorStats({ date: date }).then(res => {
+        this.createEchartLine('echart4', res.data)
       })
     },
+    formatDate () {
+      let date = new Date()
+      let myyear = date.getFullYear()
+      let mymonth = date.getMonth() + 1
+      mymonth < 10 ? mymonth = '0' + mymonth : mymonth
+      return `${myyear}-${mymonth}`
+    },
 
     onSelectChange (selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys
@@ -416,14 +510,12 @@ export default {
       }
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option)
-    },
+    }
-    createEchartLine (id) {
+    ,
+    createEchartLine (id, data) {
       // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(document.getElementById(id))
       let option = {
-        title: {
-          text: 'World Population'
-        },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -443,34 +535,39 @@ export default {
         },
         yAxis: {
           type: 'category',
-          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
+          data: data.y
         },
         series: [
           {
-            name: '2011',
+            name: '故障数量',
             type: 'bar',
-            data: [18203, 23489, 29034, 104970, 131744, 630230]
+            data: data.total
           },
           {
-            name: '2012',
+            name: '数量类型',
             type: 'bar',
-            data: [19325, 23438, 31000, 121594, 134141, 681807]
+            data: data.finish
           }
         ]
       }
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option)
-    },
+    }
-    createColumnEcharrt (id) {
+    ,
+    createColumnEcharrt (id, data) {
+      data.x = data.x.map(item => {
+        if (item && item.length > 4) {
+          item = item.substring(0, 4) + '..'
+        }
+        return item
+      })
+
       // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(document.getElementById(id))
       // There should not be negative values in rawData
       const rawData = [
-        [100, 302, 301, 334, 390, 330, 320],
+        data.total,
-        [320, 132, 101, 134, 90, 230, 210],
+        data.finish
-        [220, 182, 191, 234, 290, 330, 310],
-        [150, 212, 201, 154, 190, 330, 410],
-        [820, 832, 901, 934, 1290, 1330, 1320]
       ]
       const totalData = []
       for (let i = 0; i < rawData[0].length; ++i) {
@@ -487,11 +584,8 @@ export default {
         bottom: 50
       }
       const series = [
-        'Direct',
+        '未完成',
-        'Mail Ad',
+        '已完成'
-        'Affiliate Ad',
-        'Video Ad',
-        'Search Engine'
       ].map((name, sid) => {
         return {
           name,
@@ -517,7 +611,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: data.x
         },
         series
       }
@@ -526,6 +620,8 @@ export default {
     }
   }
 }
+
+
 </script>
 
 <style scoped>