1

src/layout/components/AppMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main">
+  <section :class="[$route.path == '/index' ? '' : 'app-main']">
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view v-if="!$route.meta.link" :key="key" />

src/layout/index.vue

@@ -9,16 +9,16 @@
       class="drawer-bg"
       @click="handleClickOutside"
     />
-    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
-<!--    <Menu></Menu>-->
+    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <!--    <Menu></Menu>-->
     <div
       :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
       class="main-container"
     >
       <div :class="{ 'fixed-header': fixedHeader }">
         <Top></Top>
-        <navbar/>
-        <tags-view v-if="needTagsView" />
+        <navbar v-if="$route.path != '/index'" />
+        <tags-view v-if="needTagsView && $route.path != '/index'" />
       </div>
       <app-main />
       <right-panel>
@@ -71,6 +71,9 @@ export default {
       return variables;
     },
   },
+  created() {
+    console.log(this.$route.path, "x");
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });

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

@@ -163,9 +163,9 @@ export default {
 
 <style lang="scss" scoped>
 .c-title {
-  border-left: 4px solid #5a6fc0;
+  border-left: 4px solid #00a4ff;
   padding-left: 10px;
-  color: #fff;
+  color: #00a4ff;
 }
 .ranking-c {
   height: 100%;
@@ -175,6 +175,11 @@ export default {
   .el-table tr {
     background-color: transparent !important;
   }
+  /* 修改表格单元格边框颜色 */
+  .el-table th,
+  .el-table td {
+    border-bottom-color: #02367c !important;
+  }
   .el-table--enable-row-hover .el-table__body tr:hover > td {
     background-color: rgba(11, 42, 96, 0.8) !important;
   }

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

@@ -73,6 +73,7 @@ export default {
         tooltip: {
           trigger: "item",
         },
+        color: ["#0052F1", "#00a4ff"],
         legend: {
           top: "5%",
           left: "center",
@@ -142,9 +143,9 @@ export default {
 
 <style lang="scss" scoped>
 .c-title {
-  border-left: 4px solid #5a6fc0;
+  border-left: 4px solid #00a4ff;
   padding-left: 10px;
-  color: #fff;
+  color: #00a4ff;
 }
 .flex-center {
   display: flex;

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

@@ -0,0 +1,387 @@
+<template>
+  <div class="w-full h-full" v-loading="loading">
+    <div class="c-title flex justify-between">
+      <span>目标完成情况(月)</span>
+      <div>
+        <!-- <el-select
+          size="mini"
+          style="width: 100px; margin-right: 10px"
+          v-model="queryParams.type"
+          @change="dateTypeChange"
+          placeholder="请选择时间纬度"
+        >
+          <el-option label="按年展示" value="reportYear"></el-option>
+          <el-option label="按月展示" value="reportDate"></el-option>
+        </el-select> -->
+
+        <el-date-picker
+          style="width: 90px"
+          size="mini"
+          v-model="queryParams.reportYear"
+          type="year"
+          format="yyyy"
+          value-format="yyyy"
+          placeholder="选择年"
+          :clearable="false"
+          @change="getList"
+        >
+        </el-date-picker>
+        <el-select
+          size="mini"
+          style="width: 100px; margin-left: 10px"
+          v-model="zdlx"
+          @change="dateLxChange"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="(ite, i) in yearTypeList"
+            :key="i"
+            :label="ite.label"
+            :value="ite.key"
+          ></el-option>
+        </el-select>
+        <el-select
+          v-if="queryParams.type == 'reportDate'"
+          size="mini"
+          style="width: 120px; margin-left: 10px"
+          v-model="currentCompany"
+          @change="dateCpChange"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="(ite, i) in cpList"
+            :key="i"
+            :label="ite"
+            :value="ite"
+          ></el-option>
+        </el-select>
+      </div>
+    </div>
+    <!-- <div
+      v-if="queryParams.type == 'reportYear'"
+      ref="barChart"
+      id="barChart"
+      :style="{ height: height, width: width }"
+    ></div> -->
+    <div
+      ref="stopTargetLineRef"
+      id="stopTimeMonth2"
+      :style="{ height: height, width: width }"
+    ></div>
+  </div>
+</template>
+
+<script>
+import moment from "moment/moment";
+import * as echarts from "echarts";
+import TargetLine from "../monthLine.vue";
+import { stopActualList } from "@/api/powerdistribution/power-outage-control";
+export default {
+  components: { TargetLine },
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "200px",
+    },
+  },
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        type: "reportDate",
+        pageNum: 1,
+        pageSize: 10,
+        reportDate: null,
+        reportYear: moment(new Date()).format("yyyy"),
+      },
+      zdlx: 1,
+      dataList: [],
+      loading: false,
+      yearTypeList: [
+        {
+          label: "总目标",
+          key: 1,
+          value: {
+            0: "stopTimeTotal",
+            1: "stopTotalActual",
+            2: "stopTotalRatio",
+          },
+          value2: { 0: "stopTimeMonth", 1: "stopMonth" },
+        },
+        {
+          label: "计划停电目标",
+          key: 2,
+          value: {
+            0: "planStopTimeTotal",
+            1: "planStopTotalActual",
+            2: "planStopTotalRatio",
+          },
+          value2: { 0: "planStopTimeMonth", 1: "planStopMonth" },
+        },
+        {
+          label: "故障停电目标",
+          key: 3,
+          value: {
+            0: "errorStopTimeTotal",
+            1: "errorStopTotalActual",
+            2: "errorStopTotalRatio",
+          },
+          value2: { 0: "errorStopTimeMonth", 1: "errorStopMonth" },
+        },
+      ],
+      currentCompany: "",
+      cpList: [],
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    dateCpChange(e) {
+      this.currentCompany = e;
+      if (this.queryParams.type == "reportYear") {
+        // this.initEcharts();
+      } else {
+        this.initEcharts2();
+      }
+    },
+    dateTypeChange(e) {
+      this.queryParams.type = e;
+      this.dataList = [];
+      this.getList();
+    },
+    dateLxChange(e) {
+      this.zdlx = e;
+      if (this.queryParams.type == "reportYear") {
+        // this.initEcharts();
+      } else {
+        this.initEcharts2();
+      }
+    },
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      stopActualList(this.queryParams).then((response) => {
+        this.dataList = response.rows.filter(
+          (ite) => ite.companyName != "总计"
+        );
+        this.cpList = this.dataList.map((ite) => ite.companyName);
+        this.currentCompany = this.cpList ? this.cpList[0] : "";
+        this.loading = false;
+        if (this.queryParams.type == "reportYear") {
+          // this.initEcharts();
+        } else {
+          this.currentCompany = this.dataList
+            ? this.dataList[0].companyName
+            : "";
+          this.initEcharts2();
+        }
+      });
+    },
+    initEcharts() {
+      let myChart = echarts.getInstanceByDom(
+        document.getElementById("barChart")
+      );
+      if (myChart == null) {
+        myChart = echarts.init(document.getElementById("barChart"));
+      }
+      const zdlx = this.yearTypeList.find((ite) => ite.key == this.zdlx).value;
+      const yAxisData = this.dataList.map((ite) => ite.companyName);
+      const targetData = this.dataList.map((ite) => ite[zdlx[0]] || 0);
+      const actualData = this.dataList.map((ite) => ite[zdlx[1]] || 0);
+      const ratioData = this.dataList.map((ite) => ite[zdlx[2]] || "0%");
+      // 指定图表的配置项和数据
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params) {
+            // params 是一个数组，数组中包含每个系列的数据信息
+            let result = "";
+            params.forEach(function (item) {
+              // item 是每一个系列的数据
+              const seriesName = item.seriesName; // 系列名称
+              const value = item.value; // 数据值
+              const marker = item.marker; // 标志图形
+              result += `${marker}${seriesName}: ${value}<br/>`;
+            });
+            result += `${params[0].marker}执行率: ${
+              ratioData[params[0].dataIndex]
+            }`;
+            return result;
+          },
+        },
+        textStyle: {
+          color: "#fff",
+        },
+        legend: {
+          top: "10",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        grid: {
+          left: "2%", //图表距离容器左侧多少距离
+          right: "2%", //图表距离容器右侧侧多少距离
+          bottom: "5%", //图表距离容器上面多少距离
+          top: "10%", //图表距离容器下面多少距离
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: "category",
+          data: yAxisData,
+        },
+        series: [
+          {
+            name: "目标值",
+            type: "bar",
+            data: targetData,
+          },
+          {
+            name: "实际值",
+            type: "bar",
+            data: actualData,
+          },
+        ],
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.clear();
+      myChart.setOption(option, true);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    initEcharts2() {
+      let data = [];
+      let legend = [];
+      let series = [];
+      data = this.dataList.filter(
+        (ite) => ite.companyName == this.currentCompany
+      );
+      console.log(data, "data");
+
+      const zdlx = this.yearTypeList.find((ite) => ite.key == this.zdlx).value2;
+      data.forEach((e, i) => {
+        legend.push(e.companyName);
+        series.push(
+          {
+            name: `${e.companyName}目标值`,
+            type: "line",
+            stack: "Total",
+            data: Array(12)
+              .fill(0)
+              .map((ite, i) => {
+                return (
+                  e[`${zdlx[0]}${i + 1 < 10 ? "0" + (i + 1) : i + 1}`] || 0
+                );
+              }),
+          },
+          {
+            name: `${e.companyName}实际值`,
+            type: "line",
+            stack: "Total",
+            data: Array(12)
+              .fill(0)
+              .map((ite, i) => {
+                return (
+                  e[`${zdlx[1]}${i + 1 < 10 ? "0" + (i + 1) : i + 1}Actual`] ||
+                  0
+                );
+              }),
+          }
+        );
+      });
+      let myChart = echarts.getInstanceByDom(
+        document.getElementById("stopTimeMonth2")
+      );
+      if (myChart == null) {
+        myChart = echarts.init(document.getElementById("stopTimeMonth2"));
+      }
+      // 指定图表的配置项和数据
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          formatter: function (params) {
+            // params 是一个数组，数组中包含每个系列的数据信息
+            let result = "";
+            params.forEach(function (item, i) {
+              // item 是每一个系列的数据
+              const seriesName = item.seriesName; // 系列名称
+              const value = item.value; // 数据值
+              const marker = item.marker; // 标志图形
+              result += `${marker}${seriesName}: ${value}<br/>`;
+            });
+            const ii = params[0].dataIndex;
+            result += `${params[0].marker}执行率: ${
+              data[0][`${zdlx[1]}${ii + 1 < 10 ? "0" + (ii + 1) : ii + 1}Ratio`]
+            }<br/>`;
+            return result;
+          },
+        },
+        textStyle: {
+          color: "#fff",
+        },
+        color: ["#0052F1", "#00a4ff"],
+        legend: {
+          data: legend,
+          type: "scroll",
+          top: "8%",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        grid: {
+          left: "1%",
+          right: "3%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: Array(12)
+            .fill(0)
+            .map((it, i) => `${i + 1}月`),
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ["#02367c"], // 设置 Y 轴分割线颜色为深灰色
+            },
+          },
+        },
+        series: series,
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.clear();
+      myChart.setOption(option, true);
+      setTimeout(() => {
+        myChart.resize();
+      }, 100);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.c-title {
+  border-left: 4px solid #00a4ff;
+  padding-left: 10px;
+  color: #00a4ff;
+}
+</style>

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

@@ -1,9 +1,9 @@
 <template>
   <div class="w-full h-full" v-loading="loading">
     <div class="c-title flex justify-between">
-      <span>目标完成情况</span>
+      <span>目标完成情况(年)</span>
       <div>
-        <el-select
+        <!-- <el-select
           size="mini"
           style="width: 100px; margin-right: 10px"
           v-model="queryParams.type"
@@ -12,10 +12,10 @@
         >
           <el-option label="按年展示" value="reportYear"></el-option>
           <el-option label="按月展示" value="reportDate"></el-option>
-        </el-select>
+        </el-select> -->
 
         <el-date-picker
-          style="width: 120px"
+          style="width: 90px"
           size="mini"
           v-model="queryParams.reportYear"
           type="year"
@@ -28,7 +28,7 @@
         </el-date-picker>
         <el-select
           size="mini"
-          style="width: 120px; margin-left: 10px"
+          style="width: 100px; margin-left: 10px"
           v-model="zdlx"
           @change="dateLxChange"
           placeholder="请选择"
@@ -218,6 +218,7 @@ export default {
             return result;
           },
         },
+        color: ["#00a4ff", "#0052F1"],
         textStyle: {
           color: "#fff",
         },
@@ -237,6 +238,12 @@ export default {
         xAxis: {
           type: "value",
           boundaryGap: [0, 0.01],
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ["#02367c"], // 设置 Y 轴分割线颜色为深灰色
+            },
+          },
         },
         yAxis: {
           type: "category",
@@ -375,8 +382,8 @@ export default {
 
 <style lang="scss" scoped>
 .c-title {
-  border-left: 4px solid #5a6fc0;
+  border-left: 4px solid #00a4ff;
   padding-left: 10px;
-  color: #fff;
+  color: #00a4ff;
 }
 </style>

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

@@ -15,13 +15,13 @@
       >
       </el-date-picker>
     </div>
-    <div class="flex align-middle">
+    <!-- <div class="flex align-middle">
       <el-button @click="back" type="text" v-if="currentMap != '衡阳市'"
         >返回></el-button
       >
-    </div>
+    </div> -->
     <div style="display: flex; justify-content: space-between; height: 100%">
-      <div id="hy-map" style="width: 100%; height: 97%"></div>
+      <div id="hy-map" style="width: 100%; height: 100%"></div>
       <!--div class="item-container">
         <div class="item" v-for="(ite, i) in itemData" :key="i">
           <div class="val">121</div>
@@ -63,6 +63,7 @@ export default {
       itemData: [{ lable: "作业数量" }],
       currentMap: "",
       mapData: [],
+      dataMap: {},
     };
   },
   mounted() {
@@ -71,7 +72,6 @@ export default {
   methods: {
     async init() {
       await this.getData();
-      this.back();
     },
     async getData() {
       const params = {
@@ -83,6 +83,7 @@ export default {
       Object.keys(mapEnum).forEach((key) => {
         (data || []).map((ite) => {
           if (key.includes(ite.submitOrgNm)) {
+            this.dataMap[key] = ite.workNum ?? 0;
             this.mapData.push({
               name: key,
               value: ite.workNum ?? 0,
@@ -90,10 +91,11 @@ export default {
           }
         });
       });
+      this.initMap();
     },
     back() {
       this.currentMap = "衡阳市";
-      this.initCharts();
+      this.initMap();
     },
     initCharts(json = require("./衡阳市.json")) {
       const chartDom = document.querySelector("#hy-map");
@@ -224,14 +226,158 @@ export default {
         this.initCharts(mapEnum[params.name]);
       });
     },
+    async initMap(json = require("./衡阳市.json")) {
+      var data = [],
+        geoCoordMap = {};
+      json.features.forEach((v) => {
+        data.push({
+          name: v.properties.name,
+          value: this.dataMap[v.properties.name],
+        });
+      });
+
+      var convertData = function (data) {
+        var res = [];
+        for (var i = 0; i < data.length; i++) {
+          var geoCoord = geoCoordMap[data[i].name];
+          if (geoCoord) {
+            res.push({
+              name: data[i].name,
+              value: geoCoord.concat(data[i].value),
+            });
+          }
+        }
+        return res;
+      };
+      const chartDom = document.querySelector("#hy-map");
+      const myChart = echarts.init(chartDom);
+      echarts.registerMap("HK", json);
+      let option = {
+        // backgroundColor: "#041139",
+        tooltip: {
+          trigger: "item",
+          alwaysShowContent: true,
+          formatter: function (params) {
+            return params.name + "<br/>作业数量 " + params.value;
+          },
+        },
+        visualMap: {
+          show: false,
+          seriesIndex: [0],
+          inRange: {
+            color: ["#02367C"],
+          },
+        },
+        geo: [
+          {
+            show: true,
+            map: "HK",
+            zoom: 1.1,
+            roam: false,
+            itemStyle: {
+              normal: {
+                borderColor: "#48B6ED",
+                borderWidth: 5,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "map",
+            mapType: "HK", //自定义扩展图表类型
+            zoom: 1.1,
+            roam: false,
+            label: {
+              normal: {
+                show: true,
+                formatter: "{b}",
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                areaColor: "#02367C",
+                borderColor: "#004096",
+                borderWidth: 1,
+              },
+              emphasis: {
+                areaColor: "#0057C9",
+              },
+            },
+            select: {
+              label: {
+                // 选中区域的label(文字)样式
+                color: "#fff",
+              },
+              itemStyle: {
+                areaColor: "#02367C", // 选中的区域颜色
+              },
+            },
+            data: data,
+          },
+          {
+            name: "点",
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            showEffectOn: "render",
+            rippleEffect: {
+              period: 10,
+              scale: 4,
+              brushType: "fill",
+            },
+            hoverAnimation: true,
+            itemStyle: {
+              normal: {
+                color: "#ffc600",
+                shadowBlur: 10,
+                shadowColor: "#5d6a4f",
+              },
+            },
+            label: {
+              normal: {
+                show: false,
+                formatter: function (parm) {
+                  return parm.value[2];
+                },
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+            zlevel: 6,
+            data: convertData(data),
+          },
+        ],
+      };
+
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+      myChart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        dataIndex: 3,
+      });
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
 .c-title {
-  border-left: 4px solid #5a6fc0;
+  border-left: 4px solid #00a4ff;
   padding-left: 10px;
-  color: #fff;
+  color: #00a4ff;
 }
 .item-container {
   // height: 20%;

src/views/home/index.vue

@@ -1,26 +1,29 @@
 <template>
   <div class="map-container">
     <el-row :gutter="10">
-      <el-col :span="12" class="h-full-calc">
-        <el-card class="h-40">
+      <el-col :span="8" class="h-full-calc">
+        <el-card class="h-48">
           <PointsRanking></PointsRanking>
         </el-card>
-        <el-card class="h-60 mt-10">
+        <!-- <el-card class="h-60 mt-10">
           <MapHy></MapHy>
+        </el-card> -->
+        <el-card class="h-48 mt-10">
+          <RiskIdentification height="100%"></RiskIdentification>
         </el-card>
       </el-col>
-      <!-- <el-col :span="8" class="h-full-calc">
+      <el-col :span="8" class="h-full-calc">
         <el-card class="h-full">
           <MapHy></MapHy>
         </el-card>
-      </el-col> -->
-      <el-col :span="12" class="h-full-calc">
-        <el-card class="h-40">
-          <RiskIdentification height="95%"></RiskIdentification>
-        </el-card>
-        <el-card class="h-60 mt-10">
+      </el-col>
+      <el-col :span="8" class="h-full-calc">
+        <el-card class="h-48">
           <TargetSituation height="100%"></TargetSituation>
         </el-card>
+        <el-card class="h-48 mt-10">
+          <TargetMonth height="100%"></TargetMonth>
+        </el-card>
       </el-col>
     </el-row>
   </div>
@@ -31,9 +34,11 @@ 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 TargetMonth from "./components/TargetMonth/index.vue";
 
 export default {
   components: {
+    TargetMonth,
     TargetSituation,
     RiskIdentification,
     MapHy,
@@ -50,7 +55,6 @@ export default {
       },
     };
   },
-  mounted() {},
   methods: {},
 };
 </script>
@@ -59,11 +63,20 @@ export default {
   margin-top: 10px;
 }
 .map-container {
+  width: 100%;
+  overflow-x: hidden;
+  // height: 100vh;
   padding: 15px;
-  background-color: rgba(11, 42, 96, 0.8);
+  // position: relative;
+  background-image: url("../../assets/images/bg3.409270cc.jpg");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  // background-size: 100% 100%;
 }
 .h-full-calc {
-  height: calc(100vh - 200px);
+  height: calc(100vh - 110px);
+  // height: calc(100vh);
 }
 .mt-10 {
   margin-top: 10px;
@@ -83,12 +96,10 @@ export default {
 .h-48 {
   height: calc(50% - 5px);
 }
-.el-card__body {
-  height: 100%;
-}
 ::v-deep {
   .el-card__body {
     height: 100%;
+    border: 1px solid #1b3166;
   }
   .el-card {
     border: none;
@@ -113,24 +124,24 @@ export default {
   .el-date-editor {
     .el-input__inner {
       color: #fff !important;
-      background-color: #5a6fc0 !important;
+      background-color: #00a4ff !important;
       border: none !important;
     }
   }
   .el-select-dropdown__list {
-    background-color: #5a6fc0 !important;
+    background-color: #00a4ff !important;
   }
   .el-range-editor,
   .el-range-input,
   .el-range-separator {
     color: #fff !important;
-    background-color: #5a6fc0 !important;
+    background-color: #00a4ff !important;
     border: none !important;
   }
   /* 修改下拉框悬停时的背景色 */
   .el-select-dropdown__item.hover,
   .el-select-dropdown__item:hover {
-    background-color: #5a6fc0 !important;
+    background-color: #00a4ff !important;
   }
 }
 </style>