319 lines
7.7 KiB
Vue
319 lines
7.7 KiB
Vue
<!--峰煤监控系统-->
|
||
<template>
|
||
<div class="peak-coal-monitoring">
|
||
|
||
<div class="center-panel">
|
||
<Map type="middle" @pointClick="pointClick" />
|
||
</div>
|
||
|
||
<div class="header-panel show-top">
|
||
<div class="header-content">
|
||
<p class="_title">{{ title }}</p>
|
||
<p class="_title sub">一体化平台</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="left-panel show-top">
|
||
<div class="pollution-information-module">
|
||
<pollution-information/>
|
||
</div>
|
||
<div class="atmospheric-module-module">
|
||
<atmospheric-module />
|
||
</div>
|
||
<div class="device-online-rate">
|
||
<device-online-rate />
|
||
</div>
|
||
<div class="monitor-data-module">
|
||
<monitor-data/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="right-panel show-top">
|
||
<div class="energy-profile-module">
|
||
<energy-profile/>
|
||
</div>
|
||
<div class="device-overview-module">
|
||
<peak-energy-use/>
|
||
</div>
|
||
<div class="alarm-overview-module">
|
||
<excessive-warning/>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="footer-panel show-top"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import AtmosphericModule from "@/components/peak-coal-monitoring/AtmosphericModule";
|
||
import PollutionInformation from "@/components/peak-coal-monitoring/PollutionInformation";
|
||
import MonitorData from "@/components/peak-coal-monitoring/MonitorData";
|
||
import EnergyProfile from "@/components/peak-coal-monitoring/EnergyProfile";
|
||
import DeviceOverview from "@/components/peak-coal-monitoring/DeviceOverview";
|
||
import AlarmOverview from "@/components/peak-coal-monitoring/AlarmOverview";
|
||
import WZDialog from "@/components/WZDialog";
|
||
import SDJCYDialog from "@/components/SDJCYDialog";
|
||
import ZKZDialog from "@/components/ZKZDialog";
|
||
import GBZDialog from "@/components/GBZDialog";
|
||
import CEMSDialog from "@/components/CEMSDialog";
|
||
import pointDialog from '@/components/PointDialog'
|
||
import {mapState} from "vuex";
|
||
import DeviceOnlineRate from "@/components/peak-coal-monitoring/DeviceOnlineRate";
|
||
import PeakEnergyUse from "@/components/peak-coal-monitoring/PeakEnergyUse";
|
||
import ExcessiveWarning from "@/components/peak-coal-monitoring/ExcessiveWarning";
|
||
export default {
|
||
name: "PeakCoalMonitoring",
|
||
components: {
|
||
ExcessiveWarning,
|
||
PeakEnergyUse,
|
||
DeviceOnlineRate,
|
||
AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule},
|
||
computed: {
|
||
...mapState({
|
||
title: state => state.system.title,
|
||
})
|
||
},
|
||
methods: {
|
||
/**
|
||
* 图层构造器
|
||
* @param { object } props
|
||
* @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪) zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
|
||
* @param { object } props.data 图层类型
|
||
*/
|
||
pointClick ({layerType, data}) {
|
||
// todo
|
||
if(layerType == 'wz'){
|
||
this.$open(WZDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'middle',
|
||
title: '微站',
|
||
width: 1100,
|
||
onClose () {
|
||
console.log(1);
|
||
}
|
||
})
|
||
} else if(layerType === 'sdjcy'){
|
||
this.$open(SDJCYDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'custommiddle',
|
||
title: '深度检测仪',
|
||
width: 1100,
|
||
onClose () {
|
||
console.log(1);
|
||
}
|
||
})
|
||
}else if(layerType === 'zkz'){
|
||
this.$open(ZKZDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'custommiddle',
|
||
title: '质控站',
|
||
width: 1100,
|
||
onClose () {
|
||
console.log(1);
|
||
}
|
||
})
|
||
} else if(layerType === 'gbz'){
|
||
this.$open(GBZDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'custommiddle',
|
||
title: '国标站',
|
||
width: 1100,
|
||
onClose () {
|
||
console.log(1);
|
||
}
|
||
})
|
||
} else if(layerType === 'cems'){
|
||
this.$open(CEMSDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'custommiddle',
|
||
title: 'CEMS',
|
||
width: 1100,
|
||
onClose () {
|
||
console.log(1);
|
||
}
|
||
})
|
||
} else if (layerType === 'jkd'){
|
||
this.$open(pointDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'custommiddle',
|
||
title: '监控点',
|
||
width: 1100,
|
||
onClose () {
|
||
console.log(1);
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
body, html, #__nuxt, #__layout {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: #09151F;
|
||
}
|
||
|
||
.list-enter-active, .list-leave-active {
|
||
transition: all 0.5s;
|
||
}
|
||
|
||
.list-enter, .list-leave-to
|
||
/* .list-leave-active for below version 2.1.8 */
|
||
{
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="less">
|
||
@import "../../assets/styles/mixin";
|
||
|
||
.peak-coal-monitoring {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.show-top {
|
||
z-index: 2;
|
||
}
|
||
|
||
.header-panel {
|
||
position: absolute;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-flow: row;
|
||
justify-content: center;
|
||
background: url("~/assets/peakCoalMonitoring/header/header-shadow.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
pointer-events: none;
|
||
height: 112px;
|
||
|
||
.header-content {
|
||
width: 100%;
|
||
background: url("~/assets/peakCoalMonitoring/header/header-bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 112px;
|
||
box-sizing: border-box;
|
||
padding-top: 30px;
|
||
._title{
|
||
width: 100%;
|
||
font-family: AlimamaShuHeiTi-Bold;
|
||
font-size: 25px;
|
||
color: #D8F0FF;
|
||
letter-spacing: 7.68px;
|
||
text-align: center;
|
||
text-shadow: 0 0 11px #000000;
|
||
font-weight: 700;
|
||
margin: 0;
|
||
&.sub {
|
||
font-size: 18px;
|
||
}
|
||
|
||
}
|
||
.subtitle {
|
||
width: 100%;
|
||
font-family: AlimamaShuHeiTi-Bold;
|
||
font-size: 16px;
|
||
color: #D8F0FF;
|
||
letter-spacing: 7.68px;
|
||
text-align: center;
|
||
text-shadow: 0 0 11px #000000;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-panel {
|
||
width: 430px;
|
||
position: absolute;
|
||
left: 20px;
|
||
height: 960px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
pointer-events: auto;
|
||
.flex-column;
|
||
background: url("~/assets/peakCoalMonitoring/left/bg.png") left bottom no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
padding-right: 0;
|
||
|
||
.atmospheric-module-module{
|
||
height: 230px;
|
||
width: 100%;
|
||
}
|
||
.device-online-rate{
|
||
height: 230px;
|
||
}
|
||
|
||
.pollution-information-module{
|
||
height: 260px;
|
||
width: 100%;
|
||
}
|
||
|
||
.monitor-data-module{
|
||
flex: 1;
|
||
height: 0;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.right-panel {
|
||
width: 430px;
|
||
position: absolute;
|
||
right: 20px;
|
||
height: 960px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: url("~/assets/peakCoalMonitoring/right/bg.png") left bottom no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
padding-left: 0;
|
||
.flex-column;
|
||
pointer-events: auto;
|
||
.energy-profile-module{
|
||
height: 336px;
|
||
width: 100%;
|
||
}
|
||
.device-overview-module{
|
||
height: 260px;
|
||
width: 100%;
|
||
}
|
||
.alarm-overview-module{
|
||
flex: 1;
|
||
height: 0;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.center-panel{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
.footer-panel{
|
||
width: 100%;
|
||
height: 43px;
|
||
background: url("~/assets/peakCoalMonitoring/footer/footer-bg.png") left bottom no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
bottom: -6px;
|
||
pointer-events: auto;
|
||
}
|
||
}
|
||
</style>
|
||
|