123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871 |
- <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>
- </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";
- // import { SEquipParser } from "../../../sagacloud-web/saga-web-big/src";
- import { SEquipmentParser } from "../lib/parsers/SEquipmentParser";
- import { saveJSON } from "../utils/util";
- import { SEquipmentItem } from "@/lib/items/SEquipmentItem"; // 设备类
- let fengmap = null;
- //// 底图空间增加字段 isExtracted:boolean true 已被提取过
- export default {
- props: {
- cmdType: {
- type: String,
- default: "choice",
- required: false
- },
- changeTextMsg: {
- type: String,
- default: "",
- required: false
- }
- },
- data() {
- return {
- appName: "万达可视化系统",
- key: "23f30a832a862c58637a4aadbf50a566",
- mapServerURL: "http://map.wanda.cn/editor",
- canvasWidth: 700,
- canvasHeight: 800,
- fParser: null,
- scene: null,
- view: null,
- floorList: {},
- urlMsg: {},
- chiceItemList: [], //选中itemlist
- hasTypeList: [], // 当前类型下包含的typeid(提取)
- graphId: "",
- initScale: 1, //加载好底图之后的,初始缩放比例
- changeScaleByClick: false //区分 滚轮,点击 事件改变的缩放比例
- };
- },
- mounted() {
- 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;
- },
- methods: {
- init() {
- document.getElementById(`canvas`).focus();
- this.clearGraphy();
- this.scene = new EditScence();
- this.view.scene = this.scene;
- // this.initLoad();
- this.view.fitSceneToView();
- this.scene.emitChange = this.emitChange; //监听
- this.scene.scenceUpdate = this.scenceUpdate;
- },
- /**
- * 使用模拟数据,加载绘制后的数据到视图
- */
- initLoad() {
- let data = require("./mock.json");
- const parserData = new STopologyParser(null);
- parserData.parseData(data.Elements);
- let Markers = data.Elements.Markers;
- let Nodes = data.Elements.Nodes;
- const itemMap = {};
- // 使用 SEquipmentParser 解析器增加设备
- let parserData1 = new SEquipmentParser(null);
- let Equipmnet = Nodes.filter(node => node.GraphElementType === "Equipmnet");
- parserData1.parseData(Equipmnet);
- parserData1.equipmentItem.map(item => {
- item.selectable = true;
- item.connect("equipImgLoadOver", this, () => {
- this.view.fitSceneToView();
- });
- this.scene.addItem(item);
- // this.scene.equipmentItem.push(item);
- this.scene.Nodes.push(item);
- console.log(item);
- itemMap[item.id] = item;
- });
- // 使用STopologyParser 解析器 增加直线
- parserData.lineMarkerList.map(t => {
- this.scene.addItem(t);
- this.scene.Markers.push(t);
- // 设置关联Item;
- if (t.data.Properties && t.data.Properties.StartItemId) {
- const startItem = itemMap[t.data.Properties.StartItemId];
- startItem?.connect("onMove", t, t.changePos);
- t.startItem = startItem || null;
- }
- if (t.data.Properties && t.data.Properties.EndItemId) {
- const endItem = itemMap[t.data.Properties.EndItemId];
- endItem?.connect("onMove", t, t.changePos);
- t.endItem = endItem || null;
- }
- });
- // 增加管线类(需在图标类图例添加后添加)
- parserData.relationList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Relations.push(t);
- // 设置锚点
- if (t.anchor1ID) {
- const startAnc = itemMap[t.anchor1ID];
- startAnc.isConnected = true;
- startAnc.parent?.connect("changePos", t, t.changePos);
- t.startAnchor = startAnc || null;
- }
- if (t.anchor2ID) {
- const endAnc = itemMap[t.anchor2ID];
- endAnc.isConnected = true;
- endAnc.parent?.connect("changePos", t, t.changePos);
- t.endAnchor = endAnc || null;
- }
- });
- bus.$emit("elementDataChange", this.scene);
- },
- /**
- * 本地上传万抽后,读取json进行处理
- * @param data json数据
- */
- loadJSON(data) {
- console.log(JSON.stringify(data,null,2))
- const parserData = new STopologyParser(null);
- parserData.parseData(data.Elements);
- let Markers = data.Elements.Markers;
- let Nodes = data.Elements.Nodes;
- const itemMap = {};
- // 使用 SEquipmentParser 解析器增加设备
- let parserData1 = new SEquipmentParser(null);
- let Equipmnet = Nodes.filter(node => node.GraphElementType === "Equipment");
- parserData1.parseData(Equipmnet);
- parserData1.equipmentItem.map(item => {
- item.selectable = true;
- item.connect("equipImgLoadOver", this, () => {
- this.view.fitSceneToView();
- });
- this.scene.addItem(item);
- // this.scene.equipmentItem.push(item);
- this.scene.Nodes.push(item);
- console.log(item);
- itemMap[item.id] = item;
- });
- // 使用STopologyParser 解析器 增加直线,管线桥线
- // 多边形(此item需在直线item添加之前添加)
- parserData.zoneLegendList.forEach(t => {
- this.scene.addItem(t);
- // 记录提取
- if (t.data.Properties && t.data.Properties.FID) {
- this.scene.fidToItem[t.data.Properties.FID].isExtracted = true;
- }
- this.scene.Nodes.push(t);
- itemMap[t.id] = t;
- });
- // 增加文字(此item需在直线item添加之前添加)
- parserData.textMarkerList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Markers.push(t);
- itemMap[t.id] = t;
- });
- // 增加图片(此item需在直线item添加之前添加)
- parserData.imageMarkerList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Markers.push(t);
- itemMap[t.id] = t;
- });
- // 增加图标类图例(此item需在管线item添加之前添加)
- parserData.imageLegendList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Nodes.push(t);
- if (t.anchorList && t.anchorList.length) {
- t.anchorList.forEach(anc => {
- itemMap[anc.id] = anc;
- });
- }
- });
- // 增加直线
- parserData.lineMarkerList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Markers.push(t);
- // 设置关联Item
- if (t.data.Properties && t.data.Properties.StartItemId) {
- const startItem = itemMap[t.data.Properties.StartItemId];
- startItem?.connect("onMove", t, t.changePos);
- t.startItem = startItem || null;
- }
- if (t.data.Properties && t.data.Properties.EndItemId) {
- const endItem = itemMap[t.data.Properties.EndItemId];
- endItem?.connect("onMove", t, t.changePos);
- t.endItem = endItem || null;
- }
- });
- // 增加管线类(需在图标类图例添加后添加)
- parserData.relationList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Relations.push(t);
- // 设置锚点
- if (t.anchor1ID) {
- const startAnc = itemMap[t.anchor1ID];
- startAnc.isConnected = true;
- startAnc.parent?.connect("changePos", t, t.changePos);
- t.startAnchor = startAnc || null;
- }
- if (t.anchor2ID) {
- const endAnc = itemMap[t.anchor2ID];
- endAnc.isConnected = true;
- endAnc.parent?.connect("changePos", t, t.changePos);
- t.endAnchor = endAnc || null;
- }
- });
- this.view.fitSceneToView();
- bus.$emit("elementDataChange", this.scene);
- },
- // 不适用平面图逻辑(调用蜂鸟接口,加载底图)
- 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;
- fengmap.loadMap(this.urlMsg.fmapID, 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();
- });
- // 获取typeid
- this.getTypeId();
- this.scene.emitChange = this.emitChange;
- this.scene.scenceUpdate = this.scenceUpdate;
- },
- parserData(floor) {
- 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;
- }
- } else {
- if (this.floorList[floor]) {
- fengmap.parseData(this.floorList[floor], res => {
- if (res.err) {
- console.log(res.err);
- return;
- }
- 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");
- // 设置初始化缩放比例
- this.initScale = this.view.scale;
- bus.$emit("initScale", this.view.scale);
- });
- } else {
- console.log("楼层不正确");
- }
- }
- },
- // 读取绘制数据
- // 读取绘制数据
- readGraph() {
- this.readGroup().then(data => {
- this.graphId = data.Data[0].ID;
- bus.$emit("setGraphId", this.graphId);
- if (data.Data) {
- const parserData = new STopologyParser(null);
- const itemMap = {};
- parserData.parseData(data.Data[0].Elements);
- // 多边形(此item需在直线item添加之前添加)
- parserData.zoneLegendList.forEach(t => {
- this.scene.addItem(t);
- // 记录提取
- if (t.data.Properties && t.data.Properties.FID) {
- this.scene.fidToItem[t.data.Properties.FID].isExtracted = true;
- }
- this.scene.Nodes.push(t);
- itemMap[t.id] = t;
- });
- // 增加文字(此item需在直线item添加之前添加)
- parserData.textMarkerList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Markers.push(t);
- itemMap[t.id] = t;
- });
- // 增加图片(此item需在直线item添加之前添加)
- parserData.imageMarkerList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Markers.push(t);
- itemMap[t.id] = t;
- });
- // 增加图标类图例(此item需在管线item添加之前添加)
- parserData.imageLegendList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Nodes.push(t);
- if (t.anchorList && t.anchorList.length) {
- t.anchorList.forEach(anc => {
- itemMap[anc.id] = anc;
- });
- }
- });
- // 增加直线
- parserData.lineMarkerList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Markers.push(t);
- // 设置关联Item
- if (t.data.Properties && t.data.Properties.StartItemId) {
- const startItem = itemMap[t.data.Properties.StartItemId];
- startItem?.connect("onMove", t, t.changePos);
- t.startItem = startItem || null;
- }
- if (t.data.Properties && t.data.Properties.EndItemId) {
- const endItem = itemMap[t.data.Properties.EndItemId];
- endItem?.connect("onMove", t, t.changePos);
- t.endItem = endItem || null;
- }
- });
- // 增加管线类(需在图标类图例添加后添加)
- parserData.relationList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Relations.push(t);
- // 设置锚点
- if (t.anchor1ID) {
- const startAnc = itemMap[t.anchor1ID];
- startAnc.isConnected = true;
- startAnc.parent?.connect("changePos", t, t.changePos);
- t.startAnchor = startAnc || null;
- }
- if (t.anchor2ID) {
- const endAnc = itemMap[t.anchor2ID];
- endAnc.isConnected = true;
- endAnc.parent?.connect("changePos", t, t.changePos);
- t.endAnchor = endAnc || null;
- }
- });
- this.view.fitSceneToView();
- bus.$emit("elementDataChange", this.scene);
- }
- });
- },
- // 监听变化
- emitChange(itemMsg) {
- console.log("itemMsg", itemMsg);
- this.chiceItemList = itemMsg.itemList;
- this.$emit("changeFocusItem", itemMsg);
- bus.$emit("FocusItemChanged", itemMsg);
- },
- // 监听场景元素数据变化
- scenceUpdate(scence) {
- bus.$emit("elementDataChange", scence);
- },
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return;
- }
- this.view = new FloorView("canvas");
- document.getElementById("canvas").focus();
- },
- getBus() {
- // 取消所有监听,防止触发多次监听
- bus.$off()
- // 添加设备
- bus.$on("addEquip", () => {
- // console.log("addEquip");
- const parserData = new SEquipmentParser(null);
- //
- let imgKey = window.__systemConf.imgKey;
- let Nodes = [
- {
- ID: "123123", // ID
- Name: "1#冷冻泵", // 名称
- AttachObjectIds: ["Eq001", "Eq002"], // 返回工程信息化对象 ID 列表
- GraphElementType: "Equipmnet",
- Pos: { X: 170, Y: 188 }, // 位置
- Size: { Width: 80, Height: 80 }, // 大小
- InfoList: [
- {
- Code: "", // 对应设备的信息点
- Name: "温度", //信息点名称
- X: 30,
- Y: 20,
- Width: 100,
- Height: 25,
- FontSize: 12,
- Background: "#ffffff",
- TextAlign: "",
- Color: "#000000"
- },
- {
- Code: "", // 对应设备的信息点
- Name: "湿度", //信息点名称
- X: 40,
- Y: 28,
- Width: 100,
- Height: 25,
- FontSize: 12,
- Background: "#ffffff",
- TextAlign: "",
- Color: "#000000"
- }
- ],
- Properties: {
- StatusImage: [
- {
- Status: "Running", // 运行
- ImageKey: imgKey[0]
- },
- {
- Status: "Stop", // 停止
- ImageKey: "270abb1b84d5416fa059b68d1f51ac33"
- },
- {
- Status: "Selected", // 选择
- ImageKey: "ece9f93ffc754035bcec2e8f27d66a59"
- },
- {
- Status: "Warning", // 报警
- ImageKey: ""
- }
- ]
- } // 由应用自己定义
- },
- {
- ID: "34535345", // ID
- Name: "2#冷冻泵", // 名称
- AttachObjectIds: ["Eq001", "Eq002"], // 返回工程信息化对象 ID 列表
- GraphElementType: "Equipmnet",
- Pos: { X: 177, Y: 288 },
- Size: { Width: 80, Height: 80 }, // 大小
- InfoList: [
- {
- Code: "", // 对应设备的信息点
- Name: "温度", //信息点名称
- X: 50,
- Y: 50,
- Width: 100,
- Height: 25,
- FontSize: 12,
- Background: "#000000",
- TextAlign: "",
- Color: "#FFFFFF"
- }
- ],
- Properties: {
- StatusImage: [
- {
- Status: "Running", // 运行
- ImageKey: imgKey[1]
- }
- ]
- } // 由应用自己定义
- }
- ];
- parserData.parseData(Nodes);
- parserData.equipmentItem.map(item => {
- item.selectable = true;
- this.scene.addItem(item);
- // this.scene.equipmentItem.push(item);
- this.scene.Nodes.push(item);
- });
- window.vm = this;
- // this.scene.addEquipment(event);
- });
- // 添加本地json文件
- bus.$on("loadJSON", json => {
- console.log("on loadJSON");
- this.loadJSON(json);
- });
- // TODO: 修改底图
- bus.$on("changeImgUrl", val => {
- window.vm = this;
- let url = "/serve/topology-wanda/Picture/query/" + val;
- console.log(url);
- this.scene.setBackgroundImgItem(url);
- // 通过监听 scene.bgImg来适配到页面上
- // 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]++;
- } else {
- map[t.data.Type] = 1;
- }
- }
- });
- const data = [];
- for (const key in map) {
- data.push({
- key: key,
- name: key,
- age: "",
- number: map[key],
- address: "提取"
- });
- }
- bus.$emit("exportItem", data);
- });
- bus.$on("saveMsgItem", () => {
- const Elements = this.scene.saveMsgItem();
- const data = {
- Elements,
- Name: this.appName, // 名称
- categoryId: this.urlMsg.categoryId,
- ProjectID: this.urlMsg.projectId, // 项目ID
- BuildingID: this.urlMsg.BuildingID, // 建筑ID
- FloorID: this.urlMsg.FloorID // 楼层id
- };
- /* Message({
- message: "上传中,切勿关闭窗口!",
- type: "warning"
- }); */
- console.log("%c========", "color:blue");
- console.log(data);
- // 保存json文件到本地
- let jsonData = JSON.stringify(data, null, 2);
- let name = `${new Date().getTime()}.json`;
- saveJSON(jsonData, name);
- return true;
- saveGroup(data)
- .then(res => {
- Message.close();
- this.graphId = res.Data;
- })
- .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;
- return {
- ID: uuid(),
- Name: val.name,
- GraphElementType: val.properties.Type,
- GraphElementId: "273d633cc5c54a4882794b34843d1a00",
- AttachObjectIds: [],
- Pos: { x: t.x, y: t.y },
- OutLine: t.pointArr[0],
- SubType: "",
- Properties: {
- StrokeColor: "#3d73c0",
- FillColor: "#72f5f980",
- font: 0,
- color: "",
- TextPos: { X: 0, Y: 0 }
- },
- Num: 1
- };
- }
- }
- })
- .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);
- });
- });
- // 设备图例样式对象
- bus.$on("setLenged", obj => {
- this.scene.setlegend = obj;
- });
- // 修改图片url
- bus.$on("upadataImageUrl", val => {
- console.log(val);
- this.scene.upadataImageUrl(val);
- });
- // 改变边框样式
- bus.$on("changeBorder", val => {
- this.scene.upadataBorder(val);
- });
- // 改变图例名称
- bus.$on("changeLengedName", val => {
- this.scene.upadataLengedName(val);
- });
- // 更改设备名称
- bus.$on("changeEquipmentName", val => {
- this.scene.updateEquipmentName(val);
- });
- // 更改设备信息点名称
- bus.$on("changeInfoName", val => {
- this.scene.updateEquipmentInfoName(val);
- });
- // 添加信息点
- bus.$on('addEquipmentInfo',()=>{
- console.log('baseEditer addEquipmentInfo')
- this.scene.addEquipmentInfo();
- })
- // 改变图例名称
- bus.$on("changeImageNum", val => {
- this.scene.upadatImageNum(val);
- });
- // 修改填充色
- bus.$on("changefillColor", val => {
- this.scene.upadatfillColor(val);
- });
- // 修改当前得状态是否为编辑状态
- bus.$on("OpenEditStatus", () => {
- ` `; // 获取焦点item (必须选中且仅选中一个)
- if (this.chiceItemList && this.chiceItemList.length && this.chiceItemList.length == 1) {
- if (this.scene.grabItem) {
- this.view.tryDbclick();
- } else {
- this.scene.grabItem = this.chiceItemList[0];
- this.view.tryDbclick();
- }
- }
- });
- //修改图例说明
- 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);
- } else {
- this.$message.error(res.Message);
- }
- });
- });
- //创建区域是否点选
- bus.$on("changeDrawType", val => {
- this.scene.isSelecting = val == "select";
- }),
- //发布图
- bus.$on("publishMap", () => {
- if (this.graphId == "") {
- this.$message.error("请先保存");
- return false;
- }
- 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("changeAttachObjectIds", arr => {
- this.scene.upadatAttachObjectIds(arr);
- });
- },
- // 读取数据
- readGroup() {
- const data = {
- categoryId: this.urlMsg.categoryId,
- projectId: this.urlMsg.projectId,
- BuildingID: this.urlMsg.BuildingID, // 建筑ID
- FloorID: this.urlMsg.FloorID // 楼层id
- };
- return readGroup(data);
- },
- //发布
- publishBtn() {
- console.log(this.graphId);
- const loadings = Loading.service({
- lock: true,
- 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: ""
- };
- publishGraph(data).then(res => {
- 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);
- } else {
- 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));
- });
- }
- },
- watch: {
- cmdType: {
- handler(cmd) {
- if (cmd == null || cmd == "") {
- cmd = "choice";
- }
- this.scene.setCmd = cmd;
- },
- deep: true
- },
- "scene.cmd": {
- handler(cmd) {
- this.$emit("setCmdType", cmd);
- },
- deep: true
- },
- // 背景图加载完成后,屏幕适配
- "scene.bgImg": {
- handler(v) {
- this.view.fitSceneToView();
- }
- },
- // 监听scale的变化
- "view.scale": {
- handler(scale) {
- // 滚轮触发的缩放
- if (!this.changeScaleByClick) {
- bus.$emit("mouseScale", scale / this.initScale);
- }
- }
- }
- },
- created() {
- const href = window.location.href;
- // 路由
- // const route = href.split("?")[0];
- // 参数处理
- let params = href.split("?")[1];
- if (!params) {
- // 参数有问题
- return false;
- }
- params = decodeURIComponent(params);
- // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
- 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;
- }
- };
- </script>
- <style lang="less" scoped>
- #baseEditer {
- background: #f7f9fa;
- width: 100%;
- height: 100%;
- // overflow: hidden;
- // position: relative;
- #fengMap {
- position: absolute;
- width: 100px;
- height: 100px;
- z-index: -1;
- }
- .canvas-container {
- width: 100%;
- height: 100%;
- }
- }
- </style>
|