fix：大屏巡查里程新增时间维度，首页增加时间维度

src/views/big-screen/overview-components/patrol-order.vue

@@ -32,12 +32,13 @@
       @close="screenCancel"
     >
       <div class="patrol-content">
+        <div class="patrol-select">
           <el-select
             :popper-append-to-body="false"
             v-model="companySelect"
             @change="changeSelect"
             clearable
-          placeholder="请选择分公司"
+            placeholder="请选择"
           >
             <el-option
               v-for="item in companyList"
@@ -46,6 +47,17 @@
               :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,6 +412,12 @@ export default {
   height: 30rem;
   padding: 0 2rem;
 
+  .patrol-select {
+    width: 100%;
+    height: 7%;
+    display: flex;
+    justify-content: space-between;
+
     ::v-deep .el-select {
       width: 12rem;
 
@@ -402,9 +463,22 @@ export default {
       }
     }
 
+    ::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%;
   }
 }
 

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 {

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: "",
+      checkCycle: "day",
-      // 下拉框数据
-      diseaseOptions: [],
       // 病害总数
       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 {

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 {

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;
       });
     },
   },