|
@@ -0,0 +1,370 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <div style="cursor: pointer; position: relative;">
|
|
|
+ <img
|
|
|
+ @click="clickEventShow"
|
|
|
+ src="../../assets/images/flooraction/legend.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div class="sele-legend" v-show="legendShow">
|
|
|
+ <div>
|
|
|
+ <div class="sign">
|
|
|
+ <img
|
|
|
+ src="../../assets/images/flooraction/sanjiao2.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ <div>
|
|
|
+ <el-checkbox
|
|
|
+ v-model="allState"
|
|
|
+ @change="allChange"
|
|
|
+ ></el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div>项目</div>
|
|
|
+ <div>数量</div>
|
|
|
+ <div>单位</div>
|
|
|
+ <div>图例</div>
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in legend"
|
|
|
+ :key="index"
|
|
|
+ :class="{ 'is-status': item.state }"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-checkbox
|
|
|
+ v-model="item.state"
|
|
|
+ @change="itemChange(item)"
|
|
|
+ ></el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
+ <div>{{ item.count }}</div>
|
|
|
+ <div>{{ item.unit }}</div>
|
|
|
+ <div>
|
|
|
+ <span v-if="item.name == '建筑面积'">--</span>
|
|
|
+ <span v-else-if="item.name == '机动车位'">--</span>
|
|
|
+ <span v-else-if="item.name == '防火分区'">--</span>
|
|
|
+ <img
|
|
|
+ v-else-if="item.name == '主要设备房'"
|
|
|
+ src="../../assets/images/flooraction/sebei.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.name == '疏散通道'"
|
|
|
+ src="../../assets/images/flooraction/tongdao.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.name == '卫生间'"
|
|
|
+ src="../../assets/images/flooraction/weishengjian.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.name == '扶梯/坡梯'"
|
|
|
+ src="../../assets/images/flooraction/futi.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.name == '客梯'"
|
|
|
+ src="../../assets/images/flooraction/keti.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.name == '货梯'"
|
|
|
+ src="../../assets/images/flooraction/huoti.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ src="../../assets/images/flooraction/liantongkou.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="text">
|
|
|
+ <p style="padding-left: 2px;">
|
|
|
+ 注: 1.主要设备房包括:制冷机房、生活水泵房、消防泵房
|
|
|
+ </p>
|
|
|
+ <p>2.图例后的数字,代表此位置的数量</p>
|
|
|
+ <p>3.-B2-1至-B2-8为防火分区编号</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+ <div class="select-floor">
|
|
|
+ <span>
|
|
|
+ <img src="../../assets/images/flooraction/sanjiao.png" alt="" />
|
|
|
+ </span>
|
|
|
+ <span>F2</span>
|
|
|
+ <span @click="isActive" :class="{ 'is-active': state }">
|
|
|
+ <span>F1</span>
|
|
|
+ </span>
|
|
|
+ <span>B1</span>
|
|
|
+ <span @click="isActive2" :class="{ 'is-active': !state }"
|
|
|
+ ><span>B2</span></span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ ><img src="../../assets/images/flooraction/sanjiao.png" alt=""
|
|
|
+ /></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: ['imgShow', 'stateStatus'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ legendShow: false,
|
|
|
+ state: false,
|
|
|
+ allState: false,
|
|
|
+ legend: [
|
|
|
+ { name: '建筑面积', count: 18500, unit: '㎡', state: false },
|
|
|
+ { name: '主要设备房', count: 5, unit: '处', state: false },
|
|
|
+ { name: '机动车位', count: 556, unit: '个', state: false },
|
|
|
+ { name: '疏散通道', count: 18, unit: '个', state: false },
|
|
|
+ { name: '卫生间', count: 1, unit: '处', state: false },
|
|
|
+ { name: '扶梯/坡梯', count: 4, unit: '部', state: false },
|
|
|
+ { name: '客梯', count: 5, unit: '部', state: false },
|
|
|
+ { name: '货梯', count: 10, unit: '部', state: false },
|
|
|
+ { name: '防火分区', count: 8, unit: '个', state: false },
|
|
|
+ { name: '连通口', count: 0, unit: '处', state: false }
|
|
|
+ ],
|
|
|
+ legendArr: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ watch: {
|
|
|
+ legend: {
|
|
|
+ handler(newValue) {
|
|
|
+ newValue.forEach(item => {
|
|
|
+ if (item.state) {
|
|
|
+ this.$emit('update:stateStatus', true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let arr = newValue.filter(item => {
|
|
|
+ if (!item.state) {
|
|
|
+ return item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (arr.length != newValue.length) {
|
|
|
+ this.$emit('update:stateStatus', true)
|
|
|
+ } else {
|
|
|
+ this.$emit('update:stateStatus', false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ allChange() {
|
|
|
+ if (this.allState) {
|
|
|
+ this.legend.forEach(item => {
|
|
|
+ item.state = true
|
|
|
+ this.legendArr.push(item.name)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.legend.forEach(item => {
|
|
|
+ item.state = false
|
|
|
+ this.legendArr = []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.legendArr = [...new Set(this.legendArr)]
|
|
|
+ this.$emit('childDataArrEvent', this.legendArr)
|
|
|
+ },
|
|
|
+ itemChange(ele) {
|
|
|
+ // console.log(e)
|
|
|
+ let arr = this.legend.filter(item => {
|
|
|
+ if (item.state) {
|
|
|
+ return item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (arr.length == this.legend.length) {
|
|
|
+ this.allState = true
|
|
|
+ } else {
|
|
|
+ this.allState = false
|
|
|
+ }
|
|
|
+ if (ele.state) {
|
|
|
+ this.legendArr.push(ele.name)
|
|
|
+ } else {
|
|
|
+ let num = this.legendArr.indexOf(ele.name)
|
|
|
+ if (num != -1) {
|
|
|
+ this.legendArr.splice(num, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.legendArr = [...new Set(this.legendArr)]
|
|
|
+ this.$emit('childDataArrEvent', this.legendArr)
|
|
|
+ },
|
|
|
+ clickEventShow() {
|
|
|
+ this.legendShow = !this.legendShow
|
|
|
+ },
|
|
|
+ isActive() {
|
|
|
+ this.state = true
|
|
|
+ this.$emit('update:imgShow', true)
|
|
|
+ },
|
|
|
+ isActive2() {
|
|
|
+ this.state = false
|
|
|
+ this.$emit('update:imgShow', false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.sele-legend {
|
|
|
+ width: 421px;
|
|
|
+ height: 572px;
|
|
|
+ position: absolute;
|
|
|
+ right: 75px;
|
|
|
+ top: 0;
|
|
|
+ transition: 0.5s all;
|
|
|
+ & > div {
|
|
|
+ background: #0a1b51;
|
|
|
+ opacity: 0.95;
|
|
|
+ border: 1px solid #0a397f;
|
|
|
+ width: 406px;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .sign {
|
|
|
+ position: absolute;
|
|
|
+ right: -13px;
|
|
|
+ top: -1px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 42px;
|
|
|
+ background: #1649ce;
|
|
|
+ line-height: 42px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 10px;
|
|
|
+ & > div:nth-child(1) {
|
|
|
+ flex: 0.6;
|
|
|
+ }
|
|
|
+ & > div:nth-child(2) {
|
|
|
+ flex: 3;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ flex: 2;
|
|
|
+ }
|
|
|
+ /deep/ .el-checkbox__inner {
|
|
|
+ background: none;
|
|
|
+ border: 1px solid #033a8c;
|
|
|
+ }
|
|
|
+ /deep/ .el-checkbox .is-checked {
|
|
|
+ .el-checkbox__inner {
|
|
|
+ background: #005daa !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ padding-right: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ color: #8c90ae;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 12px;
|
|
|
+ line-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ border: 1px solid #0a1b51;
|
|
|
+ & > div:nth-child(1) {
|
|
|
+ flex: 0.6;
|
|
|
+ }
|
|
|
+ & > div:nth-child(2) {
|
|
|
+ flex: 3;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ flex: 2;
|
|
|
+ }
|
|
|
+ /deep/ .el-checkbox__inner {
|
|
|
+ background: none;
|
|
|
+ border: 1px solid #033a8c;
|
|
|
+ }
|
|
|
+ /deep/ .el-checkbox .is-checked {
|
|
|
+ .el-checkbox__inner {
|
|
|
+ background: #005daa !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(even) {
|
|
|
+ background: #0c1555;
|
|
|
+ border: 1px solid #0d1a5f;
|
|
|
+ }
|
|
|
+ .is-status {
|
|
|
+ background: #102982 !important;
|
|
|
+ border: 1px solid #143db3 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ margin-top: 12px;
|
|
|
+ margin-left: 38px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4a89b0;
|
|
|
+ p:nth-child(2) {
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+ p:nth-child(3) {
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.select-floor {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 61px;
|
|
|
+ height: 260px;
|
|
|
+ border: 1px solid #00aee8;
|
|
|
+ background: #0f2967;
|
|
|
+ border-radius: 3px;
|
|
|
+ color: #00cce8;
|
|
|
+ & > span {
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ height: 16.5%;
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ transition: 0.5s all;
|
|
|
+ // padding: 5px;
|
|
|
+ & > span {
|
|
|
+ border: 1px solid #0f2967;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: block;
|
|
|
+ height: 43px;
|
|
|
+ border-radius: 3px;
|
|
|
+ line-height: 43px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > span:nth-child(1) {
|
|
|
+ line-height: 40px;
|
|
|
+ img {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .is-active {
|
|
|
+ & > span {
|
|
|
+ border: 1px solid #00cce8;
|
|
|
+ color: #fff;
|
|
|
+ background: #047ca6;
|
|
|
+ width: 70%;
|
|
|
+ margin: 0 auto 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|