|
@@ -18,25 +18,36 @@
|
|
|
@click='dialogVisible(eve)'
|
|
|
>
|
|
|
<span class='circle'></span>
|
|
|
- {{eve.label}}
|
|
|
+ <span class='hanzi'>{{eve.label}}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class='eq-right'>
|
|
|
<div class='eq-right-bottom'>
|
|
|
<div class='title-box'>
|
|
|
- <img src='@/assets/imgs/mainIcon.png' />
|
|
|
+ <!-- <img src='@/assets/imgs/mainIcon.png' /> -->
|
|
|
<div class='eq-title'>
|
|
|
- <span>{{floorInfo.floorName}}</span>
|
|
|
+ <span>{{floorInfo.code}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class='eq-content'>
|
|
|
+ <div class='legend-boxs'>
|
|
|
+ <Legend></Legend>
|
|
|
+ </div>
|
|
|
<floorMap ref='floorMap'></floorMap>
|
|
|
+ <div class='additional-box'>
|
|
|
+ <div class='additional' @click='additionalColl'>
|
|
|
+ <img src='../../assets/imgs/bg.png' alt />
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <editList></editList>
|
|
|
+ <!-- <editList></editList> -->
|
|
|
</div>
|
|
|
<eq-dialog ref='dialog' :systemName='systemName' :smsxt='smsxt'></eq-dialog>
|
|
|
</div>
|
|
@@ -57,13 +68,14 @@ export default {
|
|
|
systemId: 1,
|
|
|
systemName: '供电系统',
|
|
|
floorInfo: {
|
|
|
- floorName: 'F1',
|
|
|
- floorId: '1'
|
|
|
+ gname: 'f1',
|
|
|
+ code: 'F1'
|
|
|
},
|
|
|
smsxt: '1001',
|
|
|
dialogInfo: {},
|
|
|
brand: [], //品牌
|
|
|
- manufacturer: []
|
|
|
+ manufacturer: [],
|
|
|
+ show: false
|
|
|
}
|
|
|
},
|
|
|
components: { floorList, eqDialog, floorMap, editList },
|
|
@@ -77,18 +89,20 @@ export default {
|
|
|
},
|
|
|
emitFloor(item) {
|
|
|
console.log('item', item)
|
|
|
- this.floorInfo.floorId = item[0]
|
|
|
- this.$refs.floorMap.init(item[0])
|
|
|
- this.floorInfo.floorName = item[1]
|
|
|
+ this.floorInfo = item
|
|
|
+ // this.$refs.floorMap.init(this.floorInfo.gname)
|
|
|
},
|
|
|
dialogVisible(eve) {
|
|
|
console.log(eve)
|
|
|
this.$refs.dialog.showModal(eve)
|
|
|
+ },
|
|
|
+ additionalColl() {
|
|
|
+ this.show = !this.show
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.everySystem = this.system[0].children
|
|
|
- this.$refs.floorMap.init(1)
|
|
|
+ // this.$refs.floorMap.init(this.floorInfo.gname)
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -117,6 +131,8 @@ export default {
|
|
|
}
|
|
|
.isActive {
|
|
|
color: #025baa;
|
|
|
+ font-weight: bolder;
|
|
|
+ background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
|
|
|
}
|
|
|
}
|
|
|
.eq-bottom {
|
|
@@ -131,23 +147,30 @@ export default {
|
|
|
font-size: 14px;
|
|
|
height: 100%;
|
|
|
background: rgba(242, 245, 247, 1);
|
|
|
- // box-shadow: 2px 0px 10px 0px rgba(31, 36, 41, 0.06);
|
|
|
}
|
|
|
.li-style {
|
|
|
- padding: 0 0 18px 35px;
|
|
|
+ margin-left: 28px;
|
|
|
+ // padding: 9px 6px;
|
|
|
cursor: pointer;
|
|
|
.circle {
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
- // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
|
|
|
+ background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
|
|
|
border-radius: 50%;
|
|
|
display: inline-block;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+ .hanzi {
|
|
|
+ padding: 10px 2px;
|
|
|
+ width: 200px;
|
|
|
+ display: inline-block;
|
|
|
+ &:hover {
|
|
|
+ color: rgba(2, 91, 170, 1);
|
|
|
+ background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .is-active {
|
|
|
- // background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
|
|
|
- }
|
|
|
+
|
|
|
.eq-right {
|
|
|
flex: 1;
|
|
|
.eq-right-bottom {
|
|
@@ -182,6 +205,47 @@ export default {
|
|
|
}
|
|
|
.eq-content {
|
|
|
flex: 1;
|
|
|
+ .legend-boxs {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 9;
|
|
|
+ right: 32px;
|
|
|
+ top: 160px;
|
|
|
+ }
|
|
|
+ .additional-box {
|
|
|
+ position: relative;
|
|
|
+ .additional {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
|
|
|
+ border-radius: 2px;
|
|
|
+ position: fixed;
|
|
|
+ right: 32px;
|
|
|
+ top: 420px;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add-img {
|
|
|
+ width: 560px;
|
|
|
+ height: 325px;
|
|
|
+ background: #ffffff;
|
|
|
+ -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #e4e5e7;
|
|
|
+ position: absolute;
|
|
|
+ right: 77px;
|
|
|
+ top: 93px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|