|
@@ -29,6 +29,7 @@
|
|
|
v-on:mouseover="mouseoverActive(item)"
|
|
|
v-for="(item,i) in systemChoice"
|
|
|
:key="i"
|
|
|
+ @click="showDrawer(item)"
|
|
|
>
|
|
|
<div class="item">
|
|
|
<img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
|
|
@@ -41,10 +42,55 @@
|
|
|
<a-icon type="ellipsis" />
|
|
|
<span>选择原件</span>
|
|
|
</div>
|
|
|
+ <!-- 打开弹窗 -->
|
|
|
+ <div class="drawer-model" id="drawer-model" v-show="visible">
|
|
|
+ <a-drawer
|
|
|
+ placement="left"
|
|
|
+ :closable="false"
|
|
|
+ :visible="visible"
|
|
|
+ :getContainer="ele"
|
|
|
+ :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>
|
|
|
+ </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>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ cmd: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ required: false
|
|
|
+ }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
// 基础选择
|
|
@@ -102,16 +148,12 @@ export default {
|
|
|
isHover: false, //是否hover
|
|
|
name: "管线桥架" //类型
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ visible: false,
|
|
|
+ ele: null,
|
|
|
+ activeItem: 1
|
|
|
};
|
|
|
},
|
|
|
- props: {
|
|
|
- cmd: {
|
|
|
- type: Number,
|
|
|
- default: 0,
|
|
|
- required: false
|
|
|
- }
|
|
|
- },
|
|
|
methods: {
|
|
|
// 触入
|
|
|
mouseoverActive(item) {
|
|
@@ -126,6 +168,25 @@ export default {
|
|
|
});
|
|
|
item.isChoice = true;
|
|
|
this.$emit("toolActionClick", item);
|
|
|
+ },
|
|
|
+ showDrawer(item) {
|
|
|
+ console.log(item);
|
|
|
+ if (item.name == "管线桥架") {
|
|
|
+ this.activeItem = 2;
|
|
|
+ } else {
|
|
|
+ this.activeItem = 1;
|
|
|
+ }
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ onClose() {
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ getexampleItem() {
|
|
|
+ this.visible = false;
|
|
|
+ const item = {
|
|
|
+ cmd: 5
|
|
|
+ };
|
|
|
+ this.$emit("toolActionClick", item);
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -137,12 +198,15 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.ele = document.getElementById("drawer-model");
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
#left_toolbar {
|
|
|
- width: 68px;
|
|
|
+ min-width: 68px;
|
|
|
height: 707px;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
|
|
@@ -260,5 +324,58 @@ export default {
|
|
|
opacity: 0.89;
|
|
|
color: #0091ff;
|
|
|
}
|
|
|
+ .drawer-model {
|
|
|
+ position: absolute;
|
|
|
+ left: 70px;
|
|
|
+ top: 0;
|
|
|
+ width: 230px;
|
|
|
+ height: 100%;
|
|
|
+ .drawer-model-body {
|
|
|
+ width: 100%;
|
|
|
+ .btn-list {
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ border-left: 4px solid #0091ff;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .example {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ li {
|
|
|
+ width: 72px;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ background: #e1f2ff;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ width: 28px;
|
|
|
+ height: 16px;
|
|
|
+ background: #bbdfff;
|
|
|
+ border: #0091ff solid 1px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .item-pip {
|
|
|
+ width: 28px;
|
|
|
+ height: 16px;
|
|
|
+ border: #0091ff solid 1px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|