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

2
pages.json
View File

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

22
pages/maps/index.vue
View File

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