|
@@ -30,6 +30,7 @@
|
|
|
v-for="(item,i) in systemChoice"
|
|
|
@click="showDrawer(item)"
|
|
|
:key="i"
|
|
|
+ v-bind:class="{ actives:item.isChoice}"
|
|
|
>
|
|
|
<div class="item">
|
|
|
<img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
|
|
@@ -59,43 +60,45 @@
|
|
|
<span>选择原件</span>
|
|
|
</div>
|
|
|
<!-- 打开弹窗 -->
|
|
|
- <div class="drawer-model" id="drawer-model" v-show="visible">
|
|
|
- <a-drawer
|
|
|
- placement="left"
|
|
|
- :closable="false"
|
|
|
- :visible="visible"
|
|
|
- :getContainer="false"
|
|
|
- :wrap-style="{ position: 'absolute' }"
|
|
|
- @close="onClose"
|
|
|
- >
|
|
|
- <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>
|
|
|
- <ul class="example">
|
|
|
- <li @click="getexampleItem">
|
|
|
- <div class="item"></div>
|
|
|
- <div class="text">防火风区</div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <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"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</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>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a-drawer>
|
|
|
- </div>
|
|
|
+ </a-drawer>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -150,23 +153,25 @@ export default {
|
|
|
img: "t-position.png", //logo
|
|
|
hoverImg: "t-position-hover.png", //hoverlogo
|
|
|
isHover: false, //是否hover
|
|
|
+ isChoice: false,
|
|
|
name: "位置区域" //类型
|
|
|
},
|
|
|
{
|
|
|
img: "t-equipment.png", //logo
|
|
|
hoverImg: "t-equipment-hover.png", //hoverlogo
|
|
|
isHover: false, //是否hover
|
|
|
+ isChoice: false,
|
|
|
name: "设备设施" //类型
|
|
|
},
|
|
|
{
|
|
|
img: "t-papeline.png", //logo
|
|
|
hoverImg: "t-papeline-hover.png", //hoverlogo
|
|
|
isHover: false, //是否hover
|
|
|
+ isChoice: false,
|
|
|
name: "管线桥架" //类型
|
|
|
}
|
|
|
],
|
|
|
visible: false,
|
|
|
- ele: false,
|
|
|
activeItem: 1,
|
|
|
//提取
|
|
|
extractChoice: [
|
|
@@ -188,28 +193,68 @@ export default {
|
|
|
item.isHover = false;
|
|
|
},
|
|
|
toolActionClick(item) {
|
|
|
+ this.visible = false;
|
|
|
this.baseChoice.forEach(item => {
|
|
|
item.isChoice = false;
|
|
|
});
|
|
|
+ this.systemChoice.forEach(a => {
|
|
|
+ a.isChoice = false;
|
|
|
+ });
|
|
|
item.isChoice = true;
|
|
|
this.$emit("setCmd", item.cmd);
|
|
|
},
|
|
|
showDrawer(item) {
|
|
|
- if (item.name == "管线桥架") {
|
|
|
- this.activeItem = 2;
|
|
|
+ if (item.isChoice) {
|
|
|
+ this.systemChoice.forEach(a => {
|
|
|
+ a.isChoice = false;
|
|
|
+ });
|
|
|
+ this.visible = false;
|
|
|
} else {
|
|
|
- this.activeItem = 1;
|
|
|
+ this.systemChoice.forEach(a => {
|
|
|
+ a.isChoice = false;
|
|
|
+ });
|
|
|
+ item.isChoice = true;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
- this.visible = true;
|
|
|
},
|
|
|
onClose() {
|
|
|
this.visible = false;
|
|
|
+ this.systemChoice.forEach(a => {
|
|
|
+ a.isChoice = false;
|
|
|
+ });
|
|
|
},
|
|
|
getexampleItem() {
|
|
|
this.visible = false;
|
|
|
- const item = {
|
|
|
+ let item = {
|
|
|
cmd: 5
|
|
|
};
|
|
|
+ if (this.activeItem == 1) {
|
|
|
+ item = {
|
|
|
+ cmd: 5
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ item = {
|
|
|
+ cmd: 4
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
this.$emit("toolActionClick", item);
|
|
|
}
|
|
|
},
|
|
@@ -224,14 +269,15 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.ele = document.getElementById("drawer-model");
|
|
|
+ const ele = document.getElementById("drawer-model");
|
|
|
+ ele.style.width = document.body.offsetWidth - 70 + "px";
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
#left_toolbar {
|
|
|
min-width: 68px;
|
|
|
- height: 707px;
|
|
|
+ height: 100%;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
|
|
|
padding: 0 0 12px 0;
|
|
@@ -349,11 +395,16 @@ export default {
|
|
|
opacity: 0.89;
|
|
|
color: #0091ff;
|
|
|
}
|
|
|
+ .fade-enter,
|
|
|
+ .fade-leave-to {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
.drawer-model {
|
|
|
position: absolute;
|
|
|
left: 70px;
|
|
|
top: 0;
|
|
|
- width: 230px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
.drawer-model-body {
|
|
|
width: 100%;
|