chore: 首页调整

src/api/powerdistribution/home.js

@@ -18,6 +18,15 @@ export function getWorkNumStatisticsHome(params) {
   });
 }
 
+// 根据作业单位分类查询作业数量汇总
+export function getWorkNumStatisticsHomeChild(params) {
+  return request({
+    url: "/power/workPlan/getWorkNumStatisticsHomeChild",
+    method: "get",
+    params,
+  });
+}
+
 // 查询风险汇总-日
 export function getWorkRiskStatistics(date) {
   return request({

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

@@ -36,7 +36,65 @@
     </div>
 
     <div style="display: flex; justify-content: space-between; height: 100%">
-      <div id="hy-map" style="width: 100%; height: 100%"></div>
+      <div class="map-data-list" v-if="currentMap == '衡阳市'">
+        <div
+          class="data-item"
+          v-for="(key, i) in Object.keys(dataMap)"
+          :key="i"
+        >
+          <template v-if="type == '1'">
+            {{ key }}-作业数<span class="orange">{{
+              dataMap[key].planSum || 0
+            }}</span>
+            取消数
+            <span class="orange">{{ dataMap[key].cancelSum || 0 }}</span>
+            执行率
+            <span class="orange">{{ dataMap[key].executeRatio || "0%" }}</span>
+          </template>
+          <template v-if="type == '2'">
+            {{ key }}-风险作业数<span class="orange">{{
+              dataMap[key].riskSum || 0
+            }}</span>
+            三级作业数
+            <span class="orange">{{ dataMap[key].planSum3 || 0 }}</span>
+            四级作业数
+            <span class="orange">{{ dataMap[key].planSum4 || 0 }}</span>
+            五级作业数
+            <span class="orange">{{ dataMap[key].planSum5 || 0 }}</span>
+          </template>
+        </div>
+      </div>
+      <div
+        class="map-data-list"
+        v-if="currentMap != '衡阳市' && childDataList.length"
+      >
+        <div class="data-item" v-for="(ite, i) in childDataList" :key="i">
+          <template v-if="type == '1'">
+            {{ ite.constOrgNm }}-作业数<span class="orange">{{
+              ite.planSum || 0
+            }}</span>
+            取消数
+            <span class="orange">{{ ite.cancelSum || 0 }}</span>
+            执行率
+            <span class="orange">{{ ite.executeRatio || "0%" }}</span>
+          </template>
+          <template v-if="type == '2'">
+            {{ ite.constOrgNm }}-风险作业数<span class="orange">{{
+              ite.riskSum || 0
+            }}</span>
+            三级作业数
+            <span class="orange">{{ ite.planSum3 || 0 }}</span>
+            四级作业数
+            <span class="orange">{{ ite.planSum4 || 0 }}</span>
+            五级作业数
+            <span class="orange">{{ ite.planSum5 || 0 }}</span>
+          </template>
+        </div>
+      </div>
+      <div
+        id="hy-map"
+        style="width: 100%; height: 100%; margin-left: 20px"
+      ></div>
     </div>
   </div>
 </template>
@@ -58,7 +116,10 @@ const mapEnum = {
   蒸湘区: require("./蒸湘区.json"),
   珠晖区: require("./珠晖区.json"),
 };
-import { getWorkNumStatisticsHome } from "@/api/powerdistribution/home";
+import {
+  getWorkNumStatisticsHome,
+  getWorkNumStatisticsHomeChild,
+} from "@/api/powerdistribution/home";
 import moment from "moment";
 export default {
   name: "map",
@@ -71,7 +132,9 @@ export default {
       loading: true,
       currentMap: "衡阳市",
       dataMap: {},
+      childDataList: [],
       type: "1",
+      timeout: null,
     };
   },
   mounted() {
@@ -93,7 +156,8 @@ export default {
       Object.keys(mapEnum).forEach((key) => {
         (data || []).map((ite) => {
           if (key.includes(ite.company)) {
-            this.dataMap[key] = { ...ite };
+            this.$set(this.dataMap, key, { ...ite });
+            // this.dataMap[key] = { ...ite };
           }
         });
       });
@@ -136,73 +200,73 @@ export default {
           alwaysShowContent: true,
           formatter: (params) => {
             let str = "";
-            Object.keys(this.dataMap).forEach((key) => {
-              if (this.type == "1") {
-                str +=
-                  key +
-                  "-作业数" +
-                  `<span class="orange">${
-                    this.dataMap[key]?.planSum || 0
-                  }</span> ` +
-                  `取消数 <span class="orange">${
-                    this.dataMap[key]?.cancelSum || 0
-                  }</span> ` +
-                  `执行率 <span class="orange">${
-                    this.dataMap[key]?.executeRatio || "0%"
-                  }</span> <br/>`;
-              }
-              if (this.type == "2") {
-                str +=
-                  key +
-                  "-风险作业数" +
-                  `<span class="orange">${
-                    this.dataMap[key]?.riskSum || 0
-                  }</span> ` +
-                  `三级作业数 <span class="orange">${
-                    this.dataMap[key]?.planSum3 || 0
-                  }</span> ` +
-                  `四级作业数 <span class="orange">${
-                    this.dataMap[key]?.planSum4 || 0
-                  }</span> ` +
-                  `五级作业数 <span class="orange">${
-                    this.dataMap[key]?.planSum5 || 0
-                  }</span> <br/>`;
-              }
-            });
+            // Object.keys(this.dataMap).forEach((key) => {
+            //   if (this.type == "1") {
+            //     str +=
+            //       key +
+            //       "-作业数" +
+            //       `<span class="orange">${
+            //         this.dataMap[key]?.planSum || 0
+            //       }</span> ` +
+            //       `取消数 <span class="orange">${
+            //         this.dataMap[key]?.cancelSum || 0
+            //       }</span> ` +
+            //       `执行率 <span class="orange">${
+            //         this.dataMap[key]?.executeRatio || "0%"
+            //       }</span> <br/>`;
+            //   }
+            //   if (this.type == "2") {
+            //     str +=
+            //       key +
+            //       "-风险作业数" +
+            //       `<span class="orange">${
+            //         this.dataMap[key]?.riskSum || 0
+            //       }</span> ` +
+            //       `三级作业数 <span class="orange">${
+            //         this.dataMap[key]?.planSum3 || 0
+            //       }</span> ` +
+            //       `四级作业数 <span class="orange">${
+            //         this.dataMap[key]?.planSum4 || 0
+            //       }</span> ` +
+            //       `五级作业数 <span class="orange">${
+            //         this.dataMap[key]?.planSum5 || 0
+            //       }</span> <br/>`;
+            //   }
+            // });
             // const v = Array.isArray(params.value)
             //   ? params.value[2]
             //   : params.value;
             if (this.type == "2") {
-              return this.currentMap == "衡阳市"
-                ? str
-                : params.name +
-                    "-风险作业数 " +
-                    `<span class="orange">${
-                      params.data.value?.riskSum || 0
-                    }</span> ` +
-                    `三级作业数 <span class="orange">${
-                      params.data.value?.planSum3 || 0
-                    }</span> ` +
-                    `四级作业数 <span class="orange">${
-                      params.data.value?.planSum4 || 0
-                    }</span> ` +
-                    `五级作业数 <span class="orange">${
-                      params.data.value?.planSum5 || 0
-                    }</span> <br/>`;
+              return (
+                params.name +
+                "-风险作业数 " +
+                `<span class="orange">${
+                  params.data.value?.riskSum || 0
+                }</span> ` +
+                `三级作业数 <span class="orange">${
+                  params.data.value?.planSum3 || 0
+                }</span> ` +
+                `四级作业数 <span class="orange">${
+                  params.data.value?.planSum4 || 0
+                }</span> ` +
+                `五级作业数 <span class="orange">${
+                  params.data.value?.planSum5 || 0
+                }</span> <br/>`
+              );
             }
-            return this.currentMap == "衡阳市"
-              ? str
-              : params.name +
-                  "-作业数 " +
-                  `<span class="orange">${
-                    params.data.value?.planSum || 0
-                  }</span> ` +
-                  `取消数 <span class="orange">${
-                    params.data.value?.cancelSum || 0
-                  }</span> ` +
-                  `执行率 <span class="orange">${
-                    params.data.value?.executeRatio || "0%"
-                  }</span> <br/>`;
+            return (
+              params.name +
+              "-作业数 " +
+              `<span class="orange">${
+                params.data.value?.planSum || 0
+              }</span> ` +
+              `取消数 <span class="orange">${
+                params.data.value?.cancelSum || 0
+              }</span> ` +
+              `执行率 <span class="orange">${
+                params.data.value?.executeRatio || "0%"
+              }</span> <br/>`
+            );
           },
         },
         // visualMap: {
@@ -328,15 +392,36 @@ export default {
       window.addEventListener("resize", () => {
         myChart.resize();
       });
-      myChart.on("click", (params) => {
-        this.currentMap = params.name;
-        this.initMap(mapEnum[params.name]);
-      });
-      myChart.dispatchAction({
-        type: "showTip",
-        seriesIndex: 0,
-        dataIndex: 3,
-      });
+      myChart.on(
+        "click",
+        this.debounce((params) => {
+          this.currentMap = params.name;
+          this.initMap(mapEnum[params.name]);
+          const _params = {
+            startDate: this.dateRange[0],
+            endDate: this.dateRange[1],
+            submitOrgNm: params.data.value.submitOrgNm,
+          };
+          getWorkNumStatisticsHomeChild(_params).then((res) => {
+            this.childDataList = res || [];
+          });
+        }, 100)
+      );
+      // myChart.dispatchAction({
+      //   type: "showTip",
+      //   seriesIndex: 0,
+      //   dataIndex: 3,
+      // });
+    },
+    debounce(func, wait) {
+      return function () {
+        const context = this;
+        const args = arguments;
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          func.apply(context, args);
+        }, wait);
+      };
     },
   },
 };
@@ -355,4 +440,16 @@ export default {
   align-items: center;
   justify-content: space-between;
 }
+.map-data-list {
+  position: absolute;
+  z-index: 999;
+  left: 5px;
+  bottom: 5px;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 8px 5px;
+  .data-item {
+    font-size: 14px;
+  }
+}
 </style>