From eace68280bf493a5a9b5067e0e117d5457a0c22c Mon Sep 17 00:00:00 2001
From: SelfRidicule <selfridicule@gmail.com>
Date: Sun, 18 Aug 2024 14:03:13 +0800
Subject: [PATCH] 1

---
 src/views/admin/repair/RepairStatistics.vue | 270 +++++++++++---------
 1 file changed, 155 insertions(+), 115 deletions(-)

diff --git a/src/views/admin/repair/RepairStatistics.vue b/src/views/admin/repair/RepairStatistics.vue
index 5799845..8aa1731 100644
--- a/src/views/admin/repair/RepairStatistics.vue
+++ b/src/views/admin/repair/RepairStatistics.vue
@@ -1,163 +1,175 @@
 <template>
-  <div class="container">
+  <div class='container'>
 
-    <div class="topHeadView">
-      <div class="itemView">
-        <div class="imgView"></div>
-        <div class="label">待派单</div>
-        <div class="num">{{ adminStatsCount.wait }}</div>
+    <div class='topHeadView'>
+      <div class='itemView'>
+        <div class='imgView'></div>
+        <div class='label'>待派单</div>
+        <div class='num'>{{ adminStatsCount.wait }}</div>
       </div>
-      <div class="itemView">
-        <div class="imgView"></div>
-        <div class="label">重派单</div>
-        <div class="num">{{ adminStatsCount.anew }}</div>
+      <div class='itemView'>
+        <div class='imgView'></div>
+        <div class='label'>重派单</div>
+        <div class='num'>{{ adminStatsCount.anew }}</div>
       </div>
-      <div class="itemView">
-        <div class="imgView"></div>
-        <div class="label">未查看通知</div>
-        <div class="num">{{ adminStatsCount.newnotice }}</div>
+      <div class='itemView'>
+        <div class='imgView'></div>
+        <div class='label'>未查看通知</div>
+        <div class='num'>{{ adminStatsCount.newnotice }}</div>
       </div>
-      <div class="itemView">
-        <div class="imgView"></div>
-        <div class="label">已查看通知</div>
-        <div class="num">{{ adminStatsCount.oldnotice }}</div>
+      <div class='itemView'>
+        <div class='imgView'></div>
+        <div class='label'>已查看通知</div>
+        <div class='num'>{{ adminStatsCount.oldnotice }}</div>
       </div>
     </div>
 
-    <div class="caseStatisticsView">
-      <div class="headView">
-        <div class="titleView">工单统计</div>
-        <div class="typeView">
-          <div :class="type=='month' ? 'activity' : ''" class="type " @click="repairCount">本月</div>
-          <div :class="type=='year' ? 'activity' : ''" class="type" @click="getYearCount">本年</div>
+    <div class='caseStatisticsView'>
+      <div class='headView'>
+        <div class='titleView'>工单统计</div>
+        <div class='typeView'>
+          <div :class="type=='month' ? 'activity' : ''" class='type ' @click='repairCount'>本月</div>
+          <div :class="type=='year' ? 'activity' : ''" class='type' @click='getYearCount'>本年</div>
         </div>
       </div>
 
-      <div class="contentView">
-        <div class="itemView">
-          <div class="label">维修工单</div>
-          <div class="value">{{ repairStatsCount.zs }}</div>
+      <div class='contentView'>
+        <div class='itemView'>
+          <div class='label'>维修工单</div>
+          <div class='value'>{{ repairStatsCount.zs }}</div>
         </div>
-        <div class="itemView">
-          <div class="label">待维修工单</div>
-          <div class="value">{{ repairStatsCount.wait }}</div>
+        <div class='itemView'>
+          <div class='label'>待维修工单</div>
+          <div class='value'>{{ repairStatsCount.wait }}</div>
         </div>
-        <div class="itemView">
-          <div class="label">超时量</div>
-          <div class="value">{{ repairStatsCount.timeout }}</div>
+        <div class='itemView'>
+          <div class='label'>超时量</div>
+          <div class='value'>{{ repairStatsCount.timeout }}</div>
         </div>
-        <div class="itemView">
-          <div class="label">差评量</div>
-          <div class="value">{{ repairStatsCount.l }}</div>
+        <div class='itemView'>
+          <div class='label'>差评量</div>
+          <div class='value'>{{ repairStatsCount.l }}</div>
         </div>
-        <div class="itemView">
-          <div class="label">中评量</div>
-          <div class="value">{{ repairStatsCount.m }}</div>
+        <div class='itemView'>
+          <div class='label'>中评量</div>
+          <div class='value'>{{ repairStatsCount.m }}</div>
         </div>
-        <div class="itemView">
-          <div class="label">好评量</div>
-          <div class="value">{{ repairStatsCount.h }}</div>
+        <div class='itemView'>
+          <div class='label'>好评量</div>
+          <div class='value'>{{ repairStatsCount.h }}</div>
         </div>
       </div>
     </div>
 
-    <div class="statusView">
-      <div class="caseStatusView">
-        <div class="headView">
-          <div class="titleView">工单完成情况</div>
+    <div class='statusView'>
+      <div class='caseStatusView'>
+        <div class='headView'>
+          <div class='titleView'>工单完成情况</div>
           <!--          <div class="typeView">-->
           <!--            <div class="type activity">本周</div>-->
           <!--            <div class="type">本年</div>-->
           <!--          </div>-->
         </div>
-        <div class="contentView">
-          <div class="circularView">
-            <div id="echart1" style="width: 400px; height: 300px"></div>
+        <div class='contentView'>
+          <div class='circularView'>
+            <div id='echart1' style='width: 400px; height: 300px'></div>
           </div>
-          <div class="centerLine"></div>
-          <div class="circularView">
-            <div id="echart2" style="width: 400px; height: 300px"></div>
+          <div class='centerLine'></div>
+          <div class='circularView'>
+            <div id='echart2' style='width: 400px; height: 300px'></div>
           </div>
         </div>
       </div>
-      <div class="evaluateView">
-        <div class="headView">
-          <div class="titleView">评价情况</div>
+      <div class='evaluateView'>
+        <div class='headView'>
+          <div class='titleView'>评价情况</div>
         </div>
-        <div class="contentView">
-          <div id="echart3" style="width: 400px; height: 300px"></div>
+        <div class='contentView'>
+          <div id='echart3' style='width: 400px; height: 300px'></div>
         </div>
       </div>
     </div>
-    <div class="faultView">
-      <div class="floorView">
-        <div class="headView">
-          <div class="titleView">楼层负责人情况</div>
-          <div class="conditionView">
-            <a-select default-value="week" style="width: 120px;margin-right: 10px">
-              <a-select-option value="month" >按月</a-select-option>
-              <a-select-option value="year">按年</a-select-option>
+    <div class='faultView'>
+      <div class='floorView'>
+        <div class='headView'>
+          <div class='titleView'>楼层负责人情况</div>
+          <div class='conditionView'>
+            <a-select :value='floor.type' @select='selectFloor' style='width: 120px;margin-right: 10px'>
+              <a-select-option value='year'>按年</a-select-option>
+              <a-select-option value='month'>按月</a-select-option>
             </a-select>
-            <a-month-picker placeholder="请选择时间" />
-            <a-year-picker placeholder="请选择时间" />
+            <a-date-picker
+              format='YYYY'
+              mode='year'
+              :value='floor.time'
+              placeholder='选择年份'
+              :open='floor.open'
+              @change='onChange'
+              @openChange='openChange'
+              @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'
+                            placeholder='请选择月' />
           </div>
         </div>
-        <div class="contentView">
-          <div id="echart4" style="width: 550px; height: 600px"></div>
+        <div class='contentView'>
+          <div id='echart4' style='width: 550px; height: 600px'></div>
         </div>
       </div>
-      <div class="rightView">
-        <div class="blockView">
-          <div class="headView">
-            <div class="titleView">故障统计</div>
-            <div class="conditionView">
-              <a-select default-value="week" style="width: 120px;margin-right: 10px">
-                <a-select-option value="month">按月</a-select-option>
-                <a-select-option value="year">按年</a-select-option>
+      <div class='rightView'>
+        <div class='blockView'>
+          <div class='headView'>
+            <div class='titleView'>故障统计</div>
+            <div class='conditionView'>
+              <a-select default-value='week' 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 placeholder='请选择时间' />
             </div>
           </div>
-          <div class="contentView">
-            <div id="echart5" style="width: 700px; height: 327px"></div>
+          <div class='contentView'>
+            <div id='echart5' style='width: 700px; height: 327px'></div>
           </div>
         </div>
-        <div class="blockView">
-          <div class="headView">
-            <div class="titleView">故障类型</div>
-            <div class="conditionView">
-              <a-select default-value="week" style="width: 120px;margin-right: 10px">
-                <a-select-option value="month">按月</a-select-option>
-                <a-select-option value="year">按年</a-select-option>
+        <div class='blockView'>
+          <div class='headView'>
+            <div class='titleView'>故障类型</div>
+            <div class='conditionView'>
+              <a-select default-value='week' 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 placeholder='请选择时间' />
             </div>
           </div>
-          <div class="contentView">
-            <div id="echart6" style="width: 700px; height: 327px"></div>
+          <div class='contentView'>
+            <div id='echart6' style='width: 700px; height: 327px'></div>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="tableView">
-      <div class="headView">
-        <div class="titleView">故障统计</div>
-        <div class="conditionView">
-          <a-select default-value="week" 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>
+    <div class='tableView'>
+      <div class='headView'>
+        <div class='titleView'>故障统计</div>
+        <div class='conditionView'>
+          <a-select default-value='week' 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 placeholder='请选择时间' />
         </div>
       </div>
-      <div class="contentView">
+      <div class='contentView'>
         <a-table
-          :columns="columns"
-          :data-source="loadData"
-          showPagination="true"
-          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          :columns='columns'
+          :data-source='loadData'
+          showPagination='true'
+          :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
 
         >
         </a-table>
@@ -173,7 +185,7 @@ import { repairAdminStats, repairStats, floorStats } from '@/api/admin/repair/re
 
 export default {
   name: 'RepairStatistics',
-  data () {
+  data() {
     return {
       type: '',
       adminStatsCount: [],
@@ -186,6 +198,12 @@ export default {
       queryParam: {},
       selectedRowKeys: [],
       selectedRows: [],
+      //
+      floor: {
+        type: '',
+        time: '',
+        open: false
+      },
       // 表头
       columns: [
         {
@@ -233,7 +251,7 @@ export default {
       ]
     }
   },
-  mounted () {
+  mounted() {
     this.adminStats()
     this.repairCount()
     this.getfloorStats()
@@ -257,12 +275,34 @@ export default {
     })
   },
   methods: {
-    adminStats () {
+    // 使用openChange事件控制日期下拉面板显示与收起
+    openChange(open) {
+      console.log('openChange', open)
+      this.floor.open = open
+    },
+    // 使用panelChange事件控制选中年份的方法
+    panelChange(value) {
+      console.log('panelChange', value)
+      // 接收panelChange返回的值
+      this.floor.time = value
+      this.floor.open = false
+      console.log('this.floor.time', new Date(this.floor.time))
+    },
+    // 选择-楼层负责人情况
+    selectFloor(value, option) {
+      console.log('selectFloor', value)
+      this.floor.type = value
+    },
+    clickFloor(a, c) {
+      console.log('clickFloor', a, c)
+    },
+
+    adminStats() {
       repairAdminStats().then(res => {
         this.adminStatsCount = res.repairAdminStats
       })
     },
-    getYearCount () {
+    getYearCount() {
       this.type = 'year'
       repairStats().then(res => {
         this.repairStatsCount = res.currentYear.stats
@@ -286,7 +326,7 @@ export default {
         }, this.pj)
       })
     },
-    repairCount () {
+    repairCount() {
       repairStats().then(res => {
         this.type = 'month'
 
@@ -313,17 +353,17 @@ export default {
       })
     },
     // 楼层负责人情况
-    getfloorStats () {
+    getfloorStats() {
       floorStats().then(res => {
         console.log(res)
       })
     },
 
-    onSelectChange (selectedRowKeys, selectedRows) {
+    onSelectChange(selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys
       this.selectedRows = selectedRows
     },
-    createEchartCake (id, legend, data) {
+    createEchartCake(id, legend, data) {
       console.log(data)
       // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(document.getElementById(id))
@@ -365,7 +405,7 @@ export default {
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option)
     },
-    createEchartLine (id) {
+    createEchartLine(id) {
       // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(document.getElementById(id))
       let option = {
@@ -409,7 +449,7 @@ export default {
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option)
     },
-    createColumnEcharrt (id) {
+    createColumnEcharrt(id) {
       // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(document.getElementById(id))
       // There should not be negative values in rawData