|
@@ -72,75 +72,77 @@
|
|
|
</div>
|
|
|
</a-popover>
|
|
|
|
|
|
- <!-- 打开弹窗 -->
|
|
|
- <div class="drawer-close" v-show="visible" @click="onClose" :style="{opacity: visible? 1: 0, }">
|
|
|
- <a-icon type="left" style="color: #8D9399;font-size: 10px" />
|
|
|
- </div>
|
|
|
<transition name="fade">
|
|
|
- <div class="drawer-model" id="drawer-model" v-show="visible">
|
|
|
- <a-drawer
|
|
|
- placement="left"
|
|
|
- :closable="false"
|
|
|
- :visible="visible"
|
|
|
- :wrap-style="{ position: 'absolute',}"
|
|
|
- @close="onClose"
|
|
|
- :getContainer="false"
|
|
|
- :mask="false"
|
|
|
- :wrapClassName="isExtract?'edit-drawer':''"
|
|
|
- >
|
|
|
- <a-spin :spinning="spinning">
|
|
|
- <div class="drawer-model-body" v-if="!isExtract">
|
|
|
- <div class="btn-list">
|
|
|
- <Tabs
|
|
|
- type="card"
|
|
|
- v-if="showDrawerItem.type == 'Zone'"
|
|
|
- :data="tabData"
|
|
|
- v-model="tabActive"
|
|
|
- />
|
|
|
+ <div>
|
|
|
+ <!-- 打开弹窗 -->
|
|
|
+ <div class="drawer-close" v-show="closevisible" @click="onClose">
|
|
|
+ <a-icon type="left" style="color: #8D9399;font-size: 10px" />
|
|
|
+ </div>
|
|
|
+ <div class="drawer-model" id="drawer-model" v-show="visible">
|
|
|
+ <a-drawer
|
|
|
+ placement="left"
|
|
|
+ :closable="false"
|
|
|
+ :visible="visible"
|
|
|
+ :wrap-style="{ position: 'absolute',}"
|
|
|
+ @close="onClose"
|
|
|
+ :getContainer="false"
|
|
|
+ :mask="false"
|
|
|
+ :wrapClassName="isExtract?'edit-drawer':''"
|
|
|
+ >
|
|
|
+ <a-spin :spinning="spinning">
|
|
|
+ <div class="drawer-model-body" v-if="!isExtract">
|
|
|
+ <div class="btn-list">
|
|
|
+ <Tabs
|
|
|
+ type="card"
|
|
|
+ v-if="showDrawerItem.type == 'Zone'"
|
|
|
+ :data="tabData"
|
|
|
+ v-model="tabActive"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="list" v-for="(item,index) in itemList" :key="index">
|
|
|
+ <div class="title" v-show="item.GraphElements.length">{{item.Name}}</div>
|
|
|
+ <ul class="example">
|
|
|
+ <li
|
|
|
+ @click="getexampleItem(items,indexs,index)"
|
|
|
+ v-for="(items,indexs) in item.GraphElements"
|
|
|
+ :key="indexs"
|
|
|
+ :class="[activeIndexs==indexs &&activeIndex==index ?'active-li':'']"
|
|
|
+ :title="items.Name"
|
|
|
+ >
|
|
|
+ <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 class="list" v-for="(item,index) in itemList" :key="index">
|
|
|
- <div class="title" v-show="item.GraphElements.length">{{item.Name}}</div>
|
|
|
- <ul class="example">
|
|
|
- <li
|
|
|
- @click="getexampleItem(items,indexs,index)"
|
|
|
- v-for="(items,indexs) in item.GraphElements"
|
|
|
- :key="indexs"
|
|
|
- :class="[activeIndexs==indexs &&activeIndex==index ?'active-li':'']"
|
|
|
- :title="items.Name"
|
|
|
- >
|
|
|
- <img
|
|
|
- :class="['item',`item-${items.Type}`]"
|
|
|
- :src="'/serve/topology-wanda/Picture/query/'+ items.Url"
|
|
|
- alt
|
|
|
- />
|
|
|
- <div class="text">{{items.Name}}</div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <div v-else class="drawer-model-body drawer-model-body-extract">
|
|
|
+ <a-table :columns="columns" :data-source="data" size="small" :pagination="false">
|
|
|
+ <template slot="age" slot-scope="text, record, index">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ :class="['item',`item-${text.Type}`, 'exportImg']"
|
|
|
+ :src="'/serve/topology-wanda/Picture/query/'+ text.Url"
|
|
|
+ alt
|
|
|
+ v-if="text.Url"
|
|
|
+ />
|
|
|
+ <span v-else>无对应图例</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot="address" slot-scope="text, record, index">
|
|
|
+ <div
|
|
|
+ style="color:#0091FFFF;cursor:pointer;"
|
|
|
+ @click="pickUp(text, record, index)"
|
|
|
+ >{{ text }}</div>
|
|
|
+ </template>
|
|
|
+ </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">
|
|
|
- <template slot="age" slot-scope="text, record, index">
|
|
|
- <div>
|
|
|
- <img
|
|
|
- :class="['item',`item-${text.Type}`, 'exportImg']"
|
|
|
- :src="'/serve/topology-wanda/Picture/query/'+ text.Url"
|
|
|
- alt
|
|
|
- v-if="text.Url"
|
|
|
- />
|
|
|
- <span v-else>无对应图例</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template slot="address" slot-scope="text, record, index">
|
|
|
- <div
|
|
|
- style="color:#0091FFFF;cursor:pointer;"
|
|
|
- @click="pickUp(text, record, index)"
|
|
|
- >{{ text }}</div>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- </a-spin>
|
|
|
- </a-drawer>
|
|
|
+ </a-spin>
|
|
|
+ </a-drawer>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
@@ -247,6 +249,7 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
visible: false,
|
|
|
+ closevisible: false,
|
|
|
//提取
|
|
|
extractChoice: [
|
|
|
{
|
|
@@ -338,6 +341,13 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
+ if (this.visible) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.closevisible = this.visible;
|
|
|
+ }, 300);
|
|
|
+ } else {
|
|
|
+ this.closevisible = this.visible;
|
|
|
+ }
|
|
|
},
|
|
|
getSelectId(data) {
|
|
|
this.categoryIdS = data;
|
|
@@ -348,6 +358,13 @@ export default {
|
|
|
this.systemChoice.forEach(a => {
|
|
|
a.isChoice = false;
|
|
|
});
|
|
|
+ if (this.visible) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.closevisible = this.visible;
|
|
|
+ }, 300);
|
|
|
+ } else {
|
|
|
+ this.closevisible = this.visible;
|
|
|
+ }
|
|
|
},
|
|
|
getexampleItem(item, indexs, index) {
|
|
|
if (this.showDrawerItem.type == "Zone") {
|
|
@@ -387,16 +404,26 @@ export default {
|
|
|
this.visible = !this.visible;
|
|
|
}
|
|
|
bus.$emit("extractItem");
|
|
|
+ if (this.visible) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.closevisible = this.visible;
|
|
|
+ }, 300);
|
|
|
+ } else {
|
|
|
+ this.closevisible = this.visible;
|
|
|
+ }
|
|
|
},
|
|
|
getBus() {
|
|
|
bus.$on("exportItem", data => {
|
|
|
this.data = [];
|
|
|
if (data.length) {
|
|
|
this.spinning = true;
|
|
|
- for(let i = 0; i< this.GraphElement.length; i++) {
|
|
|
+ for (let i = 0; i < this.GraphElement.length; i++) {
|
|
|
const it = this.GraphElement[i];
|
|
|
- for(let j = 0; j < data.length; j++) {
|
|
|
- if (it.InfoTypeId.indexOf(data[j].key)>-1 && it.Type == data[j].type) {
|
|
|
+ for (let j = 0; j < data.length; j++) {
|
|
|
+ if (
|
|
|
+ it.InfoTypeId.indexOf(data[j].key) > -1 &&
|
|
|
+ it.Type == data[j].type
|
|
|
+ ) {
|
|
|
data[j].age = it;
|
|
|
data[j].name = it.Name;
|
|
|
this.data.push(data[j]);
|
|
@@ -478,7 +505,7 @@ export default {
|
|
|
/deep/ .ant-drawer-body {
|
|
|
padding: 12px;
|
|
|
}
|
|
|
-/deep/ .ant-drawer-content-wrapper{
|
|
|
+/deep/ .ant-drawer-content-wrapper {
|
|
|
width: 270px !important;
|
|
|
}
|
|
|
#left_toolbar {
|
|
@@ -606,21 +633,20 @@ export default {
|
|
|
.fade-leave-to {
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
.drawer-close {
|
|
|
- width: 10px;
|
|
|
- height: 20px;
|
|
|
- position: absolute;
|
|
|
- background-color: #E4E5E7;
|
|
|
- top: 8px;
|
|
|
- left: 350px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: opacity 0s linear 0.3s;
|
|
|
- }
|
|
|
+ width: 10px;
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ background-color: #e4e5e7;
|
|
|
+ top: 8px;
|
|
|
+ left: 350px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: opacity 0s linear 0.3s;
|
|
|
+ }
|
|
|
.drawer-model {
|
|
|
position: absolute;
|
|
|
left: 80px;
|
|
@@ -660,8 +686,8 @@ export default {
|
|
|
border: 1px solid #ffffff;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
- background: #F5F6F7;
|
|
|
- border: 1px solid #D9DBDE;
|
|
|
+ background: #f5f6f7;
|
|
|
+ border: 1px solid #d9dbde;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
.item {
|
|
@@ -688,7 +714,7 @@ export default {
|
|
|
}
|
|
|
.text {
|
|
|
width: 100%;
|
|
|
- padding:6px 2px 0;
|
|
|
+ padding: 6px 2px 0;
|
|
|
font-size: 12px;
|
|
|
text-align: center;
|
|
|
overflow: hidden;
|
|
@@ -697,8 +723,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.active-li {
|
|
|
- background: #DFEFFE;
|
|
|
- border: 1px solid #98C8FA ;
|
|
|
+ background: #dfeffe;
|
|
|
+ border: 1px solid #98c8fa;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
}
|