|
@@ -1,45 +1,45 @@
|
|
|
<template>
|
|
|
- <div id='baseEditer' ref='graphy'>
|
|
|
- <div id='fengMap'></div>
|
|
|
- <div class='canvas-container'>
|
|
|
- <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' ref='canvas' tabindex='0'></canvas>
|
|
|
+ <div id="baseEditer" ref="graphy">
|
|
|
+ <div id="fengMap"></div>
|
|
|
+ <div class="canvas-container">
|
|
|
+ <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { SFengParser } from '@saga-web/feng-map'
|
|
|
-import { SFloorParser } from '@saga-web/big'
|
|
|
-import { FloorView } from './../lib/FloorView'
|
|
|
-import { EditScence } from './mapClass/EditScence'
|
|
|
-import bus from '@/bus'
|
|
|
-import { saveGroup, readGroup, queryTypeGraph, publishGraph } from '@/api/editer.js'
|
|
|
-import { STopologyParser } from './../lib/parsers/STopologyParser'
|
|
|
-import { uuid } from '@/components/mapClass/until'
|
|
|
-import { SImageItem } from '@saga-web/graph/lib'
|
|
|
-import { SPainter, SColor, SFont, SPoint } from '@saga-web/draw'
|
|
|
-import store from '../store'
|
|
|
-import { Loading } from 'element-ui'
|
|
|
-import { Message } from 'element-ui'
|
|
|
-let fengmap = null
|
|
|
+import { SFengParser } from "@saga-web/feng-map";
|
|
|
+import { SFloorParser } from "@saga-web/big";
|
|
|
+import { FloorView } from "./../lib/FloorView";
|
|
|
+import { EditScence } from "./mapClass/EditScence";
|
|
|
+import bus from "@/bus";
|
|
|
+import { saveGroup, readGroup, queryTypeGraph, publishGraph } from "@/api/editer.js";
|
|
|
+import { STopologyParser } from "./../lib/parsers/STopologyParser";
|
|
|
+import { uuid } from "@/components/mapClass/until";
|
|
|
+import { SImageItem } from "@saga-web/graph/lib";
|
|
|
+import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
|
|
|
+import store from "../store";
|
|
|
+import { Loading } from "element-ui";
|
|
|
+import { Message } from "element-ui";
|
|
|
+let fengmap = null;
|
|
|
//// 底图空间增加字段 isExtracted:boolean true 已被提取过
|
|
|
export default {
|
|
|
props: {
|
|
|
cmdType: {
|
|
|
type: String,
|
|
|
- default: 'choice',
|
|
|
+ default: "choice",
|
|
|
required: false
|
|
|
},
|
|
|
changeTextMsg: {
|
|
|
type: String,
|
|
|
- default: '',
|
|
|
+ default: "",
|
|
|
required: false
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- appName: '万达可视化系统',
|
|
|
- key: '23f30a832a862c58637a4aadbf50a566',
|
|
|
- mapServerURL: 'http://map.wanda.cn/editor',
|
|
|
+ appName: "万达可视化系统",
|
|
|
+ key: "23f30a832a862c58637a4aadbf50a566",
|
|
|
+ mapServerURL: "http://map.wanda.cn/editor",
|
|
|
canvasWidth: 700,
|
|
|
canvasHeight: 800,
|
|
|
fParser: null,
|
|
@@ -49,256 +49,263 @@ export default {
|
|
|
urlMsg: {},
|
|
|
chiceItemList: [], //选中itemlist
|
|
|
hasTypeList: [], // 当前类型下包含的typeid(提取)
|
|
|
- graphId: '',
|
|
|
+ graphId: "",
|
|
|
initScale: 1, //加载好底图之后的,初始缩放比例
|
|
|
changeScaleByClick: false //区分 滚轮,点击 事件改变的缩放比例
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.canvasWidth = this.$refs.graphy.offsetWidth
|
|
|
- this.canvasHeight = this.$refs.graphy.offsetHeight - 10
|
|
|
- this.init()
|
|
|
+ this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
|
+ this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
|
|
|
+ this.init();
|
|
|
// 挂在bus
|
|
|
- this.getBus()
|
|
|
- store.dispatch('getElementType', { PageSize: 1000 })
|
|
|
- window.vm = this
|
|
|
+ this.getBus();
|
|
|
+ store.dispatch("getElementType", { PageSize: 1000 });
|
|
|
+ window.vm = this;
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
- document.getElementById(`canvas`).focus()
|
|
|
- this.clearGraphy()
|
|
|
- this.scene = new EditScence()
|
|
|
- this.view.scene = this.scene
|
|
|
- this.view.fitSceneToView()
|
|
|
- this.scene.emitChange = this.emitChange
|
|
|
- this.scene.scenceUpdate = this.scenceUpdate
|
|
|
+ document.getElementById(`canvas`).focus();
|
|
|
+ this.clearGraphy();
|
|
|
+ this.scene = new EditScence();
|
|
|
+ this.view.scene = this.scene;
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ this.scene.emitChange = this.emitChange;
|
|
|
+ this.scene.scenceUpdate = this.scenceUpdate;
|
|
|
},
|
|
|
// 不适用平面图逻辑(调用蜂鸟接口,加载底图)
|
|
|
init1() {
|
|
|
const loadings = Loading.service({
|
|
|
lock: true,
|
|
|
- text: 'Loading',
|
|
|
- spinner: 'el-icon-loading',
|
|
|
- background: 'rgba(0, 0, 0, 0.7)'
|
|
|
- })
|
|
|
- document.getElementById(`canvas`).focus()
|
|
|
- this.clearGraphy()
|
|
|
- this.scene = new EditScence()
|
|
|
- fengmap = new SFengParser('fengMap', this.mapServerURL + '/fmap/' + this.urlMsg.fmapID, this.key, this.appName, null)
|
|
|
- const floorid = this.urlMsg.FloorID
|
|
|
+ text: "Loading",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)"
|
|
|
+ });
|
|
|
+ document.getElementById(`canvas`).focus();
|
|
|
+ this.clearGraphy();
|
|
|
+ this.scene = new EditScence();
|
|
|
+ fengmap = new SFengParser("fengMap", this.mapServerURL + "/fmap/" + this.urlMsg.fmapID, this.key, this.appName, null);
|
|
|
+ const floorid = this.urlMsg.FloorID;
|
|
|
fengmap.loadMap(this.urlMsg.fmapID, resp => {
|
|
|
- this.floorList = resp
|
|
|
+ this.floorList = resp;
|
|
|
fengmap.loadTheme(`${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${this.urlMsg.fmapID}.theme`).then(response => {
|
|
|
- console.log('获取rf成功', response)
|
|
|
- this.parserData(floorid)
|
|
|
- this.readGraph()
|
|
|
- loadings.close()
|
|
|
- })
|
|
|
- this.view.fitSceneToView()
|
|
|
- })
|
|
|
+ console.log("获取rf成功", response);
|
|
|
+ this.parserData(floorid);
|
|
|
+ this.readGraph();
|
|
|
+ loadings.close();
|
|
|
+ });
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ });
|
|
|
// 获取typeid
|
|
|
- this.getTypeId()
|
|
|
- this.scene.emitChange = this.emitChange
|
|
|
- this.scene.scenceUpdate = this.scenceUpdate
|
|
|
+ this.getTypeId();
|
|
|
+ this.scene.emitChange = this.emitChange;
|
|
|
+ this.scene.scenceUpdate = this.scenceUpdate;
|
|
|
},
|
|
|
parserData(floor) {
|
|
|
- if (floor == 'g80') {
|
|
|
+ if (floor == "g80") {
|
|
|
// 屋顶
|
|
|
if (fengmap.frImg) {
|
|
|
- const imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${fengmap.frImg}`)
|
|
|
- this.scene.addItem(imgItem)
|
|
|
- this.view.scene = this.scene
|
|
|
- this.view.fitSceneToView()
|
|
|
- this.loading = false
|
|
|
- this.isQuerying = false
|
|
|
+ const imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${fengmap.frImg}`);
|
|
|
+ this.scene.addItem(imgItem);
|
|
|
+ this.view.scene = this.scene;
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ this.loading = false;
|
|
|
+ this.isQuerying = false;
|
|
|
}
|
|
|
} else {
|
|
|
if (this.floorList[floor]) {
|
|
|
fengmap.parseData(this.floorList[floor], res => {
|
|
|
if (res.err) {
|
|
|
- console.log(res.err)
|
|
|
- return
|
|
|
+ console.log(res.err);
|
|
|
+ return;
|
|
|
}
|
|
|
- this.fParser = new SFloorParser(null)
|
|
|
- this.fParser.parseData(res)
|
|
|
- this.scene.fidToItem = {}
|
|
|
+ this.fParser = new SFloorParser(null);
|
|
|
+ this.fParser.parseData(res);
|
|
|
+ this.scene.fidToItem = {};
|
|
|
this.fParser.spaceList.forEach(t => {
|
|
|
- t.zOrder = t.zOrder + t.data.Height
|
|
|
- t.selectable = true
|
|
|
- this.scene.fidToItem[t.data.SourceId] = t
|
|
|
- this.scene.addItem(t)
|
|
|
- })
|
|
|
- this.scene.spaceList = this.fParser.spaceList
|
|
|
- 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.loading = false
|
|
|
- this.isQuerying = false
|
|
|
- console.log('success')
|
|
|
+ t.zOrder = t.zOrder + t.data.Height;
|
|
|
+ t.selectable = true;
|
|
|
+ this.scene.fidToItem[t.data.SourceId] = t;
|
|
|
+ this.scene.addItem(t);
|
|
|
+ });
|
|
|
+ this.scene.spaceList = this.fParser.spaceList;
|
|
|
+ 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.loading = false;
|
|
|
+ this.isQuerying = false;
|
|
|
+ console.log("success");
|
|
|
// 设置初始化缩放比例
|
|
|
- this.initScale = this.view.scale
|
|
|
- bus.$emit('initScale', this.view.scale)
|
|
|
- })
|
|
|
+ this.initScale = this.view.scale;
|
|
|
+ bus.$emit("initScale", this.view.scale);
|
|
|
+ });
|
|
|
} else {
|
|
|
- console.log('楼层不正确')
|
|
|
+ console.log("楼层不正确");
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 读取绘制数据
|
|
|
readGraph() {
|
|
|
this.readGroup().then(data => {
|
|
|
- this.graphId = data.Data[0].ID
|
|
|
- bus.$emit('setGraphId', this.graphId)
|
|
|
+ this.graphId = data.Data[0].ID;
|
|
|
+ bus.$emit("setGraphId", this.graphId);
|
|
|
if (data.Data) {
|
|
|
- const parserData = new STopologyParser(null)
|
|
|
- parserData.parseData(data.Data[0].Elements)
|
|
|
+ const parserData = new STopologyParser(null);
|
|
|
+ parserData.parseData(data.Data[0].Elements);
|
|
|
// 多边形
|
|
|
parserData.zoneLegendList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
+ this.scene.addItem(t);
|
|
|
// 记录提取
|
|
|
if (t.data.Properties && t.data.Properties.FID) {
|
|
|
- this.scene.fidToItem[t.data.Properties.FID].isExtracted = true
|
|
|
+ this.scene.fidToItem[t.data.Properties.FID].isExtracted = true;
|
|
|
}
|
|
|
- this.scene.Nodes.push(t)
|
|
|
- })
|
|
|
+ this.scene.Nodes.push(t);
|
|
|
+ });
|
|
|
// 增加文字
|
|
|
parserData.textMarkerList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- this.scene.Markers.push(t)
|
|
|
- })
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Markers.push(t);
|
|
|
+ });
|
|
|
// 增加图片
|
|
|
parserData.imageMarkerList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- this.scene.Markers.push(t)
|
|
|
- })
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Markers.push(t);
|
|
|
+ });
|
|
|
// 增加直线
|
|
|
parserData.lineMarkerList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- this.scene.Markers.push(t)
|
|
|
- })
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Markers.push(t);
|
|
|
+ });
|
|
|
// 增加图标类图例(此item需在管线item添加之前添加)
|
|
|
- const ancToAnchor = {}
|
|
|
+ const ancToAnchor = {};
|
|
|
parserData.imageLegendList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- this.scene.Nodes.push(t)
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Nodes.push(t);
|
|
|
if (t.anchorList && t.anchorList.length) {
|
|
|
t.anchorList.forEach(anc => {
|
|
|
- ancToAnchor[anc.id] = anc
|
|
|
- })
|
|
|
+ ancToAnchor[anc.id] = anc;
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
// 增加管线类(需在图标类图例添加后添加)
|
|
|
parserData.relationList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- this.scene.Relations.push(t)
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Relations.push(t);
|
|
|
// 设置锚点
|
|
|
if (t.anchor1ID) {
|
|
|
- const startAnc = ancToAnchor[t.anchor1ID]
|
|
|
- startAnc.isConnected = true
|
|
|
- startAnc.parent?.connect('changePos', t, t.changePos)
|
|
|
- t.startAnchor = startAnc || null
|
|
|
+ const startAnc = ancToAnchor[t.anchor1ID];
|
|
|
+ startAnc.isConnected = true;
|
|
|
+ startAnc.parent?.connect("changePos", t, t.changePos);
|
|
|
+ t.startAnchor = startAnc || null;
|
|
|
}
|
|
|
if (t.anchor2ID) {
|
|
|
- const endAnc = ancToAnchor[t.anchor2ID]
|
|
|
- endAnc.isConnected = true
|
|
|
- endAnc.parent?.connect('changePos', t, t.changePos)
|
|
|
- t.endAnchor = endAnc || null
|
|
|
+ const endAnc = ancToAnchor[t.anchor2ID];
|
|
|
+ endAnc.isConnected = true;
|
|
|
+ endAnc.parent?.connect("changePos", t, t.changePos);
|
|
|
+ t.endAnchor = endAnc || null;
|
|
|
}
|
|
|
- })
|
|
|
- this.view.fitSceneToView()
|
|
|
- bus.$emit('elementDataChange', this.scene)
|
|
|
+ });
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ bus.$emit("elementDataChange", this.scene);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 监听变化
|
|
|
emitChange(itemMsg) {
|
|
|
- this.chiceItemList = itemMsg.itemList
|
|
|
- this.$emit('changeFocusItem', itemMsg)
|
|
|
- bus.$emit('FocusItemChanged', itemMsg)
|
|
|
+ this.chiceItemList = itemMsg.itemList;
|
|
|
+ this.$emit("changeFocusItem", itemMsg);
|
|
|
+ bus.$emit("FocusItemChanged", itemMsg);
|
|
|
},
|
|
|
// 监听场景元素数据变化
|
|
|
scenceUpdate(scence) {
|
|
|
- bus.$emit('elementDataChange', scence)
|
|
|
+ bus.$emit("elementDataChange", scence);
|
|
|
},
|
|
|
clearGraphy() {
|
|
|
if (this.view) {
|
|
|
- this.view.scene = null
|
|
|
- return
|
|
|
+ this.view.scene = null;
|
|
|
+ return;
|
|
|
}
|
|
|
- this.view = new FloorView('canvas')
|
|
|
- document.getElementById('canvas').focus()
|
|
|
+ this.view = new FloorView("canvas");
|
|
|
+ document.getElementById("canvas").focus();
|
|
|
},
|
|
|
getBus() {
|
|
|
+ // 添加设备
|
|
|
+ bus.$on("addEquip", () => {
|
|
|
+ // console.log("addEquip");
|
|
|
+ console.log('get bus addEquip')
|
|
|
+ console.log(event);
|
|
|
+ this.scene.addEquipment(event);
|
|
|
+ });
|
|
|
// TODO: 修改底图
|
|
|
- bus.$on('changeImgUrl', val => {
|
|
|
- window.vm = this
|
|
|
- let url = '/serve/topology-wanda/Picture/query/' + val
|
|
|
- this.scene.setBackgroundImgItem(url)
|
|
|
- this.view.fitSceneToView()
|
|
|
- })
|
|
|
- bus.$on('changeText', val => {
|
|
|
- this.scene.updatedText(val)
|
|
|
- })
|
|
|
- bus.$on('changeFont', val => {
|
|
|
- this.scene.updatedFontSize(val)
|
|
|
- })
|
|
|
- bus.$on('changeLineWidth', val => {
|
|
|
- this.scene.updatedLineWidth(val)
|
|
|
- })
|
|
|
- bus.$on('changeBorderColor', val => {
|
|
|
- this.scene.updatedBorderColor(val)
|
|
|
- })
|
|
|
- bus.$on('changeFontColor', val => {
|
|
|
- this.scene.updatedFontColor(val)
|
|
|
- })
|
|
|
- bus.$on('itemWidth', val => {
|
|
|
- this.scene.updatedWidth(Number(val))
|
|
|
- })
|
|
|
- bus.$on('itemHeight', val => {
|
|
|
- this.scene.updatedHeight(Number(val))
|
|
|
- })
|
|
|
- bus.$on('itemPositon', (x, y) => {
|
|
|
- this.scene.updatedPosition(Number(x), Number(y))
|
|
|
- })
|
|
|
- bus.$on('changebackColor', val => {
|
|
|
- this.scene.updatedbackColor(val)
|
|
|
- })
|
|
|
- bus.$on('deleiteItem', () => {
|
|
|
- this.scene.deleiteItem()
|
|
|
- })
|
|
|
- bus.$on('changeAlignItem', val => {
|
|
|
- this.scene.changeAlignItem(val)
|
|
|
- })
|
|
|
- bus.$on('extractItem', () => {
|
|
|
- const map = {}
|
|
|
- console.log(this.hasTypeList)
|
|
|
+ bus.$on("changeImgUrl", val => {
|
|
|
+ window.vm = this;
|
|
|
+ let url = "/serve/topology-wanda/Picture/query/" + val;
|
|
|
+ this.scene.setBackgroundImgItem(url);
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ });
|
|
|
+ bus.$on("changeText", val => {
|
|
|
+ this.scene.updatedText(val);
|
|
|
+ });
|
|
|
+ bus.$on("changeFont", val => {
|
|
|
+ this.scene.updatedFontSize(val);
|
|
|
+ });
|
|
|
+ bus.$on("changeLineWidth", val => {
|
|
|
+ this.scene.updatedLineWidth(val);
|
|
|
+ });
|
|
|
+ bus.$on("changeBorderColor", val => {
|
|
|
+ this.scene.updatedBorderColor(val);
|
|
|
+ });
|
|
|
+ bus.$on("changeFontColor", val => {
|
|
|
+ this.scene.updatedFontColor(val);
|
|
|
+ });
|
|
|
+ bus.$on("itemWidth", val => {
|
|
|
+ this.scene.updatedWidth(Number(val));
|
|
|
+ });
|
|
|
+ bus.$on("itemHeight", val => {
|
|
|
+ this.scene.updatedHeight(Number(val));
|
|
|
+ });
|
|
|
+ bus.$on("itemPositon", (x, y) => {
|
|
|
+ this.scene.updatedPosition(Number(x), Number(y));
|
|
|
+ });
|
|
|
+ bus.$on("changebackColor", val => {
|
|
|
+ this.scene.updatedbackColor(val);
|
|
|
+ });
|
|
|
+ bus.$on("deleiteItem", () => {
|
|
|
+ this.scene.deleiteItem();
|
|
|
+ });
|
|
|
+ bus.$on("changeAlignItem", val => {
|
|
|
+ this.scene.changeAlignItem(val);
|
|
|
+ });
|
|
|
+ bus.$on("extractItem", () => {
|
|
|
+ const map = {};
|
|
|
+ console.log(this.hasTypeList);
|
|
|
this.fParser.spaceList.forEach(t => {
|
|
|
if (this.hasTypeList.indexOf(t.data.Type) > -1) {
|
|
|
if (map[t.data.Type]) {
|
|
|
- map[t.data.Type]++
|
|
|
+ map[t.data.Type]++;
|
|
|
} else {
|
|
|
- map[t.data.Type] = 1
|
|
|
+ map[t.data.Type] = 1;
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
- const data = []
|
|
|
+ });
|
|
|
+ const data = [];
|
|
|
for (const key in map) {
|
|
|
data.push({
|
|
|
key: key,
|
|
|
name: key,
|
|
|
- age: '',
|
|
|
+ age: "",
|
|
|
number: map[key],
|
|
|
- address: '提取'
|
|
|
- })
|
|
|
+ address: "提取"
|
|
|
+ });
|
|
|
}
|
|
|
- bus.$emit('exportItem', data)
|
|
|
- })
|
|
|
- bus.$on('saveMsgItem', () => {
|
|
|
- const Elements = this.scene.saveMsgItem()
|
|
|
+ bus.$emit("exportItem", data);
|
|
|
+ });
|
|
|
+ bus.$on("saveMsgItem", () => {
|
|
|
+ const Elements = this.scene.saveMsgItem();
|
|
|
const data = {
|
|
|
Elements,
|
|
|
Name: this.appName, // 名称
|
|
@@ -306,133 +313,133 @@ export default {
|
|
|
ProjectID: this.urlMsg.projectId, // 项目ID
|
|
|
BuildingID: this.urlMsg.BuildingID, // 建筑ID
|
|
|
FloorID: this.urlMsg.FloorID // 楼层id
|
|
|
- }
|
|
|
+ };
|
|
|
Message({
|
|
|
- message: '上传中,切勿关闭窗口!',
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
+ message: "上传中,切勿关闭窗口!",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
saveGroup(data)
|
|
|
.then(res => {
|
|
|
- Message.close()
|
|
|
- this.graphId = res.Data
|
|
|
+ Message.close();
|
|
|
+ this.graphId = res.Data;
|
|
|
})
|
|
|
- .catch(err => {})
|
|
|
- })
|
|
|
- bus.$on('exportByKey', val => {
|
|
|
+ .catch(err => {});
|
|
|
+ });
|
|
|
+ bus.$on("exportByKey", val => {
|
|
|
const list = this.fParser.spaceList
|
|
|
.map(t => {
|
|
|
if (t.data.Type == val.key) {
|
|
|
if (!t.isExtracted) {
|
|
|
- t.isExtracted = true
|
|
|
+ t.isExtracted = true;
|
|
|
return {
|
|
|
ID: uuid(),
|
|
|
Name: val.name,
|
|
|
GraphElementType: val.properties.Type,
|
|
|
- GraphElementId: '273d633cc5c54a4882794b34843d1a00',
|
|
|
+ GraphElementId: "273d633cc5c54a4882794b34843d1a00",
|
|
|
AttachObjectIds: [],
|
|
|
Pos: { x: t.x, y: t.y },
|
|
|
OutLine: t.pointArr[0],
|
|
|
- SubType: '',
|
|
|
+ SubType: "",
|
|
|
Properties: {
|
|
|
- StrokeColor: '#3d73c0',
|
|
|
- FillColor: '#72f5f980',
|
|
|
+ StrokeColor: "#3d73c0",
|
|
|
+ FillColor: "#72f5f980",
|
|
|
font: 0,
|
|
|
- color: '',
|
|
|
+ color: "",
|
|
|
TextPos: { X: 0, Y: 0 }
|
|
|
},
|
|
|
Num: 1
|
|
|
- }
|
|
|
+ };
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
- .filter(item => item)
|
|
|
- const parserData = new STopologyParser(null)
|
|
|
- parserData.parseData({ Nodes: list })
|
|
|
+ .filter(item => item);
|
|
|
+ const parserData = new STopologyParser(null);
|
|
|
+ parserData.parseData({ Nodes: list });
|
|
|
parserData.zoneLegendList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- this.scene.Nodes.push(t)
|
|
|
- })
|
|
|
- })
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Nodes.push(t);
|
|
|
+ });
|
|
|
+ });
|
|
|
// 设备图例样式对象
|
|
|
- bus.$on('setLenged', obj => {
|
|
|
- this.scene.setlegend = obj
|
|
|
- })
|
|
|
+ bus.$on("setLenged", obj => {
|
|
|
+ this.scene.setlegend = obj;
|
|
|
+ });
|
|
|
// 修改图片url
|
|
|
- bus.$on('upadataImageUrl', val => {
|
|
|
- console.log(val)
|
|
|
- this.scene.upadataImageUrl(val)
|
|
|
- })
|
|
|
+ bus.$on("upadataImageUrl", val => {
|
|
|
+ console.log(val);
|
|
|
+ this.scene.upadataImageUrl(val);
|
|
|
+ });
|
|
|
// 改变边框样式
|
|
|
- bus.$on('changeBorder', val => {
|
|
|
- this.scene.upadataBorder(val)
|
|
|
- })
|
|
|
+ bus.$on("changeBorder", val => {
|
|
|
+ this.scene.upadataBorder(val);
|
|
|
+ });
|
|
|
// 改变图例名称
|
|
|
- bus.$on('changeLengedName', val => {
|
|
|
- this.scene.upadataLengedName(val)
|
|
|
- })
|
|
|
+ bus.$on("changeLengedName", val => {
|
|
|
+ this.scene.upadataLengedName(val);
|
|
|
+ });
|
|
|
// 改变图例名称
|
|
|
- bus.$on('changeImageNum', val => {
|
|
|
- this.scene.upadatImageNum(val)
|
|
|
- })
|
|
|
+ bus.$on("changeImageNum", val => {
|
|
|
+ this.scene.upadatImageNum(val);
|
|
|
+ });
|
|
|
// 修改填充色
|
|
|
- bus.$on('changefillColor', val => {
|
|
|
- this.scene.upadatfillColor(val)
|
|
|
- })
|
|
|
+ bus.$on("changefillColor", val => {
|
|
|
+ this.scene.upadatfillColor(val);
|
|
|
+ });
|
|
|
// 修改当前得状态是否为编辑状态
|
|
|
- bus.$on('OpenEditStatus', () => {
|
|
|
- ;` ` // 获取焦点item (必须选中且仅选中一个)
|
|
|
+ bus.$on("OpenEditStatus", () => {
|
|
|
+ ` `; // 获取焦点item (必须选中且仅选中一个)
|
|
|
if (this.chiceItemList && this.chiceItemList.length && this.chiceItemList.length == 1) {
|
|
|
if (this.scene.grabItem) {
|
|
|
- this.view.tryDbclick()
|
|
|
+ this.view.tryDbclick();
|
|
|
} else {
|
|
|
- this.scene.grabItem = this.chiceItemList[0]
|
|
|
- this.view.tryDbclick()
|
|
|
+ this.scene.grabItem = this.chiceItemList[0];
|
|
|
+ this.view.tryDbclick();
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
//修改图例说明
|
|
|
- bus.$on('changeitemExplain', val => {
|
|
|
- this.scene.upadatitemExplain(val)
|
|
|
- })
|
|
|
+ bus.$on("changeitemExplain", val => {
|
|
|
+ this.scene.upadatitemExplain(val);
|
|
|
+ });
|
|
|
//发布图
|
|
|
- bus.$on('publishGraph', val => {
|
|
|
- publishGraph({ graphId: this.graphId, pubUser: '' }).then(res => {
|
|
|
- if (res.Result == 'success') {
|
|
|
- this.$message.success(res.Message)
|
|
|
+ bus.$on("publishGraph", val => {
|
|
|
+ publishGraph({ graphId: this.graphId, pubUser: "" }).then(res => {
|
|
|
+ if (res.Result == "success") {
|
|
|
+ this.$message.success(res.Message);
|
|
|
} else {
|
|
|
- this.$message.error(res.Message)
|
|
|
+ this.$message.error(res.Message);
|
|
|
}
|
|
|
- })
|
|
|
- })
|
|
|
+ });
|
|
|
+ });
|
|
|
//创建区域是否点选
|
|
|
- bus.$on('changeDrawType', val => {
|
|
|
- this.scene.isSelecting = val == 'select'
|
|
|
+ bus.$on("changeDrawType", val => {
|
|
|
+ this.scene.isSelecting = val == "select";
|
|
|
}),
|
|
|
//发布图
|
|
|
- bus.$on('publishMap', () => {
|
|
|
- if (this.graphId == '') {
|
|
|
- this.$message.error('请先保存')
|
|
|
- return false
|
|
|
+ bus.$on("publishMap", () => {
|
|
|
+ if (this.graphId == "") {
|
|
|
+ this.$message.error("请先保存");
|
|
|
+ return false;
|
|
|
}
|
|
|
- this.publishBtn()
|
|
|
- })
|
|
|
+ this.publishBtn();
|
|
|
+ });
|
|
|
/**
|
|
|
* @name changeScale缩放底图
|
|
|
* @param { Number } zoom 缩放比例
|
|
|
*
|
|
|
*/
|
|
|
// TODO: changeScale缩放底图
|
|
|
- bus.$on('changeScale', zoom => {
|
|
|
- const { scale } = this.view
|
|
|
- this.changeScaleByClick = true
|
|
|
- this.view.scaleByPoint(zoom, this.canvasWidth / 2, this.canvasHeight / 2)
|
|
|
- this.changeScaleByClick = false
|
|
|
- setTimeout(() => {}, 100)
|
|
|
- })
|
|
|
+ bus.$on("changeScale", zoom => {
|
|
|
+ const { scale } = this.view;
|
|
|
+ this.changeScaleByClick = true;
|
|
|
+ this.view.scaleByPoint(zoom, this.canvasWidth / 2, this.canvasHeight / 2);
|
|
|
+ this.changeScaleByClick = false;
|
|
|
+ setTimeout(() => {}, 100);
|
|
|
+ });
|
|
|
// 更改图例数据工程化数据
|
|
|
- bus.$on('changeAttachObjectIds', arr => {
|
|
|
- this.scene.upadatAttachObjectIds(arr)
|
|
|
- })
|
|
|
+ bus.$on("changeAttachObjectIds", arr => {
|
|
|
+ this.scene.upadatAttachObjectIds(arr);
|
|
|
+ });
|
|
|
},
|
|
|
// 读取数据
|
|
|
readGroup() {
|
|
@@ -441,98 +448,98 @@ export default {
|
|
|
projectId: this.urlMsg.projectId,
|
|
|
BuildingID: this.urlMsg.BuildingID, // 建筑ID
|
|
|
FloorID: this.urlMsg.FloorID // 楼层id
|
|
|
- }
|
|
|
- return readGroup(data)
|
|
|
+ };
|
|
|
+ return readGroup(data);
|
|
|
},
|
|
|
//发布
|
|
|
publishBtn() {
|
|
|
- console.log(this.graphId)
|
|
|
+ console.log(this.graphId);
|
|
|
const loadings = Loading.service({
|
|
|
lock: true,
|
|
|
- text: 'Loading',
|
|
|
- spinner: 'el-icon-loading',
|
|
|
- background: 'rgba(0, 0, 0, 0.7)'
|
|
|
- })
|
|
|
+ text: "Loading",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)"
|
|
|
+ });
|
|
|
const data = {
|
|
|
BuildingID: this.urlMsg.BuildingID,
|
|
|
CategoryID: this.urlMsg.categoryId,
|
|
|
FloorID: this.urlMsg.FloorID,
|
|
|
GraphId: this.graphId,
|
|
|
ProjectID: this.urlMsg.projectId,
|
|
|
- PubUser: ''
|
|
|
- }
|
|
|
+ PubUser: ""
|
|
|
+ };
|
|
|
publishGraph(data).then(res => {
|
|
|
- loadings.close()
|
|
|
- if (res.Result == 'success') {
|
|
|
- this.$message.success('发布成功')
|
|
|
+ loadings.close();
|
|
|
+ if (res.Result == "success") {
|
|
|
+ this.$message.success("发布成功");
|
|
|
setTimeout(() => {
|
|
|
- const data = `categoryId=${this.urlMsg.categoryId}&projectId=${this.urlMsg.projectId}&BuildingID=${this.urlMsg.BuildingID}&FloorID=${this.urlMsg.FloorID}&fmapID=${this.urlMsg.fmapID}`
|
|
|
- const url = window.location.origin + '/wandaEditer/drafts?' + encodeURIComponent(data)
|
|
|
- window.open(url, true)
|
|
|
- }, 1000)
|
|
|
+ const data = `categoryId=${this.urlMsg.categoryId}&projectId=${this.urlMsg.projectId}&BuildingID=${this.urlMsg.BuildingID}&FloorID=${this.urlMsg.FloorID}&fmapID=${this.urlMsg.fmapID}`;
|
|
|
+ const url = window.location.origin + "/wandaEditer/drafts?" + encodeURIComponent(data);
|
|
|
+ window.open(url, true);
|
|
|
+ }, 1000);
|
|
|
} else {
|
|
|
- this.$message.error(res.Message)
|
|
|
+ this.$message.error(res.Message);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 获取typeid
|
|
|
getTypeId() {
|
|
|
const data = {
|
|
|
categoryId: this.urlMsg.categoryId
|
|
|
- }
|
|
|
+ };
|
|
|
queryTypeGraph(data).then(res => {
|
|
|
- this.hasTypeList = res.Data.map(t => Number(t))
|
|
|
- })
|
|
|
+ this.hasTypeList = res.Data.map(t => Number(t));
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
cmdType: {
|
|
|
handler(cmd) {
|
|
|
- if (cmd == null || cmd == '') {
|
|
|
- cmd = 'choice'
|
|
|
+ if (cmd == null || cmd == "") {
|
|
|
+ cmd = "choice";
|
|
|
}
|
|
|
- this.scene.setCmd = cmd
|
|
|
+ this.scene.setCmd = cmd;
|
|
|
},
|
|
|
deep: true
|
|
|
},
|
|
|
- 'scene.cmd': {
|
|
|
+ "scene.cmd": {
|
|
|
handler(cmd) {
|
|
|
- this.$emit('setCmdType', cmd)
|
|
|
+ this.$emit("setCmdType", cmd);
|
|
|
},
|
|
|
deep: true
|
|
|
},
|
|
|
// 监听scale的变化
|
|
|
- 'view.scale': {
|
|
|
+ "view.scale": {
|
|
|
handler(scale) {
|
|
|
// 滚轮触发的缩放
|
|
|
if (!this.changeScaleByClick) {
|
|
|
- bus.$emit('mouseScale', scale / this.initScale)
|
|
|
+ bus.$emit("mouseScale", scale / this.initScale);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- const href = window.location.href
|
|
|
+ const href = window.location.href;
|
|
|
// 路由
|
|
|
// const route = href.split("?")[0];
|
|
|
// 参数处理
|
|
|
- let params = href.split('?')[1]
|
|
|
+ let params = href.split("?")[1];
|
|
|
if (!params) {
|
|
|
// 参数有问题
|
|
|
- return false
|
|
|
+ return false;
|
|
|
}
|
|
|
- params = decodeURIComponent(params)
|
|
|
+ params = decodeURIComponent(params);
|
|
|
// params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
|
|
|
- const paramsArr = params.split('&')
|
|
|
- console.log('paramsArr', paramsArr)
|
|
|
- const obj = {}
|
|
|
+ const paramsArr = params.split("&");
|
|
|
+ console.log("paramsArr", paramsArr);
|
|
|
+ const obj = {};
|
|
|
paramsArr.map(item => {
|
|
|
- const arr = item.split('=')
|
|
|
- obj[arr[0]] = arr[1]
|
|
|
- })
|
|
|
- this.urlMsg = obj
|
|
|
+ const arr = item.split("=");
|
|
|
+ obj[arr[0]] = arr[1];
|
|
|
+ });
|
|
|
+ this.urlMsg = obj;
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
#baseEditer {
|