From c63a5c7e802ac8c9432869c834da5231cc49b3cd Mon Sep 17 00:00:00 2001
From: duan <duanduanduan.com>
Date: Tue, 2 Aug 2022 16:35:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(src/views/reagent/mainoverview/):=20?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=B8=BB=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/common.js                        |  10 ++
 src/api/reagent/overView.js              |   9 ++
 src/permission.js                        |   4 +-
 src/views/reagent/mainoverview/index.vue | 126 ++++++++++++++---------
 4 files changed, 100 insertions(+), 49 deletions(-)
 create mode 100644 src/api/common.js

diff --git a/src/api/common.js b/src/api/common.js
new file mode 100644
index 0000000..143784c
--- /dev/null
+++ b/src/api/common.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// /api/client/client_list
+export function client_list(data) {
+  return request({
+    url: '/api/client/client_list',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/reagent/overView.js b/src/api/reagent/overView.js
index 8185331..27d749c 100644
--- a/src/api/reagent/overView.js
+++ b/src/api/reagent/overView.js
@@ -25,3 +25,12 @@ export function home_drug_remaining(data) {
     data
   })
 }
+
+//  /api/home/get_monitoring_info
+export function get_monitoring_info(data) {
+  return request({
+    url: '/api/home/get_monitoring_info',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/permission.js b/src/permission.js
index 4aa7d47..5240522 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -31,12 +31,12 @@ router.beforeEach(async(to, from, next) => {
       } else {
         try {
           // get user info
-          await store.dispatch('user/getInfo')
+          // await store.dispatch('user/getInfo')
 
           next()
         } catch (error) {
           // remove token and go to login page to re-login
-          await store.dispatch('user/resetToken')
+          // await store.dispatch('user/resetToken')
           Message.error(error || 'Has Error')
           next(`/login?redirect=${to.path}`)
           NProgress.done()
diff --git a/src/views/reagent/mainoverview/index.vue b/src/views/reagent/mainoverview/index.vue
index 51ba9bb..683ac05 100644
--- a/src/views/reagent/mainoverview/index.vue
+++ b/src/views/reagent/mainoverview/index.vue
@@ -14,26 +14,26 @@
           <div class="header">
             <div class="title">环境监控图</div>
             <div>
-              <el-select v-model="value" size="small" placeholder="请选择">
+              <el-select v-model="client_id" size="small" placeholder="请选择柜体" @change="(val) => valueChange('id',val)">
                 <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+                  v-for="item in clientOptions"
+                  :key="item.id"
+                  :label="item.client_name"
+                  :value="item.client_id"
                 />
               </el-select>
-              <el-select v-model="value" size="small" placeholder="请选择">
+              <el-select v-model="client_date" size="small" placeholder="请选择" @change="(val) => valueChange('date',val)">
                 <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+                  v-for="(item,index) in options"
+                  :key="index"
+                  :label="item"
+                  :value="index+1"
                 />
               </el-select>
-              <el-radio-group v-model="radio1" size="small">
-                <el-radio-button label="速度" />
-                <el-radio-button label="温度" />
-                <el-radio-button label="VOC含量" />
+              <el-radio-group v-model="radio1" size="small" @change="(val) => valueChange('radio',val)">
+                <el-radio-button :label="1">温度</el-radio-button>
+                <el-radio-button :label="2">湿度</el-radio-button>
+                <el-radio-button :label="3">VOC含量</el-radio-button>
               </el-radio-group>
             </div>
           </div>
@@ -54,24 +54,24 @@
             </el-popover>
           </div>
           <div>
-            <el-button size="small">查看全部</el-button>
+            <!--            <el-button size="small">查看全部</el-button>-->
           </div>
         </div>
         <div class="header">
-          <el-select v-model="value" size="small" style="margin-right: 0" placeholder="请选择">
+          <!--          <el-select v-model="client_id" size="small" style="margin-right: 0" placeholder="请选择">-->
+          <!--            <el-option-->
+          <!--              v-for="item in options"-->
+          <!--              :key="item.value"-->
+          <!--              :label="item.label"-->
+          <!--              :value="item.value"-->
+          <!--            />-->
+          <!--          </el-select>-->
+          <el-select v-model="rclient_id" :disabled="rloading" size="small" style="margin-right: 0" placeholder="请选择柜体" @change="remainingPageChange(1)">
             <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-          <el-select v-model="value" :disabled="rloading" size="small" style="margin-right: 0" placeholder="请选择">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              v-for="item in clientOptions"
+              :key="item.client_id"
+              :label="item.client_name"
+              :value="item.client_id"
             />
           </el-select>
         </div>
@@ -79,7 +79,7 @@
           <el-table
             v-loading="rloading"
             :data="remainingData"
-            height="200"
+            height="230"
             style="width: calc(100% - 1.25rem)"
             element-loading-text="拼命加载中"
           >
@@ -98,10 +98,10 @@
             <el-pagination
               layout="prev, pager, next"
               :total="rtotal"
-              hide-on-single-page
               :disabled="rloading"
               :current-page.sync="rpage"
               :page-size.sync="rpage_size"
+              hide-on-single-page
               @current-change="remainingPageChange"
             />
           </div>
@@ -294,8 +294,8 @@
           </el-descriptions-item>
         </el-descriptions>
         <div style="text-align: center;margin-top: 20px">
-          <el-button>取消</el-button>
-          <el-button type="primary">确认受邀</el-button>
+          <el-button @click="innerVisible=false">取消</el-button>
+          <el-button type="primary" @click="innerVisible=false">确认受邀</el-button>
         </div>
       </el-dialog>
     </el-dialog>
@@ -304,7 +304,8 @@
 
 <script>
 import Detail from '@/components/Detail/index'
-import { home_info, home_warning_list, home_drug_remaining } from '@/api/reagent/overView'
+import { home_info, home_warning_list, home_drug_remaining, get_monitoring_info } from '@/api/reagent/overView'
+import { client_list } from '@/api/common'
 import stringify from '@/utils/stringify'
 
 export default {
@@ -343,9 +344,10 @@ export default {
         }
       ],
       tableData: [],
-      options: [],
+      clientOptions: [],
+      options: ['近24小时', '近七天', '近一个月'],
       value: '',
-      radio1: '',
+      radio1: 1,
       gridData: [],
       seach_word: '',
       page: 1,
@@ -356,17 +358,26 @@ export default {
       object_type: '',
       loadingReagent: false,
       rowData: {},
-
       remainingData: [],
       rpage: 1,
       rtotal: 0,
       rpage_size: 15,
       rclient_id: null,
-      rloading: false
+      rloading: false,
+      client_id: null,
+      client_date: 1,
+      linechartData: []
     }
   },
   created() {
     this.loading = true
+    client_list().then(
+      res => {
+        this.clientOptions = res.data.data_list
+        this.client_id = this.clientOptions[0].client_id
+      }
+    )
+    this.getMonitoringData()
     home_info().then(res => {
       this.initDataFunc(res.data)
       this.initAllCharts()
@@ -380,6 +391,22 @@ export default {
     })
   },
   methods: {
+    valueChange(t, value) {
+      this.getMonitoringData()
+      this.lineCharts(t)
+    },
+    getMonitoringData() {
+      const data = {
+        client_id: this.client_id,
+        time_type: this.client_date,
+        obj_type: this.radio1
+      }
+      get_monitoring_info(stringify(data)).then(
+        res => {
+          this.linechartData = res.data
+        }
+      )
+    },
     remainingPageChange(page) {
       this.rpage = page
       this.getRemainingData()
@@ -478,6 +505,8 @@ export default {
           {
             name: 'Nightingale Chart',
             type: 'pie',
+            radius: [8, 60],
+            roseType: 'area',
             label: {
               normal: {
                 show: true,
@@ -490,13 +519,17 @@ export default {
       }
       this.myChart.setOption(option)
     },
-    lineCharts() {
-      this.myChart2 = this.$echarts.init(
-        document.getElementById('line')
-      )
+    lineCharts(t) {
+      if (t) {
+        this.myChart2.clear()
+      } else {
+        this.myChart2 = this.$echarts.init(
+          document.getElementById('line')
+        )
+      }
       const option = {
         title: {
-          text: '最近24小时温度变化'
+          text: this.options[this.client_date - 1] + '温度变化'
         },
         tooltip: {
           trigger: 'axis'
@@ -506,14 +539,13 @@ export default {
           show: true,
           feature: {
             magicType: { type: ['line', 'bar'] },
-            restore: {},
             saveAsImage: {}
           }
         },
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: this.linechartData.map(item => item.record_date)
         },
         yAxis: {
           type: 'value',
@@ -523,11 +555,11 @@ export default {
         },
         series: [
           {
-            name: '一号柜',
+            name: this.clientOptions.find(item => item.client_id === this.client_id).client_name,
             type: 'line',
             areaStyle: {},
             smooth: true,
-            data: [10, 11, 13, 11, 12, 12, 9],
+            data: this.linechartData.map(item => item.data_value),
             markPoint: {
               data: [
                 { type: 'max', name: 'Max' },
@@ -641,6 +673,6 @@ export default {
 }
 #line{
   width: 65rem;
-  height: 13rem;
+  height: 16rem;
 }
 </style>