<template>
  <div v-loading="loading" style="position: relative; padding: 10px" id="dept">
    <div class="buttonBox" v-if="activeName == 1">
      <el-button type="primary" @click="addLoop" size="mini" icon="el-icon-edit"
        >操作</el-button
      >
      <el-button
        type="primary"
        :icon="flagIcon ? 'el-icon-close' : 'el-icon-position'"
        @click="obtain"
        >获取经纬度</el-button
      >
      <el-button type="primary" icon="el-icon-view" @click="ViewLine"
        >线路</el-button
      >
      <!-- <el-button type="primary" icon="el-icon-delete">删除</el-button> -->
    </div>
    <div
      class="lod pd10"
      v-if="show && activeName == 1"
      :style="'height:' + (vh - 70) + 'px;'"
    >
      <div>
        <!-- <el-button type="primary" icon="el-icon-view" @click="generate"
          >生成实例</el-button > -->
        <el-button type="primary" icon="el-icon-check" @click="submit"
          >保存</el-button
        >
        <el-button
          type="primary"
          v-if="form.id.length != 0"
          icon="el-icon-delete"
          @click="deletes"
          >删除</el-button
        >
        <el-button type="primary" icon="el-icon-close" @click="close"
          >关闭</el-button
        >
      </div>
      <el-form
        :inline="true"
        class="mt10"
        :model="form"
        :style="`height:${vh - 130}px;overflow-y:auto;`"
      >
        <el-form-item label="起点变电站:" label-width="100px">
          <el-select
            filterable
            @change="changeStarting"
            v-model="form.starting"
            :popper-append-to-body="false"
            placeholder="请选择"
            value-key="id"
          >
            <el-option
              v-for="item in iconList"
              :key="item.id"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终点变电站:" label-width="100px">
          <el-select
            @change="changeEnd"
            v-model="form.end"
            filterable
            :popper-append-to-body="false"
            placeholder="请选择"
            value-key="id"
          >
            <el-option
              v-for="item in iconList"
              :key="item.id"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回路:" label-width="100px">
          <el-select
            v-model="form.connectType"
            :popper-append-to-body="false"
            placeholder="请选择"
          >
            <el-option
              v-for="item in loop"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-row v-for="(item, ind) in form.drop" :key="ind">
          <el-col :span="24">
            <span v-if="ind == 0" style="line-height: 36px; color: #339966"
              >起点</span
            >
            <span
              v-else-if="form.drop.length == ind + 1"
              style="line-height: 36px; color: #ff0000"
              >终点</span
            >
            <span v-else style="line-height: 36px">折点</span>
            <el-form-item label="经度:">
              <el-input
                :disabled="ind == 0 || form.drop.length == ind + 1"
                style="width: 120px"
                v-model="item[0]"
                placeholder="经度"
              />
            </el-form-item>
            <el-form-item label="纬度:">
              <el-input
                :disabled="ind == 0 || form.drop.length == ind + 1"
                style="width: 120px"
                v-model="item[1]"
                placeholder="纬度"
              />
            </el-form-item>
            <el-form-item>
              <i
                v-if="!(ind == 0 || form.drop.length == ind + 1)"
                style="cursor: pointer"
                @click="DeleteCoordinates(ind)"
                class="el-icon-close"
              ></i>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <div>
        <div>  </div>
      </div> -->
    </div>

    <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;'"
              ><baidu-map
                class="bm-view"
                id="container"
                @ready="builmap"
                :style="'height:' + (vh - 70) + 'px ;'"
              ></baidu-map
            ></el-tab-pane>
            <el-tab-pane
              label="变电站配置"
              name="2"
              :style="'height:' + (vh - 70) + 'px;overflow: hidden;'"
              ><enter v-if="activeName == 2"
            /></el-tab-pane>
          </el-tabs> </el-main
      ></el-col>
    </el-row>

    <!-- 右上角搜索框 -->

    <!-- 图例 -->
    <div class="iconBox" v-if="activeName == 1">
      <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>
</template>

<script>
import { dicData } from "@/assets/commjs/dictypeData";
function SuperPipe(points, style) {
  this._points = points || [];
  this._style = style || {};
}
SuperPipe.prototype = new BMap.Overlay();
SuperPipe.prototype.initialize = function (map) {
  this._map = map;
  if (this._points.length <= 0) {
    return;
  }
  //存储两个PolyLine对象
  var bot, top;
  var botStyle = {
    strokeColor: "red",
    strokeWeight: this._style.strokeWeight + 2,
    strokeOpacity: this._style.strokeOpacity,
  };
  if (this._style.borderColor) {
    botStyle.strokeColor = this._style.borderColor;
  }
  if (this._style.borderWidth) {
    botStyle.strokeWeight =
      parseInt(this._style.strokeWeight) +
      parseInt(this._style.borderWidth) * 2;
  }
  bot = new BMap.Polyline(this._points, botStyle);
  if (this._style) {
    top = new BMap.Polyline(this._points, this._style);
  } else {
    top = new BMap.Polyline(this._points);
  }
  this._bot = bot;
  this._top = top;

  this.addEventListener = function (eventname, cb) {
    var that = this;
    if (eventname !== "mouseover" && eventname !== "mouseout") {
      this._bot.addEventListener(eventname, cb);
      this._top.addEventListener(eventname, cb);
    } else {
      var setEvent = function () {
        setTimeout(function () {
          var svgElem = that._top.V;
          if (svgElem) {
            svgElem.addEventListener(eventname, cb);
            svgElem = null;
            setEvent = null;
            that = null;
          } else {
            svgElem = null;
            setEvent();
          }
        }, 500);
      };
      setEvent();
    }
  };

  this.setStrokeColor = function (a) {
    this._top.setStrokeColor(a);
  };
  this.setStrokeOpacity = function (a) {
    this._top.setStrokeOpacity(a);
    this._bot.setStrokeOpacity(a);
  };
  //其他的API
};
SuperPipe.prototype.draw = function () {
  var map = this._map;
  map.addOverlay(this._bot);
  map.addOverlay(this._top);
};
SuperPipe.prototype.remove = function () {
  var map = this._map;
  map.removeOverlay(this._bot);
  map.removeOverlay(this._top);
};
SuperPipe.prototype.show = function () {
  this._top.show();
  this._bot.show();
};
SuperPipe.prototype.hide = function () {
  this._top.hide();
  this._bot.hide();
};
//import { JBmap } from "@/api/JIBEIDistributed-management/analysismodule";
import Timeinterval from "@/views/components/TimePicker/index4";
import BMapLib from "@/components/tools/MarkerClusterer_min";
import Assets from "./components/Monitoring/Assets";
import {
  getSubstationExpendInfo,
  substationExpend,
  getRelation,
  saveSubstationRelation,
  removeRelation,
} from "@/api/JIBEIDistributed-management/analysismodule";
import Distributed from "./components/Monitoring/Distributed";
import boundaries from "./boundaries.js";
import enter from "./components/Monitoring/enter";
import { jsonp } from "vue-jsonp";
export default {
  components: { Timeinterval, Assets, Distributed, enter },
  props: {},
  data() {
    return {
      shrink: true,
      boundaries: boundaries,
      loading: true,
      vh: undefined,
      view: true,
      activeName: "1",
      data_info: [], //点位信息
      map: null, //存储地图
      show: false,
      showMarker: [], //红点储存
      form: {
        drop: [],
        starting: "", //起点
        end: "", //终点
        connectType: "1", //回路
        id: "",
      },
      iconList: [],
      loop: [
        {
          id: "1",
          name: "单回路",
        },
        {
          id: "2",
          name: "双回路",
        },
      ], //回去
      flag: true,
      flagIcon: false,
      polyline1: [], //存储回路 清楚用
      polyline2: [], //新增折线点
      polyline3: [], //初始化线路点位
    };
  },
  created() {},
  mounted() {
    // this.$store.commit('user/lineID','627f58e29cd848a5e270912fa1780f7e')

    // console.log(`============================`, this.$store.state.user.lineID);

    this.vh = document.getElementById("app-main-in").offsetHeight;
    // this.iconList = dicData("Substation_Type", []);
  },
  methods: {
    // 下拉框点击

    //地图初始化事件
    async builmap() {
      this.loading = false;

      // 单回路
      let single = [
        // [
        //   {
        //     name: "500kV变电站",
        //     voltageLevel: "a310734183e86fed92abf9cfa8d02be5",
        //     type: "a310734183e86fed92abf9cfa8d02be5",
        //     nameP: "",
        //     lng: 114.745439,
        //     lat: 41.867332,
        //   },
        //   {
        //     name: "",
        //     lng: 117.194778,
        //     nameP: "",
        //     lat: 39.846942,
        //   },
        //   {
        //     name: "500kV变电站",
        //     voltageLevel: "",
        //     type: "a310734183e86fed92abf9cfa8d02be5",
        //     nameP: "",
        //     lng: 118.194778,
        //     lat: 39.846942,
        //   },
        // ],
      ];
      // 双回路
      let double = [];
      await getSubstationExpendInfo({
        id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
      }).then((res) => {
        for (let k in res.data) {
          res.data[k].forEach((item) => {
            if (item.sites != null) {
              item.sites.forEach((v) => {
                v.lng = v.value[0];
                v.lat = v.value[1];
              });
            }
            if (item.connectType == 1) {
              single.push(item.sites);
            } else if (item.connectType == 2) {
              double.push(item.sites);
            }
          });
        }
      });

      let _this = this;
      let map = new window.BMap.Map("container", {
        maxZoom: 13,
      });

     //添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes: [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));

      this.map = map;

      substationExpend({
        orgId: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        searchValue: "",
        pageNum: 1,
        pageSize: 10000,
      }).then((res) => {
        this.iconList = res.data.records;
        this.form.starting = this.iconList[0];
        this.form.end = this.iconList[0];
        this.addDian(this.iconList);
      });
      this.singleCircuit(single, 2);
      this.doubleCircuit(double, 2);
      // // --- 添加行政区划 ---
      // new window.BMap.Boundary().get("河北省", function (rs) {

      //获取行政区域
      var count = this.boundaries.length; //行政区域的点有多少个

      for (var i = 0; i < count; i++) {
        var ply = new BMap.Polygon(this.boundaries[i], {
          fillColor: "#b3e7e4", //填充颜色。当参数为空时，圆形将没有填充效果。
          strokeWeight: 0.1,
          fillOpacity: 0.5,
          strokeColor: "#ff0000",
        }); //建立多边形覆盖物

        // console.log("当前辖区坐标：" + name);
        // console.log(rs.boundaries[i]);

        _this.map.addOverlay(ply); //添加覆盖物
      }
      // });

      // let point = new window.BMap.Point(data_info[0].lng, data_info[0].lat);

      let point = new window.BMap.Point(116.696149, 39.671845);

      map.centerAndZoom(point, 8);
      map.enableScrollWheelZoom(true);

      this.loading = false;
    },
    changeEnd() {
      this.form.drop[this.form.drop.length - 1] = [
        this.form.end.lng,
        this.form.end.lat,
      ];
      this.getRelations();
    },
    changeStarting() {
      this.form.drop[0] = [this.form.starting.lng, this.form.starting.lat];
      this.getRelations();
    },
    getRelations() {
      getRelation({
        endStationId: this.form.end.id,
        startStationId: this.form.starting.id,
      }).then((res) => {
        if (res.data.breakSite != null) {
          this.form.connectType = res.data.connectType;
          this.form.id = res.data.id;
          let list = JSON.parse(res.data.breakSite);
          list[0] = [this.form.starting.lng, this.form.starting.lat];
          list[list.length - 1] = [this.form.end.lng, this.form.end.lat];
          this.form.drop = list;
        } else {
          (this.form.id = ""),
            (this.form.drop = [
              this.form.drop[0],
              this.form.drop[this.form.drop.length - 1],
            ]);
        }
      });
    },
    // 新增
    addLoop() {
      let _this = this;
      this.show = true;
      this.map.removeEventListener("click", _this.canbeclick, true);
      this.map.addEventListener("click", _this.canbeclick);
      this.form.drop = [
        [this.form.starting.lng, this.form.starting.lat],
        [this.form.end.lng, this.form.end.lat],
      ];
      this.getRelations();
    },
    canbeclick(e) {
      let _this = this;

      // console.log(e.point.lng + "," + e.point.lat);
      _this.form.drop.pop();
      _this.form.drop.push(
        [e.point.lng, e.point.lat],
        [this.form.end.lng, this.form.end.lat]
      );
      let pointDrop = new BMap.Point(e.point.lng, e.point.lat);
      var markerDrop = new BMap.Marker(pointDrop); // 创建标注
      _this.showMarker.push(markerDrop);
      _this.map.addOverlay(markerDrop);
      // _this.generate()
    },
    // 关闭
    close() {
      let _this = this;
      this.show = false;
      this.map.removeEventListener("click", _this.canbeclick, true);
      _this.form = {
        drop: [],
        starting: _this.iconList[0], //起点
        end: _this.iconList[0], //终点
        id: "",
        connectType: "1", //回路
      };
      // 清除点位
      this.showMarker.forEach((item) => {
        this.map.removeOverlay(item);
      });
      // 清除回路
      this.polyline1.forEach((item) => {
        this.map.removeOverlay(item);
      });
      // 清除点
      this.polyline2.forEach((item) => {
        this.map.removeOverlay(item);
      });
    },
    // 保存
    submit() {
      saveSubstationRelation({
        breakSite: JSON.stringify(this.form.drop),
        connectType: this.form.connectType,
        endStationId: this.form.end.id,
        id: this.form.id,
        startStationId: this.form.starting.id,
      }).then((res) => {
        if (res.code == "A0000") {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.close();
          this.builmap();
        }
      });
    },
    // 删除
    deletes() {
      removeRelation({
        id: this.form.id,
      }).then((res) => {
        if (res.code == "A0000") {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.close();
          this.builmap();
        }
      });
    },
    // 线开关
    ViewLine() {
      this.polyline3.forEach((item) => {
        if (this.flag) {
          item.hide();
        } else {
          item.show();
        }
      });
      this.flag = !this.flag;
    },

    // 数组去重
    unique(arr) {
      let res = new Set();
      return arr.filter((item) => {
        let id = JSON.stringify(item);
        if (res.has(id)) {
          return false;
        } else {
          res.add(id);
          return true;
        }
      });
    },
    // 生成实例
    generate() {
      // 清除点位
      this.showMarker.forEach((item) => {
        this.map.removeOverlay(item);
      });
      // 清除回路
      this.polyline1.forEach((item) => {
        this.map.removeOverlay(item);
      });
      // 清除点
      this.polyline2.forEach((item) => {
        this.map.removeOverlay(item);
      });
      this.showMarker = [];
      this.polyline1 = [];
      this.polyline2 = [];
      let data = [[]];
      if (this.form.drop.length != 0) {
        for (let i = 0; i < this.form.drop.length; i++) {
          data[0].push({
            name: "",
            lng: this.form.drop[i][0],
            voltageLevel: "",
            type: "",
            nameP: "",
            lat: this.form.drop[i][1],
          });
        }
        data[0][0].type = this.form.starting.id;
        data[0][data[0].length - 1].type = this.form.end.id;
        if (this.form.connectType == 1) {
          this.singleCircuit(data, 1);
        } else {
          this.doubleCircuit(data, 1);
        }
      }
    },
    // 删除坐标
    DeleteCoordinates(ind) {
      this.form.drop.splice(ind, 1);
    },
    // 单回路渲染
    singleCircuit(e, d) {
      let dataList = [];
      let list = [];
      e.forEach((item, ind) => {
        list.push([]);
        dataList.push(...item);
        item.forEach((val) => {
          list[ind].push(new BMap.Point(val.lng, val.lat));
        });
      });
      list.forEach((item) => {
        if (d == 1) {
          var polyline = new SuperPipe(item, {
            strokeColor: "#42b983",
            borderWidth: 1,
            strokeWeight: 0.1,
            borderColor: "#42b983",
          }); //创建折线
        } else if (d == 2) {
          var polyline = new SuperPipe(item, {
            strokeColor: "#000",
            borderWidth: 1,
            strokeWeight: 0.1,
            borderColor: "#000",
          }); //创建折线
        }

        // 将覆盖物（线）添加到地图上
        if (d == 1) {
          this.polyline1.push(polyline);
          this.addDian(dataList, d);
        } else if (d == 2) {
          this.polyline3.push(polyline);
        }
        this.map.addOverlay(polyline);
      });
    },
    // 双回路渲染
    doubleCircuit(e, d) {
      let list1 = [];
      let dataList = [];
      e.forEach((item, ind) => {
        list1.push([]);
        dataList.push(...item);
        item.forEach((val) => {
          list1[ind].push(new BMap.Point(val.lng, val.lat));
        });
      });

      list1.forEach((item) => {
        if (d == 1) {
          var polyline = new SuperPipe(item, {
            strokeColor: "#fff",
            borderWidth: 2,
            strokeWeight: 3,
            borderColor: "#42b983",
          }); //创建折线
        } else if (d == 2) {
          var polyline = new SuperPipe(item, {
            strokeColor: "#fff",
            borderWidth: 2,
            strokeWeight: 3,
            borderColor: "#000",
          }); //创建折线
        }

        // 将覆盖物（线）添加到地图上
        if (d == 1) {
          this.polyline1.push(polyline);
          this.addDian(dataList, d);
        } else if (d == 2) {
          this.polyline3.push(polyline);
        }
        this.map.addOverlay(polyline);
      });
    },
    // 添加点
    addDian(e, d) {
      let _this = this;
      let resList = this.unique(e);
      for (let i = 0; i < resList.length; i++) {
        dicData("Substation_Type", []).forEach((item) => {
          if (item.id == resList[i].type) {
            resList[i].nameP = item.name;
          }
          return;
        });
        let img = "";
        if (resList[i].nameP == "35kV变电站") {
          img = require("@/assets/jbzl/35kv.png");
        } else if (resList[i].nameP == "110kV变电站") {
          img = require("@/assets/jbzl/110kv.png");
        } else if (resList[i].nameP == "220kV变电站") {
          img = require("@/assets/jbzl/220kv.png");
        } else if (resList[i].nameP == "500kV变电站") {
          img = require("@/assets/jbzl/500kv.png");
        } else if (resList[i].nameP == "500kV桥接站") {
          img = require("@/assets/jbzl/500kvQjz.png");
        } else if (resList[i].nameP == "1000kV变电站") {
          img = require("@/assets/jbzl/1000kv.png");
        } else if (resList[i].nameP == "停运变电站") {
          img = require("@/assets/jbzl/bdzty.png");
        } else if (resList[i].nameP == "抽蓄电厂") {
          img = require("@/assets/jbzl/cxdc.png");
        } else if (resList[i].nameP == "串补站") {
          img = require("@/assets/jbzl/bcz.png");
        } else if (resList[i].nameP == "火电厂") {
          img = require("@/assets/jbzl/hdc.png");
        } else if (resList[i].nameP == "直流换流站") {
          img = require("@/assets/jbzl/zljhz.png");
        } else {
          img = require("@/assets/jbzl/zljhz.png");
        }

        // 百度地图marker样式
        let myIcon = "";
        if (resList[i].nameP == "") {
          myIcon = new BMap.Icon(img, new BMap.Size(0, 0));
        } else {
          myIcon = new BMap.Icon(img, new BMap.Size(24, 24));
        }

        let marker = new BMap.Marker(
          new BMap.Point(resList[i].lng, resList[i].lat),
          { icon: myIcon }
        ); // 创建标注

        if (d == 1) {
          this.polyline2.push(marker);
        }
        this.map.addOverlay(marker); // 将标注添加到地图中
        // addClickHandler(content, marker);

        var content = `<h4 style='margin:0 0 5px 0;'>${resList[i].name}</h4>
    <p>变电站类型: ${
      resList[i].nameP
    }</p></><button class="button" id="SetUp" data-sid=${JSON.stringify(
          resList[i]
        )}>设为起点</button><button class="button" id="SetEnd" data-sid=${JSON.stringify(
          resList[i]
        )}>设为终点</button>`;
        addClickHandler(content, marker);
      }
      function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
          event.stopPropagation();
          openInfo(content, e);
        });
      }
      let opts = {
        width: 200, // 信息窗口zuixiao宽度
        height: 70, // 信息窗口高度
        title: "", // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
      };
      function openInfo(content, e) {
        // e.stopPropagation();
        let p = e.target;
        let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        let infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
        setTimeout(() => {
          // 起点
          document.getElementById("SetUp").onclick = function (e) {
            _this.map.closeInfoWindow();

            _this.form.starting = JSON.parse(e.target.dataset.sid);
            _this.changeStarting();

            // _this.map.anchorBL{display:none}
          };
          // 终点
          document.getElementById("SetEnd").onclick = function (e) {
            _this.map.closeInfoWindow();

            _this.form.end = JSON.parse(e.target.dataset.sid);
            _this.changeEnd();
          };
        }, 50);
        _this.map.openInfoWindow(infoWindow, point); //开启信息窗口
      }
    },
    // 获取经纬度
    obtain() {
      this.flagIcon = !this.flagIcon;
      if (this.flagIcon) {
        this.map.addEventListener("click", this.showInfo);
      } else {
        this.map.closeInfoWindow();
        this.map.removeEventListener("click", this.showInfo, true);
      }
    },
    showInfo(e) {
      let _this = this;
      // alert("经纬度：" + e.point.lng + "," + e.point.lat);
      let content = `<p>经度:${e.point.lng} </p><p>纬度: ${e.point.lat}</p>`;
      event.stopPropagation();
      let opts = {
        width: 50, // 信息窗口zuixiao宽度
        height: 15, // 信息窗口高度
        title: "", // 信息窗口标题
      };

      // e.stopPropagation();

      let point = new BMap.Point(e.point.lng, e.point.lat);
      let infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
      _this.map.openInfoWindow(infoWindow, point); //开启信息窗口
    },
  },

  computed: {},

  watch: {
    form: {
      handler: function () {
        this.generate();
      },
      // 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码
      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;
}
.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;
}
.buttonBox {
  position: absolute;
  top: 66px;
  left: 27px;
  z-index: 99;
}
.lod {
  position: absolute;
  top: 55px;
  right: 10px;
  background: #fff;
  z-index: 99;
  width: 440px;
}
</style>
<style>
.anchorBL {
  display: none !important;
}
</style>
<style lang="scss" scoped>
::v-deep .button {
  height: 18px;
  margin-right: 5px;
  line-height: 18px;
  color: #fff;
  background-color: $themeColor;
  margin-top: 5px;

  border: 0 solid #000;
  font-size: 14px;
  border-radius: 2px;
  &:hover {
    cursor: pointer;
  }
}
</style>
