<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>
    <div class="suspension" v-show="shrink">
      <el-tabs v-model="MonitoringPoint" style="width: 400px" type="border-card">
        <el-tab-pane label="主网监测点" :style="'height:' + (vh - 115) + 'px;'" name="1">
          <Assets v-if="MonitoringPoint == 1" />
        </el-tab-pane>
        <el-tab-pane label="分布式光伏" :style="'height:' + (vh - 115) + 'px;'" name="2">
          <Distributed v-if="MonitoringPoint == 2" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <svg-icon v-show="isfanhui" class="back" icon-class="back" @click="fanhui" />
    <i v-show="shrink" class="el-icon-d-arrow-right shrink" @click="shrink = false"></i>
    <i v-show="!shrink" class="el-icon-d-arrow-left open" @click="shrink = true"></i>
    <el-row>
      <el-col :span="24">
        <el-main>
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="谐波污染指数" name="1" :style="'height:' + (vh - 70) + 'px;'">
              <div style="width: 100%; height: 100%;background:#030d31;" id="electrMap"></div>
            </el-tab-pane>
          </el-tabs> </el-main></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>
    <!-- 右上角搜索框 -->
    <!-- <div class="selectBox">
      <el-select
        @change="treeClick"
        :popper-append-to-body="false"
        v-model="value"
        filterable
        placeholder="请输入监测点名称"
      >
        <el-option
          v-for="item in siteList"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select>
    </div> -->
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import { getSubstationExpendInfo } 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";
export default {
  components: { Timeinterval, Assets, Distributed },
  props: {},
  data() {
    return {
      shrink: true,
      siteList: [
        {
          name: "500kV廊坊站",
          code: "1",
        },
      ],
      myChart: null,
      zoom: "",
      value: "1",
      form: {},
      loading: false,
      vh: undefined,

      view: true,

      dialogVisible: false,
      activeName: "1",
      MonitoringPoint: "1",
      isfanhui: false,
      mapData: [],
      resData: {},
    };
  },
  created() { },
  mounted() {
    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();
  },
  methods: {
    // 下拉框点击
    treeClick(e) { },
    async info() {
      await getSubstationExpendInfo({
        id: JSON.parse(window.sessionStorage.getItem("Info")).deptId
        // id: "0d52f9f6e43ec0ee83013cd32da93f66",
      }).then((res) => {
        this.resData = res.data;
      });
      this.chart();
    },
    //返回
    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: "#fff",
                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: '#fff',
                    fontSize: 12,
                    fontFamily: "Arial",
                  },
                },
              },
              regions: [
                {
                  name: "南海诸岛",
                  itemStyle: {
                    // 隐藏地图
                    normal: {
                      opacity: 0, // 为 0 时不绘制该图形
                    },
                  },
                  label: {
                    show: false, // 隐藏文字
                  },
                },
              ],

              itemStyle: {
                normal: {
                  color: "#fff", //地图背景色
                  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(0, 102, 255, 0.458)", // 100% 处的颜色
                      },
                    ],
                    globalCoord: false, // 缺省为 false
                  },
                  shadowColor: "#0033ff",
                  // shadowColor: 'rgba(255, 255, 255, 1)',
                  shadowOffsetX: -2,
                  shadowOffsetY: 2,
                  shadowBlur: 10,
                },
                emphasis: {
                  areaColor: "#00cc99",
                  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: "#00FF33", // 线条颜色
                  // 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: 4,
                  color: "#Fff", // 线条颜色
                  shadowColor: "#33FF00",
                  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) {
            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", "");
          // });
        });
      }
    },
  },

  computed: {},

  watch: {},
};
</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;
}

.wrap {
  display: flex;
  justify-content: space-around;
}

#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;
}

.el-tabs--border-card>.el-tabs__header {
  background-color: #124da5;
  border-bottom: 2px solid #e4e7ed;
  margin: 0;
}

.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 px;
}

.el-tabs--border-card>.el-tabs__content {
  padding: 0px;
}

.el-tabs__content {
  overflow: hidden;
  position: relative;
}

.el-aside,
.el-main {
  margin-top: 0px;
}

.el-main {
  padding-top: 0px;
  padding-bottom: 0;
  padding-right: 0;
}

::v-deep .boxDiv {
  height: 25px;
  line-height: 25px;
  margin-left: 10px;

  span:first-child {
    font-weight: 600;
    margin-right: 10px;
  }
}

.el-main {
  padding: 0px;
}

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

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

::v-deep.activePane {
  position: absolute;
  top: 70px;
  right: 20px;
  z-index: 999;

  .el-tabs__header {
    margin: 0 0 10px;
  }

  .el-tabs__nav-wrap {
    background: rgb(255, 255, 255);
    border-radius: 10px;
  }
}

.iconBox {
  position: absolute;
  bottom: 21px;
  left: 20px;
  width: 150px;
  height: 288px;
  padding: 10px;
  z-index: 99999;
  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;
    // }
  }
}

::v-deep .el-tabs--border-card>.el-tabs__content {
  padding: 5px;
}

.suspension {
  position: absolute;
  top: 56px;
  right: 17px;
  z-index: 99;
}

.shrink {
  position: absolute;
  top: 66px;
  right: 25px;
  font-size: 16px;
  z-index: 2000;
  cursor: pointer;
}

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

.iconBox {
  position: absolute;
  bottom: 21px;
  left: 20px;
  width: 150px;
  height: 288px;
  padding: 10px;
  z-index: 99999;
  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;
    // }
  }
}

::v-deep .suspension {
  .el-tabs__item {
    height: 30px;
    line-height: 30px;
  }
}
</style>
<style>
.anchorBL {
  display: none !important;
}
</style>

<style lang="scss" scoped>
.back {
  position: absolute;
  z-index: 999999999;
  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;
  }
}
</style>