|
@@ -1,54 +1,61 @@
|
|
|
<template>
|
|
|
- <div id="drafts">
|
|
|
- <div class="tit">草稿箱</div>
|
|
|
- <div class="conent">
|
|
|
- <div class="left-nav">
|
|
|
- <!-- <Tree :data="treeData" @change="change"></Tree>-->
|
|
|
- <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
|
|
- </div>
|
|
|
- <div class="conent-right">
|
|
|
- <div class="conent-tit">
|
|
|
- <div class="tit-left">消防系统-4F</div>
|
|
|
- <div class="tit-right">
|
|
|
- <a-button>删除</a-button>
|
|
|
- <a-button>发布</a-button>
|
|
|
- <a-button type="primary">编辑</a-button>
|
|
|
- </div>
|
|
|
+ <a-spin :spinning="spinning">
|
|
|
+ <div id="drafts">
|
|
|
+ <div class="tit">草稿箱</div>
|
|
|
+ <div class="conent">
|
|
|
+ <div class="left-nav">
|
|
|
+ <!-- <Tree :data="treeData" @change="change"></Tree>-->
|
|
|
+ <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
|
|
</div>
|
|
|
- <div class="concent-bottom">
|
|
|
- <div class="map">
|
|
|
- <div class="legend-btn" @click="legend = !legend">
|
|
|
+ <div class="conent-right">
|
|
|
+ <div class="conent-tit">
|
|
|
+ <div class="tit-left" v-if="floorName">{{systemName}}-{{floorName}}</div>
|
|
|
+ <div class="tit-right">
|
|
|
+ <a-button @click="deleteBtn">删除</a-button>
|
|
|
+ <a-button @click="publishBtn">发布</a-button>
|
|
|
+ <a-button type="primary" @click="goToEditer">编辑</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="concent-bottom">
|
|
|
+ <div class="map">
|
|
|
+ <div class="canvas-container" ref="draftsCanvas">
|
|
|
+ <div id="fengMap"></div>
|
|
|
+ <canvas
|
|
|
+ id="canvas"
|
|
|
+ :width="canvasWidth"
|
|
|
+ :height="canvasHeight"
|
|
|
+ ref="canvas"
|
|
|
+ tabindex="0"
|
|
|
+ ></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="canvas-container">
|
|
|
- <div id="fengMap"></div>
|
|
|
- <canvas
|
|
|
- id="canvas"
|
|
|
- :width="canvasWidth"
|
|
|
- :height="canvasHeight"
|
|
|
- ref="canvas"
|
|
|
- tabindex="0"
|
|
|
- ></canvas>
|
|
|
+ <div class="legend" v-if="legend">
|
|
|
+ <div
|
|
|
+ style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px"
|
|
|
+ >可能需要补充的图例</div>
|
|
|
+ <a-table v-loading='legendLoading' :columns="columns" :rowKey="(record,index)=>{return index}" :data-source="legendData" size="middle" :pagination="false">
|
|
|
+ <div slot="Url" slot-scope='text,record'>
|
|
|
+ <img v-if="record.Url" style=" width: 20px;height: 22px;"
|
|
|
+ :src="'/serve/topology-wanda/Picture/query/'+ record.Url"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ <span v-else>---</span>
|
|
|
+ </div>
|
|
|
+ <span></span>
|
|
|
+ </a-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="legend" v-if="legend">
|
|
|
- <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>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </a-spin>
|
|
|
+
|
|
|
</template>
|
|
|
<script>
|
|
|
import Tree from "./../components/Tree/Tree.vue";
|
|
@@ -61,7 +68,9 @@ import {
|
|
|
saveGroup,
|
|
|
readGroup,
|
|
|
queryDraftGroup,
|
|
|
- queryStatistic
|
|
|
+ queryStatistic,
|
|
|
+ deleteGraph,
|
|
|
+ publishGraph
|
|
|
} from "@/api/editer.js";
|
|
|
import { STopologyParser } from "./../lib/parsers/STopologyParser";
|
|
|
import { uuid } from "@/components/mapClass/until";
|
|
@@ -76,33 +85,17 @@ export default {
|
|
|
columns: [
|
|
|
{
|
|
|
title: "名称", // 列的名称
|
|
|
- dataIndex: "name", // 列的标识
|
|
|
- scopedSlots: { customRender: "name" }
|
|
|
+ dataIndex: "Name", // 列的标识
|
|
|
+ scopedSlots: { customRender: "Name" }
|
|
|
},
|
|
|
{
|
|
|
title: "图例", // 列的名称
|
|
|
- dataIndex: "img", // 列的标识
|
|
|
- scopedSlots: { customRender: "img" }
|
|
|
+ dataIndex: "Url", // 列的标识
|
|
|
+ scopedSlots: { customRender: "Url" }
|
|
|
}
|
|
|
],
|
|
|
- data: [
|
|
|
- {
|
|
|
- key: "1",
|
|
|
- name: "客梯",
|
|
|
- img: "shubiao"
|
|
|
- },
|
|
|
- {
|
|
|
- key: "2",
|
|
|
- name: "防火分区",
|
|
|
- img: "shubiao"
|
|
|
- },
|
|
|
- {
|
|
|
- key: "3",
|
|
|
- name: "消防泵室",
|
|
|
- img: "shubiao"
|
|
|
- }
|
|
|
- ],
|
|
|
- legend: false,
|
|
|
+ legendData: [],
|
|
|
+ legend: true,
|
|
|
canvasWidth: 700,
|
|
|
canvasHeight: 600,
|
|
|
view: null,
|
|
@@ -112,38 +105,48 @@ export default {
|
|
|
key: "23f30a832a862c58637a4aadbf50a566",
|
|
|
appName: "万达可视化系统",
|
|
|
defaultProps: {
|
|
|
- children: 'Category',
|
|
|
- label: 'Gcode'
|
|
|
+ children: "Category",
|
|
|
+ label: "Gcode"
|
|
|
},
|
|
|
- graphId:'',
|
|
|
+ projectId: "", //项目id
|
|
|
+ fmapID: "", //蜂鸟地图id
|
|
|
+ graphId:'124aeab6fbb346cd92057525a30aee18',
|
|
|
+ legendLoading:false,
|
|
|
+ spinning:false,//全局加载
|
|
|
+ systemName:'',
|
|
|
+ floorName:''
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- handleNodeClick(data) {
|
|
|
- console.log(data);
|
|
|
- this.graphId = '124aeab6fbb346cd92057525a30aee18';
|
|
|
- this.getLegend();
|
|
|
+ handleNodeClick(data,node) {
|
|
|
+ console.log(data,1111111,node);
|
|
|
+ this.legendData = [];
|
|
|
+ this.systemName='';
|
|
|
+ this.floorName='';
|
|
|
+ if(data.Gname){
|
|
|
+ this.systemName = node.parent.data.Gcode;
|
|
|
+ this.floorName = data.Gcode;
|
|
|
+ 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;
|
|
@@ -203,31 +206,88 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- getTreeData() {
|
|
|
- queryDraftGroup({ projectId: this.projectId }).then(res => {
|
|
|
+ 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('获取楼层结构失败');
|
|
|
+ this.$message.error('获取楼层结构失败');
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
+ //获取补充图例
|
|
|
getLegend(){
|
|
|
- const data = {
|
|
|
- projectId:'1000423',
|
|
|
+ this.legendLoading = true;
|
|
|
+ this.legendData = [];
|
|
|
+ queryStatistic({
|
|
|
+ projectId:this.projectId,
|
|
|
flag:true,
|
|
|
graphId:this.graphId,
|
|
|
- }
|
|
|
- queryStatistic(data).then(res=>{
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res);
|
|
|
+ this.legendLoading = false;
|
|
|
+ if(res.data.Result =='success'){
|
|
|
+ const data = res.data.Data;
|
|
|
+ data.map(item=>{
|
|
|
+ if(item.RealNum ==0){
|
|
|
+ this.legendData.push(item);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.legendData=[];
|
|
|
+ this.$message.error('获取楼层结构补充图例失败');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //删除
|
|
|
+ deleteBtn(){
|
|
|
+ this.spinning = true;
|
|
|
+ deleteGraph([{Id:[this.graphId]}]).then(res =>{
|
|
|
+ console.log(res);
|
|
|
+ this.spinning = false;
|
|
|
+ if(res.Result =='success'){
|
|
|
+ this.$message.success(res.Message)
|
|
|
+ }else{
|
|
|
+ this.$message.error(res.Message)
|
|
|
|
|
|
+ }
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
+ //发布
|
|
|
+ publishBtn(){
|
|
|
+ this.spinning = true;
|
|
|
+ publishGraph({graphId :this.graphId ,pubUser:''}).then(res=>{
|
|
|
+ this.spinning = false;
|
|
|
+ if(res.Result =='success'){
|
|
|
+ this.$message.success(res.Message)
|
|
|
+ }else{
|
|
|
+ this.$message.error(res.Message)
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @name goToEditer
|
|
|
+ * @description t跳转editer编辑器
|
|
|
+ */
|
|
|
+ goToEditer() {
|
|
|
+ console.log(this.$cookie);
|
|
|
+ let FloorID = this.$cookie.get('floorMapId') || 'f1'
|
|
|
+ let categoryId = this.$cookie.get('categoryId')
|
|
|
+ const { conf } = window.__systemConf,
|
|
|
+ { editerUrl } = conf
|
|
|
+ let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&fmapID=${this.fmapID}`
|
|
|
+ let url = editerUrl + 'editer?' + encodeURIComponent(data)
|
|
|
+ window.open(url, true)
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
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,8 +302,9 @@ export default {
|
|
|
const arr = item.split("=");
|
|
|
obj[arr[0]] = arr[1];
|
|
|
});
|
|
|
- console.log('obj',obj)
|
|
|
- this.projectId = obj.projectId ?obj.projectId : '1000423';
|
|
|
+ console.log("obj", obj);
|
|
|
+ this.projectId = obj.projectId ? obj.projectId : "1000423";
|
|
|
+ this.fmapID = obj.fmapID ? obj.fmapID : "1000423_120";
|
|
|
this.init();
|
|
|
this.getTreeData();
|
|
|
}
|
|
@@ -309,34 +370,43 @@ export default {
|
|
|
width: 246px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ margin-left: auto;
|
|
|
}
|
|
|
}
|
|
|
.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%;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
}
|
|
|
}
|
|
|
}
|