<template>
  <div v-loading="loading" style="position: relative; padding: 10px" id="dept">
    <el-form v-show="false" ref="form" :inline="true" :model="form" label-width="80px">
      <el-form-item>
        <Timeinterval ref="Timeinterval" :interval="3" />
      </el-form-item>
    </el-form>

    <svg-icon v-show="isfanhui" class="back" icon-class="back" @click="fanhui" />
    <div class="boxTop">
      <div class="l">网公司冀北电力有限公司</div>
      <div class="r">
        <el-button :class="control == 1 ? 'control' : ''" @click="control = 1">变电站统计</el-button>
        <el-button :class="control == 2 ? 'control' : ''" @click="control = 2">主网监测点</el-button>
        <el-button :class="control == 3 ? 'control' : ''" @click="control = 3">分布式光伏</el-button>
        <el-checkbox style="width: 110px; text-align: center" v-model="checked"
          @change="changeChecked">功能全选</el-checkbox>
      </div>
    </div>

    <!-- 右上角搜索框 -->
    <!-- <div class="selectBox"></div> -->
    <div class="BoxB">
      <div v-if="control == 1 ? true : false">
        <el-button :class="control1.a1 == true ? 'controls' : ''" @click="CLICKControl1('a1')">在运变电站统计</el-button>
        <el-button :class="control1.a2 == true ? 'controls' : ''" @click="CLICKControl1('a2')">区域变电站统计</el-button>
        <el-button :class="control1.a3 ? 'controls' : ''" @click="CLICKControl1('a3')">变电站谐波日曲线</el-button>
        <el-button :class="control1.a4 ? 'controls' : ''" @click="CLICKControl1('a4')">变电站功率日曲线</el-button>
        <el-button :class="control1.a5 ? 'controls' : ''" @click="CLICKControl1('a5')">变电站污染指数</el-button>
        <el-button :class="control1.a6 ? 'controls' : ''" @click="CLICKControl1('a6')">
          变电站暂态事件列表</el-button>
        <el-select style="margin-left: 5px" v-show="control1.a3 || control1.a4" @change="selectClick"
          :popper-append-to-body="false" v-model="valueList" filterable value-key="powerId" placeholder="请输入监测点名称">
          <el-option v-for="item in siteList" :key="item.powerId" :label="item.powerName" :value="item">
          </el-option>
        </el-select>
      </div>
      <div v-if="control == 2 ? true : false">
        <el-button :class="control2.a1 ? 'controls' : ''" @click="CLICKControl2('a1')">台账综合统计</el-button>
        <el-button :class="control2.a2 ? 'controls' : ''" @click="CLICKControl2('a2')">台账区域统计</el-button>
        <el-button :class="control2.a3 ? 'controls' : ''" @click="CLICKControl2('a3')">通讯状态列表</el-button>
        <el-button :class="control2.a4 ? 'controls' : ''" @click="CLICKControl2('a4')">稳态综合统计</el-button>
        <el-button :class="control2.a5 ? 'controls' : ''" @click="CLICKControl2('a5')">稳态区域统计</el-button>
        <el-button :class="control2.a6 ? 'controls' : ''" @click="CLICKControl2('a6')">干扰源越限统计</el-button>
        <el-button :class="control2.a7 ? 'controls' : ''" @click="CLICKControl2('a7')">污染指数统计</el-button>
        <el-button :class="control2.a8 ? 'controls' : ''" @click="CLICKControl2('a8')">暂态综合统计</el-button>
        <el-button :class="control2.a9 ? 'controls' : ''" @click="CLICKControl2('a9')">暂态区域统计</el-button>
        <el-button :class="control2.a10 ? 'controls' : ''" @click="CLICKControl2('a10')">暂态事件列表</el-button>
      </div>
      <div v-if="control == 3 ? true : false">
        <el-button :class="control3.a1 ? 'controls' : ''" @click="CLICKControl3('a1')">台账综合统计</el-button>
        <el-button :class="control3.a2 ? 'controls' : ''" @click="CLICKControl3('a2')">分布式光伏容量</el-button>
        <el-button :class="control3.a3 ? 'controls' : ''" @click="CLICKControl3('a3')">分布式光伏渗透率</el-button>
        <el-button :class="control3.a4 ? 'controls' : ''" @click="CLICKControl3('a4')">分布式光伏消纳能力</el-button>
        <el-button :class="control3.a5 ? 'controls' : ''" @click="CLICKControl3('a5')">潮流倒送和重过载</el-button>
        <el-button :class="control3.a6 ? 'controls' : ''" @click="CLICKControl3('a6')">高低电压统计</el-button>
        <el-button :class="control3.a7 ? 'controls' : ''" @click="CLICKControl3('a7')">低功率因数问题</el-button>
        <el-button :class="control3.a8 ? 'controls' : ''" @click="CLICKControl3('a8')">暂态综合统计</el-button>
        <el-button :class="control3.a9 ? 'controls' : ''" @click="CLICKControl3('a9')">暂态区域统计</el-button>
        <el-button :class="control3.a10 ? 'controls' : ''" @click="CLICKControl3('a10')">暂态事件列表</el-button>
      </div>
    </div>
    <el-row>
      <el-col :span="24">
        <div style="width: 100%; height: 100%" id="electrMap"></div>
      </el-col>
    </el-row>
    <div class="iconBox">
      <div class="div">
        <img src="@/assets/jbzl/35kv.png" alt="" /> <span>35kV变电站</span>
      </div>
      <div class="div">
        <img src="@/assets/jbzl/110kv.png" alt="" /> <span>110kV变电站</span>
      </div>
      <div class="div">
        <img src="@/assets/jbzl/220kv.png" alt="" /> <span>220kV变电站</span>
      </div>
      <div class="div">
        <img src="@/assets/jbzl/500kv.png" alt="" /> <span>500kV变电站</span>
      </div>
      <div class="div">
        <img src="@/assets/jbzl/500kvQjz.png" alt="" /> <span>500kV桥接站</span>
      </div>
      <div class="div">
        <img src="@/assets/jbzl/1000kv.png" alt="" /> <span>1000kV变电站</span>
      </div>
      <div class="div">
        <img src="@/assets/jbzl/bdzty.png" alt="" /> <span>停运变电站</span>
      </div>
      <div class="div">
        <img src="@/assets/jbzl/cxdc.png" alt="" /> <span>抽蓄电厂</span>
      </div>
      <div class="div">
        <img src="@/assets/jbzl/bcz.png" alt="" /> <span>串补站</span>
      </div>
      <div class="div">
        <img src="@/assets/jbzl/hdc.png" alt="" /> <span>火电厂</span>
      </div>
      <div class="div">
        <img src="@/assets/jbzl/zljhz.png" alt="" /> <span>直流换流站</span>
      </div>
    </div>


    <el-dialog title="变电站详情" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="name" align="center" label="变电站名称"></el-table-column>
        <el-table-column property="type" align="center" label="干扰源类型"></el-table-column>
        <el-table-column property="zbyx" align="center" label="指标越限"></el-table-column>
        <el-table-column property="jcdcb" align="center" label="监测点超标"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 变电站统计 -->
    <Statistics class="StandingBook" :time="time" :control1="control1"
      v-show="control == 1 && (control1.a1 || control1.a2)" />
    <Curve ref="Curve" class="StandingBook Transient" :time="time" :valueList="valueList" :control1="control1" v-show="control == 1 &&
      (control1.a3 || control1.a4 || control1.a5 || control1.a6)
      " />

    <!-- 主网监测点 -->
    <AStandingBook class="StandingBook" :time="time" :control2="control2"
      v-show="control == 2 && (control2.a1 || control2.a2 || control2.a3)" />
    <ASteady class="StandingBook Steady" :time="time" v-show="control == 2 &&
      (control2.a4 || control2.a5 || control2.a6 || control2.a7)
      " :control2="control2" />
    <ATransient class="StandingBook Transient" :time="time"
      v-show="control == 2 && (control2.a8 || control2.a9 || control2.a10)" :control2="control2" />
    <!-- 分布式光伏 -->
    <DStandingBook class="StandingBook" :time="time" :control3="control3"
      v-show="control == 3 && (control3.a1 || control3.a2 || control3.a3)" />
    <DSteady class="StandingBook Steady" :time="time" v-show="control == 3 &&
      (control3.a4 || control3.a5 || control3.a6 || control3.a7)
      " :control3="control3" />
    <DTransient class="StandingBook Transient" :time="time"
      v-show="control == 3 && (control3.a8 || control3.a9 || control3.a10)" :control3="control3" />
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import {
  getSubstationExpendInfo,
  getStatationStat,
  getHarmonicCurve,
  getActiveCurve,

} from "@/api/JIBEIDistributed-management/analysismodule";
import Timeinterval from "@/views/components/TimePicker/index4";
import Assets from "./components/Monitoring/Assets";
import jquery from "jquery";
import Distributed from "./components/Monitoring/Distributed";
import AStandingBook from "./components/Monitoring1/Assets/StandingBook";
import ASteady from "./components/Monitoring1/Assets/Steady";
import ATransient from "./components/Monitoring1/Assets/Transient";
import DStandingBook from "./components/Monitoring1/Distributed/StandingBook";
import DSteady from "./components/Monitoring1/Distributed/Steady";
import DTransient from "./components/Monitoring1/Distributed/Transient";
import Statistics from "./components/Monitoring1/statistics/statistics";
import Curve from "./components/Monitoring1/statistics/curve";
export default {
  components: {
    Timeinterval,
    Assets,
    Distributed,
    AStandingBook,
    ASteady,
    ATransient,
    DStandingBook,
    DSteady,
    DTransient,
    Statistics,
    Curve,
  },
  props: {},
  data() {
    return {
      dialogTableVisible: false,
      siteList: [],
      checked: false,
      myChart: null,
      zoom: "",
      valueList: {},
      control: 1,
      controls: 0,
      control1: {
        a1: false,
        a2: false,
        a3: false,
        a4: false,
        a5: false,
        a6: false,
      },
      control2: {
        a1: false,
        a2: false,
        a3: false,
        a4: false,
        a5: false,
        a6: false,
        a7: false,
        a8: false,
        a9: false,
        a10: false,
      },
      control3: {
        a1: false,
        a2: false,
        a3: false,
        a4: false,
        a5: false,
        a6: false,
        a7: false,
        a8: false,
        a9: false,
        a10: false,
      },
      time: [],
      form: {},
      loading: false,
      vh: undefined,
      view: true,
      isfanhui: false,
      mapData: [],
      resData: {},

      gridData: [{
        name: '200kV1号测试变电站',
        type: '电气自动化',
        zbyx: ' 85.23%',
        jcdcb: '15%'
      }, {
        name: '200kV1号测试变电站',
        type: '电气自动化',
        zbyx: ' 85.23%',
        jcdcb: '15%'
      }, {
        name: '200kV1号测试变电站',
        type: '电气自动化',
        zbyx: ' 85.23%',
        jcdcb: '15%'
      }, {
        name: '200kV1号测试变电站',
        type: '电气自动化',
        zbyx: ' 85.23%',
        jcdcb: '15%'
      }, {
        name: '200kV1号测试变电站',
        type: '电气自动化',
        zbyx: ' 85.23%',
        jcdcb: '15%'
      }, {
        name: '200kV1号测试变电站',
        type: '电气自动化',
        zbyx: ' 85.23%',
        jcdcb: '15%'
      }, {
        name: '200kV1号测试变电站',
        type: '电气自动化',
        zbyx: ' 85.23%',
        jcdcb: '15%'
      },],
    };
  },
  created() { },
  mounted() {
    this.time = [
      this.$refs.Timeinterval.timeValue[0],
      this.$refs.Timeinterval.timeValue[1],
    ];
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });

    this.vh = document.getElementById("app-main-in").offsetHeight;
    this.info();
    this.getStatation();
  },
  methods: {
    // 下拉框点击
    selectClick(e) {
      // getHarmonicCurve,//获取变压器谐波日曲线
      // getActiveCurve,//获取变压器功率日曲线
      getHarmonicCurve({
        subID: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        voltageLevel: this.valueList.powerId,
      }).then((res) => {
        this.$refs.Curve.electrs5(res.data);
      });
      getActiveCurve({
        subID: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        voltageLevel: this.valueList.powerId,
      }).then((res) => {
        this.$refs.Curve.electrs6(res.data);
      });
    },
    async info() {
      await getSubstationExpendInfo({
        id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        // id: "0d52f9f6e43ec0ee83013cd32da93f66",
      }).then((res) => {
        this.resData = res.data;
      });
      this.chart();
    },
    getStatation() {
      getStatationStat({
        orgID: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
      }).then((res) => {
        this.valueList = res.data[0];
        this.selectClick();
        this.siteList = res.data;
      });
    },
    //返回
    fanhui() {
      this.isfanhui = false;
      this.chart();
    },
    chart() {
      let _this = this;

      //各份的地图json文件
      var provinces = {
        承德市: "./static/mapjson/承德市.json",
        廊坊市: "./static/mapjson/廊坊市.json",
        唐山市: "./static/mapjson/唐山市.json",
        张家口市: "./static/mapjson/张家口市.json",
        秦皇岛市: "./static/mapjson/秦皇岛市.json",
      };

      loadMap(
        "./static/mapjson/" +
        // JSON.parse(window.sessionStorage.getItem("Info")).areaName +
        "冀北" +
        ".json"
      );

      function loadMap(mapCode, name) {
        var resList = _this.resData;

        if (name != undefined) {
          // let str = "网公司" + name.split("市")[0] + "供电公司";
          for (let k in _this.resData) {
            if (k + "市" == name) {
              resList = { k: _this.resData[k] };
              break;
            } else {
              resList = {};
            }
          }
        }

        jquery.get(mapCode, function (data) {
          if (!(data instanceof Object)) {
            loadMap("./static/mapjson/冀北.json", "");
            return;
          }
          if (data) {
            if (_this.myChart != null) {
              _this.myChart.dispose();
            }
          }

          let echarts = require("echarts");
          echarts.registerMap("", data);
          let domID2 = document.getElementById("electrMap");
          setTimeout(() => {
            (domID2.style.width =
              window.sessionStorage.getItem("appwidth") - 40 + "px"),
              (domID2.style.height =
                window.sessionStorage.getItem("appheight") - 65 + "px");
          }, 0);
          _this.myChart = echarts.init(domID2);
          _this.mapData = [];

          for (let k in resList) {
            _this.mapData.push(...resList[k]);
          }

          let lineTwo = [];
          let lineOne = [
            // [
            //   {
            //     name: "",
            //     value: [115.463633, 36.098258],
            //   },
            //   {
            //     name: "",
            //     value: [116.352486, 39.894358],
            //   },
            // ],
          ];
          let mapList = [];
          _this.mapData.forEach((item) => {
            // 点位
            let nameP = "";
            dicData("Substation_Type", []).forEach((val) => {
              if (val.id == item.type) {
                nameP = val.name;
              }
              return;
            });
            dicData("Dev_Voltage", []).forEach((val) => {
              if (val.id == item.voltageLevel) {
                item.voltageLevelName = val.name;
              }
              return;
            });
            mapList.push({
              name: item.name,
              voltageLevelName: item.voltageLevelName,
              deptName: item.deptName,
              value: [item.lng, item.lat, nameP],
            });
            //  单双 回路
            if (item.connectType == 1) {
              lineOne.push(item.sites);
            } else if (item.connectType == 2) {
              lineTwo.push(item.sites);
            }
          });

          let echartsColor = JSON.parse(window.localStorage.echartsColor);

          let option = {
            //   backgroundColor: '#060303', //地图背景色深蓝
            tooltip: {
              trigger: "item",
              showDelay: 0,
              hideDelay: 0,
              enterable: true,
              transitionDuration: 0,

              axisPointer: {
                type: "shadow",
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
              },
              textStyle: {
                color: "#000",
                fontStyle: "normal",
                opacity: 0.35,
                fontSize: 14,
              },
              //   backgroundColor: "rgba(0,0,0,0.35)",
              borderWidth: 0,
              extraCssText: "z-index:100",
              formatter: function (params) {
                // console.log(params);
                return params.name == ""
                  ? ""
                  : "<span>名称：" +
                  params.name +
                  (params.componentSubType == "map"
                    ? ""
                    : `</span><br/>电压等级：
                   ${params.data.voltageLevelName}
                    </span>
                    </span>
                    `);
              },
            },
            // <br/>电压等级：
            //         ${params.data.typeName}
            geo: {
              show: true,
              map: "",
              roam: true,
              top: "center",
              left: "center",
              zoom: 1.2,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: echartsColor.WordColor,
                    fontSize: 12,
                    fontFamily: "Arial",
                  },
                },
              },
              regions: [
                {
                  name: "南海诸岛",
                  itemStyle: {
                    // 隐藏地图
                    normal: {
                      opacity: 0, // 为 0 时不绘制该图形
                    },
                  },
                  label: {
                    show: false, // 隐藏文字
                  },
                },
              ],

              itemStyle: {
                normal: {
                  color: "rgba(51, 69, 129, .8)", //地图背景色
                  borderColor: "#999999",
                  borderWidth: 1,
                  areaColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(147, 135, 148, .2)", // 100% 处的颜色
                      },
                    ],
                    globalCoord: false, // 缺省为 false
                  },
                  shadowColor: "rgba(128, 217, 248, 1)",
                  // shadowColor: 'rgba(255, 255, 255, 1)',
                  shadowOffsetX: -2,
                  shadowOffsetY: 2,
                  shadowBlur: 10,
                },
                emphasis: {
                  areaColor: "#ccc",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  borderWidth: 0,
                },
              },
            },

            legend: {
              orient: "vertical",
              left: 26,
              bottom: 40,
              itemWidth: 16,
              itemHeight: 16,

              data: [
                {
                  name: "正常",
                },
                {
                  name: "中断",
                },
                {
                  name: "变电站",
                },
              ],
            },
            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: "#fff", //legend图标颜色  深灰
                  size: 20,
                },
                formatter: function (value) {
                  return value.toFixed(1);
                  //       return "";    左下角图例滑过时显示空值
                },
              },
            ],
            series: [
              {
                type: "lines",
                name: "",
                zlevel: 2,
              },
            ],
          };
          // 单线
          lineOne.forEach((item, i) => {
            let linesX = [];
            linesX[i] = [];
            item.forEach((v) => {
              linesX[i].push(v.value);
            });
            option.series.push({
              name: "",
              type: "lines",
              polyline: true,
              lineStyle: {
                normal: {
                  width: 2,
                  color: "#000", // 线条颜色
                  //   shadowColor: "#000",
                  // shadowBlur: 5,
                  opacity: 0.5,
                },
              },

              // effect: {
              //   show: true,
              //   symbolSize: 0,
              //   constantSpeed: 50 * 0.63,
              //   trailLength: 0.5 * 0.63,
              // },

              data: [
                {
                  coords: linesX[i],
                },
                // ,
              ],
            });
          });

          // 双线
          lineTwo.forEach((item, i) => {
            let linesX = [];
            linesX[i] = [];
            item.forEach((v) => {
              linesX[i].push(v.value);
            });

            option.series.push({
              name: "",
              type: "lines",
              polyline: true,
              lineStyle: {
                normal: {
                  width: 3,
                  color: "#fff", // 线条颜色
                  shadowColor: "#000",
                  shadowBlur: 5,
                  opacity: 1,
                },
              },

              // effect: {
              //   show: true,
              //   symbolSize: 0,
              //   constantSpeed: 50 * 0.63,
              //   trailLength: 0.5 * 0.63,
              // },

              data: [
                {
                  coords: linesX[i],
                },
                // ,
              ],
            });
          });
          // 地图点
          // mapList.forEach((item, i) => {
          option.series.push({
            name: "Planned_JD_DC",
            type: "scatter",
            coordinateSystem: "geo",
            data: mapList,
            // "image://" + require("@/assets/jbzl/bdzty.png"),
            symbol: (params) => {
              if (params[2] == "35kV变电站") {
                return "image://" + require("@/assets/jbzl/35kv.png");
              } else if (params[2] == "110kV变电站") {
                return "image://" + require("@/assets/jbzl/110kv.png");
              } else if (params[2] == "220kV变电站") {
                return "image://" + require("@/assets/jbzl/220kv.png");
              } else if (params[2] == "500kV变电站") {
                return "image://" + require("@/assets/jbzl/500kv.png");
              } else if (params[2] == "500kV桥接站") {
                return "image://" + require("@/assets/jbzl/500kvQjz.png");
              } else if (params[2] == "1000kV变电站") {
                return "image://" + require("@/assets/jbzl/1000kv.png");
              } else if (params[2] == "停运变电站") {
                return "image://" + require("@/assets/jbzl/bdzty.png");
              } else if (params[2] == "抽蓄电厂") {
                return "image://" + require("@/assets/jbzl/cxdc.png");
              } else if (params[2] == "串补站") {
                return "image://" + require("@/assets/jbzl/bcz.png");
              } else if (params[2] == "火电厂") {
                return "image://" + require("@/assets/jbzl/hdc.png");
              } else if (params[2] == "直流换流站") {
                return "image://" + require("@/assets/jbzl/zljhz.png");
              }
            },
            symbolSize: function (val) {
              return 20;
            },
            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: "#4bbbb2",
                borderWidth: 2,
                borderColor: "#b4dccd",
              },
            },
            // ,
            // });
          });

          _this.myChart.setOption(option)
          window.echartsArr.push(_this.myChart);
          setTimeout(() => {
            _this.myChart.resize();
          }, 200);
          var timeFn = null;
          //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
          _this.myChart.on("click", function (params) {
            console.log("=====", params)
            //  _this.$router.push({path:  "/dashboard/index"});
            _this.dialogTableVisible = true
            clearTimeout(timeFn);
            //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
            timeFn = setTimeout(function () {
              var name = params.name; //地区name

              var mapCode = provinces[name]; //地区的json数据
              if (!mapCode) {
                // alert("无此区域地图显示");
                return;
              }
              if (name != "冀北") {
                _this.isfanhui = true;
              }
              loadMap(mapCode, name);
            }, 250);
          });
          // 绑定双击事件，返回全国地图
          // _this.myChart.on("dblclick", function (params) {
          //   //当双击事件发生时，清除单击事件，仅响应双击事件
          //   clearTimeout(timeFn);
          //   _this.isfanhui = false;
          //   //返回全国地图
          //   loadMap("./static/mapjson/全国.json", "");
          // });
        });
      }
    },
    // 点击1
    CLICKControl1(val) {
      this.control1[val] = !this.control1[val];
    },
    // 点击2
    CLICKControl2(val) {
      this.control2[val] = !this.control2[val];
    },
    // 点击3
    CLICKControl3(val) {
      this.control3[val] = !this.control3[val];
    },
    changeChecked(e) {
      if (this.control == 1) {
        this.control1 = {
          a1: e,
          a2: e,
          a3: e,
          a4: e,
          a5: e,
          a6: e,
        };
      } else if (this.control == 2) {
        this.control2 = {
          a1: e,
          a2: e,
          a3: e,
          a4: e,
          a5: e,
          a6: e,
          a7: e,
          a8: e,
          a9: e,
          a10: e,
        };
      } else if (this.control == 3) {
        this.control3 = {
          a1: e,
          a2: e,
          a3: e,
          a4: e,
          a5: e,
          a6: e,
          a7: e,
          a8: e,
          a9: e,
          a10: e,
        };
      }
    },
  },

  computed: {},

  watch: {
    control() {
      this.control1 = {
        a1: false,
        a2: false,
        a3: false,
        a4: false,
        a5: false,
        a6: false,
      };
      this.control2 = {
        a1: false,
        a2: false,
        a3: false,
        a4: false,
        a5: false,
        a6: false,
        a7: false,
        a8: false,
        a9: false,
        a10: false,
      };
      this.control3 = {
        a1: false,
        a2: false,
        a3: false,
        a4: false,
        a5: false,
        a6: false,
        a7: false,
        a8: false,
        a9: false,
        a10: false,
      };
    },
    control1: {
      handler(newValue, oldValue) {
        let i = 0;
        for (let k in this.control1) {
          if (this.control1[k]) {
            i++;
          }
        }
        if (i == 6) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      },
      deep: true,
    },
    control2: {
      handler(newValue, oldValue) {
        let i = 0;
        for (let k in this.control2) {
          if (this.control2[k]) {
            i++;
          }
        }
        if (i == 10) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      },
      deep: true,
    },
    control3: {
      handler(newValue, oldValue) {
        let i = 0;
        for (let k in this.control3) {
          if (this.control3[k]) {
            i++;
          }
        }
        if (i == 10) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      },
      deep: true,
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import url("../../styles/comStyle.less");
</style>
<style lang="scss" scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

#container {
  width: 100%;
  height: 83vh;
  border: 1px solid rgb(0, 183, 255);
}

#container2 {
  width: 500px;
  height: 500px;
  border: 3px solid pink;
}

.overview_scroll::-webkit-scrollbar {
  width: 2px;
  height: 1px;
  background: rgba(6, 70, 122, 0.013);
}

.overview_scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  margin-right: 5px;
  -webkit-box-shadow: inset 0 0 0px #0090b411;
  background: #03c1cf0e;
}

.overview_scroll::-webkit-scrollbar {
  width: 2px;
  height: 1px;
  background: rgba(6, 70, 122, 0.013);
}

::-webkit-scrollbar {
  width: 5px;
  height: 0px;
}

::v-deep.selectBox {
  width: 200px;
  position: absolute;
  top: 60px;
  left: 20px;
  z-index: 2000;
}

::v-deep.BoxB {
  position: absolute;
  top: 60px;
  left: 20px;
  z-index: 2000;

  .el-button {
    // width: 120px;
    height: 36px;
    border-color: $themeColor;
    font-weight: 700;
    font-size: 14px;
    color: $themeColor;
  }
}

::v-deep.el-select-dropdown__list {
  display: flex;
  flex-direction: column;
  max-width: 240px;
}

.iconBox {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 150px;
  height: 288px;
  padding: 10px;
  z-index: 99;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.75) !important;

  .div {
    display: flex;

    margin-bottom: 5px;

    img {
      height: 20px;
      width: 20px;
      margin-right: 5px;
    }

    // span {
    //   line-height: 20px;
    // }
  }
}

.open {
  position: absolute;
  top: 66px;
  right: 25px;
  font-size: 16px;
  z-index: 2000;
  cursor: pointer;
}
</style>

<style lang="scss" scoped>
.back {
  position: absolute;
  z-index: 1999;
  margin-right: 10px;
  margin-left: auto;
  font-size: 29px;
  top: 100px;
  left: 20px;
  line-height: 32px;
  color: $themeColor;
  cursor: pointer;

  &:hover {
    color: $themeColor;
    opacity: 0.9;
  }
}

.boxTop {
  height: 55px;
  display: flex;
  justify-content: space-between;

  .l {
    line-height: 55px;
    color: #666666;
    font-size: 24px;
    font-weight: 700;
  }
}

::v-deep.r {
  .el-button {
    width: 140px;
    height: 40px;
    border-color: $themeColor;
    font-weight: 700;
    font-size: 14px;
    color: $themeColor;
  }
}

::v-deep.control {
  background-color: $themeColor;
  color: #fff !important;

  &:hover {
    color: #fff !important;
    background: $themeColor !important;
  }

  &:active {
    color: #fff !important;
    background: $themeColor !important;
  }

  &:focus {
    color: #fff !important;
    background: $themeColor !important;
  }
}

::v-deep.controls {
  background-color: $themeColor;
  color: #fff !important;

  &:hover {
    color: #fff !important;
    background: $themeColor !important;
  }

  &:active {
    color: #fff !important;
    background: $themeColor !important;
  }

  &:focus {
    color: #fff !important;
    background: $themeColor !important;
  }
}

.StandingBook {
  position: absolute;
  top: 105px;
  left: 30px;
  z-index: 1800;
  padding: 10px;
  width: 420px;
  background: #fff;
}

.Steady {
  left: calc(50% - 210px);
}

.Transient {
  left: calc(100% - 430px);
}
</style>
