<template>
|
<public-sector>
|
<template v-slot:tabs>
|
<public-tabs :storagePlaceId="storagePlaceId"></public-tabs>
|
</template>
|
<template v-slot:publicPart>
|
<div class="public-part">
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<div class="navigation">
|
<div class="navigation-left">
|
<div :class="active===0?'hover':''" class="uncheck" @click='tabTaggle("RealData",0)'>实时数据</div>
|
<div :class="active===1?'hover':''" class="uncheck" @click='tabTaggle("HourData",1)'>小时数据</div>
|
<div :class="active===2?'hover':''" class="uncheck" @click='tabTaggle("DayData",2)'>日数据</div>
|
<div :class="active===3?'hover':''" class="uncheck" @click='tabTaggle("Detail",3)'>人工监测数据</div>
|
</div>
|
<div class="navigation-right" v-if="active !== 3">
|
<p>正常</p>
|
<i style=" background: #4ec99c;"></i>
|
<p>预警</p>
|
<i style=" background: #fc9303;"></i>
|
<p>超标</p>
|
<i style=" background: #fc1d04;"></i>
|
</div>
|
</div>
|
<component :is="currentTab" ref="RealData"></component>
|
</div>
|
</template>
|
<!-- <template v-slot:video>
|
<public-video></public-video>
|
</template>-->
|
</public-sector>
|
</template>
|
|
<script>
|
|
import PublicTabs from './PublicTabs'
|
import PublicVideo from '../PublicVideo'
|
import PublicSector from '../PublicSector'
|
// 图表组件
|
import RealData from './WasteWaterRealChart'
|
import HourData from './WasteWaterHoursChart'
|
import DayData from './WasteWaterDayChart'
|
import Detail from './Detail'
|
|
export default {
|
name: 'WasteWaterIndex',
|
props: ['storagePlaceId'],
|
components: {
|
PublicSector,
|
PublicTabs,
|
PublicVideo,
|
RealData,
|
HourData,
|
DayData,
|
Detail
|
},
|
data () {
|
return {
|
activeName: 'first',
|
currentTab: RealData,
|
active: 0
|
}
|
},
|
methods: {
|
tabTaggle (taggleMenu, num) {
|
this.currentTab = taggleMenu
|
this.active = num
|
},
|
current (currentTab) {
|
currentTab = RealData
|
},
|
handleClick (tab, event) {
|
console.log(tab, event)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.navigation {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-left: 0.07rem;
|
border-bottom: 1px #243a55 solid;
|
.navigation-left {
|
display: flex;
|
align-items: center;
|
|
.uncheck {
|
cursor: pointer;
|
margin-left: -0.05rem;
|
width: .8rem;
|
padding: 6px 0;
|
/*border: 1px solid #2b87c8;*/
|
/*border-radius: 4px;*/
|
background-position: 0 0;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url("../../../../public/assets/images/map-pages/title_bg.png");
|
text-align: center;
|
vertical-align: middle !important;
|
color: #fff;
|
}
|
|
.default-uncheck {
|
background-color: #0e639e;
|
color: #C0C0C0;
|
cursor: pointer;
|
}
|
|
.hover {
|
background-image: url("../../../../public/assets/images/map-pages/title_bg2.png");
|
color: #ffffff;
|
cursor: pointer;
|
}
|
|
.hover:hover {
|
cursor: pointer;
|
border-radius: 4px;
|
text-align: center;
|
color: #F0FFFF;
|
}
|
}
|
|
.navigation-left :hover {
|
color: #fff;
|
cursor: pointer;
|
}
|
|
.navigation-right {
|
display: flex;
|
align-items: center;
|
|
i {
|
display: block;
|
width: 0.1rem;
|
height: 0.1rem;
|
margin: 0 0.1rem 0 0.05rem;
|
border-radius: 50%;
|
border: 2px #ffffff solid;
|
}
|
}
|
}
|
|
.public-part {
|
position: relative;
|
background-color: @background-color;
|
font-size: 0.06rem;
|
font-weight: normal;
|
padding: 0.04rem 0;
|
border: 1px solid #396d83;
|
}
|
|
.public-part span:nth-child(1) {
|
position: absolute;
|
left: -2px;
|
top: -2px;
|
padding: 6px;
|
border-style: solid;
|
border-color: #02a6b5;
|
border-width: 2px 0 0 2px;
|
}
|
|
.public-part span:nth-child(2) {
|
position: absolute;
|
right: -2px;
|
top: -2px;
|
padding: 6px;
|
border-style: solid;
|
border-color: #02a6b5;
|
border-width: 2px 2px 0 0;
|
}
|
|
.public-part span:nth-child(3) {
|
position: absolute;
|
right: -2px;
|
bottom: -2px;
|
padding: 6px;
|
border-style: solid;
|
border-color: #02a6b5;
|
border-width: 0 2px 2px 0;
|
}
|
|
.public-part span:nth-child(4) {
|
position: absolute;
|
left: -2px;
|
bottom: -2px;
|
padding: 6px;
|
border-style: solid;
|
border-color: #02a6b5;
|
border-width: 0 0 2px 2px;
|
}
|
|
</style>
|
