<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>
|
<!-- <el-tabs v-model="activeName" @tab-click="handleClick">-->
|
<!-- <el-tab-pane label="实时数据" name="first">-->
|
<!-- <RealData></RealData>-->
|
<!-- </el-tab-pane>-->
|
<!-- <el-tab-pane label="小时数居" name="second">-->
|
<!-- <HourData></HourData>-->
|
<!-- </el-tab-pane>-->
|
<!-- <el-tab-pane label="日数据" name="third">-->
|
<!-- <DayData></DayData>-->
|
<!-- </el-tab-pane>-->
|
<!-- <el-tab-pane label="人工监测数据" name="fourth">-->
|
<!-- <Detail></Detail>-->
|
<!-- </el-tab-pane>-->
|
<!-- <el-tab-pane label="ccc" name="five"></el-tab-pane>-->
|
<!-- </el-tabs>-->
|
<div class="legend">
|
<!-- <span>正常</span>-->
|
<p>超标</p>
|
<i style=" background: #4ec99c;"></i>
|
<!-- <span>预警</span>-->
|
<p>预警</p>
|
<i style=" background: orange;"></i>
|
<!-- <span>超标</span>-->
|
<p>超标</p>
|
<i style=" background: red;"></i>
|
</div>
|
<ul class="tab">
|
<li :class="active===0?'hover':''" @click='tabTaggle("RealData",0)'>实时数据</li>
|
<li :class="active===1?'hover':''" @click='tabTaggle("HourData",1)'>小时数据</li>
|
<li :class="active===2?'hover':''" @click='tabTaggle("DayData",2)'>日数据</li>
|
<li :class="active===3?'hover':''" @click='tabTaggle("Detail",3)'>人工监测数据</li>
|
</ul>
|
<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 './WasteGasRealChart'
|
import HourData from './HourData'
|
import DayData from './DayData'
|
import Detail from './Detail'
|
|
export default {
|
name: 'WasteWaterIndex',
|
props: ['storagePlaceId'],
|
components: {
|
PublicSector,
|
PublicTabs,
|
PublicVideo,
|
RealData,
|
HourData,
|
DayData,
|
Detail
|
},
|
data () {
|
return {
|
activeName: 'first',
|
// currentTab: this.current(),
|
currentTab: RealData,
|
active: 0
|
}
|
},
|
methods: {
|
tabTaggle (taggleMenu, num) {
|
this.currentTab = taggleMenu
|
this.active = num
|
},
|
current (currentTab) {
|
currentTab = RealData
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
.tab {
|
display: flex;
|
//border-bottom: 1px solid #396d83;
|
//padding: 0.02rem 0.04rem;
|
}
|
|
.tab li {
|
background-color: #243a55;
|
line-height: 0.15rem;
|
height: 0.15rem;
|
text-align: center;
|
border-radius: 5px;
|
margin-right: 0.04rem;
|
padding: 0 0.04rem;
|
}
|
|
.tab li.hover,
|
.tab li:hover {
|
background-color: #0e639e;
|
color: #fff;
|
cursor: pointer;
|
}
|
|
.legend {
|
position: absolute;
|
top: 0.05rem;
|
right: 0;
|
display: flex;
|
justify-items: center;
|
align-items: center;
|
}
|
|
.legend i {
|
display: block;
|
width: 0.2rem;
|
height: 0.09rem;
|
margin: 0 0.1rem 0 0.05rem;
|
border-radius: 0.02rem;
|
}
|
|
.legend span {
|
line-height: 0.09rem;
|
height: 0.09rem;
|
font-size: 0.06rem;
|
}
|
|
.public-part {
|
position: relative;
|
margin-bottom: 0.1rem;
|
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>
|
