样式更新

This commit is contained in:
978184212@qq.com 2025-11-22 15:46:52 +08:00
parent 2c66f71e04
commit d8c7d2f95e
6 changed files with 182 additions and 224 deletions

View File

@ -1,5 +1,5 @@
{
"name" : "农业面源污染监测系统",
"name" : "汾西县黄河流域面源污染监测",
"appid" : "__UNI__44A8AB0",
"description" : "",
"versionName" : "2.2.22",

View File

@ -460,11 +460,6 @@
this.$http.get('/applet/survStationInfo/getStationInfo',{params:params}).then(res =>{
if(res.data.code == 0){
this.details = res.data.data.stationInfo
this.dataH2s = res.data.data.liveSurvData[1].dataH2s
this.dataNh3 = res.data.data.liveSurvData[1].dataNh3
this.dataOu = res.data.data.liveSurvData[1].dataOu
this.dataTvoc = res.data.data.liveSurvData[1].dataTvoc
console.log('数据1',this.dataH2s)
if(this.details.deviceCount >= 10000 && this.details.deviceCount < 100000000){
this.details.deviceCount = (this.details.deviceCount /10000).toFixed(1) + '万'
}

View File

@ -1,109 +1,107 @@
<template>
<view class="container">
<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}">
{{item.dictLabel}}
<view class="zliebs" v-show="isActive === index">
</view>
<!-- 顶部选项卡 -->
<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}">
{{item.dictLabel}}
<view class="zliebs" v-show="isActive === index">
</view>
</scroll-view>
</view>
</scroll-view>
</view>
<!-- 异常趋势图 -->
<block v-if="isActive == 1">
<view class="liebiaos" v-if="resolt.length>0">
<view class="searchbox">
<view class="uni-px-8 uni-pb-8">
<text>设备选择</text>
<uni-data-select v-model="value" :localdata="rangeList" @change="change"></uni-data-select>
</view>
<view class="example-body">
<text>时间区间</text>
<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" :enableScroll="true" :ontouch="true" canvas2d />
</view>
</view>
</view>
<block v-if="isActive == 1">
<view class="liebiaos" v-if="resolt.length>0">
<view class="searchbox">
<view class="uni-px-8 uni-pb-8">
<text>设备选择</text>
<uni-data-select v-model="value" :localdata="rangeList" @change="change"></uni-data-select>
</view>
<view class="example-body">
<text>时间区间</text>
<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" :enableScroll="true" :ontouch="true" canvas2d />
</view>
<view class="zwsj" v-else>
<view class="inzwsj">
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
<view class="zwsjtext">
暂无数据
</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>
</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">
<view class="itembox" v-for="(item,index) in List" :key="index">
<view class="itembox_top" v-if="item.stationName">
<view class="itembox_lef">
<image src="../../static/fz.png" mode=""></image>
<view class="title">
{{item.stationName}}
</view>
</view>
<view class="itembox_right">
{{item.alertTime}}
</view>
</view>
<view class="itembox_bot">
<block v-if="item.alertContent.length != 0">
<view class="scrolltop">
<view class="tabitem" v-for="(it,i) in tabList" :key="i">
{{it}}
</view>
</view>
<view class="lists_item" v-for="(Item,Index) in item.alertContent" :key="Index">
<view class="jczbs" v-if="Item.name">
{{Item.name}}
</view>
<view class="zbz" v-if="Item.val">
{{Item.val}}
</view>
<view class="sbsj" v-if="Item.valHeight" style="color: #FF4242;">
{{Item.valHeight}}
<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>
</view>
<view class="szqss" v-if="Item.unit">
{{Item.unit}}
</view>
</view>
</block>
</view>
</block>
<!-- 监测站告警 -->
<block v-else-if="isActive == 0">
<view class="liebiaos" v-if="List.length != 0">
<view class="itembox" v-for="(item,index) in List" :key="index">
<view class="itembox_top" v-if="item.stationName">
<view class="itembox_lef">
<image src="../../static/fz.png" mode=""></image>
<view class="title">
{{item.stationName}}
</view>
</view>
<view class="load">
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</scroll-view>
</view>
<view class="zwsj" v-else>
<view class="inzwsj">
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
<view class="zwsjtext">
暂无数据
<view class="itembox_right">
{{item.alertTime}}
</view>
</view>
<view class="itembox_bot">
<block v-if="item.alertContent.length != 0">
<view class="scrolltop">
<view class="tabitem" v-for="(it,i) in tabList" :key="i">
{{it}}
</view>
</view>
<view class="lists_item" v-for="(Item,Index) in item.alertContent" :key="Index">
<view class="jczbs" v-if="Item.name">
{{Item.name}}
</view>
<view class="zbz" v-if="Item.val">
{{Item.val}}
</view>
<view class="sbsj" v-if="Item.valHeight" style="color: #FF4242;">
{{Item.valHeight}}
<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>
</view>
<view class="szqss" v-if="Item.unit">
{{Item.unit}}
</view>
</view>
</block>
</view>
</view>
</block>
</scroll-view>
<view class="load">
<uni-load-more :status="loadStatus"></uni-load-more>
</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>
</block>
</view>
</template>
@ -128,9 +126,6 @@
intervalId: null,
loadStatus: 'more', //more-loading-nomore-
isLoadMore: false, //
height: 0,
scorllheight: 0,
scorllheights: 0,
show: false,
show1: false,
top: 0,
@ -212,31 +207,21 @@
}
},
onLoad() {
uni.getSystemInfo({
success: res => {
var pxToRpxScale = 750 / res.windowWidth
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
var navigationHeight = 44 * pxToRpxScale
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 ktxStatusHeight = res.statusBarHeight * pxToRpxScale
var navigationHeight = 44 * pxToRpxScale
this.height = res.windowHeight * pxToRpxScale //px rpx
this.scorllheight = this.height - 174
this.scorllheights = this.height - 90
}
});
//
this.getList()
},
onReachBottom() {
//
this.lower();
},
onPullDownRefresh() {
//
this.refresherrefreshFun();
},
watch: {
rangetime(newval) {
@ -265,11 +250,9 @@
refresherrefreshFun() {
this.pageNo = 1
this.deviceNo = ''
this.getList()
},
//
refresherpullingFun() {
this.isRefresher = true
this.getList().then(() => {
uni.stopPullDownRefresh();
});
},
//
chooseClick(item, index) {
@ -282,49 +265,54 @@
}
},
getList() {
var params = {}
params.pageNo = this.pageNo
params.pageSize = this.pageSize
uni.showLoading({
title: '加载中'
});
this.List = []
if (this.isActive == 0) {
var url = '/applet/wxclient/alertRecord'
} 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) {
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) {
this.allNum = this.allNum;
} else {
this.allNum = parseInt(Number(this.allNum) + 1);
}
if (this.pageNo == this.allNum) {
this.isLastpage = true;
this.loadStatus = 'nomore'
} else {
this.isLastpage = false;
// this.isLoadMore=true
this.loadStatus = 'more'
}
} else {
this.isLastpage = true;
this.loadStatus = 'nomore'
return new Promise((resolve, reject) => {
var params = {}
params.pageNo = this.pageNo
params.pageSize = this.pageSize
uni.showLoading({
title: '加载中'
});
this.List = []
if (this.isActive == 0) {
var url = '/applet/wxclient/alertRecord'
} else if (this.isActive == 1) {
var url = '/applet/survPestlightAlert/list'
if (this.deviceNo) {
params.deviceNo = this.deviceNo
}
}
uni.hideLoading();
this.isRefresher = false
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) {
this.allNum = this.allNum;
} else {
this.allNum = parseInt(Number(this.allNum) + 1);
}
if (this.pageNo == this.allNum) {
this.isLastpage = true;
this.loadStatus = 'nomore'
} else {
this.isLastpage = false;
this.loadStatus = 'more'
}
} else {
this.isLastpage = true;
this.loadStatus = 'nomore'
}
}
uni.hideLoading();
this.isRefresher = false
resolve()
}).catch(err => {
uni.hideLoading();
reject(err)
})
})
},
lower() {
@ -361,7 +349,6 @@
this.loadStatus = 'nomore'
} else {
this.isLastpage = false;
// this.isLoadMore=true
this.loadStatus = 'more'
}
} else {
@ -457,44 +444,6 @@
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({
@ -559,10 +508,14 @@
page {
height: 100%;
background: #fff;
/* 确保页面可以滚动 */
overflow: auto;
}
.container {
height: 100%;
min-height: 100%;
/* 改为 min-height */
padding-bottom: 20rpx;
}
.searchbox {
@ -572,7 +525,6 @@
position: relative;
display: flex;
justify-content: space-between;
}
.search_input {
@ -675,6 +627,9 @@
height: 85rpx;
background-color: #fff;
border-bottom: 1rpx solid #ededed;
position: sticky;
top: 0;
z-index: 999;
}
.scroll {
@ -683,6 +638,7 @@
white-space: nowrap;
justify-content: space-between;
padding-top: 12rpx;
background: #fff;
}
.scroll-item {

View File

@ -11,19 +11,19 @@
版本号
</view>
<view class="item_right">
1.0.1
v1.0.1
</view>
</view>
<!-- <view class="usList_item">-->
<!-- <view class="item_left">-->
<!-- 经营主体-->
<!-- </view>-->
<!-- <view class="item_right">-->
<!--&lt;!&ndash; 版权所有 &ndash;&gt;-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="usList_item">
<view class="item_left">
经营主体
</view>
<view class="item_right">
版权所有
</view>
</view> -->
</view>
<text class="botmTetx">Copyright 汾西县农业农村局</text>
</view>
</view>
</template>
@ -105,4 +105,11 @@
font-weight: 400;
color: #999999;
}
.botmTetx{
position: absolute;
bottom: 60rpx;
left: 50%;
transform: translate(-50%);
color: #000;
}
</style>

View File

@ -4,7 +4,7 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "农业面源污染监测系统",
"navigationBarTitleText": "汾西县黄河流域面源污染监测",
"navigationStyle": "custom"
}
},

View File

@ -1,6 +1,6 @@
<template>
<view class="container">
<uni-nav-bar :fixed="true" background-color="transparent" status-bar title="农业面源污染监测系统" />
<uni-nav-bar :fixed="true" background-color="transparent" status-bar title="汾西县黄河流域面源污染监测" />
<image src="../../static/home_top_bg.png" mode="" class="bgimg"></image>
<scroll-view class="content" scroll-y="true" :style="{height:contentheight + 'rpx'}">
<view class="top_address">
@ -53,7 +53,7 @@
</view>
<view class="line"></view>
<swiper class="liebiao" next-margin="570rpx" :vertical="true" circular :autoplay="autoplay"
:indicator-dots="false" interval="900" :duration="duration">
:indicator-dots="false" interval="3000" :duration="duration">
<swiper-item class="item" v-for="(item,index) in list" :key="index" @click="todetail(item,index)">
<view class="topline" :class="{'toplines':index == 0}"></view>
<view class="List">