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

修改统计内容

This commit is contained in:
978184212@qq.com 2026-08-25 14:18:44 +08:00
parent 246f34358c
commit c1a999b23d
1 changed files with 20 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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">
@ -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,
@ -214,7 +213,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,7 +223,6 @@
this.importWyw()
this.getazsurvMulchRecord()
this.getyjList()
// this.gettj()
this.qushicov()
},
methods: {
@ -249,7 +247,6 @@
}
})
},
// 获取监测站点数据
getazsurvMulchRecord() {
this.arrays = []
this.array1 = ['全部监测设备', ]
@ -271,7 +268,6 @@
}
})
},
// 获取预警列表
getyjList() {
let params = {}
params.pageNo = this.pageNo
@ -315,7 +311,6 @@
this.loadStatus = 'nomore'
} else {
this.isLastpage = false;
// this.isLoadMore=true
this.loadStatus = 'more'
}
} else {
@ -327,9 +322,7 @@
this.isRefresher = false
})
},
// 分页加载
lower() {
// 最后一页了，取消下拉功能
if (this.isLastpage) {
return
}
@ -370,7 +363,6 @@
this.loadStatus = 'nomore'
} else {
this.isLastpage = false;
// this.isLoadMore=true
this.loadStatus = 'more'
}
} else {
@ -380,7 +372,6 @@
}
})
},
// 获取评价
getpj() {
this.$http.post('/applet/wxclient/displayInfo?infoType=' + 'effect_assess').then(res => {
let data = res.data.data.effect_assess.detailList
@ -392,36 +383,32 @@
}
})
},
// 选择年月日
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
this.dateqs = selectedDate.slice(0, 7);
} else if (this.riqinumber === 'yearMonth') {
this.dateqs = selectedDate.slice(0, 4); // YYYY
this.dateqs = selectedDate.slice(0, 4);
} else {
this.dateqs = selectedDate; // YYYY-MM-DD
this.dateqs = selectedDate;
}
} else {
let selectedDate = e.detail.value;
if (this.riqinumber === 'monthDays') {
this.dateqs = selectedDate.slice(0, 7); // YYYY-MM
this.dateqs = selectedDate.slice(0, 7);
} else if (this.riqinumber === 'yearMonth') {
this.dateqs = selectedDate.slice(0, 4); // YYYY
this.dateqs = selectedDate.slice(0, 4);
} else {
this.dateqs = selectedDate; // YYYY-MM-DD
this.dateqs = selectedDate;
}
}
this.qushicov();
},
// 趋势接口
qushicov() {
let data = {
summrayMode: this.riqinumber,
@ -433,20 +420,18 @@
setTimeout(() => {
let categories = [];
let displayCategories = []; // 用于显示的X轴数据
let displayCategories = [];
let series = [];
let allValues = []; // 收集所有数值
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;
@ -458,7 +443,7 @@
lynum.tableHead.forEach((header, index) => {
const seriesData = lynum.tableData2.map(row => {
const value = row[index] === "0" ? 0 : parseFloat(row[index]) || 0;
allValues.push(value); // 收集数值
allValues.push(value);
return value;
});
@ -468,16 +453,12 @@
});
});
// 动态计算Y轴范围
const maxValue = Math.max(...allValues);
const minValue = Math.min(...allValues);
// 设置合适的上下边界，增加一些余量
const padding = maxValue * 0.1; // 10%的余量
const padding = maxValue * 0.1;
const yAxisMax = maxValue + padding;
const yAxisMin = Math.max(0, minValue - padding); // 确保最小值不小于0
const yAxisMin = Math.max(0, minValue - padding);
// 更新opts中的yAxis配置
this.opts = {
...this.opts,
yAxis: {
@ -494,213 +475,13 @@
}
let res = {
categories: displayCategories, // 使用处理后的显示数据
categories: displayCategories,
series: series
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 500);
})
},
// 获取折线图
gettj() {
if (!this.stationCode) {
this.stationCode = 'S_1'
}
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
}
},
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
},
]
}
})
},
// 折线图切换站点
bindPickerChange: function(e) {
this.index = e.detail.value
this.stationName = this.array[this.index]
@ -709,10 +490,8 @@
this.stationCode = this.arrays[i].value
}
}
// this.gettj()
this.qushicov()
},
// 预警切换站点
bindPickerChange1: function(e) {
this.index1 = e.detail.value
this.stationName1 = this.array1[this.index1]
@ -727,7 +506,6 @@
this.pageNo = 1
this.getyjList()
},
// 预警切换日期
bindDateChange: function(e) {
this.yearStr = e.detail.value
this.date = e.detail.value
@ -755,12 +533,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 +572,6 @@
}
.ybecharts image {
// position: absolute;
width: 90%;
height: 100%;
}
@ -1009,21 +784,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 +855,6 @@
}
}
// .lists_item:first-child {
// padding-top: 0;
// }
.jczbs {
width: 32%;
font-size: 24rpx;
@ -1096,7 +864,6 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// text-align: center
}
.zbz {
@ -1108,7 +875,6 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// text-align: center
}
.sbsj {
@ -1117,8 +883,6 @@
font-weight: 400;
color: #667482;
flex: 1;
// text-align: center
// text-align: right;
}
.szqss {
@ -1134,12 +898,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 +908,12 @@
.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 +928,6 @@
background: rgba(15, 110, 254, 0.1);
}
// 选中状态背景
&.checked {
background: #0f6efe;
@ -1183,7 +941,6 @@
transform: scale(0.8);
margin-right: 8rpx;
// 选中状态样式
&[checked] {
color: #ffffff;
}