feat(): 水库监测信息模块开发
parent
d63ffc1e9e
commit
40db662861
4
App.vue
4
App.vue
|
|
@ -12,8 +12,8 @@
|
|||
console.log(token.secretKey,'App Launch')
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
// url:'/pages/spjk/index'
|
||||
// url: '/pages/login/login'
|
||||
url:'/pages/skInfo/detail/index'
|
||||
})
|
||||
console.log(token.secretKey,'App Launch2')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,12 +95,6 @@
|
|||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
source:String,
|
||||
default:''
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableData:{},
|
||||
|
|
@ -117,13 +111,8 @@
|
|||
methods: {
|
||||
async getTableData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
`/gunshiApp/xfflood/river/water/detail`,{
|
||||
source:this.source,
|
||||
stcd:this.stcd,
|
||||
type:2
|
||||
}
|
||||
)
|
||||
const {data} = await uni.$http.get(
|
||||
"/gunshiApp/xyt/reservoir/water/detail?stcd=716164061")
|
||||
if(data.code == 200){
|
||||
this.tableData = {...data.data};
|
||||
}
|
||||
|
|
@ -141,7 +130,6 @@
|
|||
<style lang="scss" scoped>
|
||||
.tjsj-box{
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
.tjsj-row{
|
||||
.first-row{
|
||||
line-height: 40px;
|
||||
|
|
|
|||
|
|
@ -10,10 +10,6 @@
|
|||
<script>
|
||||
import Card from "./card.vue"
|
||||
export default {
|
||||
props:{
|
||||
resCode:String,
|
||||
default:''
|
||||
},
|
||||
components:{
|
||||
Card
|
||||
},
|
||||
|
|
@ -27,11 +23,10 @@
|
|||
async getData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/reservoir/water/safe/person",
|
||||
"/gunshiApp/xyt/resSafePersonB/list",
|
||||
{
|
||||
resCode:this.resCode
|
||||
resCode:"42120250085"
|
||||
})
|
||||
console.log("data",data);
|
||||
if(data.code == 200){
|
||||
this.list = [...data.data];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,32 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'hidden',backgroundColor:'#f0f0f0'}">
|
||||
<u-navbar title="小玉潭水库1" :autoBack="true" :titleStyle="{
|
||||
<view :style="{height:'100vh',overflow:'auto'}">
|
||||
<u-navbar :title="skInfo.resName" :autoBack="true" :titleStyle="{
|
||||
fontSize:'18px'
|
||||
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
||||
</u-navbar>
|
||||
<u-tabs :list="list1" @click="click" style="background-color: #fff;margin-top: 45px;"></u-tabs>
|
||||
<view class="" style="padding: 5px;">
|
||||
<view class="swiper-content">
|
||||
<text class="num">{{nowNum}}/{{15}}</text>
|
||||
<u-swiper :list="list2" @change="change" @click="click"></u-swiper>
|
||||
<text class="time">2024-08-12 11:00</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-tabs :list="list1" @click="click" style="background-color: #fff;margin-top: 60px;"></u-tabs>
|
||||
<Jcxx v-show="tabs == 0"></Jcxx>
|
||||
<Zrtx v-show="tabs == 4"></Zrtx>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import Jcxx from "./jcxx.vue"
|
||||
import Zrtx from "../../skDetail/zrtx/zrtx.vue"
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
tabs:0,
|
||||
model: {
|
||||
stm: '',
|
||||
etm: ''
|
||||
},
|
||||
nowNum:1,
|
||||
customStyle: {
|
||||
background: '#000'
|
||||
},
|
||||
list2: [
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
],
|
||||
list1: [{
|
||||
name: '监测信息',
|
||||
}, {
|
||||
|
|
@ -44,35 +37,27 @@
|
|||
name: '库容曲线'
|
||||
}, {
|
||||
name: '责任人'
|
||||
}]
|
||||
}],
|
||||
skInfo:{}
|
||||
};
|
||||
},
|
||||
components:{
|
||||
Jcxx,
|
||||
Zrtx
|
||||
},
|
||||
onLoad() {
|
||||
console.log('小玉潭水库');
|
||||
this.getList()
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
click(item) {
|
||||
console.log('item', item);
|
||||
},
|
||||
change(e){
|
||||
console.log(e);
|
||||
this.nowNum = e.current+1
|
||||
this.tabs = item.index;
|
||||
},
|
||||
getList(){
|
||||
uni.$http.post('/gunshiApp/xyt/attResBase/list',this.model).then(res=>{
|
||||
console.log(res,'res');
|
||||
this.skInfo = res.data.data[0];
|
||||
})
|
||||
},
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
this.model.start = e[0]
|
||||
this.model.end = e[1]
|
||||
this.show = false
|
||||
},
|
||||
cancel() {
|
||||
this.show = false
|
||||
},
|
||||
toDetail() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/wtcl/detail/index'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,330 @@
|
|||
<template>
|
||||
<view class="" style="padding: 5px;">
|
||||
<view class="swiper-content">
|
||||
<text class="num">{{nowNum}}/{{totalNum}}</text>
|
||||
<u-swiper :list="imgList" height='230px' @change="change" imgMode="scaleToFill" keyName="imgPath"></u-swiper>
|
||||
<text class="time">{{imgTime}}</text>
|
||||
</view>
|
||||
<view class="update-time">
|
||||
<text>更新时间</text>
|
||||
<text>{{info.tm}}</text>
|
||||
</view>
|
||||
<view class="sk-info">
|
||||
<view class="sk-first-row">
|
||||
<view class="first-item">
|
||||
<text>{{info.normWatLev}}米</text>
|
||||
<text>水位</text>
|
||||
</view>
|
||||
<view class="first-item">
|
||||
<text>{{info.nowCap}}米</text>
|
||||
<text>蓄水量</text>
|
||||
</view>
|
||||
<view class="first-line"></view>
|
||||
<image
|
||||
style="width: 20px; height: 20px;"
|
||||
src="../../../static/images/first.jpg"
|
||||
></image>
|
||||
</view>
|
||||
<view class="first-extra-row">
|
||||
<text>坝顶高程{{info.crestElev}}米</text>
|
||||
<text>汛限水位{{info.flLowLimLev}}米</text>
|
||||
<text>总库容{{info.totCap}}米</text>
|
||||
</view>
|
||||
<view class="sk-second-row">
|
||||
<view class="first-item">
|
||||
<text>{{rainInfo.today}}毫米</text>
|
||||
<text>今日降雨</text>
|
||||
</view>
|
||||
<view class="first-item">
|
||||
<text>{{rainInfo.yesterdayDrp}}毫米</text>
|
||||
<text>昨日降雨</text>
|
||||
</view>
|
||||
<view class="first-line" style="margin-right:17px"></view>
|
||||
<image
|
||||
style="width: 20px; height: 20px;"
|
||||
src="../../../static/images/second.jpg"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rain-box">
|
||||
<view class="rain-title">
|
||||
<view class="line-icon"></view>
|
||||
<view >水雨情过程线</view>
|
||||
</view>
|
||||
<view class="time-select">
|
||||
<view class="time-ranger" >
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:15%;color:#3399ef">{{stm}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 15%;color:#3399ef">{{etm}}</text>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="switch-btn">
|
||||
<u-subsection :list="subsectionList" :current="current" mode="subsection" @change="subsectionChange"></u-subsection>
|
||||
</view>
|
||||
<view class="show-content">
|
||||
<view style=" height: 500px; overflow-y: auto; padding:0" v-show="current == 0">
|
||||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||||
</view>
|
||||
<JcTable v-show="current == 1" :tableData='jcTableData'/>
|
||||
<Tjsj v-show="current == 2" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-datetime-picker
|
||||
:show="showTime"
|
||||
v-model="startTime"
|
||||
mode="datetime"
|
||||
@confirm="handleStartTime"
|
||||
@cancel="showTime=false"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showTime1"
|
||||
v-model="endTime"
|
||||
mode="datetime"
|
||||
@confirm="handleEndTime"
|
||||
@cancel="showTime1=false"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import Tjsj from "../../skDetail/tjsj/tjsj.vue"
|
||||
import JcTable from "../../skDetail/jcsj/jcsjTable.vue"
|
||||
import drpOption from "../../skDetail/jcsj/chartOption.js"
|
||||
const stm = moment().subtract(7, 'days').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
|
||||
const etm = moment().set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
|
||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||
export default {
|
||||
components:{
|
||||
Tjsj,
|
||||
JcTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
startTime:stm,
|
||||
endTime:etm,
|
||||
imgList:[],
|
||||
nowNum:1,
|
||||
totalNum:0,
|
||||
imgTime:'2024-08-12 11:00',
|
||||
info:'',
|
||||
rainInfo:{},
|
||||
stm,
|
||||
etm,
|
||||
showTime:false,
|
||||
showTime1:false,
|
||||
subsectionList: ['图', '表', '统计值'],
|
||||
current:0,
|
||||
jcTableData:[],
|
||||
chartData: {},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取监测图像
|
||||
async getImgList () {
|
||||
try {
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xyt/reservoir/water/real/img",
|
||||
{
|
||||
resCode: "42120250085"
|
||||
})
|
||||
if(data.code == 200){
|
||||
const newArr = data.data.map(item => ({...item,imgPath: url + item.imgPath }))
|
||||
this.totalNum = newArr.length;
|
||||
this.imgList = [...newArr];
|
||||
this.imgTime = this.imgList[0]?.tm || "2024-08-12 11:00";
|
||||
this.nowNum = !newArr.length ? 0 : 1;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
|
||||
}
|
||||
},
|
||||
// 获取水库水情基本信息
|
||||
async getSkinfo(){
|
||||
try {
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xyt/reservoir/water/list")
|
||||
if(data.code == 200){
|
||||
this.info = data.data[0]
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
// 获取雨量信息
|
||||
async getrainInfo(){
|
||||
try {
|
||||
const {data} = await uni.$http.get(
|
||||
"/gunshiApp/xyt/reservoir/water/detail?stcd=716164061")
|
||||
if(data.code == 200){
|
||||
this.rainInfo = data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
|
||||
// 搜索
|
||||
async getJcsjData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xyt/reservoir/water/monitor/data",
|
||||
{
|
||||
stcd:"716164061",
|
||||
stm:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
etm:moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
})
|
||||
if(data.code == 200){
|
||||
this.jcTableData = [...data.data];
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
searchHandle(){
|
||||
this.getJcsjData()
|
||||
},
|
||||
change(e){
|
||||
this.nowNum = e.current+1;
|
||||
this.imgTime = this.imgList[e.current].tm
|
||||
},
|
||||
handleStartTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.stm = time
|
||||
this.showTime = false
|
||||
},
|
||||
handleEndTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.etm = time;
|
||||
this.showTime1 = false
|
||||
},
|
||||
subsectionChange(e){
|
||||
this.current = e
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
jcTableData(newV, oldV){
|
||||
if(this.info){
|
||||
this.chartData = {...drpOption(newV,this.info.afsltdz,this.info.flLowLimLev,this.info.desFloodLev,this.info.calFloodLev)}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getImgList();
|
||||
this.getSkinfo();
|
||||
this.getrainInfo();
|
||||
this.getJcsjData();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.swiper-content{
|
||||
position: relative;
|
||||
.num{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 1;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 0 4px;
|
||||
border-radius: 6px;
|
||||
opacity: .4;
|
||||
font-size: 12px;
|
||||
}
|
||||
.time{
|
||||
position: absolute;
|
||||
background-color: #000;
|
||||
opacity: .4;
|
||||
color: #fff;
|
||||
bottom: 0;
|
||||
width:100%;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
.update-time{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 5px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.sk-info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2px 5px;
|
||||
margin: 5px 0;
|
||||
.sk-first-row,.sk-second-row{
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background-color: #f2fafc;
|
||||
.first-line{
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background-color: #c6eae6;
|
||||
}
|
||||
.first-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.sk-second-row{
|
||||
margin: 5px 0;
|
||||
background-color: #f2f8ff;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
.first-extra-row{
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
justify-content: space-between;
|
||||
background-color: #f2fafc;
|
||||
}
|
||||
.rain-box{
|
||||
padding: 5px 0px;
|
||||
.rain-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line-icon{
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
background-color: #0079fe;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.time-ranger{
|
||||
margin-bottom: 10px;
|
||||
.start-time, .end-time{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
}
|
||||
.switch-btn{
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.show-content{
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
this.getData()
|
||||
},
|
||||
handleStartTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.stm = time
|
||||
this.showTime = false
|
||||
},
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 887 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue