样式修改

This commit is contained in:
978184212@qq.com 2025-11-20 09:49:16 +08:00
parent 6b37bb3300
commit 493684077e
4 changed files with 506 additions and 290 deletions

View File

@ -1,9 +1,11 @@
<template>
<view class="container">
<scroll-view scroll-y="true" :style="{height:height + 'rpx'}" @refresherrefresh="refresherrefreshFun" @refresherpulling="refresherpullingFun" :refresher-triggered="isRefresher" refresher-enabled="true">
<scroll-view scroll-y="true" :style="{height:height + 'rpx'}" @refresherrefresh="refresherrefreshFun"
@refresherpulling="refresherpullingFun" :refresher-triggered="isRefresher" refresher-enabled="true">
<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>
@ -11,7 +13,7 @@
</scroll-view>
</view>
<block v-if="isActive == 1">
<view class="liebiaos" v-if="">
<view class="liebiaos" v-if="resolt.length>0">
<view class="searchbox">
<view class="uni-px-8 uni-pb-8">
<text>设备选择</text>
@ -22,20 +24,28 @@
<uni-datetime-picker v-model="rangetime" type="daterange" @maskClick="maskClick" />
</view>
</view>
<!-- 趋势图 -->
<view class="qushicov" v-for="(item,index) in resolt" :key="index">
<text class="quname">{{item.itemName}}{{item.unit}}</text>
<view class="charts-box">
<qiun-data-charts type="area" :opts="opts" :chartData="item.chartData" />
</view>
<!-- <view class="zwsj" v-else>
</view>
</view>
<view class="zwsj" v-else>
<view class="inzwsj">
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
<view class="zwsjtext">
暂无数据
</view>
</view>
</view> -->
</view>
</block>
<!-- 监测站告警 -->
<block v-else-if="isActive == 0">
<view class="liebiaos" v-if="List.length != 0">
<scroll-view :style="{height:scorllheights + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
<scroll-view :style="{height:scorllheights + 'rpx'}" scroll-y="true" class="scroll-Y"
@scrolltolower="lower">
<view class="itembox" v-for="(item,index) in List" :key="index">
<view class="itembox_top" v-if="item.stationName">
<view class="itembox_lef">
@ -64,11 +74,13 @@
</view>
<view class="sbsj" v-if="Item.valHeight" style="color: #FF4242;">
{{Item.valHeight}}
<image class="zximg" src="../../../static/home_shuju_shang.png" mode=""></image>
<image class="zximg" src="../../../static/home_shuju_shang.png" mode="">
</image>
</view>
<view class="sbsj" v-if="Item.valLow" style="color: #19D58A;">
{{Item.valLow}}
<image class="zximg" src="../../../static/home_shuju_xia.png" mode=""></image>
<image class="zximg" src="../../../static/home_shuju_xia.png" mode="">
</image>
</view>
<view class="szqss" v-if="Item.unit">
{{Item.unit}}
@ -100,6 +112,9 @@
import configService from '@/common/service/config.service.js';
export default {
data() {
const currentDate = this.getDate({
format: true
})
return {
List: [],
baseUrl: configService.apiUrl,
@ -128,8 +143,7 @@
arrays: [],
isRefresher: false, //
reload: '',
topItems:[
{
topItems: [{
dictLabel: '监测站告警'
},
{
@ -139,9 +153,62 @@
value: 0,
rangeList: [],
isActive: 0,
rangetime: [Date.now(), Date.now()],
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() {
@ -156,6 +223,8 @@
}
});
this.getList()
this.startTime = this.rangetime[0]
this.endTime = this.rangetime[1]
},
onShow() {
uni.getSystemInfo({
@ -171,13 +240,27 @@
},
watch: {
rangetime(newval) {
console.log('范围选:', this.rangetime);
this.startTime = this.rangetime[0]
this.endTime = this.rangetime[1]
this.qushiList()
},
},
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
@ -214,7 +297,9 @@
params.deviceNo = this.deviceNo
}
}
this.$http.get(url,{params:params}).then(res =>{
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)
@ -264,7 +349,9 @@
} else if (this.isActive == 1) {
var url = '/applet/wxclient/alertRecord'
}
this.$http.get(url,{params:params}).then(res =>{
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)
@ -289,14 +376,15 @@
this.getList()
},
//
qushiList(){
async qushiList() {
try {
const data = {
deployId: this.deployId,
startTime: this.startTime,
endTime: this.endTime,
}
this.$http.post('/applet/survAlertRecord/alertSummary',data).then(res => {
console.log("趋势数据",res.data.data)
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 {
@ -304,15 +392,22 @@
data: ovelit.dataMap[item.entity] || []
}
})
console.log("666666666666",this.resolt)
})
this.timeList = ovelit.timeList || []
this.getServerData(this.resolt);
}
} catch (error) {
console.error("获取趋势图数据失败", error)
}
},
sbeiList(){
//
async sbeiList() {
try {
uni.showLoading({
title: '加载中'
});
this.$http.get('/applet/survDeviceDeploy/deviceList?stationCode=').then(res =>{
let sbList = []
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,
@ -320,23 +415,142 @@
"id": lit.id,
}
})
if (this.rangeList.length > 0) {
this.deployId = this.rangeList[this.value].id
this.qushiList()
await 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);
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: []
}]
};
},
}
}
</script>
@ -344,10 +558,13 @@
<style lang="scss">
page {
height: 100%;
background: #fff;
}
.container {
height: 100%;
}
.searchbox {
height: 148rpx;
padding: 15rpx 30rpx;
@ -357,6 +574,7 @@
justify-content: space-between;
}
.search_input {
border: none;
height: 60rpx;
@ -366,6 +584,7 @@
background-color: #F6F6F6;
padding-left: 50rpx;
}
.searchbox image {
width: 32rpx;
height: 32rpx;
@ -374,6 +593,7 @@
top: 35%;
z-index: 99;
}
.searchbutton {
width: 10%;
height: 60rpx;
@ -381,14 +601,17 @@
text-align: center;
line-height: 60rpx;
}
.itembox {
background-color: white;
padding: 10rpx 30rpx;
margin-top: 20rpx;
}
.itembox:first-child {
margin-top: 0;
}
.itembox_top {
display: flex;
align-items: center;
@ -396,39 +619,47 @@
padding: 20rpx 0;
border-bottom: 2rpx solid #e4e4e4;
}
.itembox_lef image {
width: 40rpx;
height: 40rpx;
margin-right: 14rpx;
}
.itembox_lef {
display: flex;
align-items: center;
font-weight: 500;
width: 63%;
}
.title {
font-weight: bold;
}
.load {
height: 100rpx;
line-height: 100rpx;
text-align: center;
color: #c6c6c6;
}
.zwsj {
width: 100%;
display: flex;
padding: 60% 170rpx 0;
}
.inzwsj {
width: 100%;
}
.zwsjimg {
width: 100%;
height: 224rpx;
margin-bottom: 37rpx;
}
.zwsjtext {
width: 100%;
font-size: 26rpx;
@ -438,12 +669,14 @@
line-height: 31rpx;
text-align: center;
}
.topScroll {
width: 100%;
height: 85rpx;
background-color: #fff;
border-bottom: 1rpx solid #ededed;
}
.scroll {
height: 85rpx;
display: flex;
@ -451,6 +684,7 @@
justify-content: space-between;
padding-top: 12rpx;
}
.scroll-item {
width: 50%;
text-align: center;
@ -458,11 +692,13 @@
font-size: 28rpx;
font-family: Source Han Sans SC;
}
.scroll-item2 {
font-size: 30rpx;
font-family: Source Han Sans SC;
color: #0F6EFF;
}
.zliebs {
width: 100rpx;
height: 4rpx;
@ -470,14 +706,17 @@
margin: 12rpx auto 0;
border-radius: 20rpx;
}
.lists_item {
padding: 0rpx 0rpx 16rpx 0rpx;
box-sizing: border-box;
display: flex;
}
.lists_item {
padding-top: 16rpx;
}
.jczbs {
width: 32%;
font-size: 24rpx;
@ -502,11 +741,13 @@
display: flex;
align-items: center;
}
.zximg {
width: 30rpx;
height: 30rpx;
margin-left: 6rpx;
}
.szqss {
flex: 1;
font-size: 24rpx;
@ -534,16 +775,42 @@
.tabitem:first-child {
width: 31%;
}
.tabitem:nth-child(2) {
width: 27%;
}
.tabitem:nth-child(3) {
width: 23%;
}
.tabitem:nth-child(4) {
flex: 1
}
.itembox_right {
font-size: 26rpx;
}
.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;
}
}
</style>

View File

@ -17,13 +17,13 @@
</view>
</view>
<view class="state">
<view class="" v-if="item.runStatus == 0">
<view class="" v-if="item.isOnline == 1">
在线
</view>
<view class="" v-else>
线
线
</view>
<image v-if="item.runStatus == 0" src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
<image v-if="item.isOnline == 1" src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
<image v-else src="../../static/zhandian_icon_lixian.png" mode="" class="zt"></image>
</view>
</view>

View File

@ -17,12 +17,12 @@
</view>
</view>
</view>
<view class="state">
<!-- <view class="state">
<view class="">
在线
</view>
<image src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
</view>
</view> -->
</view>
<view class="botcontent">
<block v-for="(item,index) in it" :key="index">

View File

@ -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];