|
@@ -21,29 +21,38 @@
|
|
|
<div class="canvas-container" ref="draftsCanvas">
|
|
|
<div id="fengMap"></div>
|
|
|
<canvas
|
|
|
- id="canvas"
|
|
|
- :width="canvasWidth"
|
|
|
- :height="canvasHeight"
|
|
|
- ref="canvas"
|
|
|
- tabindex="0"
|
|
|
+ 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">
|
|
|
+ <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"
|
|
|
+ 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
|
|
|
+ <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>
|
|
@@ -55,7 +64,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-spin>
|
|
|
-
|
|
|
</template>
|
|
|
<script>
|
|
|
import Tree from "./../components/Tree/Tree.vue";
|
|
@@ -65,7 +73,6 @@ import { FloorView } from "./../lib/FloorView";
|
|
|
import { EditScence } from "@/components/mapClass/EditScence";
|
|
|
import bus from "@/bus";
|
|
|
import {
|
|
|
- saveGroup,
|
|
|
readGroup,
|
|
|
queryDraftGroup,
|
|
|
queryStatistic,
|
|
@@ -110,23 +117,27 @@ export default {
|
|
|
},
|
|
|
projectId: "", //项目id
|
|
|
fmapID: "", //蜂鸟地图id
|
|
|
- graphId:'124aeab6fbb346cd92057525a30aee18',
|
|
|
- legendLoading:false,
|
|
|
- spinning:false,//全局加载
|
|
|
- systemName:'',
|
|
|
- floorName:''
|
|
|
+ graphId: "", //绘制生成得图id
|
|
|
+ legendLoading: false,
|
|
|
+ spinning: false, //全局加载
|
|
|
+ systemName: "",
|
|
|
+ floorName: "",
|
|
|
+ BuildingID: "1", // 建筑id
|
|
|
+ categoryId: "" //系统类id
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- handleNodeClick(data,node) {
|
|
|
- console.log(data,1111111,node);
|
|
|
+ handleNodeClick(data, node) {
|
|
|
this.legendData = [];
|
|
|
- this.systemName='';
|
|
|
- this.floorName='';
|
|
|
- if(data.Gname){
|
|
|
+ this.systemName = "";
|
|
|
+ this.floorName = "";
|
|
|
+ if (data.Gname) {
|
|
|
this.systemName = node.parent.data.Gcode;
|
|
|
this.floorName = data.Gcode;
|
|
|
+ console.log(node.parent.data.Id)
|
|
|
+ this.categoryId = node.parent.data.Id;
|
|
|
this.getLegend();
|
|
|
+ this.checkFloor(data.Gname);
|
|
|
}
|
|
|
},
|
|
|
init() {
|
|
@@ -141,19 +152,6 @@ export default {
|
|
|
this.appName,
|
|
|
null
|
|
|
);
|
|
|
- const floorid = "f1";
|
|
|
- fengmap.loadMap(this.fmapID, resp => {
|
|
|
- this.floorList = resp;
|
|
|
- fengmap
|
|
|
- .loadTheme(
|
|
|
- `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
|
|
|
- )
|
|
|
- .then(response => {
|
|
|
- console.log("获取rf成功", response);
|
|
|
- this.parserData(floorid);
|
|
|
- });
|
|
|
- this.view.fitSceneToView();
|
|
|
- });
|
|
|
},
|
|
|
clearGraphy() {
|
|
|
if (this.view) {
|
|
@@ -206,67 +204,76 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- getTreeData(){
|
|
|
- queryDraftGroup({projectId:this.projectId}).then(res=>{
|
|
|
+ getTreeData() {
|
|
|
+ queryDraftGroup({ projectId: this.projectId }).then(res => {
|
|
|
console.log(res);
|
|
|
if (res.Result == "success") {
|
|
|
this.treeData = res.Data;
|
|
|
- }else{
|
|
|
- this.treeData=[];
|
|
|
- this.$message.error('获取楼层结构失败');
|
|
|
+ } else {
|
|
|
+ this.treeData = [];
|
|
|
+ this.$message.error("获取楼层结构失败");
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//获取补充图例
|
|
|
- getLegend(){
|
|
|
+ getLegend() {
|
|
|
this.legendLoading = true;
|
|
|
this.legendData = [];
|
|
|
queryStatistic({
|
|
|
- projectId:this.projectId,
|
|
|
- flag:true,
|
|
|
- graphId:this.graphId,
|
|
|
- }).then(res=>{
|
|
|
+ projectId: this.projectId,
|
|
|
+ flag: true,
|
|
|
+ graphId: this.graphId
|
|
|
+ }).then(res => {
|
|
|
console.log(res);
|
|
|
this.legendLoading = false;
|
|
|
- if(res.data.Result =='success'){
|
|
|
+ if (res.data.Result == "success") {
|
|
|
const data = res.data.Data;
|
|
|
- data.map(item=>{
|
|
|
- if(item.RealNum ==0){
|
|
|
+ data.map(item => {
|
|
|
+ if (item.RealNum == 0) {
|
|
|
this.legendData.push(item);
|
|
|
}
|
|
|
- })
|
|
|
- }else{
|
|
|
- this.legendData=[];
|
|
|
- this.$message.error('获取楼层结构补充图例失败');
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.legendData = [];
|
|
|
+ this.$message.error("获取楼层结构补充图例失败");
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
//删除
|
|
|
- deleteBtn(){
|
|
|
+ deleteBtn() {
|
|
|
this.spinning = true;
|
|
|
- deleteGraph([{Id:[this.graphId]}]).then(res =>{
|
|
|
+ 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)
|
|
|
-
|
|
|
+ if (res.Result == "success") {
|
|
|
+ this.$message.success(res.Message);
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.Message);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
//发布
|
|
|
- publishBtn(){
|
|
|
+ publishBtn() {
|
|
|
this.spinning = true;
|
|
|
- publishGraph({graphId :this.graphId ,pubUser:''}).then(res=>{
|
|
|
+ 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)
|
|
|
-
|
|
|
+ if (res.Result == "success") {
|
|
|
+ this.$message.success(res.Message);
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.Message);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 读取数据
|
|
|
+ readGroup(floorid) {
|
|
|
+ const data = {
|
|
|
+ categoryId: this.categoryId,
|
|
|
+ projectId: this.projectId,
|
|
|
+ BuildingID: this.BuildingID, // 建筑ID
|
|
|
+ FloorID: floorid, // 楼层id
|
|
|
+ Pub:false //是否获取草稿 //获取草稿
|
|
|
+ };
|
|
|
+ return readGroup(data);
|
|
|
},
|
|
|
/**
|
|
|
* @name goToEditer
|
|
@@ -274,16 +281,70 @@ export default {
|
|
|
*/
|
|
|
goToEditer() {
|
|
|
console.log(this.$cookie);
|
|
|
- let FloorID = this.$cookie.get('floorMapId') || 'f1'
|
|
|
- let categoryId = this.$cookie.get('categoryId')
|
|
|
+ const FloorID = this.$cookie.get("floorMapId") || "f1";
|
|
|
+ const 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)
|
|
|
+ { editerUrl } = conf;
|
|
|
+ const data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&fmapID=${this.fmapID}`;
|
|
|
+ const url = editerUrl + "editer?" + encodeURIComponent(data);
|
|
|
+ window.open(url, true);
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+ // 切换草稿箱楼层
|
|
|
+ checkFloor(floorid) {
|
|
|
+ fengmap.loadMap(this.fmapID, resp => {
|
|
|
+ this.floorList = resp;
|
|
|
+ fengmap
|
|
|
+ .loadTheme(
|
|
|
+ `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
|
|
|
+ )
|
|
|
+ .then(response => {
|
|
|
+ console.log("获取rf成功", response);
|
|
|
+ this.parserData(floorid);
|
|
|
+ });
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ // 获取
|
|
|
+ // 获取主题数据
|
|
|
+ this.readGroup(floorid).then(data => {
|
|
|
+ this.graphId = data.Data[0].ID;
|
|
|
+ if (data.Data) {
|
|
|
+ const parserData = new STopologyParser(null);
|
|
|
+ parserData.parseData(data.Data[0].Elements);
|
|
|
+ // 多边形
|
|
|
+ parserData.zoneLegendList.forEach(t => {
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Nodes.push(t);
|
|
|
+ });
|
|
|
+ // 增加文字
|
|
|
+ parserData.textMarkerList.forEach(t => {
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Markers.push(t);
|
|
|
+ });
|
|
|
+ // 增加图片
|
|
|
+ parserData.imageMarkerList.forEach(t => {
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Markers.push(t);
|
|
|
+ });
|
|
|
+ // 增加直线
|
|
|
+ parserData.lineMarkerList.forEach(t => {
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Markers.push(t);
|
|
|
+ });
|
|
|
+ // 增加图标类图例
|
|
|
+ parserData.imageLegendList.forEach(t => {
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Nodes.push(t);
|
|
|
+ });
|
|
|
+ // 增加管线类
|
|
|
+ // 增加图标类图例
|
|
|
+ parserData.relationList.forEach(t => {
|
|
|
+ this.scene.addItem(t);
|
|
|
+ this.scene.Relations.push(t);
|
|
|
+ });
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
this.canvasWidth = this.$refs.draftsCanvas.offsetWidth - 10;
|