<template>
  <div>
    <div class="pd10" v-if="flg">
      <el-row :gutter="10">
        <el-col :span="7">
          <el-row>
            <el-col :span="24">
              <div
                ref="electr1"
                class="box"
                :style="'height:' + (vh + 100) + 'px;'"
                style="overflow-y: auto"
              >
                <div class="quantity">
                  <svg-icon
                    class="platform-manage"
                    icon-class="platform-manage"
                  />
                  台账统计
                </div>
                <div :style="'height:' + (vh / 2 + 20) + 'px;'">
                  <div
                    style="width: 100%; height: 100%"
                    id="electr1"

                  ></div>
                </div>
                <div
                  :style="'height:' + (vh / 2 + 20) + 'px; margin-top: 10px;'"
                >
                  <div
                    style="width: 100%; height: 100%"
                    id="electr2"

                  ></div>
                </div>
              </div>
            </el-col>
            <el-col :span="24" style="margin-top: 10px">
              <div
                class="box"
                ref="getHeight"
                :style="'height:' + (vh - 100) + 'px;'"
              >
                <div id="quantity" class="quantity">
                  <svg-icon
                    class="platform-manage"
                    icon-class="platform-manage"
                  />暂态事件统计
                </div>
                <div :style="'height:' + (vh - 145) + 'px;'">
                  <div
                    style="width: 100%; height: 100%"
                    id="electr3"

                  ></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-row>
            <el-col :span="24">
              <div
                ref="map"
                class="box"
                :style="'height:' + (vh * 2 + 10) + 'px' + ';padding:1% 1%'"
              >
                <el-breadcrumb
                  separator-class="el-icon-arrow-right"
                  style="margin-bottom: 5px"
                >
                  <el-breadcrumb-item>冀北</el-breadcrumb-item>
                  <el-breadcrumb-item
                    ><span style="font-weight: 700">{{ mapName }}</span>
                  </el-breadcrumb-item>
                  <!-- <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
                </el-breadcrumb>
                <div class="Top">
                  <el-button
                    :class="radio1 == 0 ? 'buttons' : ''"
                    plain
                    @click="radios(0)"
                    >谐波污染指数</el-button
                  >
                  <el-button
                    :class="radio1 == 1 ? 'buttons' : ''"
                    plain
                    @click="radios(1)"
                    >谐波越限占比</el-button
                  >
                  <el-button
                    :class="radio1 == 2 ? 'buttons' : ''"
                    plain
                    @click="radios(2)"
                    >告警变电站</el-button
                  >
                  <svg-icon class="error" icon-class="back" @click="close" />
                  <!-- <i  class="el-icon-error error" @click="close"></i> -->
                </div>
                <div style="position: absolute; top: 27px; right: 50px">
                  <el-select
                    v-model="value"
                    placeholder="请选择"
                    style="width: 130px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-button size="mini" type="primary">浏览</el-button>
                </div>
                <div
                  style="position: absolute; bottom: 10px; lefft: 10px;z-index:99999;'"
                >
                  <el-radio v-model="radio" label="1">220kV网架</el-radio>
                  <el-radio v-model="radio" label="2">变电站位置</el-radio>
                </div>
                <div style="width: 100%; height: 100%">
                  <div
                    id="electr4"
                    style="width: 100%; height: 100%"

                  />
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row>
            <el-col :span="24">
              <div class="box" :style="'height:' + vh / 2 + 'px;'">
                <div class="quantity">
                  <svg-icon
                    class="platform-manage"
                    icon-class="platform-manage"
                  />分布式光伏容量
                </div>
                <div
                  id="electr6"
                  style="width: 100%; height: 100%"

                />
              </div>
            </el-col>
            <el-col :span="24" style="margin-top: 10px">
              <div class="box" :style="'height:' + (vh / 2 + 90) + 'px;'">
                <div class="quantity">
                  <svg-icon
                    class="platform-manage"
                    icon-class="platform-manage"
                  />分布式光伏渗透率
                </div>
                <div
                  id="electr7"
                  style="width: 100%; height: 100%"

                />
              </div>
            </el-col>
            <el-col :span="24" style="margin-top: 10px">
              <div class="box" :style="'height:' + (vh - 100) + 'px;'">
                <div class="quantity">
                  <svg-icon
                    class="platform-manage"
                    icon-class="platform-manage"
                  />分布式消纳能力
                </div>
                <div
                  id="electr8"
                  style="width: 100%; height: 100%"

                />
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :span="12">
          <div ref="electr5" class="box" :style="'height:' + (vh - 87) + 'px;'">
            <div class="quantity">
              <svg-icon
                class="platform-manage"
                icon-class="platform-manage"
              />日发电趋势
            </div>
            <div style="width: 100%; height: 100%">
              <div
                id="electr5"
                style="width: 100%; height: 100%"

              />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box" :style="'height:' + (vh - 87) + 'px;'">
            <div class="quantity">
              <svg-icon
                class="platform-manage"
                icon-class="platform-manage"
              />分布式光伏问题
            </div>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"
                ><div ref="electr9" class="titleBox">潮流倒送和重过载问题</div>
                <div>
                  <div
                    id="electr9"
                    style="width: 100%; height: 100%"

                  /></div
              ></el-col>
              <el-col :span="8" class="titleBox"
                ><div>高低电压问题</div>
                <div style="font-size: 18px; color: #7fb1b1; font-weight: 700">
                  10%
                </div>
                <div>
                  <div
                    id="electr10"
                    style="width: 100%; height: 100%"

                  /></div
              ></el-col>
              <el-col :span="8" class="titleBox"
                ><div style="margin-bottom: 15px">低功率因数问题</div>
                <div
                  id="electr11"
                  style="width: 100%; height: 100%"

                />
              </el-col>
            </el-row>
            <!-- <div
                style="width:100%;height:100%;"
                id="electr11"
                :style="
                  ``
                "
              ></div> -->
          </div>
        </el-col>
      </el-row>
      <!-- <div class="home-content" v-if="!openPlay">
        <div class="com-sty" v-for="(item,i) in opts" :key="i" class="box" :style="{top:item.top,left:item.left,background:item.bg}"></div>
        </div> -->
    </div>
    <PrimaryWiring :mapName='mapName' v-else @close="close1" />
  </div>
</template>
<script>
import echarts from "echarts";
import jquery from "jquery";
import { MapSpot } from "@/api/northMap.js";

import { viewheight } from "@/assets/commjs/common";
import PrimaryWiring from "./PrimaryWiring";
export default {
  components: { PrimaryWiring },
  props: {
    mapName: {
      type: String,
    },
  },
  data() {
    return {
      flg: true,
      list: "",
      name: ``,
      vh: "",
      vh2: "",
      radio1: 0, //监测点分布 超标数量切换
      Rotation: 0, //低功率类点击切换
      getHeight: "",
      mapHeight: "",
      MapChart: null,
      zoom: "", //图表焦点校验
      StatisList: [
        {
          // 1类
          data: [
            {
              name: "Ⅰ类监测点", //名称
              value: 50, //数量
            },
            {
              name: "Ⅱ类监测点",
              value: 50,
            },
            {
              name: "Ⅲ类监测点",
              value: 50,
            },
          ],
          total: "150",
        },
        {
          // 1类
          data: [
            {
              name: "电能质量监测终端", //名称
              value: 20, //数量
            },
            {
              name: "智能融合终端",
              value: 50,
            },
            {
              name: "智能电表",
              value: 50,
            },
          ],
          total: "120",
        },
      ], //台账统计数据
      options: [
        {
          value: "选项1",
          label: "500kV廊坊站",
        },
      ],
      value: "",
      radio: "1",
    };
  },
  created() {},
  mounted() {
    this.device = window.devicePixelRatio;
    this.vh = (viewheight() - 28) / 2.7;
    this.vh2 = (viewheight() - 18) / 1.494;
    setTimeout(() => {
      this.getHeight = Number(this.$refs.getHeight.offsetHeight - 45);
      this.mapHeight = Number(this.$refs.map.offsetHeight);
    }, 0);

    // this.MapLeft(); //地图点
    this.radios(0);
    this.$nextTick(() => {
      this.electr1(); //台账统计
      this.electr2(); //台账统计
      this.electr3(); //暂态事件统计
      this.electr5(); //日发电趋势
      this.electr6(); //分布式光伏容量
      this.electr7(); //分布式光伏渗透率
      this.electr8(); //分布式消纳能力
      this.electr9(); //潮流倒送和重过载问题
      this.electr10(); //高低电压问题
      this.electr11(); //低功率因数问题
    });

    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
  },
  methods: {
    //台账统计
    electr1() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr1");

      setTimeout(() => {
        (domID1.style.width = this.$refs.electr1.offsetWidth + "px"),
          (domID1.style.height = this.vh / 2 + 20 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);
      let echartsData = this.StatisList[0];

      let colors = ["#e16757", "#eecb5f", "#669ace"];

      let newData = [];
      // 加阴影效果
      for (let i = 0; i < echartsData.data.length; i++) {
        newData.push({
          value: echartsData.data[i].value,
          name: echartsData.data[i].name,
        });
      }
      let option = {
        // title: {
        //   text: echartsData.total,
        //   left: "25%",
        //   top: "35%",
        //   // x: 'left',
        //   // y: 'center',
        //   textStyle: {
        //     fontSize: 24
        //     // color: "#e7c932"
        //   }
        // },
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "55%",
          top: "30%",
          //  itemGap: 40,
          selectedMode: true,
          icon: "pin",
          // shadowBlur:20,
          // shadowColor:"#000",
          textStyle: {
            rich: {
              b0: {
                // color: colorList[0],
                color: "#666666",
                fontSize: 16,
                fontWeight: 600,
                // height: 40,
                padding: [0, 30, 0, 0],
              },
            },
          },
          formatter: function (name) {
            let title = "";
            let total = 0;
            let target;
            let index;
            let value;
            for (let i = 0, l = echartsData.data.length; i < l; i++) {
              if (echartsData.data[i].name == name) {
                target = echartsData.data[i].value;
                value = echartsData.data[i].value;
                title = echartsData.data[i].label;
                index = i < 6 ? i : 5;
              }
            }
            return `{b0|${name}   }`;
          },
        },
        series: [
          {
            type: "pie",
            center: ["30%", "50%"],
            radius: ["80%", "100%"],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 2,

            tooltip: {
              trigger: "item",
              formatter: function (params) {
                return (
                  params.name +
                  ":" +
                  params.value +
                  "个<br>占比:" +
                  params.percent.toFixed(1) +
                  "%"
                );
              },
              backgroundColor: "#f3f3f3",
              textStyle: {
                color: "#666666",
                fontSize: 14,
                fontWeight: 500,
              },
              padding: [10, 20],
              extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
            },
            emphasis: {
              itemStyle: {
                borderColor: "#f3f3f3",
                borderWidth: 5,
              },
            },
            //启用鼠标放上去放大效果,这个挺好的
            itemStyle: {
              normal: {
                color: function (params) {
                  return colors[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "center",
              formatter: [`{a|${echartsData.total}}`, "{b|监测点数}"].join(
                "\n"
              ),
              rich: {
                a: {
                  padding: [10, 0, 0, 0],
                  color: "#0f0f0f",
                  fontSize: 30,
                  lineHeight: 36,
                },
                b: {
                  padding: [10, 0, 0, 0],
                  color: "#ccc",
                  fontSize: 15,
                  lineHeight: 16,
                },
              },
            },
            labelLine: {
              normal: {
                length: 10,
                length2: 15,
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: newData,
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    //台账统计2
    electr2() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr2");

      setTimeout(() => {
        (domID1.style.width = this.$refs.electr1.offsetWidth + "px"),
          (domID1.style.height = this.vh / 2 + 20 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);
      let echartsData = this.StatisList[1];

      let colors = ["#5470c6", "#91cc75", "#fac858"];

      let newData = [];
      // 加阴影效果
      for (let i = 0; i < echartsData.data.length; i++) {
        newData.push({
          value: echartsData.data[i].value,
          name: echartsData.data[i].name,
        });
      }
      let option = {
        // title: {
        //   text: echartsData.total,
        //   left: "25%",
        //   top: "35%",
        //   // x: 'left',
        //   // y: 'center',
        //   textStyle: {
        //     fontSize: 24
        //     // color: "#e7c932"
        //   }
        // },
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "55%",
          top: "30%",
          //  itemGap: 40,
          selectedMode: true,
          icon: "pin",
          // shadowBlur:20,
          // shadowColor:"#000",
          textStyle: {
            rich: {
              b0: {
                // color: colorList[0],
                color: "#666666",
                fontSize: 16,
                fontWeight: 600,
                // height: 40,
                padding: [0, 30, 0, 0],
              },
            },
          },
          formatter: function (name) {
            let title = "";
            let total = 0;
            let target;
            let index;
            let value;
            for (let i = 0, l = echartsData.data.length; i < l; i++) {
              if (echartsData.data[i].name == name) {
                target = echartsData.data[i].value;
                value = echartsData.data[i].value;
                title = echartsData.data[i].label;
                index = i < 6 ? i : 5;
              }
            }
            return `{b0|${name}   }`;
          },
        },
        series: [
          {
            type: "pie",
            center: ["30%", "50%"],
            radius: ["80%", "100%"],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 2,

            tooltip: {
              trigger: "item",
              formatter: function (params) {
                return (
                  params.name +
                  ":" +
                  params.value +
                  "个<br>占比:" +
                  params.percent.toFixed(1) +
                  "%"
                );
              },
              backgroundColor: "#f3f3f3",
              textStyle: {
                color: "#666666",
                fontSize: 14,
                fontWeight: 500,
              },
              padding: [10, 20],
              extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
            },
            emphasis: {
              itemStyle: {
                borderColor: "#f3f3f3",
                borderWidth: 5,
              },
            },
            //启用鼠标放上去放大效果,这个挺好的
            itemStyle: {
              normal: {
                color: function (params) {
                  return colors[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "center",
              formatter: [`{a|${echartsData.total}}`, "{b|终端数}"].join("\n"),
              rich: {
                a: {
                  padding: [10, 0, 0, 0],
                  color: "#0f0f0f",
                  fontSize: 30,
                  lineHeight: 36,
                },
                b: {
                  padding: [10, 0, 0, 0],
                  color: "#ccc",
                  fontSize: 15,
                  lineHeight: 16,
                },
              },
            },
            labelLine: {
              normal: {
                length: 10,
                length2: 15,
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: newData,
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    //暂态事件统计
    electr3() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr3");

      setTimeout(() => {
        (domID1.style.width = this.$refs.getHeight.offsetWidth - 10 + "px"),
          (domID1.style.height = this.vh - 145 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);
      let dataStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          shadowBlur: 0,
          // shadowColor: '#203665'
        },
      };
      let option = {
        series: [
          {
            name: "第一个圆环",
            type: "pie",
            clockWise: false,
            radius: [40, 50],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["15%", "50%"],
            data: [
              {
                value: 60,
                label: {
                  normal: {
                    rich: {
                      a: {
                        padding: [15, 0, 0, 0],
                        color: "#0f0f0f",
                        fontSize: 30,
                        lineHeight: 36,
                      },
                      b: {
                        padding: [-15, 0, 0, 0],
                        color: "#ccc",
                        fontSize: 15,
                        lineHeight: 16,
                      },
                    },
                    formatter: function (params) {
                      return "{a|" + params.value + "}" + "\n\n{b|电压暂升}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "18",
                      fontWeight: "normal",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#61a5e8",
                    shadowColor: "#61a5e8",
                    shadowBlur: 0,
                  },
                },
              },
              {
                value: 75,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#e16757",
                  },
                  emphasis: {
                    color: "#e16757",
                  },
                },
              },
            ],
          },
          {
            name: "第二个圆环",
            type: "pie",
            clockWise: false,
            radius: [40, 50],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["50%", "50%"],
            data: [
              {
                value: 20,
                label: {
                  normal: {
                    rich: {
                      a: {
                        padding: [15, 0, 0, 0],
                        color: "#0f0f0f",
                        fontSize: 30,
                        lineHeight: 36,
                      },
                      b: {
                        padding: [-15, 0, 0, 0],
                        color: "#ccc",
                        fontSize: 15,
                        lineHeight: 16,
                      },
                    },
                    formatter: function (params) {
                      return "{a|" + params.value + "}" + "\n\n{b|电压暂降}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#61a5e8",
                    shadowColor: "#61a5e8",
                    shadowBlur: 0,
                  },
                },
              },
              {
                value: 50,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#e16757",
                  },
                  emphasis: {
                    color: "#e16757",
                  },
                },
              },
            ],
          },
          {
            name: "第三个圆环",
            type: "pie",
            clockWise: false,
            radius: [40, 50],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["85%", "50%"],
            data: [
              {
                value: 7,
                label: {
                  normal: {
                    rich: {
                      a: {
                        padding: [15, 0, 0, 0],
                        color: "#0f0f0f",
                        fontSize: 30,
                        lineHeight: 36,
                      },
                      b: {
                        padding: [-15, 0, 0, 0],
                        color: "#ccc",
                        fontSize: 15,
                        lineHeight: 16,
                      },
                    },
                    formatter: function (params) {
                      return "{a|" + params.value + "}" + "\n\n{b|短时中断}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#61a5e8",
                    shadowColor: "#61a5e8",
                    shadowBlur: 0,
                  },
                },
              },
              {
                value: 25,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#e16757",
                  },
                  emphasis: {
                    color: "#e16757",
                  },
                },
              },
            ],
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    //日发电趋势
    electr5() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr5");

      setTimeout(() => {
        (domID1.style.width = this.$refs.electr5.offsetWidth + 1 + "px"),
          (domID1.style.height = this.$refs.electr5.offsetHeight - 30 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);
      let option = {
        backgroundColor: "#fff",
        title: {
          // text: "订单量（个）",
          left: "18px",
          top: "0",
          textStyle: {
            color: "#999",
            fontSize: 12,
            fontWeight: "400",
          },
        },
        color: ["#5B8FF9", "#5AD8A6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
            lineStyle: {
              type: "dashed",
            },
          },
        },
        grid: {
          left: "35",
          right: "10%",
          bottom: "20",
          top: "40",
          containLabel: true,
        },
        legend: {
          data: ["实时发电趋势", "累计发电趋势"],
          left: "20px",
          top: 0,
          textStyle: {
            color: "#333",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        xAxis: {
          name: "时间",
          type: "category",
          data: ["1时", "2时", "3时", "4时", "5时", "6时"],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.5)",
            },
          },
        },
        yAxis: {
          name: "光伏发电功率(MW)",
          nameLocation: "middle",
          nameTextStyle: {
            padding: 20,
          },
          type: "value",
          axisLabel: {
            color: "#999",
            textStyle: {
              fontSize: 12,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F3F4F4",
            },
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: "实时发电趋势",
            type: "line",
            symbol: "none", //这句就是去掉点的
            smooth: true,
            data: [10, 20, 30, 44, 50, 65, 76],
          },

          {
            name: "累计发电趋势",
            type: "line",
            symbol: "none", //这句就是去掉点的
            smooth: true,
            data: [13, 2, 2, 32, 43, 23, 23],
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    // 分布式光伏容量
    electr6() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr6");

      setTimeout(() => {
        (domID1.style.width = this.$refs.electr1.offsetWidth + "px"),
          (domID1.style.height = this.vh - 190 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);
      let option = {
        //   backgroundColor:'#041437',
        tooltip: {},
        xAxis: {
          splitLine: { show: false },
          offset: 10,
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          data: ["预计光伏总容量", "已安装容量", "当年接入容量"],
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 10,
            color: "#999",
            fontSize: 14,
          },
        },
        grid: {
          top: "center",
          height: 60,
          left: 120,
          right: 100,
        },
        series: [
          {
            // current data
            type: "pictorialBar",
            itemStyle: {
              color: function (params) {
                if (params.dataIndex === 0) {
                  return "#39B3FF";
                } else if (params.dataIndex === 1) {
                  return "#83D978";
                } else {
                  return "#FF8439";
                }
              },
            },
            label: {
              show: true,
              position: "right",
              color: "#000",
              formatter: function (params) {
                return `${params.value}MW`;
              },
            },
            symbol: "rect",
            symbolRepeat: "fixed",
            symbolMargin: 1,
            symbolClip: true,
            symbolSize: [5, 15],
            data: [13220, 9891, 8060],
            z: 10,
          },
          // {
          //   type: "pictorialBar",
          //   itemStyle: {
          //     color: "#fff"
          //   },
          //   label: {
          //     show: true,
          //     position: "right",
          //     offset: [10, 0],
          //     color: "#000",
          //     fontSize: 14
          //   },

          //   data: [891, 1220, 660]
          // }
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    // 分布式光伏渗透率
    electr7() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr7");

      setTimeout(() => {
        (domID1.style.width = this.$refs.electr1.offsetWidth + "px"),
          (domID1.style.height = this.$refs.electr1.offsetHeight / 2 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);

      let color = ["#d563ac", "#00a99d", "#f59f3c", "#7d68b7", "#f1927d"];
      let chartData = [
        {
          name: "100%",
          value: 50,
        },
        {
          name: "75%-100%",
          value: 40,
        },
        {
          name: "50%-75%",
          value: 30,
        },
        {
          name: "25%-50%",
          value: 20,
        },
        {
          name: "0%-25%",
          value: 10,
        },
      ];
      let arrName = [];
      let arrValue = [];
      let sum = 0;
      let pieSeries = [],
        lineYAxis = [];

      // 数据处理
      chartData.forEach((v, i) => {
        arrName.push(v.name);
        arrValue.push(v.value);
        sum = sum + v.value;
      });

      // 图表option整理
      chartData.forEach((v, i) => {
        // console.log(v,i, v.value,sum - v.value)
        let chartnewData = chartData.slice(0, i);

        let newValue = chartnewData.reduce((a, b) => {
          return a + b.value;
        }, 0);
        v.startAngle = (newValue / sum) * 360;
        pieSeries.push({
          name: "",
          type: "pie",
          clockWise: false,
          hoverAnimation: false,
          radius: [75 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["30%", "50%"],
          label: {
            show: false,
          },

          data: [
            {
              value: v.value,
              name: v.name,
            },
            {
              value: sum - v.value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
            },
          ],
        });
        pieSeries.push({
          name: "",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [75 - i * 15 + "%", 68 - i * 15 + "%"],
          // radius: ['50%', '70%'],
          center: ["30%", "50%"],
          label: {
            show: false,
          },
          data: [
            {
              value: sum,
              itemStyle: {
                color: "#ccc", //圆环颜色
              },
            },
            {
              value: 0,
              name: "",
              itemStyle: {
                color: "red",
              },
            },
          ],
        });
        v.percent = v.value + "个";
        lineYAxis.push({
          value: i,
          textStyle: {
            rich: {
              circle: {
                color: color[i],
              },
            },
          },
        });
      });

      let option = {
        color: color,
        legend: {
          show: true,
          // icon: "circle",
          // top: "center",
          left: "55%",
          top: "20%",
          formatter: (name) => {
            return (
              // {name|' + item.name + '}
              "{name|" +
              name +
              "} {percent|" +
              chartData.find((item) => {
                return item.name == name;
              }).percent +
              "}"
            );
          },
          textStyle: {
            color: "#a6acba", //元字颜色
            fontSize: 14,
            rich: {
              name: {
                color: "#a6acba",
                fontSize: 14,
              },
              percent: {
                color: "#000",
                fontSize: 14,
              },
            },
          },
          itemGap: 3,
          // itemWidth: 22, // 设置宽度
          // itemHeight: 12, // 设置高度
        },
        grid: {
          top: "5%",
          bottom: "15%",
          left: "15%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: lineYAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: pieSeries,
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    // 分布式消纳能力
    electr8() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr8");

      setTimeout(() => {
        (domID1.style.width = this.$refs.electr1.offsetWidth + "px"),
          (domID1.style.height =
            this.$refs.electr1.offsetHeight / 2 - 50 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);

      var echartsData = {
        title: "",
        city: ["唐山", "秦皇岛", "廊坊", "张家口"],
        legend: ["已安装容量", "可安装容量"],
        data: [
          [10, 20, 30, 40],
          [20, 10, 10, 10],
        ],
      };

      var colors = ["#61a5e8", "#eecb5f"];
      var option = {
        title: {
          text: echartsData.title,
          x: "center",
          top: 15,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        toolbox: {
          feature: {
            saveAsImage: {
              backgroundColor: "#243a55",
            },
          },
          iconStyle: {
            borderColor: "#fff",
            fontSize: "22px",
          },
        },
        color: colors,
        legend: {
          top: 0,
          left: "0",
          itemWidth: 10,
          itemHeight: 10,
          padding: [5, 10],
          textStyle: {
            fontSize: 12,

            padding: [3, 0, 0, 0],
          },
          data: echartsData.legend,
        },
        grid: {
          top: "30px",
          left: "30",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            rotate: 0, //倾斜度
          },
          axisLine: {
            lineStyle: {},
            width: 5,
          },
          axisTick: {
            show: false,
          },
          data: echartsData.city,
        },
        yAxis: {
          name: "总量(MW)",
          nameLocation: "middle",
          nameTextStyle: {
            padding: 20,
          },
          type: "value",
          axisLabel: {},
          axisLine: {
            lineStyle: {},
            width: 5,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(150, 164, 244, 0.3)",
            },
          },
        },
        series: [],
      };
      for (var i = 0; i < echartsData.legend.length; i++) {
        option.series.push({
          name: echartsData.legend[i],
          type: "bar",
          stack: "总数",
          // barWidth: barWidth,

          barMaxWidth: 30, // 最大宽度
          label: {
            show: false,
            position: "insideRight",
          },
          data: echartsData.data[i],
          itemStyle: {
            normal: {
              label: {
                show: false, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 14,
                  fontWeight: 600,
                },
              },
            },
          },
        });
      }

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    // 潮流倒送和重过载问题
    electr9() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr9");

      setTimeout(() => {
        (domID1.style.width = this.$refs.electr9.offsetWidth + "px"),
          (domID1.style.height = this.$refs.electr5.offsetHeight - 70 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);

      const dataList = [
        { value: 100, name: "潮流倒送线路" },
        { value: 45, name: "重过载线路" },
      ];
      let sum = 0;

      dataList.forEach((item) => {
        sum = sum + item.value;
      });
      let option = {
        legend: {
          show: true,
          icon: "circle",
          right: "3%",
          left: "center",
          top: "0",
          itemWidth: 10,
          itemStyle: {
            borderColor: "none",
          },
          textStyle: {
            rich: {
              name: {
                color: "#606266",
                fontSize: 14,
              },
              percentage: {
                color: "#606266",
                fontSize: 16,
                padding: [0, 0, 0, 30],
                align: "right",
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            color: ["#61a5e8", "#f06c4d"],
            radius: "100%",
            left: "center",
            top: "30px",
            data: dataList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            labelLine: {
              length: 10,
              length2: 60,
            },
            label: {
              color: "#fff",
              fontSize: 12,
              fontWeight: "bold",
              position: "inner",
              formatter: function (params) {
                // return params.value;
                return ((params.value / sum) * 100).toFixed(2) + "%";
              },
            },
            itemStyle: {
              borderColor: "#fff",
            },
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    // 高低电压问题
    electr10() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr10");

      setTimeout(() => {
        (domID1.style.width = this.$refs.electr9.offsetWidth + "px"),
          (domID1.style.height = this.$refs.electr5.offsetHeight - 70 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);

      var data = {
        name: "",
        value: "200",
      };

      let option = {
        title: [
          {
            text: data.value,
            textStyle: {
              color: "#e3cb98",
              fontSize: 20,
            },
            textAlign: "center",
            itemGap: 20,
            left: "48%",
            top: "30%",
          },
        ],
        tooltip: {
          show: false,
        },
        // 极坐标系的角度轴
        angleAxis: [
          {
            id: 1,
            max: 100,
            clockwise: false, // 逆时针
            // 隐藏刻度线
            show: false,
            startAngle: 190,
            polarId: 1,
          },
          {
            id: 2,
            max: 100,
            clockwise: false, // 逆时针
            // 隐藏刻度线
            show: false,
            startAngle: 120,
            polarId: 2,
          },
        ],
        // 极坐标系的径向轴。
        radiusAxis: [
          {
            type: "category",
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            polarId: 1,
          },
          {
            type: "category",
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            polarId: 2,
          },
        ],
        // 极坐标系
        polar: [
          {
            id: 1,
            center: ["50%", "40%"],
            radius: ["80%", "65%"],
          },
          {
            id: 2,
            center: ["75%", "25%"], //中心点位置
            radius: "40%", //图形大小
          },
        ],
        series: [
          {
            type: "bar",
            z: 10,
            data: [20],
            polarIndex: 0,
            showBackground: false,
            coordinateSystem: "polar",

            roundCap: true,
            barWidth: 35,
            itemStyle: {
              normal: {
                opacity: 1,
                color: "#078970",
                // shadowBlur: 5,
                shadowColor: "#078970",
              },
            },
          },
          {
            type: "pie",
            name: "内层细圆环",
            radius: ["70%", "75%"],
            center: ["50%", "40%"],
            startAngle: 120,
            hoverAnimation: false,
            clockWise: true,
            itemStyle: {
              normal: {
                color: "#08c4b6",
              },
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            data: [data.value],
          },
          {
            type: "pie",
            name: "内层细圆环",
            radius: ["55%", "0%"],
            center: ["50%", "40%"],
            startAngle: 120,
            hoverAnimation: false,
            clockWise: true,
            itemStyle: {
              normal: {
                color: "#dadaf0",
              },
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            data: [100],
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    // 低功率因数问题
    electr11() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr11");

      setTimeout(() => {
        (domID1.style.width = this.$refs.electr9.offsetWidth + "px"),
          (domID1.style.height = this.$refs.electr5.offsetHeight - 70 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);

      let color = ["#f99106", "#3fa564", "#11aff4"];
      let chartData = [
        {
          name: "0.8-0.9",
          value: 50,
        },
        {
          name: "0.7-0.8",
          value: 40,
        },
        {
          name: "0.7以下",
          value: 30,
        },
      ];
      let arrName = [];
      let arrValue = [];
      let sum = 0;
      let pieSeries = [],
        lineYAxis = [];

      // 数据处理
      chartData.forEach((v, i) => {
        arrName.push(v.name);
        arrValue.push(v.value);
        sum = sum + v.value;
      });

      // 图表option整理
      chartData.forEach((v, i) => {
        // console.log(v,i, v.value,sum - v.value)
        let chartnewData = chartData.slice(0, i);

        let newValue = chartnewData.reduce((a, b) => {
          return a + b.value;
        }, 0);
        v.startAngle = (newValue / sum) * 360;
        pieSeries.push({
          name: "",
          type: "pie",
          clockWise: false,
          hoverAnimation: false,
          radius: [75 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["30%", "50%"],
          label: {
            show: false,
          },

          data: [
            {
              value: v.value,
              name: v.name,
            },
            {
              value: sum - v.value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
            },
          ],
        });
        pieSeries.push({
          name: "",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [75 - i * 15 + "%", 68 - i * 15 + "%"],
          // radius: ['50%', '70%'],
          center: ["30%", "50%"],
          label: {
            show: false,
          },
          data: [
            {
              value: sum,
              itemStyle: {
                color: "#ccc", //圆环颜色
              },
            },
            {
              value: 0,
              name: "",
              itemStyle: {
                color: "red",
              },
            },
          ],
        });
        v.percent = v.value + "个";
        lineYAxis.push({
          value: i,
          textStyle: {
            rich: {
              circle: {
                color: color[i],
              },
            },
          },
        });
      });

      let option = {
        title: [
          {
            text: 120,
            textStyle: {
              color: "#f8be3e",
              fontSize: 18,
            },
            textAlign: "center",
            itemGap: 20,
            left: "28%",
            top: "41%",
          },
        ],
        color: color,
        legend: {
          show: true,
          // icon: "circle",
          // top: "center",
          left: "55%",
          top: "20%",
          formatter: (name) => {
            return (
              // {name|' + item.name + '}
              "{name|" +
              name +
              "} {percent|" +
              chartData.find((item) => {
                return item.name == name;
              }).percent +
              "}"
            );
          },
          textStyle: {
            color: "#a6acba", //元字颜色
            fontSize: 14,
            rich: {
              name: {
                color: "#a6acba",
                fontSize: 14,
              },
              percent: {
                color: "#000",
                fontSize: 14,
              },
            },
          },
          itemGap: 3,
          // itemWidth: 22, // 设置宽度
          // itemHeight: 12, // 设置高度
        },
        grid: {
          top: "5%",
          bottom: "15%",
          left: "15%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: lineYAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: pieSeries,
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },

    // 监测点分布
    radios(e) {
      this.radio1 = e;
      // if (this.radio1 == 0) {
      let title = [
        [],
        ["Ⅰ类 (变电站)", "Ⅱ类 (台区)", "Ⅲ类 (用户)"],
        ["无告警变电站", "有告警变电站"],
      ];
      // MapSpot().then((res) => {
      this.MapLeft(title[e]);
      // } else {
      // MapSpot().then((res) => {
      //   this.MapLeft(res.data[e]);
      // });
      // }
    },

    //  地图左
    async MapLeft(title) {
      let _this = this;
      let echarts = require("echarts");
      let domID2 = document.getElementById("electr4");
      setTimeout(() => {
        (domID2.style.width = this.$refs.map.offsetWidth + "px"),
          (domID2.style.height = this.$refs.map.offsetHeight - 36 + "px");
      }, 0);
      if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
        myChart2.dispose(); //销毁
      }
      let myChart2 = echarts.init(domID2);
      let list = [
        {
          substationId: "d422ce2d3b12fce3bcd42a3748b997b9",
          substationName: "禄劝换流站",
          longitude: 117.710397,
          latitude: 41.539301,
          key: 4,
          pollutionStatis: "电网拓扑",
          pollutionData: 2,
        },
        {
          substationId: "d422ce2d3b12fce3bcd42a3748b997b9",
          substationName: "禄劝换流站1",
          longitude: 117.048094,
          latitude: 41.482256,
          key: 4,
          pollutionStatis: "电网拓扑",
          pollutionData: 2,
        },
        {
          substationId: "d422ce2d3b12fce3bcd42a3748b997b9",
          substationName: "禄劝换流站",
          longitude: 118.593467,
          latitude: 41.097182,
          key: 4,
          pollutionStatis: "电网拓扑",
          pollutionData: 3,
        },
        {
          substationId: "d59a81d85830994eac84106f5df06b49",
          substationName: "宝安换流站",
          longitude: 117.167676,
          latitude: 40.595971,
          pollutionStatis: "电网拓扑",
          pollutionData: 2,
        },
        {
          substationId: "dfae1f9de20cac5025c9ddb81b7f5cee",
          substationName: "如画变电站",
          longitude: 117.936913,
          latitude: 40.967444,
          pollutionStatis: "电网拓扑",
          pollutionData: 3,
        },
      ];
      let echartsData = [[[], [], []], [], []];
      list.forEach((item) => {
        if (item.pollutionData == 1) {
          echartsData[0][0].push({
            name: `${item.substationName}-污染值: ${item.pollutionData}`,
            value: [item.longitude, item.latitude, item.key],
          });
        } else if (item.pollutionData == 2) {
          echartsData[0][1].push({
            name: `${item.substationName}-污染值: ${item.pollutionData}`,
            value: [item.longitude, item.latitude, item.key],
          });
        } else if (item.pollutionData == 3) {
          echartsData[0][2].push({
            name: `${item.substationName}-污染值: ${item.pollutionData}`,
            value: [item.longitude, item.latitude, item.key],
          });
        }
      });
      let option = {};
      // let maps=await map()
      // console.log(` maps.data`);
      let colors = ["#0ec7aa", "#f80108", "#6561fa"];
      _this.$axios
        .get(`./static/mapjson/${_this.mapName}.json`)
        .then((data) => {
          echarts.registerMap("china", data.data);
          if (_this.radio1 == 0) {
            option = {
              tooltip: {
                trigger: "item",

                formatter: function (params) {
                  return params.name;
                },
              },
              legend: {
                //各标记图例
                orient: "vertical",
                // id: 1,
                right: "40px",
                top: "75px",
                icon: "circle",
                // itemWidth: 13,
                itemWidth: 12,

                textStyle: {
                  color: "#000", //legend图标颜色  深灰
                  fontSize: 12,
                },
              },
              visualMap: {
                // text: ["", ""],
                min: 0,
                max: 1000,
                seriesIndex: 0,
                calculable: false,
                align: "left",
                orient: "vertical",
                top: "0",
                right: "20px",
                pieces: [
                  {
                    gt: 200,
                    label: "严重污染",
                    color: "#ff4a3d",
                  },
                  {
                    gte: 100,
                    lte: 200,
                    label: "一般污染",
                    color: "#ffa620",
                  },
                  {
                    gte: 0,
                    lt: 100,
                    label: "无污染",
                    color: "#0ec7aa",
                  },
                ],
                // symbolSize: [30, 100],
                //   color: ["#04b3f4", "#c4eaff"],

                // inRange: {
                //   color: ["#c4eaff", "#04b3f4"],
                //   symbolSize: [10, 100],
                // },
              },
              geo: {
                show: true,
                map: "china",
                label: {
                  normal: {
                    show: true, //是否显示城市名
                    textStyle: {
                      color: "#000", //legend字体颜色  深蓝
                      fontSize: 12,
                    },
                    // verticalAlign: 'middle',
                    // align: 'left',
                  },
                  emphasis: {
                    show: false,
                  },
                },
                top: 2250,
                left: 1200,
                zoom: 11,
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: "#2386cf", //地图填充颜色
                    borderColor: "#FFFFFF", //地图边框颜色  蓝
                    borderWidth: 2,
                  },
                  emphasis: {
                    areaColor: "#cbd2ec", //鼠标经过 地图
                  },
                },
                regions: [
                  {
                    name: "南海诸岛",
                    itemStyle: {
                      // 隐藏地图
                      normal: {
                        opacity: 0, // 为 0 时不绘制该图形
                      },
                    },
                    label: {
                      show: false, // 隐藏文字
                    },
                  },
                ],
              },
              series: [
                {
                  name: "",
                  type: "map",
                  map: "china",

                  roam: false,

                  geoIndex: 0,
                  data: [
                    {
                      name: "围场满族蒙古族自治县",
                      value: 210,
                    },
                    {
                      name: "隆化县",
                      value: 11,
                    },
                    {
                      name: "丰宁满族自治县",
                      value: 11,
                    },
                    {
                      name: "平泉市",
                      value: 11,
                    },
                    {
                      name: "宽城满族自治县",
                      value: 3,
                    },
                    {
                      name: "承德县",
                      value: 110,
                    },
                    {
                      name: "双桥区",
                      value: 110,
                    },
                    {
                      name: "鹰手营子矿区",
                      value: 10,
                    },
                    {
                      name: "兴隆县",
                      value: 10,
                    },
                    {
                      name: "滦平县",
                      value: 10,
                    },
                    {
                      name: "双滦区",
                      value: 10,
                    },
                  ],
                },
                {
                  name: "220kV",
                  type: "scatter",
                  coordinateSystem: "geo",
                  data: echartsData[0][0],

                  // symbol:'image://'+ require("@/assets/dw.png"),
                  symbolSize: function (val) {
                    if (val[2] == 4) {
                      return 16;
                    } else {
                      return 14;
                    }
                  },
                  label: {
                    normal: {
                      show: false,
                      formatter: function (params) {
                        // console.log(params);
                        return params.name;
                      },
                      position: "right",
                      color: "#800080",
                      fontSize: "12",
                    },
                    emphasis: {
                      show: false,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "#800080",
                      borderWidth: 1,
                      borderColor: "#ccc",
                    },
                  },
                },
                {
                  name: "110kV",
                  type: "scatter",
                  coordinateSystem: "geo",
                  data: echartsData[0][1],
                  symbol: (params) => {
                    if (params[2] == 4) {
                      return "image://" + require("@/assets/shandian.png");
                    }
                  },
                  // symbol:'image://'+ require("@/assets/dw.png"),
                  symbolSize: function (val) {
                    if (val[2] == 4) {
                      return 16;
                    } else {
                      return 14;
                    }
                  },
                  label: {
                    normal: {
                      show: false,
                      formatter: function (params) {
                        // console.log(params);
                        return params.name;
                      },
                      position: "right",
                      color: "#f04054",
                      fontSize: "12",
                    },
                    // 鼠标经过点变色
                    emphasis: {
                      show: false,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "#f04054",
                      borderWidth: 1,
                      borderColor: "#ccc",
                    },
                  },
                },
                {
                  name: "35kV",
                  type: "scatter",
                  coordinateSystem: "geo",
                  data: echartsData[0][2],
                  symbol: (params) => {
                    if (params[2] == 4) {
                      return "image://" + require("@/assets/shandian.png");
                    }
                  },
                  // symbol:'image://'+ require("@/assets/dw.png"),
                  symbolSize: function (val) {
                    if (val[2] == 4) {
                      return 16;
                    } else {
                      return 14;
                    }
                  },
                  label: {
                    normal: {
                      show: false,
                      formatter: function (params) {
                        // console.log(params);
                        return params.name;
                      },
                      position: "right",
                      color: "#ffff00",
                      fontSize: "12",
                    },
                    emphasis: {
                      show: false,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "#ffff00",
                      borderWidth: 1,
                      borderColor: "#ccc",
                    },
                  },
                },
              ],
            };
          } else {
            option = {
              //   backgroundColor: '#060303', //地图背景色深蓝
              tooltip: {
                trigger: "item",

                formatter: function (params) {
                  return params.name;
                },
              },
              geo: {
                show: true,
                map: "china",
                label: {
                  normal: {
                    show: true, //是否显示城市名
                    textStyle: {
                      color: "#000", //legend字体颜色  深蓝
                      fontSize: 12,
                    },
                    // verticalAlign: 'middle',
                    // align: 'left',
                  },
                  emphasis: {
                    show: false,
                  },
                },
                top: 1350,
                left: 800,
                zoom: 7,
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: "#2386cf", //地图填充颜色
                    borderColor: "#FFFFFF", //地图边框颜色  蓝
                    borderWidth: 2,
                  },
                  emphasis: {
                    areaColor: "#cbd2ec", //鼠标经过 地图
                  },
                },
                regions: [
                  {
                    name: "南海诸岛",
                    itemStyle: {
                      // 隐藏地图
                      normal: {
                        opacity: 0, // 为 0 时不绘制该图形
                      },
                    },
                    label: {
                      show: false, // 隐藏文字
                    },
                  },
                ],
              },
              toolbox: {
                show: true,
                left: "left",
                top: "25",
                iconStyle: {
                  borderColor: "crimson",
                },
              },

              legend: {
                //各标记图例
                orient: "vertical",
                // id: 1,
                left: "0%",
                top: "0%",
                itemWidth: 20,

                textStyle: {
                  color: "#000", //legend图标颜色  深灰
                  fontSize: 16,
                },
              },
              title: {
                text: "",
                left: "left",
                top: "60",
                textStyle: {
                  color: "#C09611",
                  size: 20,
                },
              },
              legend: {
                //各标记图例
                orient: "vertical",
                // id: 1,
                right: "30px",
                top: "75px",
                icon: "circle",
                // itemWidth: 13,
                itemWidth: 14,

                textStyle: {
                  color: "#000", //legend图标颜色  深灰
                  fontSize: 14,
                },
              },
              visualMap: {
                // text: ["", ""],
                min: 0,
                max: 1000,
                seriesIndex: 0,
                calculable: false,
                align: "left",
                orient: "vertical",
                top: "0",
                right: "60px",
                pieces: [
                  {
                    gt: 200,
                    label: "严重污染",
                    color: "#ff4a3d",
                  },
                  {
                    gte: 100,
                    lte: 200,
                    label: "一般污染",
                    color: "#ffa620",
                  },
                  {
                    gte: 0,
                    lt: 100,
                    label: "无污染",
                    color: "#0ec7aa",
                  },
                ],
                // symbolSize: [30, 100],
                //   color: ["#04b3f4", "#c4eaff"],

                // inRange: {
                //   color: ["#c4eaff", "#04b3f4"],
                //   symbolSize: [10, 100],
                // },
              },
              series: [
                {
                  type: "lines",
                  name: "",
                  zlevel: 2,
                },
              ],
            };
            echartsData.data.forEach((item, i) => {
              option.series.push({
                name: echartsData.legend[i],
                type: "scatter",
                coordinateSystem: "geo",
                data: item,
                symbol: "",
                symbolSize: function (val) {
                  return 15;
                },
                label: {
                  normal: {
                    show: false,
                    formatter: function (params) {
                      // console.log(params);
                      return params.name;
                    },
                    position: "right",
                    color: "#69A4D9",
                    fontSize: "8",
                  },
                  emphasis: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: colors[i],
                    borderWidth: 2,
                    borderColor: "#ccc",
                  },
                },
              });
            });
          }
          myChart2.clear(option);
          option && myChart2.setOption(option)
window.echartsArr.push(myChart2);
          setTimeout(function () {
            myChart2.resize();
          }, 0);
          if (_this.radio1 == 0) {
            //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
            myChart2.on("click", function (params) {
              //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
              //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
              _this.list = params.data;
              _this.flg = false;
              // console.log(params.data);
            });
          }
        });
    },
    // 关闭
    close() {
      this.$emit("close");
    },
    // 关闭
    close1() {
      this.flg = true;
      this.$nextTick(() => {
        this.radios(0);

        this.electr1(); //台账统计
        this.electr2(); //台账统计
        this.electr3(); //暂态事件统计
        this.electr5(); //日发电趋势
        this.electr6(); //分布式光伏容量
        this.electr7(); //分布式光伏渗透率
        this.electr8(); //分布式消纳能力
        this.electr9(); //潮流倒送和重过载问题
        this.electr10(); //高低电压问题
        this.electr11(); //低功率因数问题
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../../styles/comStyle.less");
</style>
<style lang="scss" scoped>
.pd10 {
  background-color: #e3f3f0;
  .box {
    padding: 5px;
    background-color: #fff;
    .Top {
      position: relative;
      display: flex;
      justify-content: left;
      .el-button {
        width: 115px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        border-radius: 5px;
        background-color: #c9c9c9;
      }
      .buttons {
        // background-color: $themeColor;
        background: linear-gradient(180deg, $themeColor 16%, $themeColor 100%);
      }
      .error {
        cursor: pointer;
        position: absolute;
        line-height: 36px;
        color: $themeColor;
        top: -15px;
        right: 5px;
        font-size: 29px;
      }
    }

    .quantity {
      display: inline-block;
      height: 32px;
      padding: 0 20px;
      margin-bottom: 5px;
      font-size: 16px;
      font-weight: 600;
      line-height: 32px;
      color: #fff;
      background-color: $themeColor;
      border-radius: 5px;
    }
    .monitor {
      display: flex;

      .monitorBox {
        flex: 1;
      }
      .monitorTop {
        font-size: 14px;
        text-align: center;
      }

      .monitorCenter {
        display: flex;
        margin: 0 5px;
        height: 60px;

        .Icon {
          font-size: 16px;
          line-height: 16px;
        }
      }
      .left {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        text-align: center;
        flex: 1;
        span {
          font-weight: 600;
          color: #32a5a6;
        }
      }

      .right {
        display: flex;

        justify-content: space-around;
        flex: 1.5;
        flex-wrap: wrap;
        flex-direction: column;
        div {
          display: flex;
          justify-content: center;
          width: 100%;
          line-height: 18px;
          span {
            font-weight: 600;
            color: #55bcb4;
          }
        }
      }
    }

    .Setting {
      margin: 0 5px;
      padding-top: 5px;
      font-size: 16px;
      text-align: center;
      border-top: 2px solid #e9d2a4;
      span {
        color: #55bcb4;
        font-size: 18px;
      }
    }
    .monitorBottom {
      margin-top: 10px;
      display: flex;
      .monitorBottomBox {
        flex: 1;
        .monitorTop {
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }
  .platform-manage {
    margin-right: 5px;
    font-size: 18px;
  }
  // 工单 转换率
  .WorkOrder {
    height: 85%;

    padding: 30px 10px;
    display: flex;

    .WorkOrderBox {
      padding: 10px 5px;
      width: 50%;
      display: flex;
      .WorkContent {
        font-size: 14px;
        min-width: 100px;
        display: flex;
        flex-direction: column;
        div {
          display: inline-block;
          // flex: 1;
          text-align: center;
          line-height: 30px;
          .ITop {
            font-size: 18px;
            color: #54a092;
            font-weight: 600;
          }
          .IBottom {
            font-size: 18px;
            color: #63d763;
            font-weight: 600;
          }
        }
      }
    }
  }
  .lowPowerTop {
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    .el-button {
      border-radius: 6px;
      &:hover {
        color: #fff;
        background-color: $themeColor;
      }
      &:active {
        color: #fff;
        background-color: $themeColor;
      }
    }
    .rotationCss {
      color: #fff !important;
      background-color: $themeColor;
    }
  }
  .location {
    position: absolute;
    top: 144px;
    left: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  .steadyState {
    display: flex;
    justify-content: space-around;
    height: calc(100% - 32px);
    .steadyStateBox {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      text-align: center;

      > div {
        height: 35px;
        display: flex;
        flex-direction: column;
        line-height: 35px;
      }
    }
    .steadyStateBoxs {
      width: 22%;
      .harmonic {
        background-color: #eafee3;
      }
      .threePphase {
        background-color: #fbe7e4;
      }
      .Flicker {
        background-color: #fef2bd;
      }
    }
  }
}
.titleBox {
  text-align: center;
  margin: 5px 0 0;
}
</style>
