<template>
|
<div class="smartPark">
|
<parkState v-show="active == 1" />
|
<safeObserve v-show="active == 2" />
|
<energyManage v-show="active == 3" />
|
<alarmInfo v-show="active == 4" />
|
<environmentSpace v-show="active == 5" />
|
|
|
<!-- <div class="topBtnRow">
|
<div class="topBtn" :style="{ backgroundImage: 'url(' + (active == 1 ? coverImgUrl : uncoverImgUrl) + ')' }"
|
@click="clickBtn(1)">
|
园区态势</div>
|
<div class="topBtn" :style="{ backgroundImage: 'url(' + (active == 2 ? coverImgUrl : uncoverImgUrl) + ')' }"
|
@click="clickBtn(2)">
|
安全监测</div>
|
<div class="topBtn" :style="{ backgroundImage: 'url(' + (active == 3 ? coverImgUrl : uncoverImgUrl) + ')' }"
|
@click="clickBtn(3)">
|
能耗管理</div>
|
<div class="topBtn" :style="{ backgroundImage: 'url(' + (active == 4 ? coverImgUrl : uncoverImgUrl) + ')' }"
|
@click="clickBtn(4)">
|
告警信息</div>
|
<div class="topBtn" :style="{ backgroundImage: 'url(' + (active == 5 ? coverImgUrl : uncoverImgUrl) + ')' }"
|
@click="clickBtn(5)">
|
环境空间</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import parkState from './parkState'
|
import safeObserve from './safeObserve'
|
import energyManage from './energyManage'
|
import alarmInfo from './alarmInfo'
|
import environmentSpace from './environmentSpace'
|
export default {
|
name: "smartPark",
|
components: {
|
parkState,
|
safeObserve,
|
energyManage,
|
alarmInfo,
|
environmentSpace
|
},
|
data() {
|
return {
|
coverImgUrl: require('@/assets/img/park_btn_active.png'),
|
uncoverImgUrl: require('@/assets/img/park_btn.png'),
|
active: 0,
|
}
|
},
|
methods: {
|
clickBtn(index) {
|
if (this.active == index) {
|
this.active = 0
|
} else {
|
this.active = index
|
}
|
|
this.$nextTick(() => [
|
window.dispatchEvent(new Event('resize'))//初始化echarts
|
])
|
}
|
},
|
watch: {
|
"$store.state.currentMenu": function (val) {
|
let index = 0
|
switch (val) {
|
case '园区概览':
|
index = 1
|
break;
|
|
case '安全监测':
|
index = 2
|
break;
|
|
case '能耗感知':
|
index = 3
|
break;
|
|
case '告警信息':
|
index = 4
|
break;
|
|
case '环境空间':
|
index = 5
|
break;
|
|
default:
|
index = 0
|
break;
|
}
|
console.log(' @@ index',index)
|
if (this.active == index) {
|
// this.typeIdx = 0
|
} else {
|
this.active = index
|
}
|
|
this.$nextTick(() => [
|
window.dispatchEvent(new Event('resize'))//初始化echarts
|
])
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="less">
|
.smartPark {
|
height: 100%;
|
width: 100%;
|
position: absolute;
|
top: 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
pointer-events: none;
|
|
.topBtnRow {
|
position: absolute;
|
bottom: 140px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
gap: 20px;
|
pointer-events: all;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
|
.topBtn {
|
width: 104.5px;
|
height: 38px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
/*
|
//align-items: center;
|
*/
|
line-height: 3;
|
font-size: 11px;
|
color: #ffffff;
|
cursor: pointer;
|
|
background-image: url("~@/assets/img/topBtnBack.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
letter-spacing: 1.1px;
|
text-shadow: -0.87px 0.5px 4px 0px rgba(5, 27, 54, 0.42);
|
font-weight: 700;
|
}
|
}
|
|
}
|
</style>
|
