chore: 1

src/api/powerdistribution/home.js

@@ -10,10 +10,9 @@ export function getWorkNumStatistics(params) {
 }
 
 // 查询风险汇总-日
-export function getWorkRiskStatistics(params) {
+export function getWorkRiskStatistics(date) {
   return request({
-    url: "/power/workPlan/getWorkRiskStatistics",
+    url: `/power/workPlan/getWorkRiskStatistics?date=${date}`,
     method: "get",
-    params,
   });
 }

src/views/home/components/PointsRanking/index.vue

@@ -163,7 +163,7 @@ export default {
 
 <style lang="scss" scoped>
 .c-title {
-  border-left: 4px solid rgb(64, 158, 255);
+  border-left: 4px solid #5a6fc0;
   padding-left: 10px;
   color: #fff;
 }

src/views/home/components/RiskIdentification/index.vue

@@ -1,7 +1,18 @@
 <template>
-  <div class="w-full h-full">
-    <div class="c-title">
+  <div class="w-full h-full" v-loading="loading">
+    <div class="c-title flex-center">
       <span>风险辩识</span>
+      <el-date-picker
+        style="width: 140px"
+        size="mini"
+        v-model="queryParams.date"
+        format="yyyy-MM-dd"
+        value-format="yyyyMMdd"
+        placeholder="请选择"
+        :clearable="false"
+        @change="initEcharts"
+      >
+      </el-date-picker>
     </div>
     <div
       ref="barChart2"
@@ -13,6 +24,8 @@
 
 <script>
 import * as echarts from "echarts";
+import moment from "moment";
+import { getWorkRiskStatistics } from "@/api/powerdistribution/home";
 export default {
   props: {
     chartOptions: {
@@ -28,20 +41,26 @@ export default {
       default: "200px",
     },
   },
+  data() {
+    return {
+      loading: false,
+      queryParams: {
+        date: moment(new Date()).format("YYYYMMDD"),
+      },
+    };
+  },
   mounted() {
     this.initEcharts();
   },
-  watch: {
-    chartOptions: {
-      handler(newVal, oldVal) {
-        this.initEcharts();
-      },
-      // 这里的deep是深度监听，因为我们传递过来的是一个对象
-      deep: true,
-    },
-  },
   methods: {
-    initEcharts() {
+    async initEcharts() {
+      this.loading = true;
+      let data = await getWorkRiskStatistics(this.queryParams.date);
+      this.loading = false;
+      data = (data || []).map((ite) => ({
+        name: ite.riskName,
+        value: ite.riskNum,
+      }));
       let myChart = echarts.getInstanceByDom(
         document.getElementById("barChart2")
       );
@@ -99,7 +118,7 @@ export default {
                 shadowColor: "rgba(0, 0, 0, 0.5)",
               },
             },
-            data: this.chartOptions.data || [],
+            data: data || [],
           },
         ],
       };
@@ -123,8 +142,13 @@ export default {
 
 <style lang="scss" scoped>
 .c-title {
-  border-left: 4px solid rgb(64, 158, 255);
+  border-left: 4px solid #5a6fc0;
   padding-left: 10px;
   color: #fff;
 }
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 </style>

src/views/home/components/TargetSituation/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full">
+  <div class="w-full h-full" v-loading="loading">
     <div class="c-title flex justify-between">
       <span>目标完成情况</span>
       <div>
@@ -370,7 +370,7 @@ export default {
 
 <style lang="scss" scoped>
 .c-title {
-  border-left: 4px solid rgb(64, 158, 255);
+  border-left: 4px solid #5a6fc0;
   padding-left: 10px;
   color: #fff;
 }

src/views/home/components/map/index.vue

@@ -229,7 +229,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .c-title {
-  border-left: 4px solid rgb(64, 158, 255);
+  border-left: 4px solid #5a6fc0;
   padding-left: 10px;
   color: #fff;
 }
@@ -261,4 +261,6 @@ export default {
     }
   }
 }
+::v-deep {
+}
 </style>

src/views/home/index.vue

@@ -16,17 +16,7 @@
       </el-col> -->
       <el-col :span="12" class="h-full-calc">
         <el-card class="h-40">
-          <RiskIdentification
-            v-if="chartOptions1.data && chartOptions1.data.length > 0"
-            :chartOptions="chartOptions1"
-            height="95%"
-          ></RiskIdentification>
-          <div
-            style="text-align: center; color: #fff; line-height: 200px"
-            v-else
-          >
-            暂无数据
-          </div>
+          <RiskIdentification height="95%"></RiskIdentification>
         </el-card>
         <el-card class="h-60 mt-10">
           <TargetSituation height="100%"></TargetSituation>
@@ -41,7 +31,7 @@ import MapHy from "./components/map/index.vue";
 import TargetSituation from "./components/TargetSituation/index.vue";
 import RiskIdentification from "./components/RiskIdentification/index.vue";
 import PointsRanking from "./components/PointsRanking/index.vue";
-import { getWorkRiskStatistics } from "@/api/powerdistribution/home";
+
 export default {
   components: {
     TargetSituation,
@@ -60,22 +50,8 @@ export default {
       },
     };
   },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    async init() {
-      const data1 = await getWorkRiskStatistics();
-      this.chartOptions1.data = (data1 || []).map((ite) => ({
-        name: ite.riskName,
-        value: ite.riskNum,
-      }));
-      this.chartOptions2.data = [120, 200, 150, 80, 70, 110];
-      this.chartOptions2.xData = Array(12)
-        .fill(0)
-        .map((it, i) => `${i + 1}月`);
-    },
-  },
+  mounted() {},
+  methods: {},
 };
 </script>
 <style lang="scss" scoped>
@@ -129,5 +105,29 @@ export default {
     color: white;
     background-color: transparent !important;
   }
+  /* 修改下拉框默认状态下的背景色 */
+  .el-select,
+  .el-date-editor {
+    .el-input__inner {
+      color: #fff !important;
+      background-color: #5a6fc0 !important;
+      border: none !important;
+    }
+  }
+  .el-select-dropdown__list {
+    background-color: #5a6fc0 !important;
+  }
+  .el-range-editor,
+  .el-range-input,
+  .el-range-separator {
+    color: #fff !important;
+    background-color: #5a6fc0 !important;
+    border: none !important;
+  }
+  /* 修改下拉框悬停时的背景色 */
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: #5a6fc0 !important;
+  }
 }
 </style>