433 lines
12 KiB
Vue
433 lines
12 KiB
Vue
<!--实时检查数据-->
|
||
<template>
|
||
<div class="check-data">
|
||
<secondary-title :title="title" longBg>
|
||
<template>
|
||
<div class="right-tip">
|
||
注释：表头为“污染物名称[污染物标准值]”
|
||
</div>
|
||
</template>
|
||
</secondary-title>
|
||
<div class="check-data-info">
|
||
<div class="table-info">
|
||
<div class="table-header">
|
||
<div class="table-header-item" v-for="(item,index) of tableHeaderData"
|
||
:style="`width:${tableItemWidthList[index]}%`">
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
<div class="table-body">
|
||
|
||
<vue-seamless-scroll
|
||
v-if="dataSource.length"
|
||
ref="vueSeamless"
|
||
:data="dataSource"
|
||
class="seamless-scroll"
|
||
:class-option="defaultOption"
|
||
>
|
||
<div class="table-item-body" v-for="item of dataSource">
|
||
<div class="point-name" :style="`width:${tableItemWidthList[0]}%`" :title="item.pointName">{{
|
||
item.pointName
|
||
}}
|
||
</div>
|
||
<div class="data-value" :style="`width:${tableItemWidthList[1]}%`">
|
||
<div class="_value">
|
||
{{ `${item.COValue}${item.COUnit}` }}
|
||
</div>
|
||
<div :class="getOddsRatioIcon(item.COValue,'COStandardValue')">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="data-value" :style="`width:${tableItemWidthList[2]}%`">
|
||
<div class="_value">
|
||
{{ `${item.SO2Value}${item.SO2Unit}` }}
|
||
</div>
|
||
<div :class="getOddsRatioIcon(item.SO2Value,'SO2StandardValue')">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="data-value" :style="`width:${tableItemWidthList[3]}%`">
|
||
<div class="_value">
|
||
{{ `${item.NOValue}${item.NOUnit}` }}
|
||
</div>
|
||
<div :class="getOddsRatioIcon(item.NOValue,'NOStandardValue')">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="data-value" :style="`width:${tableItemWidthList[4]}%`">
|
||
<div class="_value">
|
||
{{ `${item.O3Value}${item.O3Unit}` }}
|
||
</div>
|
||
<div :class="getOddsRatioIcon(item.O3Value,'O3StandardValue')">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="data-value" :style="`width:${tableItemWidthList[5]}%`">
|
||
<div class="_value">
|
||
{{ `${item.PM10Value}${item.PM10Unit}` }}
|
||
</div>
|
||
<div :class="getOddsRatioIcon(item.PM10Value,'PM10StandardValue')">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="data-value" :style="`width:${tableItemWidthList[6]}%`">
|
||
<div class="_value">
|
||
{{ `${item.PM25Value}${item.PM25Unit}` }}
|
||
</div>
|
||
<div :class="getOddsRatioIcon(item.PM25Value,'PM25StandardValue')">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-seamless-scroll>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||
|
||
export default {
|
||
name: "CheckData",
|
||
components: {vueSeamlessScroll},
|
||
data() {
|
||
return {
|
||
title: '实时检查数据',
|
||
tableItemWidthList: [12, 16, 16, 16, 13, 14, 13],
|
||
standardValue: {
|
||
COStandardValue: 0.5,
|
||
SO2StandardValue: 30,
|
||
NOStandardValue: 10,
|
||
O3StandardValue: 80,
|
||
PM10StandardValue: 50,
|
||
PM25StandardValue: 40
|
||
},
|
||
tableHeaderData: ['监测设备', '一氧化碳[0.5%VOL]', '二氧化硫[30mg/m³]', '氮氧化物[10mg/L]', '臭氧[80⏜ppm]', 'PM10[50μg/m³]', 'PM2.5[40μg/m³]'],
|
||
dataSource: [
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
},
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
},
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
},
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
},
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
},
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
},
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
},
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
},
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
},
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
},
|
||
{
|
||
pointName: '监测设备名称',
|
||
COValue: 2,
|
||
COUnit: '%VOL',
|
||
SO2Value: 30,
|
||
SO2Unit: 'mg/m³',
|
||
NOValue: 20,
|
||
NOUnit: 'mg/L',
|
||
O3Value: 10,
|
||
O3Unit: 'ppm',
|
||
PM10Value: 10,
|
||
PM10Unit: 'μg/m³',
|
||
PM25Value: 30,
|
||
PM25Unit: 'μg/m³'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
defaultOption() {
|
||
return {
|
||
step: 0.3, // 数值越大速度滚动越快
|
||
limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
|
||
hoverStop: true, // 是否开启鼠标悬停stop
|
||
direction: 1, // 0向下 1向上 2向左 3向右
|
||
openWatch: true, // 开启数据实时监控刷新dom
|
||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
//判断数值是上升还是下降
|
||
getOddsRatioIcon(val, valType) {
|
||
if (val > this.standardValue[valType]) {
|
||
return 'odds-ratio-up-icon'
|
||
} else if (val < this.standardValue[valType]) {
|
||
return 'odds-ratio-reduction-icon'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import "assets/styles/mixin";
|
||
|
||
.check-data {
|
||
margin-top: 43px;
|
||
height: 1100px;
|
||
width: 100%;
|
||
background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
|
||
/* border: 1px inset transparent; !* 先将边框颜色设置为透明 *!
|
||
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
|
||
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
||
.flex-column;
|
||
overflow: hidden;
|
||
|
||
.right-tip {
|
||
height: 100%;
|
||
font-family: MicrosoftYaHei;
|
||
font-size: 29.97px;
|
||
color: #6AC4FF;
|
||
letter-spacing: 1.97px;
|
||
text-align: right;
|
||
font-weight: 400;
|
||
padding-right: 10px;
|
||
.flex-row;
|
||
}
|
||
|
||
.check-data-info {
|
||
flex: 1;
|
||
padding: 30px 20px 0 20px;
|
||
height: 0;
|
||
|
||
.table-info {
|
||
width: 100%;
|
||
height: 100%;
|
||
.flex-column;
|
||
|
||
.table-header {
|
||
height: 77px;
|
||
background-color: rgba(35, 140, 255, 0.2);
|
||
padding: 0 20px;
|
||
.flex-row;
|
||
|
||
.table-header-item {
|
||
font-family: MicrosoftYaHei-Bold;
|
||
font-size: 29.97px;
|
||
color: #37EAFF;
|
||
letter-spacing: 0;
|
||
text-align: left;
|
||
line-height: 34.25px;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.table-body {
|
||
height: calc(100% - 77px);
|
||
|
||
.seamless-scroll {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table-item-body {
|
||
height: 77px;
|
||
background: rgba(21, 77, 160, 0.20);
|
||
margin-top: 20px;
|
||
.flex-row;
|
||
|
||
.point-name {
|
||
font-family: MicrosoftYaHei-Bold;
|
||
font-size: 29.97px;
|
||
color: #FFFFFF;
|
||
letter-spacing: 0;
|
||
line-height: 34.25px;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
.text-ellipsis;
|
||
}
|
||
|
||
.data-value {
|
||
.flex-row;
|
||
justify-content: center;
|
||
|
||
._value {
|
||
font-family: MicrosoftYaHei-Bold;
|
||
font-size: 29.97px;
|
||
color: #FFFFFF;
|
||
letter-spacing: 0;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.odds-ratio-up-icon {
|
||
width: 23px;
|
||
height: 25px;
|
||
background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.odds-ratio-reduction-icon {
|
||
width: 22px;
|
||
height: 26px;
|
||
background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat;
|
||
padding-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 4px;
|
||
height: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
border-radius: 5px;
|
||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||
background-color: rgba(21, 77, 160, 0.20);;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||
border-radius: 5px;
|
||
background-color: #d3dce6;
|
||
}
|
||
</style>
|