|
@@ -56,9 +56,13 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
- <a-popover trigger="click" placement="rightBottom" v-model="drawerVisible" >
|
|
|
- <template slot="content" >
|
|
|
- <itemTree @getSelectId="getSelectId" :drawerVisible="drawerVisible" :categoryIdS="categoryIdS" ></itemTree>
|
|
|
+ <a-popover trigger="click" placement="rightBottom" v-model="drawerVisible">
|
|
|
+ <template slot="content">
|
|
|
+ <itemTree
|
|
|
+ @getSelectId="getSelectId"
|
|
|
+ :drawerVisible="drawerVisible"
|
|
|
+ :categoryIdS="categoryIdS"
|
|
|
+ ></itemTree>
|
|
|
</template>
|
|
|
<div class="bottom-item">
|
|
|
<a-icon type="ellipsis" />
|
|
@@ -69,7 +73,6 @@
|
|
|
<!-- 打开弹窗 -->
|
|
|
<transition name="fade">
|
|
|
<div class="drawer-model" id="drawer-model" v-show="visible">
|
|
|
-
|
|
|
<a-drawer
|
|
|
placement="left"
|
|
|
:closable="false"
|
|
@@ -80,55 +83,56 @@
|
|
|
:mask="false"
|
|
|
>
|
|
|
<a-spin :spinning="spinning">
|
|
|
- <div class="drawer-model-body" v-if="!isExtract">
|
|
|
- <div class="btn-list">
|
|
|
- <a-radio-group v-show="showDrawerItem.type == 'Zone'" default-value="draw" button-style="solid" @change="changeDrawType">
|
|
|
- <a-radio-button value="draw">
|
|
|
- 绘制
|
|
|
- </a-radio-button>
|
|
|
- <a-radio-button value="select">
|
|
|
- 点选
|
|
|
- </a-radio-button>
|
|
|
- </a-radio-group>
|
|
|
- </div>
|
|
|
- <div class="list" v-for="(item,index) in itemList" :key="index">
|
|
|
- <div class="title">{{item.Name}}</div>
|
|
|
- <ul class="example">
|
|
|
- <li
|
|
|
- @click="getexampleItem(items)"
|
|
|
- v-for="(items,indexs) in item.GraphElements"
|
|
|
- :key="indexs"
|
|
|
+ <div class="drawer-model-body" v-if="!isExtract">
|
|
|
+ <div class="btn-list">
|
|
|
+ <a-radio-group
|
|
|
+ v-show="showDrawerItem.type == 'Zone'"
|
|
|
+ default-value="draw"
|
|
|
+ button-style="solid"
|
|
|
+ @change="changeDrawType"
|
|
|
>
|
|
|
- <img
|
|
|
- :class="['item',`item-${items.Type}`]"
|
|
|
- :src="'/serve/topology-wanda/Picture/query/'+ items.Url"
|
|
|
- alt
|
|
|
- />
|
|
|
- <div class="text">{{items.Name}}</div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <a-radio-button value="draw">绘制</a-radio-button>
|
|
|
+ <a-radio-button value="select">点选</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="list" v-for="(item,index) in itemList" :key="index">
|
|
|
+ <div class="title">{{item.Name}}</div>
|
|
|
+ <ul class="example">
|
|
|
+ <li
|
|
|
+ @click="getexampleItem(items,indexs)"
|
|
|
+ v-for="(items,indexs) in item.GraphElements"
|
|
|
+ :key="indexs"
|
|
|
+ :class="[activeIndex==indexs?'active-li':'']"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :class="['item',`item-${items.Type}`]"
|
|
|
+ :src="'/serve/topology-wanda/Picture/query/'+ items.Url"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ <div class="text">{{items.Name}}</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="drawer-model-body drawer-model-body-extract">
|
|
|
+ <a-table :columns="columns" :data-source="data" size="small" :pagination="false">
|
|
|
+ <a-tag
|
|
|
+ slot="address"
|
|
|
+ slot-scope="text, record, index"
|
|
|
+ :color="'geekblue'"
|
|
|
+ @click="pickUp(text, record, index)"
|
|
|
+ >{{ text }}</a-tag>
|
|
|
+ </a-table>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div v-else class="drawer-model-body drawer-model-body-extract">
|
|
|
- <a-table :columns="columns" :data-source="data" size="small" :pagination="false">
|
|
|
- <a-tag
|
|
|
- slot="address"
|
|
|
- slot-scope="text, record, index"
|
|
|
- :color="'geekblue'"
|
|
|
- @click="pickUp(text, record, index)"
|
|
|
- >{{ text }}</a-tag>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
</a-spin>
|
|
|
</a-drawer>
|
|
|
-
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import itemTree from "./leftbar_components/itemTree";
|
|
|
-import {graphElementGroup} from "@/api/editer.js";
|
|
|
+import { graphElementGroup } from "@/api/editer.js";
|
|
|
import bus from "@/bus";
|
|
|
import { queryGroup } from "@/api/editer.js";
|
|
|
import { mapState, mapActions } from "vuex";
|
|
@@ -184,7 +188,7 @@ export default {
|
|
|
{
|
|
|
img: "t-select.png", //logo
|
|
|
hoverImg: "t-select-hover.png", //hoverlogo
|
|
|
- isHover: true, //是否hover
|
|
|
+ isHover: false, //是否hover
|
|
|
isChoice: true,
|
|
|
name: "选择", //类型
|
|
|
type: "choice"
|
|
@@ -257,10 +261,10 @@ export default {
|
|
|
itemList: [], //图例数组
|
|
|
categoryIdS: [],
|
|
|
categoryId: "",
|
|
|
- activeIndex: -1,
|
|
|
- drawerVisible:false,
|
|
|
- spinning:false,
|
|
|
- showDrawerItem:{}
|
|
|
+ activeIndex: -1, //选中的图例
|
|
|
+ drawerVisible: false,
|
|
|
+ spinning: false,
|
|
|
+ showDrawerItem: {},
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
@@ -277,39 +281,32 @@ export default {
|
|
|
mouseoutActive(item) {
|
|
|
item.isHover = false;
|
|
|
},
|
|
|
- toolActionClick(item) {
|
|
|
+ toolActionClick(items) {
|
|
|
this.visible = false;
|
|
|
- this.baseChoice.forEach(item => {
|
|
|
+ this.baseChoice.map(item => {
|
|
|
item.isChoice = false;
|
|
|
});
|
|
|
- this.systemChoice.forEach(a => {
|
|
|
+ this.systemChoice.map(a => {
|
|
|
a.isChoice = false;
|
|
|
});
|
|
|
- item.isChoice = true;
|
|
|
- this.$emit("setCmdType", item.type);
|
|
|
+ items.isChoice = true;
|
|
|
+ this.$emit("setCmdType", items.type);
|
|
|
},
|
|
|
showDrawer(item) {
|
|
|
this.showDrawerItem = item;
|
|
|
- console.log('showDrawerItem',this.showDrawerItem)
|
|
|
this.isExtract = false;
|
|
|
if (item.isChoice) {
|
|
|
- this.systemChoice.forEach(a => {
|
|
|
- a.isChoice = false;
|
|
|
- });
|
|
|
+ item.isChoice = false;
|
|
|
this.visible = false;
|
|
|
} else {
|
|
|
- this.systemChoice.forEach(a => {
|
|
|
+ this.baseChoice.map(a => {
|
|
|
+ a.isChoice = false;
|
|
|
+ });
|
|
|
+ this.systemChoice.map(a => {
|
|
|
a.isChoice = false;
|
|
|
});
|
|
|
+ this.visible = true;
|
|
|
item.isChoice = true;
|
|
|
- if (this.visible) {
|
|
|
- this.visible = false;
|
|
|
- setTimeout(() => {
|
|
|
- this.visible = true;
|
|
|
- }, 300);
|
|
|
- } else {
|
|
|
- this.visible = true;
|
|
|
- }
|
|
|
// 打开侧边框
|
|
|
// 接口请求
|
|
|
this.itemList = [];
|
|
@@ -319,7 +316,7 @@ export default {
|
|
|
Type: item.type
|
|
|
};
|
|
|
|
|
|
- queryGroup(data).then(res=>{
|
|
|
+ queryGroup(data).then(res => {
|
|
|
this.itemList = res.Data;
|
|
|
});
|
|
|
const arr = {
|
|
@@ -329,16 +326,14 @@ export default {
|
|
|
|
|
|
graphElementGroup(arr).then(res => {
|
|
|
this.spinning = false;
|
|
|
- res.Data.map(item=>{
|
|
|
+ res.Data.map(item => {
|
|
|
this.itemList.push(item);
|
|
|
- })
|
|
|
-
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
- console.log(this.itemList);
|
|
|
},
|
|
|
- getSelectId(data){
|
|
|
- this.categoryIdS=data;
|
|
|
+ getSelectId(data) {
|
|
|
+ this.categoryIdS = data;
|
|
|
this.drawerVisible = false;
|
|
|
},
|
|
|
onClose() {
|
|
@@ -347,14 +342,32 @@ export default {
|
|
|
a.isChoice = false;
|
|
|
});
|
|
|
},
|
|
|
- getexampleItem(item) {
|
|
|
+ getexampleItem(item,index) {
|
|
|
+ this.activeIndex = index;
|
|
|
this.$emit("toolActionClick", item);
|
|
|
},
|
|
|
// 提取元素
|
|
|
extractItem() {
|
|
|
// 打开提取元素列表
|
|
|
+ let isChoice = false;
|
|
|
+ this.baseChoice.map(item => {
|
|
|
+ if (item.isChoice) {
|
|
|
+ isChoice = true;
|
|
|
+ }
|
|
|
+ item.isChoice = false;
|
|
|
+ });
|
|
|
+ this.systemChoice.map(a => {
|
|
|
+ if (a.isChoice) {
|
|
|
+ isChoice = true;
|
|
|
+ }
|
|
|
+ a.isChoice = false;
|
|
|
+ });
|
|
|
this.isExtract = true;
|
|
|
- this.visible = !this.visible;
|
|
|
+ if (isChoice) {
|
|
|
+ this.visible = true;
|
|
|
+ } else {
|
|
|
+ this.visible = !this.visible;
|
|
|
+ }
|
|
|
bus.$emit("extractItem");
|
|
|
},
|
|
|
getBus() {
|
|
@@ -370,20 +383,23 @@ export default {
|
|
|
bus.$emit("exportByKey", record);
|
|
|
},
|
|
|
changeDrawType(v) {
|
|
|
- bus.$emit('changeDrawType', v.target.value)
|
|
|
+ bus.$emit("changeDrawType", v.target.value);
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
cmdType(cmd) {
|
|
|
this.baseChoice.forEach(item => {
|
|
|
item.isChoice = false;
|
|
|
- if (item.cmd == cmd) {
|
|
|
+ if (item.type == cmd) {
|
|
|
item.isChoice = true;
|
|
|
}
|
|
|
});
|
|
|
+ if(cmd == "choice"){
|
|
|
+ this.activeIndex = -1;
|
|
|
+ }
|
|
|
},
|
|
|
- drawerVisible(val){
|
|
|
- if(this.visible){
|
|
|
+ drawerVisible(val) {
|
|
|
+ if (this.visible) {
|
|
|
this.showDrawer(this.showDrawerItem);
|
|
|
}
|
|
|
}
|
|
@@ -412,21 +428,20 @@ export default {
|
|
|
obj[arr[0]] = arr[1];
|
|
|
});
|
|
|
this.categoryId = obj.categoryId;
|
|
|
- this.categoryIdS.push(obj.categoryId)
|
|
|
+ this.categoryIdS.push(obj.categoryId);
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- /deep/ .ant-spin-nested-loading{
|
|
|
- height: 100% !important;
|
|
|
- .ant-spin-container{
|
|
|
- height: 100% !important;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- /deep/ .ant-drawer-body{
|
|
|
+/deep/ .ant-spin-nested-loading {
|
|
|
+ height: 100% !important;
|
|
|
+ .ant-spin-container {
|
|
|
height: 100% !important;
|
|
|
}
|
|
|
+}
|
|
|
+/deep/ .ant-drawer-body {
|
|
|
+ height: 100% !important;
|
|
|
+}
|
|
|
#left_toolbar {
|
|
|
min-width: 68px;
|
|
|
height: 100%;
|
|
@@ -611,8 +626,8 @@ export default {
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
}
|
|
|
- .active-li{
|
|
|
- background: #e1f2ff;
|
|
|
+ .active-li {
|
|
|
+ background: #e1f2ff;
|
|
|
}
|
|
|
}
|
|
|
}
|