From 1fdf8229127eb628972621da71115384112a3cc7 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Fri, 12 Nov 2021 11:38:41 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B7=BB=E5=8A=A0=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E7=AD=89=E7=BB=86=E8=8A=82=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/data-search-bar.vue         |   2 +-
 src/components/function-config-pending.vue |   4 +-
 src/components/search-bar-data.vue         |   7 +-
 src/components/search-bar.vue              |  16 ++-
 src/components/search-commands.vue         |   2 +-
 src/config/config.js                       |   4 +-
 src/views/data-history.vue                 |  35 +++---
 src/views/data-realtime.vue                | 122 +++++++++++----------
 src/views/data-report.vue                  |  25 +++--
 src/views/device-list.vue                  |  11 +-
 src/views/statistical-realtime.vue         |   9 +-
 11 files changed, 129 insertions(+), 108 deletions(-)

diff --git a/src/components/data-search-bar.vue b/src/components/data-search-bar.vue
index 2220af5..f9d8a15 100644
--- a/src/components/data-search-bar.vue
+++ b/src/components/data-search-bar.vue
@@ -17,7 +17,7 @@
       </el-date-picker>
     </el-form-item>
     <el-form-item class="ml-6">
-      <el-button type="primary" @click="onSubmit">查询</el-button>
+      <el-button type="primary" @click="onSubmit"><i class="el-icon-search mr-2"></i> 查询</el-button>
     </el-form-item>
   </el-form>
 </template>
diff --git a/src/components/function-config-pending.vue b/src/components/function-config-pending.vue
index 3c8956d..03a890d 100644
--- a/src/components/function-config-pending.vue
+++ b/src/components/function-config-pending.vue
@@ -59,7 +59,7 @@
 
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置温度低阈值(℃)" prop="temperatureLow">
-          <el-input-number v-model="data.temperatureLow" :min="0" />
+          <el-input-number v-model="data.temperatureLow" :min="-30" />
         </el-form-item>
       </el-col>
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
@@ -155,7 +155,7 @@ import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
 import cloneDeep from 'lodash/cloneDeep';
 import isDate from 'lodash/isDate';
-import { createConfigFunction, getConfigFunction } from 'apis/index';
+import { createConfigFunction, getConfigFunction } from 'apis';
 import Refresh from 'components/refresh.vue';
 import { corrosiveTypes, functionConfig } from '@/config/config';
 
diff --git a/src/components/search-bar-data.vue b/src/components/search-bar-data.vue
index 128cbbe..1bbdd34 100644
--- a/src/components/search-bar-data.vue
+++ b/src/components/search-bar-data.vue
@@ -26,11 +26,14 @@
     </el-form-item>
 
     <el-form-item>
-      <el-button type="primary" @click="onSubmit" :loading="loadingSearch">查询</el-button>
+      <el-button :loading="loadingSearch" type="primary" @click="onSubmit">
+        <i class="el-icon-search mr-2"></i>
+        查询
+      </el-button>
     </el-form-item>
 
     <el-form-item v-if="showExport">
-      <el-button type="primary" @click="onExport" :loading="loadingExport">导出</el-button>
+      <el-button :loading="loadingExport" type="primary" @click="onExport"><i class="el-icon-download mr-2"></i>导出</el-button>
     </el-form-item>
   </el-form>
 </template>
diff --git a/src/components/search-bar.vue b/src/components/search-bar.vue
index d2d0b21..79ff6b2 100644
--- a/src/components/search-bar.vue
+++ b/src/components/search-bar.vue
@@ -1,23 +1,27 @@
 <template>
-  <el-form :inline="true" :model="searchDevice" ref="searchDeviceForm">
+  <el-form ref="searchDeviceForm" :inline="true" :model="searchDevice">
     <el-form-item label="选择站点">
       <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
-        <el-option label="全部" value v-if="showAll"></el-option>
-        <el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option>
+        <el-option v-if="showAll" label="全部" value></el-option>
+        <el-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="onSubmit">查询</el-button>
+      <el-button type="primary" @click="onSubmit"><i class="el-icon-search mr-2"></i>查询</el-button>
+    </el-form-item>
+    <el-form-item v-if="showRefresh">
+      <el-button type="primary" @click="$emit('refresh')"><i class="el-icon-refresh mr-2"></i>刷新</el-button>
     </el-form-item>
   </el-form>
 </template>
 
 <script setup>
-import { reactive, ref, computed, defineEmits, watch } from 'vue';
+import { computed, defineEmits, defineProps, reactive, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 
-const emit = defineEmits(['getDate']);
+defineProps({ showRefresh: Boolean });
+const emit = defineEmits(['getDate', 'refresh']);
 const router = useRouter();
 const searchDevice = reactive({ deviceId: '' });
 
diff --git a/src/components/search-commands.vue b/src/components/search-commands.vue
index 0f3e358..2b71b5b 100644
--- a/src/components/search-commands.vue
+++ b/src/components/search-commands.vue
@@ -24,7 +24,7 @@
     </el-form-item>
 
     <el-form-item>
-      <el-button type="primary" @click="onSubmit">查询</el-button>
+      <el-button type="primary" @click="onSubmit"><i class="el-icon-search mr-2"></i>查询</el-button>
     </el-form-item>
   </el-form>
 </template>
diff --git a/src/config/config.js b/src/config/config.js
index addb974..3d86aa3 100644
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -90,5 +90,5 @@ export const PEND_TYPE = {
   },
 };
 
-// 实时查询数据的轮询时间
-export const REALTIME_DATA_INTERVAL = 15000;
+// 实时查询数据的轮询时间 1分钟
+export const REALTIME_DATA_INTERVAL = 60000;
diff --git a/src/views/data-history.vue b/src/views/data-history.vue
index 677091f..349206d 100644
--- a/src/views/data-history.vue
+++ b/src/views/data-history.vue
@@ -142,28 +142,19 @@ function formatTime(time) {
   <template v-if="data">
     <el-table :data="data" border stripe style="width: 100%" :max-height="contentHeight">
       <el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
-      <!--      <el-table-column align="center" label="ICCID" min-width="100" prop="iccid" />-->
-      <!--      <el-table-column align="center" label="IMEI" min-width="80" prop="imei" />-->
-      <!--      <el-table-column align="center" label="信号强度" min-width="80" prop="signal" />-->
-      <!--      <el-table-column align="center" label="基站编号" min-width="80" prop="stationNo" />-->
-      <!--      <el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />-->
-      <!--      <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />-->
-      <el-table-column align="center" label="太阳能电压" min-width="94" prop="solarVoltage" />
-      <el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" />
-      <!--      <el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />-->
-      <!--      <el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" />-->
-      <!--      <el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" />-->
-
-      <el-table-column align="center" label="机箱温度" min-width="80" prop="deviceTemperature" />
-      <el-table-column align="center" label="机箱湿度" min-width="80" prop="deviceHumidity" />
-      <el-table-column align="center" label="环境温度" min-width="80" prop="environmentTemperature" />
-      <el-table-column align="center" label="环境湿度" min-width="80" prop="environmentHumidity" />
-      <el-table-column align="center" label="SO2" min-width="50" prop="so2" />
-      <el-table-column align="center" label="盐分" min-width="50" prop="salt" />
-      <el-table-column align="center" label="腐流1" min-width="60" prop="corrosion1" />
-      <el-table-column align="center" label="腐流2" min-width="60" prop="corrosion2" />
-      <el-table-column align="center" label="腐流3" min-width="60" prop="corrosion3" />
-      <el-table-column align="center" label="腐流4" min-width="60" prop="corrosion4" />
+      <el-table-column align="center" label="太阳能电压(V)" min-width="120" prop="solarVoltage" />
+      <el-table-column align="center" label="蓄电池电压(V)" min-width="120" prop="batteryVoltage" />
+      <el-table-column align="center" label="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
+      <el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
+      <el-table-column align="center" label="环境温度(℃)" min-width="110" prop="environmentTemperature" />
+      <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
+      <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
+      <el-table-column align="center" label="盐温(℃)" min-width="80" prop="salt" />
+      <el-table-column align="center" label="盐阻(Ω)" min-width="80" prop="salt" />
+      <el-table-column align="center" label="锌(nA)" min-width="80" prop="corrosion1" />
+      <el-table-column align="center" label="铜(nA)" min-width="80" prop="corrosion2" />
+      <el-table-column align="center" label="铝(nA)" min-width="80" prop="corrosion3" />
+      <el-table-column align="center" label="钢(nA)" min-width="80" prop="corrosion4" />
       <el-table-column align="center" label="采集时间" min-width="170">
         <template #default="scope">
           {{ formatTime(+scope.row.time) }}
diff --git a/src/views/data-realtime.vue b/src/views/data-realtime.vue
index d409012..0c17f5d 100644
--- a/src/views/data-realtime.vue
+++ b/src/views/data-realtime.vue
@@ -1,3 +1,61 @@
+<template>
+  <SearchBar @search="getData" @refresh="onRefresh" :show-refresh="true" />
+
+  <template v-if="data">
+    <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
+      <el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
+      <el-table-column align="center" label="ICCID" min-width="190" prop="iccid" />
+      <el-table-column align="center" label="IMEI" min-width="150" prop="imei" />
+      <el-table-column align="center" label="信号强度" min-width="80" prop="signal" />
+      <el-table-column align="center" label="基站编号" min-width="130" prop="stationNo" />
+      <el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />
+      <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />
+      <el-table-column align="center" label="采集时间" min-width="170">
+        <template #default="scope">
+          {{ formatTime(+scope.row.time) }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="后台接受时间" min-width="170">
+        <template #default="scope">
+          {{ formatTime(+scope.row.createdAt) }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="太阳能电压(V)" min-width="120" prop="solarVoltage" />
+      <el-table-column align="center" label="蓄电池电压(V)" min-width="120" prop="batteryVoltage" />
+      <el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />
+      <el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" />
+      <el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" />
+      <el-table-column align="center" label="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
+      <el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
+      <el-table-column align="center" label="环境温度(℃)" min-width="110" prop="environmentTemperature" />
+      <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
+      <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
+      <el-table-column align="center" label="盐温(℃)" min-width="80" prop="salt" />
+      <el-table-column align="center" label="盐阻(Ω)" min-width="80" prop="salt" />
+      <el-table-column align="center" label="锌(nA)" min-width="80" prop="corrosion1" />
+      <el-table-column align="center" label="铜(nA)" min-width="80" prop="corrosion2" />
+      <el-table-column align="center" label="铝(nA)" min-width="80" prop="corrosion3" />
+      <el-table-column align="center" label="钢(nA)" min-width="80" prop="corrosion4" />
+    </el-table>
+
+    <el-pagination
+      :current-page="page.page"
+      :default-page-size="50"
+      :page-count="page.count"
+      :page-size="page.size"
+      :page-sizes="[1, 10, 20, 50, 100]"
+      :total="page.total"
+      background
+      class="my-3 float-right"
+      layout="total, sizes, prev, pager, next, jumper"
+      @current-change="onCurrentPageChange"
+      @size-change="onSizeChange"
+      @prev-click="onPrev"
+      @next-click="onNext"
+    ></el-pagination>
+  </template>
+</template>
+
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useStore } from 'vuex';
@@ -111,61 +169,11 @@ const onPrev = e => {
 function formatTime(time) {
   return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
 }
-</script>
-
-<template>
-  <SearchBar @search="getData" />
 
-  <template v-if="data">
-    <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
-      <el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
-      <el-table-column align="center" label="ICCID" min-width="190" prop="iccid" />
-      <el-table-column align="center" label="IMEI" min-width="150" prop="imei" />
-      <el-table-column align="center" label="信号强度" min-width="80" prop="signal" />
-      <el-table-column align="center" label="基站编号" min-width="130" prop="stationNo" />
-      <el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />
-      <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />
-      <el-table-column align="center" label="采集时间" min-width="170">
-        <template #default="scope">
-          {{ formatTime(+scope.row.time) }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="后台接受时间" min-width="170">
-        <template #default="scope">
-          {{ formatTime(+scope.row.createdAt) }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="太阳能电压" min-width="94" prop="solarVoltage" />
-      <el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" />
-      <el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />
-      <el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" />
-      <el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" />
-      <el-table-column align="center" label="机箱温度" min-width="80" prop="deviceTemperature" />
-      <el-table-column align="center" label="机箱湿度" min-width="80" prop="deviceHumidity" />
-      <el-table-column align="center" label="环境温度" min-width="80" prop="environmentTemperature" />
-      <el-table-column align="center" label="环境湿度" min-width="80" prop="environmentHumidity" />
-      <el-table-column align="center" label="SO2" min-width="50" prop="so2" />
-      <el-table-column align="center" label="盐分" min-width="50" prop="salt" />
-      <el-table-column align="center" label="腐流1" min-width="60" prop="corrosion1" />
-      <el-table-column align="center" label="腐流2" min-width="60" prop="corrosion2" />
-      <el-table-column align="center" label="腐流3" min-width="60" prop="corrosion3" />
-      <el-table-column align="center" label="腐流4" min-width="60" prop="corrosion4" />
-    </el-table>
-
-    <el-pagination
-      :current-page="page.page"
-      :default-page-size="50"
-      :page-count="page.count"
-      :page-size="page.size"
-      :page-sizes="[1, 10, 20, 50, 100]"
-      :total="page.total"
-      background
-      class="my-3 float-right"
-      layout="total, sizes, prev, pager, next, jumper"
-      @current-change="onCurrentPageChange"
-      @size-change="onSizeChange"
-      @prev-click="onPrev"
-      @next-click="onNext"
-    ></el-pagination>
-  </template>
-</template>
+// 手动刷新 清除定时器 重新获取数据
+function onRefresh() {
+  apiTimer && clearInterval(apiTimer);
+  apiTimer = null;
+  getData();
+}
+</script>
diff --git a/src/views/data-report.vue b/src/views/data-report.vue
index c60864d..5fa9e27 100644
--- a/src/views/data-report.vue
+++ b/src/views/data-report.vue
@@ -135,21 +135,22 @@ function formatTime(time) {
           {{ formatTime(+scope.row.createdAt) }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="太阳能电压" min-width="94" prop="solarVoltage" />
-      <el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" />
+      <el-table-column align="center" label="太阳能电压(V)" min-width="120" prop="solarVoltage" />
+      <el-table-column align="center" label="蓄电池电压(V)" min-width="120" prop="batteryVoltage" />
       <el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />
       <el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" />
       <el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" />
-      <el-table-column align="center" label="机箱温度" min-width="80" prop="deviceTemperature" />
-      <el-table-column align="center" label="机箱湿度" min-width="80" prop="deviceHumidity" />
-      <el-table-column align="center" label="环境温度" min-width="80" prop="environmentTemperature" />
-      <el-table-column align="center" label="环境湿度" min-width="80" prop="environmentHumidity" />
-      <el-table-column align="center" label="SO2" min-width="50" prop="so2" />
-      <el-table-column align="center" label="盐分" min-width="50" prop="salt" />
-      <el-table-column align="center" label="腐流1" min-width="60" prop="corrosion1" />
-      <el-table-column align="center" label="腐流2" min-width="60" prop="corrosion2" />
-      <el-table-column align="center" label="腐流3" min-width="60" prop="corrosion3" />
-      <el-table-column align="center" label="腐流4" min-width="60" prop="corrosion4" />
+      <el-table-column align="center" label="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
+      <el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
+      <el-table-column align="center" label="环境温度(℃)" min-width="110" prop="environmentTemperature" />
+      <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
+      <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
+      <el-table-column align="center" label="盐温(℃)" min-width="80" prop="salt" />
+      <el-table-column align="center" label="盐阻(Ω)" min-width="80" prop="salt" />
+      <el-table-column align="center" label="锌(nA)" min-width="80" prop="corrosion1" />
+      <el-table-column align="center" label="铜(nA)" min-width="80" prop="corrosion2" />
+      <el-table-column align="center" label="铝(nA)" min-width="80" prop="corrosion3" />
+      <el-table-column align="center" label="钢(nA)" min-width="80" prop="corrosion4" />
     </el-table>
 
     <el-pagination
diff --git a/src/views/device-list.vue b/src/views/device-list.vue
index 12047dc..ffa374f 100644
--- a/src/views/device-list.vue
+++ b/src/views/device-list.vue
@@ -2,7 +2,10 @@
   <SearchBar @search="onSearch" />
 
   <div class="my-3">
-    <el-button type="primary" @click="openPage(null, 'device-create')">添加设备</el-button>
+    <el-button type="primary" @click="openPage(null, 'device-create')">
+      <i class="el-icon-plus mr-2"></i>
+      添加设备
+    </el-button>
   </div>
 
   <template v-if="devicesAll && devicesAll.data">
@@ -141,7 +144,11 @@ onMounted(() => {
  */
 function onSearch(page, size = 50) {
   const deviceId = currentDeviceId.value;
-  const params = { deviceId, page, size };
+  const params = {
+    deviceId,
+    page,
+    size,
+  };
   store.dispatch('device/getDevicesAll', params);
 }
 
diff --git a/src/views/statistical-realtime.vue b/src/views/statistical-realtime.vue
index 1b1a99d..4016358 100644
--- a/src/views/statistical-realtime.vue
+++ b/src/views/statistical-realtime.vue
@@ -1,5 +1,5 @@
 <template>
-  <SearchBar @search="getData" />
+  <SearchBar @search="getData" @refresh="onRefresh" :show-refresh="true" />
   <RealtimeData ref="childRef" class="mt-4" />
 </template>
 
@@ -59,4 +59,11 @@ onUnmounted(() => {
   apiTimer && clearInterval(apiTimer);
   apiTimer = null;
 });
+
+// 手动刷新 清除定时器 重新获取数据
+function onRefresh() {
+  apiTimer && clearInterval(apiTimer);
+  apiTimer = null;
+  getData();
+}
 </script>