From 493684077ec58516a4b53abbf4bfa8c43ba8f4a6 Mon Sep 17 00:00:00 2001
From: "978184212@qq.com" <978184212@qq.com>
Date: Thu, 20 Nov 2025 09:49:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packDetail/pages/sjdyj/index.vue | 735 ++++++++++++++++++++----------
packDetail/pages/vidio/detail.vue | 6 +-
packDetail/pages/vidio/index.vue | 4 +-
pages/maps/index.vue | 51 ---
4 files changed, 506 insertions(+), 290 deletions(-)
diff --git a/packDetail/pages/sjdyj/index.vue b/packDetail/pages/sjdyj/index.vue
index 9f37f26..1bfe587 100644
--- a/packDetail/pages/sjdyj/index.vue
+++ b/packDetail/pages/sjdyj/index.vue
@@ -1,96 +1,108 @@
-
-
-
-
- {{item.dictLabel}}
-
-
-
-
-
-
-
-
-
- 设备选择：
-
-
-
- 时间区间：
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{item.stationName}}
-
-
-
- {{item.alertTime}}
-
+
+
+
+
+ {{item.dictLabel}}
+
-
-
-
-
- {{it}}
-
-
-
-
- {{Item.name}}
-
-
- {{Item.val}}
-
-
- {{Item.valHeight}}
-
-
-
- {{Item.valLow}}
-
-
-
- {{Item.unit}}
-
-
-
-
-
-
-
-
-
-
-
- 暂无数据
+
+
+
+
+ 设备选择：
+
+
+
+ 时间区间：
+
+
+
+
+
+ {{item.itemName}}{{item.unit}}
+
+
+
-
-
+
+
+
+
+ 暂无数据
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{item.stationName}}
+
+
+
+ {{item.alertTime}}
+
+
+
+
+
+
+ {{it}}
+
+
+
+
+ {{Item.name}}
+
+
+ {{Item.val}}
+
+
+ {{Item.valHeight}}
+
+
+
+
+ {{Item.valLow}}
+
+
+
+
+ {{Item.unit}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 暂无数据
+
+
+
+
@@ -100,70 +112,127 @@
import configService from '@/common/service/config.service.js';
export default {
data() {
+ const currentDate = this.getDate({
+ format: true
+ })
return {
- List:[],
- baseUrl:configService.apiUrl,
- tabList: ['监测指标名称', '监测指标值', '高/低阈值','计量单位'],
- array:[],
- index:'',
- sampTime:'',
- deviceNo:'',
+ List: [],
+ baseUrl: configService.apiUrl,
+ tabList: ['监测指标名称', '监测指标值', '高/低阈值', '计量单位'],
+ array: [],
+ index: '',
+ sampTime: '',
+ deviceNo: '',
allNum: '',
isLastpage: '',
intervalId: null,
- loadStatus:'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
- isLoadMore:false, //是否加载中
- height:0,
- scorllheight:0,
- scorllheights:0,
- show:false,
- show1:false,
- top:0,
- pageNo:1,
- pageSize:4,
- deleteUrl:'/applet/survMulchRecord/delete',
- stationName:'',
- stationCode:'',
- sampTime:'',
- arrays:[],
+ loadStatus: 'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
+ isLoadMore: false, //是否加载中
+ height: 0,
+ scorllheight: 0,
+ scorllheights: 0,
+ show: false,
+ show1: false,
+ top: 0,
+ pageNo: 1,
+ pageSize: 4,
+ deleteUrl: '/applet/survMulchRecord/delete',
+ stationName: '',
+ stationCode: '',
+ sampTime: '',
+ arrays: [],
isRefresher: false, //下拉刷新状态
- reload:'',
- topItems:[
- {
- dictLabel:'监测站告警'
+ reload: '',
+ topItems: [{
+ dictLabel: '监测站告警'
},
{
- dictLabel:'异常趋势图'
+ dictLabel: '异常趋势图'
}
],
- value:0,
+ value: 0,
rangeList: [],
- isActive:0,
- rangetime: [Date.now(), Date.now()],
- deployId:'',
- resolt:[],
+ isActive: 0,
+ rangetime: [currentDate, currentDate],
+ deployId: '',
+ resolt: [],
+ chartData: {},
+ opts: {
+ color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
+ "#FC8452", "#9A60B4", "#ea7ccc"
+ ],
+ padding: [15, 15, 10, 15],
+ legend: {
+ show: false, // 显示图例，方便区分各条线
+ position: "top",
+ float: "center",
+ itemGap: 20
+ },
+ enableScroll: true,
+ xAxis: {
+ disableGrid: true,
+ itemCount: 14,
+ scrollShow: true,
+ scrollAlign: 'left',
+ labelCount: 14,
+ boundaryGap: 'justify'
+ },
+ yAxis: {
+ gridType: "dash",
+ dashLength: 2,
+ // 添加数据格式化，显示数值
+ format: (val) => {
+ return val.toFixed(2);
+ }
+ },
+ extra: {
+ area: {
+ type: "curve",
+ opacity: 0.2,
+ addLine: true,
+ width: 2,
+ gradient: true,
+ activeType: "hollow"
+ },
+ tooltip: {
+ textStyle: {
+ fontSize: 12
+ },
+ // 自定义提示框内容
+ format: (item, category, index, opts) => {
+ return `${category}\n${item.seriesName}: ${item.data}`
+ }
+ },
+ markLine: {
+ // 可以添加标记线来更明显地显示阈值
+ data: []
+ }
+ }
+ },
}
},
onLoad() {
uni.getSystemInfo({
success: res => {
- var pxToRpxScale = 750 / res.windowWidth
+ 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 //将px 转换rpx
this.scorllheight = this.height - 174
this.scorllheights = this.height - 90
}
});
this.getList()
+ this.startTime = this.rangetime[0]
+ this.endTime = this.rangetime[1]
},
onShow() {
uni.getSystemInfo({
success: res => {
- var pxToRpxScale = 750 / res.windowWidth
+ 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 //将px 转换rpx
this.scorllheight = this.height - 174
this.scorllheights = this.height - 90
}
@@ -171,13 +240,27 @@
},
watch: {
rangetime(newval) {
- console.log('范围选:', this.rangetime);
this.startTime = this.rangetime[0]
this.endTime = this.rangetime[1]
this.qushiList()
},
},
- methods:{
+ methods: {
+ getDate(type) {
+ const date = new Date();
+ let year = date.getFullYear();
+ let month = date.getMonth() + 1;
+ let day = date.getDate();
+
+ if (type === 'start') {
+ year = year - 10;
+ } else if (type === 'end') {
+ year = year + 10;
+ }
+ month = month > 9 ? month : '0' + month;
+ day = day > 9 ? day : '0' + day;
+ return `${year}-${month}-${day}`;
+ },
// 下拉刷新被触发
refresherrefreshFun() {
this.pageNo = 1
@@ -186,19 +269,19 @@
},
// 下拉刷新触发
refresherpullingFun() {
- this.isRefresher= true
+ this.isRefresher = true
},
// 切换类型
- chooseClick(item,index){
+ chooseClick(item, index) {
this.isActive = index;
this.pageNo = 1
this.deviceNo = ''
this.getList()
- if(index==1){
+ if (index == 1) {
this.sbeiList()
}
},
- getList(){
+ getList() {
var params = {}
params.pageNo = this.pageNo
params.pageSize = this.pageSize
@@ -206,40 +289,42 @@
title: '加载中'
});
this.List = []
- if(this.isActive == 0){
+ if (this.isActive == 0) {
var url = '/applet/wxclient/alertRecord'
- }else if(this.isActive == 1){
- var url= '/applet/survPestlightAlert/list'
- if(this.deviceNo){
+ } else if (this.isActive == 1) {
+ var url = '/applet/survPestlightAlert/list'
+ if (this.deviceNo) {
params.deviceNo = this.deviceNo
}
}
- this.$http.get(url,{params:params}).then(res =>{
- if(res.data.code == 0){
+ this.$http.get(url, {
+ params: params
+ }).then(res => {
+ if (res.data.code == 0) {
var data = res.data.data.records
this.List = this.List.concat(data)
- if(res.data.data.total != 0){
- this.allNum = Number(res.data.data.total)/Number(this.pageSize)+'';
- if(this.allNum.indexOf('.') == -1) {
+ if (res.data.data.total != 0) {
+ this.allNum = Number(res.data.data.total) / Number(this.pageSize) + '';
+ if (this.allNum.indexOf('.') == -1) {
this.allNum = this.allNum;
} else {
- this.allNum = parseInt(Number(this.allNum)+1);
+ this.allNum = parseInt(Number(this.allNum) + 1);
}
- if(this.pageNo == this.allNum) {
+ if (this.pageNo == this.allNum) {
this.isLastpage = true;
- this.loadStatus='nomore'
+ this.loadStatus = 'nomore'
} else {
this.isLastpage = false;
// this.isLoadMore=true
this.loadStatus = 'more'
}
- }else{
+ } else {
this.isLastpage = true;
- this.loadStatus='nomore'
+ this.loadStatus = 'nomore'
}
}
uni.hideLoading();
- this.isRefresher= false
+ this.isRefresher = false
})
},
lower() {
@@ -250,114 +335,247 @@
clearInterval(this.intervalId);
var num = 1;
this.intervalId = setInterval(() => {
- num = num+1;
- },1000)
+ num = num + 1;
+ }, 1000)
this.pageNo = this.pageNo + 1;
var params = {}
params.pageNo = this.pageNo
params.pageSize = this.pageSize
- if(this.isActive == 0){
- var url= '/applet/survPestlightAlert/list'
- if(this.deviceNo){
+ if (this.isActive == 0) {
+ var url = '/applet/survPestlightAlert/list'
+ if (this.deviceNo) {
params.deviceNo = this.deviceNo
}
- }else if(this.isActive == 1){
+ } else if (this.isActive == 1) {
var url = '/applet/wxclient/alertRecord'
}
- this.$http.get(url,{params:params}).then(res =>{
- if(res.data.code == 0){
+ this.$http.get(url, {
+ params: params
+ }).then(res => {
+ if (res.data.code == 0) {
var data = res.data.data.records
this.List = this.List.concat(data)
- if(res.data.data.total != 0){
- if(this.pageNo == this.allNum) {
+ if (res.data.data.total != 0) {
+ if (this.pageNo == this.allNum) {
this.isLastpage = true;
- this.loadStatus='nomore'
+ this.loadStatus = 'nomore'
} else {
this.isLastpage = false;
// this.isLoadMore=true
this.loadStatus = 'more'
}
- }else{
+ } else {
this.isLastpage = true;
- this.loadStatus='nomore'
+ this.loadStatus = 'nomore'
}
}
})
},
- changenr(){
+ changenr() {
this.pageNo = 1
this.getList()
},
// 趋势图接口
- qushiList(){
- const data = {
- deployId:this.deployId,
- startTime:this.startTime,
- endTime:this.endTime,
+ async qushiList() {
+ try {
+ const data = {
+ deployId: this.deployId,
+ startTime: this.startTime,
+ endTime: this.endTime,
+ }
+ const res = await this.$http.post('/applet/survAlertRecord/alertSummary', data)
+ if (res.data.code === 0) {
+ let ovelit = res.data.data
+ this.resolt = ovelit.itemList.map(item => {
+ return {
+ ...item,
+ data: ovelit.dataMap[item.entity] || []
+ }
+ })
+ this.timeList = ovelit.timeList || []
+ this.getServerData(this.resolt);
+ }
+ } catch (error) {
+ console.error("获取趋势图数据失败", error)
}
- this.$http.post('/applet/survAlertRecord/alertSummary',data).then(res => {
- console.log("趋势数据",res.data.data)
- let ovelit = res.data.data
- this.resolt = ovelit.itemList.map(item=>{
- return {
- ...item,
- data:ovelit.dataMap[item.entity] || []
- }
- })
- console.log("666666666666",this.resolt)
- })
},
- sbeiList(){
- uni.showLoading({
- title: '加载中'
- });
- this.$http.get('/applet/survDeviceDeploy/deviceList?stationCode=').then(res =>{
- let sbList = []
- this.rangeList = res.data.data.map((lit,index)=>{
- return{
- "value":index,
- "text":lit.deployDes,
- "id":lit.id,
+ // 设备列表
+ async sbeiList() {
+ try {
+ uni.showLoading({
+ title: '加载中'
+ });
+
+ const res = await this.$http.get('/applet/survDeviceDeploy/deviceList?stationCode=')
+ if (res.data.code === 0) {
+ this.rangeList = res.data.data.map((lit, index) => {
+ return {
+ "value": index,
+ "text": lit.deployDes,
+ "id": lit.id,
+ }
+ })
+
+ if (this.rangeList.length > 0) {
+ this.deployId = this.rangeList[this.value].id
+ await this.qushiList();
}
- })
- this.deployId = this.rangeList[this.value].id
- this.qushiList()
+ }
+
uni.hideLoading();
- })
+ } catch (error) {
+ console.error("获取设备列表失败", error)
+ uni.hideLoading();
+ }
},
// 选择deployid
change(e) {
- console.log("单选值", this.rangeList[this.value].id)
this.deployId = this.rangeList[this.value].id
- // this.sbeiList()
+ this.sbeiList()
},
// 选择日期范围
- maskClick(e){
- console.log('maskClick事件:', e);
+ maskClick(e) {
this.startTime = e[0]
this.endTime = e[1]
- }
+ },
+ // 处理图表数据（带高亮超出部分）
+ getServerData(val) {
+ const chartDataList = val.map(item => {
+ const series = [];
+
+ // 处理主要数据 - 确保都是Number格式
+ const mainData = (item.data.slice(0, 50) || Array(this.timeList?.length || 0).fill(0))
+ .map(value => Number(value) || 0);
+
+ const highValNum = item.highVal ? Number(item.highVal) || 0 : null;
+ const lowValNum = item.lowVal ? Number(item.lowVal) || 0 : null;
+
+ // 正常数据线
+ series.push({
+ name: item.itemName,
+ data: mainData,
+ color: "#1890FF"
+ });
+
+ // // 超出最高值的数据点（红色）
+ // if (highValNum !== null) {
+ // const highAlertData = mainData.map(value => {
+ // return value > highValNum ? value : null;
+ // });
+
+ // series.push({
+ // name: '超出上限',
+ // data: highAlertData,
+ // color: "#FF4242",
+ // pointStyle: {
+ // shape: 'circle',
+ // size: 6,
+ // borderWidth: 2
+ // },
+ // lineStyle: 'none' // 不显示连线，只显示点
+ // });
+ // }
+
+ // // 低于最低值的数据点（绿色）
+ // if (lowValNum !== null) {
+ // const lowAlertData = mainData.map(value => {
+ // return value < lowValNum ? value : null;
+ // });
+
+ // series.push({
+ // name: '低于下限',
+ // data: lowAlertData,
+ // color: "#19D58A",
+ // pointStyle: {
+ // shape: 'circle',
+ // size: 6,
+ // borderWidth: 2
+ // },
+ // lineStyle: 'none' // 不显示连线，只显示点
+ // });
+ // }
+
+ // 阈值线（保持原来的虚线）
+ if (highValNum !== null) {
+ series.push({
+ name: '最高阈值',
+ data: Array(this.timeList?.length || 0).fill(highValNum),
+ color: "#FF4242",
+ lineType: "solid",
+ showLabel: false,
+ // 全局隐藏数据标签
+ dataLabel: {
+ fontSize: 0,
+ show: false
+ },
+ });
+ }
+
+ if (lowValNum !== null) {
+ series.push({
+ name: '最低阈值',
+ data: Array(this.timeList?.length || 0).fill(lowValNum),
+ color: "#19D58A",
+ lineType: "solid",
+ showLabel: false,
+ // 全局隐藏数据标签
+ dataLabel: {
+ fontSize: 0,
+ show: false
+ },
+ });
+ }
+
+ return {
+ categories: this.timeList.slice(0, 50) || [],
+ series: series
+ };
+ });
+
+ // 更新resolt数据
+ this.resolt = this.resolt.map((item, index) => {
+ return {
+ ...item,
+ chartData: chartDataList[index] || this.getDefaultChartData(item.itemName)
+ };
+ });
+ console.log("处理后的趋势图数据", this.resolt);
+ },
+ // 获取默认图表数据
+ getDefaultChartData(itemName) {
+ return {
+ categories: [],
+ series: [{
+ name: itemName,
+ data: []
+ }]
+ };
+ },
}
}
+
+ .charts-box {
+ width: 100%;
+ height: 200px;
+ /* 适当增加高度 */
+ overflow-x: auto;
+ /* 允许横向滚动 */
+ }
+
+ .qushicov {
+ margin-bottom: 60rpx;
+ overflow: hidden;
+
+ .quname {
+ display: block;
+ text-align: center;
+ line-height: 60rpx;
+ font-weight: bold;
+ font-size: 28rpx;
+ margin-bottom: 10rpx;
+ }
+ }
+
\ No newline at end of file
diff --git a/packDetail/pages/vidio/detail.vue b/packDetail/pages/vidio/detail.vue
index 9f2827e..b6b89c7 100644
--- a/packDetail/pages/vidio/detail.vue
+++ b/packDetail/pages/vidio/detail.vue
@@ -17,13 +17,13 @@
-
+
在线
- 下线
+ 离线
-
+
diff --git a/packDetail/pages/vidio/index.vue b/packDetail/pages/vidio/index.vue
index 76c8a50..12c696d 100644
--- a/packDetail/pages/vidio/index.vue
+++ b/packDetail/pages/vidio/index.vue
@@ -17,12 +17,12 @@
-
+
diff --git a/pages/maps/index.vue b/pages/maps/index.vue
index ab0a5e7..5c95e21 100644
--- a/pages/maps/index.vue
+++ b/pages/maps/index.vue
@@ -166,54 +166,6 @@
})
}
},
- // 生成 pointers 数据方法
- generatePointers() {
- const iconConfig = {
- // pestlight: {
- // iconPath: '/static/zhandian_sahchong_dingwei.png',
- // width: 15,
- // height: 20
- // },
- orient: {
- iconPath: '/static/zhandian_nongtian_dingwei.png',
- width: 35,
- height: 52
- },
- livestock: {
- iconPath: '/static/zhandian_xuqin_dingwei.png',
- width: 35,
- height: 52
- },
- cusLocaltion: {
- iconPath: '/static/qiyeIcon.png',
- width: 35,
- height: 52
- }
- }
- this.list.forEach((item, i) => {
- const config = iconConfig[item.stationType] || {}
- item.iconPath = config.iconPath || ''
- item.width = config.width || 0
- item.height = config.height || 0
- this.pointers.push({
- id: i,
- iconPath: item.iconPath,
- latitude: Number(item.latitude),
- longitude: Number(item.longitude),
- width: item.width,
- height: item.height,
- customCallout: {
- anchorY: 0, // Y轴偏移量
- anchorX: 0, // X轴偏移量
- display: 'ALWAYS' // 一直展示
- },
- stationType: item.stationType,
- stationName: item.stationName,
- stationCode: item.stationCode,
- joinCluster: true // 是否参与点聚合
- })
- })
- },
markertap(e) {
const index = e.detail.markerId
console.log(e.detail, 'index')
@@ -231,9 +183,6 @@
})
}
},
- todetails(item) {
- console.log(item, '还是个然后')
- },
qiyeChange() {
for (let i = 0; i < this.cusLocation.length; i++) {
const item = this.cusLocation[i];