123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188 |
- <!-- 底图 -->
- <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(() => {
- 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() {
- 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>
|