From 051881323afbd2f1dc7dcb781e689eae198a4572 Mon Sep 17 00:00:00 2001
From: lishenfeng <lishenfeng@gunshiiot.com>
Date: Fri, 8 Nov 2024 17:57:53 +0800
Subject: [PATCH] =?UTF-8?q?fix():bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                            |   6 +
 pages/aqjc/index.vue                  |   2 +-
 pages/homeIndex/index.vue             |   3 +-
 pages/skInfo/detail/index.vue         |   2 +-
 pages/skInfo/index.vue                |  29 +++--
 pages/skInfo/waterDatail/index.vue    | 138 ++++++++++++++++++++++
 pages/skInfo/waterDatail/jcOptions.js | 161 ++++++++++++++++++++++++++
 pages/skInfo/waterDatail/jcTable.vue  |  97 ++++++++++++++++
 pages/spjk/index.vue                  |   2 +-
 pages/stlljk/index.vue                |   2 +-
 pages/utils/tool.js                   |  17 +++
 pages/ylzList/detail/index.vue        |   7 +-
 12 files changed, 443 insertions(+), 23 deletions(-)
 create mode 100644 pages/skInfo/waterDatail/index.vue
 create mode 100644 pages/skInfo/waterDatail/jcOptions.js
 create mode 100644 pages/skInfo/waterDatail/jcTable.vue

diff --git a/pages.json b/pages.json
index 92ec95c..5a95018 100644
--- a/pages.json
+++ b/pages.json
@@ -360,6 +360,12 @@
 	    "navigationBarTitleText": ""
 	  }
 	},
+  {
+	  "path": "pages/skInfo/waterDatail/index",
+	  "style": {
+	    "navigationBarTitleText": ""
+	  }
+	},
   {
 	  "path": "pages/ylzList/detail/index",
 	  "style": {
diff --git a/pages/aqjc/index.vue b/pages/aqjc/index.vue
index 8c2dd5f..9bfef32 100644
--- a/pages/aqjc/index.vue
+++ b/pages/aqjc/index.vue
@@ -1,5 +1,5 @@
 <template>
-        <view :style="{height:'100vh',overflow:'hidden'}">
+        <view :style="{height:'100vh',overflow:'hidden',backgroundColor:'#fff'}">
 		<u-status-bar></u-status-bar>
 		<u-navbar title="安全监测" :autoBack="true" :titleStyle="{
 				fontSize:'18px'
diff --git a/pages/homeIndex/index.vue b/pages/homeIndex/index.vue
index 4125ed2..2a5d111 100644
--- a/pages/homeIndex/index.vue
+++ b/pages/homeIndex/index.vue
@@ -83,7 +83,6 @@
 			this.getYjData();
 			uni.$showMsg("刷新成功");
 			setTimeout(function () {
-				console.log(11);
 				uni.stopPullDownRefresh();
 			}, 1000);
 		},
@@ -332,10 +331,10 @@
 	}
 
 	.warn {
-		background-color: #fff;
 		padding: 18rpx 20rpx;
 		text-align: left;
 		margin-bottom: 12rpx;
+		background: #fff;
 	}
 
 	.info_24 {
diff --git a/pages/skInfo/detail/index.vue b/pages/skInfo/detail/index.vue
index d88e39c..1e2cba2 100644
--- a/pages/skInfo/detail/index.vue
+++ b/pages/skInfo/detail/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<view :style="{height:'100vh',overflow:'auto'}">
+	<view :style="{height:'100vh',overflow:'auto',backgroundColor:'#fff'}">
 		<u-navbar :title="skInfo.resName" :autoBack="true" :titleStyle="{
 				fontSize:'18px'
 			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
diff --git a/pages/skInfo/index.vue b/pages/skInfo/index.vue
index 2e538f4..e3b0882 100644
--- a/pages/skInfo/index.vue
+++ b/pages/skInfo/index.vue
@@ -21,13 +21,13 @@
 					</view>
 				</view>
 			</view>
-			<view class="bottom"  @click="toDetail()">
+			<view class="bottom">
 				<view class="bottomItem">
-					<view class="withd-2">
+					<view class="withd-2" @click="toWaterDetail('生活供水',shStcd)">
 						<text>生活供水m³/s</text>:
 						<text>{{shgs}}</text>
 					</view>
-					<view class="withd-2">
+					<view class="withd-2" @click="toWaterDetail('生态供水',stStcd)">
 						<text>生态供水m³/s</text>:
 						<text>{{stgs}}</text>
 					</view>
@@ -56,21 +56,11 @@
 					"cap":'蓄水量万m³'
 				},
 				tm:	moment().format('YYYY-MM-DD HH:mm:ss'),
-				dataform:{
-					// resName:'',
-					// 1:192.41,
-					// 2:112,
-					// 3:194.00,
-					// 4:-1.59,
-					// 5:194.00,
-					// 6:196.28,
-					// 7:12,
-					// 8:15.4,
-					// 9:129.06,
-					// 10:75.34
-				},
+				dataform:{},
 				stgs:'',
 				shgs:'',
+				stStcd:'',
+				shStcd:'',
 				imageList:[],
 				baseUrl:'http://223.75.53.141:9102/test.by-lyf.tmp',
 				showImg:''
@@ -112,9 +102,11 @@
 					res.data.data.forEach(item=>{
 						if(item.sttp == 'QQ'){
 							this.stgs=item.q
+							this.stStcd=item.stcd
 						}
 						if(item.sttp == 'PQ'){
 							this.shgs=item.q
+							this.shStcd=item.stcd
 						}
 					})
 				})
@@ -139,6 +131,11 @@
 					url:'/pages/skInfo/detail/index'
 				})
 			},
+			toWaterDetail(name,stcd){
+				uni.navigateTo({
+                    url:`/pages/skInfo/waterDatail/index?name=${name}&stcd=${stcd}`,
+                })
+			},
 			getList(){
 				uni.$http.post('/gunshiApp/xyt/attResBase/list').then(res=>{
 					console.log(res.data.data[0]);
diff --git a/pages/skInfo/waterDatail/index.vue b/pages/skInfo/waterDatail/index.vue
new file mode 100644
index 0000000..28cf75a
--- /dev/null
+++ b/pages/skInfo/waterDatail/index.vue
@@ -0,0 +1,138 @@
+<template>
+    <view :style="{height:'100vh',overflow:'auto',backgroundColor:'#fff'}">
+        <u-navbar :title="name" :autoBack="true" :titleStyle="{
+				fontSize:'18px'
+			}" :height='40' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
+        </u-navbar>
+        <view style="padding:10px">
+            <view class="time-ranger" style="margin-top:70px">
+                <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 v-if="tableData.length != 0">
+                    <view class="water-chart-area">
+                    <qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
+                </view>
+                <view class="water-table-area">
+                    <Table :tableData="tableData"></Table>
+                </view>
+                </view>
+                <view style="height:calc(100vh - 150px);display: flex;align-items: center;justify-content: center;background-color: #fff;" v-else>
+				<image src="../../../static/empty.png" mode="" ></image>
+			</view>
+            </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 Table from "./jcTable.vue"
+    import {
+        numberFormat
+    } from '../../utils/tool'
+    import drpOptions from './jcOptions'
+    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");
+    export default {
+        components: {
+            Table
+        },
+        data() {
+            return {
+                name: '',
+                stcd: '',
+                startTime: stm,
+                endTime: etm,
+                stm,
+                etm,
+                showTime: false,
+                showTime1: false,
+                tableData: [],
+                chartData: {}
+            }
+        },
+        methods: {
+            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
+            },
+            async geTableData() {
+                try {
+                    const {
+                        data
+                    } = await uni.$http.post(
+                        "/gunshiApp/xyt/stWaterR/list", {
+                            stcd: this.stcd,
+                            startTime: moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
+                            endTime: moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
+                            isAsc: false,
+                            orderField: "tm"
+                        })
+
+                    if (data.code == 200) {
+                        this.tableData = [...data.data]
+                    }
+                } catch (error) {
+                    uni.$showMsg();
+                }
+            },
+            searchHandle() {
+                this.geTableData()
+            }
+        },
+        watch: {
+            tableData(n, o) {
+                let num = 0;
+                if (n.length > 0) {
+                    n.forEach(s => {
+                        num += Number(s.v)
+                    })
+                    this.chartData = {
+                        ...drpOptions(n, numberFormat(num))
+                    }
+                }
+
+            }
+        },
+        mounted() {
+            this.geTableData()
+        },
+        onLoad(options) {
+            this.stcd = options.stcd;
+            this.name = options.name;
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    .water-chart-area {
+        width: 100%;
+        height: 250px;
+    }
+    .water-table-area{
+        margin-top: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/pages/skInfo/waterDatail/jcOptions.js b/pages/skInfo/waterDatail/jcOptions.js
new file mode 100644
index 0000000..c468fde
--- /dev/null
+++ b/pages/skInfo/waterDatail/jcOptions.js
@@ -0,0 +1,161 @@
+
+import echarts from 'echarts/lib/echarts';
+export default function DrpOption(data,num) { 
+  const minL = Math.floor(Math.min(...data?.map(s => s.q)));
+  const maxL = Math.ceil(Math.max(...data?.map(s => s.q)));
+  const minS = Math.floor(Math.min(...data?.map(s => s.v)));
+  const maxS = Math.ceil(Math.max(...data?.map(s => s.v)));
+    let eopts = {
+      title: {
+      text: `时段总水量:${num.value}${num.unit}m³`,
+      top: "0%",
+      right: "12%",
+      textStyle: {
+         fontWeight: "normal",
+         fontSize:14
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    grid:  {
+      top: '20%',
+      left: '10%',
+      right: '14%',
+      bottom: '10%',
+      borderWidth: 0
+    },
+    legend: {
+      show: true,
+      top: "8%",
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        data: data?.map(item => item.tm),
+        splitLine: {
+          show: false
+        },
+        axisLabel: {
+          color: '#333',
+          fontSize: 14,
+          formatter: val => val.substr(0,'2020-11-11 11:11'.length)
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#07a6ff',
+            width: 0.5,
+          }
+        },
+        axisTick: {
+          show: false,
+        },
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        position: 'left',
+        name:"流量(m³/s)",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#07a6ff',
+            width: 0.25,
+            type: 'dashed'
+          }
+        },
+        axisLabel: {
+          color: '#333',
+          fontSize: 12,
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false,
+        },
+        min: minL,
+        max: maxL
+        // max: xMaxVal
+      },
+      {
+        type: 'value',
+        position: 'right',
+        name:"水量(m³)",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#07a6ff',
+            width: 0.25,
+            type: 'dashed'
+          }
+        },
+        axisLabel: {
+          color: '#333',
+          fontSize: 12,
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false,
+        },
+        min: minS - 1,
+        max: maxS
+      }
+    ],
+    };
+    let chartData = {
+      series: [
+     
+      {
+        name:'流量',
+        type:'line',
+        smooth: true,
+        showSymbol: false,
+        symbol: false,
+        itemStyle: {
+          normal: {
+            color: "#FAC858",
+          }
+        },
+        lineStyle: {
+          normal: {
+            width: 3,
+            shadowColor: 'rgba(0,0,0,0.4)',
+            shadowBlur: 10,
+            shadowOffsetY: 10
+          }
+        },
+        markPoint: {
+          data: [{
+            name: '最大值',
+            type: 'max',
+          }],
+        },
+        data: data?.map(s => s.q),
+      },
+      {
+        name: '水量',
+        type: 'bar',
+        yAxisIndex:1,
+        barWidth: '10%',
+        data: data?.map(s => s.v),
+        itemStyle: {
+          normal: {
+            color:"#5773c7"
+          },
+        },
+        label: {
+          show: false,
+        },
+      },
+    ]
+    };
+    return {
+        eopts,
+        chartData
+    }
+}
\ No newline at end of file
diff --git a/pages/skInfo/waterDatail/jcTable.vue b/pages/skInfo/waterDatail/jcTable.vue
new file mode 100644
index 0000000..9e5fa96
--- /dev/null
+++ b/pages/skInfo/waterDatail/jcTable.vue
@@ -0,0 +1,97 @@
+<template>
+   <div class="table_div">
+              <div class="table_cur">
+                <table style="width:100%;display:block">
+                  <tr>
+                    <th style="width: 12%;">
+                      序号
+                      </th>
+                    <th style="width: 30%;">
+                      时间
+                      </th>
+                    <th style="width: 30%;">流量(m³/s)</th>
+                    <th style="width: 28%;">水量(m³)</th>
+                  </tr>
+                  <!-- style="max-height: 480px; overflow-y: auto" -->
+                  <div class="scroll-table">
+                <tr v-for="(item, index) in tableData" :key="index">
+                      <td style="width: 12%;">{{index + 1}}</td>
+                      <td style="width: 30%;">{{simpleData(item.tm)}}</td>
+                      <td style="width: 30%;">{{ item.q}}</td>
+                      <td style="width:28%;">{{ item.v }}</td>
+                    </tr>
+                    <div style="height:180px"></div>
+                  </div>
+                </table>
+              </div>
+            </div>
+
+</template>
+
+<script>
+  import moment from "moment"
+   export default {
+     props:{
+       tableData:{
+         type:Array,
+         default:[],
+       }
+     },
+ 
+     methods: {
+         simpleData(tm){
+          return moment(tm).format("MM-DD HH:mm")
+         }
+     },
+   }
+</script>
+
+<style lang="scss" scoped>
+  .table_div {
+    height: 100%;
+    max-width: calc(100% - 0px);
+    // max-height: calc(80vh);
+    flex: 1;
+    padding-top: 0px;
+    // overflow-x: scroll;
+  }
+  /*table样式*/
+  .table_cur {
+    width: 100%;
+    empty-cells: show;
+    border-collapse: collapse;
+    font-size: 14px;
+  }
+   .scroll-table{
+    height: calc(55vh - 180px);
+    overflow-y: auto;
+    width:'100%'
+  }
+  .table_cur tr {
+    display: flex;
+    line-height: 75rpx;
+  }
+  .table_cur th {
+    height: 85rpx;
+    color: #3399ef;
+    background: #e1f3ff;
+    font-size: 14px;
+    // font-weight: bold;
+    padding: 0px 10px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    text-align: center !important;
+  }
+  
+  .table_cur td {
+    height: 65rpx;
+    // border-bottom: 1px solid #d8ddeb;
+    font-size: 14px;
+    color: #2f4056;
+    padding: 0 10px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    text-align: center !important;
+  }
+  /*table样式 end*/
+</style>
\ No newline at end of file
diff --git a/pages/spjk/index.vue b/pages/spjk/index.vue
index f91687e..56eabe8 100644
--- a/pages/spjk/index.vue
+++ b/pages/spjk/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<view :style="{height:'100vh',overflow:'hidden'}">
+	<view :style="{height:'100vh',overflow:'hidden',backgroundColor:'#fff'}">
 		<u-status-bar></u-status-bar>
 		<u-navbar title="视频监控" :autoBack="true" :titleStyle="{
 				fontSize:'18px'
diff --git a/pages/stlljk/index.vue b/pages/stlljk/index.vue
index 5145ef2..db604dc 100644
--- a/pages/stlljk/index.vue
+++ b/pages/stlljk/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view style="height:100vh; overflow:hidden">
+  <view style="height:100vh; overflow:hidden;background-color:#fff">
       <u-status-bar></u-status-bar>
 		<u-navbar
 			title="生态流量监控" 
diff --git a/pages/utils/tool.js b/pages/utils/tool.js
index b7ca467..766979a 100644
--- a/pages/utils/tool.js
+++ b/pages/utils/tool.js
@@ -81,3 +81,20 @@ export const fileChange = (file) => {
   
   return url
 }
+
+export function numberFormat(value) {
+  let param = {}
+  let k = 10000
+  let sizes = ['', '万', '亿', '万亿']
+  let i
+  if (value < k) {
+      param.value = value
+      param.unit = ''
+  } else {
+      i = Math.floor(Math.log(value) / Math.log(k));
+      param.value = ((value / Math.pow(k, i))).toFixed(2);
+      param.unit = sizes[i];
+  }
+  console.log(param)
+  return param;
+}
diff --git a/pages/ylzList/detail/index.vue b/pages/ylzList/detail/index.vue
index 17de353..931cefd 100644
--- a/pages/ylzList/detail/index.vue
+++ b/pages/ylzList/detail/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <view :style="{height:'100vh',overflow:'auto'}">
+    <view :style="{height:'100vh',overflow:'auto',backgroundColor:'#fff'}">
         <u-navbar :title="stnm" :autoBack="true" :titleStyle="{
 				fontSize:'18px'
 			}" :height='40' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
@@ -158,6 +158,7 @@
         justify-content: space-around;
         padding: 10px 40px;
         border-bottom: 1px solid #dfdfdf;
+        background-color: #fff;
     }
 
     .active {
@@ -167,5 +168,9 @@
     .ylz-chart-area {
         width: 100%;
         height: 230px;
+        background-color: #fff;
+    }
+    .ylz-table-area{
+         background-color: #fff;
     }
 </style>
\ No newline at end of file