From 423f2ff262c0410e57997773cdef93d7d8283e89 Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Tue, 26 Nov 2024 09:17:19 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=A4=A7=E5=B1=8F=E5=B7=A1?=
 =?UTF-8?q?=E6=9F=A5=E9=87=8C=E7=A8=8B=E6=96=B0=E5=A2=9E=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E7=BB=B4=E5=BA=A6=EF=BC=8C=E9=A6=96=E9=A1=B5=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E7=BB=B4=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../overview-components/patrol-order.vue      | 188 ++++++++++++------
 src/views/index-components/daily-index.vue    | 125 ++++--------
 src/views/index-components/disease-index.vue  |  36 +++-
 src/views/index-components/road-index.vue     |  49 ++++-
 src/views/index.vue                           |   7 +-
 5 files changed, 242 insertions(+), 163 deletions(-)

diff --git a/src/views/big-screen/overview-components/patrol-order.vue b/src/views/big-screen/overview-components/patrol-order.vue
index 951884f..b56c54f 100644
--- a/src/views/big-screen/overview-components/patrol-order.vue
+++ b/src/views/big-screen/overview-components/patrol-order.vue
@@ -32,20 +32,32 @@
       @close="screenCancel"
     >
       <div class="patrol-content">
-        <el-select
-          :popper-append-to-body="false"
-          v-model="companySelect"
-          @change="changeSelect"
-          clearable
-          placeholder="请选择分公司"
-        >
-          <el-option
-            v-for="item in companyList"
-            :key="`${item.name}-${item.index}`"
-            :label="item.name"
-            :value="item.name"
-          />
-        </el-select>
+        <div class="patrol-select">
+          <el-select
+            :popper-append-to-body="false"
+            v-model="companySelect"
+            @change="changeSelect"
+            clearable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in companyList"
+              :key="`${item.name}-${item.index}`"
+              :label="item.name"
+              :value="item.name"
+            />
+          </el-select>
+          <el-radio-group
+            v-model="checkCycle"
+            class="screen-checkBox"
+            size="mini"
+            @change="changCycle"
+          >
+            <el-radio-button label="day">今日</el-radio-button>
+            <el-radio-button label="nouth">本月</el-radio-button>
+            <el-radio-button label="year">本年</el-radio-button>
+          </el-radio-group>
+        </div>
         <div ref="patrolChart" class="dialog-div"></div>
       </div>
     </el-dialog>
@@ -59,6 +71,8 @@ export default {
   name: "PatrolOrder",
   data() {
     return {
+      // 时间选择
+      checkCycle: "day",
       // 累计里程数据
       patrolObject: {},
       // 弹窗显隐控制
@@ -75,7 +89,11 @@ export default {
     this.getData();
   },
   methods: {
-    /* 获取巡查里程数据 */
+    /**
+     * @description: 获取巡查里程数据
+     * @param {*}
+     * @return {*}
+     */
     getData() {
       getMileage().then(({ code, data }) => {
         if (code === 200) {
@@ -84,7 +102,11 @@ export default {
       });
     },
 
-    /* 累计里程修改 */
+    /**
+     * @description: 累计里程修改
+     * @param {*}
+     * @return {*}
+     */
     formatNumber(num) {
       if (num >= 100000000) {
         // 超过1亿显示 x.xx亿
@@ -98,7 +120,11 @@ export default {
       }
     },
 
-    /* 累计时长修改 */
+    /**
+     * @description: 累计时长修改
+     * @param {*}
+     * @return {*}
+     */
     formatTime(num) {
       if (num >= 100000000) {
         // 超过1亿显示 x.xx亿
@@ -112,13 +138,21 @@ export default {
       }
     },
 
-    /* 打开弹窗方法 */
+    /**
+     * @description: 打开弹窗方法
+     * @param {*}
+     * @return {*}
+     */
     showDetail() {
       this.showDialogVisible = true;
       this.getChartData();
     },
 
-    /* 选择框绑定值修改 */
+    /**
+     * @description: 选择框绑定值修改
+     * @param {*}
+     * @return {*}
+     */
     changeSelect(value) {
       this.echartData = this.echartList.filter((item) => {
         if (value) {
@@ -131,9 +165,22 @@ export default {
       });
     },
 
-    /* 请求弹窗数据 */
+    /**
+     * @description: 时间选择修改
+     * @param {*}
+     * @return {*}
+     */
+    changCycle() {
+      this.getChartData();
+    },
+
+    /**
+     * @description: 请求弹窗数据
+     * @param {*}
+     * @return {*}
+     */
     getChartData() {
-      getMileageDetail().then(({ code, data }) => {
+      getMileageDetail({ dateType: this.checkCycle }).then(({ code, data }) => {
         if (code === 200) {
           this.companyList = data.map((item, index) => {
             return {
@@ -150,7 +197,11 @@ export default {
       });
     },
 
-    /* 绘制echart图 */
+    /**
+     * @description: 绘制echart图
+     * @param {*}
+     * @return {*}
+     */
     drawChart() {
       if (this.$refs.patrolChart) {
         const xData = this.echartData.map((item) => {
@@ -313,7 +364,11 @@ export default {
       }
     },
 
-    /* 弹窗关闭 */
+    /**
+     * @description: 弹窗关闭
+     * @param {*}
+     * @return {*}
+     */
     screenCancel() {
       this.showDialogVisible = false;
     },
@@ -357,54 +412,73 @@ export default {
   height: 30rem;
   padding: 0 2rem;
 
-  ::v-deep .el-select {
-    width: 12rem;
+  .patrol-select {
+    width: 100%;
+    height: 7%;
+    display: flex;
+    justify-content: space-between;
 
-    .el-input .el-select__caret {
-      line-height: 1.5rem;
-    }
+    ::v-deep .el-select {
+      width: 12rem;
 
-    .el-input--medium .el-input__inner {
-      height: 1.5rem;
-      background-color: transparent;
-      color: #89c5e8;
-      border-color: #6991cd;
-    }
+      .el-input .el-select__caret {
+        line-height: 1.5rem;
+      }
 
-    .el-select-dropdown {
-      background-color: #102649;
-      border-color: #08204f;
-      .el-scrollbar {
-        .el-select-dropdown__wrap {
-          .el-scrollbar__view {
-            .el-select-dropdown__item {
-              color: #aaabb8;
+      .el-input--medium .el-input__inner {
+        height: 1.5rem;
+        background-color: transparent;
+        color: #89c5e8;
+        border-color: #6991cd;
+      }
+
+      .el-select-dropdown {
+        background-color: #102649;
+        border-color: #08204f;
+        .el-scrollbar {
+          .el-select-dropdown__wrap {
+            .el-scrollbar__view {
+              .el-select-dropdown__item {
+                color: #aaabb8;
+              }
+
+              .el-select-dropdown__item:hover {
+                background-color: #2b4c7e;
+              }
+
+              .el-select-dropdown__item.selected {
+                background-color: #2b4c7e;
+              }
+
+              .el-select-dropdown__item.hover {
+                background-color: #2b4c7e;
+              }
             }
 
-            .el-select-dropdown__item:hover {
-              background-color: #2b4c7e;
+            .el-select-dropdown__list {
+              background-color: #102649;
             }
-
-            .el-select-dropdown__item.selected {
-              background-color: #2b4c7e;
-            }
-
-            .el-select-dropdown__item.hover {
-              background-color: #2b4c7e;
-            }
-          }
-
-          .el-select-dropdown__list {
-            background-color: #102649;
           }
         }
       }
     }
+
+    ::v-deep .screen-checkBox {
+      .el-radio-button__inner {
+        background-color: transparent;
+        padding: 0.3rem;
+        border-color: #1cb6ff;
+      }
+
+      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+        color: #1cb6ff;
+      }
+    }
   }
 
   .dialog-div {
     width: 100%;
-    height: 100%;
+    height: 93%;
   }
 }
 
diff --git a/src/views/index-components/daily-index.vue b/src/views/index-components/daily-index.vue
index 54802af..ec5fa68 100644
--- a/src/views/index-components/daily-index.vue
+++ b/src/views/index-components/daily-index.vue
@@ -9,7 +9,14 @@
 
 <template>
   <div class="content">
-    <div class="title">日常巡查</div>
+    <div class="title">
+      <span>日常巡查</span>
+      <el-radio-group v-model="checkCycle" size="mini" @change="getData">
+        <el-radio-button label="day">今日</el-radio-button>
+        <el-radio-button label="nouth">本月</el-radio-button>
+        <el-radio-button label="year">本年</el-radio-button>
+      </el-radio-group>
+    </div>
     <div class="daily-content">
       <div class="left">
         <div class="left-div">
@@ -43,6 +50,8 @@ export default {
   name: "DailyIndex",
   data() {
     return {
+      // 巡查周期
+      checkCycle: "day",
       // 巡查里程
       mileage: 0,
       // 覆盖道路数
@@ -55,7 +64,11 @@ export default {
     this.getData();
   },
   methods: {
-    /* 处理数据 */
+    /**
+     * @description: 处理数据
+     * @param {*}
+     * @return {*}
+     */
     formatNumber(num) {
       if (num >= 100000000) {
         // 超过1亿显示 x.xx亿
@@ -69,16 +82,19 @@ export default {
       }
     },
 
-    /* 获取数据 */
+    /**
+     * @description: 获取数据
+     * @param {*}
+     * @return {*}
+     */
     getData() {
-      getTaskToday().then(({ code, data }) => {
+      getTaskToday({ dateType: this.checkCycle }).then(({ code, data }) => {
         if (code === 200) {
           this.mileage = data.xclc;
           this.roadNum = data.fgdlts;
           this.diseaseChart = data.xclcbhqs;
           this.roadChart = data.dlxzbhfb;
           this.$nextTick(() => {
-            // this.drawLeftChart();
             this.drawTrendChart();
             this.drawDistributionChart();
           });
@@ -86,7 +102,11 @@ export default {
       });
     },
 
-    /* 绘制病害趋势柱状图 */
+    /**
+     * @description: 绘制病害趋势柱状图
+     * @param {*}
+     * @return {*}
+     */
     drawTrendChart() {
       const xData = this.diseaseChart.map((item) => {
         return item.label;
@@ -246,7 +266,11 @@ export default {
       }
     },
 
-    /* 绘制病害分布柱状图 */
+    /**
+     * @description: 绘制病害分布柱状图
+     * @param {*}
+     * @return {*}
+     */
     drawDistributionChart() {
       const xData = this.roadChart.map((item) => {
         return item.label;
@@ -402,87 +426,6 @@ export default {
         });
       }
     },
-
-    /* 绘制覆盖率饼图 */
-    drawLeftChart() {
-      if (this.$refs.rateChart) {
-        const chart = echarts.init(this.$refs.rateChart);
-        const current = 45;
-        chart.setOption({
-          // color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
-          title: [
-            // 中心比例
-            {
-              text: "80%",
-              x: "center",
-              y: "52%",
-              textStyle: {
-                fontSize: 20,
-                color: "#444",
-                fontWeight: "bold",
-              },
-            },
-            {
-              text: "覆盖率",
-              x: "center",
-              y: "10%",
-              textStyle: {
-                fontSize: 14,
-              },
-            },
-          ],
-          polar: {
-            center: ["50%", "60%"],
-            radius: ["40%", "58%"],
-          },
-          angleAxis: {
-            max: 100,
-            show: false,
-          },
-          radiusAxis: {
-            type: "category",
-            show: true,
-            axisLabel: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-          },
-          series: [
-            {
-              data: [80],
-              name: "",
-              type: "bar",
-              roundCap: true,
-              showBackground: true,
-              backgroundStyle: {
-                color: "#BDD5F4",
-              },
-              coordinateSystem: "polar",
-              itemStyle: {
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                  {
-                    offset: 0,
-                    color: "#005DCF",
-                  },
-                  {
-                    offset: 1,
-                    color: "#00CCFF",
-                  },
-                ]),
-              },
-            },
-          ],
-        });
-        window.addEventListener("resize", () => {
-          chart.resize();
-        });
-      }
-    },
   },
 };
 </script>
@@ -498,11 +441,15 @@ export default {
     height: 10%;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     padding-left: 3rem;
-    font-family: "DouYu";
     background: url("../../assets/index/div-title.png") no-repeat;
     background-size: 5%;
     background-position: 0 30%;
+
+    span {
+      font-family: "DouYu";
+    }
   }
 
   .daily-content {
diff --git a/src/views/index-components/disease-index.vue b/src/views/index-components/disease-index.vue
index 6fbc266..d5d40fd 100644
--- a/src/views/index-components/disease-index.vue
+++ b/src/views/index-components/disease-index.vue
@@ -9,7 +9,14 @@
 
 <template>
   <div class="content">
-    <div class="title">病害识别</div>
+    <div class="title">
+      <span>病害识别</span>
+      <el-radio-group v-model="checkCycle" size="mini" @change="changCycle">
+        <el-radio-button label="day">今日</el-radio-button>
+        <el-radio-button label="nouth">本月</el-radio-button>
+        <el-radio-button label="year">本年</el-radio-button>
+      </el-radio-group>
+    </div>
     <div class="disease-content">
       <div class="left">
         <div>
@@ -67,10 +74,8 @@ export default {
   },
   data() {
     return {
-      // 下拉框数据绑定
-      diseaseType: "",
-      // 下拉框数据
-      diseaseOptions: [],
+      // 巡查周期
+      checkCycle: "day",
       // 病害总数
       total: 0,
       // 新增病害数
@@ -114,18 +119,27 @@ export default {
     this.getBottomData();
   },
   methods: {
+    /**
+     * @description: 切换巡查周期事件
+     * @param {*}
+     * @return {*}
+     */
+    changCycle() {
+      this.getChartData();
+      this.getBottomData();
+    },
+
     /**
      * @description: 获取上部分echart图数据
      * @param {*} val
      * @return {*}
      */
     getChartData() {
-      getDefectLog().then(({ code, data }) => {
+      getDefectLog({ dateType: this.checkCycle }).then(({ code, data }) => {
         if (code === 200) {
           this.statisticsData = data;
           this.$nextTick(() => {
             this.drawStatisticsChart();
-            // this.drawDistributionChart();
           });
         }
       });
@@ -137,7 +151,7 @@ export default {
      * @return {*}
      */
     getBottomData() {
-      getTotalList().then(({ code, data }) => {
+      getTotalList({ dateType: this.checkCycle }).then(({ code, data }) => {
         if (code === 200) {
           this.total = data.total;
           this.newTotal = data.today;
@@ -403,11 +417,15 @@ export default {
     height: 10%;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     padding-left: 3rem;
-    font-family: "DouYu";
     background: url("../../assets/index/div-title.png") no-repeat;
     background-size: 5%;
     background-position: 0 30%;
+
+    span {
+      font-family: "DouYu";
+    }
   }
 
   .disease-content {
diff --git a/src/views/index-components/road-index.vue b/src/views/index-components/road-index.vue
index 8e827f2..01f9a03 100644
--- a/src/views/index-components/road-index.vue
+++ b/src/views/index-components/road-index.vue
@@ -10,7 +10,14 @@
 
 <template>
   <div class="content">
-    <div class="title">公路资产</div>
+    <div class="title">
+      <span>公路资产</span>
+      <el-radio-group v-model="checkCycle" size="mini" @change="changCycle">
+        <el-radio-button label="day">今日</el-radio-button>
+        <el-radio-button label="nouth">本月</el-radio-button>
+        <el-radio-button label="year">本年</el-radio-button>
+      </el-radio-group>
+    </div>
     <div class="top-div">
       <a>累计公路资产总数</a>
       <span v-for="(item, index) in roadNum" :key="`top-span-${index}`">{{
@@ -45,6 +52,8 @@ export default {
   name: "RoadIndex",
   data() {
     return {
+      // 巡查周期
+      checkCycle: "day",
       // 累计公路资产总数
       roadNum: [],
       // 中间循环数据
@@ -58,9 +67,23 @@ export default {
     this.getBottomData();
   },
   methods: {
-    /* 获取顶端数据 */
+    /**
+     * @description: 切换巡查周期事件
+     * @param {*}
+     * @return {*}
+     */
+    changCycle() {
+      this.getTopData();
+      this.getBottomData();
+    },
+
+    /**
+     * @description: 获取顶端数据
+     * @param {*}
+     * @return {*}
+     */
     getTopData() {
-      getEquipment().then(({ code, data }) => {
+      getEquipment({ dateType: this.checkCycle }).then(({ code, data }) => {
         if (code === 200) {
           this.roadNum = String(data.count).split("");
           this.middleList = data.sacle;
@@ -68,9 +91,13 @@ export default {
       });
     },
 
-    /* 获取底部echart数据 */
+    /**
+     * @description: 获取底部echart数据
+     * @param {*}
+     * @return {*}
+     */
     getBottomData() {
-      getEquipmentLog().then(({ code, data }) => {
+      getEquipmentLog({ dateType: this.checkCycle }).then(({ code, data }) => {
         if (code === 200) {
           this.roadChartData = data;
           this.$nextTick(() => {
@@ -80,7 +107,11 @@ export default {
       });
     },
 
-    /* 绘制echart图 */
+    /**
+     * @description: 绘制echart图
+     * @param {*}
+     * @return {*}
+     */
     drawRoadChart() {
       if (this.$refs.roadChart) {
         const xData = this.roadChartData.map((item) => {
@@ -247,10 +278,14 @@ export default {
     display: flex;
     align-items: center;
     padding-left: 3rem;
-    font-family: "DouYu";
+    justify-content: space-between;
     background: url("../../assets/index/div-title.png") no-repeat;
     background-size: 5%;
     background-position: 0 30%;
+
+    span {
+      font-family: "DouYu";
+    }
   }
 
   .top-div {
diff --git a/src/views/index.vue b/src/views/index.vue
index adc0007..97b9696 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -7,7 +7,7 @@
  * @Description: 系统首页
 -->
 <template>
-  <div class="app-container">
+  <div class="app-container" v-loading="loading">
     <fssm-scroll :showBar="false">
       <div class="top-content">
         <div
@@ -64,6 +64,8 @@ export default {
     return {
       // 顶栏循环数据
       topList: [],
+      // 加载状态
+      loading: false,
     };
   },
   created() {
@@ -72,6 +74,7 @@ export default {
   methods: {
     /* 获取顶栏数据 */
     getTopData() {
+      this.loading = true;
       getTotalCount().then(({ code, data }) => {
         if (code === 200) {
           this.topList = [
@@ -81,6 +84,8 @@ export default {
             { name: "绿化待处理问题数", value: data.green, unit: "个" },
           ];
         }
+      }).finally(() => {
+        this.loading = false;
       });
     },
   },