|
@@ -77,35 +77,34 @@
|
|
|
@close="onClose"
|
|
|
:getContainer="false"
|
|
|
>
|
|
|
- <div class="drawer-model-body" v-show="activeItem ==1 || activeItem ==2">
|
|
|
+ <div class="drawer-model-body">
|
|
|
<div class="btn-list">
|
|
|
<a-button-group>
|
|
|
<a-button type="primary">绘制</a-button>
|
|
|
<a-button>点选</a-button>
|
|
|
</a-button-group>
|
|
|
</div>
|
|
|
- <div class="list" v-show="activeItem ==1">
|
|
|
- <div class="title">消防系统</div>
|
|
|
+ <div class="list" v-for="(item,index) in itemList" :key="index">
|
|
|
+ <div class="title">{{item.Name}}</div>
|
|
|
<ul class="example">
|
|
|
- <li @click="getexampleItem">
|
|
|
- <div class="item"></div>
|
|
|
- <div class="text">防火风区</div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="list" v-show="activeItem ==2">
|
|
|
- <div class="title">消防系统</div>
|
|
|
- <ul class="example">
|
|
|
- <li @click="getexampleItem">
|
|
|
- <div class="item-pip"></div>
|
|
|
- <div class="text">防火风区</div>
|
|
|
+ <li
|
|
|
+ @click="getexampleItem"
|
|
|
+ v-for="(items,indexs) in item.GraphElements"
|
|
|
+ :key="indexs"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="item"
|
|
|
+ src="http://192.168.200.87:8088/topology-wanda/Picture/query/5a011ab5b9fe465cbe35bbdb3fce6c86"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ <div class="text">{{items.Name}}</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="drawer-model-body drawer-model-body-extract" v-show="activeItem ==3">
|
|
|
+ <!-- <div class="drawer-model-body drawer-model-body-extract" v-show="activeItem ==3">
|
|
|
<a-table :columns="columns" :data-source="data" size="small" :pagination="false" />
|
|
|
- </div>
|
|
|
+ </div>-->
|
|
|
</a-drawer>
|
|
|
</div>
|
|
|
</transition>
|
|
@@ -113,8 +112,9 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import itemTree from "./leftbar_components/itemTree";
|
|
|
-import {queryByGroup} from "@/api/editer.js"
|
|
|
import bus from "@/bus";
|
|
|
+import { queryGroup } from "@/api/editer.js";
|
|
|
+import { mapState, mapActions } from "vuex";
|
|
|
const columns = [
|
|
|
{
|
|
|
title: "名称",
|
|
@@ -203,25 +203,27 @@ export default {
|
|
|
hoverImg: "t-position-hover.png", //hoverlogo
|
|
|
isHover: false, //是否hover
|
|
|
isChoice: false,
|
|
|
- name: "位置区域" //类型
|
|
|
+ name: "位置区域", //类型
|
|
|
+ type: "Zone"
|
|
|
},
|
|
|
{
|
|
|
img: "t-equipment.png", //logo
|
|
|
hoverImg: "t-equipment-hover.png", //hoverlogo
|
|
|
isHover: false, //是否hover
|
|
|
isChoice: false,
|
|
|
- name: "设备设施" //类型
|
|
|
+ name: "设备设施", //类型
|
|
|
+ type: "Image"
|
|
|
},
|
|
|
{
|
|
|
img: "t-papeline.png", //logo
|
|
|
hoverImg: "t-papeline-hover.png", //hoverlogo
|
|
|
isHover: false, //是否hover
|
|
|
isChoice: false,
|
|
|
- name: "管线桥架" //类型
|
|
|
+ name: "管线桥架", //类型
|
|
|
+ type: "Line"
|
|
|
}
|
|
|
],
|
|
|
visible: false,
|
|
|
- activeItem: 1,
|
|
|
//提取
|
|
|
extractChoice: [
|
|
|
{
|
|
@@ -232,9 +234,15 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
data,
|
|
|
- columns
|
|
|
+ columns,
|
|
|
+ itemList: [] //图例数组
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ GraphCategoryIds: "GraphCategoryIds"
|
|
|
+ })
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 触入
|
|
|
mouseoverActive(item) {
|
|
@@ -268,21 +276,20 @@ export default {
|
|
|
if (this.visible) {
|
|
|
this.visible = false;
|
|
|
setTimeout(() => {
|
|
|
- if (item.name == "管线桥架") {
|
|
|
- this.activeItem = 2;
|
|
|
- } else {
|
|
|
- this.activeItem = 1;
|
|
|
- }
|
|
|
this.visible = true;
|
|
|
}, 300);
|
|
|
} else {
|
|
|
- if (item.name == "管线桥架") {
|
|
|
- this.activeItem = 2;
|
|
|
- } else {
|
|
|
- this.activeItem = 1;
|
|
|
- }
|
|
|
this.visible = true;
|
|
|
}
|
|
|
+ // 打开侧边框
|
|
|
+ // 接口请求
|
|
|
+ const arr = {
|
|
|
+ GraphCategoryIds: ["NTXT"],
|
|
|
+ Type: item.type
|
|
|
+ };
|
|
|
+ queryGroup(arr).then(res => {
|
|
|
+ this.itemList = res.Data;
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
onClose() {
|
|
@@ -293,24 +300,18 @@ export default {
|
|
|
},
|
|
|
getexampleItem() {
|
|
|
this.visible = false;
|
|
|
- let item = 5;
|
|
|
- if (this.activeItem == 1) {
|
|
|
- item = 4;
|
|
|
- } else {
|
|
|
- item = 5;
|
|
|
- }
|
|
|
+ const item = 4
|
|
|
this.$emit("toolActionClick", item);
|
|
|
},
|
|
|
// 提取元素
|
|
|
extractItem() {
|
|
|
this.visible = !this.visible;
|
|
|
- this.activeItem = 3;
|
|
|
- bus.$emit("extractItem")
|
|
|
+ bus.$emit("extractItem");
|
|
|
},
|
|
|
- getBus(){
|
|
|
+ getBus() {
|
|
|
bus.$on("exportItem", data => {
|
|
|
this.data = data;
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -326,9 +327,10 @@ export default {
|
|
|
mounted() {
|
|
|
const ele = document.getElementById("drawer-model");
|
|
|
ele.style.width = document.body.offsetWidth - 70 + "px";
|
|
|
-
|
|
|
this.getBus();
|
|
|
- }
|
|
|
+ console.log(this.GraphCategoryIds);
|
|
|
+ },
|
|
|
+ created() {}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
@@ -488,10 +490,8 @@ export default {
|
|
|
background: #e1f2ff;
|
|
|
}
|
|
|
.item {
|
|
|
- width: 28px;
|
|
|
- height: 16px;
|
|
|
- background: #bbdfff;
|
|
|
- border: #0091ff solid 1px;
|
|
|
+ width: 54px;
|
|
|
+ height: 32px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.item-pip {
|