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

样式

This commit is contained in:
978184212@qq.com 2025-12-01 19:22:03 +08:00
parent 0b15b83805
commit 36b53cdb37
3 changed files with 185 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,8 +3,8 @@
<!-- 顶部选项卡 --> <!-- 顶部选项卡 -->
<view class="topScroll"> <view class="topScroll">
<scroll-view scroll-x="true" class="scroll"> <scroll-view scroll-x="true" class="scroll">
<view class="scroll-item" v-for="(item,index) in topItems" :key="index" <view class="scroll-item" v-for="(item,index) in topItems" :key="index" @click="chooseClick(item,index)"
@click="chooseClick(item,index)" :class="{'scroll-item2':isActive == index}"> :class="{'scroll-item2':isActive == index}">
{{item.dictLabel}} {{item.dictLabel}}
<view class="zliebs" v-show="isActive === index"> <view class="zliebs" v-show="isActive === index">
</view> </view>
@ -14,14 +14,8 @@
<!-- 监测站告警 --> <!-- 监测站告警 -->
<block v-if="isActive == 0"> <block v-if="isActive == 0">
<scroll-view <scroll-view class="liebiaos" scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher"
class="liebiaos" @refresherrefresh="refresherrefreshFun" @scrolltolower="lower" v-if="List.length != 0">
scroll-y="true"
:refresher-enabled="true"
:refresher-triggered="isRefresher"
@refresherrefresh="refresherrefreshFun"
@scrolltolower="lower"
v-if="List.length != 0">
<view class="itembox" v-for="(item,index) in List" :key="index"> <view class="itembox" v-for="(item,index) in List" :key="index">
<view class="itembox_top" v-if="item.fullDeviceName"> <view class="itembox_top" v-if="item.fullDeviceName">
<view class="itembox_lef"> <view class="itembox_lef">
@ -41,17 +35,17 @@
{{it}} {{it}}
</view> </view>
</view> </view>
<view class="lists_item" > <view class="lists_item">
<view class="jczbs"> <view class="jczbs">
{{item.itemName?item.itemName:''}} {{item.itemName?item.itemName:''}}
</view> </view>
<view class="zbz" > <view class="zbz">
{{item.survValue?item.survValue:''}} {{item.survValue?item.survValue:''}}
</view> </view>
<view class="sbsj" style="color: #FF4242;"> <view class="sbsj" style="color: #FF4242;">
{{item.normalValue?item.normalValue:''}} {{item.normalValue?item.normalValue:''}}
</view> </view>
<view class="szqss" > <view class="szqss">
{{item.survUnit?item.survUnit:''}} {{item.survUnit?item.survUnit:''}}
</view> </view>
</view> </view>
@ -83,14 +77,16 @@
</view> </view>
<view class="example-body"> <view class="example-body">
<text>时间区间：</text> <text>时间区间：</text>
<uni-datetime-picker v-model="rangetime" type="daterange" @maskClick="maskClick" /> <uni-datetime-picker v-model="rangetime" type="date" @maskClick="maskClick" />
</view> </view>
</view> </view>
<!-- 趋势图 --> <!-- 趋势图 -->
<view class="qushicov" v-for="(item,index) in resolt" :key="index"> <view class="qushicov" v-for="(item,index) in resolt" :key="index">
<text class="quname">{{item.itemName}}{{item.unit}}</text> <text class="quname">{{item.itemName}}</text>
<view class="charts-box"> <view class="charts-box">
<qiun-data-charts type="area" :opts="opts" :chartData="item.chartData" :enableScroll="true" :ontouch="true" canvas2d /> <qiun-data-charts type="area" :opts="item.chartOpts || opts"
:chartData="{categories: item.categories || [], series: item.chartData || []}"
:enableScroll="true" :ontouch="true" canvas2d />
</view> </view>
</view> </view>
</view> </view>
@ -149,7 +145,7 @@
value: 0, value: 0,
rangeList: [], rangeList: [],
isActive: 0, isActive: 0,
rangetime: [currentDate, currentDate], rangetime: currentDate,
deployId: '', deployId: '',
resolt: [], resolt: [],
chartData: {}, chartData: {},
@ -157,29 +153,38 @@
color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
"#FC8452", "#9A60B4", "#ea7ccc" "#FC8452", "#9A60B4", "#ea7ccc"
], ],
padding: [15, 15, 10, 15], padding: [0, 15, 10, 15], // 上边距增加以容纳顶部图例
legend: { legend: {
show: false, // 显示图例，方便区分各条线 show: true, // 显示图例
position: "top", position: "top",
float: "center", float: "right", // 图例放在右侧
itemGap: 20 itemGap: 10,
margin: 10,
}, },
enableScroll: true, enableScroll: true,
xAxis: { xAxis: {
disableGrid: true, disableGrid: true,
itemCount: 14, itemCount: 8,
scrollShow: true, scrollShow: true,
scrollAlign: 'left', scrollAlign: 'left',
labelCount: 14, labelCount: 14,
boundaryGap: 'justify' boundaryGap: 'justify',
}, },
yAxis: { yAxis: {
// 虚线-实线
gridType: "dash", gridType: "dash",
// 虚线单位
dashLength: 2, dashLength: 2,
// 添加数据格式化，显示数值 // 开启y轴单位
format: (val) => { showTitle: true,
return val.toFixed(2); // y轴配置
} data: [{
// 不写最大最小值-自增长
// min: 0,
// max: 150,
// y轴单位
title: '数量',
}],
}, },
extra: { extra: {
area: { area: {
@ -209,8 +214,8 @@
}, },
onLoad() { onLoad() {
this.getList() this.getList()
this.startTime = this.rangetime[0] this.startTime = this.rangetime
this.endTime = this.rangetime[1] this.endTime = this.rangetime
}, },
onShow() { onShow() {
// 页面显示时重新获取数据 // 页面显示时重新获取数据
@ -232,8 +237,8 @@
}, },
watch: { watch: {
rangetime(newval) { rangetime(newval) {
this.startTime = this.rangetime[0] this.startTime = newval
this.endTime = this.rangetime[1] this.endTime = newval
this.qushiList() this.qushiList()
}, },
}, },
@ -261,7 +266,7 @@
this.deviceNo = ''; this.deviceNo = '';
this.isLastpage = false; this.isLastpage = false;
this.loadStatus = 'more'; this.loadStatus = 'more';
this.getList().then(() => { this.getList().then(() => {
// 停止下拉刷新 // 停止下拉刷新
setTimeout(() => { setTimeout(() => {
@ -291,11 +296,11 @@
pageNo: this.pageNo, pageNo: this.pageNo,
pageSize: this.pageSize pageSize: this.pageSize
}; };
uni.showLoading({ uni.showLoading({
title: '加载中' title: '加载中'
}); });
// 根据当前激活的tab设置URL // 根据当前激活的tab设置URL
let url = ''; let url = '';
if (this.isActive == 0) { if (this.isActive == 0) {
@ -306,14 +311,14 @@
params.deviceNo = this.deviceNo; params.deviceNo = this.deviceNo;
} }
} }
this.$http.get(url, { this.$http.get(url, {
params: params params: params
}).then(res => { }).then(res => {
uni.hideLoading(); uni.hideLoading();
if (res.data.code == 0) { if (res.data.code == 0) {
var data = res.data.data.records || []; var data = res.data.data.records || [];
// 如果是第一页，清空列表；否则追加 // 如果是第一页，清空列表；否则追加
if (this.pageNo === 1) { if (this.pageNo === 1) {
this.List = data; this.List = data;
@ -359,15 +364,15 @@
if (this.isLastpage || this.loadStatus === 'loading') { if (this.isLastpage || this.loadStatus === 'loading') {
return; return;
} }
this.loadStatus = 'loading'; this.loadStatus = 'loading';
this.pageNo = this.pageNo + 1; this.pageNo = this.pageNo + 1;
var params = { var params = {
pageNo: this.pageNo, pageNo: this.pageNo,
pageSize: this.pageSize pageSize: this.pageSize
}; };
// 根据当前激活的tab设置URL // 根据当前激活的tab设置URL
let url = ''; let url = '';
if (this.isActive == 0) { if (this.isActive == 0) {
@ -378,14 +383,14 @@
params.deviceNo = this.deviceNo; params.deviceNo = this.deviceNo;
} }
} }
this.$http.get(url, { this.$http.get(url, {
params: params params: params
}).then(res => { }).then(res => {
if (res.data.code == 0) { if (res.data.code == 0) {
var data = res.data.data.records || []; var data = res.data.data.records || [];
this.List = this.List.concat(data); this.List = this.List.concat(data);
// 更新分页状态 // 更新分页状态
const total = res.data.data.total || 0; const total = res.data.data.total || 0;
if (total > 0) { if (total > 0) {
@ -476,8 +481,7 @@
}, },
// 选择日期范围 // 选择日期范围
maskClick(e) { maskClick(e) {
this.startTime = e[0]; this.rangetime = e;
this.endTime = e[1];
}, },
// 处理图表数据（带高亮超出部分） // 处理图表数据（带高亮超出部分）
getServerData(val) { getServerData(val) {
@ -505,12 +509,8 @@
data: Array(this.timeList?.length || 0).fill(highValNum), data: Array(this.timeList?.length || 0).fill(highValNum),
color: "#FF4242", color: "#FF4242",
lineType: "solid", lineType: "solid",
showLabel: false, showLabel: true,
// 全局隐藏数据标签 dataLabel: false,
dataLabel: {
fontSize: 0,
show: false
},
}); });
} }
@ -520,18 +520,69 @@
data: Array(this.timeList?.length || 0).fill(lowValNum), data: Array(this.timeList?.length || 0).fill(lowValNum),
color: "#19D58A", color: "#19D58A",
lineType: "solid", lineType: "solid",
showLabel: false, showLabel: true,
// 全局隐藏数据标签 dataLabel: false,
dataLabel: {
fontSize: 0,
show: false
},
}); });
} }
return { return {
categories: this.timeList.slice(0, 50) || [], categories: this.timeList.slice(0, 50) || [],
series: series series: series,
// 为每个图表项单独配置opts，包含对应的单位
chartOpts: {
color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE",
"#3CA272",
"#FC8452", "#9A60B4", "#ea7ccc"
],
padding: [0, 15, 10, 15],
legend: {
show: true,
position: "top",
float: "right",
itemGap: 10,
margin: 10,
},
enableScroll: true,
dataLabel:false,
xAxis: {
disableGrid: true,
itemCount: 14,
scrollShow: true,
scrollAlign: 'left',
labelCount: 14,
boundaryGap: 'justify'
},
yAxis: {
gridType: "dash",
dashLength: 2,
showTitle: true,
// 动态设置单位，使用item.unit
data: [{
title: item.unit || '单位', // 使用监测项的单位，如果没有则显示'单位'
}],
},
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: []
}
}
}
}; };
}); });
@ -539,19 +590,67 @@
this.resolt = this.resolt.map((item, index) => { this.resolt = this.resolt.map((item, index) => {
return { return {
...item, ...item,
chartData: chartDataList[index] || this.getDefaultChartData(item.itemName) chartData: chartDataList[index] ? chartDataList[index].series : [],
categories: chartDataList[index] ? chartDataList[index].categories : [],
chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this
.getDefaultChartOpts(item.itemName, item.unit)
}; };
}); });
console.log("处理后的趋势图数据", this.resolt); console.log("处理后的趋势图数据", this.resolt);
}, },
// 获取默认图表数据
getDefaultChartData(itemName) { // 获取默认图表配置
getDefaultChartOpts(itemName, unit) {
return { return {
categories: [], color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
series: [{ "#FC8452", "#9A60B4", "#ea7ccc"
name: itemName, ],
data: [] padding: [0, 15, 10, 15],
}] legend: {
show: true,
position: "top",
float: "right",
itemGap: 10,
margin: 10,
},
enableScroll: true,
xAxis: {
disableGrid: true,
itemCount: 14,
scrollShow: true,
scrollAlign: 'left',
labelCount: 14,
boundaryGap: 'justify'
},
yAxis: {
gridType: "dash",
dashLength: 2,
showTitle: true,
data: [{
title: unit || '单位',
}],
},
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: []
}
}
}; };
}, },
} }
@ -835,32 +934,34 @@
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
} }
/* 确保列表容器有固定高度才能滚动 */ /* 确保列表容器有固定高度才能滚动 */
.liebiaos { .liebiaos {
height: calc(100vh - 100rpx); /* 根据你的实际布局调整 */ height: calc(100vh - 100rpx);
/* 根据你的实际布局调整 */
} }
.load { .load {
padding: 20rpx 0; padding: 20rpx 0;
text-align: center; text-align: center;
} }
.zwsj { .zwsj {
height: calc(100vh - 100rpx); height: calc(100vh - 100rpx);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.inzwsj { .inzwsj {
text-align: center; text-align: center;
} }
.zwsjimg { .zwsjimg {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
} }
.zwsjtext { .zwsjtext {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;

2
pages.json
View File

@ -141,7 +141,7 @@
{ {
"path": "pages/vidio/soilindex", "path": "pages/vidio/soilindex",
"style": { "style": {
"navigationBarTitleText": "土壤监测", "navigationBarTitleText": "长期定位监测点位",
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor":"#0F6EFF" "navigationBarBackgroundColor":"#0F6EFF"
} }

22
pages/maps/index.vue
View File

@ -141,8 +141,8 @@
switch(item.type) { switch(item.type) {
case 'soil': case 'soil':
iconPath = this.baseUrl + '/icon/device/soil.png'; iconPath = this.baseUrl + '/icon/device/soil.png';
width = 40; width = 32;
height = 40; height = 47;
break; break;
case 'camera': case 'camera':
iconPath = this.baseUrl + '/icon/device/cam.png'; iconPath = this.baseUrl + '/icon/device/cam.png';
@ -242,11 +242,14 @@
url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(marker))}` url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(marker))}`
}) })
} else if (marker.stationType === 'device') { } else if (marker.stationType === 'device') {
uni.navigateTo({
url: `/packDetail/pages/vidio/soilindex`
})
// 处理设备点击事件 // 处理设备点击事件
uni.showToast({ // uni.showToast({
title: `设备: ${marker.stationName}`, // title: `设备: ${marker.stationName}`,
icon: 'none' // icon: 'none'
}); // });
// 可以在这里添加设备详情页面的跳转逻辑 // 可以在这里添加设备详情页面的跳转逻辑
} }
} }
@ -343,9 +346,8 @@
item.iconPath = this.baseUrl +'/'+ item.stationIcon; item.iconPath = this.baseUrl +'/'+ item.stationIcon;
item.latitude = Number(item.stationLatitude); item.latitude = Number(item.stationLatitude);
item.longitude = Number(item.stationLongitude); item.longitude = Number(item.stationLongitude);
item.width = 172; item.width = 239;
item.height = 148; item.height = 186;
const markerItem = { const markerItem = {
id: item.id, id: item.id,
iconPath: item.iconPath, iconPath: item.iconPath,
@ -361,7 +363,7 @@
stationType: item.stationType, stationType: item.stationType,
stationName: item.stationName, stationName: item.stationName,
stationCode: item.stationCode, stationCode: item.stationCode,
joinCluster: true joinCluster: true,
}; };
this.markers.push(markerItem); this.markers.push(markerItem);
} }