<!-- 日数据 -->
|
<template>
|
<div id="Tab">
|
<PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
|
<div class="form-echrts">
|
<div class="from-search">
|
<div class="pickerMon">
|
<div class="pickerData">
|
<span> 开始时间:</span>
|
<span class="pickerTable">
|
<el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
|
</span>
|
</div>
|
<div class="pickerData">
|
<span>结束时间:</span>
|
<span class="pickerTable">
|
<el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker>
|
</span>
|
</div>
|
</div>
|
<!-- <div>-->
|
<!-- 采样点数:-->
|
<!-- <el-select v-model="formInline.region" placeholder="50">-->
|
<!-- <el-option label="0" value="0"></el-option>-->
|
<!-- <el-option label="25" value="25"></el-option>-->
|
<!-- <el-option label="50" value="50"></el-option>-->
|
<!-- <el-option label="75" value="75"></el-option>-->
|
<!-- <el-option label="100" value="100"></el-option>-->
|
<!-- </el-select>-->
|
<!-- </div>-->
|
<div class="detailbtn hover-bottom">查询</div>
|
<div class="detailbtn hover-bottom">明细表</div>
|
</div>
|
<div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegasday">
|
</div>
|
</div>
|
<!-- <!– 明细弹框 –>-->
|
<!-- <el-dialog :visible.sync="dialogVisible"-->
|
<!-- :append-to-body="true"-->
|
<!-- :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"-->
|
<!-- width="68%"-->
|
<!-- center-->
|
<!-- v-dialogDrag-->
|
<!-- >-->
|
<!-- <div class="el-dialog-div" style="height: 500px">-->
|
<!-- <public-detailed-list v-bind="$attrs"></public-detailed-list>-->
|
<!-- </div>-->
|
<!-- </el-dialog>-->
|
</div>
|
</template>
|
|
<script>
|
// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
|
import PublicDataStandard from '../PublicDataStandard'
|
import 'dayjs/locale/es'
|
import dayjs from 'dayjs'
|
import mapApi from '@/api/mapApi'
|
|
export default {
|
name: 'DayData',
|
components: {
|
// PublicDetailedList
|
PublicDataStandard
|
},
|
data () {
|
return {
|
// tab栏传递接收数据
|
dataStandard: [
|
{
|
current: {
|
name: '氮氧化物',
|
val: 29.93
|
},
|
standard: {
|
name: '标准',
|
val: 100
|
}
|
},
|
{
|
current: {
|
name: '二氧化硫',
|
val: 17.34
|
},
|
standard: {
|
name: '标准',
|
val: 50
|
}
|
},
|
{
|
current: {
|
name: '烟尘',
|
val: 6.93
|
},
|
standard: {
|
name: '标准',
|
val: 30
|
}
|
},
|
{
|
current: {
|
name: '废气流量',
|
val: 120
|
},
|
standard: {
|
name: '',
|
val: null
|
}
|
}],
|
formInline: {
|
timeStart: null,
|
timeEnd: null
|
},
|
dataType: 1,
|
myChart: null,
|
exhbzz: null,
|
jcdID: 1,
|
exhbzzList: [],
|
bzz: null,
|
bzzList: []
|
}
|
},
|
mounted () {
|
this.$nextTick(() => {
|
this.initnData()
|
})
|
},
|
methods: {
|
async initnData () {
|
// 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
|
this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss')
|
const data = {
|
onLineMonEmissPointId: 23,
|
monItemId: 28,
|
beginTime: this.formInline.timeStart,
|
endTime: this.formInline.timeEnd,
|
dataType: this.dataType
|
}
|
const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo
|
// console.log(result)
|
this.get24HourDate(result)
|
},
|
get24HourDate (res) {
|
if (res.length > 0) {
|
// 处理数据开始
|
const d = res
|
const nameList = [] // 存放图例
|
const dateList = [] // 存放时间
|
const dataList = [] // 存放数据
|
let data
|
const bzh = []
|
|
// wrwIDS = []
|
|
for (let i = 0; i < d.length; i++) {
|
if (d[i].MonItemId === '29') {
|
continue
|
}
|
// 20190430 add 获取监测点id 污染物id 检测项id
|
// getWRW(d[i])
|
const MonTimeStr = d[i].MonTimeStr
|
|
const d1 = MonTimeStr.split('/')
|
// var d2=d1[2].split(' ');
|
let strDate
|
if (d1[1] > 9) {
|
// if(d2[0]>9){
|
strDate = MonTimeStr.substring(8, 10) + '日'
|
// }else {
|
// strDate=MonTimeStr.substring(8,9)+"日";
|
// }
|
} else {
|
// if(d2[0]>9){
|
strDate = MonTimeStr.substring(7, 9) + '日'
|
// }else {
|
// strDate=MonTimeStr.substring(7,8)+"日";
|
// }
|
}
|
|
if (nameList.length === 0) {
|
nameList.push(d[i].PoltmtrlName.trim())
|
dateList.push(strDate)
|
|
bzh.push(d[i].StdValue)
|
data = {
|
name: d[i].PoltmtrlName.trim(),
|
data: [d[i].MonQty]
|
}
|
dataList.push(data)
|
} else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) {
|
nameList.push(d[i].PoltmtrlName)
|
bzh.push(d[i].StdValue)
|
data = {
|
name: d[i].PoltmtrlName.trim(),
|
data: [d[i].MonQty]
|
}
|
dataList.push(data)
|
} else {
|
if (dateList.indexOf(strDate) < 0) {
|
dateList.push(strDate)
|
}
|
for (var j = 0; j < dataList.length; j++) {
|
if (d[i].PoltmtrlName.trim() === dataList[j].name) {
|
dataList[j].data.push(d[i].MonQty)
|
}
|
}
|
}
|
}
|
// 处理数据结束
|
|
var divid = 'mychart1eff'
|
|
var title = name
|
|
var lengList = []
|
var objTemp
|
|
for (var l = 0; l < nameList.length; l++) {
|
var obj
|
var iconurl
|
if (nameList[l] === '二氧化硫') {
|
iconurl = 'image://../assets/imgs/legend/SO2.png'
|
} else if (nameList[l] === '氮氧化物') {
|
iconurl = 'image://../assets/imgs/legend/NOX.png'
|
} else if (nameList[l] === '烟尘') {
|
iconurl = 'image://../assets/imgs/legend/YanChen.png'
|
} else if (nameList[l] === '非甲烷总烃') {
|
iconurl = 'image://../assets/imgs/legend/grn.png'
|
} else if (nameList[l] === '温度') {
|
iconurl = 'image://../assets/imgs/legend/WenDu.png'
|
} else {
|
iconurl = 'image://../assets/imgs/legend/VOCs.png'
|
}
|
|
if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后
|
objTemp = {
|
name: nameList[l],
|
icon: iconurl,
|
textStyle: {
|
color: '#ccc'
|
},
|
itemWidth: 20,
|
itemHeight: 5
|
}
|
} else {
|
obj = {
|
name: nameList[l],
|
icon: iconurl,
|
textStyle: {
|
color: '#ccc'
|
},
|
itemWidth: 20,
|
itemHeight: 5
|
}
|
lengList.push(obj)
|
}
|
|
this.bzz = {
|
name: nameList[l],
|
bzhui: bzh[l]
|
}
|
this.bzzList.push(this.bzz)
|
}
|
lengList.push(objTemp)
|
|
const legend = lengList
|
const xdata = dateList.reverse()
|
const ydatas = []
|
|
for (let j = 0; j < nameList.length; j++) {
|
var zdcbcolor, zxcolor
|
if (nameList[j] === 'COD') {
|
zdcbcolor = 'red'
|
zxcolor = '#fff21c'
|
} else if (nameList[j] === '氮氧化物') {
|
zdcbcolor = 'red'
|
zxcolor = '#00B0F0'
|
} else if (nameList[j] === '总磷') {
|
zdcbcolor = 'red'
|
zxcolor = '#f48183'
|
} else if (nameList[j] === '废气流量') {
|
zdcbcolor = 'red'
|
zxcolor = '#70ff49'
|
} else {
|
zdcbcolor = 'red'
|
zxcolor = '#d9f2f4'
|
}
|
|
let sdata = []
|
|
for (let k = 0; k < dataList.length; k++) {
|
if (nameList[j].trim() === dataList[k].name.trim()) {
|
sdata = dataList[k].data.reverse()
|
}
|
}
|
|
const ydata = {
|
name: nameList[j],
|
data: sdata,
|
zdcbcolor: zdcbcolor,
|
zxcolor: zxcolor,
|
bzz: bzh[j]
|
}
|
ydatas.push(ydata)
|
}
|
|
const yname = '浓度(mg/l)'
|
this.CreateChart(divid, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype)
|
}
|
},
|
CreateChart (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
|
this.myChart = this.$echarts.init(this.$refs.wastegasday)
|
this.myChart.clear()
|
let dataUnit = ''
|
if (datatype === 1) {
|
dataUnit = '气量(m³/d)'
|
} else {
|
dataUnit = '气量(m³/h)'
|
}
|
|
const serLists = []
|
for (let j = 0; j < ydatas.length; j++) {
|
const len = ydatas[j].data.length
|
for (let k = 0; k < len; k++) {
|
const it = ydatas[j].data[k]
|
const it2 = parseFloat(it).toFixed(2)
|
ydatas[j].data[k] = it2
|
}
|
}
|
|
for (let i = 0; i < ydatas.length; i++) {
|
// const zdcbcolor = ydatas[i].zdcbcolor
|
const bzz = ydatas[i].bzz
|
let obj
|
if (bzz == null) {
|
obj = {
|
name: ydatas[i].name,
|
symbol: 'circle', // 折点形状
|
symbolSize: 10, // 大小
|
smooth: false, // 直线 ，true 为曲线
|
yAxisIndex: 1,
|
// itemStyle: {
|
// normal: {
|
// color: function (c) { // 根据value 显示不同的折点颜色
|
// let biaozhuiz
|
// for (let i = 0; i < exhbzzList.length; i++) {
|
// if (exhbzzList[i].name === c.seriesName) {
|
// biaozhuiz = exhbzzList[i].bzhui
|
// }
|
// }
|
// if (c.value > 999999999999) {
|
// return zdcbcolor
|
// } else {
|
// return '#33c95f'
|
// }
|
// },
|
// lineStyle: { // 折线的颜色
|
// color: ydatas[i].zxcolor,
|
// width: 5
|
// },
|
// borderColor: ydatas[i].zxcolor, // 折点边框的颜色
|
// label: { // 显示值
|
// show: false
|
// }
|
// }
|
// },
|
type: 'line',
|
data: ydatas[i].data
|
}
|
} else {
|
obj = {
|
name: ydatas[i].name,
|
symbol: 'circle', // 折点形状
|
symbolSize: 10, // 大小
|
smooth: false, // 直线 ，true 为曲线
|
// itemStyle: {
|
// normal: {
|
// color: function (c) { // 根据value 显示不同的折点颜色
|
// let biaozhuiz
|
// for (let i = 0; i < exhbzzList.length; i++) {
|
// if (exhbzzList[i].name == c.seriesName) {
|
// biaozhuiz = exhbzzList[i].bzhui
|
// }
|
// }
|
// if (c.value > biaozhuiz) {
|
// return zdcbcolor
|
// } else if (c.value > biaozhuiz * 0.9) {
|
// return '#FFA500'
|
// } else {
|
// return '#33c95f'
|
// }
|
// },
|
// lineStyle: { // 折线的颜色
|
// color: ydatas[i].zxcolor,
|
// width: 5
|
// },
|
// borderColor: ydatas[i].zxcolor, // 折点边框的颜色
|
// label: { // 显示值
|
// show: false
|
// }
|
// }
|
// },
|
type: 'line',
|
data: ydatas[i].data,
|
markLine: { // 平均值 ， 和 指标上限
|
symbol: 'none',
|
data: [
|
/* {
|
type: 'average',
|
name: '日平均值',
|
label: {
|
normal: {
|
position: 'end', //显示位置
|
formatter: ydatas[i].name+'\n日平均值'+'{c}' //显示样式
|
}
|
},
|
lineStyle:{ // 颜色
|
color: 'yellow',
|
type:'solid'
|
}
|
}, */ {
|
label: {
|
normal: {
|
position: 'end',
|
formatter: '' // ydatas[i].name+'标准值'//+'{c}'
|
}
|
},
|
name: '标准值',
|
yAxis: bzz,
|
lineStyle: {
|
color: ydatas[i].zxcolor,
|
type: 'dashed',
|
width: 2
|
}
|
}
|
]
|
}
|
}
|
}
|
serLists.push(obj)
|
}
|
|
const option = {
|
tooltip: { // 提示框
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
color: '#1a4245'
|
}
|
},
|
formatter: function (params) {
|
let s = params[0].name + '<br/>'
|
for (let i = 0; i < params.length; i++) {
|
// const name = params[i].name
|
// 图表title名称
|
const seriesName = params[i].seriesName
|
// 值
|
const value = params[i].value
|
let valueFliter
|
if (value === 'NaN') {
|
valueFliter = ''
|
} else {
|
// valueFliter = formatter(value)
|
valueFliter = value
|
}
|
let maker = params[i].marker
|
if (seriesName === '二氧化硫') {
|
maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
|
} else if (seriesName === '氮氧化物') {
|
maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>'
|
} else if (seriesName === '烟尘') {
|
maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
|
} else if (seriesName === '温度') {
|
maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>'
|
} else if (seriesName === '废气流量') {
|
maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#70ff49;"></span>'
|
}
|
s += maker + seriesName + ':' + valueFliter + '<br />'
|
}
|
return s
|
}
|
},
|
toolbox: { // 打印等工具
|
show: false,
|
feature: {
|
saveAsImage: {}
|
}
|
},
|
grid: { // 网格
|
top: '20%',
|
left: '5%'
|
// containLabel: true
|
},
|
legend: { // 图例
|
data: legend
|
},
|
dataZoom: [{
|
type: 'inside',
|
start: 0,
|
end: 100
|
}, {
|
start: 0,
|
end: 100,
|
show: false,
|
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
handleSize: '80%',
|
handleStyle: {
|
color: '#fff',
|
shadowBlur: 3,
|
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
shadowOffsetX: 2,
|
shadowOffsetY: 2
|
}
|
}],
|
xAxis: { // x 轴设置
|
type: 'category',
|
boundaryGap: false,
|
axisLabel: { // x轴全部显示
|
// rotate: 20,
|
// interval: 0,
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
splitLine: { // 网格垂直线为 虚线
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
axisTick: { // x 轴刻度显示
|
show: false
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#FFFFFF',
|
width: 1// 这里是为了突出显示加上的
|
}
|
},
|
data: xdata
|
},
|
yAxis: [{
|
type: 'value',
|
name: yname,
|
// max: function (value) {
|
// let max_val_list = [] // 所有显示折线的标准值
|
// if (exhbzzList && exhbzzList.length > 0) {
|
// if (value.max != '-Infinity') { // 获取所有监测指标的max值 2020/12/31
|
// valMax = parseInt(value.max + 5)
|
// }
|
// $.each(exhbzzList, function (index, item) {
|
// if (item.bzhui != null) {
|
// max_val_list.push(item.bzhui)
|
// }
|
// })
|
// }
|
// max_val_list = max_val_list.sort(function (a, b) {
|
// return a - b
|
// }) // 排序
|
// const ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1]
|
// return parseInt(ma)
|
// },
|
axisLabel: {
|
formatter: '{value}',
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
axisPointer: {
|
snap: true
|
},
|
splitLine: {
|
show: false
|
}, // y轴 网格线不显示,
|
axisLine: {
|
lineStyle: {
|
color: '#FFFFFF',
|
width: 1// 这里是为了突出显示加上的
|
}
|
}
|
}, {
|
type: 'value',
|
name: dataUnit,
|
max: function (value) {
|
const ma = value.max > 12 ? value.max : 120
|
return parseInt(ma)
|
},
|
axisLabel: {
|
formatter: '{value}',
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
axisPointer: {
|
snap: true
|
},
|
splitLine: {
|
show: false
|
}, // y轴 网格线不显示,
|
axisLine: {
|
lineStyle: {
|
color: '#FFFFFF',
|
width: 1// 这里是为了突出显示加上的
|
}
|
}
|
}],
|
series: serLists
|
}
|
this.myChart.setOption(option)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
|
.animation {
|
.infomation {
|
padding: 0.02rem 0.04rem;
|
|
.grid-content {
|
font-size: 0.08rem;
|
background-color: #2e4967;
|
text-align: center;
|
border-radius: 0.01rem;
|
height: 0.15rem;
|
line-height: 0.15rem;
|
margin-right: 0.04rem;
|
padding: 0 0.04rem
|
}
|
}
|
}
|
|
.form-echrts {
|
width: 100%;
|
border-top: 1px solid #396d83;
|
//margin: 10px 10px 10px 10px;
|
.from-search {
|
display: flex;
|
padding: 0.02rem;
|
|
> div {
|
margin-left: 10px
|
}
|
|
.pickerMon {
|
display: flex;
|
|
> div:first-child {
|
margin-right: 10px;
|
}
|
|
.pickerData {
|
flex: 1;
|
display: flex;
|
|
> span {
|
line-height: 22px
|
}
|
|
.pickerTable {
|
margin-left: 3px;
|
}
|
}
|
}
|
|
/deep/ .el-date-editor--datetime {
|
width: 100%;
|
}
|
|
/deep/ .el-input__inner {
|
position: relative;
|
width: 1rem;
|
background-color: #2e4967;
|
color: #fff;
|
font-size: 0.08rem;
|
height: 0.15rem;
|
padding: 0;
|
border: none;
|
text-align: center;
|
z-index: 9999;
|
//padding-left:20px ;
|
//padding: 0!important;
|
}
|
|
/deep/ .el-input__icon {
|
display: block;
|
width: 1rem;
|
height: 0.15rem;
|
line-height: 0.15rem;
|
cursor: pointer;
|
font-size: 0;
|
}
|
|
input::-webkit-calendar-picker-indicator {
|
opacity: 100;
|
}
|
|
.detailbtn {
|
background-color: #2e4967;
|
text-align: center;
|
padding: 0 7px;
|
height: 0.15rem;
|
line-height: 0.15rem;
|
border-radius: 4px;
|
margin-right: 6px;
|
}
|
}
|
|
.el-dialog-div {
|
overflow: auto;
|
}
|
|
#echarts {
|
margin: 0;
|
padding: 0;
|
}
|
}
|
</style>
|
