feat(): 水库监测信息模块开发

App.vue

@@ -12,8 +12,8 @@
 				console.log(token.secretKey,'App Launch')
 			} else {
 				uni.reLaunch({
-					url: '/pages/login/login'
+					// url: '/pages/login/login'
-					// url:'/pages/spjk/index'
+					url:'/pages/skInfo/detail/index'
 				})
 				console.log(token.secretKey,'App Launch2')
 			}

pages/skDetail/tjsj/tjsj.vue

@@ -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(
+          const {data} = await uni.$http.get(
-          `/gunshiApp/xfflood/river/water/detail`,{
+            "/gunshiApp/xyt/reservoir/water/detail?stcd=716164061")
-            source:this.source,
-            stcd:this.stcd,
-            type:2
-          }
-          )
           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;

pages/skDetail/zrtx/zrtx.vue

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

pages/skInfo/detail/index.vue

@@ -1,39 +1,32 @@
 <template>
-	<view :style="{height:'100vh',overflow:'hidden',backgroundColor:'#f0f0f0'}">
+	<view :style="{height:'100vh',overflow:'auto'}">
-		<u-navbar title="小玉潭水库1" :autoBack="true" :titleStyle="{
+		<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>
+		<u-tabs :list="list1" @click="click" style="background-color: #fff;margin-top: 60px;"></u-tabs>
-		<view class="" style="padding: 5px;">
+        <Jcxx v-show="tabs == 0"></Jcxx>
-			<view class="swiper-content">
+        <Zrtx v-show="tabs == 4"></Zrtx>
-				<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>
 	</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);
+				this.tabs = item.index;
-			},
-			change(e){
-				console.log(e);
-				this.nowNum = e.current+1
 			},
 			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'

pages/skInfo/detail/jcxx.vue

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