feat():适配优化
parent
c6144980a8
commit
85ecd992bd
|
|
@ -1,7 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="rain-detail-box">
|
<view class="rain-detail-box">
|
||||||
|
<u-status-bar></u-status-bar>
|
||||||
<view class="nav-bar">
|
<view class="nav-bar">
|
||||||
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon>
|
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||||
<view class="title">
|
<view class="title">
|
||||||
{{stnm}}
|
{{stnm}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -74,16 +75,18 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 30px;
|
height: 44px;
|
||||||
padding-top: 20px;
|
// margin-top: 30px;
|
||||||
padding-bottom: 10px;
|
// padding-top: 20px;
|
||||||
|
// padding-bottom: 10px;
|
||||||
border-bottom: 1px solid #dfdfdf;
|
border-bottom: 1px solid #dfdfdf;
|
||||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||||
}
|
}
|
||||||
.title{
|
.title{
|
||||||
flex:1;
|
flex:1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 18px;
|
margin-right: 18px;
|
||||||
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.tab-bar{
|
.tab-bar{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<image
|
<image
|
||||||
style="width: 100%; height: 100%;border-radius: 50%;"
|
style="width: 100%; height: 100%;border-radius: 50%;"
|
||||||
:src="default_src || default_img"
|
:src="default_src"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
></image>
|
></image>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -286,7 +286,6 @@ import moment from 'moment'
|
||||||
import {level} from "../../pages/utils/dicType"
|
import {level} from "../../pages/utils/dicType"
|
||||||
import {disType} from "../utils/dicType.js"
|
import {disType} from "../utils/dicType.js"
|
||||||
import drpOption from "./chartOption.js"
|
import drpOption from "./chartOption.js"
|
||||||
import default_img from "../../static/tabs/touxiang.png"
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -335,7 +334,6 @@ export default {
|
||||||
readStatus:false,
|
readStatus:false,
|
||||||
readYjStatus:false,
|
readYjStatus:false,
|
||||||
default_src: uni.getStorageSync('avatar'),
|
default_src: uni.getStorageSync('avatar'),
|
||||||
default_img
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
|
|
@ -111,7 +111,7 @@
|
||||||
console.log('-----avatar------',uni.getStorageSync('avatar'));
|
console.log('-----avatar------',uni.getStorageSync('avatar'));
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
uni.setStorageSync('avatar','../../static/tabs/touxing.png')
|
uni.setStorageSync('avatar','../../static/tabs/touxiang.png')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="table_div">
|
<div class="table_div">
|
||||||
<div class="table_cur">
|
<div class="table_cur">
|
||||||
<table style="width:100%">
|
<table style="width:100%;display:block">
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 10%;">
|
<th style="width: 11%;">
|
||||||
<div style="margin-top: 6px;">序号</div>
|
<div style="margin-top: 6px;">序号</div>
|
||||||
</th>
|
</th>
|
||||||
<th style="width: 28%">
|
<th style="width: 27%">
|
||||||
<div style="margin-top: 6px;">站名</div></th>
|
<div style="margin-top: 6px;">站名</div></th>
|
||||||
<th style="width: 20%;">
|
<th style="width: 20%;">
|
||||||
<div>时段雨量</div>
|
<div>时段雨量</div>
|
||||||
|
|
@ -21,8 +21,8 @@
|
||||||
</tr>
|
</tr>
|
||||||
<div :style="{'max-height':height + 'px', 'overflow-y': 'auto',width:'100%'}">
|
<div :style="{'max-height':height + 'px', 'overflow-y': 'auto',width:'100%'}">
|
||||||
<tr v-for="(item, index) in list" :key="index" style="width:100%">
|
<tr v-for="(item, index) in list" :key="index" style="width:100%">
|
||||||
<td style="width: 10%;">{{ index + 1 }}</td>
|
<td style="width: 11%;">{{ index + 1 }}</td>
|
||||||
<td style="width: 28%; color: #3399ef; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="jumpDetail(item)">
|
<td style="width: 27%; color: #3399ef; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="jumpDetail(item)">
|
||||||
{{ item.stnm }}</td>
|
{{ item.stnm }}</td>
|
||||||
<td style="width: 20%">{{ item.drp || 0 }}</td>
|
<td style="width: 20%">{{ item.drp || 0 }}</td>
|
||||||
<td style="width: 20%">{{ item.yesDrp || 0 }}</td>
|
<td style="width: 20%">{{ item.yesDrp || 0 }}</td>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="rain-box" style="overflow:hidden">
|
<view class="rain-box" style="overflow:hidden">
|
||||||
|
<u-status-bar></u-status-bar>
|
||||||
|
<!-- <view style="height: var(--status-bar-height); width: 100%;"></view> -->
|
||||||
<view class="nav-bar">
|
<view class="nav-bar">
|
||||||
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon>
|
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||||
<view>
|
<view style="font-size:18px">
|
||||||
雨情
|
雨情
|
||||||
</view>
|
</view>
|
||||||
<!-- <u-icon name="arrow-right" color="#000" size="28"></u-icon> -->
|
<!-- <u-icon name="arrow-right" color="#000" size="28"></u-icon> -->
|
||||||
|
|
@ -101,10 +103,10 @@
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<!-- 时间段 -->
|
<!-- 时间段 -->
|
||||||
<view style="padding: 5px 10px; text-align: center; color: #f7b156;">
|
<view style="padding: 1% 0%;width:100vw; text-align: center; color: #f7b156;">
|
||||||
统计时段:{{tm.stm}}至{{tm.etm}}
|
统计时段:{{tm.stm}}至{{tm.etm}}
|
||||||
</view>
|
</view>
|
||||||
<view style="margin: 0 10px;">
|
<view style="width:100%">
|
||||||
<Table :list="rainList" :height='tableHeight'/>
|
<Table :list="rainList" :height='tableHeight'/>
|
||||||
</view>
|
</view>
|
||||||
<u-picker
|
<u-picker
|
||||||
|
|
@ -427,7 +429,7 @@
|
||||||
let that = this
|
let that = this
|
||||||
uni.getSystemInfo({
|
uni.getSystemInfo({
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
that.tableHeight = res.windowHeight - 300;
|
that.tableHeight = res.windowHeight - 280;
|
||||||
console.log("this.tableHeight", that.tableHeight);
|
console.log("this.tableHeight", that.tableHeight);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -441,11 +443,12 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 30px;
|
height: 44px;
|
||||||
padding-top: 20px;
|
// margin-top: 30px;
|
||||||
padding-bottom: 10px;
|
// padding-top: 40px;
|
||||||
|
// padding-bottom: 10px;
|
||||||
border-bottom: 1px solid #dfdfdf;
|
border-bottom: 1px solid #dfdfdf;
|
||||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||||
}
|
}
|
||||||
.search-box{
|
.search-box{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="rain-detail-box">
|
<view class="rain-detail-box">
|
||||||
|
<u-status-bar></u-status-bar>
|
||||||
<view class="nav-bar">
|
<view class="nav-bar">
|
||||||
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon>
|
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||||
<view class="title">
|
<view class="title">
|
||||||
{{stnm}}
|
{{stnm}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -61,15 +62,17 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 30px;
|
height: 44px;
|
||||||
padding-top: 20px;
|
// margin-top: 30px;
|
||||||
padding-bottom: 10px;
|
// padding-top: 20px;
|
||||||
|
// padding-bottom: 10px;
|
||||||
border-bottom: 1px solid #dfdfdf;
|
border-bottom: 1px solid #dfdfdf;
|
||||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||||
}
|
}
|
||||||
.title{
|
.title{
|
||||||
flex:1;
|
flex:1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.tab-bar{
|
.tab-bar{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="rain-detail-box">
|
<view class="rain-detail-box">
|
||||||
|
<u-status-bar></u-status-bar>
|
||||||
<view class="nav-bar">
|
<view class="nav-bar">
|
||||||
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon>
|
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||||
<view class="title">
|
<view class="title">
|
||||||
{{stnm}}
|
{{stnm}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -118,16 +119,18 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 30px;
|
height: 44px;
|
||||||
padding-top: 20px;
|
// margin-top: 30px;
|
||||||
padding-bottom: 10px;
|
// padding-top: 20px;
|
||||||
|
// padding-bottom: 10px;
|
||||||
border-bottom: 1px solid #dfdfdf;
|
border-bottom: 1px solid #dfdfdf;
|
||||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||||
}
|
}
|
||||||
.title{
|
.title{
|
||||||
flex:1;
|
flex:1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 18px;
|
margin-right: 18px;
|
||||||
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.tab-bar{
|
.tab-bar{
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -134,8 +134,9 @@
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
.content{
|
.content{
|
||||||
|
width: 100%;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
max-height: 580px;
|
// max-height: 580px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="table_div">
|
<div class="table_div">
|
||||||
<div class="table_cur" >
|
<div class="table_cur" >
|
||||||
<table>
|
<table style="width:100%;display:block">
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 50px;">
|
<th style="width: 11%;">
|
||||||
序号
|
序号
|
||||||
</th>
|
</th>
|
||||||
<th style="width: 130px">
|
<th style="width: 32%">
|
||||||
站名
|
站名
|
||||||
<th style="width: 110px;">
|
<th style="width: 32%;">
|
||||||
监测时间
|
监测时间
|
||||||
</th>
|
</th>
|
||||||
<th style="width: 100px;" >
|
<th style="width: 25%;" >
|
||||||
实时水位(m)
|
实时水位(m)
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<div :style="{'max-height':height + 'px', 'overflow-y': 'auto'}">
|
<div :style="{'max-height':height + 'px', 'overflow-y': 'auto'}">
|
||||||
<tr v-for="(item, index) in newList" :key="index">
|
<tr v-for="(item, index) in newList" :key="index">
|
||||||
<td style="width: 50px">{{ index + 1 }}</td>
|
<td style="width: 11%">{{ index + 1 }}</td>
|
||||||
<td style="width: 130px;color: #3399ef;" @click="jumpDetail(item)">{{ item.stnm }}</td>
|
<td style="width: 32%;color: #3399ef;" @click="jumpDetail(item)">{{ item.stnm }}</td>
|
||||||
<td style="width: 110px">{{item.tm}}</td>
|
<td style="width: 32%">{{item.tm}}</td>
|
||||||
<td style="width: 100px; position: relative;" >
|
<td style="width: 25%; position: relative;" >
|
||||||
<text :class="{'active1':item.gstate == 1,'active2':item.wstate == 1}">{{ item.z.toFixed(2) }}</text>
|
<text :class="{'active1':item.gstate == 1,'active2':item.wstate == 1}">{{ item.z.toFixed(2) }}</text>
|
||||||
<text v-if="item.state == 1"
|
<text v-if="item.state == 1"
|
||||||
style="position: absolute; top: 0px; right: 0; color: #FF7D7D;font-size:18px;">↑</text>
|
style="position: absolute; top: 0px; right: 0; color: #FF7D7D;font-size:18px;">↑</text>
|
||||||
|
|
@ -84,10 +84,10 @@
|
||||||
}
|
}
|
||||||
.table_cur tr {
|
.table_cur tr {
|
||||||
display: flex;
|
display: flex;
|
||||||
line-height: 56rpx;
|
line-height: 80rpx;
|
||||||
}
|
}
|
||||||
.table_cur th {
|
.table_cur th {
|
||||||
height: 56rpx;
|
height: 80rpx;
|
||||||
color: #3399ef;
|
color: #3399ef;
|
||||||
background: #e1f3ff;
|
background: #e1f3ff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
|
||||||
|
|
@ -133,8 +133,9 @@
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
.content{
|
.content{
|
||||||
|
width: 100%;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
max-height: 580px;
|
// max-height: 580px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,36 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="table_div">
|
<div class="table_div">
|
||||||
<div class="table_cur">
|
<div class="table_cur">
|
||||||
<table>
|
<table style="width:100%;display:block">
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 40px;">
|
<th style="width: 11%;">
|
||||||
序号
|
序号
|
||||||
</th>
|
</th>
|
||||||
<th style="width: 90px">
|
<th style="width: 24%">
|
||||||
站名
|
站名
|
||||||
<th style="width: 80px;">
|
<th style="width: 22%;">
|
||||||
监测时间
|
监测时间
|
||||||
</th>
|
</th>
|
||||||
<th style="width: 100px;" >
|
<th style="width: 25%;" >
|
||||||
实时水位(m)
|
实时水位(m)
|
||||||
</th>
|
</th>
|
||||||
<th style="width: 90px;" >
|
<th style="width: 20%;" >
|
||||||
超汛限(m)
|
超汛限(m)
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<div :style="{'max-height':height + 'px', 'overflow-y': 'auto'}">
|
<div :style="{'max-height':height + 'px', 'overflow-y': 'auto'}">
|
||||||
<tr v-for="(item, index) in newList" :key="index">
|
<tr v-for="(item, index) in newList" :key="index">
|
||||||
<td style="width: 40px">{{ index + 1 }}</td>
|
<td style="width: 11%">{{ index + 1 }}</td>
|
||||||
<td style="width: 90px;color: #3399ef;" @click="jumpDetail(item)">{{ item.stnm }}</td>
|
<td style="width: 24%;color: #3399ef;" @click="jumpDetail(item)">{{ item.stnm }}</td>
|
||||||
<td style="width: 80px">{{item.tm}}</td>
|
<td style="width: 22%">{{item.tm}}</td>
|
||||||
<td style="width: 100px; position: relative;" >
|
<td style="width: 25%; position: relative;" >
|
||||||
<text :class="{'active1':item.flState == 1,'active2':item.desState == 1,'active3':item.calState}">{{ item.rz.toFixed(2) }}</text>
|
<text :class="{'active1':item.flState == 1,'active2':item.desState == 1,'active3':item.calState}">{{ item.rz.toFixed(2) }}</text>
|
||||||
<text v-if="item.state == 1"
|
<text v-if="item.state == 1"
|
||||||
style="position: absolute; top: 0px; right: 0; color: #FF7D7D;font-size:18px;">↑</text>
|
style="position: absolute; top: 0px; right: 0; color: #FF7D7D;font-size:18px;">↑</text>
|
||||||
<text v-else-if="item.state == 2" style="position: absolute;
|
<text v-else-if="item.state == 2" style="position: absolute;
|
||||||
top:0px;right: 0; color: #32E48E; font-size: 18px;">↓</text>
|
top:0px;right: 0; color: #32E48E; font-size: 18px;">↓</text>
|
||||||
</td>
|
</td>
|
||||||
<td style="width: 90px">{{item.afsltdz ? item.afsltdz.toFixed(2):'-'}}</td>
|
<td style="width: 20%">{{item.afsltdz ? item.afsltdz.toFixed(2):'-'}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</div>
|
</div>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -89,10 +89,10 @@
|
||||||
}
|
}
|
||||||
.table_cur tr {
|
.table_cur tr {
|
||||||
display: flex;
|
display: flex;
|
||||||
line-height: 56rpx;
|
line-height: 80rpx;
|
||||||
}
|
}
|
||||||
.table_cur th {
|
.table_cur th {
|
||||||
height: 56rpx;
|
height: 80rpx;
|
||||||
color: #3399ef;
|
color: #3399ef;
|
||||||
background: #e1f3ff;
|
background: #e1f3ff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="water-box">
|
<view class="water-box">
|
||||||
|
<u-status-bar></u-status-bar>
|
||||||
<view class="nav-bar">
|
<view class="nav-bar">
|
||||||
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon>
|
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||||
<view class="title">
|
<view class="title">
|
||||||
水情
|
水情
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -46,7 +47,7 @@
|
||||||
let that = this
|
let that = this
|
||||||
uni.getSystemInfo({
|
uni.getSystemInfo({
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
that.tableHeight = res.windowHeight - 240;
|
that.tableHeight = res.windowHeight - 220;
|
||||||
console.log("that.tableHeight",that.tableHeight);
|
console.log("that.tableHeight",that.tableHeight);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -61,16 +62,18 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 30px;
|
height: 44px;
|
||||||
padding-top: 20px;
|
// margin-top: 30px;
|
||||||
padding-bottom: 10px;
|
// padding-top: 40px;
|
||||||
|
// padding-bottom: 10px;
|
||||||
border-bottom: 1px solid #dfdfdf;
|
border-bottom: 1px solid #dfdfdf;
|
||||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||||
}
|
}
|
||||||
.title{
|
.title{
|
||||||
flex:1;
|
flex:1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.tab-bar{
|
.tab-bar{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue