wanda-bm-guide/src/components/floorMap/index.vue

<!-- 底图 -->
<template>
  <div id="floor_base" v-loading="loading" ref="graphy">
    <canvas
      :id="`canvas${id}`"
      :width="canvasWidth"
      :height="canvasHeight"
      tabindex="0"
    ></canvas>
    <!-- 地图底部操作按钮 -->
    <div class="strip-bottom">
      <canvasFun
        @fit="fit"
        @savePng="savePng"
        @saveSvg="saveSvg"
        @saveJson="saveJson"
        @scale="scale"
        @showText="showText"
        ref="canvasFun"
      ></canvasFun>
    </div>
    <room-box :key="`rommBox${roomKey}`" ref="boxRoom"></room-box>
    <equip-detail ref="equipDetail" :key="equipKey"></equip-detail>
    <el-popover
      ref="popover"
      id="popovers"
      placement="right"
      trigger="manual"
      v-model="visible"
      width="380"
    >
      <!-- <div style="text-align: right;margin-bottom: 10px;">
                <span style="float: left;">对应的工程信息化信息</span>
                <el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
            </div>-->
      <!-- 点击图标,出现的弹窗 -->
      <div
        v-if="equipIds.length && !tabData.pointData.length"
        style="margin-top: 10px"
      >
        <el-table
          :data="tabData.tableData"
          max-height="235"
          style="width: 100%"
          @row-click="handleClickEquipDetail"
          v-loading="eqLoading"
          :cell-class-name="tableCellClassName"
        >
          <el-table-column
            prop="sbjc"
            label="设备简称"
            width="144"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="sl"
            width="50"
            label="数量"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="sb_status"
            width="80"
            label="设备状态"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="sbglgs"
            width="80"
            label="管理归属"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
                    <el-table-column label="" width="80" :show-overflow-tooltip='true'>
                        <template slot-scope="scope">
                            <span class="equip-detail-btn">台账详情</span>
                        </template>
                    </el-table-column>-->
        </el-table>
        <!-- <div style="text-align: right; margin-top: 10px;">
                    <el-button size="mini" type="primary" @click="visible = false">关闭</el-button>
                </div>-->
      </div>
      <!-- 点击空间,出现的弹窗 -->
      <div
        v-else-if="!equipIds.length && tabData.pointData.length"
        style="margin-top: 10px"
      >
        <ul class="pointList">
          <li
            v-for="point in tabData.pointData"
            :key="point.id"
            @click="handleClickPointDeatil(point)"
          >
            <span :title="point.name">{{ point.name }}</span>
            <a>查看</a>
          </li>
        </ul>
        <div style="text-align: right; margin-top: 10px">
          <el-button
            v-show="showBtnWell"
            size="mini"
            type="primary"
            @click="handleClickHightLight(tabData.pointData)"
            >查看控制商铺范围</el-button
          >
          <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
        </div>
      </div>
      <!-- 既有空间,又有设备的弹窗 -->
      <el-tabs
        v-else-if="equipIds.length && tabData.pointData.length"
        v-model="activeName"
      >
        <el-tab-pane label="设备设施" name="equip">
          <el-table
            :data="tabData.tableData"
            max-height="235"
            style="width: 100%"
            @row-click="handleClickEquipDetail"
            :cell-class-name="tableCellClassName"
            v-loading="eqLoading"
          >
            <el-table-column
              prop="sbjc"
              label="设备简称"
              width="164"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="sl"
              width="50"
              label="数量"
              :show-overflow-tooltip="true"
              align="right"
            ></el-table-column>
            <el-table-column
              prop="sb_status"
              width="70"
              label="设备状态"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="sbglgs"
              width="70"
              label="管理归属"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
                        <el-table-column label="" width="80" :show-overflow-tooltip='true'>
                            <template slot-scope="scope">
                                <span class="equip-detail-btn">台账详情</span>
                            </template>
                        </el-table-column>-->
          </el-table>
          <div style="text-align: right; margin-top: 10px">
            <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="位置" name="point">
          <ul class="pointList">
            <li
              v-for="point in tabData.pointData"
              :key="point.id"
              @click="handleClickPointDeatil(point)"
            >
              <span :title="point.name">{{ point.name }}</span>
              <a>查看</a>
            </li>
          </ul>
          <div style="text-align: right; margin-top: 10px">
            <el-button
              v-show="showBtnWell"
              size="mini"
              type="primary"
              @click="handleClickHightLight(tabData.pointData)"
              >查看控制商铺范围</el-button
            >
            <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-popover>
    <span class="popStyle" :style="popoverPosition" v-popover:popover></span>
  </div>
</template>
<script>
/**
 * @author yunxing
 * @date 2020年08月21日11:04
 * @description 停用,已拆除的状态,使用message进行提示
 */
import { SFengParser, ProjectRf } from "@saga-web/feng-map";
import {
  SFloorParser,
  ItemOrder,
  ItemColor,
  SPolygonItem,
  SBoardItem,
} from "@saga-web/big";
import { FloorView } from "@/lib/FloorView";
import { FloorScene } from "@/lib/FloorScene";
import RoomBox from "@/views/room/index";
import canvasFun from "@/components/floorMap/canvasFun";
import { readGroup, queryStatis, graphQuery } from "@/api/public";
import { queryShops, queryAssetAll } from "@/api/equipmentList.js";
import { STopologyParser } from "@/lib/parsers/STopologyParser";
import { mapGetters, mapActions } from "vuex";
import { SImageItem, SImageShowType, SGraphItem } from "@saga-web/graph/lib";
import { SColor, SPoint } from "@saga-web/draw/lib";
import bus from "@/utils/bus.js";
import { TipelineItem } from "../../lib/items/TipelineItem";
import { SImageLegendItem } from "../../lib/items/SImageLegendItem";
import equipDetail from "../../views/equipment/table/equipDetail";
import { debounce } from "lodash";
import { Message } from "element-ui";
// import { uuid } from "@/components/mapClass/until";

export default {
  data() {
    return {
      appName: "万达可视化系统",
      key: "23f30a832a862c58637a4aadbf50a566",
      mapServerURL: `http://mapapp.wanda.cn/editor`,
      canvasWidth: 600,
      canvasHeight: 800,
      loading: false, // 限制重复查询
      view: null,
      urlMsg: {},
      canvasID: "canvas",
      floorid: "", //楼层id
      topologyParser: null, // 解析器数据
      fParser: null, // 底图解析器
      wellMap: {}, // 电井控制商铺映射
      activeName: "equip",
      popoverPosition: {
        top: 0,
        left: 0,
      },
      statusTextPosition: {
        top: 0,
        left: 0,
      },
      visible: false,
      eqLoading: true,
      equipIds: [],
      tabData: {
        tableData: [],
        pointData: [],
      },
      activeItem: null,
      showBtnWell: false,
      count: 0, // 顶楼为多张图时计数器
      equipKey: 1, //设备弹窗使用key值,解决打开弹窗数据为上次弹窗的数据
      statusDisabled: ["已拆除"], //禁止跳转的设备状态
      roomKey: 1,
      shopsList: [], //所有强电井对应的店铺
    };
  },
  props: {
    id: {
      default: "1",
      type: String,
    },
    categoryId: {
      default: "",
      type: String,
    },
    // 弹窗高度，适配底图高度使用
    modalHeight: {
      type: [Number, undefined],
      default: undefined,
    },
    loadName: null,
    type: null,
  },
  components: { RoomBox, canvasFun, equipDetail },
  computed: {
    ...mapGetters(["plazaId", "fmapID", "haveFengMap", "bunkObj"]),
  },
  methods: {
    /**
     * 点击图标事件
     *
     * item 点击的实例
     * events 鼠标事件
     * isShopToWell 是否是点击商铺促发电井高亮
     */
    handleClickLegendItem(item, events, isShopToWell = false) {
      this.tabData = { tableData: [], pointData: [] };
      this.equipIds = [];
      this.showBtnWell = false;
      this.visible = false;
      this.activeItem = null;
      this.isLoading = true;
      if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
        const e = events[0];
        this.activeItem = item;
        item.data.AttachObjectIds.forEach((v) => {
          if (v.type == "Image") {
            if (v.id) {
              this.equipIds.push(v.id);
            }
            // this.tabData.tableData.push(v);
          } else if (v.type == "Zone") {
            this.tabData.pointData.push(v);
          }
        });
        if (this.equipIds.length) {
          this.eqLoading = true;
          let data = {
            plazaId: this.$store.state.plazaId,
            page: 1,
            size: this.equipIds.length,
          };
          let postParams = {
            assetnumList: this.equipIds,
          };
          queryAssetAll({ data, postParams }).then((res) => {
            this.tabData.tableData = res.data.data;
            this.eqLoading = false;
          });
        }
        if (isShopToWell) {
          this.popoverPosition.top = `${e.clientY + 70}px`;
          this.popoverPosition.left = `${e.clientX + 20}px`;
        } else {
          this.popoverPosition.top = `${e.clientY}px`;
          this.popoverPosition.left = `${e.clientX + 30}px`;
        }

        this.$nextTick(() => {
          if (
            item.data.GraphElementId == "100050" ||
            item.data.GraphElementId == "100055" ||
            item.data.GraphElementId == "100056" ||
            item.data.GraphElementId == "100057"
          ) {
            //判断是否为电井
            this.showBtnWell = true;
            setTimeout(()=>{
              item.selected = true
            },300)
          }
          setTimeout(() => {
            this.visible = true;
          });
        });
      }
    },
    // 点击底图商铺高亮对应的电井
    shopLisghtWell() {
      const getParams = {
        plazaId: this.plazaId,
        floor: this.floorid,
      };
      queryShops({ getParams }).then((res) => {
        let shopsnumList = [];
        if (res.data && res.data.length) {
          for (let floor in res.data[0]) {
            shopsnumList = res.data[0][floor].map((obj) => {
              const shoplist = obj.shopsnumList.split(",");
              return Object.assign(obj, {
                shopList: shoplist,
              });
            });
          }
        }
        this.shopsList = shopsnumList;
      });
    },
    // 查看浮层设备详情
    handleClickEquipDetail: debounce(function (row, column, event) {
      // 设备状态为停用或已拆除时,弹出消息
      if (this.statusDisabled.includes(row?.sb_status)) {
        let message = `当前设备状态为“${row.sb_status}”，请复核现场情况，如有需要请前往编辑器删除。`; // `当前设备为“${row.sb_status}”状态，请前往编辑器重新编辑`
        // 防止出现多条message
        // 已经有 message时,并且this.message的message字段与message一致时, 不进行提示
        if (
          this.message &&
          this.message.visible &&
          this.message.message === message
        ) {
          return true;
        }
        this.message = Message({
          showClose: true,
          message,
          type: "warning",
          duration: 0,
          iconClass: "el-icon-warning-outline",
          customClass: "floor-map-warning",
        });
        // this.message = this.$message({
        //     message,
        //     type: 'warning',
        // })
        return true;
      }
      if (row.assetnum) {
        this.equipKey++;
        this.$nextTick(() => {
          this.$refs.equipDetail.open({ row: JSON.stringify(row) });
        });
      }
    }, 0),
    // handleClickEquipDetail(row) {
    //     if (row.assetuid) {
    //         window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
    //     }
    // },
    // 查看浮层位置详情
    handleClickPointDeatil(point) {
      if (point.id && this.activeItem) {
        this.roomKey++;
        this.$nextTick(() => {
          this.$refs.boxRoom.open({
            name: this.activeItem.name,
            type: this.type,
            location: point.id,
          });
        });
      }
    },
    handleClickHightLight(pointData) {
      this.clearHightLight();
      pointData.forEach((point) => {
        let location = point.id ? point.id : "";
        // if (this.wellMap.hasOwnProperty(location)) {
        //     this.wellMap[location].forEach((item) => {
        //         item.highLightFlag = true
        //         item.zOrder = 30
        //     })
        // } else {
        let getParams = {
          plazaId: this.plazaId,
          floor: this.floorid,
          keyword: `${location}:wellnum;`,
        };
        queryShops({ getParams }).then((res) => {
          let shopsnumList = [];
          // let shopsnumItemList = []
          if (res.data && res.data.length) {
            for (let floor in res.data[0]) {
              if (res.data[0][floor].length) {
                res.data[0][floor].forEach((v) => {
                  shopsnumList = shopsnumList.concat(v.shopsnumList.split(","));
                });
              }
            }
          }
          if (shopsnumList.length) {
            this.fParser.spaceList.forEach((item) => {
              if (
                shopsnumList.findIndex((name) => name == item.data.Name) != -1
              ) {
                item.highLightFlag = true;
                // item.zOrder = 30;
                // shopsnumItemList.push(item)
              }
            });
            // this.wellMap[location] = shopsnumItemList
          }
        });
        // }
      });
      this.visible = false;
    },
    ...mapActions(["getfmapID"]),
    init(floorid) {
      this.loading = true;
      this.floorid = floorid;
      this.mapSize();
      this.$refs.canvasFun.isShow = false;
      setTimeout(() => {
        this.clearGraphy();
        this.scene = new FloorScene();
        if (this.haveFengMap == 1) {
          this.scene.selectContainer.connect(
            "listChange",
            this,
            this.listChange
          );
          if (this.canvasID != `canvas${this.id}`) {
            this.canvasID = `canvas${this.id}`;
          }
          this.getGraphDetail().then((res) => {
            if (res.Content.length == 1) {
              const data = res.Content[0];
              if (data.MaxY && data.MinX) {
                window.fengmapData.maxY = data.MaxY;
                window.fengmapData.minX = data.MinX;
              }
            }
            this.parserData(floorid);
          });
          // this.parserData(floorid);
        } else if (this.haveFengMap == 0) {
          this.view.scene = this.scene;
          this.readGraph();
        } else {
          this.loading = false;
        }
      }, 100);
    },
    parserData(floor) {
      if (floor == "g80") {
        // 屋顶
        if (window.fengmapData.frImg) {
          const pj = this.fmapID.split("_")[0];
          // 单张图片
          if (!ProjectRf[pj]) {
            let imgItem = new SImageItem(
              null,
              `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`
            );
            imgItem.showType = SImageShowType.AutoFit;
            imgItem.connect("imgLoadOver", this, () => {
              this.readGraph();
            });
            this.scene.addItem(imgItem);
            this.view.scene = this.scene;
            // this.view.fitSceneToView()
          } else {
            // 多张图
            try {
              // 初始化0
              this.count = 0;
              ProjectRf[pj].forEach((t) => {
                const item = new SImageItem(
                  null,
                  `${this.mapServerURL}/webtheme/${this.fmapID}/${t.name}`
                );
                item.width = t.width;
                item.height = t.height;
                item.moveTo(t.x, t.y);
                item.connect("imgLoadOver", this, () => {
                  this.countRf(ProjectRf[pj].length);
                });
                this.scene.addItem(item);
              });
              this.view.scene = this.scene;
            } catch (e) {
              console.log(e);
            }
          }
        } else {
          // 屋顶图不为图片
          this.readBaseMap(floor);
        }
      } else {
        if (window.fengmapData.gnameToGid[floor]) {
          this.readBaseMap(floor);
        } else {
          console.log("楼层不正确");
        }
      }
    }, // 解析底图
    // 解析楼地板
    loadBoard(floor) {
      window.fengmapData.loadFloor(floor, (res) => {
        const zone = new SBoardItem(null, res);
        this.scene.addItem(zone);
      });
    },
    readBaseMap(floor) {
      this.loadBoard(window.fengmapData.gnameToGid[floor]);
      window.fengmapData.parseData(
        window.fengmapData.gnameToGid[floor],
        (res) => {
          if (res.err) {
            console.log("errr", res.err);
            return;
          }
          this.fParser = new SFloorParser(null);
          this.fParser.parseData(res);
          this.fParser.spaceList.forEach((t) => {
            this.scene.addItem(t);
            t.nameSize = 12;
            t.nameColor = "#2a2a2a";
            if (t.data.Name && this.bunkObj[t.data.Name]) {
              t.name = this.bunkObj[t.data.Name].brandname;
            } else {
              // t.name = t.data.Name
              t.name = "";
            }
            t.connect("onMouseDown", this, this.clickMapPlace);
          });
          this.fParser.wallList.forEach((t) => this.scene.addItem(t));
          this.fParser.virtualWallList.forEach((t) => this.scene.addItem(t));
          this.fParser.doorList.forEach((t) => this.scene.addItem(t));
          this.fParser.columnList.forEach((t) => this.scene.addItem(t));
          this.fParser.casementList.forEach((t) => this.scene.addItem(t));
          this.view.scene = this.scene;
          // this.view.fitSceneToView()
          this.readGraph();
        }
      );
    },
    // 点击底图空间
    clickMapPlace(item, e) {
      let wellId = null;
      let wellItem = null; //;对应的强电井
      if (item.data.Name) {
        this.shopsList.forEach((equip) => {
          equip.shopList.forEach((shop) => {
            if (item.data.Name == shop) {
              wellId = equip.wellnum;
            }
          });
        });
      }
      this.topologyParser.imageLegendList.forEach((eqItem) => {
        eqItem.data.AttachObjectIds.forEach((objId) => {
          if (objId.id == wellId) {
            // 点击空间高亮
            wellItem = eqItem;
          }
        });
      });
      if (wellItem) {
        setTimeout(() => {
          this.clearHightLight();
          item.highLightFlag = true;
          // item.zOrder = 30;
          wellItem.selected = true;

          const point = this.view.mapFromScene(wellItem.x, wellItem.y);
          const event = [
            {
              clientX: point.x,
              clientY: point.y,
            },
          ];
          this.handleClickLegendItem(wellItem, event, true);
        });
      } else {
        this.clearHightLight();
      }
    },
    readGraph() {
      this.readGroup(this.floorid)
        .then((data) => {
          if (data.Result == "failure") {
            this.$store.commit("SETISMESSAGE", false);
            this.view.fitSceneToView();
            this.view.minScale = this.view.scale;
            if (this.$refs.canvasFun) {
              this.$refs.canvasFun.everyScale = this.view.scale;
            }
            this.loading = false;
            return;
          } else {
            if (
              data.Data[0].Elements.Nodes.length === 0 &&
              data.Data[0].Elements.Markers.length === 0 &&
              data.Data[0].Elements.Relations.length === 0
            ) {
              this.$store.commit("SETISMESSAGE", false);
            } else {
              this.$store.commit("SETISMESSAGE", true);
            }
          }
          // 无返回Data处理
          if (!(data.Data && data.Data.length)) {
            this.view.fitSceneToView();
            this.view.minScale = this.view.scale;
            if (this.$refs.canvasFun) {
              this.$refs.canvasFun.everyScale = this.view.scale;
            }
            return false;
          }
          // 请求回来的备注
          if (data.Data && data.Data[0].Note) {
            let note = data.Data[0].Note;
            bus.$emit("queryRemarksMethods", note);
          } else {
            bus.$emit("queryRemarksMethods", "");
          }
          //土建装饰的图例展示
          if (this.$cookie.get("categoryId") == "SCPZ") {
            let scpzTable = [],
              arr = [];
            scpzTable = data.Data[0].Elements.Nodes || [];
            if (scpzTable.length > 0) {
              scpzTable.forEach((e) => {
                if (e.Properties.ItemExplain) {
                  let obj = e;
                  arr.push(obj);
                }
              });
            }
            console.log(arr);
            this.$store.commit("SETSCPZTABLE", arr);
          }
          if (data.Data[0].Elements.Nodes.length > 0) {
            this.$store.commit("SETTYPENUM", "");
            let Lengd = data.Data[0].Elements.Nodes;
            Lengd.forEach((el) => {
              if (el.Type == "Image" && el.Num > 1) {
                console.log(el.Num);
                this.$store.commit("SETTYPENUM", el.Num);
              }
            });
          }
          // 放到后边 $cookie graphId
          this.$cookie.set("graphId", data.Data[0].ID, 3);
          if (this.$cookie.get("graphId")) {
            // 得到graphId 就请求图例
            // 除土建装饰之外的图例展示 包括楼层功能
            bus.$emit("queryViewMethods");
          }
          this.topologyParser = new STopologyParser(null);
          this.topologyParser.parseData(data.Data[0].Elements);
          // 多边形
          this.topologyParser.zoneLegendList.forEach((t) => {
            this.scene.addItem(t);
            t.connect("legendItemClick", t, this.handleClickLegendItem);
          });
          // 增加文字
          this.topologyParser.textMarkerList.forEach((t) => {
            this.scene.addItem(t);
          });
          // 增加图片
          this.topologyParser.imageMarkerList.forEach((t) => {
            this.scene.addItem(t);
          });
          // 增加直线
          this.topologyParser.lineMarkerList.forEach((t) => {
            this.scene.addItem(t);
          });
          // 增加图标类图例
          this.topologyParser.imageLegendList.forEach((t) => {
            this.scene.addItem(t);
            t.connect("legendItemClick", t, this.handleClickLegendItem);
          });
          // 获取本层楼所有电井对应的商铺 id
          this.shopLisghtWell();

          // 增加管线类
          // 增加图标类图例
          this.topologyParser.relationList.forEach((t) => {
            t.selectable = true;
            this.scene.addItem(t);
            t.connect("legendItemClick", t, this.handleClickLegendItem);
          });
          this.view.fitSceneToView();
          this.view.minScale = this.view.scale;
          if (this.$refs.canvasFun) {
            this.$refs.canvasFun.everyScale = this.view.scale;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 顶楼为多张图时计数器
    countRf(len) {
      this.count++;
      if (len == this.count) {
        this.readGraph();
      } else {
        console.log("所有图片未加载完成");
      }
    },
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return;
      }
      this.view = new FloorView(`canvas${this.id}`);
    },
    listChange(item, ev) {
      // if (ev[0].length) {
      //     let selectItem1 = ev[0][0],
      //         location = selectItem1.data.AttachObjectIds[0] ? selectItem1.data.AttachObjectIds[0].id : ''
      //     // 空间类型都可打开弹窗（除防火分区 编号100131，商管办公室 编号100112，铺装石材 编号100129）
      //     if (selectItem1.data.GraphElementType == 'Zone') {
      //         if (
      //             selectItem1.data.GraphElementId != '100131' &&
      //             selectItem1.data.GraphElementId != '100112' &&
      //             selectItem1.data.GraphElementId != '100129'
      //         ) {
      //             if (location) {
      //                 this.$refs.boxRoom.open({ name: selectItem1.name, type: this.type, location: location })
      //             }
      //         }
      //     }
      //     // // 选中电井设置电井关联的商铺高亮
      //     // this.setHightLight(ev[0])
      // }
      // else {
      // this.clearHightLight()
      // }
      if (ev[0].length) {
        if (
          !(
            ev[0][0] instanceof SPolygonItem ||
            ev[0][0] instanceof TipelineItem ||
            ev[0][0] instanceof SImageLegendItem
          )
        ) {
          this.visible = false;
        }
      } else {
        this.visible = false;
      }
      this.clearHightLight();
    },
    // 选中电井关联的商铺高亮
    setHightLight(arr) {
      this.clearHightLight();
      arr.forEach((item) => {
        let location = item.data.AttachObjectIds[0]
          ? item.data.AttachObjectIds[0].id
          : "";
        // 添加了位置类型并且选中的类型为电井类型
        if (
          (item.data.GraphElementId == "100050" ||
            item.data.GraphElementId == "100055" ||
            item.data.GraphElementId == "100056" ||
            item.data.GraphElementId == "100057") &&
          location
        ) {
          if (this.wellMap.hasOwnProperty(location)) {
            this.wellMap[location].forEach((item) => {
              item.highLightFlag = true;
              // item.zOrder = 30;
            });
          } else {
            let getParams = {
              plazaId: this.plazaId,
              floor: this.floorid,
              keyword: `${location}:wellnum;`,
            };
            queryShops({ getParams }).then((res) => {
              let shopsnumList = [];
              let shopsnumItemList = [];
              if (res.data && res.data.length) {
                for (let floor in res.data[0]) {
                  if (res.data[0][floor].length) {
                    res.data[0][floor].forEach((v) => {
                      shopsnumList = shopsnumList.concat(
                        v.shopsnumList.split(",")
                      );
                    });
                  }
                }
              }
              if (shopsnumList.length) {
                this.fParser.spaceList.forEach((item) => {
                  if (
                    shopsnumList.findIndex((name) => name == item.data.Name) !=
                    -1
                  ) {
                    item.highLightFlag = true;
                    // item.zOrder = 30;
                    shopsnumItemList.push(item);
                  }
                });
                this.wellMap[location] = shopsnumItemList;
              }
            });
          }
        }
      });
    },
    // 清除电井关联商铺的高亮状态
    clearHightLight() {
           // 所有电井置为 select = false
      this.topologyParser.imageLegendList.forEach((eqItem) => {
        eqItem.selected = false;
      });
      ItemColor.spaceHighColor = new SColor("#FBF2CC");
      // for (let key in this.wellMap) {
      //     this.wellMap[key].forEach((item) => {
      //         item.highLightFlag = false
      //         item.zOrder = ItemOrder.spaceOrder
      //     })
      // }
      this.fParser.spaceList.forEach((item) => {
        item.highLightFlag = false;
        item.zOrder = ItemOrder.spaceOrder;
      });
    },
    // 适配底图到窗口
    fit() {
      this.view.fitSceneToView();
    },
    // 保存为png
    savePng() {
      // this.view.saveImage(`${this.loadName}.png`, 'png')
      this.view.saveImageSize(
        `${this.loadName}.png`,
        "png",
        1920 * 2,
        1080 * 2
      );
      //console.log(`${this.loadName}.png`)
    },
    // 保存为svg
    saveSvg() {
      this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800);
    },
    // 保存为json
    saveJson() {
      this.view.saveFloorJson(`${this.loadName}.json`);
    },
    // 缩放
    scale(val) {
      if (!this.view) {
        return;
      }
      let scale = this.view.scale;
      this.view.scaleByPoint(
        val / scale,
        this.canvasWidth / 2,
        this.canvasHeight / 2
      );
    },
    // 小眼睛控制显示铺位名称
    showText(val) {
      // this.topologyParser.zoneLegendList.forEach(t => {
      //     t.showText = val
      // })
      this.fParser.spaceList.forEach((t) => {
        t.showBaseName = val;
      });
    },
    // 读取数据
    readGroup(FloorID) {
      const data = {
        BuildingID: "1",
        FloorID: FloorID,
        categoryId: this.categoryId
          ? this.categoryId
          : this.$cookie.get("categoryId"),
        projectId: this.urlMsg.ProjectID,
        Pub: true,
      };
      return readGroup(data);
    },
    // 获取图最大最小值
    getGraphDetail() {
      const categoryId = this.categoryId
        ? this.categoryId
        : this.$cookie.get("categoryId");
      const data = {
        Filters: `categoryId='${categoryId}';projectId='${this.urlMsg.ProjectID}';BuildingID='1';FloorID='${this.floorid}';isPub=true`,
      };
      return graphQuery(data);
    },
    // 地图尺寸
    mapSize() {
      this.canvasWidth = this.$refs.graphy.offsetWidth;
      if (window.screen.height == "768") {
        this.canvasHeight = this.$refs.graphy.offsetHeight - 100;
      } else {
        this.canvasHeight = 900;
      }
      // 弹窗中底图高度适配
      if (this.modalHeight) {
        this.canvasHeight = this.modalHeight;
      }
    },
    getEvent() {
      bus.$on("changeShow", (res) => {
        this.topologyParser &&
          this.topologyParser.zoneLegendList.forEach((t) => {
            let id = t.data.GraphElementId;
            t.maskFlag = !(res.indexOf(id) > -1);
          });
        // this.topologyParser.textMarkerList.forEach(t => {
        //     let id = t.data.GraphElementId
        //     t.maskFlag = !(res.indexOf(id) > -1)
        // })
        // this.topologyParser.imageMarkerList.forEach(t => {
        //     let id = t.data.GraphElementId
        //     t.maskFlag = !(res.indexOf(id) > -1)
        // })
        // this.topologyParser.lineMarkerList.forEach(t => {
        //     let id = t.data.GraphElementId
        //     t.maskFlag = !(res.indexOf(id) > -1)
        // })
        this.topologyParser &&
          this.topologyParser.imageLegendList.forEach((t) => {
            let id = t.data.GraphElementId;
            t.maskFlag = !(res.indexOf(id) > -1);
          });
        this.topologyParser &&
          this.topologyParser.relationList.forEach((t) => {
            let id = t.data.GraphElementId || t.data.GraphElementID;
            t.maskFlag = !(res.indexOf(id) > -1);
          });
      });
    },
    /**
     * @description 处理popover显隐
     * 当点击位置不在canvas内部时 ( 如点击 页面空白,图例,楼层,设备设施左侧列表项时),将visible置为false,隐藏popover
     */
    handlePopover(e) {
      this.$nextTick(() => {
        if (!this.$refs.graphy.contains(e.target)) {
          this.visible = false;
        }
        this.showStatusText = false;
        this.statusText = "";
        // 关闭message提示
        if (this.message) {
          this.message.close();
          this.message = null;
        }
      });
    },
    /**
     * @description 设备状态列, 状态为停用或已拆除时,样式红色
     */
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2 && this.statusDisabled.includes(row.sb_status)) {
        return "status-disabled";
      }
    },
  },
  watch: {
    "view.scale": {
      handler(n) {
        if (this.$refs.canvasFun) {
          let s = (n * 10) / this.view.minScale;
          this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
        }
      },
    },
    haveFengMap() {
      this.init(this.floorid);
    },
  },
  mounted() {
    this.mapSize();
    this.getEvent();
    // 添加监听点击事件,处理popover显隐
    window.addEventListener("click", this.handlePopover, false);
    this.$once("hook:beforeDestroy", () => {
      window.removeEventListener("click", this.handlePopover);
    });
  },
  created() {
    // document.addEventListener("mousedown", () => {
    //     this.visible = false;
    // })
    this.urlMsg = {
      categoryId: this.$cookie.get("categoryId"),
      ProjectID: this.plazaId,
      BuildingID: "1",
      FloorID: this.$cookie.get("floorMapId") || "f1",
      fmapID: this.fmapID,
    };
  },
};
</script>
<style lang="less" scoped>
#floor_base {
  position: relative;
  height: 100%;
  .fengMap {
    position: fixed;
    width: 100px;
    height: 100px;
    z-index: -1;
  }
  .strip-bottom {
    position: absolute;
    right: 0;
    bottom: 40px;
    width: 100%;
  }
  .popStyle {
    position: fixed;
  }
}
</style>
<style lang="less">
a:hover {
  text-decoration: none;
}
.el-popover {
  .el-table {
    tr {
      .equip-detail-btn {
        display: none;
      }
    }
    tr:hover {
      cursor: pointer;
      .equip-detail-btn {
        cursor: pointer;
        display: inline-block;
        color: #025baa;
      }
    }
  }
  .pointList {
    max-height: 235px;
    overflow-y: auto;
    text-align: right;
    li {
      height: 38px;
      line-height: 38px;
      padding: 0 12px;
      cursor: pointer;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      span {
        float: left;
        width: 260px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      a {
        display: none;
        color: #025baa;
        font-size: 13px;
      }
    }
    li:hover {
      background-color: #f5f6f7;
      a {
        display: inline-block;
      }
    }
  }
  .el-button--primary {
    background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
  }
  .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 16px;
  }
  .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  .el-tabs--bottom .el-tabs__item.is-top:last-child,
  .el-tabs--top .el-tabs__item.is-bottom:last-child,
  .el-tabs--top .el-tabs__item.is-top:last-child {
    padding-right: 16px;
  }
  .el-tabs__nav-wrap::after {
    height: 0;
  }
  .is-active {
    color: #025baa !important;
    border-color: #025baa !important;
    background: rgba(2, 91, 170, 0.15);
  }
  .el-tabs__item {
    padding: 5px 16px;
    height: 30px;
    line-height: 20px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(31, 36, 41, 1);
    border: 1px solid rgba(195, 199, 203, 1);
  }
  .el-tabs__active-bar {
    background-color: transparent !important;
  }
  /deep/ .el-tabs__item:last-child {
    border-radius: 0px 4px 4px 0px;
  }
  /deep/ .el-tabs__item:nth-child(2) {
    border-radius: 4px 0px 0px 4px;
  }
  // 设备状态
  .status-disabled {
    color: #c0c4cc !important;
    text-decoration: line-through;
  }
}
// 警告message样式修改
.floor-map-warning {
  background-color: #ffa53d;
  color: #fff;
  font-size: 14px;
  /deep/ .el-icon-warning-outline {
    font-weight: 600 !important;
    margin-right: 5px;
  }
  /deep/.el-icon-close {
    color: #fff;
    opacity: 0.5;
  }
}
</style>