<template>
|
<!-- 污染物消减量 -->
|
<div class="panel">
|
<div class="panel-header">地区水管理员</div>
|
<!-- <div>
|
<line-chart :chart-data="chartData" :width="'100%'" :height="'22vh'"></line-chart>
|
</div> -->
|
<!-- <div> -->
|
<dv-scroll-board :config="config" style="width:100%;height:100%" />
|
<!-- </div> -->
|
|
</div>
|
</template>
|
<script>
|
// import lineChart from '@/components/echarts/lineChart'
|
// import { getEnviromentAnalysisData } from '@/cpx_sewage/api/statisticAnalysis/benefitAnalysis'
|
import jsonDate from './json.json'
|
export default {
|
components: {
|
// mainEcharts,
|
// lineChart
|
},
|
data() {
|
return {
|
config: {
|
header: ['地区', '水管员姓名', '联系方式'],
|
data: [
|
['恰勒什海乡', '张三', '13821200000'],
|
['恰勒什海乡', '王大海', '行2列3'],
|
['恰勒什海乡', '李', '行3列3'],
|
['恰勒什海乡', '行4列2', '13821200000'],
|
['恰勒什海乡', '行5列2', '行5列3'],
|
['恰勒什海乡', '行6列2', '行6列3'],
|
['恰勒什海乡', '行7列2', '13821200000'],
|
['恰勒什海乡', '行8列2', '行8列3'],
|
['恰勒什海乡', '行9列2', '行9列3'],
|
['恰勒什海乡', '行10列2', '行10列3']
|
],
|
headerBGC: '',
|
oddRowBGC: '#0b283e',
|
evenRowBGC: '#324d68'
|
},
|
|
datetiems: [],
|
chartData: {
|
time: [],
|
Data: [
|
{
|
data: [],
|
type: 'line',
|
name: 'BOD',
|
connectNulls: true
|
},
|
{
|
data: [],
|
type: 'line',
|
name: 'TN',
|
connectNulls: true
|
},
|
{
|
data: [],
|
type: 'line',
|
name: 'NH3-N',
|
connectNulls: true
|
},
|
{
|
data: [],
|
type: 'line',
|
name: 'TP',
|
connectNulls: true
|
}
|
],
|
config: {
|
name: ['BOD', 'TP', 'TN', 'NH3-N'],
|
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
|
textStyleColor: '#fff',
|
XlineColor: '#022C5A',
|
YlineColor: '#022C5A'
|
}
|
}
|
}
|
},
|
mounted() {
|
this.getData()
|
// this.last30days()
|
},
|
methods: {
|
getData() {
|
const res = jsonDate
|
// getEnviromentAnalysisData(data).then((res) => {
|
this.chartData.time = res.data.contaminantsChartVo ? res.data.contaminantsChartVo.month : []
|
if (res.data && res.data.contaminantsChartVo) {
|
res.data.contaminantsChartVo.groupMap.BOD.forEach((val) => {
|
this.chartData.Data.forEach((vals) => {
|
if (val.abbreviation == vals.name) {
|
if (val.totalAttenuation) {
|
vals.data.push(val.totalAttenuation)
|
} else {
|
vals.data.push('')
|
}
|
}
|
})
|
})
|
res.data.contaminantsChartVo.groupMap.TP.forEach((val) => {
|
this.chartData.Data.forEach((vals) => {
|
if (val.abbreviation == vals.name) {
|
vals.data.push(val.totalAttenuation)
|
}
|
})
|
})
|
res.data.contaminantsChartVo.groupMap.TN.forEach((val) => {
|
this.chartData.Data.forEach((vals) => {
|
if (val.abbreviation == vals.name) {
|
vals.data.push(val.totalAttenuation)
|
}
|
})
|
})
|
res.data.contaminantsChartVo.groupMap['NH3-N'].forEach((val) => {
|
this.chartData.Data.forEach((vals) => {
|
if (val.abbreviation == vals.name) {
|
vals.data.push(val.totalAttenuation)
|
}
|
})
|
})
|
} else {
|
this.chartData.Data.forEach((vals) => {
|
vals.data = []
|
})
|
}
|
// })
|
},
|
last30days() {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 6)
|
this.datetiems = [this.formatDate(start), this.formatDate(end)]
|
this.getEnviromentAnalysisData()
|
},
|
// 处理日期
|
formatDate(date) {
|
let m = date.getMonth() + 1
|
if (m < 10) m = '0' + m
|
// let d = date.getDate()
|
// if (d < 10) d = '0' + d
|
return date.getFullYear() + '-' + m
|
},
|
getEnviromentAnalysisData() {
|
let data = {
|
current: 1,
|
endTime: this.datetiems[1],
|
pageSize: 30,
|
startTime: this.datetiems[0],
|
stationTypeCode: 'zdgw',
|
timeDime: 'month',
|
timeRange: this.datetiems,
|
stationId: ''
|
}
|
getEnviromentAnalysisData(data)
|
.then((res) => {
|
this.chartData.time = res.data.contaminantsChartVo ? res.data.contaminantsChartVo.month : []
|
if (res.data && res.data.contaminantsChartVo) {
|
res.data.contaminantsChartVo.groupMap.BOD.forEach((val) => {
|
this.chartData.Data.forEach((vals) => {
|
if (val.abbreviation == vals.name) {
|
if (val.totalAttenuation) {
|
vals.data.push(val.totalAttenuation)
|
} else {
|
vals.data.push('')
|
}
|
}
|
})
|
})
|
res.data.contaminantsChartVo.groupMap.TP.forEach((val) => {
|
this.chartData.Data.forEach((vals) => {
|
if (val.abbreviation == vals.name) {
|
vals.data.push(val.totalAttenuation)
|
}
|
})
|
})
|
res.data.contaminantsChartVo.groupMap.TN.forEach((val) => {
|
this.chartData.Data.forEach((vals) => {
|
if (val.abbreviation == vals.name) {
|
vals.data.push(val.totalAttenuation)
|
}
|
})
|
})
|
res.data.contaminantsChartVo.groupMap['NH3-N'].forEach((val) => {
|
this.chartData.Data.forEach((vals) => {
|
if (val.abbreviation == vals.name) {
|
vals.data.push(val.totalAttenuation)
|
}
|
})
|
})
|
} else {
|
this.chartData.Data.forEach((vals) => {
|
vals.data = []
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// 标题
|
.info-title {
|
height: 4.4vh;
|
background: url('../../../image/screen/bg_title.png') no-repeat;
|
display: flex;
|
align-items: center;
|
color: #fff;
|
font-family: 'screen-font';
|
margin-bottom: 2%;
|
.info-title-text {
|
padding-left: 2vw;
|
font-size: 1rem;
|
}
|
}
|
</style>
|
