wanda-bm-guide/src/views/statistics/index.vue

<template>
  <div ref="homepage" :class="skinMode === 'light' ? 'light-overview' : 'dark-overview'">
    <!-- 顶部路由 -->
    <div class="menu">
      <div class="home" @click="$emit('update:modelNum', 0)">
        <!-- <div class="downright"></div> -->
        <div class="home-box">
          <img src="@/assets/imgs/logo.png" alt />
          <!-- <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span> -->
          <span>万达集团管理说明书</span>
        </div>
      </div>
      <div class="home-right">
          <span class="span3" :style="{color:  skinMode === 'light' ? '#8e9298' : 'white'}">{{ times }}</span>
          <img @click="changeSkin" src="../../assets/images/icons/switch.png">
          <div class="tip" :style="{color:  skinMode === 'light' ? '#8e9298' : '#69c4df'}" @click="changeSkin" >
            {{skinMode === 'light' ? '切换驾驶舱':'切换集团首页'}}
          </div>
        </div>
    </div>
    <!-- 面包屑 -->
    <nav class="navigation">
      <section class="crumbs">
        <span>{{ currentZoneData.cname }}</span>
        <span
          v-for="(item, index) in crumbsHtml"
          :key="index"
          @click="navgateFromCrumbs(item[1], index)"
        >
          {{ item[0] }}
          <em v-if="index !== crumbsHtml.length - 1">></em>
        </span>
      </section>
      <section>
        <TreeSelect
          class="special-my-tree-select"
          ref="treeSelect"
          width="240"
          :hideClear="true"
          :isReadOnly="false"
          :caption="'管理分区：'"
          :data="regulateDistrictData"
          :placeholder="placeholder"
          :disabled="false"
          v-model="selectedZone"
          @change="selectProjectItem"
        />
      </section>
    </nav>
    <main class="container">
      <section class="system-general dot-background">
        <div class="system-main-title">
          <h4 class="section-title">系统概况</h4>
        </div>
        <div class="system-list">
          <ul>
            <li
              @click="getInfoOfProject(item)"
              :class="['system-item', item.selected ? 'selected' : '']"
              v-for="(item, index) in systemList"
              :key="index"
            >
              <div class="system-name">
                <img :src="imgSrc(item.smsxt)" />
                <span>{{ item.smsxtname.replace("系统", "") }}</span>
              </div>
              <section
                v-if="item.assetTypeList.length"
                class="system-equipments-container"
              >
                <div
                  class="more"
                  @click.stop.capture="expandRestItems(item, index)"
                  v-if="item.hasArrow"
                  :style="{
                    transform: item.expand ? 'rotate(0)' : 'rotate(180deg)',
                  }"
                >
                  <img v-if="item.showColor" src="../../assets/images/icons/arrow.png" />
                  <img v-else src="../../assets/images/icons/grey.png" />
                </div>
                <div class="system-equipments">
                  <div
                    class="number"
                    v-for="(equip, index) in item.assetTypeList"
                    :key="index"
                  >
                    <div class="title">
                      <P
                        :style="{
                          width:
                            equip.category_name.length > 6 ? '10rem' : 'auto',
                        }"
                        :title="equip.category_name"
                        >{{ equip.category_name }}</P
                      >
                      <span
                        @click.stop.capture="openMaskPanel(item)"
                        :style="{
                          right: equip.category_name.length > 6 ? '0' : '-1rem',
                        }"
                        v-if="equip.is_exception_num"
                        >{{ equip.is_exception_num }}</span
                      >
                    </div>
                    <p>
                      <span class="amount">{{ equip.asset_num }}</span
                      ><span>{{
                        equip.category_name === "屋面logo"
                          ? "个"
                          : equip.category_name === "玻璃护栏"
                          ? "段"
                          : "台"
                      }}</span>
                    </p>
                  </div>
                </div>
                <section
                  class="system-equipments"
                  v-show="item.expand && item.restAssetTypeList.length"
                  style="margin-top: 0.4rem"
                >
                  <div
                    class="number"
                    v-for="(equip, index) in item.restAssetTypeList"
                    :key="index"
                  >
                    <div class="title">
                      <P :title="equip.category_name">{{
                        equip.category_name
                      }}</P>
                      <span
                        @click.stop.capture="openMaskPanel(item)"
                        :style="{
                          right: equip.category_name.length > 6 ? '0' : '-1rem',
                        }"
                        v-if="equip.is_exception_num"
                        >{{ equip.is_exception_num }}</span
                      >
                    </div>
                    <p>
                      <span class="amount">{{ equip.asset_num }}</span
                      ><span>{{
                        equip.category_name === "屋面logo"
                          ? "个"
                          : equip.category_name === "玻璃护栏"
                          ? "段"
                          : "台"
                      }}</span>
                    </p>
                  </div>
                </section>
              </section>
              <div v-else style="width: 65%; text-align: center">暂无数据</div>
            </li>
          </ul>
        </div>
      </section>
      <section class="map-box">
        <section class="cards-list">
          <div class="card dot-background" @click="navToManageNumber">
            <div class="card-title">
              <p>上线管理说明书广场数量</p>
            </div>
            <div class="describe">
              <span style="margin-right: 20px"
                >上线数量 <strong>{{ plazaInfoCount.upwcCount }}</strong></span
              >
            </div>
          </div>
          <div class="card dot-background" @click="navToIntroduceUpdate">
            <div class="card-title">
              <p>当月说明书更新数量</p>
            </div>
            <div class="describe">
              <div style="margin-right: 20px">
                更新广场数量
                <strong>{{ plazaInfoCount.rptChangeCount }}</strong>
              </div>
              <div>
                更新事项数量<strong>{{
                  plazaInfoCount.zhsxChangeCount
                }}</strong>
              </div>
            </div>
          </div>
        </section>
        <section class="map-container" id="map-container">
          <div id="map"></div>
          <div class="legend">
            <div
              class="legend-bar"
              v-for="(bar, index) in legendList"
              :key="index"
            >
              <span :style="{ background: bar.color }"></span>
              <em>{{ bar.num }}</em>
            </div>
          </div>
        </section>
      </section>
      <section class="ratio-list">
        <section
          class="block dot-background"
          :style="panelStyle(item)"
          v-for="(item, index) in maintainList"
          :key="index"
        >
          <h4 class="section-title" @click="toggerPanel(item)" @mouseover="showToolTip(index, item.title)"  @mouseout="hideToolTip(index, item.title)" >
            {{ item.title}}
            <img v-show="skinMode==='light'" src="../../assets/images/icons/notice.png" />
            <img v-show="skinMode==='dark'"  src="../../assets/images/icons/alert.png" />
          </h4>
          <transition name="selectDownUpExtendTop">
            <div class="tool-tip" v-if="item.showToolTip">
              <h5 style="font-weight: bold">{{ item.title + "比值" }}</h5>
              <p>
                {{
                  item.title === "专维"
                    ? "逾期未完成/即将逾期/本年总任务"
                    : "即将逾期/当月总任务"
                }}
              </p>
              <div
                class="tip-triangle"
                :style="{
                  left: item.title === '第三方检测' ? '12.5rem' : '7.8rem',
                }"
              ></div>
            </div>
          </transition>
          <div
            class="list"
            :style="{ overflow: item.expand == 1 ? 'auto' : 'hidden' }"
          >
            <ul>
              <li v-for="(option, index) in item.data" :key="index">
                <div class="ratio">
                  <span>{{ option.cname }}</span>
                  <span v-if="item.title === '专维'">
                    <span
                      >{{
                        option.rptGlsmsStatistics.overdue_unfinished
                      }}
                      /</span
                    >
                    <span>{{ option.rptGlsmsStatistics.due_num }} /</span>
                    <span>{{ option.rptGlsmsStatistics.total }}</span>
                  </span>
                  <span v-else>
                    <span>{{ option.rptGlsmsStatistics.due_num }} /</span>
                    <span>{{ option.rptGlsmsStatistics.total }}</span>
                  </span>
                </div>
                <div class="bar">
                  <div
                    class="inner-bar"
                    :style="barStyle(option.rptGlsmsStatistics, item.title)"
                  ></div>
                </div>
              </li>
            </ul>
            <div class="arrow" v-show="item.expand !== 2" :style="{ transform: item.expand === 1 ? 'rotate(180deg)' : 'rotate(0deg)'}" @click="toggerPanel(item)" >
              <img src="../../assets/images/icons/arrow_d_u.png" />
            </div>
          </div>
        </section>
      </section>
    </main>
    <el-dialog
      :visible.sync="dialogVisible"
      width="80%"
      :custom-class="'my-dialog'"
    >
      <div class="shut-download">
        <span class="download" @click="downloadExcel">下载</span>
        <span class="shut" @click="shutMaskPanel">x</span>
      </div>
      <div class="table-content">
        <div class="table-title">
          {{ currentSelectedSys.smsxtname }}
        </div>
        <div class="table-tabs">
          <Tabs
            type="card"
            :data="tabData"
            v-model="activeName"
            @change="tabChange"
          ></Tabs>
        </div>
        <div class="table-select">
          <!-- v-model="selectedZone" -->
          <TreeSelect
            v-if="testTree"
            class="special-my-tree-select"
            ref="treeSelect"
            width="240"
            :hideClear="true"
            :isReadOnly="false"
            :caption="'管理分区：'"
            v-model="selectedDialogZone"
            :data="dialogDistrictData"
            @change="selectDialogProject"
          />
        </div>
        <section>
          <table class="table-report">
            <thead>
              <tr>
                <th width="10%">序号</th>
                <th width="20%">大区 </th>
                <th width="20%">城市公司</th>
                <th width="20%">广场名称</th>
                <th width="30%">异常原因</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>汇总：</td>
                <td>{{ centerTotal }}</td>
                <td>{{ zoneTotal }}</td>
                <td>{{ projectTotal }}</td>
                <td></td>
              </tr>
              <tr v-for="(td, index) in exceptionData" :key="index">
                <td>{{ (currentPage - 1) * pageSize + index + 1}}</td>
                <td>{{ td.center }}</td>
                <td>{{ td.zone }}</td>
                <td>{{ td.name }}</td>
                <td>{{ td.reason }}</td>
              </tr>
            </tbody>
          </table>
          <table id="tableReport" class="table-report" v-show="false">
            <thead>
              <tr>
                <th width="10%">序号</th>
                <th width="20%">大区 </th>
                <th width="20%">城市公司</th>
                <th width="20%">广场名称</th>
                <th width="30%">异常原因</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(td, index) in storeExceptionData" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ td.center }}</td>
                <td>{{ td.zone }}</td>
                <td>{{ td.name }}</td>
                <td>{{ td.reason }}</td>
              </tr>
            </tbody>
          </table>
             <!-- v-show="pageCount > 9" -->
          <Pagination
            :pageCount="pageCount"
            style="float: right; margin-top: 20px"
            :page="currentPage"
            :pageSize="pageSize"
            :pageCountShow="false"
            @change="currentChangeHandle"
          />
        </section>
        <div class="empty-text" v-show="!pageCount">暂无数据</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let myMaps = null;
import { Loading, Dialog } from "element-ui";
import { Tabs } from "meri-design";
import { login } from "@/api/login";
import {
  getPlazaInfoCount,
  querySystemCard,
  getCardList,
  queryEventStatus,
  getExceptionNum,
} from "@/api/homePage";
import { formatTime } from "@/utils/format.js";
import { mapGetters } from "vuex";
import { sortBy, cloneDeep } from "lodash";
import moment from "moment";
import L from "leaflet";
import "leaflet-contextmenu";
export default {
  data() {
    return {
      tipTimer:null,
      showSwitchTip:false,
      mapLayer:null,
      skinMode:'light',
      zoneTotal: 0,
      centerTotal: 0,
      projectTotal: 0,
      pageCount: 0,
      pageSize: 10,
      currentPage: 1,
      exceptionSum: 0,
      tabData: [],
      dialogBoxKey: 1,
      dialogVisible: false,
      testTree: true,
      exceptionData: [],
      storeExceptionData: [],
      activeName: "2",
      systemExceptionData: {},
      showMask: false, // 控制遮罩层的显示隐藏
      placeholder: "商管集团",
      crumbsHtml: [], // 导航数据
      zoneNames: {
        // 各个中心对应的拼音名称
        东区: "dong",
        西区: "xi",
        北区: "bei",
        南区: "nan",
      },
      provinceCities: {
        // 各个区域的的中心坐标 缩放级别
        青岛: { center: [36.06667, 120.33333], zoom: 8 },
        北京: { center: [39.604882122321174, 116.43660987308282], zoom: 8 },
        天津: { center: [39.130593, 117.260892], zoom: 7 },
        济南: { center: [36.4, 117.0], zoom: 7 },
        上海: { center: [31.090574094954192, 121.46299249603001], zoom: 10 },
        南京: { center: [32.05, 118.78333], zoom: 7 },
        无锡: { center: [31.57, 120.3], zoom: 9 },
        厦门: { center: [24.46667, 118.1], zoom: 9 },
        宁波: { center: [29.52, 121.33], zoom: 8 },
        杭州: { center: [30.323100460201648, 120.50270908851112], zoom: 9 },
        福州: { center: [26.05, 119.18], zoom: 8 },
        合肥: { center: [31.52, 117.17], zoom: 7 },
        长沙: { center: [28.12, 112.59], zoom: 8 },
        南昌: { center: [28.4, 115.55], zoom: 8 },
        大连: { center: [39.98974718404572, 122.66034125625548], zoom: 8 },
        沈阳: { center: [41.72213058512578, 122.93479223528372], zoom: 8 },
        长春: { center: [42.88033923363183, 127.02188147691707], zoom: 8 },
        东莞: { center: [23.644524198573688, 114.83844948916203], zoom: 8 },
        南宁: { center: [22.48, 108.19], zoom: 7 },
        广州: { center: [23.16, 113.23], zoom: 7 },
        深圳: { center: [22.62, 114.07], zoom: 7 },
        太原: { center: [37.54, 112.33], zoom: 7 },
        武汉: { center: [31.147006308556566, 112.97898510653813], zoom: 7 },
        郑州: { center: [34.46, 113.4], zoom: 7 },
        哈尔滨: { center: [46.800059446787316, 128.40505022926592], zoom: 7 },
        乌鲁木齐: { center: [43.45, 87.36], zoom: 8 },
        呼和浩特: { center: [45.182036837015886, 116.82329020199336], zoom: 5 },
        西安: { center: [36.08462129606931, 109.4527754086213], zoom: 7 },
        兰州: { center: [36.08462129606931, 103.4527754086213], zoom: 7 },
        银川: { center: [38.108627664321276, 102.36578196225639], zoom: 7 },
        成都: { center: [30.24957724046765, 103.4647651330231], zoom: 7 },
        昆明: { center: [25.903703303407667, 105.10972266685498], zoom: 8 },
        重庆: { center: [29.35, 106.33], zoom: 8 },
      },
      zoneCenter: {
        // 各个区域的中心坐标
        dong: [31.090574094954192, 121.46299249603001], // 取自 东北运营中心 长春区域 四平万达广场
        xi: [30.24957724046765, 103.4647651330231], // 西北  银川区域 吴忠万达广场     zoom 5
        bei: [39.604882122321174, 116.43660987308282], // 华北中心  天津区域  天津塘沽万达广场
        // huazhong: [33.999249, 113.872131], // 华中 郑州 许昌万达广场
        // huadong: [31.477565, 119.923391], // 华东 南京 泰州
        // zhongnan: [28.860875644389676, 114.55131767165491],
        // huanan: [22.635788, 110.17923], // 华南 南宁 玉林万达广场
        // dongnan: [26.657907, 119.545678], //东南 福州 宁德万达广场
        nan: [23.16, 113.23], // 西南 成都 宜宾万达广场
      },
      legendList: [
        // 地图图例数据
        { color: "#F54E45", num: "≥200" },
        { color: "#F58300", num: "100-200" },
        { color: "#FFBA6B", num: "50-99" },
        { color: "#0091FF", num: "10-49" },
        { color: "#82C7FC", num: "1-9" },
        { color: "#EEEEEE", num: "0" },
      ],
      plazaInfoCount: {},
      systemList: [], // 系统列表数据
      currentZoneData: {}, // 当前分区
      currentDistrictData: [], //当前管理分区数据
      currentSelectedSys: {}, // 当前所选择的系统
      currentSysId: "", // 当前系统ID
      regulateDistrictData: [], // 分区数据
      dialogDistrictData: [], // 弹窗分区数据
      currentDialogCcode: "",
      currentDialogLevel: "",
      currentDialogTab: "",
      maintainList: [], // 专维  维保  第三方检测 数据
      barColors: {
        // // 专维  维保  第三方检测 颜色
        0: "linear-gradient(to right, #369CF7 , #025BAA)", // 蓝色
        1: "linear-gradient(to right, #F58300 , #F58300)", // 黄色
        2: "linear-gradient(to right, rgba(32,100,96,0.6) , rgba(32,100,96))", // 红色
      },
      selectedZone: "",
      selectedDialogZone: "",
      loadingInstance: null,
    };
  },
  computed: {
    ...mapGetters(["plazas", "plazaId", "accessLevel", "userInfo"]),
  },
  watch: {
      /**
       * 监听皮肤模式
       * 皮肤模式切换后,存储用户名,皮肤模式
       */
    skinMode(newV){
      localStorage.setItem(`${this.userInfo.username}__skinMode`, newV)
    },
  },
  components: { Tabs, Dialog },
  created() {
    this.currentTime();
    /**
     * 使用localStorage中储存的, 当前用户的皮肤模式
     */
    let skinMode = localStorage.getItem(`${this.userInfo.username}__skinMode`)
    if(skinMode){
        this.skinMode = skinMode
    }
  },
  mounted() {
    this.getFrameworkTreeData();
    window.addEventListener("resize", this.reinitalMap, false);
  },
  methods: {
    delayToHideTip() {
      this.tipTimer = setTimeout(() => {
          this.showSwitchTip = false
      }, 500);
    },
    cancelHideTip(){
      clearTimeout(this.tipTimer);
    },
    /**
    *@description 切换皮肤
    */
    changeSkin() {
      const vm = this
      const mapDom = document.querySelector("#map .leaflet-marker-pane")
      const icons = mapDom.querySelectorAll(".leaflet-marker-icon")
      if (this.skinMode === 'light') {
          this.skinMode = 'dark'
          icons.forEach(dom => {
            dom.style.color = "#FFF"
          })
      } else {
          this.skinMode = 'light'
          icons.forEach(dom => {
            dom.style.color = "#333"
          })
      }
      if (this.mapLayer) {
        this.mapLayer.setStyle({
          weight: 1,
          color: vm.skinMode === "light" ? "#B3D2FF" :"#56a3c2",
          fillColor: vm.skinMode === "light" ? "#DEECFF" : "#21285c",
          fillOpacity: vm.skinMode === "light" ? 0.2 : 1
        })
      }
    },
    downloadExcel() {
      let tableContent = document.querySelector("#tableReport").outerHTML;
      let blob = new Blob([tableContent], {
        type: "text/plain; charset=utf-8",
      });
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let link = window.URL.createObjectURL(blob);
      let a = document.createElement("a");
      a.download = "异常数据表格.xls";
      a.href = link;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    shutMaskPanel() {
      this.dialogVisible = false;
    },
    currentChangeHandle(page) {
      this.currentPage = page.newPage;
      this.exceptionData = this.storeExceptionData.slice(
        (page.newPage - 1) * this.pageSize,
        page.newPage * this.pageSize
      );
    },
    selectDialogProject(id, district) {
      let { ccode, level } = district;
      this.currentDialogCcode = ccode;
      this.currentDialogLevel = level;
      this.fetchExceptionNum(
        this.currentSysId,
        this.currentDialogTab,
        ccode,
        level
      );
    },
    tabChange(tab) {
      this.currentDialogTab = tab.id;
      this.fetchExceptionNum(
        this.currentSysId,
        tab.id,
        this.selectedDialogZone,
        this.currentDialogLevel
      );
    },
    fetchExceptionNum(smsxt, categoryCode, ccode, level) {
      let params = { getParams: { smsxt, categoryCode, ccode, level } };
      getExceptionNum(params).then((res) => {
        if (res.result === "success") {
          let vm = this;
          let flattenArr = [];
          this.centerTotal = 0;
          this.zoneTotal = 0;
          this.projectTotal = 0;
          recursionData(res.data);
          let finalHandledArr = [];
          flattenArr.forEach((item) => {
            let path = item.path.split("/");
            item.classExList.forEach((each) => {
              let obj = {};
              obj.center = path[0];
              obj.zone = path[1];
              obj.name = item.name;
              obj.reason = each.description;
              finalHandledArr.push(obj);
            });
          });
          this.storeExceptionData = cloneDeep(finalHandledArr);
          this.exceptionData = this.storeExceptionData.slice(0, this.pageSize);
          this.currentPage = 1;
          this.pageCount = finalHandledArr.length;

          function recursionData(data, parent) {
            data.forEach((item, index) => {
              let level = item.level;
              if (level === 2) {
                vm.centerTotal++;
              } else if (level === 3) {
                vm.zoneTotal++;
              } else if (level === 0) {
                vm.projectTotal++;
              }
              item.name = item.cname;
              item.id = item.ccode;
              if (level === 0) {
                flattenArr.push(item);
              }
              if (parent) {
                item.path = parent + "/" + item.cname;
              }
              let children = item.children;
              if (Array.isArray(children) && children.length) {
                recursionData(
                  children,
                  level == 1 ? "" : item.path ? item.path : item.cname
                );
              }
            });
          }
        }
      });
    },
    expandRestItems(item, index) {
      this.systemList.forEach((eq) => {
        if (eq.smsxt !== item.smsxt) {
          eq.expand = false;
        }
        eq.selected = false;
      });
      item.selected = true;
      item.expand = !item.expand;
    },
    showToolTip(index) {
      this.maintainList.forEach((item) => {
        item.showToolTip = false;
      });
      this.maintainList[index].showToolTip = true;
    },
    hideToolTip(index) {
      this.maintainList[index].showToolTip = false;
    },
    reinitalMap() {
      if (myMaps) {
        myMaps.invalidateSize(true);
      }
    },
    imgSrc(code) {
      return require("../../assets/images/icons/" + code + ".png");
    },
    /**
     * 跳转到 当月说明书更新项目数量
     */

    navToIntroduceUpdate() {
      // this.$router.push({path:''})
    },
    /**
     * 跳转到 上线管理说明书数量
     */
    navToManageNumber() {
      // this.$router.push({path:''})
    },
    /**
     * 跳转到 当月重点关注事项项目数量
     */
    navToFocusItems() {
      // this.$router.push({path:''})
    },
    /**
     * @Description 根据数据创建导航路径
     * @Param data 当前点击的项
     */
    createNavpathByData(data) {
      if (data.path) {
        let pathArr = data.path.split("/");
        let newArr = [];
        pathArr.forEach((item) => {
          newArr.push(item.split("&"));
        });
        this.crumbsHtml = newArr;
        if (data.level === 1) {
          this.currentZoneData = data;
          this.crumbsHtml = [];
        } else if (data.level === 0) {
          this.crumbsHtml.pop();
          this.currentZoneData = this.getDataByCityCcode(data.cparentcode);
        } else {
          this.currentZoneData = data;
        }
      } else {
        this.crumbsHtml = [];
        this.currentZoneData = this.regulateDistrictData[0];
      }
    },
    /**
     * @Description 通过导航进行导航
     * @Param id 所选区域的id
     * @Param index 点击项的序号
     */
    navgateFromCrumbs(id, index) {
      let data = this.getDataByCityCcode(id); // 根据
      this.selectedZone = data.ccode
      if (!data) return;
      let level = data.level; //1集团 2中心 3区域 0广场
      if (level === this.regulateDistrictData[0].level) {
        this.selectedZone = "";
      }
       
      this.currentLevel = level;
      this.currentZoneData = data;
      this.getEventStatusData(level, data.ccode);
      this.queryPlazaInfoCount(data.ccode, data.level, data.cid);
      this.getSystemList(data.ccode, data.level);
      if (level === 1) {
        this.pantGroupMap(data, this.currentSysId);
      } else if (level === 2) {
        this.pantZonesMap(data, this.currentSysId);
      } else {
        this.pantProjectsMap(data, this.currentSysId);
      }
      if (level === 1) {
        this.crumbsHtml = "";
      } else {
        this.crumbsHtml = this.crumbsHtml.splice(0, index + 1);
      }
    },
    /**
     * @Description 分区树 点击选择分区
     * @Param ids  返回选中项的id
     * @Param data 返回选中项的数据
     */
    selectProjectItem(ids) {
      let data = this.getDataByCityCcode(ids);
      if (data.level !== 0) {
        //  level=0时 plazaId必填
        this.currentLevel = data.level;
        this.queryPlazaInfoCount(data.ccode, data.level);
        this.getEventStatusData(this.currentLevel, data.ccode);
        this.getSystemList(data.ccode, data.level);
      } else {
        let parentNode = this.getDataByCityCcode(data.cparentcode);
        this.currentLevel = parentNode.level;
        this.selectedZone = parentNode.ccode;
        this.queryPlazaInfoCount(parentNode.ccode, parentNode.level);
        this.getEventStatusData(parentNode.level, parentNode.ccode);
        this.getSystemList(parentNode.ccode, parentNode.level);
        this.pantProjectsMap(parentNode, this.currentSysId);
      }
      this.createNavpathByData(data);
      let level = data.level; // //1集团 2中心 3区域 0广场
      if (level === 1) {
        this.pantGroupMap(data, this.currentSysId);
      } else if (level === 2) {
        this.pantZonesMap(data, this.currentSysId);
      } else if (level === 3) {
        this.pantProjectsMap(data, this.currentSysId);
      } else {
        // 点击项为广场时 直接跳转到详情页  地图不用响应

        let pathData = { fromGroup: "true" };
        let routeData = this.$router.resolve({
          name: "/home/homePage",
        });
        window.open(routeData.href, "_blank");
        window.__fromGroupPage = {
          level: 0,
          plazaName: data.cname,
          plazaId: data.ccode,
        };
        this.$store.commit("SETPLAZENAME", data.cname);
        localStorage.setItem("PLAZAID", data.ccode);
      }
    },

    /**
     * @Description  查询项目信息统计数量
     * @Param  ccode  管理分区编码 必填
     * @Param  level 1集团 2中心 3区域 0广场 必填
     * @Param  plazaId level=0时 必填
     */
    queryPlazaInfoCount(ccode, level, plazaId) {
      let params = {};
      if (level === 0) {
        params = { getParams: { ccode, level } };
      } else {
        params = { getParams: { ccode, level, plazaId } };
      }
      getPlazaInfoCount(params).then((res) => {
        if (res.result === "success") {
          if (res.data) {
            this.plazaInfoCount = res.data;
          }
        }
      });
    },
    /**
     * @Description 根据指定id 查找数据
     * @Param id 要查找数据的id
     */
    getDataByCityCcode(id) {
      return recursionFindData(this.currentDistrictData, id);
      let target = null;
      function recursionFindData(data, id) {
        data.forEach((item) => {
          if (item.ccode === id) {
            target = item;
          } else {
            if (item.children && item.children.length) {
              recursionFindData(item.children, id);
            }
          }
        });
        if (target) {
          return target;
        }
      }
    },
    /**
     * @Description 获取分区树数据
     * @method param empty
     */
    getFrameworkTreeData() {
      login({
        returnTree: true,
      }).then((res) => {
        if (res.result === "success") {
          recursionData(res.treeData);
          let data = res.treeData[0];
          let level = data.level;
          this.currentZoneData = data;
          this.currentLevel = level; // 初始化的时候判断是哪一级    //1集团 2中心 3区域 0广场
          data.open = true; // 默认展开第一级
          this.regulateDistrictData = [data];
          this.dialogDistrictData = cloneDeep(this.regulateDistrictData);
          let firstNode = this.dialogDistrictData[0];
          this.selectedDialogZone = firstNode.ccode;
          this.selectedZone = firstNode.ccode;
          this.currentDialogCcode =  firstNode.ccode;
          this.currentDialogLevel = firstNode.level;
          this.currentDistrictData = res.treeData;
          this.getSystemList(data.ccode, level).then((res) => {
            this.initMap();
          });
          this.getEventStatusData(level, data.ccode);
          if (level === 0) {
            //  level=0时 plazaId必填
            this.queryPlazaInfoCount(data.ccode, level, data.ccode);
          } else {
            this.queryPlazaInfoCount(data.ccode, level);
          }
        }
        function recursionData(data, parent) {
          data.forEach((item) => {
            item.name = item.cname;
            item.id = item.ccode;
            if (parent) {
              item.path = parent + "/" + (item.cname + "&" + item.ccode);
            }
            let children = item.children;
            if (Array.isArray(children) && children.length) {
              recursionData(
                children,
                item.path ? item.path : item.cname + "&" + item.ccode
              );
            }
          });
        }
      });
    },
    /**
     * @Description 展开 维保 第三方检测 专维
     * @Param  item 展开的某一项
     */
    toggerPanel(item) {
      // expand 0 初始状态  1 展开状态 2 隐藏状态
      if (item.expand === 0 || item.expand === 2) {
        item.expand = 1; // 展开
        this.maintainList.forEach((option) => {
          if (option.title !== item.title) {
            option.expand = 2; // 隐藏
          }
        });
      } else {
        this.maintainList.forEach((option) => {
          option.expand = 0; // 回到初始状态
        });
      }
    },
    /**
     * @Description  计算 维保/第三方检测/专维 三个模块的高度
     * @Param item 数据中的每一项
     */
    panelStyle(item) {
      // expand 0 初始状态  1 展开状态 2 隐藏状态
      if (item.expand === 0) {
        return { height: `calc((100% - 2rem) / 3)` };
      } else if (item.expand === 1) {
        return { height: "calc(100% - 14.2rem)" };
      } else {
        return { height: "6.6rem" };
      }
    },
    /**
     *@Description 根据数据计算维保/第三方检测/专维各自颜色条的长度  维保、第三方检测是用即将逾期数据判断；专维是如果有逾期未完成直接标红，如果没有，按照即将逾期的数量显示颜色
     *@Param item 某一项的数据
     *@Param title 标题
     */
    barStyle(item, title) {
      let bg = "";
      // let type = this.selectColorByNum(item.due_num, item.total)
      let ratio = 0;
      if (title === "专维") {
        item.overdue_unfinished = item.overdue_unfinished || 0;
        if (item.overdue_unfinished > 0 || item.due_num > 0) {
          bg = this.skinMode ==='light' ? "linear-gradient(to right, #F54E45 , #F54E45)" :　'linear-gradient(to right, #DE944D , #F58300)';
        }
        // else {
        //     bg = this.barColors[type]
        // }
        ratio = ((item.overdue_unfinished + item.due_num) / item.total) * 100;
      } else {
        if (item.due_num > 0) {
          bg = this.skinMode ==='light' ? "linear-gradient(to right, #F54E45 , #F54E45)" :　'linear-gradient(to right, #DE944D , #F58300)';
        }
        // bg = this.barColors[type]
        ratio = (item.due_num / item.total) * 100;
      }
      return {
        width: ratio + "%",
        backgroundImage: bg,
      };
    },
    /**
     * @Description 根据数据来返 维保/第三方检测/专维 三个模块中显示条的颜色
     * @Param num 即将逾期数 / 逾期未完成数
     * @Param total 总数
     */
    selectColorByNum(num, total) {
      let devide = num / total;
      if ((num > 1 && num <= 24) || (devide > 0.1 && devide <= 0.2)) {
        return 0;
      } else if ((num > 24 && num <= 49) || (devide > 0.2 && devide <= 0.5)) {
        return 1;
      } else {
        return 2;
      }
    },

    /**
     * @Description 根据数据 判定地图上图标的显示显示颜色
     * @Param data 作为判断的数据
     */
    paintColorByData(data) {
      if (data >= 200) {
        return "level5";
      } else if (data >= 100 && data < 200) {
        return "level4";
      } else if (data >= 50 && data < 100) {
        return "level3";
      } else if (data >= 10 && data < 50) {
        return "level2";
      } else if (data >= 1 && data < 10) {
        return "level1";
      } else {
        return "level0";
      }
    },
    /**
     * @Description 显示当期时间
     */
    currentTime() {
      this.times = moment().format("YYYY.MM.DD HH:mm");
      setTimeout(this.currentTime, 1000);
    },

    /**
     * @Description 格式化时间
     * @method param empty
     */
    formatter(str, arrv) {
      if (str && arrv) {
        const Objs = arrv.find((e) => e && e.plazaid == str);
        return Objs ? Objs.plazaname : "--";
      } else {
        return "";
      }
    },
    /**
     * @Description 获取集团 中心 区域 项目 数据树数据
     * @method param ccode  管理分区编码 集团首页必填
     * @method param level  1集团 2中心 3区域 0广场 集团首页必填
     * @method param plazaId 广场id  如果是广场则此参数必填 其他情况下非必填
     */
    getSystemList(ccode, level) {
      let params = null;
      if (level === 0) {
        params = { getParams: { plazaId: ccode, level } };
      } else {
        params = { getParams: { ccode, level } };
      }
      return new Promise((resolve, reject) => {
        getCardList(params).then((res) => {
          if (res.result == "success") {
            let result = res.data;
            if (result && Array.isArray(result)) {
              result.forEach((item) => {
                let list = item.assetTypeList;
                if (list) {
                  if (list.length > 3) {
                    item.hasArrow = true;
                    item.assetTypeList = list.splice(0, 3);
                    item.restAssetTypeList = list;
                    item.showColor = list.some((item) => {
                      return item.is_exception_num > 0;
                    });
                  } else {
                    item.hasArrow = false;
                    item.restAssetTypeList = [];
                  }
                }
              });
              res.data.forEach((item) => {
                item.selected = false;
                item.expand = false;
              });
              res.data[0].selected = true;
              this.currentSelectedSys = res.data[0];
              this.currentSysId = res.data[0].smsxt;

              this.systemList = res.data;
              resolve(res);
            }
          }
        });
      });
    },
    /**
     * @Description 获取事项状态统计数据
     * @Param ccode 管理分区编码 必填
     * @Param level 1集团 2中心 3区域 0广场 必填
     */
    getEventStatusData(level, ccode) {
      let params = {
        getParams: {
          level,
          ccode,
        },
      };
      queryEventStatus(params).then((res) => {
        if (res.result === "success") {
          let data = res.data;
          data[0].forEach((item) => {
            const val = item.rptGlsmsStatistics.overdue_unfinished
            item.rptGlsmsStatistics.overdue_unfinished = val === "undefined" ? 0 : val
          });
          let orginalObj = {
            1: { title: "维保", data: [], expand: 0, showToolTip: false },
            2: { title: "第三方检测", data: [], expand: 0, showToolTip: false },
            0: { title: "专维", data: [], expand: 0, showToolTip: false },
          };
          let arr = new Array(3);
          for (let key in data) {
            let obj = {};
            let sortData = data[key].filter(item => item.cname);
            if (data.hasOwnProperty(key)) {
              // 维保，第三方检测排名按照即将逾期任务数量从多到少排序，多的靠前。专维按照 逾期未完成 + 即将逾期任务数据排序，多的靠前
              // due_num 即将逾期    unfinished 逾期未完成
              if (key == "0") {
                sortData.forEach((item) => {
                  item.sort =
                    item.rptGlsmsStatistics.overdue_unfinished +
                    item.rptGlsmsStatistics.unfinished;
                });
              } else {
                sortData.forEach((item) => {
                  item.sort = item.rptGlsmsStatistics.due_num;
                });
              }
              // orginalObj[key].data = sortBy(sortData, (option) => {
              //   return option.sort;
              // });
              orginalObj[key].data = sortData
            }
          }
          arr[0] = orginalObj[1];
          arr[1] = orginalObj[2];
          arr[2] = orginalObj[0];
          this.maintainList = arr;
        }
      });
    },
    /**
     *@Description 初始化地图
     */
    initMap() {
      let that = this;
      myMaps = L.map("map", {
        center: new L.LatLng(38, 103),
        zoom: 4,
        crs: L.CRS.EPSG3857,
        zoomControl: false,
        boxZoom: false,
        attributionControl: false,
        contextmenu: true,
        contextmenuWidth: 140,
        minZoom: 4,
        maxZoom: 10,
        closePopupOnClick: true,
        doubleClickZoom: false,
        wheelPxPerZoomLevel: 20,
        // scrollWheelZoom:false,
        // dragging: false,
      });
      let JsonData = require("../../assets/geoData/china.json");
      this.mapLayer = L.geoJSON(JsonData.features, {
        style: function () {
          return {
            weight: 1,
            color: "#B3D2FF",
            fillColor: "#DEECFF",
          };
        },
      }).addTo(myMaps);
 
      if (this.currentLevel === 1) {
        //1集团
        this.pantGroupMap(this.currentZoneData, this.currentSysId);
      } else if (this.currentLevel === 2) {
        // 2中心
        this.pantZonesMap(this.currentZoneData, this.currentSysId);
      } else if (this.currentLevel === 3) {
        // 3区域
        this.pantProjectsMap(this.currentZoneData, this.currentSysId);
      }
    },
    /**
     * @Description 清空地图 并添加全国底图
     */
    clearAllLayers() {
      const vm = this
      myMaps.eachLayer(function (layer) {
        myMaps.removeLayer(layer);
      });
      let JsonData = require("../../assets/geoData/china.json");
      this.mapLayer = L.geoJSON(JsonData.features, {
        style: function () {
          return {
            weight: 1,
            color: vm.skinMode === "light" ? "#B3D2FF" :"#56a3c2",
            fillColor: vm.skinMode === "light" ? "#DEECFF" : "#21285c",
            fillOpacity: vm.skinMode === "light" ? 0.2 : 1
          };
        },
      }).addTo(myMaps);
    },
    /**
     * @Description 移动地图到指定中心
     */
    flyTo(center, zoom) {
      myMaps.setView(center, zoom);
    },
    /**
     *@description 打开弹窗
     */
    openMaskPanel(system) {
      let target = this.getDataByCityCcode(this.selectedZone)
      if (target) {
        this.currentDialogLevel = target.level
        this.currentLevel = target.level
      }
      this.currentSysId = system.smsxt;
      this.tabData = [];
      this.selectedDialogZone = this.selectedZone;
      system.restAssetTypeList.forEach((item) => {
        if (item.is_exception_num > 0) {
          this.tabData.push({
            name: item.category_name,
            id: item.category_code,
          });
        }
      });
      system.assetTypeList.forEach((item) => {
        if (item.is_exception_num > 0) {
          this.tabData.push({
            name: item.category_name,
            id: item.category_code,
          });
        }
      });
 
      if (this.tabData.length) {
        this.activeName = this.tabData[0].id;
        this.currentDialogTab = this.activeName;
        this.dialogVisible = true;
      }
      this.fetchExceptionNum(
        system.smsxt,
        this.activeName,
        this.selectedDialogZone,
        this.currentLevel
      );
    },
    /**
     * @Description 切换系统时 地图响应
     * @Params  system:当前选择的系统
     */
    getInfoOfProject(system) {
      this.systemList.forEach((item) => {
        item.selected = false;
      });
      system.selected = true;
      this.currentSelectedSys = system;
      this.currentSysId = system.smsxt;
      //1集团 2中心 3区域 0广场
      this.clearAllLayers();
      if (this.currentLevel === 1) {
        this.pantGroupMap(this.currentZoneData, system.smsxt);
      } else if (this.currentLevel === 2) {
        this.pantZonesMap(this.currentZoneData, system.smsxt);
      } else if (this.currentLevel === 3) {
        this.pantProjectsMap(this.currentZoneData, system.smsxt);
      }
    },
    /**
     * @Description 用于绘制集团级别的地图
     * @Param data 数据
     */
    pantGroupMap(data) {
      this.clearAllLayers();
      myMaps.setView([38, 103], 4);
      let that = this;
      let groupLayer = new L.layerGroup();
      let promiseAll = [];
      let layerArr = [];
      this.loadingInstance = Loading.service({
        target: "#map",
        fullscreen: false,
        text: "数据正在加载...",
        background: "rgba(255,255,255,.5)",
      });
      data.children.forEach((item) => {
        let promise = new Promise((resolve, reject) => {
          let params = {
            getParams: {
              smsxt: this.currentSysId,
              level: 2, // 中心
              ccode: item.ccode,
            },
          };
          querySystemCard(params).then((res) => {
            if (res.result === "success") {
              let num = 0;
              let name = item.cname.substr(0, 2);
              if (res.data) {
                let equip = res.data[0];
                if (equip.assetTypeList) {
                  equip.assetTypeList.forEach((item) => {
                    if (item.is_exception_num) {
                      num += item.is_exception_num;
                    }
                  });
                  layerArr.push({
                    name,
                    num,
                    list: equip,
                    data: item,
                    fullName: item.cname,
                  });
                }
                resolve(res);
              }
            }
          });
        });
        promiseAll.push(promise);
      });
      Promise.all(promiseAll).then((result) => {
        this.loadingInstance.close();
        if (this.currentLevel === 1) {
          layerArr.forEach((item) => {
            let zone = this.zoneNames[item.name];
            let center = this.zoneCenter[zone];
            let contentHtml = that.createPopupHtmlContent(
              item.list.assetTypeList,
              item.fullName
            );
            if (contentHtml) {
              this.createPointOnMap(
                item.num,
                groupLayer,
                contentHtml,
                center,
                item.data,
                item.name,
                "group",
                4
              );
            }
          });
        }
      });
      groupLayer.addTo(myMaps);
    },
    /**
     * @Description  用于绘制中心地图
     * @Param data 数据
     */
    pantZonesMap(data) {
      let that = this;
      this.clearAllLayers();
      let name = data.cname.substr(0, 2);
      let zone = this.zoneNames[name];
      let inner, outer, offset;
      let zoom = 5
    
      this.flyTo(this.zoneCenter[zone], zoom);
      let groupLayer = new L.layerGroup();
      let promiseAll = [];
      let layerArr = [];
      this.loadingInstance = Loading.service({
        target: "#map",
        fullscreen: false,
        text: "数据正在返回...",
        background: "rgba(255,255,255,.5)",
      });
      data.children.forEach((item) => {
        let promise = new Promise((resolve, reject) => {
          let params = {
            getParams: {
              smsxt: this.currentSysId,
              level: 3, // 区域
              ccode: item.ccode,
            },
          };
          querySystemCard(params).then((res) => {
            if (res.result === "success") {
              let name = item.cname.split("城市")[0];
              let num = 0;
              if (res.data) {
                let equip = res.data[0];
                if (equip.assetTypeList) {
                  equip.assetTypeList.forEach((item) => {
                    if (item.is_exception_num) {
                      num += item.is_exception_num;
                    }
                  });
                  layerArr.push({
                    name,
                    num,
                    list: equip,
                    data: item,
                    fullName: item.cname,
                  });
                }
              }
              resolve(res);
            }
          });
        });
        promiseAll.push(promise);
      });
      Promise.all(promiseAll).then((result) => {
        this.loadingInstance.close();
        if (this.currentLevel === 2) {
          layerArr.forEach((item) => {
            let name = item.name.split("城市")[0]
            let city = that.provinceCities[name];
            let center = city.center;
            let contentHtml = that.createPopupHtmlContent(
              item.list.assetTypeList,
              item.fullName
            );
            if (contentHtml) {
              that.createPointOnMap(
                item.num,
                groupLayer,
                contentHtml,
                center,
                item.data,
                item.data.cname,
                "zone",
                zoom
              );
            }
          });
        }
      });
      groupLayer.addTo(myMaps);
    },
    /**
     * @Description 用于绘制项目的点
     * @Param data 数据
     */
    pantProjectsMap(data) {
      this.clearAllLayers();
      let name = data.cname.split("城市")[0];
      let geo = this.provinceCities[name];
      let that = this;
      let promiseAll = [];
      let layerArr = [];
      let groupLayer = new L.layerGroup();
      this.flyTo(geo.center, geo.zoom);
      this.loadingInstance = Loading.service({
        target: "#map",
        fullscreen: false,
        text: "数据正在返回...",
        background: "rgba(255,255,255,.5)",
      });
      data.children.forEach((item) => {
        let pormise = new Promise((resolve, reject) => {
          let params = {
            getParams: {
              plazaId: item.cid, // 所查对象是广场的时候plazaId必传
              smsxt: this.currentSysId,
              level: 0, // 广场
              ccode: item.ccode,
            },
          };
          querySystemCard(params).then((res) => {
            if (res.result === "success") {
              let num = 0;
              if (res.data && item.latitude && item.longitude) {
                let equip = res.data[0];
                if (equip.assetTypeList) {
                  equip.assetTypeList.forEach((item) => {
                    if (item.is_exception_num) {
                      num += item.is_exception_num;
                    }
                  });
                }
                layerArr.push({
                  name,
                  num,
                  list: equip,
                  data: item,
                  fullName: item.cname,
                });
              }
              resolve(res);
            }
            groupLayer.addTo(myMaps);
          });
        });
        promiseAll.push(pormise);
      });
      Promise.all(promiseAll).then((result) => {
        this.loadingInstance.close();
        if (this.currentLevel === 3) {
          layerArr.forEach((item) => {
            let center = [item.data.latitude, item.data.longitude];
            let contentHtml = that.createPopupHtmlContent(
              item.list.assetTypeList,
              item.fullName
            );
            if (contentHtml) {
              that.createPointOnMap(
                item.num,
                groupLayer,
                contentHtml,
                center,
                item.data,
                item.data.cname,
                "project",
                geo.zoom
              );
            }
          });
        }
      });
      groupLayer.addTo(myMaps);
    },
    /**
     * @Description 用于绘制广场的点
     * @Param num 当前点的逾期设备数
     * @Param groupLayer 地图图层
     * @Param contentHtml 弹出框的Html内容
     * @Param center 该点坐标
     * @Param data  该点数据
     * @Param name  改点名称
     * @Param type  地图级别  group / zone / project  集团 / 中心 / 区域
     * @param zoom 缩放级别
     */
    createPointOnMap(
      num,
      groupLayer,
      contentHtml,
      center,
      data,
      name,
      type,
      zoom
    ) {
      let vm =this
      let color = this.paintColorByData(num);
      let textIcon = L.divIcon({
        html: type == "group" ? name : `<div>${name}</div>`,
        className: vm.skinMode==='light'? "my-leaflet-div-icon":"dark-my-leaflet-div-icon",
        iconSize: 30,
      });
      let circleIcon = L.icon({
        iconUrl: require(`../../assets/images/icons/${color}.png`),
        iconSize: [24, 24],
        iconAnchor: [16, 38],
      });

      if (color && center) {
        let popup = L.popup({ closeOnClick: true, offset: [-3, -20] })
          .setLatLng(center)
          .setContent(contentHtml);
        let marker = L.marker(center, { icon: textIcon }).addTo(groupLayer);
        let marker2 = L.marker(center, { icon: circleIcon }).addTo(groupLayer);
        let feaureGroup = L.featureGroup([marker, marker2]);
       
        popup.on('add' , (ev) => {
           let popupDom = document.querySelectorAll('.leaflet-mypopup-content')[0]
           let tipDom = document.querySelectorAll('.leaflet-popup-tip')[0]
           if (this.skinMode === 'light') {
             popupDom.setAttribute('class', 'leaflet-mypopup-content')
             tipDom.style.background="white"
           } else {
             popupDom.setAttribute('class', 'dark-leaflet-mypopup-content')
             tipDom.style.background="#09173E"
           }
        })
      
        marker2.on("mouseover", (ev) => {
            popup.openOn(myMaps);
        });

        marker2.on("mouseout", (ev) => {
          myMaps.closePopup(popup);
        });

        feaureGroup.on("click", (ev) => {
          this.selectedZone = data.ccode
          this.currentZoneData = data;
          this.currentLevel = data.level;
          if (data.level !== 0) {
            this.getEventStatusData(data.level, data.ccode);
            this.queryPlazaInfoCount(data.ccode, data.level);
            this.getSystemList(data.ccode, data.level);
          }
          if (type !== "project") {
            groupLayer.clearLayers();
          }
          this.createNavpathByData(data);
          if (type === "group") {
            this.pantZonesMap(data, this.currentSysId);
          }
          if (type === "zone") {
            this.pantProjectsMap(data, this.currentSysId);
          }
          if (type === "project") {
            let routeData = this.$router.resolve({
              name: "/home/homePage",
            });
            window.open(routeData.href, "_blank");
            window.__fromGroupPage = {
              level: 0,
              plazaName: data.cname,
              plazaId: data.ccode,
            };
            this.$store.commit("SETPLAZENAME", data.cname);
            localStorage.setItem("PLAZAID", data.ccode);
          }
        });
      }
    },
    /**
     *@Description 生成弹出框HTML
     */
    createPopupHtmlContent(data, name) {
      if (Array.isArray(data) && data.length) {
        let that = this;
        let html = "";
        let len = data.length;
        for (let i = 0; i < len; i++) {
          let item = data[i];
          if (item.is_exception_num) {
            html += `<div class="line">
                            <span>${item.category_name}</span> 
                            <span>${item.asset_num || "--"}${
              item.category_name === "屋面logo"
                ? "个"
                : item.category_name === "玻璃护栏"
                ? "段"
                : "台"
            }</span>
                    <span><span style="display: inline-block;width: 16px;height: 16px;line-height: 16px;border-radius: 8px; color: white; background : #F54E45;text-align: center;cursor: default;">!</span><em>${
                      item.is_exception_num
                    }</em></span>
                </div>`;
          } else {
            html += `<div class="line">
                            <span>${item.category_name}</span> 
                            <span>${item.asset_num || "--"}${
              item.category_name === "屋面logo"
                ? "个"
                : item.category_name === "玻璃护栏"
                ? "段"
                : "台"
            }</span>
                        </div>`;
          }
        }
        return `<div class="leaflet-mypopup-content" }"><div class="title"><span>${name}</span>-<span>${that.currentSelectedSys.smsxtname}</span></div>${html}</div>`;
      } else {
        return "";
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.reinitalMap);
  },
};
</script>

<style scoped lang="less">  
@import "../../assets/css/dark.less";
@import "../../assets/css/light.less";
.dark-my-leaflet-div-icon{
  color: white;
}
@keyframes selectDownUpExtendTop {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.selectDownUpExtendTop-enter-active {
  animation: selectDownUpExtendTop 0.3s;
}
.selectDownUpExtendTop-leave-active {
  animation: selectDownUpExtendTop 0.3s reverse;
}
/deep/ .p-tree-single-panel {
  height: 400px !important;
}
/deep/ .el-dialog__header {
  display: none !important;
}
/deep/ .el-dialog__body {
  padding-top: 0;
}

</style>