<template>
  <div class="pd10">
    <el-row :gutter="10">
      <el-col :span="7">
        <el-row>
          <el-col :span="24">
            <div
              class="box"
              :style="'height:' + vh + ';'"
              style="overflow-y: auto;"
            >
              <div class="quantity">
                <svg-icon
                  class="platform-manage"
                  icon-class="platform-manage"
                />
                监测点统计
              </div>
              <div class="monitor">
                <div
                  class="monitorBox"
                  v-for="(item, ind) in monitorList.monitor"
                  :key="ind"
                  :style="
                    item.name == 'Ⅱ'
                      ? 'border-right: 1px solid #000; border-left: 1px solid #000;'
                      : ''
                  "
                >
                  <div>
                    <div class="monitorTop">{{ item.name }}类监测点</div>
                    <div class="monitorCenter">
                      <div class="left">
                        <span>{{ item.total }}</span
                        >&nbsp;&nbsp;个
                      </div>
                      <div class="right">
                        <div>
                          同比&nbsp;&nbsp;<span
                            >{{ item.weeklyRatio }}%
                            <i
                              :style="
                                item.weeklyRatio == 0
                                  ? 'color: #666666;'
                                  : item.weeklyRatio > 0
                                  ? ''
                                  : 'color: #ff0000;'
                              "
                              :class="
                                item.weeklyRatio == 0
                                  ? 'el-icon-minus'
                                  : item.weeklyRatio > 0
                                  ? 'el-icon-top'
                                  : 'el-icon-bottom'
                              "
                            ></i
                          ></span>
                        </div>
                        <div>
                          环比&nbsp;&nbsp;<span
                            >{{ item.contrast }}%<i
                              :style="
                                item.contrast == 0
                                  ? 'color: #666666;'
                                  : item.contrast > 0
                                  ? ''
                                  : 'color: #ff0000;'
                              "
                              :class="
                                item.contrast == 0
                                  ? 'el-icon-minus'
                                  : item.contrast > 0
                                  ? 'el-icon-top'
                                  : 'el-icon-bottom'
                              "
                            ></i
                          ></span>
                        </div>
                      </div>
                    </div>
                    <div class="Setting">
                      {{ item.name }}设置率 &nbsp;<span>{{
                        item.SettingRate
                      }}</span
                      >&nbsp;%
                    </div>
                  </div>
                </div>
              </div>
              <div class="monitor" style="margin-top: 10px;">
                <div class="monitorBox" style="border-right: 1px solid #000;">
                  <div class="monitorTop">光伏用户总数</div>
                  <div>
                    <div class="monitorCenter monitorBot">
                      <div class="left">
                        <i style="color: #eccc44;font-weight: 600;"
                          >{{ monitorList1.total }}个</i
                        >&nbsp;&nbsp;
                      </div>
                      <div class="right" style="flex: 1.4;">
                        <div>
                          <i class="Icon" style="color: #71a9dd;">●&nbsp;</i
                          >中压光伏用户&nbsp;<i
                            >{{ monitorList1.mediumUser }}个</i
                          >
                        </div>
                        <div>
                          <i class="Icon" style="color: #78c6b0;">●&nbsp;</i
                          >低压光伏用户&nbsp;<i>{{ monitorList1.lowUser }}个</i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="monitorBox">
                  <div class="monitorTop">总光伏装机容量</div>
                  <div>
                    <div class="monitorCenter monitorBot">
                      <div class="left">
                        <i style="color: #eccc44;font-weight: 600;"
                          >{{ monitorList2.total }}MW</i
                        >&nbsp;&nbsp;
                      </div>
                      <div class="right">
                        <div>
                          <i class="Icon" style="color: #71a9dd;">●&nbsp;</i
                          >中压光伏装机&nbsp;<i
                            >{{ monitorList2.mediumPretend }}MW</i
                          >
                        </div>
                        <div>
                          <i class="Icon" style="color: #78c6b0;">●&nbsp;</i
                          >低压光伏装机&nbsp;<i
                            >{{ monitorList2.lowPretendr }}MW</i
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="24" style="margin-top: 10px;">
            <div class="box" ref="getHeight" :style="'height:' + vh + ';'">
              <div id="quantity" class="quantity">
                <svg-icon
                  class="platform-manage"
                  icon-class="platform-manage"
                />告警监测点数
              </div>
              <div>
                <div
                  id="electr1"
                  style="width:100%;height:100%"
                  :style="
                    ``
                  "
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24" style="margin-top: 10px;">
           <div class="box" :style="'height:' + vh + ';'">
              <div class="quantity">
                <svg-icon
                  class="platform-manage"
                  icon-class="platform-manage"
                />稳态指标超标占比
              </div>
              <div class="steadyState">
                <div class="steadyStateBox">
                  <div style="visibility: hidden;">1</div>
                  <div>谐波电压</div>
                  <div style="line-height:16px;">
                    电压偏差<br />
                    
                  </div>
                  <div>闪变</div>
                </div>
                <div
                  v-for="(item, ind) in steadyStateList"
                  :key="ind"
                  class="steadyStateBox steadyStateBoxs"
                >
                  <div>
                    {{ item.name }}
                  </div>
                  <div class="harmonic">
                    <div>
                      {{ item.harmonic + "%" }} 同比 {{ item.harmonicYoY }}
                      <i
                        :style="
                          item.harmonicYoY == 0
                            ? 'color: #666666;'
                            : item.harmonicYoY > 0
                            ? 'color: #55bcb4;'
                            : 'color: #ff0000;'
                        "
                        :class="
                          item.harmonicYoY == 0
                            ? 'el-icon-minus'
                            : item.harmonicYoY > 0
                            ? 'el-icon-top'
                            : 'el-icon-bottom'
                        "
                      ></i>
                    </div>
                  </div>
                  <div class="threePphase">
                    <div>
                      {{ item.threePphase + "%" }} 同比
                      {{ item.threePphaseYoY }}
                      <i
                        :style="
                          item.threePphaseYoY == 0
                            ? 'color: #666666;'
                            : item.threePphaseYoY > 0
                            ? 'color: #55bcb4;'
                            : 'color: #ff0000;'
                        "
                        :class="
                          item.threePphaseYoY == 0
                            ? 'el-icon-minus'
                            : item.threePphaseYoY > 0
                            ? 'el-icon-top'
                            : 'el-icon-bottom'
                        "
                      ></i>
                    </div>
                  </div>
                  <div class="Flicker">
                    <div>
                      {{ item.Flicker + "%" }} 同比 {{ item.FlickerYoY }}
                      <i
                        :style="
                          item.FlickerYoY == 0
                            ? 'color: #666666;'
                            : item.FlickerYoY > 0
                            ? 'color: #55bcb4;'
                            : 'color: #ff0000;'
                        "
                        :class="
                          item.FlickerYoY == 0
                            ? 'el-icon-minus'
                            : item.FlickerYoY > 0
                            ? 'el-icon-top'
                            : 'el-icon-bottom'
                        "
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7">
        <el-row>
          <el-col :span="24">
            <div class="box" :style="'height:' + vh + ';'">
              <div class="quantity">
                <svg-icon
                  class="platform-manage"
                  icon-class="platform-manage"
                />电压问题
              </div>
              <div class="lowPowerTop">
                <el-button
                  size="mini"
                  plain
                  :class="Voltages == 0 ? 'rotationCss' : ''"
                  @click="Voltage(0)"
                  >高电压</el-button
                >
                <el-button
                  size="mini"
                  plain
                  :class="Voltages == 1 ? 'rotationCss' : ''"
                  @click="Voltage(1)"
                  >低电压</el-button
                >
              </div>
              <el-carousel
                :height="getHeight - 30 + 'px'"
                ref="Voltage"
                indicator-position="none"
                arrow="never"
                :autoplay="false"
              >
                <el-carousel-item :key="0">
                  <div
                    style="width:100%;height:100%;"
                    id="electr6"
                    :style="
                      ``
                    "
                  ></div>
                  <div class="location">
                    <div>Ⅰ类监测点</div>
                    <div>Ⅱ类监测点</div>
                    <div>Ⅲ类监测点</div>
                  </div>
                </el-carousel-item>
                <el-carousel-item :key="1">
                  <div
                    style="width:100%;height:100%;"
                    id="electr7"
                    :style="
                      ``
                    "
                  ></div>
                  <div class="location">
                    <div>Ⅰ类监测点</div>
                    <div>Ⅱ类监测点</div>
                    <div>Ⅲ类监测点</div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
          <el-col :span="24" style="margin-top: 10px;">
            <div class="box" :style="'height:' + vh + ';'">
              <div class="quantity">
                <svg-icon
                  class="platform-manage"
                  icon-class="platform-manage"
                />功率因数问题
              </div>
              <div class="lowPowerTop">
                <el-button
                  size="mini"
                  plain
                  :class="Rotation == 0 ? 'rotationCss' : ''"
                  @click="rotation(0)"
                  >Ⅰ类</el-button
                >
                <el-button
                  size="mini"
                  plain
                  :class="Rotation == 1 ? 'rotationCss' : ''"
                  @click="rotation(1)"
                  >Ⅱ 类</el-button
                >
                <el-button
                  size="mini"
                  plain
                  :class="Rotation == 2 ? 'rotationCss' : ''"
                  @click="rotation(2)"
                  >Ⅲ 类</el-button
                >
              </div>
              <el-carousel
                :height="getHeight + 'px'"
                ref="carousel"
                indicator-position="none"
                arrow="never"
                :autoplay="false"
              >
                <el-carousel-item :key="0">
                  <div
                    style="width:100%;height:100%;"
                    id="electr8"
                    :style="
                      ``
                    "
                  ></div>
                </el-carousel-item>
                <el-carousel-item :key="1">
                  <div
                    style="width:100%;height:100%;"
                    id="electr9"
                    :style="
                      ``
                    "
                  ></div>
                </el-carousel-item>
                <el-carousel-item :key="2">
                  <div
                    style="width:100%;height:100%;"
                    id="electr10"
                    :style="
                      ``
                    "
                  ></div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
          <el-col :span="24" style="margin-top: 10px;">
            <div class="box" :style="'height:' + vh + ';'">
              <div class="quantity">
                <svg-icon
                  class="platform-manage"
                  icon-class="platform-manage"
                />潮流倒送与重过载问题
              </div>
              <div
                style="width:100%;height:100%;"
                id="electr11"
                :style="
                  ``
                "
              ></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10">
        <el-row>
          <el-col :span="24">
            <div class="box" :style="'height:' + vh2 + 'px' + ';padding:1% 1%'">
              <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
                >
              </div>

              <div style="width:100%;height:100%" ref="map">
                <div
                  id="electr4"
                  style="width:100%;height:100%"
                  :style="
                    ``
                  "
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24" style="margin-top: 10px;">
             <div class="box" :style="'height:' + vh + ';'">
              <div class="quantity ">
                <svg-icon
                  class="platform-manage"
                  icon-class="platform-manage"
                />工单转换率/处置率
              </div>
              <div class="WorkOrder">
                <div class="WorkOrderBox" style="border-right: 1px solid #000;">
                  <div class="WorkContent ">
                    <div>异常问题数量</div>
                    <div>
                      <i class="ITop">{{ WorkOrderLeft.abnormal }}</i> 个
                    </div>
                    <div>已关联工单数量</div>
                    <div>
                      <i class="IBottom">{{ WorkOrderLeft.closed }}</i> 个
                    </div>
                  </div>
                  <div
                    ref="Workontent"
                    class="Workontent"
                    style="flex: 1;width:100%;height:100%;"
                  >
                    <div
                      style="width:100%;height:100%;"
                      id="electr2"
                      :style="
                        ``
                      "
                    ></div>
                  </div>
                </div>
                <div class="WorkOrderBox">
                  <div class="WorkContent ">
                    <div>工单总数量</div>
                    <div>
                      <i class="ITop">{{ WorkOrderRight.total }}</i> 个
                    </div>
                    <div>已处理工单数量</div>
                    <div>
                      <i class="IBottom">{{ WorkOrderRight.processed }}</i> 个
                    </div>
                  </div>
                  <div
                    ref="Workontents"
                    class="Workontent"
                    style="flex: 1;width:100%;height:100%;"
                  >
                    <div
                      style="width:100%;height:100%;"
                      id="electr3"
                      :style="
                        ``
                      "
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </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>
</template>
<script>
import echarts from "echarts";
import jquery from "jquery";
import {
  monitor,
  warning,
  workOrder,
  Voltage,
  power,
  trend,
  proportion,
  MapSpot,
  map
} from "@/api/PVoverview.js";

import { viewheight } from "@/assets/commjs/common";
export default {
  data() {
    return {
      name: ``,
      vh: "",
      vh2: "",
      radio1: 2, //监测点分布 超标数量切换
      Rotation: 0, //低功率类点击切换
      Voltages: 0, //电压问题统计切换
      monitorList: {}, //监测点数量
      monitorList1: [], //监测点数量
      monitorList2: [], //监测点数量
      WorkOrderLeft: [], //工单转换率/处置率
      WorkOrderRight: [], //工单转换率/处置率
      steadyStateList: [],
      getHeight: "",
      mapHeight: "",
      MapChart: null,
      zoom: "" //图表焦点校验
    };
  },
  created() {
    this.monitors();
    this.proportions();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.vh = (viewheight() - 28) / 3 + "px";
    this.vh2 = (viewheight() - 18) / 1.494;
    setTimeout(() => {
      this.getHeight = Number(this.$refs.getHeight.offsetHeight - 45);
      this.mapHeight = Number(this.$refs.map.offsetHeight);
    }, 0);
    this.GiveAnAlarm(); // 告警监测点数echarts
    this.WorkOrderLefts(); // 工单转换率/处置率echarts
    this.WorkOrderRights(); // 工单转换率/处置率echarts
    // this.MapLeft(); //地图点
    this.radios(2,'告警');

    this.VoltageOne(); //电压问题统计1
    this.VoltageTwo(); //电压问题统计2
    this.lowPowerOne(); //低功率因素问题 1类
    this.lowPowerTwo(); //低功率因素问题 2类
    this.lowPowerThree(); //低功率因素问题 3类
    this.overload(); // 潮流倒送与重过载问题
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
  },
  methods: {
    // 监测点数量
    monitors() {
     // monitor().then(res => {
      var res = {"data":{"monitor":[{"name":"Ⅰ","total":"35","weeklyRatio":"0.0","contrast":"100","SettingRate":"8.13"},{"name":"Ⅱ ","total":"461","weeklyRatio":"0.0","contrast":"90","SettingRate":"38.32"},{"name":"Ⅲ ","total":"7","weeklyRatio":"0.0","contrast":"0.0","SettingRate":"0.01"}],"photovoltaic":[{"total":"3494","mediumUser":"0","lowUser":"3494"},{"total":"73.73","mediumPretend":"0","lowPretendr":"74"}]},"code":"200"}
        this.monitorList = res.data;
        this.monitorList1 = res.data.photovoltaic[0];
        this.monitorList2 = res.data.photovoltaic[1];
        // alert( this.monitorList.photovoltaic[1].total)
    //  });
    },
    // 告警监测点数 echarts
    async GiveAnAlarm() {
      //const { data } = await warning();
      const { data } = {"data":{"title":"","monitoring":["Ⅰ类监测点","Ⅱ 类监测点","Ⅲ 类监测点"],"legend":["谐波电压","三相电压不平衡度","闪变"],"data":[[0,0,0],[0,0,0],[5.71,0,0]]}}
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr1");
      setTimeout(() => {
        (domID1.style.width = this.$refs.getHeight.offsetWidth + "px"),
          (domID1.style.height = this.$refs.getHeight.offsetHeight - 45 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);
      let echartsData = data;
      let colors = ["#5aaef6", "#61d8ac", "#586e98"];
      let option = {
        title: {},
        legend: {
          data: echartsData.legend,
          right: '25%',
          bottom: 0,
          // textStyle: {
          // 	color: "#000"
          // },
          itemWidth: 12,
          itemHeight: 12
        },
        xAxis: {
          data: echartsData.monitoring,
          axisLabel: {
            inside: false,
            textStyle: {
              color: "#000"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#363F63"
            }
          },
          z: 10
        },
        color: colors,
        grid: {
          top: "5%",
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true
        },
        yAxis: {
          // type:'category',
          show: true,
          boundaryGap: true,
          // data:[0, 50, 100],
          axisLine: {
            lineStyle: {
              show: false
            }
          },
          axisTick: {
            show: false
          },

          axisLabel: {
            formatter: "{value}%", //右侧Y轴文字显示
            textStyle: {
              color: "#000"
            }
          },
          splitLine: {
            lineStyle: {
              show: false
            }
          }
        },
        dataZoom: [
          {
            type: "inside"
          }
        ],

        series: []
      };
      for (let i = 0; i < echartsData.legend.length; i++) {
        option.series.push({
          name: echartsData.legend[i],
          type: "bar",
          stack: "总数",
          itemStyle: {
            color: colors[i]
          },
          barWidth: "45%",
          label: {
            show: true
            // position: "insideRight"
          },
          data: echartsData.data[i],
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示

                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 14,
                  fontWeight: 600
                }
              }
            }
          }
        });
      }
      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function() {
        myChart2.resize();
      }, 0);
    },
    // 工单转换率/处置率 echarts
    async WorkOrderLefts() {
      //const { data } = await workOrder();
      const res = {"data":[{"title":"工单转换率","data":[0.0345],"abnormal":"29","closed":"1"},{"title":"工单处置率","data":[1],"total":"1","processed":"1"}]}
      this.WorkOrderLeft = res.data[0];
      let echarts = require("echarts");
      let domID2 = document.getElementById("electr2");
      setTimeout(() => {
        (domID2.style.width = this.$refs.Workontent.offsetWidth + "px"),
          (domID2.style.height = this.$refs.Workontent.offsetHeight + "px");
      }, 0);
      let myChart2 = echarts.init(domID2);
      let echartsData = res.data[0];
      let option = {
        title: [
          {
            text: echartsData.title,
            textStyle: { fontSize: 14, fontWeight: 500 },
            textAlign: "center",
            left: "43%",
            bottom: "-5PX"
          }
        ],
        series: [
          {
            name: "",
            type: "liquidFill",
            color: ["#5aaef6", "rgba(16, 130, 255, 0.5)"],
            data: echartsData.data,
            center: ["50%", "45%"],
            radius: "75%",
            outline: {
              borderDistance: 2, // 边框与球中间间距
              itemStyle: {
                borderWidth: 2,

                borderColor: "#5aaef6"
              }
            },
            backgroundStyle: {
              color: "#fff"
            },
            itemStyle: {
              opacity: 0.95,
              shadowColor: "rgba(0, 0, 0, 0)"
            },
            label: {
              formatter: function(p) {
                return `{b|${p.value * 100}}%\n{a|${p.seriesName}}`;
              },
              rich: {
                a: {
                  fontSize: 14
                }
              },

              position: ["50%", "50%"],
              fontSize: 16,
              fontWeight: 700,
              fontFamily: "SourceHanSansCN",
              color: "#5aaef6"
            }
          }
        ]
      };

      option && myChart2.setOption(option)
window.echartsArr.push(myChart2);
      setTimeout(function() {
        myChart2.resize();
      }, 0);
    },
    async WorkOrderRights() {
      //const { data } = await workOrder();
      var res = {"data":[{"title":"工单转换率","data":[0.0345],"abnormal":"29","closed":"1"},{"title":"工单处置率","data":[1],"total":"1","processed":"1"}]}
      this.WorkOrderRight = res.data[1];
      let echarts = require("echarts");
      let domID2 = document.getElementById("electr3");
      setTimeout(() => {
        (domID2.style.width = this.$refs.Workontents.offsetWidth + "px"),
          (domID2.style.height = this.$refs.Workontents.offsetHeight + "px");
      }, 0);
      let myChart2 = echarts.init(domID2);
      let echartsData = res.data[1];
      let option = {
        title: [
          {
            text: echartsData.title,
            textStyle: { fontSize: 14, fontWeight: 500 },
            textAlign: "center",
            left: "43%",
            bottom: "-5PX"
          }
        ],
        series: [
          {
            name: "",
            type: "liquidFill",
            color: ["#5aaef6", "rgba(16, 130, 255, 0.5)"],
            data: echartsData.data,
            center: ["50%", "45%"],
            radius: "75%",
            outline: {
              borderDistance: 2, // 边框与球中间间距
              itemStyle: {
                borderWidth: 2,

                borderColor: "#5aaef6"
              }
            },
            backgroundStyle: {
              color: "#fff"
            },
            itemStyle: {
              opacity: 0.95,
              shadowColor: "rgba(0, 0, 0, 0)"
            },
            label: {
              formatter: function(p) {
                return `{b|${p.value * 100}}%\n{a|${p.seriesName}}`;
              },
              rich: {
                a: {
                  fontSize: 14
                }
              },

              position: ["50%", "50%"],
              fontSize: 16,
              fontWeight: 700,
              fontFamily: "SourceHanSansCN",
              color: "#5aaef6"
            }
          }
        ]
      };

      option && myChart2.setOption(option)
window.echartsArr.push(myChart2);
      setTimeout(function() {
        myChart2.resize();
      }, 0);
    },
    // 监测点分布
    radios(e,val) {
      this.radio1 = e;
      //MapSpot().then(res => {
        if (val=='告警') {
          var res = {"data":[{"title":"","monitoring":[],"legend":["Ⅰ类 (变电站)","Ⅱ类 (台区)","Ⅲ类 (用户)"],"data":[[{"name":"沧州","value":[117.591281,38.264408]},{"name":"监测点数量:15","value":[115.236428,38.971666]},{"name":"石家庄1","value":[114.070687,38.189815]},{"name":"石家庄2","value":[114.095795,38.002836]},{"name":"邢台","value":[114.482138,37.124119]}],[{"name":"沧州","value":[117.786941,38.305886]},{"name":"监测点数量:97","value":[115.291619,39.172447]},{"name":"石家庄1","value":[114.346646,38.349364]},{"name":"石家庄2","value":[114.463741,38.090131]},{"name":"邢台","value":[114.574125,37.300698]}],[{"name":"沧州","value":[117.952516,38.349364]},{"name":"保定","value":[115.49399,39.129471]},{"name":"石家庄1","value":[114.6594,38.392816]},{"name":"石家庄2","value":[114.555728,38.206362]},{"name":"邢台","value":[114.702906,37.285999]}]]},{"title":"","monitoring":[],"legend":["Ⅰ类 (变电站)","Ⅱ类 (台区)","Ⅲ类 (用户)"],"data":[[{"name":"测试1","value":[117.591281,38.264408]},{"name":"测试1","value":[115.236428,38.971666]},{"name":"测试1","value":[114.150987,38.380359]},{"name":"测试1","value":[114.095795,38.002836]},{"name":"测试1","value":[114.482138,37.124119]}],[{"name":"测试1","value":[117.73846,38.365875]},{"name":"超标监测点数量：37","value":[115.291619,39.172447]},{"name":"测试3","value":[114.242973,38.539485]},{"name":"测试4","value":[114.463741,38.090131]},{"name":"测试5","value":[114.574125,37.300698]}],[{"name":"测试1","value":[117.922433,38.336899]},{"name":"测试2","value":[115.49399,39.129471]},{"name":"测试3","value":[114.610919,38.626133]},{"name":"测试4","value":[114.555728,38.206362]},{"name":"测试4","value":[114.702906,37.285999]}]]},{"title":"","monitoring":[],"legend":["普通","严重","中级"],"data":[[{"name":"测试5","value":[116.190213,39.152122]}],[{"name":"测试6","value":[116.290213,38.652122]}],[{"name":"测试7","value":[115.490213,38.252122]}]]}]}
           this.MapLeft(res.data[e],'告警');
        }else{
          var res = {"data":[{"title":"","monitoring":[],"legend":["Ⅰ类 (变电站)","Ⅱ类 (台区)","Ⅲ类 (用户)"],"data":[[{"name":"沧州","value":[117.591281,38.264408]},{"name":"监测点数量:15","value":[115.236428,38.971666]},{"name":"石家庄1","value":[114.070687,38.189815]},{"name":"石家庄2","value":[114.095795,38.002836]},{"name":"邢台","value":[114.482138,37.124119]}],[{"name":"沧州","value":[117.786941,38.305886]},{"name":"监测点数量:97","value":[115.291619,39.172447]},{"name":"石家庄1","value":[114.346646,38.349364]},{"name":"石家庄2","value":[114.463741,38.090131]},{"name":"邢台","value":[114.574125,37.300698]}],[{"name":"沧州","value":[117.952516,38.349364]},{"name":"保定","value":[115.49399,39.129471]},{"name":"石家庄1","value":[114.6594,38.392816]},{"name":"石家庄2","value":[114.555728,38.206362]},{"name":"邢台","value":[114.702906,37.285999]}]]},{"title":"","monitoring":[],"legend":["Ⅰ类 (变电站)","Ⅱ类 (台区)","Ⅲ类 (用户)"],"data":[[{"name":"测试1","value":[117.591281,38.264408]},{"name":"测试1","value":[115.236428,38.971666]},{"name":"测试1","value":[114.150987,38.380359]},{"name":"测试1","value":[114.095795,38.002836]},{"name":"测试1","value":[114.482138,37.124119]}],[{"name":"测试1","value":[117.73846,38.365875]},{"name":"超标监测点数量：37","value":[115.291619,39.172447]},{"name":"测试3","value":[114.242973,38.539485]},{"name":"测试4","value":[114.463741,38.090131]},{"name":"测试5","value":[114.574125,37.300698]}],[{"name":"测试1","value":[117.922433,38.336899]},{"name":"测试2","value":[115.49399,39.129471]},{"name":"测试3","value":[114.610919,38.626133]},{"name":"测试4","value":[114.555728,38.206362]},{"name":"测试4","value":[114.702906,37.285999]}]]},{"title":"","monitoring":[],"legend":["普通","严重","中级"],"data":[[{"name":"测试5","value":[116.190213,39.152122]}],[{"name":"测试6","value":[116.290213,38.652122]}],[{"name":"测试7","value":[115.490213,38.252122]}]]}]}
           this.MapLeft(res.data[e]);
        }
       
    //  });
    },

    //  地图左
    async MapLeft(data,val) {
      let _this = this;
      let echarts = require("echarts");
      
      let domID2 = document.getElementById("electr4");


      echarts.init(document.getElementById('electr4')).dispose();


      setTimeout(() => {
        (domID2.style.width = this.$refs.map.offsetWidth + "px"),
          (domID2.style.height = this.$refs.map.offsetHeight - 36 + "px");
      }, 0);
      let myChart2 = echarts.init(domID2);
      let echartsData = data;
        if(val=='告警'){
            let colors = ["#d7ee2a", "#f80108", "#6561fa"];
      jquery.getJSON("https://mock.mengxuegu.com/mock/62a9cfd312c141642463093c/pqs-webpms/system-boot/map", null, function(data) {
        echarts.registerMap("中国", data);
        let option = {
          //   backgroundColor: '#060303', //地图背景色深蓝
          tooltip: {
            trigger: "item",

            formatter: function(params) {
              return params.name;
            }
          },
          geo: {
            show: true,
            map: "中国",
            label: {
              normal: {
                show: true, //是否显示城市名
                textStyle: {
                  color: "#000", //legend字体颜色  深蓝
                  fontSize: 12
                }
                // verticalAlign: 'middle',
                // align: 'left',
              },
              emphasis: {
                show: false
              }
            },
            zoom: 1.2,
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#cbd2ec", //地图填充颜色
                borderColor: "#FFFFFF", //地图边框颜色  蓝
                borderWidth: 2
              },
              emphasis: {
                //   areaColor: '#cbd2ec',//鼠标经过 地图
              }
            }
          },
          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
            }
          },

          visualMap: [
            {
              min: 0, //IF NO WAREHOUSES IN THIS CITY
              max: 1, //填写城市的最大值
          seriesIndex: 0,
                calculable: false,
                align: "left",
                orient: "vertical",
                top: "0",
                left: "20px",
                pieces: [
                  {
                    gt: 200,
                    label: "严重",
                    color: "#ff4a3d",
                  },
                  {
                    gte: 100,
                    lte: 200,
                    label: "中级",
                    color: "#ffa620",
                  },
                  {
                    gte: 0,
                    lt: 100,
                    label: "普通",
                    color: "#0ec7aa",
                  },
                ], ///分段填充自定义颜色

              //       calculable: true,
             
            }
          ],
          series: [
             {
                  name: "",
                  type: "map",
                  map: "china",

                  roam: false,

                  geoIndex: 0,
                  data: [
                    {
                      name: "保定市",
                      value: 210,
                    },
                    {
                      name: "石家庄市",
                      value: 110,
                    },
                    {
                      name: "邢台市",
                      value: 110,
                    },
                    {
                      name: "沧州市",
                      value: 11,
                    },
                    
                  ],
                },
          ]
        };
    
        myChart2.clear(option);
        option && myChart2.setOption(option)
window.echartsArr.push(myChart2);
        setTimeout(function() {
          myChart2.resize();
        }, 0);
      });
  
        }   else{
            let colors = ["#d7ee2a", "#f80108", "#6561fa"];
      jquery.getJSON("https://mock.mengxuegu.com/mock/62a9cfd312c141642463093c/pqs-webpms/system-boot/map", null, function(data) {
        echarts.registerMap("中国", data);
        let option = {
          //   backgroundColor: '#060303', //地图背景色深蓝
          tooltip: {
            trigger: "item",

            formatter: function(params) {
              return params.name;
            }
          },
          geo: {
            show: true,
            map: "中国",
            label: {
              normal: {
                show: true, //是否显示城市名
                textStyle: {
                  color: "#000", //legend字体颜色  深蓝
                  fontSize: 12
                }
                // verticalAlign: 'middle',
                // align: 'left',
              },
              emphasis: {
                show: false
              }
            },
            zoom: 1.2,
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#cbd2ec", //地图填充颜色
                borderColor: "#FFFFFF", //地图边框颜色  蓝
                borderWidth: 2
              },
              emphasis: {
                //   areaColor: '#cbd2ec',//鼠标经过 地图
              }
            }
          },
          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
            }
          },

          visualMap: [
            {
              min: 0, //IF NO WAREHOUSES IN THIS CITY
              max: 1, //填写城市的最大值
              seriesIndex: 0,
              show: false,

              pieces: [
                {
                  value: 100,
                  color: "#5496E6" //根据颜色代码自行更改
                }
                // {
                //       gt: 200,
                //       color: '#EE4C4C',
                //   },
              ], ///分段填充自定义颜色

              //       calculable: true,
              textStyle: {
                color: "#F7F7F7", //legend图标颜色  深灰
                size: 20
              },
              formatter: function(value) {
                return value.toFixed(1);
                //       return "";    左下角图例滑过时显示空值
              }
            }
          ],
          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);
      });
  
        }   


      },
    //稳态指标超标占比
    proportions() {
      //proportion().then(res => {
        var res = {"data":[{"name":"Ⅰ类监测点","harmonic":"0.0","harmonicYoY":"0.0","threePphase":"42.85","threePphaseYoY":"0.0","Flicker":"5.71","FlickerYoY":"0.0"},{"name":"Ⅱ类监测点","harmonic":"0.0","harmonicYoY":"0.0","threePphase":"45.77","threePphaseYoY":"0.0","Flicker":"0.0","FlickerYoY":"0.0"},{"name":"Ⅲ类监测点","harmonic":"0.0","harmonicYoY":"0.0","threePphase":"0.0","threePphaseYoY":"0.0","Flicker":"0.0","FlickerYoY":"0.0"}]}
        this.steadyStateList = res.data;
     // });
    },
    // 电压问题统计 切换
    Voltage(e) {
      this.Voltages = e;
      this.$refs.Voltage.setActiveItem(e);
    },
    // 电压问题统计 echartsn 1类
    async VoltageOne() {
     // const { data } = await Voltage();
     const { data } = {"data":[{"title":"","data":[[{"name":"超标7%-15%","value":15},{"name":"超标15%以上","value":0}],[{"name":"超标7%-15%","value":196},{"name":"超标15%以上","value":15}],[{"name":"超标7%-15%","value":7},{"name":"超标15%以上","value":0}]],"total":[15,211,7]},{"title":"","data":[[{"name":"超标-3%- -10%","value":0},{"name":"超标-10%以下","value":0}],[{"name":"超标-3%- -10%","value":0},{"name":"超标-10%以下","value":0}],[{"name":"超标-3%- -10%","value":0},{"name":"超标-10%以下","value":0}]],"total":[0,0,0]}]}
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr6");
      setTimeout(() => {
        (domID1.style.width = this.$refs.getHeight.offsetWidth - 10 + "px"),
          (domID1.style.height = this.$refs.getHeight.offsetHeight - 90 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);
      let echartsData = data[0];
      let colors = ["#318af9", "#a6dffd"];

      // 加阴影效果

      let option = {
        title: {
          text: "",
          fontColor: "#FFF"
        },
        legend: {
          data: "",
          textStyle: {
            color: "#000"
          },
          top: "0%",
          left: "10%"
        },
        color: colors,
        tooltip: {},
        grid: [
          {
            bottom: "55%",
            top: "15%",
            left: "15%",
            right: "5%"
          }
        ],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "55%"],
            //center: ['50%', '50%'],
            data: echartsData.data[0],

            bottom: "0%",
            top: "0%",
            left: "0%",
            right: "65%",
            label: {
              show: false,
              normal: {
                formatter: function(params) {
                  return echartsData.total[0] + "个";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "600",
                  color: "#e6ce28"
                }
              }
            }
          },
          {
            name: "",
            type: "pie",
            radius: ["40%", "55%"],
            //center: ['50%', '50%'],
            data: echartsData.data[1],
            bottom: "0%",
            top: "0%",
            left: "33%",
            right: "32%",
            label: {
              show: false,
              normal: {
                formatter: function(params) {
                  return echartsData.total[1] + "个";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "600",
                  color: "#e6ce28"
                }
              }
            }
          },
          {
            name: "",

            type: "pie",
            radius: ["40%", "55%"],
            //center: ['50%', '50%'],
            data: echartsData.data[2],
            bottom: "0%",
            top: "0%",
            left: "65%",
            right: "0%",
            label: {
              show: false,
              normal: {
                formatter: function(params) {
                  return echartsData.total[2] + "个";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "600",
                  color: "#e6ce28"
                }
              }
            }
          }
        ]
      };
      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function() {
        myChart2.resize();
      }, 0);
    },
    // 电压问题统计 echartsn 2类
    async VoltageTwo() {
      //const { data } = await Voltage();
      const {data} = {"data":[{"title":"","data":[[{"name":"超标7%-15%","value":15},{"name":"超标15%以上","value":0}],[{"name":"超标7%-15%","value":196},{"name":"超标15%以上","value":15}],[{"name":"超标7%-15%","value":7},{"name":"超标15%以上","value":0}]],"total":[15,211,7]},{"title":"","data":[[{"name":"超标-3%- -10%","value":0},{"name":"超标-10%以下","value":0}],[{"name":"超标-3%- -10%","value":0},{"name":"超标-10%以下","value":0}],[{"name":"超标-3%- -10%","value":0},{"name":"超标-10%以下","value":0}]],"total":[0,0,0]}]}
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr7");
      setTimeout(() => {
        (domID1.style.width = this.$refs.getHeight.offsetWidth - 10 + "px"),
          (domID1.style.height = this.$refs.getHeight.offsetHeight - 90 + "px");
      }, 0);

      let myChart2 = echarts.init(domID1);
      let echartsData = data[1];
      let colors = ["#318af9", "#a6dffd"];

      // 加阴影效果

      let option = {
        title: {
          text: "",
          fontColor: "#FFF"
        },
        legend: {
          data: "",
          textStyle: {
            color: "#000"
          },
          top: "0%",
          left: "10%"
        },
        color: colors,
        tooltip: {},
        grid: [
          {
            bottom: "50%",
            top: "15%",
            left: "15%",
            right: "5%"
          }
        ],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "55%"],
            //center: ['50%', '50%'],
            data: echartsData.data[0],

            bottom: "0%",
            top: "0%",
            left: "0%",
            right: "65%",
            label: {
              show: false,
              normal: {
                formatter: function(params) {
                  return echartsData.total[0] + "个";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "600",
                  color: "#e6ce28"
                }
              }
            }
          },
          {
            name: "",
            type: "pie",
            radius: ["40%", "55%"],
            //center: ['50%', '50%'],
            data: echartsData.data[1],
            bottom: "0%",
            top: "0%",
            left: "33%",
            right: "32%",
            label: {
              show: false,
              normal: {
                formatter: function(params) {
                  return echartsData.total[1] + "个";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "600",
                  color: "#e6ce28"
                }
              }
            }
          },
          {
            name: "",

            type: "pie",
            radius: ["40%", "55%"],
            //center: ['50%', '50%'],
            data: echartsData.data[2],
            bottom: "0%",
            top: "0%",
            left: "65%",
            right: "0%",
            label: {
              show: false,
              normal: {
                formatter: function(params) {
                  return echartsData.total[2] + "个";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "600",
                  color: "#e6ce28"
                }
              }
            }
          }
        ]
      };
      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function() {
        myChart2.resize();
      }, 0);
    },

    // 低功率因素问题 点击类 切换
    rotation(e) {
      this.Rotation = e;
      this.$refs.carousel.setActiveItem(e);
    },
    // 低功率因素问题 echarts8
    async lowPowerOne() {
      //const { data } = await power();
      const {data} = {"data":[{"data":[{"name":"0.8-0.9","value":0},{"name":"0.7-0.8","value":0},{"name":"0.7以下","value":0}],"total":"0"},{"data":[{"name":"0.8-0.9","value":73},{"name":"0.7-0.8","value":52},{"name":"0.7以下","value":14}],"total":"139"},{"data":[{"name":"0.8-0.9","value":0},{"name":"0.7-0.8","value":0},{"name":"0.7以下","value":0}],"total":"0"}]}
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr8");

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

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

      let colors = ["#318af9", "#5fdcb0", "#fcdc4f"];

      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: "27%",
          top: "30%",
          // x: 'left',
          // y: 'center',
          textStyle: {
            fontSize: 24
            // color: "#e7c932"
          }
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: "15%",
          top: "20%",
          //  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}     ${value}个}`;
          }
        },
        series: [
          {
            type: "pie",
            center: ["30%", "38%"],
            radius: ["50%", "70%"],
            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: false,
              position: "outside",
              formatter: "{a|{b}:{d}%}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 1,
                  width: 1,
                  height: 1,
                  padding: [1, 1, 0, -4]
                },
                a: {
                  padding: [-15, 7, -10, 7]
                }
              }
            },
            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);
    },
    // 低功率因素问题 echarts9
    async lowPowerTwo() {
     // const { data } = await power();
     const {data} = {"data":[{"data":[{"name":"0.8-0.9","value":0},{"name":"0.7-0.8","value":0},{"name":"0.7以下","value":0}],"total":"0"},{"data":[{"name":"0.8-0.9","value":73},{"name":"0.7-0.8","value":52},{"name":"0.7以下","value":14}],"total":"139"},{"data":[{"name":"0.8-0.9","value":0},{"name":"0.7-0.8","value":0},{"name":"0.7以下","value":0}],"total":"0"}]}
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr9");

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

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

      let colors = ["#318af9", "#5fdcb0", "#fcdc4f"];

      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: "30%",
          // x: 'left',
          // y: 'center',
          textStyle: {
            fontSize: 24
            // color: "#e7c932"
          }
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
           right: "15%",
          top: "20%",
          //  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}     ${value}个}`;
          }
        },
        series: [
          {
            type: "pie",
            center: ["30%", "38%"],
            radius: ["50%", "70%"],
            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: false,
              position: "outside",
              formatter: "{a|{b}:{d}%}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 1,
                  width: 1,
                  height: 1,
                  padding: [1, 1, 0, -4]
                },
                a: {
                  padding: [-15, 7, -10, 7]
                }
              }
            },
            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);
    },
    // 低功率因素问题 echarts10
    async lowPowerThree() {
     // const { data } = await power();
     const {data} = {"data":[{"data":[{"name":"0.8-0.9","value":0},{"name":"0.7-0.8","value":0},{"name":"0.7以下","value":0}],"total":"0"},{"data":[{"name":"0.8-0.9","value":73},{"name":"0.7-0.8","value":52},{"name":"0.7以下","value":14}],"total":"139"},{"data":[{"name":"0.8-0.9","value":0},{"name":"0.7-0.8","value":0},{"name":"0.7以下","value":0}],"total":"0"}]}
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr10");

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

      let myChart2 = echarts.init(domID1);
      let echartsData = data[2];

      let colors = ["#318af9", "#5fdcb0", "#fcdc4f"];

      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: "27%",
          top: "30%",
          // x: 'left',
          // y: 'center',
          textStyle: {
            fontSize: 24
            // color: "#e7c932"
          }
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
         right: "15%",
          top: "20%",
          //  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}     ${value}个}`;
          }
        },
        series: [
          {
            type: "pie",
            center: ["30%", "38%"],
            radius: ["50%", "70%"],
            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: false,
              position: "outside",
              formatter: "{a|{b}:{d}%}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 1,
                  width: 1,
                  height: 1,
                  padding: [1, 1, 0, -4]
                },
                a: {
                  padding: [-15, 7, -10, 7]
                }
              }
            },
            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);
    },
    // 潮流倒送与重过载问题 echarts
    async overload() {
     // const { data } = await trend();
     const { data } = {"data":{"title":"title","monitoring":["台区","线路","主变"],"legend":["潮流倒送","重过载"],"data":[[83.3,42.86,0],[83.3,0,0],[0,0,0]]}}
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr11");

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

      let myChart2 = echarts.init(domID1);
      let echartsData = data;
      let colors = ["#5aaef6", "#69d5ac"];
      let option = {
        title: {},
        legend: {
          data: echartsData.legend,
          right: 'center',
          bottom: 0,
          // textStyle: {
          // 	color: "#e7c932"
          // },
          itemWidth: 12,
          itemHeight: 12
        },
        xAxis: {
          data: echartsData.monitoring,
          axisLabel: {
            inside: false,
            textStyle: {
              color: "#000"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#363F63"
            }
          },
          z: 10
        },
        color: colors,
        grid: {
          top: "5%",
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true
        },
        yAxis: {
          // type:'category',
          show: true,
          boundaryGap: true,
          // data:[0, 50, 100],
          axisLine: {
            lineStyle: {
              show: false
            }
          },
          axisTick: {
            show: false
          },

          axisLabel: {
            textStyle: {
              color: "#000"
            }
          },
          splitLine: {
            lineStyle: {
              show: false
            }
          }
        },
        dataZoom: [
          {
            type: "inside"
          }
        ],

        series: []
      };
      for (let i = 0; i < echartsData.legend.length; i++) {
        option.series.push({
          name: echartsData.legend[i],
          type: "bar",
          itemStyle: {
            color: colors[i]
          },
          barGap: 0,
          barWidth: "30%",
          label: {
            show: true
            // position: "insideRight"
          },
          data: echartsData.data[i],
          itemStyle: {
            normal: {
              label: {
                show: false, //开启显示

                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 14,
                  fontWeight: 600
                }
              }
            }
          }
        });
      }
      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function() {
        myChart2.resize();
      }, 0);
    }
  }
};
</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 {
      display: flex;
      justify-content: center;
      .el-button {
        width: 160px;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        border-radius: 5px;
        background-color: #c9c9c9;
      }
      .buttons {
        // background-color: $themeColor;
        background: linear-gradient(180deg, $themeColor 16%, $themeColor 100%);
      }
    }

    .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;

    }
    }

  }
}
</style>
