From 86a382c36f10ebafb4a3541470ee1f00b2ab7d16 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Sat, 17 Jun 2023 17:33:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=97=E9=83=A8=E6=B0=B4=E6=88=BF=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5=EF=BC=8C=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Waterhouse/index.vue | 98 ++++++++++++++++++++++++++++------
 1 file changed, 83 insertions(+), 15 deletions(-)

diff --git a/src/views/Waterhouse/index.vue b/src/views/Waterhouse/index.vue
index 5461c63..71f207e 100644
--- a/src/views/Waterhouse/index.vue
+++ b/src/views/Waterhouse/index.vue
@@ -1,29 +1,29 @@
 <template>
     <div :class="$style['container']">
-        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.南门水房物联监测系统')" :titleTip="[]" :typeFun="['time']"
-            :alarmType="['']"></header2>
+        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.南门水房物联监测系统')" :titleTip="[]"
+            :typeFun="['time']" :alarmType="['']"></header2>
         <div class="main">
             <div class="left-title">{{ t('messages.数据监测') }}</div>
             <div class="lt-data item">
                 <div class="left">{{ t('messages.进水') }}</div>
-                <div class="center">20</div>
+                <div class="center">{{ allData.in }}</div>
             </div>
             <div class="rt-data item">
                 <div class="left">{{ t('messages.出水') }}</div>
-                <div class="center">20</div>
-            </div>
+                <div class="center">{{ allData.out }}</div>
+            </div> 
             <div class="lb-data item">
                 <div class="left">{{ t('messages.消耗') }}</div>
-                <div class="center">20</div>
+                <div class="center">{{ allData.use }}</div>
             </div>
             <div class="rb-data item">
                 <div class="left">{{ t('messages.用电') }}</div>
-                <div class="center">20</div>
+                <div class="center">{{ allData.currentCount }}</div>
             </div>
             <!-- 总体趋势图 -->
             <div class="rt-title">{{ t('messages.总体趋势图') }}</div>
             <div class="rt-radio">
-                <el-radio-group v-model="date" size="small">
+                <el-radio-group v-model="date" size="small" @change="dateChange">
                     <el-radio-button label="1">{{ t('messages.近一周') }}</el-radio-button>
                     <el-radio-button label="2">{{ t('messages.近一月') }}</el-radio-button>
                     <el-radio-button label="3">{{ t('messages.近三月') }}</el-radio-button>
@@ -39,7 +39,7 @@
                 </el-row>
                 <el-row v-for="item in mathList">
                     <el-col :span="12" class="p-left10" style="display: flex;justify-content: start;align-items: center;">
-                        <div :style="{'background':item.color,'width':'25px','height':'20px','margin-right':'5px'}"></div>
+                        <div :style="{ 'background': item.color, 'width': '25px', 'height': '20px', 'margin-right': '5px' }"></div>
                         <text>{{ item.name }}</text>
                     </el-col>
                     <el-col :span="4">{{ item.max }}</el-col>
@@ -51,11 +51,11 @@
             <div class="rb-title">{{ t('messages.效益&效率') }}</div>
             <div class="rb-content">
                 <div class="progress">
-                    <el-progress type="circle" :width="150" :percentage="25" />
+                    <el-progress type="circle" :width="150" :percentage="allData.xy" />
                     <div class="progress-text">{{ t('messages.效益') }}</div>
                 </div>
                 <div class="progress">
-                    <el-progress type="circle" :width="150" :percentage="25" />
+                    <el-progress type="circle" :width="150" :percentage="allData.xl" />
                     <div class="progress-text">{{ t('messages.效益') }}</div>
                 </div>
             </div>
@@ -66,6 +66,7 @@
 <script setup lang='ts'>
 import { onMounted, onUnmounted, reactive, ref, getCurrentInstance } from "vue";
 import header2 from "@/components/headerBox/header2.vue";
+import { getWaterFlowInfo } from '@/http/waterHouse'
 import { useI18n } from 'vue-i18n'
 let { t } = useI18n();
 let imgUrl = require('@/assets/img/water_room.png')
@@ -73,6 +74,14 @@ const { proxy } = getCurrentInstance() as any
 const mainChart = ref(null)
 let chart = null
 let date = ref('1')
+let allData = reactive({
+    in: 0,
+    out: 0,
+    use: 0,
+    currentCount: 0,
+    xl: 0,
+    xy: 0
+})
 document.title = t('messages.南门水房物联监测系统')
 const colors = ['#5470C6', '#91CC75', '#EE6666'];
 //进水量 出水量 用电量 最大值 最小值 平均值
@@ -104,7 +113,15 @@ function init() {
         xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: ['2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
+            data: [
+                "2023-06-11",
+                "2023-06-12",
+                "2023-06-13",
+                "2023-06-14",
+                "2023-06-15",
+                "2023-06-16",
+                "2023-06-17"
+            ]
         },
         yAxis: [
             {
@@ -128,26 +145,76 @@ function init() {
             {
                 name: '进水量',
                 type: 'line',
-                data: [120, 132, 101, 134, 90, 230, 210]
+                data: [0,2,1,1,2,0,1]
             },
             {
                 name: '出水量',
                 type: 'line',
                 yAxisIndex: 0,
-                data: [220, 182, 191, 234, 290, 330, 310]
+                data: [0,0,0,0,0,0,0]
             },
             {
                 name: '用电量',
                 type: 'line',
                 yAxisIndex: 1,
-                data: [150, 232, 201, 154, 190, 330, 1000]
+                data: [1.0907,0.595,0.9884,1.625,1.7888,1.9918,1.6647]
             }
         ]
     };
     chart.setOption(option);
+}
+function dateChange() {
+    getWaterFlowInfoFun()
+}
+async function getWaterFlowInfoFun() {
+    let { code, data }: any = await getWaterFlowInfo(date.value)
+    if (code == 200) {
+        allData.in = data.in
+        allData.out = data.out
+        allData.use = data.use
+        allData.currentCount = data.currentCount
+        allData.xl = data.xl
+        allData.xy = data.xy
+        chart.setOption({
+            xAxis: { data: data.date },
+            series: [
+                {
+                    name: '进水量',
+                    type: 'line',
+                    data: data.inChart
+                },
+                {
+                    name: '出水量',
+                    type: 'line',
+                    yAxisIndex: 0,
+                    data: data.outChart
+                },
+                {
+                    name: '用电量',
+                    type: 'line',
+                    yAxisIndex: 1,
+                    data: data.currentChart
+                }
+            ]
+        })
+        mathList[0].max = data.math.WaterInflow.max
+        mathList[0].min = data.math.WaterInflow.min
+        mathList[0].avg = data.math.WaterInflow.avg
+        mathList[1].max = data.math.WaterOutflow.max
+        mathList[1].min = data.math.WaterOutflow.min
+        mathList[1].avg = data.math.WaterOutflow.avg
+        mathList[2].max = data.math.CurrentUsage.max
+        mathList[2].min = data.math.CurrentUsage.min
+        mathList[2].avg = data.math.CurrentUsage.avg
+
+
+    }
+
+
 }
 onMounted(() => {
     init()
+    getWaterFlowInfoFun()
 })
 </script>
 <style module>
@@ -290,6 +357,7 @@ onMounted(() => {
     box-sizing: border-box;
     padding-left: 10px;
 }
+
 .math-title-color {
     color: #025AE5;
 }