|
@@ -17,10 +17,7 @@
|
|
|
</div>
|
|
|
<div class="concent-bottom">
|
|
|
<div class="map">
|
|
|
- <div class="legend-btn" @click="legend = !legend">
|
|
|
- <a-icon type="right" style="color: #8D9399;font-size: 10px" />
|
|
|
- </div>
|
|
|
- <div class="canvas-container">
|
|
|
+ <div class="canvas-container" ref="draftsCanvas">
|
|
|
<div id="fengMap"></div>
|
|
|
<canvas
|
|
|
id="canvas"
|
|
@@ -31,6 +28,12 @@
|
|
|
></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div v-show="!legend" class="legend-btn" @click="legend = !legend">
|
|
|
+ <a-icon type="right" style="color: #8D9399;font-size: 10px" />
|
|
|
+ </div>
|
|
|
+ <div v-show="legend" class="legend-btn legend-btn-close" @click="legend = !legend">
|
|
|
+ <a-icon type="right" style="color: #8D9399;font-size: 10px" />
|
|
|
+ </div>
|
|
|
<div class="legend" v-if="legend">
|
|
|
<div
|
|
|
style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px"
|
|
@@ -112,38 +115,38 @@ export default {
|
|
|
key: "23f30a832a862c58637a4aadbf50a566",
|
|
|
appName: "万达可视化系统",
|
|
|
defaultProps: {
|
|
|
- children: 'Category',
|
|
|
- label: 'Gcode'
|
|
|
+ children: "Category",
|
|
|
+ label: "Gcode"
|
|
|
},
|
|
|
- graphId:'',
|
|
|
+ graphId: "",
|
|
|
+ projectId: "", //项目id
|
|
|
+ fmapID: "" //蜂鸟地图id
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
handleNodeClick(data) {
|
|
|
console.log(data);
|
|
|
- this.graphId = '124aeab6fbb346cd92057525a30aee18';
|
|
|
+ this.graphId = "124aeab6fbb346cd92057525a30aee18";
|
|
|
this.getLegend();
|
|
|
},
|
|
|
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.mapServerURL + "/fmap/" + this.fmapID,
|
|
|
this.key,
|
|
|
this.appName,
|
|
|
null
|
|
|
);
|
|
|
- console.log(this.urlMsg.fmapID);
|
|
|
- const floorid = this.urlMsg.FloorID;
|
|
|
- fengmap.loadMap(this.urlMsg.fmapID, resp => {
|
|
|
+ const floorid = "f1";
|
|
|
+ fengmap.loadMap(this.fmapID, resp => {
|
|
|
this.floorList = resp;
|
|
|
fengmap
|
|
|
.loadTheme(
|
|
|
- `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${this.urlMsg.fmapID}.theme`
|
|
|
+ `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
|
|
|
)
|
|
|
.then(response => {
|
|
|
console.log("获取rf成功", response);
|
|
@@ -166,7 +169,7 @@ export default {
|
|
|
if (fengmap.frImg) {
|
|
|
const imgItem = new SImageItem(
|
|
|
null,
|
|
|
- `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${fengmap.frImg}`
|
|
|
+ `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`
|
|
|
);
|
|
|
this.scene.addItem(imgItem);
|
|
|
this.view.scene = this.scene;
|
|
@@ -206,28 +209,26 @@ export default {
|
|
|
getTreeData() {
|
|
|
queryDraftGroup({ projectId: this.projectId }).then(res => {
|
|
|
console.log(res);
|
|
|
- if(res.Result =='success'){
|
|
|
+ if (res.Result == "success") {
|
|
|
this.treeData = res.Data;
|
|
|
- }else{
|
|
|
- this.treeData=[];
|
|
|
- this.$message.err('获取楼层结构失败');
|
|
|
+ } else {
|
|
|
+ this.treeData = [];
|
|
|
+ this.$message.err("获取楼层结构失败");
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- getLegend(){
|
|
|
+ getLegend() {
|
|
|
const data = {
|
|
|
- projectId:'1000423',
|
|
|
- flag:true,
|
|
|
- graphId:this.graphId,
|
|
|
- }
|
|
|
- queryStatistic(data).then(res=>{
|
|
|
-
|
|
|
- })
|
|
|
+ projectId: this.projectId,
|
|
|
+ flag: true,
|
|
|
+ graphId: this.graphId
|
|
|
+ };
|
|
|
+ queryStatistic(data).then(res => {});
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- // // this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
|
- // // this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
|
|
|
+ this.canvasWidth = this.$refs.draftsCanvas.offsetWidth - 10;
|
|
|
+ this.canvasHeight = this.$refs.draftsCanvas.offsetHeight - 10;
|
|
|
|
|
|
const href = window.location.href;
|
|
|
let params = href.split("?")[1];
|
|
@@ -242,9 +243,9 @@ export default {
|
|
|
const arr = item.split("=");
|
|
|
obj[arr[0]] = arr[1];
|
|
|
});
|
|
|
- console.log('obj',obj)
|
|
|
- this.projectId = obj.projectId ?obj.projectId : '1000423';
|
|
|
- this.fmapID = obj.fmapID
|
|
|
+ console.log("obj", obj);
|
|
|
+ this.projectId = obj.projectId ? obj.projectId : "1000423";
|
|
|
+ this.fmapID = obj.fmapID ? obj.fmapID : "1000423_120";
|
|
|
this.init();
|
|
|
this.getTreeData();
|
|
|
}
|
|
@@ -315,30 +316,37 @@ export default {
|
|
|
.concent-bottom {
|
|
|
height: calc(100% - 61px);
|
|
|
display: flex;
|
|
|
+ position: relative;
|
|
|
.map {
|
|
|
flex: 1;
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
/*height: calc(100% - 61px);*/
|
|
|
/*background: red;*/
|
|
|
- .legend-btn {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 9px;
|
|
|
- width: 10px;
|
|
|
- height: 24px;
|
|
|
- background: rgba(228, 229, 231, 1);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
}
|
|
|
.legend {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
width: 200px;
|
|
|
border-left: 1px solid #eff0f1;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+ .legend-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: 9px;
|
|
|
+ width: 10px;
|
|
|
+ height: 24px;
|
|
|
+ background: rgba(228, 229, 231, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .legend-btn-close {
|
|
|
+ right: 200px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|