<template>
  <div>
    <div class="map-container">
      <!--     地图  开始   
               showItem:控制 是否显示左侧、右侧、顶部、底部容器
               isMapDialogWidthAuto: 控制详情按钮弹框的交互以及样式
      -->
      <my-map
        ref="MyMap"
        @map-loaded="initMap"
        @show-info="showFacilityInfo"
        @show-item="showItem"
        :isMapDialogWidthAuto.sync="isMapDialogWidthAuto"
      />
      <!--     地图  结束   -->

      <!--     地图菜单左 开始    -->
      <div class="menu-left">
        <!-- 左侧菜单顶部容器 开始 -->
        <div class="left-head-container">
          <!-- 搜索容器 开始 -->
          <div class="search-box" v-show="!isUnfoldingTree">
            <input
              v-model="treeName"
              type="text"
              placeholder="请输入内容"
              @input="searchChange"
            />
            <Button
              :class="searchFlag ? 'search-btn' : 'search-btn search-dis'"
              @click="toSearch"
              >搜索</Button
            >
            <div class="search-select scroll-bar">
              <div v-for="(item, id) in searchLike" :key="id">
                <div class="search-select-title">
                  {{ item.name == "gtmc" ? "杆塔" : "用户编号" }}（{{
                    item.value.length
                  }}）
                </div>
                <div
                  class="search-select-list"
                  v-for="(it, index) in item.value"
                  :key="index"
                  @click="shooseItem(it, item.name)"
                >
                  {{ it }}
                </div>
              </div>
              <div v-show="searchtreeData.length > 0">
                <div class="search-select-title">
                  菜单（{{ searchtreeData.length }}）
                </div>
                <div
                  class="search-select-list"
                  v-for="(it, index) in searchtreeData"
                  :key="index"
                  @click="shooseItem(it, 'cd')"
                >
                  {{ it.name }}
                </div>
              </div>
            </div>
          </div>
          <!-- 树容器 开始 -->
          <div class="tree-box" v-show="!isUnfoldingTree">
            <div class="common-title tree-title">
              <span>{{ rootName }}</span>
            </div>
            <Tree
              :data="treeData"
              empty-text=""
              class="scroll-bar"
              ref="tree"
              @on-select-change="treeSelectChange"
            ></Tree>
          </div>
          <div class="tree-arrow" @click="isUnfoldingTree = !isUnfoldingTree">
            <img
              :src="require('@/assets/bigScreenHome/ic_right_shousuo.png')"
              alt=""
              v-if="isUnfoldingTree"
            />
            <img
              :src="require('@/assets/bigScreenHome/ic_left_shousuo.png')"
              alt=""
              v-else
            />
          </div>
          <!-- 网格员信息容器 开始-->
          <div class="info-box" v-show="!isUnfoldingInfo">
            <div class="common-title info-title"><span>网格员信息</span></div>
            <!-- 只有点击台区的时候（第一个固定在顶部） -->
            <div class="fixed-container" v-if="tqFlag">
              <div class="table-item-box">
                <div class="table-item table-item-active">
                  <img
                    class="select-img"
                    :src="require('@/assets/bigScreenHome/select.png')"
                    alt=""
                  />
                  <div class="item-left">
                    <!-- scrollData3[0].src || -->
                    <img
                      :src="require('@/assets/bigScreenHome/ic_wanggeyuan.png')"
                      class="avatar-img"
                    />
                    <div class="name" v-text="scrollData3[0].name"></div>
                  </div>
                  <div class="item-right">
                    <img
                      :src="require('@/assets/bigScreenHome/phone.png')"
                      class="phone-img"
                    />
                    <div class="phone" v-text="scrollData3[0].phone"></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 只有点击台区的时候 （剩余的滚动） -->
            <div
              class="scroll-container"
              :class="{ 'scroll-container-new': tqFlag }"
              @click="toSelectPhone($event)"
            >
              <vue-seamless-scroll
                class="under-container"
                ref="seamlessScroll"
                :class-option="wlyDefaultOption"
                :data="tqFlag ? scrollData3.slice(1) : scrollData3"
                v-show="!isUnfoldingInfo"
              >
                <div class="table-item-box">
                  <div
                    class="table-item"
                    :class="{
                      'table-item-active':
                        !tqFlag && selectPhoneindex === index,
                    }"
                    v-for="(item, index) in tqFlag
                      ? scrollData3.slice(1)
                      : scrollData3"
                    :key="index"
                    :data-index="index"
                  >
                    <img
                      v-show="!tqFlag && selectPhoneindex === index"
                      class="select-img"
                      :src="require('@/assets/bigScreenHome/select.png')"
                      alt=""
                    />
                    <div :data-index="index" class="item-left">
                      <img
                        :data-index="index"
                        :src="
                          item.src ||
                          require('@/assets/bigScreenHome/ic_wanggeyuan.png')
                        "
                        class="avatar-img"
                      />
                      <div
                        :data-index="index"
                        class="name"
                        v-text="item.name"
                      ></div>
                    </div>
                    <div :data-index="index" class="item-right">
                      <img
                        :data-index="index"
                        :src="require('@/assets/bigScreenHome/phone.png')"
                        class="phone-img"
                      />
                      <div
                        :data-index="index"
                        class="phone"
                        v-text="item.phone"
                      ></div>
                    </div>
                  </div>
                </div>
              </vue-seamless-scroll>
            </div>
          </div>
          <div class="info-arrow" @click="isUnfoldingInfo = !isUnfoldingInfo">
            <img
              :src="require('@/assets/bigScreenHome/ic_right_shousuo.png')"
              alt=""
              v-if="isUnfoldingInfo"
            />
            <img
              :src="require('@/assets/bigScreenHome/ic_left_shousuo.png')"
              alt=""
              v-else
            />
          </div>
        </div>
        <!-- 左侧菜单顶部容器 结束  -->
      </div>
      <!--     地图菜单左 结束    -->

      <div
        class="menu-center"
        v-show="!isUnfoldingBoBao && bottomIconStatus"
        v-if="bobaoArr.length"
      >
        <img :src="require('@/assets/bigScreenHome/ic_bobao.gif')" alt="" />
        <vue-seamless-scroll
          ref="seamlessScrollBoBao"
          class="bo-bao-box"
          :class-option="bobaoDefaultOption"
          :data="bobaoArr"
          v-if="bobaoArr.length"
        >
          <div class="text" v-for="(item, index) in bobaoArr" :key="index">
            {{ item }}
          </div>
        </vue-seamless-scroll>
      </div>

      <!--     地图菜单右 开始    -->
      <rightLayout
        ref="rightLayout"
        :navigation-arr="navigationArr"
        :introduction="introduction"
        :elementary="elementary"
        :statistics-arr="statisticsArr"
        :o-img="oImg"
        :jbxx="jbxxData"
        :typeA="typeActive"
        @toDetail="toDetail"
      />
      <!--     地图菜单右 结束    -->

      <!--   地图下方菜单 开始   -->
      <div
        class="bottom-menu-container"
        style="width: calc(100% - 980px); display: none"
      >
        <div class="bottom-menu-contain" v-show="bottomIconStatus">
          <div class="bottom-menu-title">
            <span>{{ gzBtnsItem.title }}</span>
          </div>
          <div class="bottom-menu-con">
            <div class="bottom-menu-list">
              <div class="bottom-menu-list-th bottom-menu-list-tr">
                <span class="bottom-menu-list-name">{{
                  gzBtnsItem.type == 7 ? "开关名称" : "所属线路"
                }}</span>
                <span class="bottom-menu-list-type">{{
                  gzBtnsItem.type == 7 ? "所属线路1" : "故障类型"
                }}</span>
                <span class="bottom-menu-list-user">{{
                  gzBtnsItem.type == 7 ? "所属线路2" : "线路管理人员姓名"
                }}</span>
              </div>
              <div
                class="bottom-menu-list-body"
                @click="toSelectGzList($event)"
              >
                <vue-seamless-scroll
                  ref="seamlessScrollGz"
                  :class-option="defaultOption"
                  :data="gzList"
                >
                  <div
                    :class="
                      gzlistActive == id
                        ? 'bottom-menu-list-tr bottom-menu-list-active'
                        : 'bottom-menu-list-tr'
                    "
                    v-for="(item, id) in gzList"
                    :key="id"
                    :data-index="id"
                  >
                    <span class="bottom-menu-list-name" :data-index="id">{{
                      item.xlmc
                    }}</span>
                    <span class="bottom-menu-list-type" :data-index="id">{{
                      item.gzlx
                    }}</span>
                    <span class="bottom-menu-list-user" :data-index="id">{{
                      item.xlgly
                    }}</span>
                  </div>
                </vue-seamless-scroll>
              </div>
            </div>
            <div class="bottom-menu-btns scroll-bar">
              <div
                :class="
                  gzBtnsItem.type == item.type
                    ? 'bottom-menu-btns-list bottom-menu-btns-active'
                    : 'bottom-menu-btns-list'
                "
                v-for="(item, id) in gzBtns"
                :key="id"
                @click="changeGzBtn(item, id)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <img
          @click="changeMenuBottom"
          :class="
            bottomIconStatus
              ? 'bottom-menu-close bottom-menu-bot'
              : 'bottom-menu-close bottom-menu-top'
          "
          src="@/assets/bigScreenHome/ic_left_shousuo.png"
        />
      </div>
      <!--   地图下方菜单 结束   -->

      <!--   地图下方菜单(小) 开始   -->
      <div class="bottom-menu-left-container">
        <div class="item" v-for="item in menuBottomLeftData" :key="item.title">
          <img :src="item.img" />
          <span>{{ item.title }}</span>
        </div>
      </div>
      <!--   地图下方菜单(小) 结束   -->
    </div>
    <!--   弹窗   -->
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import "echarts-gl";
import { getAction } from "@/api/manage";
import { imageFileView } from "@/api/document/api";
import rightLayout from "@/views/bigScreen/components/rightLayout";
import MyMap from "@/components/mapbox/index";
import { div } from "echarts-gl";
import { getParentList, filterUnit } from "../components/modules/utils/util";
import peopleDataJson from "../components/json/peopleData.json";
import leftTreeJson from "../components/json/leftTree.json";
import yhbhJson from "../components/json/yhbh.json";
import resultJson from "../components/json/result.json";
import gtmcJson from "../components/json/gtmc.json";

let that = null;
var setTimer = null;
export default {
  components: { vueSeamlessScroll, rightLayout, MyMap },
  data() {
    const self = this;
    return {
      rootName: "",
      isMapDialogWidthAuto: false,
      bobaoArr: [],
      isUnfoldingBoBao: false,
      searchFlag: false, //搜索标识
      searchType: "", //搜索类型
      searchLike: [], //模糊搜索结果
      searchtreeData: [], //搜索菜单结果
      searchChooseData: {}, //选中搜索菜单结果时用到
      gzlistActive: null, //故障列表选中标识
      gzBtnsItem: {
        name: "低压情况",
        title: "低压列表",
        type: 4,
      }, //故障类型按钮选中标识
      bottomIconStatus: true, //故障点列表收起、展开标识
      elementary: {}, //基本信息
      childpPoperties: {}, //子组件地图传来的参数
      interVal: null,
      jbxxData: {},
      currIndex: 0, //默认第一个高亮
      defaultOption: {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        // hoverStop: true, // 是否开启鼠标悬停stop
        // direction: 1, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        // singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        // waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
      wlyDefaultOption: {
        step: 0.3,
        limitMoveNum: 5,
      },
      bobaoDefaultOption: {
        step: 0.3,
        limitMoveNum: 1,
        direction: 2,
      },
      //故障列表
      gzList: [],
      //故障按钮名称
      gzBtns: [
        {
          name: "低压情况",
          title: "低压列表",
          type: 4,
        },
        {
          name: "重过载情况",
          title: "重过载列表",
          type: 5,
        },
        {
          name: "三相不平衡",
          title: "三相不平衡列表",
          type: 6,
        },
        {
          name: "联络开关",
          title: "联络开关列表",
          type: 7,
        },
        {
          name: "故障点信息",
          title: "故障点列表",
          type: 1,
        },
        {
          name: "交跨点信息",
          title: "交跨点列表",
          type: 2,
        },
        {
          name: "高故障线路",
          title: "高故障列表",
          type: 3,
        },
      ],
      center: [104.280751, 30.597593],
      marker: require("../../../assets/bigScreenHome/five-star.png"),
      yytIcon: require("@/assets/bigScreenHome/yyt-icon.png"),
      gfwdIcom: require("@/assets/bigScreenHome/gfwd-icon.png"),
      scrollData2: [],

      menuBottomLeftData: [
        {
          img: require("@/assets/bigScreenHome/yyt-icon.png"),
          title: "杆塔",
        },
        {
          img: require("@/assets/bigScreenHome/gfwd-icon.png"),
          title: "台区",
        },
      ],

      infoWindow: {},
      curPoint: {},
      map: null,
      layer_line_1: null,
      layer_Highlight: null,
      // 网格员信息 开始
      isUnfoldingInfo: false, // 折叠
      selectPhoneindex: null,
      tqFlag: false, // 台区
      scrollData3: [],
      // 网格员信息 结束
      // 树 开始
      isUnfoldingTree: false, // 折叠
      treeName: "",
      treeData: [],
      copyTreeData: [],
      currentObj: { type: 1 },
      // 树 结束
      // 右边 开始
      introduction: "",
      navigationArr: [],
      statisticsArr: [],
      oImg: {},
      // 右边 结束

      typeActive: 1,
    };
  },
  beforeDestroy() {},
  created() {
    /** 使用原生绑定事件 */
    window.closeWindow = () => {
      this.infoWindow.close();
    };
  },
  mounted() {
    console.log(yhbhJson);
    this.initMap();
    this.getLeftInitData();
    this.getGzList(4);
    // this.getBoBaoData(); //故障列表默认为低压情况s
    this.getTree();

    // this.$Notice.error({
    //     title: '注意数据仅展示，并非真实数据'
    // })
  },
  computed: {},
  watch: {
    // 网格员信息
    selectPhoneindex() {
      this.$nextTick(() => {
        this.$refs.seamlessScroll.reset();
      });
    },
  },
  methods: {
    initMap() {
      that = this;
    },
    // 详情
    toDetail() {
      let result = {
        xh: "",
        tqmc: "君合中央城1#台区",
        edrl: "",
        jd: "",
        byqlx: "",
        ssgt: "",
        list: [],
        wd: "",
        syxz: "",
      };
      let item = {};
      let str = "";
      if (this.typeActive == 4) {
        // 重新进行排序
        let resultObj = {
          lx: result.lx,
          gt: result.gt,
          dx: result.dx,
          dl: result.dl,
          pdbyq: result.pdbyq,
          zskg: result.zskg,
          pdzf: result.pdzf,
        };
        let nameObj = {
          lx: "线路",
          gt: "杆塔",
          dx: "导线",
          dl: "电缆",
          pdbyq: "配电变压器",
          zskg: "柱上开关",
          pdzf: "配电站房",
        };
        str += '<div class="table_wrap scroll-bar">';
        for (const key in resultObj) {
          str += `<div class="table-item-box scroll-bar ${key}-bar">
                <div class="table-title">${nameObj[key]}</div><div class="table-con">`;
          if (key === "lx") {
            str += `<div class="tr"><div>线路名称</div><div>电压等级(kV)</div><div>投运时间</div><div>所属地市</div><div>所属区县</div><div>维护班组</div></div><div class="td-body">`;
          }
          if (key === "gt") {
            str += `<div class="tr"><div>型号</div><div>杆塔高(m)</div><div>杆塔材质</div><div>杆塔范围</div><div>杆塔数量</div></div><div class="td-body">`;
          }
          if (key === "dx") {
            str += `<div class="tr"><div>导线型号</div><div>导线类型</div><div>导线截面(mm²)</div><div>导线范围</div><div>导线长度(m)</div></div><div class="td-body">`;
          }
          if (key === "dl") {
            str += `<div class="tr"><div>电缆型号</div><div>绝缘类型</div><div>截面积(mm²)</div><div>载流量(A)</div><div>电缆范围</div><div>电缆长度(m)</div></div><div class="td-body">`;
          }
          if (key === "pdbyq") {
            str += `<div class="tr"><div>设备名称</div><div>变压器类型</div><div>所属杆塔/站房</div><div>额定容量(kVA)</div><div>型号</div><div>使用性质</div></div><div class="td-body">`;
          }
          if (key === "zskg") {
            str += `<div class="tr"><div>开关类型</div><div>数量</div></div><div class="td-body">`;
          }
          if (key === "pdzf") {
            str += `<div class="tr"><div>站房类型</div><div>数量</div></div><div class="td-body">`;
          }
          resultObj[key].forEach((item, index) => {
            // null
            for (const k in item) {
              item[k] = item[k] === null ? "" : item[k];
            }
            if (key === "lx") {
              str += `<div class="td" key="${key}${index}">`;
              str += `<div title="${item.xlmc}">${item.xlmc}</div><div>${
                item.dydj || ""
              }</div><div>${item.tysj || ""}</div><div>${
                item.ssds || ""
              }</div><div>${item.ssqx || ""}</div><div>${
                item.whbz || ""
              }</div>`;
              str += "</div>";
            }
            if (key === "gt") {
              str += `<div class="td" key="${key}${index}">`;
              str += `<div>${item.xh}</div><div>${item.gtg}</div><div>${item.gtcz}</div><div title="${item.gtfw}">${item.gtfw}</div><div>${item.gtsl}</div>`;
              str += "</div>";
            }
            if (key === "dx") {
              str += `<div class="td" key="${key}${index}">`;
              str += `<div>${item.dxxh}</div><div>${item.dxlx}</div><div>${item.dxjm}</div><div title="${item.dxfw}">${item.dxfw}</div><div>${item.dxcd}</div>`;
              str += "</div>";
            }
            if (key === "dl") {
              str += `<div class="td" key="${key}${index}">`;
              str += `<div>${item.dlxh}</div><div>${item.jylx}</div><div>${item.jmj}</div><div>${item.zll}</div><div>${item.dlfw}</div><div>${item.dlcd}</div>`;
              str += "</div>";
            }
            if (key === "pdbyq") {
              str += `<div class="td" key="${key}${index}">`;
              str += `<div title="${item.sbmc}">${item.sbmc}</div><div>${item.byqlx}</div><div title="${item.ssgtzf}">${item.ssgtzf}</div><div>${item.edrl}</div><div>${item.xh}</div><div>${item.syxz}</div>`;
              str += "</div>";
            }
            if (key === "zskg") {
              str += `<div class="td" key="${key}${index}">`;
              for (const key3 in item) {
                str += `<div>${item[key3]}</div>`;
              }
              str += "</div>";
            }
            if (key === "pdzf") {
              str += `<div class="td" key="${key}${index}">`;
              for (const key3 in item) {
                str += `<div>${item[key3]}</div>`;
              }
              str += "</div>";
            }
          });
          str += "</div>";
          str += "</div></div>";
        }
        str += "</div>";
      }
      if (this.typeActive == 6) {
        item = {
          台区名称: result.tqmc,
          "所属杆塔/站房": result.ssgt,
          变压器类型: result.byqlx,
          额定容量: result.edrl,
          型号: result.xh,
          使用性质: result.syxz,
        };
        for (const key in item) {
          str += `<div class="dialogList"><label for="" class="dialogLabel">${key}：</label>
                <span class="dialogDesc">${item[key] || ""}</span>
              </div>`;
        }
        str += '<div class="table_wrap scroll-bar">';
        str += `<div class="table-item-box scroll-bar"><div class="table-con"><div class="tr"><div>线路名称</div><div>导线型号</div><div>线路总长度(m)</div><div>架空线路长度(m)</div><div>电缆线路长度(m)</div><div>最远供电距离(m)</div><div>电杆数(基)</div><div>电缆分支箱(面)</div><div>表箱数(面)</div><div>用户总数(户)</div><div>单相用户(户)</div><div>三相用户(户)</div></div><div class="td-body">`;
        result.list.forEach((item, index) => {
          str += `<div class="td" key="${index}">`;
          str += `<div title="${item.xlmc}">${item.xlmc}</div><div>${item.dxxh}</div><div>${item.xlzcd}</div><div>${item.jkxlcd}</div><div>${item.dlxlcd}</div><div>${item.zygdjl}</div><div>${item.dgs}</div><div>${item.dlfzx}</div><div>${item.bxs}</div><div>${item.yhzs}</div><div>${item.dxyh}</div><div>${item.sxyh}</div>`;
          str += "</div>";
          str += "</div>";
        });
        str += "</div></div>";
        str += "</div>";
      }
      let jwd = this.$refs.MyMap.flyToBox(this.currentObj.name);
      console.log(11, this.currentObj.name, jwd);
      if ((result.jd || jwd.jd) && (result.wd || jwd.wd)) {
        // 控制弹框的宽度
        this.isMapDialogWidthAuto = true;
        this.$refs.MyMap.showFacilityInfo(str, {
          jd: result.jd || jwd.jd,
          wd: result.wd || jwd.wd,
          name: this.currentObj.name,
        });
        console.log(11111, "折叠 容器");
        // 折叠 (左侧、右侧、顶部、底部)
        this.toUnfolding(true);
      }
      return;
      // getAction("/wx/dp/countDetail", {
      //   type: this.typeActive,
      //   name: this.currentObj.name,
      // }).then((res) => {
      //   if (res.success) {
      //     let item = {};
      //     let str = "";
      //     if (this.typeActive == 4) {
      //       // 重新进行排序
      //       let resultObj = {
      //         lx: res.result.lx,
      //         gt: res.result.gt,
      //         dx: res.result.dx,
      //         dl: res.result.dl,
      //         pdbyq: res.result.pdbyq,
      //         zskg: res.result.zskg,
      //         pdzf: res.result.pdzf,
      //       };
      //       let nameObj = {
      //         lx: "线路",
      //         gt: "杆塔",
      //         dx: "导线",
      //         dl: "电缆",
      //         pdbyq: "配电变压器",
      //         zskg: "柱上开关",
      //         pdzf: "配电站房",
      //       };
      //       str += '<div class="table_wrap scroll-bar">';
      //       for (const key in resultObj) {
      //         str += `<div class="table-item-box scroll-bar ${key}-bar">
      //           <div class="table-title">${nameObj[key]}</div><div class="table-con">`;
      //         if (key === "lx") {
      //           str += `<div class="tr"><div>线路名称</div><div>电压等级(kV)</div><div>投运时间</div><div>所属地市</div><div>所属区县</div><div>维护班组</div></div><div class="td-body">`;
      //         }
      //         if (key === "gt") {
      //           str += `<div class="tr"><div>型号</div><div>杆塔高(m)</div><div>杆塔材质</div><div>杆塔范围</div><div>杆塔数量</div></div><div class="td-body">`;
      //         }
      //         if (key === "dx") {
      //           str += `<div class="tr"><div>导线型号</div><div>导线类型</div><div>导线截面(mm²)</div><div>导线范围</div><div>导线长度(m)</div></div><div class="td-body">`;
      //         }
      //         if (key === "dl") {
      //           str += `<div class="tr"><div>电缆型号</div><div>绝缘类型</div><div>截面积(mm²)</div><div>载流量(A)</div><div>电缆范围</div><div>电缆长度(m)</div></div><div class="td-body">`;
      //         }
      //         if (key === "pdbyq") {
      //           str += `<div class="tr"><div>设备名称</div><div>变压器类型</div><div>所属杆塔/站房</div><div>额定容量(kVA)</div><div>型号</div><div>使用性质</div></div><div class="td-body">`;
      //         }
      //         if (key === "zskg") {
      //           str += `<div class="tr"><div>开关类型</div><div>数量</div></div><div class="td-body">`;
      //         }
      //         if (key === "pdzf") {
      //           str += `<div class="tr"><div>站房类型</div><div>数量</div></div><div class="td-body">`;
      //         }
      //         resultObj[key].forEach((item, index) => {
      //           // null
      //           for (const k in item) {
      //             item[k] = item[k] === null ? "" : item[k];
      //           }
      //           if (key === "lx") {
      //             str += `<div class="td" key="${key}${index}">`;
      //             str += `<div title="${item.xlmc}">${item.xlmc}</div><div>${
      //               item.dydj || ""
      //             }</div><div>${item.tysj || ""}</div><div>${
      //               item.ssds || ""
      //             }</div><div>${item.ssqx || ""}</div><div>${
      //               item.whbz || ""
      //             }</div>`;
      //             str += "</div>";
      //           }
      //           if (key === "gt") {
      //             str += `<div class="td" key="${key}${index}">`;
      //             str += `<div>${item.xh}</div><div>${item.gtg}</div><div>${item.gtcz}</div><div title="${item.gtfw}">${item.gtfw}</div><div>${item.gtsl}</div>`;
      //             str += "</div>";
      //           }
      //           if (key === "dx") {
      //             str += `<div class="td" key="${key}${index}">`;
      //             str += `<div>${item.dxxh}</div><div>${item.dxlx}</div><div>${item.dxjm}</div><div title="${item.dxfw}">${item.dxfw}</div><div>${item.dxcd}</div>`;
      //             str += "</div>";
      //           }
      //           if (key === "dl") {
      //             str += `<div class="td" key="${key}${index}">`;
      //             str += `<div>${item.dlxh}</div><div>${item.jylx}</div><div>${item.jmj}</div><div>${item.zll}</div><div>${item.dlfw}</div><div>${item.dlcd}</div>`;
      //             str += "</div>";
      //           }
      //           if (key === "pdbyq") {
      //             str += `<div class="td" key="${key}${index}">`;
      //             str += `<div title="${item.sbmc}">${item.sbmc}</div><div>${item.byqlx}</div><div title="${item.ssgtzf}">${item.ssgtzf}</div><div>${item.edrl}</div><div>${item.xh}</div><div>${item.syxz}</div>`;
      //             str += "</div>";
      //           }
      //           if (key === "zskg") {
      //             str += `<div class="td" key="${key}${index}">`;
      //             for (const key3 in item) {
      //               str += `<div>${item[key3]}</div>`;
      //             }
      //             str += "</div>";
      //           }
      //           if (key === "pdzf") {
      //             str += `<div class="td" key="${key}${index}">`;
      //             for (const key3 in item) {
      //               str += `<div>${item[key3]}</div>`;
      //             }
      //             str += "</div>";
      //           }
      //         });
      //         str += "</div>";
      //         str += "</div></div>";
      //       }
      //       str += "</div>";
      //     }
      //     if (this.typeActive == 6) {
      //       item = {
      //         台区名称: res.result.tqmc,
      //         "所属杆塔/站房": res.result.ssgt,
      //         变压器类型: res.result.byqlx,
      //         额定容量: res.result.edrl,
      //         型号: res.result.xh,
      //         使用性质: res.result.syxz,
      //       };
      //       for (const key in item) {
      //         str += `<div class="dialogList"><label for="" class="dialogLabel">${key}：</label>
      //           <span class="dialogDesc">${item[key] || ""}</span>
      //         </div>`;
      //       }
      //       str += '<div class="table_wrap scroll-bar">';
      //       str += `<div class="table-item-box scroll-bar"><div class="table-con"><div class="tr"><div>线路名称</div><div>导线型号</div><div>线路总长度(m)</div><div>架空线路长度(m)</div><div>电缆线路长度(m)</div><div>最远供电距离(m)</div><div>电杆数(基)</div><div>电缆分支箱(面)</div><div>表箱数(面)</div><div>用户总数(户)</div><div>单相用户(户)</div><div>三相用户(户)</div></div><div class="td-body">`;
      //       res.result.list.forEach((item, index) => {
      //         str += `<div class="td" key="${index}">`;
      //         str += `<div title="${item.xlmc}">${item.xlmc}</div><div>${item.dxxh}</div><div>${item.xlzcd}</div><div>${item.jkxlcd}</div><div>${item.dlxlcd}</div><div>${item.zygdjl}</div><div>${item.dgs}</div><div>${item.dlfzx}</div><div>${item.bxs}</div><div>${item.yhzs}</div><div>${item.dxyh}</div><div>${item.sxyh}</div>`;
      //         str += "</div>";
      //         str += "</div>";
      //       });
      //       str += "</div></div>";
      //       str += "</div>";
      //     }
      //     let jwd = this.$refs.MyMap.flyToBox(this.currentObj.name);
      //     console.log(11, this.currentObj.name, jwd);
      //     if ((res.result.jd || jwd.jd) && (res.result.wd || jwd.wd)) {
      //       // 控制弹框的宽度
      //       this.isMapDialogWidthAuto = true;
      //       this.$refs.MyMap.showFacilityInfo(str, {
      //         jd: res.result.jd || jwd.jd,
      //         wd: res.result.wd || jwd.wd,
      //         name: this.currentObj.name,
      //       });
      //       console.log(11111, "折叠 容器");
      //       // 折叠 (左侧、右侧、顶部、底部)
      //       this.toUnfolding(true);
      //     }
      //   }
      // });
    },
    showItem() {
      console.log(22222, "展开 容器");
      // 展开 (左侧、右侧、顶部、底部)
      this.toUnfolding(false);
    },
    toUnfolding(val) {
      // 展开、折叠 左侧
      this.isUnfoldingTree = val;
      this.isUnfoldingInfo = val;
      // 展开、折叠 底部
      this.bottomIconStatus = !val;
      // 展开、折叠 顶部
      this.isUnfoldingBoBao = val;
      // 展开、折叠右侧
      this.$refs.rightLayout.isIntroduction = val;
      this.$refs.rightLayout.isBasicInfo = val;
      if (val === false) {
        this.$refs.MyMap.flyToBox(this.currentObj.name);
      }
    },
    showFacilityInfo(properties) {
      // console.log(properties)
      this.gzlistActive = null;
      if (!properties) {
        return false;
      }
      //故障点图标点击处理
      if (properties.gzlx) {
        for (let i = 0; i < this.gzList.length; i++) {
          const element = this.gzList[i];
          if (element.id == properties.id) {
            this.changeGzList(element, i);
            break;
          }
        }
        return false;
      }
      //低压线路
      if (properties.DYXLMC && properties.DYXLMC != "") {
        let str = "";
        str = `<div class="dialogList dialogList-line">
          <label for="" class="dialogLabel">台区名称：</label>
          <span class="dialogDesc">${properties.taiqu || ""}</span>
        </div><div class="dialogList dialogList-line">
          <label for="" class="dialogLabel">低压台区编号：</label>
          <span class="dialogDesc">${properties.DYTQBH || ""}</span>
        </div><div class="dialogList dialogList-line">
          <label for="" class="dialogLabel">低压线路名称：</label>
          <span class="dialogDesc">${properties.DYXLMC || ""}</span>
        </div>`;

        this.$refs.MyMap.showFacilityInfo(str, {
          jd: properties.jd,
          wd: properties.wd,
          name: properties.DYXLMC,
        });

        return false;
      }
      this.childpPoperties = properties;
      if (properties.type == 3) {
        this.getJbxx(properties.name, 3, "gis"); //gis : gis点击事件标识
        this.getTjxx(properties.name, 3, "gis");
      } else if (properties.lx == "台区") {
        this.currentObj = {
          name: properties.name,
          type: 6,
        };
        this.getJbxx(properties.name, 6, "gis"); //gis : gis点击事件标识
        this.getTjxx(properties.name, 6, "gis");
      } else if (properties.lx == "开关") {
        this.getJbxx(properties.name, 5, "gis");
        this.getTjxx(properties.name, 5, "gis");
      } else if (properties.lx == "杆塔") {
        this.getJbxx(properties.name, 8, "gis");
        this.getTjxx(properties.name, 8, "gis");
      } else if (properties.lx == "低压杆塔") {
        this.getJbxx(properties.id, 10, "gis");
        this.getTjxx(properties.name, 10, "gis");
      } else if (properties.lx == "计量箱") {
        this.getJbxx(properties.id, 7, "gis");
        this.getTjxx(properties.name, 7, "gis");
      } else {
        this.getJbxx(properties.name, 4, "gis"); //其他默认为点击线路，类型为4
        this.getTjxx(properties.name, 4, "gis");
      }
    },
    //故障点收起、展开
    changeMenuBottom() {
      this.bottomIconStatus = !this.bottomIconStatus;
    },
    //故障列表点击
    changeGzList(item, index) {
      console.log("故障列表点击===", item, index);
      let that = this;
      this.$refs.MyMap.closePup();
      if (this.gzlistActive == index) {
        this.gzlistActive = null;
        return false;
      }
      this.gzlistActive = index;
      let str = "";
      if (this.gzBtnsItem.type < 4) {
        str += `<div class="dialogList dialogList-line">
        <label for="" class="dialogLabel">所属变电站：</label>
        <span class="dialogDesc">${item.gds || ""}</span>
      </div><div class="dialogList dialogList-line">
        <label for="" class="dialogLabel">线路管理人员姓名：</label>
        <span class="dialogDesc">${item.xlgly || ""}</span>
      </div><div class="dialogList dialogList-line">
        <label for="" class="dialogLabel">线路管理人员联系方式：</label>
        <span class="dialogDesc">${item.lxfs || ""}</span>
      </div><div class="dialogList dialogList-line">
        <label for="" class="dialogLabel">故障类型：</label>
        <span class="dialogDesc">${item.gzlx || ""}</span>
      </div>`;

        this.$refs.MyMap.showFacilityInfo(str, {
          jd: item.jd,
          wd: item.wd,
          name: item.xlmc || item.tqmc,
          type: this.gzBtnsItem.type,
        });
      } else if (this.gzBtnsItem.type < 7) {
        //低压情况、三相不平衡、重过载接口获取详情
        //没找到接口
        getAction("/wx/dp/gzdTk", {
          type: this.gzBtnsItem.type,
          name: item.id,
        }).then((res) => {
          if (res.success) {
            item = res.result;
            str += `<div class="dialogList dialogList-line">
                <label for="" class="dialogLabel">台区名称：</label>
                <span class="dialogDesc">${item.tqmc || ""}</span>
              </div><div class="dialogList dialogList-line">
                <label for="" class="dialogLabel">台区编号：</label>
                <span class="dialogDesc">${item.tqbh || ""}</span>
              </div><div class="dialogList dialogList-line">
                <label for="" class="dialogLabel">所属10KV线路：</label>
                <span class="dialogDesc">${item.ssxl || ""}</span>
              </div><div class="dialogList dialogList-line">
                <label for="" class="dialogLabel">异常次数：</label>
                <span class="dialogDesc">${item.yccs || ""}</span>
              </div><div class="dialogList dialogList-line">
                <label for="" class="dialogLabel">持续时间(小时)：</label>
                <span class="dialogDesc">${item.cxsj || ""}</span>
              </div><div class="dialogList dialogList-line">
                <label for="" class="dialogLabel">最大负载率：</label>
                <span class="dialogDesc">${item.zdfzl || ""}</span>
              </div><div class="dialogList dialogList-line">
                <label for="" class="dialogLabel">故障类型：</label>
                <span class="dialogDesc">${item.gzlx || ""}</span>
              </div><div class="dialogList dialogList-line">
                <label for="" class="dialogLabel">处理情况：</label>
                <span class="dialogDesc">${item.clqk || ""}</span>
              </div><div class="dialogList dialogList-line">
                <label for="" class="dialogLabel">治理措施：</label>
                <span class="dialogDesc">${item.zlcs || ""}</span>
              </div>`;
            that.$refs.MyMap.highlightTower(item.tqmc);
            this.$refs.MyMap.showFacilityInfo(str, {
              jd: item.jd,
              wd: item.wd,
              name: item.tqmc,
              type: this.gzBtnsItem.type,
            });
          }
        });
      } else if (this.gzBtnsItem.type == 7) {
        // 联络开关
        that.$refs.MyMap.flyToCenter(Number(item.jd), Number(item.wd));
        that.$refs.MyMap.highlightTower(item.xlmc);
        that.$refs.MyMap.highlightLine(null, [item.xlgly, item.gzlx], "llkg");
      }

      // 高亮10KV
      if (this.gzBtnsItem.type == 3) {
        this.$refs.MyMap.highlightLine(item.xlmc);
      }
    },
    //故障类型按钮点击
    changeGzBtn(item, index) {
      this.$refs.seamlessScrollGz.reset();
      this.$refs.MyMap.closePup();
      this.gzlistActive = null;
      this.gzBtnsItem = item;
      this.getGzList(item.type);

      this.statisticsArr = [
        {
          name: "三相不平衡数量(个)",
          value: 158,
        },
        {
          name: "分布10KV线路数量(条)",
          value: 19,
        },
      ];
      return;
      // getAction("/wx/dp/gzdCount?type=" + item.type).then((res) => {
      //   if (res.success) {
      //     this.statisticsArr = res.result || [];
      //   }
      // });
    },
    toSelectGzList(e) {
      console.log("故障点列表===", e.target.dataset);
      let index = Number(e.target.dataset.index);
      let item = this.gzList[index];
      this.changeGzList(item, index);
    },
    //获取故障点数据
    getGzList(type) {
      this.gzList = resultJson;
      // 地图加载
      if (type == 1 || type == 2) {
        this.$refs.MyMap.addGZdata(type, result);
      }
      return;
      // getAction("/wx/dp/gzdList", { type: type }).then((res) => {
      //   if (res.success) {
      //     this.gzList = res.result;
      //     // 地图加载
      //     if (type == 1 || type == 2) {
      //       this.$refs.MyMap.addGZdata(type, res.result);
      //     }
      //   }
      // });
    },
    getBoBaoData() {
      //没找到接口
      getAction("/wx/dp/getTdxx").then((res) => {
        if (res.success) {
          this.bobaoArr = res.result || [];
        }
      });
    },
    //获取 树 网格员
    getLeftInitData() {
      let result = peopleDataJson;
      this.scrollData3 = result;
      this.scrollData3.forEach((item) => {
        // if (item.sysFile) {
        //   imageFileView({
        //     filePath: item.sysFile.filePath,
        //   }).then((res) => {
        //     this.$set(item, "src", window.URL.createObjectURL(res));
        //   });
        // }
      });
      // getAction('/wx/dp/wlyList').then(res => {
      //   if (res.success) {
      //     this.scrollData3 = res.result
      //     this.scrollData3.forEach(item => {
      //       if (item.sysFile) {
      //         imageFileView({
      //           filePath: item.sysFile.filePath,
      //         }).then((res) => {
      //           this.$set(item, 'src', window.URL.createObjectURL(res))
      //         })
      //       }
      //     })
      //   }
      // })
    },
    getTree() {
      this.treeData = [];

      let result = leftTreeJson;
      // 递归
      let index = 0;
      const mapTree = (org) => {
        const haveChildren =
          Array.isArray(org.children) && org.children.length > 0;
        index++;
        return {
          ...org,
          title: org.name,
          expand: org.type == 1,
          children: haveChildren
            ? org.children.map((child) => mapTree(child))
            : null,
        };
      };
      let arr = result.children.map((org) => mapTree(org));
      // 赋值
      this.rootName = result.name;
      this.$emit("getRootName", this.rootName);
      this.treeData = JSON.parse(JSON.stringify(arr));
      this.copyTreeData = JSON.parse(JSON.stringify(arr));

      // 右侧=》 默认查询第一个
      this.navigationArr = [result.name];
      this.getJjxx(result.title, result.type);
      // 加载变电站数据
      this.$refs.MyMap.addBDZ(result);
      // getAction('/wx/dp/tree', { name: this.treeName }).then(res => {
      // if (res.success) {
      //   // 递归
      //   let index = 0;
      //   const mapTree = (org) => {
      //     const haveChildren = Array.isArray(org.children) && org.children.length > 0;
      //     index++;
      //     return {
      //       ...org,
      //       title: org.name,
      //       expand: org.type == 1,
      //       children: haveChildren ? org.children.map(child => mapTree(child)) : null,
      //     };
      //   };
      //   let arr = res.result.children.map(org => mapTree(org));
      //   // 赋值
      //   this.rootName = res.result.name
      //   this.$emit('getRootName', this.rootName)
      //   this.treeData = JSON.parse(JSON.stringify(arr))
      //   this.copyTreeData = JSON.parse(JSON.stringify(arr))

      //   // 右侧=》 默认查询第一个
      //   this.navigationArr = [res.result.name]
      //   this.getJjxx(res.result.title, res.result.type)
      //   // 加载变电站数据
      //   this.$refs.MyMap.addBDZ(res.result)
      // }
      // })
    },
    treeSelectChange() {
      this.$refs.MyMap.closePup();
      this.selectPhoneindex = null;
      let nodesArr = this.$refs.tree.getSelectedNodes();
      console.log("树的点击事件", nodesArr, this.treeData);
      if (nodesArr.length) {
        this.currentObj = nodesArr[0];
        let arr = getParentList(this.treeData, this.currentObj.name);
        let nameArr = arr.map((item) => item.name);
        this.navigationArr = nameArr.reverse();
        if (this.currentObj.type > 2) {
          this.getJbxx(this.currentObj.title, this.currentObj.type);
        } else {
          this.getJjxx(this.currentObj.title, this.currentObj.type);
        }
        this.getTjxx(this.currentObj.title, this.currentObj.type);
        // 变电站
        if (this.currentObj.type == 3) {
          let names = [];
          this.currentObj.children.forEach(function (item) {
            names.push(item.name);
          });
          this.$refs.MyMap.highlightTower(this.currentObj.name);
          this.$refs.MyMap.highlightLine("", names);
          this.$refs.MyMap.flyToCenter(
            Number(this.currentObj.jd),
            Number(this.currentObj.wd),
            12
          );
        }
        // 加载台区设备
        if (this.currentObj.type == 6) {
          this.$refs.MyMap.addTQdata(this.currentObj.title);
        }
        // 台区和10KV线路获取接线图
        if (this.currentObj.type == 4 || this.currentObj.type == 6) {
          this.getDljxt(this.currentObj.title, this.currentObj.type);
        }
        // 高亮10kv线路
        if (this.currentObj.type == 4) {
          this.$refs.MyMap.highlightTower("");
          this.$refs.MyMap.highlightLine(this.currentObj.title);
          this.$refs.MyMap.flyToBox(this.currentObj.title);
        }
        // 高亮台区、开关
        if (this.currentObj.type == 5 || this.currentObj.type == 6) {
          this.$refs.MyMap.highlightLine("");
          this.$refs.MyMap.flyToCenter(this.currentObj.jd, this.currentObj.wd);
          let tqnames = [];
          tqnames.push(this.currentObj.title);
          if (this.currentObj.children) {
            this.currentObj.children.forEach(function (item) {
              tqnames.push(item.name);
            });
          }
          this.$refs.MyMap.highlightTower("", tqnames);
        }
        // 高亮开关下的主线和支线
        if (this.currentObj.type == 5) {
          that.$refs.MyMap.highlightLine("", []);
          // getAction("/wx/dp/queryKgmcByXlmc", {
          //   name: this.currentObj.title,
          // }).then((res) => {
          //   if (res.success) {
          //     that.$refs.MyMap.highlightLine("", res.result);
          //   }
          // });
        }
        // 点击服务站高亮10kv线路
        if (this.currentObj.type == 2) {
          let names = [];
          this.currentObj.children.forEach(function (item) {
            item.children.forEach(function (n) {
              names.push(n.name);
            });
          });
          this.$refs.MyMap.highlightTower("");
          this.$refs.MyMap.highlightLine("", names);
          this.$refs.MyMap.flyToCenter(
            Number(this.currentObj.children[0].jd),
            Number(this.currentObj.children[0].wd),
            12
          );
        }
      } else {
        this.$refs.MyMap.addTQdata();
      }
    },
    //获取简介信息
    getJjxx(name, type) {
      this.introduction = "";
      this.typeActive = Number(type);
      this.elementary = {};
      let result =
        "截至2020年底，武穴电网拥有220千伏公用变电站3座，主变容量72万千伏安，220千伏公用线路7条，长度233.63公里；110千伏公用变电站9座，主变容量58.45万千伏安，110千伏公用线路18条，长度208公里；35千伏公用变电站12座，容量15.56万千伏安，35千伏公用线路22条，长度178.81公里；10千伏公用配变3428台，容量70.334万千伏安，10千伏公用线路128条，长度2161.5公里；低压线路长度8345.5公里。110kV及以下电源总装机29.25万千瓦，其中：110kV电源装机22.93万千瓦（风电7.93万千瓦，光伏15万千瓦）；35kV及以下电源装机6.32万千瓦（风电2.6万千瓦，光伏3.39万千瓦，小水电0.33万千瓦），基本上形成了以220kV为电源、110kV为枢纽、35kV为骨干、10kV为主体的单向辐射供电网络。公司近几年获得荣誉情况：2016-2018年连续三年获得黄冈市文明单位；2020年荣获2017—2019 年度湖北省文明单位、黄冈市防汛保电先进集体、武穴市安全生产和防灾减灾救灾工作目标责任考核优胜单位、武穴市2020年度目标责任考核“优胜单位”。";
      this.introduction = result;
      // getAction("/wx/dp/queryJjxx", { name: name, type: type }).then((res) => {
      //   if (res.success) {
      //     this.introduction = res.result;
      //   }
      // });
    },
    //获取各类型基本信息
    getJbxx(name, type) {
      this.tqFlag = false;
      this.introduction = "";
      this.typeActive = Number(type);
      this.elementary = {};
      let result = {
        lxmc: null,
        xlmc: null,
        bdzmc: "城东变电站",
        kgmc: null,
        tqgly: null,
        glydh: null,
        rl: null,
        tqmc: null,
        tqbh: null,
        szgtmc: null,
        jlxmc: null,
        id: "1571747649024720902",
        userList: null,
        tpList: [],
        gtbs: null,
        gzx: null,
        xllx: null,
        xltj: null,
        gtcz: null,
        gtxz: null,
        gtxh: null,
        dxlxxj: null,
        ggxl: null,
        tx: null,
        xm: null,
        xb: null,
        lxfs: null,
        ssgds: null,
        ssxl: null,
        zzfw: null,
        dydj: "110kV",
        bdzdz: "武穴市武穴服务站",
        dygtmc: null,
        dj: null,
      };
      this.jbxxData = result;
      // type: 3 变电站=>变电站名称、电压等级、变电站地址、照片
      if (type == 3 && result) {
        this.elementary = {
          变电站名称: result.bdzmc,
          电压等级: result.dydj,
          变电站地址: result.bdzdz,
        };
      }
      // type: 4 10KV线路=>基本信息：线路名称、所属变电站、线路管理人员姓名、线路管理人员联系方式
      if (type == 4 && result) {
        this.elementary = {
          线路名称: result.xlmc,
          所属变电站: result.bdzmc,
          线路管理人员姓名: result.tqgly,
          线路管理人员联系方式: result.glydh,
        };
      }
      // type: 5 开关=>基本信息：开关名称、所在杆塔名称、线路管理人员姓名、线路管理人员联系方式。
      if (type == 5 && result) {
        this.elementary = {
          开关名称: result.kgmc,
          所在杆塔名称: result.szgtmc,
          线路管理人员姓名: result.tqgly,
          线路管理人员联系方式: result.glydh,
        };
      }
      // type: 6 台区=>基本信息：台区名称、台区编号、台区容量、所在杆塔名称、网格员姓名、网格员联系方式
      if (type == 6 && result) {
        this.elementary = {
          台区编号: result.tqbh,
          "台区容量(KVA)": result.rl,
          网格员姓名: result.tqgly,
          网格员联系方式: result.glydh,
          台区名称: result.tqmc,
          所在杆塔名称: result.szgtmc,
        };
        let selectPhoneindexNotMove = null;
        for (let i = 0; i < this.scrollData3.length; i++) {
          const element = this.scrollData3[i];
          if (element.name == result.tqgly) {
            selectPhoneindexNotMove = i;
            break;
          }
        }
        let item = this.scrollData3.splice(selectPhoneindexNotMove, 1);
        this.scrollData3.unshift(...item);
        this.selectPhoneindex = 0;
        this.tqFlag = true;
      }
      // 计量箱=>基本信息：计量箱名称、网格员姓名、网格员联系方式、用户列表（用户编号、电表条码、用户名称、用户地址）（最多10个）
      if (type == 7 && result) {
        this.elementary = {
          计量箱名称: result.jlxmc,
          计量箱条码: result.id,
          网格员姓名: result.tqgly,
          网格员联系方式: result.glydh,
        };
      }
      // 杆塔=>基本信息：杆塔标识、公/专线、线路类型、线路T接、杆塔材质、杆塔性质、杆塔型号、导线类型/线径、共杆线路
      if (type == 8 && result) {
        this.elementary = {
          杆塔标识: result.gtbs,
          "公/专线": result.gzx,
          线路类型: result.xllx,
          杆塔材质: result.gtcz,
          杆塔性质: result.gtxz,
          杆塔型号: result.gtxh,
          "导线类型/线径": result.dxlxxj,
          线路T接: result.xltj,
          共杆线路: result.ggxl,
        };
      }
      // 网格员=>基本信息：照片、姓名、性别、联系方式、所属供电所、所属10KV线路、职责范围
      if (type == 9 && result) {
        this.elementary = {
          照片: result.tx,
          姓名: result.xm,
          性别: result.xb,
          联系方式: result.lxfs,
          所属供电所: result.ssgds,
          所属10KV线路: result.ssxl,
          职责范围: result.zzfw,
        };
      }
      // 低压杆塔=>低压杆塔名称、杆塔性质、杆塔材质、档距（M）、照片
      if (type == 10 && result) {
        this.elementary = {
          低压杆塔名称: result.dygtmc,
          杆塔性质: result.gtxz,
          杆塔材质: result.gtcz,
          "档距(M)": result.dj,
        };
      }
      // console.log('基本信息=》对象', this.elementary);
      // getAction("/wx/dp/queryJbxx", { name: name, type: type }).then((res) => {
      // if (res.success) {
      //   this.jbxxData = res.result;
      //   // type: 3 变电站=>变电站名称、电压等级、变电站地址、照片
      //   if (type == 3 && res.result) {
      //     this.elementary = {
      //       变电站名称: res.result.bdzmc,
      //       电压等级: res.result.dydj,
      //       变电站地址: res.result.bdzdz,
      //     };
      //   }
      //   // type: 4 10KV线路=>基本信息：线路名称、所属变电站、线路管理人员姓名、线路管理人员联系方式
      //   if (type == 4 && res.result) {
      //     this.elementary = {
      //       线路名称: res.result.xlmc,
      //       所属变电站: res.result.bdzmc,
      //       线路管理人员姓名: res.result.tqgly,
      //       线路管理人员联系方式: res.result.glydh,
      //     };
      //   }
      //   // type: 5 开关=>基本信息：开关名称、所在杆塔名称、线路管理人员姓名、线路管理人员联系方式。
      //   if (type == 5 && res.result) {
      //     this.elementary = {
      //       开关名称: res.result.kgmc,
      //       所在杆塔名称: res.result.szgtmc,
      //       线路管理人员姓名: res.result.tqgly,
      //       线路管理人员联系方式: res.result.glydh,
      //     };
      //   }
      //   // type: 6 台区=>基本信息：台区名称、台区编号、台区容量、所在杆塔名称、网格员姓名、网格员联系方式
      //   if (type == 6 && res.result) {
      //     this.elementary = {
      //       台区编号: res.result.tqbh,
      //       "台区容量(KVA)": res.result.rl,
      //       网格员姓名: res.result.tqgly,
      //       网格员联系方式: res.result.glydh,
      //       台区名称: res.result.tqmc,
      //       所在杆塔名称: res.result.szgtmc,
      //     };
      //     let selectPhoneindexNotMove = null;
      //     for (let i = 0; i < this.scrollData3.length; i++) {
      //       const element = this.scrollData3[i];
      //       if (element.name == res.result.tqgly) {
      //         selectPhoneindexNotMove = i;
      //         break;
      //       }
      //     }
      //     let item = this.scrollData3.splice(selectPhoneindexNotMove, 1);
      //     this.scrollData3.unshift(...item);
      //     this.selectPhoneindex = 0;
      //     this.tqFlag = true;
      //   }
      //   // 计量箱=>基本信息：计量箱名称、网格员姓名、网格员联系方式、用户列表（用户编号、电表条码、用户名称、用户地址）（最多10个）
      //   if (type == 7 && res.result) {
      //     this.elementary = {
      //       计量箱名称: res.result.jlxmc,
      //       计量箱条码: res.result.id,
      //       网格员姓名: res.result.tqgly,
      //       网格员联系方式: res.result.glydh,
      //     };
      //   }
      //   // 杆塔=>基本信息：杆塔标识、公/专线、线路类型、线路T接、杆塔材质、杆塔性质、杆塔型号、导线类型/线径、共杆线路
      //   if (type == 8 && res.result) {
      //     this.elementary = {
      //       杆塔标识: res.result.gtbs,
      //       "公/专线": res.result.gzx,
      //       线路类型: res.result.xllx,
      //       杆塔材质: res.result.gtcz,
      //       杆塔性质: res.result.gtxz,
      //       杆塔型号: res.result.gtxh,
      //       "导线类型/线径": res.result.dxlxxj,
      //       线路T接: res.result.xltj,
      //       共杆线路: res.result.ggxl,
      //     };
      //   }
      //   // 网格员=>基本信息：照片、姓名、性别、联系方式、所属供电所、所属10KV线路、职责范围
      //   if (type == 9 && res.result) {
      //     this.elementary = {
      //       照片: res.result.tx,
      //       姓名: res.result.xm,
      //       性别: res.result.xb,
      //       联系方式: res.result.lxfs,
      //       所属供电所: res.result.ssgds,
      //       所属10KV线路: res.result.ssxl,
      //       职责范围: res.result.zzfw,
      //     };
      //   }
      //   // 低压杆塔=>低压杆塔名称、杆塔性质、杆塔材质、档距（M）、照片
      //   if (type == 10 && res.result) {
      //     this.elementary = {
      //       低压杆塔名称: res.result.dygtmc,
      //       杆塔性质: res.result.gtxz,
      //       杆塔材质: res.result.gtcz,
      //       "档距(M)": res.result.dj,
      //     };
      //   }
      //   // console.log('基本信息=》对象', this.elementary);
      // }
      // });
    },
    //获取统计信息
    getTjxx(name, type, way) {
      this.statisticsArr = [];
      let result = [
        {
          name: "变电站数量",
          value: "3",
        },
        {
          name: "10KV线路数量",
          value: "20",
        },
        {
          name: "线路总长度(KM)",
          value: 87.11,
        },
        {
          name: "杆塔总数量",
          value: "986",
        },
        {
          name: "开关数量",
          value: "54",
        },
        {
          name: "台区数量",
          value: "919",
        },
        {
          name: "总容量(KVA)",
          value: "44560",
        },
        {
          name: "线路管理人员数量",
          value: "2",
        },
        {
          name: "网格员数量",
          value: "55",
        },
      ];
      this.statisticsArr = result;
      if (way && way == "gis") {
        this.getPjHtml(result);
      }
      if (type == 2) {
        // 线路管理人员数量 放在最后一个
        let index = this.statisticsArr.findIndex(
          (item) => item.name === "线路管理人员数量"
        );
        let item = result[index];
        this.statisticsArr.splice(index, 1);
        this.statisticsArr.push(item);
      }
      return;
      // getAction("/wx/dp/queryTjxx", { name: name, type: type }).then((res) => {
      //   if (res.success) {
      //     this.statisticsArr = res.result;
      //     if (way && way == "gis") {
      //       this.getPjHtml(res.result);
      //     }
      //     if (type == 2) {
      //       // 线路管理人员数量 放在最后一个
      //       let index = this.statisticsArr.findIndex(
      //         (item) => item.name === "线路管理人员数量"
      //       );
      //       let item = res.result[index];
      //       this.statisticsArr.splice(index, 1);
      //       this.statisticsArr.push(item);
      //     }
      //   }
      // });
    },
    //获取地理接线图/单线图
    getDljxt(name, type) {
      this.oImg = {};
      let result = [gtmcJson, yhbhJson];
      this.oImg = result || {
        createTime: "2022-09-15",
        deleteTime: null,
        fileName: "马口台区.jpg",
        filePath: "https://i.hd-r.cn/22ff41b04f1fde1568420e8574f20ad6.jpg",
        fileType: "马口台区",
        fileTypeDesc: "台区单线图",
        id: "",
        unionId: "",
        updateTime: "2022-09-15",
      };
      // getAction("/wx/dp/queryDljxt", { name: name, type: type }).then((res) => {
      //   if (res.success) {
      //     this.oImg = res.result || {};
      //   }
      // });
    },
    //网格员选中是
    toSelectPhone(e) {
      console.log(e.target.dataset);
      this.selectPhoneindex = Number(e.target.dataset.index);
      let item = this.scrollData3[this.selectPhoneindex];
      this.introduction = "";
      this.getJbxx(item.name, 9);
      this.getTjxx(item.name, 9);
      this.$refs.MyMap.addPeopleData(item.list);
    },
    //搜索按钮点击
    toSearch() {
      if (!this.searchFlag || this.treeName == "") {
        return false;
      }
      if (this.searchType == "gtmc" || this.searchType == "yhbh") {
        let result = [gtmcJson, yhbhJson];
        this.showFacilityInfo(result);
        if (result.lx == "计量箱") {
          this.$refs.MyMap.searchData(result);
        }
        return;
        // getAction("/wx/dp/queryTree", { name: this.treeName }).then((res) => {
        //   if (res.result) {
        //     this.showFacilityInfo(res.result);
        //     if (res.result.lx == "计量箱") {
        //       this.$refs.MyMap.searchData(res.result);
        //     }
        //   } else {
        //     this.$Message.warning("抱歉，没有找到相关内容，请重新输入");
        //   }
        // });
      } else {
        // 递归方法, 菜单搜索
        let onRecursionData = (arr, val, pid) => {
          let newarr = [];
          arr.forEach((item) => {
            if (item.children && item.children.length) {
              let children = onRecursionData(item.children, val, pid);
              let obj = {
                ...item,
                children,
              };
              if (this.treeName) {
                obj.expand = true;
              }
              if (children && children.length) {
                newarr.push(obj);
              } else if (item.title === val && item.pid == pid) {
                newarr.push({ ...item });
              }
            } else {
              if (item.title === val && item.pid == pid) {
                newarr.push(item);
              }
            }
          });
          return newarr;
        };
        // 递归调用
        this.treeData = onRecursionData(
          this.copyTreeData,
          this.treeName,
          this.searchChooseData.pid
        );
      }
    },
    //搜索框模糊搜索
    searchChange() {
      this.searchFlag = false;
      if (this.treeName == "") {
        clearTimeout(setTimer);
        this.searchLike = [];
        this.searchtreeData = [];
        this.treeData = this.copyTreeData;
      } else {
        let that = this;
        clearTimeout(setTimer);
        setTimer = setTimeout(() => {
          //搜索杆塔和用户编号
          that.searchLike = [gtmcJson, yhbhJson];

          // getAction("/wx/dp/queryLike?name=" + that.treeName).then((res) => {
          //   that.searchLike = res.result;
          // });
          // 递归
          const result = [],
            getItem = (arr) => {
              arr.forEach((v) => {
                result.push(v);
                if (v.children instanceof Array) {
                  getItem(v.children);
                }
              });
            };
          getItem(that.copyTreeData);
          let selectArr = [];
          result.forEach((item) => {
            if (item.title.indexOf(that.treeName) > -1) {
              selectArr.push(item);
            }
          });
          this.searchtreeData = selectArr;
        }, 1000);
      }
    },
    //模糊搜索选中
    shooseItem(it, type) {
      if (type == "cd") {
        this.searchChooseData = it;
        this.treeName = it.name;
      } else {
        this.treeName = it;
      }

      this.searchType = type;
      this.searchFlag = true;
      this.searchLike = [];
      this.searchtreeData = [];
    },
    //信息拼接
    async getPjHtml(strObj) {
      let str = "";
      if (this.childpPoperties.type != 3) {
        for (let i = 0; i < strObj.length; i++) {
          const element = strObj[i];
          str += `<div class="dialogList">
          <label for="" class="dialogLabel">${
            element.name + filterUnit(element.name)
          }：</label>
          <span class="dialogDesc">${element.value || ""}</span>
        </div>`;
        }
      }

      let that = this;
      let timer = setTimeout(() => {
        if (that.elementary) {
          clearTimeout(timer);

          for (const key in that.elementary) {
            // 一行显示
            let oneArr = [
              "所在杆塔名称",
              "线路管理人员姓名",
              "线路管理人员联系方式",
              "台区名称",
              "线路T接",
              "计量箱名称",
              "计量箱条码",
              "网格员姓名",
              "网格员联系方式",
              "低压杆塔名称",
              "变电站名称",
              "变电站地址",
              "共杆线路",
            ];
            //GIS变电站点击单独处理
            if (that.childpPoperties.type == 3 && key == "电压等级") {
              str += `<div class="dialogList ${
                oneArr.includes(key) ? "dialogList-line" : ""
              }"><label for="" class="dialogLabel">${key}：</label>
              <span class="dialogDesc">${that.elementary[key] || ""}</span>
            </div><div class="dialogList dialogList-line"><label for="" class="dialogLabel">10KV线路数量：</label>
              <span class="dialogDesc">${strObj[0].value || ""}</span>
            </div>`;
            } else {
              str += `<div class="dialogList ${
                oneArr.includes(key) ? "dialogList-line" : ""
              }"><label for="" class="dialogLabel">${key}：</label>
                <span class="dialogDesc">${that.elementary[key] || ""}</span>
              </div>`;
            }
          }

          //用户列表
          if (that.jbxxData && that.jbxxData.userList) {
            let user = that.jbxxData.userList;
            str +=
              '<div class="userList scroll-bar"><div class="table"><div class="thead"><span class="tableXh">序号</span><span class="tableBh">用户编号</span><span class="tableTm">电表条码</span><span class="tableMc">用户名称</span><span class="tableDz">用户地址</span></div><div class="tbody scroll-bar">';
            for (let j = 0; j < user.length; j++) {
              const element = user[j];
              str += `<div class="tr">
                <span class="tableXh">${j + 1}</span>
                <span class="tableBh">${element.yhbh || "--"}</span>
                <span class="tableTm" title='${element.dbtm}'>${
                element.dbtm || "--"
              }</span>
                <span class="tableMc">${element.yhmc || "--"}</span>
                <span class="tableDz" title="${element.yhdz}">${
                element.yhdz || "--"
              }</span>
              </div>`;
            }
          }
          str += "</div></div></div>";

          //图片
          // if (that.jbxxData.tpList && that.jbxxData.tpList.length > 0) {
          //   let fileList = that.jbxxData.tpList, imgHtml = '';
          //   imgHtml = that.getImgUrl(fileList)
          //   str += '<div class="tpList"><span class="tpListLabel">图片：</span>'+ imgHtml + '</div>'
          // }
          that.$refs.MyMap.showFacilityInfo(str, that.childpPoperties);
        }
      }, 200);
      // console.log(strObj, this.elementary, str)
    },
    getImgUrl(fileList) {
      return new Promise((resolve, reject) => {
        let imgHtml = "",
          num = 0;
        fileList.map((file, index) => {
          num++;
          imageFileView({
            filePath: file.filePath,
            fileName: file.fileName,
          }).then((res) => {
            let captchaImg = window.URL.createObjectURL(res);
            imgHtml += `<img src="${captchaImg}" class="tpListImg"/>`;
          });
        });
        if (num == fileList.length) {
          setTimeout(() => {
            resolve(imgHtml);
          }, 800);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../styles/fonts/fontNum.less";
.map {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
}
.menu-left {
  top: 95px;
  left: 20px;
  position: absolute;
  width: 450px;
  margin-right: 16px;
  display: inline-block;
  .left-head-container {
    .search-box {
      margin-top: 11px;
      height: 50px;
      display: flex;
      position: relative;
      input {
        flex: 1;
        width: 450px;
        padding: 8px 20px;
        height: 50px;
        outline: none;
        background: rgba(0, 14, 15, 0.6);
        box-sizing: border-box;
        border: 1px solid #036a73;
        box-shadow: inset 0px 0px 10px 0px #02d9e4;
        font-size: 22px;
        color: #fff;
      }
      .search-select {
        z-index: 10;
        position: absolute;
        left: 0;
        border-radius: 10px;
        top: 54px;
        width: 370px;
        max-height: 300px;
        overflow-y: scroll;
        line-height: 32px;
        font-size: 16px;
        background: rgba(0, 14, 15, 0.8);
        text-align: left;
        padding: 0 10px;
        box-sizing: border-box;
        .search-select-title {
          padding-left: 20px;
          border-bottom: 1px solid #ffffff;
        }
        .search-select-list {
          cursor: pointer;
        }
      }
      input::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.6);
      }
      .search-btn {
        width: 80px;
        height: 50px;
        line-height: 36px;
        background: #02ffc2;
        font-size: 24px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: #151b17;
        cursor: pointer;
      }
      .search-dis {
        color: #999999;
        background-color: #e2e2e2;
        cursor: not-allowed;
      }
    }
    .tree-box {
      margin-top: 20px;
      padding: 20px;
      height: 527px;
      background: rgba(0, 14, 15, 0.6);
      box-sizing: border-box;
      border: 1px solid #036a73;
      /deep/.ivu-tree {
        text-align: left;
        margin-top: 20px;
        height: 433px;
        overflow: auto;
        padding-left: 40px;
        ul {
          font-size: 18px;
          li {
            margin: 11px 0;
          }
        }
        .ivu-tree-title {
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: #fff;
          &:hover {
            background: unset;
            color: #02ffc2;
          }
        }
        .ivu-tree-title-selected,
        .ivu-tree-title-selected:hover {
          background: unset;
          color: #02ffc2;
        }
      }
    }
    .tree-arrow {
      position: absolute;
      left: -10px;
      top: 312px;
      width: 20px;
      height: 77px;
      cursor: pointer;
      img {
        width: 100%;
      }
    }
    .info-box {
      margin-top: 20px;
      padding: 20px;
      height: 331px;
      background: rgba(0, 14, 15, 0.6);
      box-sizing: border-box;
      border: 1px solid #036a73;
      width: 100%;
      position: absolute;
      top: 608px;
      .scroll-container {
        overflow: hidden;
        margin: 20px 58px 0 0;
        .under-container {
          height: 238px;
          overflow: hidden;
        }
      }
      .scroll-container-new {
        margin-top: 0;
        .under-container {
          height: 191px;
        }
      }
      .fixed-container {
        margin: 10px 58px 10px 0;
        position: relative;
      }
      .table-item-box {
        .table-item {
          height: 47px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 18px;
          cursor: pointer;
          .select-img {
            display: block;
            width: 25px;
            margin-right: 10px;
            position: absolute;
            left: 8px;
          }
          .item-left {
            padding-left: 43px;
            display: flex;
            align-items: center;
            .avatar-img {
              display: block;
              width: 34px;
              height: 34px;
              object-fit: cover;
              border-radius: 50%;
            }
            .name {
              margin-left: 34px;
            }
          }
          .item-right {
            display: flex;
            align-items: center;
            .phone-img {
              display: block;
              width: 16px;
              height: 16px;
              object-fit: cover;
            }
            .phone {
              font-weight: 500;
              margin-left: 10px;
            }
          }
        }
      }
      .table-item-active {
        color: #02ffc2;
      }
    }
    .info-arrow {
      position: absolute;
      left: -10px;
      top: 755px;
      width: 20px;
      height: 77px;
      cursor: pointer;
      img {
        width: 100%;
      }
    }
  }
}
.menu-center {
  display: flex;
  align-items: center;
  height: 35px;
  background: rgba(2, 217, 228, 0.16);
  padding: 0 22px;
  box-sizing: border-box;
  width: calc(~"100% - 990px");
  position: absolute;
  left: 495px;
  right: 495px;
  top: 115px;
  img {
    width: 22px;
    margin-right: 12px;
  }
  .bo-bao-box {
    width: calc(~"100% - 34px");
    overflow: hidden;
    height: 35px;
    .text {
      font-size: 14px;
      font-weight: normal;
      line-height: 35px;
      color: #02ffc2;
      text-align: left;
      word-break: break-all;
    }
  }
}
.bottom-menu-container {
  .bottom-menu-contain {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    height: 331px;
    border: 1px solid #036a73;
  }
  background: rgba(0, 14, 15, 0.6);
  border-radius: 0px 0px 0px 0px;
  // width: calc(100% - 980px);
  position: absolute;
  left: 490px;
  // transform: translateX(-470px);
  bottom: 26px;
  .bottom-menu-title {
    height: 34px;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 34px;
    text-align: left;
    padding-left: 83px;
    background-image: url("../../../assets/bigScreenHome/ic_zhuangshi_chang.png");
    background-size: 100%;
    background-position: left bottom;
    margin-bottom: 32px;
    span {
      background: linear-gradient(180deg, #03fcbe 0%, #02f3f7 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
  }
  .bottom-menu-con {
    flex: 1;
    height: 0;
    display: flex;
    align-items: center;

    .bottom-menu-list {
      flex: 1;
      height: 200px;
      display: flex;
      flex-direction: column;
      .bottom-menu-list-tr {
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;
        .bottom-menu-list-name,
        .bottom-menu-list-type,
        .bottom-menu-list-user {
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: normal;
          color: #ffffff;
          line-height: 40px;
          // -webkit-background-clip: text;
          // -webkit-text-fill-color: transparent;
          text-align: center;
        }

        .bottom-menu-list-type {
          width: 210px;
        }

        .bottom-menu-list-user,
        .bottom-menu-list-name {
          flex: 1;
          width: 0;
        }
      }
      .bottom-menu-list-active {
        background: rgba(2, 216, 227, 0.16);
      }
      .bottom-menu-list-th {
        height: 35px;
        line-height: 35px;
        background: rgba(3, 252, 190, 0.5);
        .bottom-menu-list-name,
        .bottom-menu-list-type,
        .bottom-menu-list-user {
          font-size: 20px;
          font-weight: 600;
          line-height: 35px;
        }
      }
      .bottom-menu-list-body {
        flex: 1;
        box-sizing: border-box;
        padding-top: 5px;
        height: 165px;
        overflow: hidden;
      }
    }

    .bottom-menu-btns {
      height: 100%;
      overflow-y: scroll;
      padding: 20px 14px 0 40px;
      .bottom-menu-btns-list {
        width: 175px;
        height: 40px;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #02ffc2;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: normal;
        color: #02ffc2;
        line-height: 40px;
        cursor: pointer;
        text-align: center;
        margin-bottom: 20px;
      }
      .bottom-menu-btns-active {
        background: linear-gradient(180deg, #03fcbe 0%, #02f3f7 100%);
        color: #000000;
      }
    }
  }
  .bottom-menu-close {
    display: block;
    height: 78px;
    width: 20px;
    position: absolute;
    bottom: -38px;
    left: 50%;
    transform: translateX(-39px);
    transform: rotate(-90deg);
    cursor: pointer;
  }
  .bottom-menu-top {
    bottom: -38px;
    transform: rotate(90deg);
  }
}
.bottom-menu-left-container {
  display: none;
  position: absolute;
  bottom: 32px;
  left: 456px;
  border: dashed 1px #01ceffa3;
  border-radius: 8px;
  padding: 12px 20px;
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    img {
      display: inline-block;
      width: 28px;
      height: 40px;
      margin-right: 10px;
    }
  }
}
</style>
<style lang="less">
.model {
  position: absolute;
  top: 90px;
  left: calc(~"50% - 280px");
  background-color: #0a1a34cc;
  .pointLine {
    width: 123px;
    height: 85px;
    position: absolute;
    top: 0;
    left: -103px;
  }
  .button {
    cursor: pointer;
    img {
      padding: 0;
      width: 32px;
      height: 32px;
    }
    position: absolute;
    right: -15px;
    top: -10px;
  }
  &::before {
    width: 40px;
    height: 9px;
    content: "";
    background-image: url("../../../assets/bigScreenHome/model-icon.png");
    background-size: 100%;
    position: absolute;
    top: -3px;
    left: 0;
    background-repeat: no-repeat;
  }
  .title {
    text-align: left;
    padding: 10px 0px 10px 40px;
    background-image: url("../../../assets/bigScreenHome/box.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .image {
    border-radius: 2px;
    border: 1px solid #59aff9;
    margin: 0 10px;
    width: 400px;
  }
  .location-text {
    padding: 10px 10px;
    text-align: left;
    font-size: 16px;
    div {
      color: #59aff9;
      span {
        color: #e5ecf3;
      }
    }
  }
}
// 标题 全局样式
.common-title {
  height: 32px;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 600;
  text-align: left;
  padding-left: 83px;
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 32px;
    background-image: url("../../../assets/bigScreenHome/ic_zhuangshi_chang.png");
    background-size: cover;
    position: absolute;
    left: 0;
    top: 1px;
  }
  span {
    background: linear-gradient(180deg, #03fcbe 0%, #02f3f7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}
/* 滚动条宽度 */
.scroll-bar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #000e0f;
}
/* track滚动条未覆盖区域 */
.scroll-bar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2);
}
/* thumb滚动条覆盖区域 */
.scroll-bar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #03fcad 0%, #02f3f7 100%);
}
</style>
