|
@@ -17,15 +17,31 @@
|
|
|
<div class="concent-bottom">
|
|
|
<div class="map">
|
|
|
<div class="legend-btn" @click="legend = !legend">
|
|
|
- <a-icon type="right" style="color: #8D9399;font-size: 10px"/>
|
|
|
+ <a-icon type="right" style="color: #8D9399;font-size: 10px" />
|
|
|
+ </div>
|
|
|
+ <div class="canvas-container">
|
|
|
+ <div id="fengMap"></div>
|
|
|
+ <canvas
|
|
|
+ id="canvas"
|
|
|
+ :width="canvasWidth"
|
|
|
+ :height="canvasHeight"
|
|
|
+ ref="canvas"
|
|
|
+ tabindex="0"
|
|
|
+ ></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="legend" v-if="legend">
|
|
|
- <div style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px">可能需要补充的图例</div>
|
|
|
+ <div
|
|
|
+ style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px"
|
|
|
+ >可能需要补充的图例</div>
|
|
|
<a-table :columns="columns" :data-source="data" size="middle" :pagination="false">
|
|
|
- <img style="width:10px;heigth:10px" slot="img" slot-scope="text, record" :src="require('@/assets/images/'+record.img+'.png')" />
|
|
|
- <template v-slot:state>
|
|
|
- </template>
|
|
|
+ <img
|
|
|
+ style="width:10px;heigth:10px"
|
|
|
+ slot="img"
|
|
|
+ slot-scope="text, record"
|
|
|
+ :src="require('@/assets/images/'+record.img+'.png')"
|
|
|
+ />
|
|
|
+ <template v-slot:state></template>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -85,48 +101,159 @@ const dataArr = [
|
|
|
{ id: "3221", name: "二级1", checked: "uncheck" }
|
|
|
]
|
|
|
}
|
|
|
- ],
|
|
|
+ ]
|
|
|
}
|
|
|
];
|
|
|
import Tree from "./../components/Tree/Tree.vue";
|
|
|
+import { SFengParser } from "@saga-web/feng-map";
|
|
|
+import { SFloorParser } from "@saga-web/big";
|
|
|
+import { FloorView } from "./../lib/FloorView";
|
|
|
+import { EditScence } from "@/components/mapClass/EditScence";
|
|
|
+import bus from "@/bus";
|
|
|
+import { saveGroup, readGroup } from "@/api/editer.js";
|
|
|
+import { STopologyParser } from "./../lib/parsers/STopologyParser";
|
|
|
+import { uuid } from "@/components/mapClass/until";
|
|
|
+import { SImageItem } from "@saga-web/graph/lib";
|
|
|
+import store from "../store";
|
|
|
+let fengmap = null;
|
|
|
export default {
|
|
|
components: { Tree },
|
|
|
data() {
|
|
|
return {
|
|
|
- treeData:JSON.parse(JSON.stringify(dataArr)),
|
|
|
- columns:[
|
|
|
+ treeData: JSON.parse(JSON.stringify(dataArr)),
|
|
|
+ columns: [
|
|
|
{
|
|
|
title: "名称", // 列的名称
|
|
|
dataIndex: "name", // 列的标识
|
|
|
- scopedSlots: { customRender: 'name' }
|
|
|
- },{
|
|
|
+ scopedSlots: { customRender: "name" }
|
|
|
+ },
|
|
|
+ {
|
|
|
title: "图例", // 列的名称
|
|
|
dataIndex: "img", // 列的标识
|
|
|
- scopedSlots: { customRender: 'img' }
|
|
|
- },
|
|
|
+ scopedSlots: { customRender: "img" }
|
|
|
+ }
|
|
|
],
|
|
|
data: [
|
|
|
{
|
|
|
key: "1",
|
|
|
name: "客梯",
|
|
|
- img:'shubiao'
|
|
|
+ img: "shubiao"
|
|
|
},
|
|
|
{
|
|
|
key: "2",
|
|
|
name: "防火分区",
|
|
|
- img:'shubiao'
|
|
|
+ img: "shubiao"
|
|
|
},
|
|
|
{
|
|
|
key: "3",
|
|
|
name: "消防泵室",
|
|
|
- img:'shubiao'
|
|
|
- },
|
|
|
+ img: "shubiao"
|
|
|
+ }
|
|
|
],
|
|
|
- legend:false
|
|
|
+ legend: false,
|
|
|
+ canvasWidth: 700,
|
|
|
+ canvasHeight: 800,
|
|
|
+ view: null,
|
|
|
+ urlMsg: null,
|
|
|
+ floorList: {},
|
|
|
+ mapServerURL: "/wdfn",
|
|
|
+ key: "23f30a832a862c58637a4aadbf50a566",
|
|
|
+ appName: "万达可视化系统"
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- change() {}
|
|
|
+ change() {},
|
|
|
+ init() {
|
|
|
+ console.log(this.urlMsg);
|
|
|
+ // const loadings = this.$loading({type: 'global'});
|
|
|
+ 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
|
|
|
+ );
|
|
|
+ console.log(this.urlMsg.fmapID);
|
|
|
+ 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.view.fitSceneToView();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearGraphy() {
|
|
|
+ if (this.view) {
|
|
|
+ this.view.scene = null;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.view = new FloorView("canvas");
|
|
|
+ document.getElementById("canvas").focus();
|
|
|
+ },
|
|
|
+ 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.fParser.spaceList.forEach(t => {
|
|
|
+ t.selectable = true;
|
|
|
+ this.scene.addItem(t);
|
|
|
+ });
|
|
|
+ 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");
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log("楼层不正确");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
|
+ // this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
|
|
|
+ this.urlMsg = {
|
|
|
+ categoryId: "SCPZ",
|
|
|
+ projectId: "1000423",
|
|
|
+ BuildingID: "1",
|
|
|
+ FloorID: "f1",
|
|
|
+ fmapID: "1000423_120"
|
|
|
+ };
|
|
|
+ this.init();
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
@@ -181,7 +308,7 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
- .concent-bottom{
|
|
|
+ .concent-bottom {
|
|
|
height: calc(100% - 61px);
|
|
|
display: flex;
|
|
|
.map {
|
|
@@ -189,27 +316,36 @@ export default {
|
|
|
position: relative;
|
|
|
/*height: calc(100% - 61px);*/
|
|
|
/*background: red;*/
|
|
|
- .legend-btn{
|
|
|
+ .legend-btn {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
- top:9px;
|
|
|
- width:10px;
|
|
|
- height:24px;
|
|
|
- background:rgba(228,229,231,1);
|
|
|
+ top: 9px;
|
|
|
+ width: 10px;
|
|
|
+ height: 24px;
|
|
|
+ background: rgba(228, 229, 231, 1);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
- .legend{
|
|
|
+ .legend {
|
|
|
width: 200px;
|
|
|
- border-left: 1px solid #EFF0F1;
|
|
|
- height:100%;
|
|
|
+ border-left: 1px solid #eff0f1;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+#fengMap {
|
|
|
+ position: absolute;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+.canvas-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
</style>
|