Administrator
/
FenXiNspUniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改细节内容

This commit is contained in:
978184212@qq.com 2026-07-23 19:25:06 +08:00
parent 7ec7cea507
commit eb7c194ea9
3 changed files with 217 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

558
packDetail/pages/analysis/index.vue
View File

@ -40,11 +40,11 @@
</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">
<radio :value="item.value" :checked="index === current" class="radio-item" />
<label class="radio-label" v-for="(item, index) in timList" :key="item.value" :class="{ 'checked': current === index }">
<radio :value="item.value" :checked="index === current" class="radio-item" color="#0f6efe" />
<view class="radio-text">{{item.name}}</view>
</label>
</radio-group>
@ -126,16 +126,19 @@
height: 0,
scorllheight: 0,
zt: '',
date: new Date().getFullYear(),
date: new Date().getFullYear().toString(),
array: [],
index: '',
index1: '',
index: 0,
index1: 0,
array1: [],
arrays: [],
list: [],
tabList: ['站点名称', '告警指标', '指标值', '告警时间'],
pjlist: [],
chartData: {},
chartData: {
categories: [],
series: []
},
opts: {
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,10,0,15],
@ -144,9 +147,8 @@
enableScroll: false,
legend: {},
xAxis: {
disabled: false, // 启用X轴
// 不设置itemCount，因为我们自定义显示的数据
gridType: 'dash', // 网格类型
disabled: false,
gridType: 'dash',
dashLength: 2,
},
yAxis: {
@ -176,8 +178,8 @@
allNum: '',
isLastpage: '',
intervalId: null,
loadStatus: 'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
isLoadMore: false, //是否加载中
loadStatus: 'more',
isLoadMore: false,
show: false,
show1: false,
top: 0,
@ -190,8 +192,7 @@
zxtdata: [],
timList: [{
value: 'yearMonth',
name: '年',
checked: 'true'
name: '年'
},
{
value: 'monthDays',
@ -203,9 +204,11 @@
},
],
current: 0,
dateqs:new Date().getFullYear(),
datetwo:currentDate,
riqinumber:'yearMonth',
dateqs: new Date().getFullYear().toString(),
datetwo: currentDate,
riqinumber: 'yearMonth',
startDate: '2000-01-01',
endDate: '2030-12-31'
}
},
onLoad() {
@ -214,7 +217,7 @@
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
}
});
@ -224,10 +227,14 @@
this.importWyw()
this.getazsurvMulchRecord()
this.getyjList()
// this.gettj()
this.qushicov()
},
methods: {
// 格式化数字
cutMoneyFiter(val) {
if (!val && val !== 0) return 0
return val
},
// 获取站点列表
importWyw() {
this.array = []
this.arrays = []
@ -247,12 +254,22 @@
})
this.array.push(res.data.data[i].stationName)
}
// 站点数据加载完成后，设置默认站点并获取趋势数据
if (this.array.length > 0) {
this.stationCode = this.arrays[0]?.value || ''
// 延迟一点确保数据已渲染
setTimeout(() => {
this.qushicov()
}, 300)
}
}).catch(err => {
console.log('获取站点列表失败', err)
})
},
// 获取监测站点数据
// 获取监测站点设备数据
getazsurvMulchRecord() {
this.arrays = []
this.array1 = ['全部监测设备', ]
this.array1 = ['全部监测设备']
this.arrays1 = [{
label: '全部监测设备',
value: ''
@ -269,6 +286,8 @@
})
this.array1.push(res.data.data[i].fullDeviceName)
}
}).catch(err => {
console.log('获取设备列表失败', err)
})
},
// 获取预警列表
@ -295,11 +314,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('监测数据名称:', '')
}
// 如果alertContent是字符串，转换为数组格式
if (typeof data[i].alertContent === 'string') {
data[i].alertContent = [{
name: '告警',
val: data[i].alertContent,
unit: ''
}]
}
}
this.list = this.list.concat(data)
this.total = res.data.data.total
@ -315,7 +341,6 @@
this.loadStatus = 'nomore'
} else {
this.isLastpage = false;
// this.isLoadMore=true
this.loadStatus = 'more'
}
} else {
@ -325,11 +350,13 @@
}
uni.hideLoading();
this.isRefresher = false
}).catch(err => {
uni.hideLoading();
console.log('获取预警列表失败', err)
})
},
// 分页加载
lower() {
// 最后一页了，取消下拉功能
if (this.isLastpage) {
return
}
@ -357,11 +384,17 @@
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('监测数据名称:', '')
}
if (typeof data[i].alertContent === 'string') {
data[i].alertContent = [{
name: '告警',
val: data[i].alertContent,
unit: ''
}]
}
}
this.list = this.list.concat(data)
if (res.data.data.total != 0) {
@ -370,7 +403,6 @@
this.loadStatus = 'nomore'
} else {
this.isLastpage = false;
// this.isLoadMore=true
this.loadStatus = 'more'
}
} else {
@ -378,6 +410,8 @@
this.loadStatus = 'nomore'
}
}
}).catch(err => {
console.log('加载更多预警失败', err)
})
},
// 获取评价
@ -390,335 +424,178 @@
this.pjnr = data[i].detailValue
}
}
}).catch(err => {
console.log('获取评价失败', err)
})
},
// 选择年月日
radioChange(e){
radioChange(e) {
this.riqinumber = e.detail.value
this.bindDateqsChange(this.datetwo,'twotime')
},
// 趋势时间
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
// 更新当前选中的索引
this.timList.forEach((item, index) => {
if (item.value === e.detail.value) {
this.current = index
}
})
// 根据选择的模式调整日期格式
let currentDate = new Date()
let year = currentDate.getFullYear()
let month = String(currentDate.getMonth() + 1).padStart(2, '0')
let day = String(currentDate.getDate()).padStart(2, '0')
if (this.riqinumber === 'yearMonth') {
this.dateqs = String(year)
} else if (this.riqinumber === 'monthDays') {
this.dateqs = year + '-' + month
} 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 = year + '-' + month + '-' + day
}
this.qushicov();
this.qushicov()
},
// 趋势时间选择
bindDateqsChange(e) {
let selectedDate = e.detail.value
if (this.riqinumber === 'yearMonth') {
this.dateqs = selectedDate.slice(0, 4)
} else if (this.riqinumber === 'monthDays') {
this.dateqs = selectedDate.slice(0, 7)
} else {
this.dateqs = selectedDate
}
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.log('站点编码为空，使用默认站点')
if (this.arrays.length > 0) {
this.stationCode = this.arrays[0].value
} else {
// 如果站点还没加载完成，延迟重试
setTimeout(() => {
if (this.arrays.length > 0) {
this.stationCode = this.arrays[0].value
this.qushicov()
}
}, 500)
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
let data = {
summrayMode: this.riqinumber,
startTime: this.dateqs,
stationCode: this.stationCode,
}
console.log('请求趋势数据参数:', data)
this.$http.post('/applet/survDeviceDeploy/waterIntegrateStatistic', data).then(iem => {
let lynum = iem.data.data
console.log('趋势数据返回:', lynum)
// 数据为空时显示空图表
if (!lynum || !lynum.tableHead || !lynum.tableData2 || lynum.tableHead.length === 0) {
console.log('趋势数据为空')
this.chartData = {
categories: [],
series: []
}
return
}
setTimeout(() => {
let categories = []
let displayCategories = []
let series = []
let allValues = []
// 处理X轴数据
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 ''
})
}
// 处理series数据
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.name || '指标',
data: seriesData
})
})
// 动态计算Y轴范围
if (allValues.length > 0) {
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)
this.opts = {
...this.opts,
yAxis: {
gridType: "dash",
dashLength: 2,
data: [
{
min: yAxisMin,
max: yAxisMax || 100
}
]
}
},
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
}
},
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: '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
},
]
}
}
this.chartData = {
categories: displayCategories,
series: series
}
console.log('图表数据:', this.chartData)
}, 300)
}).catch(err => {
console.log('趋势数据请求失败', err)
this.chartData = {
categories: [],
series: []
}
})
},
// 折线图切换站点
bindPickerChange: function(e) {
this.index = e.detail.value
this.stationName = this.array[this.index]
let stationName = this.array[this.index]
for (var i = 0; i < this.arrays.length; i++) {
if (this.stationName == this.arrays[i].label) {
if (stationName == this.arrays[i].label) {
this.stationCode = this.arrays[i].value
break
}
}
// this.gettj()
this.qushicov()
},
// 预警切换站点
bindPickerChange1: function(e) {
this.index1 = e.detail.value
this.stationName1 = this.array1[this.index1]
for (var i = 0; i < this.arrays.length; i++) {
for (var i = 0; i < this.arrays1.length; i++) {
if (this.stationName1 == this.arrays1[i].label) {
this.stationCode1 = this.arrays1[i].value
break
}
}
if (this.stationName1 == '全部监测设备') {
@ -739,7 +616,6 @@
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 10;
} else if (type === 'end') {
@ -755,12 +631,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 +670,6 @@
}
.ybecharts image {
// position: absolute;
width: 90%;
height: 100%;
}
@ -1009,21 +882,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 +953,6 @@
}
}
// .lists_item:first-child {
// padding-top: 0;
// }
.jczbs {
width: 32%;
font-size: 24rpx;
@ -1096,7 +962,6 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// text-align: center
}
.zbz {
@ -1108,7 +973,6 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// text-align: center
}
.sbsj {
@ -1117,8 +981,6 @@
font-weight: 400;
color: #667482;
flex: 1;
// text-align: center
// text-align: right;
}
.szqss {
@ -1134,12 +996,9 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// text-align: center
}
.load {
// height: 50rpx;
// line-height: 50rpx;
text-align: center;
color: #c6c6c6;
}
@ -1147,14 +1006,13 @@
.pagebot {
height: 100rpx;
}
// 选择年月日
.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 +1027,6 @@
background: rgba(15, 110, 254, 0.1);
}
// 选中状态背景
&.checked {
background: #0f6efe;
@ -1183,7 +1040,6 @@
transform: scale(0.8);
margin-right: 8rpx;
// 选中状态样式
&[checked] {
color: #ffffff;
}

17
packDetail/pages/sjdyj/index.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="container">
<!-- 顶部选项卡 -->
<view class="topScroll">
<!-- <view class="topScroll">
<scroll-view scroll-x="true" class="scroll">
<view class="scroll-item" v-for="(item,index) in topItems" :key="index" @click="chooseClick(item,index)"
:class="{'scroll-item2':isActive == index}">
@ -10,7 +10,7 @@
</view>
</view>
</scroll-view>
</view>
</view> -->
<!-- 监测站告警 -->
<block v-if="isActive == 0">
@ -135,12 +135,13 @@
arrays: [],
isRefresher: false, //下拉刷新状态
reload: '',
topItems: [{
dictLabel: '监测站告警'
},
{
dictLabel: '异常趋势图'
}
topItems: [
// {
// dictLabel: '监测站告警'
// },
// {
// dictLabel: '异常趋势图'
// }
],
value: 0,
rangeList: [],

2
pages/index/indexData.js
View File

@ -409,7 +409,7 @@ const indexData = {
img: require('../../static/home_icon_jiance.png'),
path: '/packDetail/pages/Site/index'
}, {
name: '智能告警',
name: '智能预警',
img: require('../../static/scd.png'),
path: '/packDetail/pages/sjdyj/index'
},