192 lines
4.6 KiB
Vue
192 lines
4.6 KiB
Vue
<template>
|
|
<div class="pollution-information">
|
|
<peak-secondary-title :title="title"/>
|
|
<div class="pollution-content">
|
|
<div class="pollution-item" v-for="item of dataSource">
|
|
<div class="pollution-icon" :class="getPollutionIcon(item.state)"></div>
|
|
<div class="total-info">
|
|
<div class="title-value">
|
|
<div class="_value">{{ item.pollutionValue }}</div>
|
|
<div class="_title">{{ item.pollutionName }}</div>
|
|
</div>
|
|
<div class="unit-value">
|
|
<div class="standard-title">标准:</div>
|
|
<div class="standard-value">{{ item.standardValue }}{{ item.pollutionUnit }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
|
|
|
export default {
|
|
name: "PollutionInformation",
|
|
components: {PeakSecondaryTitle},
|
|
data() {
|
|
return {
|
|
title: '污染物信息总览',
|
|
dataSource: [
|
|
{
|
|
pollutionName: '一氧化碳',
|
|
pollutionValue: '9.0',
|
|
pollutionUnit: 'ug/m³',
|
|
standardValue: '6',
|
|
state: 1
|
|
},
|
|
{
|
|
pollutionName: '氮氧化物',
|
|
pollutionValue: '9.0',
|
|
pollutionUnit: 'ug/m³',
|
|
standardValue: '6',
|
|
state: 2
|
|
},
|
|
{
|
|
pollutionName: 'PM10',
|
|
pollutionValue: '9.0',
|
|
pollutionUnit: 'ug/m³',
|
|
standardValue: '16',
|
|
state: 0
|
|
},
|
|
{
|
|
pollutionName: 'PM2.5',
|
|
pollutionValue: '9.0',
|
|
pollutionUnit: 'ug/m³',
|
|
standardValue: '6',
|
|
state: 1
|
|
},
|
|
{
|
|
pollutionName: '二氧化硫',
|
|
pollutionValue: '9.0',
|
|
pollutionUnit: 'ug/m³',
|
|
standardValue: '6',
|
|
state: 1
|
|
},
|
|
{
|
|
pollutionName: '臭氧',
|
|
pollutionValue: '9.0',
|
|
pollutionUnit: 'ug/m³',
|
|
standardValue: '6',
|
|
state: 0
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods:{
|
|
getPollutionIcon(val){
|
|
if(val === 1){
|
|
return 'you-icon'
|
|
} else if(val === 2){
|
|
return 'chi-ping-icon'
|
|
} else {
|
|
return 'cha-icon'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "assets/styles/mixin";
|
|
|
|
.pollution-information {
|
|
height: 100%;
|
|
width: 100%;
|
|
.flex-column;
|
|
|
|
.pollution-content {
|
|
padding-top: 10px;
|
|
flex: 1;
|
|
height: 0;
|
|
display: flex;
|
|
flex-flow: row;
|
|
justify-content: start;
|
|
flex-wrap: wrap;
|
|
.pollution-item {
|
|
height: 66px;
|
|
width: 200px;
|
|
.flex-row;
|
|
&:nth-child(2n){
|
|
margin-left: 20px;
|
|
}
|
|
.pollution-icon{
|
|
width: 66px;
|
|
height: 66px;
|
|
}
|
|
|
|
.you-icon{
|
|
background: url("~/assets/peakCoalMonitoring/left/pollution-you.png") no-repeat;
|
|
}
|
|
|
|
.chi-ping-icon{
|
|
background: url("~/assets/peakCoalMonitoring/left/pollution-chi-ping.png") no-repeat;
|
|
}
|
|
|
|
.cha-icon{
|
|
background: url("~/assets/peakCoalMonitoring/left/pollution-cha.png") no-repeat;
|
|
}
|
|
|
|
.total-info{
|
|
flex: 1;
|
|
width: 0;
|
|
.flex-column;
|
|
justify-content: space-between;
|
|
.title-value{
|
|
width: 100%;
|
|
.flex-row;
|
|
justify-content: space-between;
|
|
._value{
|
|
padding-left: 10px;
|
|
font-family: YouSheBiaoTiHei;
|
|
font-size: 18px;
|
|
color: #24DCF7;
|
|
letter-spacing: 5.64px;
|
|
font-weight: 400;
|
|
text-align: right;
|
|
.text-ellipsis;
|
|
}
|
|
._title{
|
|
font-family: MicrosoftYaHei;
|
|
font-size: 14px;
|
|
color: #24DCF7;
|
|
letter-spacing: 2.26px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.unit-value{
|
|
width: 100%;
|
|
.flex-row;
|
|
justify-content: space-between;
|
|
.standard-value{
|
|
font-family: 思源黑体;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 5.64px;
|
|
font-weight: 400;
|
|
text-align: right;
|
|
.text-ellipsis;
|
|
}
|
|
.standard-title{
|
|
padding-left: 10px;
|
|
font-family: 思源黑体;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 2.26px;
|
|
font-weight: 400;
|
|
}
|
|
.standard-unit{
|
|
font-family: 思源黑体;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 2.26px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|