|
|
|
|
@ -40,7 +40,7 @@
|
|
|
|
|
</picker>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 在template部分,找到年月日选择器部分,修改为以下代码 -->
|
|
|
|
|
<!-- 年月日选择器 -->
|
|
|
|
|
<view class="uni-form-item uni-column">
|
|
|
|
|
<radio-group class="radio-group" @change="radioChange">
|
|
|
|
|
<label class="radio-label" v-for="(item, index) in timList" :key="item.value">
|
|
|
|
|
@ -128,8 +128,8 @@
|
|
|
|
|
zt: '',
|
|
|
|
|
date: new Date().getFullYear(),
|
|
|
|
|
array: [],
|
|
|
|
|
index: '',
|
|
|
|
|
index1: '',
|
|
|
|
|
index: 0, // 改为0,默认选择第一个
|
|
|
|
|
index1: 0,
|
|
|
|
|
array1: [],
|
|
|
|
|
arrays: [],
|
|
|
|
|
list: [],
|
|
|
|
|
@ -144,9 +144,8 @@
|
|
|
|
|
enableScroll: false,
|
|
|
|
|
legend: {},
|
|
|
|
|
xAxis: {
|
|
|
|
|
disabled: false, // 启用X轴
|
|
|
|
|
// 不设置itemCount,因为我们自定义显示的数据
|
|
|
|
|
gridType: 'dash', // 网格类型
|
|
|
|
|
disabled: false,
|
|
|
|
|
gridType: 'dash',
|
|
|
|
|
dashLength: 2,
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
@ -176,8 +175,8 @@
|
|
|
|
|
allNum: '',
|
|
|
|
|
isLastpage: '',
|
|
|
|
|
intervalId: null,
|
|
|
|
|
loadStatus: 'more', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
|
|
|
|
|
isLoadMore: false, //是否加载中
|
|
|
|
|
loadStatus: 'more',
|
|
|
|
|
isLoadMore: false,
|
|
|
|
|
show: false,
|
|
|
|
|
show1: false,
|
|
|
|
|
top: 0,
|
|
|
|
|
@ -185,7 +184,7 @@
|
|
|
|
|
yearStr: null,
|
|
|
|
|
stationName1: '',
|
|
|
|
|
stationCode1: null,
|
|
|
|
|
stationCode: '',
|
|
|
|
|
stationCode: '', // 趋势图站点编码
|
|
|
|
|
arrays1: [],
|
|
|
|
|
zxtdata: [],
|
|
|
|
|
timList: [{
|
|
|
|
|
@ -203,9 +202,11 @@
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
current: 0,
|
|
|
|
|
dateqs:new Date().getFullYear(),
|
|
|
|
|
datetwo:currentDate,
|
|
|
|
|
riqinumber:'yearMonth',
|
|
|
|
|
dateqs: new Date().getFullYear().toString(), // 改为字符串
|
|
|
|
|
datetwo: currentDate,
|
|
|
|
|
riqinumber: 'yearMonth',
|
|
|
|
|
startDate: '', // 添加起始日期
|
|
|
|
|
endDate: '', // 添加结束日期
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
@ -214,20 +215,27 @@
|
|
|
|
|
var pxToRpxScale = 750 / res.windowWidth
|
|
|
|
|
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
|
|
|
|
|
var navigationHeight = 44 * pxToRpxScale
|
|
|
|
|
this.height = res.windowHeight * pxToRpxScale //将px 转换rpx
|
|
|
|
|
this.height = res.windowHeight * pxToRpxScale
|
|
|
|
|
this.scorllheight = this.height
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.index = 0
|
|
|
|
|
this.index1 = 0
|
|
|
|
|
|
|
|
|
|
// 设置日期范围
|
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
|
this.startDate = `${currentYear - 10}-01-01`;
|
|
|
|
|
this.endDate = `${currentYear + 10}-12-31`;
|
|
|
|
|
|
|
|
|
|
// 先获取评价数据
|
|
|
|
|
this.getpj()
|
|
|
|
|
// 获取站点列表(内部会调用趋势图)
|
|
|
|
|
this.importWyw()
|
|
|
|
|
// 获取预警设备列表
|
|
|
|
|
this.getazsurvMulchRecord()
|
|
|
|
|
// 获取预警列表
|
|
|
|
|
this.getyjList()
|
|
|
|
|
// this.gettj()
|
|
|
|
|
this.qushicov()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取站点列表
|
|
|
|
|
importWyw() {
|
|
|
|
|
this.array = []
|
|
|
|
|
this.arrays = []
|
|
|
|
|
@ -236,48 +244,63 @@
|
|
|
|
|
value: ''
|
|
|
|
|
}]
|
|
|
|
|
this.$http.get('/applet/survStationInfo/list').then(res => {
|
|
|
|
|
for (var i = 0; i < res.data.data.length; i++) {
|
|
|
|
|
const dataList = res.data.data || []
|
|
|
|
|
for (var i = 0; i < dataList.length; i++) {
|
|
|
|
|
this.arrays.push({
|
|
|
|
|
label: res.data.data[i].stationName,
|
|
|
|
|
value: res.data.data[i].stationCode
|
|
|
|
|
label: dataList[i].stationName,
|
|
|
|
|
value: dataList[i].stationCode
|
|
|
|
|
})
|
|
|
|
|
this.arrays1.push({
|
|
|
|
|
label: res.data.data[i].stationName,
|
|
|
|
|
value: res.data.data[i].stationCode
|
|
|
|
|
label: dataList[i].stationName,
|
|
|
|
|
value: dataList[i].stationCode
|
|
|
|
|
})
|
|
|
|
|
this.array.push(res.data.data[i].stationName)
|
|
|
|
|
this.array.push(dataList[i].stationName)
|
|
|
|
|
}
|
|
|
|
|
// 设置默认第一个站点
|
|
|
|
|
if (this.array.length > 0) {
|
|
|
|
|
this.stationCode = this.arrays[0].value
|
|
|
|
|
// 调用趋势图获取数据
|
|
|
|
|
this.qushicov()
|
|
|
|
|
} else {
|
|
|
|
|
console.warn('没有获取到站点数据')
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.error('获取站点列表失败:', err)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取监测站点数据
|
|
|
|
|
// 获取监测站点设备数据
|
|
|
|
|
getazsurvMulchRecord() {
|
|
|
|
|
this.arrays = []
|
|
|
|
|
this.array1 = ['全部监测设备', ]
|
|
|
|
|
this.array1 = ['全部监测设备']
|
|
|
|
|
this.arrays1 = [{
|
|
|
|
|
label: '全部监测设备',
|
|
|
|
|
value: ''
|
|
|
|
|
}]
|
|
|
|
|
this.$http.get('/applet/survDeviceDeploy/survDeviceList').then(res => {
|
|
|
|
|
for (var i = 0; i < res.data.data.length; i++) {
|
|
|
|
|
const dataList = res.data.data || []
|
|
|
|
|
for (var i = 0; i < dataList.length; i++) {
|
|
|
|
|
this.arrays.push({
|
|
|
|
|
label: res.data.data[i].fullDeviceName,
|
|
|
|
|
value: res.data.data[i].id
|
|
|
|
|
label: dataList[i].fullDeviceName,
|
|
|
|
|
value: dataList[i].id
|
|
|
|
|
})
|
|
|
|
|
this.arrays1.push({
|
|
|
|
|
label: res.data.data[i].fullDeviceName,
|
|
|
|
|
value: res.data.data[i].id
|
|
|
|
|
label: dataList[i].fullDeviceName,
|
|
|
|
|
value: dataList[i].id
|
|
|
|
|
})
|
|
|
|
|
this.array1.push(res.data.data[i].fullDeviceName)
|
|
|
|
|
this.array1.push(dataList[i].fullDeviceName)
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.error('获取设备列表失败:', err)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取预警列表
|
|
|
|
|
getyjList() {
|
|
|
|
|
let params = {}
|
|
|
|
|
params.pageNo = this.pageNo
|
|
|
|
|
params.pageSize = this.pageSize
|
|
|
|
|
params.deployId = this.stationCode1
|
|
|
|
|
params.yearStr = this.yearStr
|
|
|
|
|
let params = {
|
|
|
|
|
pageNo: this.pageNo,
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
deployId: this.stationCode1,
|
|
|
|
|
yearStr: this.yearStr
|
|
|
|
|
}
|
|
|
|
|
uni.showLoading({
|
|
|
|
|
title: '加载中'
|
|
|
|
|
});
|
|
|
|
|
@ -286,7 +309,7 @@
|
|
|
|
|
params: params
|
|
|
|
|
}).then(res => {
|
|
|
|
|
if (res.data.code == 0) {
|
|
|
|
|
var data = res.data.data.records
|
|
|
|
|
var data = res.data.data.records || []
|
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
|
data[i].times = data[i].alertTime.replace(" ", ":").replace(/\:/g, "-").split("-");
|
|
|
|
|
data[i].nian = data[i].times[0];
|
|
|
|
|
@ -295,16 +318,15 @@
|
|
|
|
|
data[i].shi = data[i].times[3];
|
|
|
|
|
data[i].fen = data[i].times[4];
|
|
|
|
|
data[i].miao = data[i].times[5];
|
|
|
|
|
data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i]
|
|
|
|
|
.fen
|
|
|
|
|
if (data[i].alertContent.indexOf('监测数据名称:') != -1) {
|
|
|
|
|
data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i].fen
|
|
|
|
|
if (data[i].alertContent && data[i].alertContent.indexOf('监测数据名称:') != -1) {
|
|
|
|
|
data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.list = this.list.concat(data)
|
|
|
|
|
this.total = res.data.data.total
|
|
|
|
|
if (res.data.data.total != 0) {
|
|
|
|
|
this.allNum = Number(res.data.data.total) / Number(this.pageSize) + '';
|
|
|
|
|
this.total = res.data.data.total || 0
|
|
|
|
|
if (this.total != 0) {
|
|
|
|
|
this.allNum = Number(this.total) / Number(this.pageSize) + '';
|
|
|
|
|
if (this.allNum.indexOf('.') == -1) {
|
|
|
|
|
this.allNum = this.allNum;
|
|
|
|
|
} else {
|
|
|
|
|
@ -315,7 +337,6 @@
|
|
|
|
|
this.loadStatus = 'nomore'
|
|
|
|
|
} else {
|
|
|
|
|
this.isLastpage = false;
|
|
|
|
|
// this.isLoadMore=true
|
|
|
|
|
this.loadStatus = 'more'
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
@ -325,11 +346,13 @@
|
|
|
|
|
}
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
this.isRefresher = false
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
console.error('获取预警列表失败:', err)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 分页加载
|
|
|
|
|
lower() {
|
|
|
|
|
// 最后一页了,取消下拉功能
|
|
|
|
|
if (this.isLastpage) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
@ -339,16 +362,17 @@
|
|
|
|
|
num = num + 1;
|
|
|
|
|
}, 1000)
|
|
|
|
|
this.pageNo = this.pageNo + 1;
|
|
|
|
|
let params = {}
|
|
|
|
|
params.pageNo = this.pageNo
|
|
|
|
|
params.pageSize = this.pageSize
|
|
|
|
|
params.deployId = this.stationCode1
|
|
|
|
|
params.yearStr = this.yearStr
|
|
|
|
|
let params = {
|
|
|
|
|
pageNo: this.pageNo,
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
deployId: this.stationCode1,
|
|
|
|
|
yearStr: this.yearStr
|
|
|
|
|
}
|
|
|
|
|
this.$http.get('/applet/wxclient/alertRecord', {
|
|
|
|
|
params: params
|
|
|
|
|
}).then(res => {
|
|
|
|
|
if (res.data.code == 0) {
|
|
|
|
|
var data = res.data.data.records
|
|
|
|
|
var data = res.data.data.records || []
|
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
|
data[i].times = data[i].alertTime.replace(" ", ":").replace(/\:/g, "-").split("-");
|
|
|
|
|
data[i].nian = data[i].times[0];
|
|
|
|
|
@ -357,20 +381,18 @@
|
|
|
|
|
data[i].shi = data[i].times[3];
|
|
|
|
|
data[i].fen = data[i].times[4];
|
|
|
|
|
data[i].miao = data[i].times[5];
|
|
|
|
|
data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i]
|
|
|
|
|
.fen
|
|
|
|
|
if (data[i].alertContent.indexOf('监测数据名称:') != -1) {
|
|
|
|
|
data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i].fen
|
|
|
|
|
if (data[i].alertContent && data[i].alertContent.indexOf('监测数据名称:') != -1) {
|
|
|
|
|
data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.list = this.list.concat(data)
|
|
|
|
|
if (res.data.data.total != 0) {
|
|
|
|
|
if (this.total != 0) {
|
|
|
|
|
if (this.pageNo == this.allNum) {
|
|
|
|
|
this.isLastpage = true;
|
|
|
|
|
this.loadStatus = 'nomore'
|
|
|
|
|
} else {
|
|
|
|
|
this.isLastpage = false;
|
|
|
|
|
// this.isLoadMore=true
|
|
|
|
|
this.loadStatus = 'more'
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
@ -378,326 +400,140 @@
|
|
|
|
|
this.loadStatus = 'nomore'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.error('加载更多失败:', err)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取评价
|
|
|
|
|
getpj() {
|
|
|
|
|
this.$http.post('/applet/wxclient/displayInfo?infoType=' + 'effect_assess').then(res => {
|
|
|
|
|
let data = res.data.data.effect_assess.detailList
|
|
|
|
|
let data = res.data.data.effect_assess.detailList || []
|
|
|
|
|
this.pjlist = data
|
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
|
if (data[i].detailCode == '综合评价') {
|
|
|
|
|
this.pjnr = data[i].detailValue
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.error('获取评价数据失败:', err)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 选择年月日
|
|
|
|
|
radioChange(e){
|
|
|
|
|
radioChange(e) {
|
|
|
|
|
this.riqinumber = e.detail.value
|
|
|
|
|
this.bindDateqsChange(this.datetwo,'twotime')
|
|
|
|
|
this.current = this.timList.findIndex(item => item.value === e.detail.value)
|
|
|
|
|
// 重新调用趋势图
|
|
|
|
|
this.qushicov()
|
|
|
|
|
},
|
|
|
|
|
// 趋势时间
|
|
|
|
|
bindDateqsChange(e,tiem) {
|
|
|
|
|
if (tiem=='twotime') {
|
|
|
|
|
let selectedDate = e
|
|
|
|
|
if (this.riqinumber === 'monthDays') {
|
|
|
|
|
this.dateqs = selectedDate.slice(0, 7); // YYYY-MM
|
|
|
|
|
} else if (this.riqinumber === 'yearMonth') {
|
|
|
|
|
this.dateqs = selectedDate.slice(0, 4); // YYYY
|
|
|
|
|
} else {
|
|
|
|
|
this.dateqs = selectedDate; // YYYY-MM-DD
|
|
|
|
|
}
|
|
|
|
|
// 趋势时间切换
|
|
|
|
|
bindDateqsChange(e) {
|
|
|
|
|
let selectedDate = e.detail.value;
|
|
|
|
|
// 根据选择的维度格式化日期
|
|
|
|
|
if (this.riqinumber === 'monthDays') {
|
|
|
|
|
this.dateqs = selectedDate.slice(0, 7); // YYYY-MM
|
|
|
|
|
} else if (this.riqinumber === 'yearMonth') {
|
|
|
|
|
this.dateqs = selectedDate.slice(0, 4); // YYYY
|
|
|
|
|
} else {
|
|
|
|
|
let selectedDate = e.detail.value;
|
|
|
|
|
if (this.riqinumber === 'monthDays') {
|
|
|
|
|
this.dateqs = selectedDate.slice(0, 7); // YYYY-MM
|
|
|
|
|
} else if (this.riqinumber === 'yearMonth') {
|
|
|
|
|
this.dateqs = selectedDate.slice(0, 4); // YYYY
|
|
|
|
|
} else {
|
|
|
|
|
this.dateqs = selectedDate; // YYYY-MM-DD
|
|
|
|
|
}
|
|
|
|
|
this.dateqs = selectedDate; // YYYY-MM-DD
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.qushicov();
|
|
|
|
|
// 重新获取趋势数据
|
|
|
|
|
this.qushicov();
|
|
|
|
|
},
|
|
|
|
|
// 趋势接口
|
|
|
|
|
qushicov() {
|
|
|
|
|
let data = {
|
|
|
|
|
summrayMode: this.riqinumber,
|
|
|
|
|
startTime: this.dateqs,
|
|
|
|
|
stationCode:this.stationCode,
|
|
|
|
|
}
|
|
|
|
|
this.$http.post('/applet/survDeviceDeploy/waterIntegrateStatistic', data).then(iem => {
|
|
|
|
|
let lynum = iem.data.data
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
let categories = [];
|
|
|
|
|
let displayCategories = []; // 用于显示的X轴数据
|
|
|
|
|
let series = [];
|
|
|
|
|
let allValues = []; // 收集所有数值
|
|
|
|
|
|
|
|
|
|
if (lynum.tableHead && lynum.tableHead.length > 0) {
|
|
|
|
|
categories = lynum.tableIndex;
|
|
|
|
|
|
|
|
|
|
// 计算要显示的X轴数据:第一个、中间、最后一个
|
|
|
|
|
if (categories.length > 0) {
|
|
|
|
|
const first = categories[0];
|
|
|
|
|
const middle = categories[Math.floor(categories.length / 2)];
|
|
|
|
|
const last = categories[categories.length - 3];
|
|
|
|
|
|
|
|
|
|
// 创建显示用的categories数组,只在这三个位置有值,其他为空字符串
|
|
|
|
|
displayCategories = categories.map((item, index) => {
|
|
|
|
|
if (index === 0 || index === Math.floor(categories.length / 2) || index === categories.length - 2) {
|
|
|
|
|
return item;
|
|
|
|
|
}
|
|
|
|
|
return '';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
lynum.tableHead.forEach((header, index) => {
|
|
|
|
|
const seriesData = lynum.tableData2.map(row => {
|
|
|
|
|
const value = row[index] === "0" ? 0 : parseFloat(row[index]) || 0;
|
|
|
|
|
allValues.push(value); // 收集数值
|
|
|
|
|
return value;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
series.push({
|
|
|
|
|
name: header.eleDesc,
|
|
|
|
|
data: seriesData
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 动态计算Y轴范围
|
|
|
|
|
const maxValue = Math.max(...allValues);
|
|
|
|
|
const minValue = Math.min(...allValues);
|
|
|
|
|
|
|
|
|
|
// 设置合适的上下边界,增加一些余量
|
|
|
|
|
const padding = maxValue * 0.1; // 10%的余量
|
|
|
|
|
const yAxisMax = maxValue + padding;
|
|
|
|
|
const yAxisMin = Math.max(0, minValue - padding); // 确保最小值不小于0
|
|
|
|
|
|
|
|
|
|
// 更新opts中的yAxis配置
|
|
|
|
|
this.opts = {
|
|
|
|
|
...this.opts,
|
|
|
|
|
yAxis: {
|
|
|
|
|
gridType: "dash",
|
|
|
|
|
dashLength: 2,
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
min: yAxisMin,
|
|
|
|
|
max: yAxisMax
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let res = {
|
|
|
|
|
categories: displayCategories, // 使用处理后的显示数据
|
|
|
|
|
series: series
|
|
|
|
|
};
|
|
|
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
|
|
|
}, 500);
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取折线图
|
|
|
|
|
gettj() {
|
|
|
|
|
// 检查是否有站点编码
|
|
|
|
|
if (!this.stationCode) {
|
|
|
|
|
this.stationCode = 'S_1'
|
|
|
|
|
console.warn('站点编码为空,无法获取趋势数据')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.$http.post('/applet/wxclient/getPplutionSummry?stationCode=' + this.stationCode).then(res => {
|
|
|
|
|
this.zxtdata = res.data.data[0]
|
|
|
|
|
this.ec.option.legend.data = ['总磷', '总氮', '硝态氮']
|
|
|
|
|
this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF']
|
|
|
|
|
this.ec.option.series = [{
|
|
|
|
|
name: '总磷',
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total1',
|
|
|
|
|
areaStyle: { //区域填充渐变颜色
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: 'rgba(25, 213, 138, 1)' // 0% 处的颜色
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
|
|
|
|
}],
|
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: this.zxtdata.TPSummry
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '总氮',
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total2',
|
|
|
|
|
areaStyle: { //区域填充渐变颜色
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: 'rgba(255, 197, 59, 1)' // 0% 处的颜色
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
|
|
|
|
}],
|
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: this.zxtdata.TNSummry
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '硝态氮',
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total3',
|
|
|
|
|
areaStyle: { //区域填充渐变颜色
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: 'rgba(59, 160, 255, 1)' // 0% 处的颜色
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
|
|
|
|
}],
|
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: this.zxtdata.NOSummry
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
if (this.array[this.index].indexOf('畜禽') != -1) {
|
|
|
|
|
this.ec.option.legend.data = ['总磷', '总氮', 'COD', '氨氮']
|
|
|
|
|
this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF', '#FF3B3B']
|
|
|
|
|
this.ec.option.series = [{
|
|
|
|
|
name: '总磷',
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total1',
|
|
|
|
|
areaStyle: { //区域填充渐变颜色
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: 'rgba(25, 213, 138, 1)' // 0% 处的颜色
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
|
|
|
|
}],
|
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
|
|
|
|
|
let data = {
|
|
|
|
|
summrayMode: this.riqinumber,
|
|
|
|
|
startTime: this.dateqs,
|
|
|
|
|
stationCode: this.stationCode,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
uni.showLoading({
|
|
|
|
|
title: '加载趋势数据...'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.$http.post('/applet/survDeviceDeploy/waterIntegrateStatistic', data).then(iem => {
|
|
|
|
|
let lynum = iem.data.data
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
let categories = [];
|
|
|
|
|
let displayCategories = [];
|
|
|
|
|
let series = [];
|
|
|
|
|
let allValues = [];
|
|
|
|
|
|
|
|
|
|
if (lynum.tableHead && lynum.tableHead.length > 0) {
|
|
|
|
|
categories = lynum.tableIndex || [];
|
|
|
|
|
|
|
|
|
|
if (categories.length > 0) {
|
|
|
|
|
const first = categories[0];
|
|
|
|
|
const middle = categories[Math.floor(categories.length / 2)];
|
|
|
|
|
const last = categories[categories.length - 1];
|
|
|
|
|
|
|
|
|
|
displayCategories = categories.map((item, index) => {
|
|
|
|
|
if (index === 0 || index === Math.floor(categories.length / 2) || index === categories.length - 1) {
|
|
|
|
|
return item;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: this.zxtdata.TPSummry
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '总氮',
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total2',
|
|
|
|
|
areaStyle: { //区域填充渐变颜色
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: 'rgba(255, 197, 59, 1)' // 0% 处的颜色
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
|
|
|
|
}],
|
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
return '';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
lynum.tableHead.forEach((header, index) => {
|
|
|
|
|
const seriesData = lynum.tableData2.map(row => {
|
|
|
|
|
const value = row[index] === "0" ? 0 : parseFloat(row[index]) || 0;
|
|
|
|
|
allValues.push(value);
|
|
|
|
|
return value;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
series.push({
|
|
|
|
|
name: header.eleDesc || header,
|
|
|
|
|
data: seriesData
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 动态计算Y轴范围
|
|
|
|
|
if (allValues.length > 0) {
|
|
|
|
|
const maxValue = Math.max(...allValues);
|
|
|
|
|
const minValue = Math.min(...allValues);
|
|
|
|
|
const padding = maxValue * 0.1;
|
|
|
|
|
const yAxisMax = maxValue + padding;
|
|
|
|
|
const yAxisMin = Math.max(0, minValue - padding);
|
|
|
|
|
|
|
|
|
|
this.opts = {
|
|
|
|
|
...this.opts,
|
|
|
|
|
yAxis: {
|
|
|
|
|
gridType: "dash",
|
|
|
|
|
dashLength: 2,
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
min: yAxisMin,
|
|
|
|
|
max: yAxisMax
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: this.zxtdata.TNSummry
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'COD',
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total3',
|
|
|
|
|
areaStyle: { //区域填充渐变颜色
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: 'rgba(59, 160, 255, 1)' // 0% 处的颜色
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
|
|
|
|
}],
|
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: this.zxtdata.CODSummry
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '氨氮',
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total4',
|
|
|
|
|
areaStyle: { //区域填充渐变颜色
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: 'rgba(255, 59, 59, 1)' // 0% 处的颜色
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
|
|
|
|
}],
|
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: this.zxtdata.NHSummry
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let res = {
|
|
|
|
|
categories: displayCategories,
|
|
|
|
|
series: series
|
|
|
|
|
};
|
|
|
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
}, 500);
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
console.error('获取趋势数据失败:', err)
|
|
|
|
|
// 显示错误提示
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '获取趋势数据失败',
|
|
|
|
|
icon: 'none'
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 折线图切换站点
|
|
|
|
|
@ -707,9 +543,10 @@
|
|
|
|
|
for (var i = 0; i < this.arrays.length; i++) {
|
|
|
|
|
if (this.stationName == this.arrays[i].label) {
|
|
|
|
|
this.stationCode = this.arrays[i].value
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// this.gettj()
|
|
|
|
|
// 切换站点后重新获取趋势数据
|
|
|
|
|
this.qushicov()
|
|
|
|
|
},
|
|
|
|
|
// 预警切换站点
|
|
|
|
|
@ -719,6 +556,7 @@
|
|
|
|
|
for (var i = 0; i < this.arrays.length; i++) {
|
|
|
|
|
if (this.stationName1 == this.arrays1[i].label) {
|
|
|
|
|
this.stationCode1 = this.arrays1[i].value
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (this.stationName1 == '全部监测设备') {
|
|
|
|
|
@ -739,7 +577,7 @@
|
|
|
|
|
let year = date.getFullYear();
|
|
|
|
|
let month = date.getMonth() + 1;
|
|
|
|
|
let day = date.getDate();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (type === 'start') {
|
|
|
|
|
year = year - 10;
|
|
|
|
|
} else if (type === 'end') {
|
|
|
|
|
@ -748,6 +586,11 @@
|
|
|
|
|
month = month > 9 ? month : '0' + month;
|
|
|
|
|
day = day > 9 ? day : '0' + day;
|
|
|
|
|
return `${year}-${month}-${day}`;
|
|
|
|
|
},
|
|
|
|
|
// 格式化数字(如果组件中有使用)
|
|
|
|
|
cutMoneyFiter(val) {
|
|
|
|
|
if (!val) return 0
|
|
|
|
|
return val
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -755,12 +598,10 @@
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
page {
|
|
|
|
|
// height: 100%;
|
|
|
|
|
background-color: #0f6efe;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
// height: 100%;
|
|
|
|
|
padding: 0 32rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
@ -796,7 +637,6 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ybecharts image {
|
|
|
|
|
// position: absolute;
|
|
|
|
|
width: 90%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
@ -1009,21 +849,18 @@
|
|
|
|
|
|
|
|
|
|
.tabitem:first-child {
|
|
|
|
|
width: 31%;
|
|
|
|
|
// text-align: center
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabitem:nth-child(2) {
|
|
|
|
|
width: 27%;
|
|
|
|
|
// text-align: center
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabitem:nth-child(3) {
|
|
|
|
|
width: 19%;
|
|
|
|
|
// text-align: center
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabitem:nth-child(4) {
|
|
|
|
|
flex: 1 // text-align: center
|
|
|
|
|
flex: 1
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.scroll-Y {
|
|
|
|
|
@ -1083,10 +920,6 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// .lists_item:first-child {
|
|
|
|
|
// padding-top: 0;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
.jczbs {
|
|
|
|
|
width: 32%;
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
@ -1096,7 +929,6 @@
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
// text-align: center
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.zbz {
|
|
|
|
|
@ -1108,7 +940,6 @@
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
// text-align: center
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sbsj {
|
|
|
|
|
@ -1117,8 +948,6 @@
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #667482;
|
|
|
|
|
flex: 1;
|
|
|
|
|
// text-align: center
|
|
|
|
|
// text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.szqss {
|
|
|
|
|
@ -1134,12 +963,9 @@
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
// text-align: center
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.load {
|
|
|
|
|
// height: 50rpx;
|
|
|
|
|
// line-height: 50rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #c6c6c6;
|
|
|
|
|
}
|
|
|
|
|
@ -1151,10 +977,8 @@
|
|
|
|
|
.radio-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
// margin: 20rpx 32rpx 0;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
padding: 8rpx;
|
|
|
|
|
// width: 60%;
|
|
|
|
|
.radio-label {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@ -1169,7 +993,6 @@
|
|
|
|
|
background: rgba(15, 110, 254, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 选中状态背景
|
|
|
|
|
&.checked {
|
|
|
|
|
background: #0f6efe;
|
|
|
|
|
|
|
|
|
|
@ -1183,7 +1006,6 @@
|
|
|
|
|
transform: scale(0.8);
|
|
|
|
|
margin-right: 8rpx;
|
|
|
|
|
|
|
|
|
|
// 选中状态样式
|
|
|
|
|
&[checked] {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
|