样式更新
This commit is contained in:
parent
2c66f71e04
commit
d8c7d2f95e
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name" : "农业面源污染监测系统",
|
||||
"name" : "汾西县黄河流域面源污染监测",
|
||||
"appid" : "__UNI__44A8AB0",
|
||||
"description" : "",
|
||||
"versionName" : "2.2.22",
|
||||
|
|
|
|||
|
|
@ -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) + '万'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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">-->
|
||||
<!--<!– 版权所有 –>-->
|
||||
|
||||
<!-- </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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "农业面源污染监测系统",
|
||||
"navigationBarTitleText": "汾西县黄河流域面源污染监测",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue