From b7c1b02760e64e66e12302ab7a7d4b7f424e3180 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Mon, 15 Nov 2021 21:34:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=AE=BE=E5=A4=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A2=9C=E8=89=B2=E8=B0=83=E6=95=B4;2.=E8=BF=9C?=
 =?UTF-8?q?=E5=8A=A8=E5=8F=82=E6=95=B0=E5=88=A0=E9=99=A44=E4=B8=AA?=
 =?UTF-8?q?=E9=87=91=E5=B1=9E=E9=80=9A=E9=81=93=E7=B1=BB=E5=9E=8B;?=
 =?UTF-8?q?=E5=AE=9A=E6=97=B6=E6=95=B0=E6=8D=AE=E6=8E=92=E5=BA=8F,?=
 =?UTF-8?q?=E7=9B=90=E5=88=86=E5=90=8D=E7=A7=B0=E4=BF=AE=E6=94=B9;?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E6=95=B0=E6=8D=AE=E4=B8=8E=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E9=A1=BA=E5=BA=8F=E4=BA=92=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/index.js                             |  6 +--
 .../config/function-config-pending.vue        | 35 +------------
 .../overview/chart-device-detail.vue          | 50 ++++++++++++++-----
 ...data-report.vue => stastistical-chart.vue} |  0
 src/config/config.js                          |  4 --
 src/routers/index.js                          | 22 ++++----
 src/utils/overview.js                         | 24 +++++++--
 src/views/config.vue                          |  2 +-
 src/views/data-realtime.vue                   | 37 +++++++-------
 src/views/statistical-report.vue              |  4 +-
 10 files changed, 95 insertions(+), 89 deletions(-)
 rename src/components/statistical/{data-report.vue => stastistical-chart.vue} (100%)

diff --git a/src/apis/index.js b/src/apis/index.js
index 3f460aa..1b7f8f2 100644
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -19,10 +19,10 @@ export const getDevicesCount = () => {
     setTimeout(() => {
       resolve({
         total: 100,
-        online: 10,
-        offline: 90,
+        online: 90,
+        offline: 10,
         fault: 10,
-        warning: 5,
+        warning: 15,
       });
     }, 100);
   });
diff --git a/src/components/config/function-config-pending.vue b/src/components/config/function-config-pending.vue
index 1bf03d4..9937a26 100644
--- a/src/components/config/function-config-pending.vue
+++ b/src/components/config/function-config-pending.vue
@@ -69,37 +69,6 @@
       </el-col>
     </el-row>
 
-    <el-row :gutter="20">
-      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="选择金属通道1类型" prop="securityMode">
-          <el-select v-model="data.corrosiveType1" placeholder="选择金属腐蚀类型">
-            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="选择金属通道2类型" prop="corrosiveType">
-          <el-select v-model="data.corrosiveType2" placeholder="选择金属腐蚀类型">
-            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="选择金属通道3类型" prop="securityMode">
-          <el-select v-model="data.corrosiveType3" placeholder="选择金属腐蚀类型">
-            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="选择金属通道4类型" prop="corrosiveType">
-          <el-select v-model="data.corrosiveType4" placeholder="选择金属腐蚀类型">
-            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
-
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="安全模式" prop="securityMode">
@@ -163,11 +132,9 @@ import cloneDeep from 'lodash/cloneDeep';
 import isDate from 'lodash/isDate';
 import { createConfigFunction, getConfigAppliedFunction } from 'apis';
 import Refresh from 'components/config/refresh.vue';
-import { corrosiveTypes, functionConfig } from '@/config/config';
+import { functionConfig } from '@/config/config';
 
 const data = ref(functionConfig);
-// 金属腐蚀的类型
-const types = ref(corrosiveTypes);
 
 const functionForm = ref(null); // form
 const store = useStore();
diff --git a/src/components/overview/chart-device-detail.vue b/src/components/overview/chart-device-detail.vue
index 598ae7a..729621a 100644
--- a/src/components/overview/chart-device-detail.vue
+++ b/src/components/overview/chart-device-detail.vue
@@ -1,38 +1,64 @@
 <template>
-  <el-card shadow="hover" class="pb-4">
+  <el-card class="pb-4" shadow="hover">
     <el-row :gutter="20">
       <el-col :span="12">
         <div class="text-sm text-gray-400">在线数量</div>
-        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.online }}</div>
         <div class="line-wrap bg-green-50">
-          <div class="line bg-green-300" style="width: 80%"></div>
+          <div :style="{ width: `${countPercent.online}` }" class="line bg-green-300"></div>
         </div>
       </el-col>
       <el-col :span="12">
         <div class="text-sm text-gray-400">离线数量</div>
-        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
-        <div class="line-wrap bg-purple-50">
-          <div class="line bg-purple-300" style="width: 80%"></div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.offline }}</div>
+        <div class="line-wrap bg-gray-50">
+          <div :style="{ width: `${countPercent.offline}` }" class="line bg-gray-300"></div>
         </div>
       </el-col>
       <el-col :span="12" class="mt-10">
-        <div class="text-sm text-gray-400">故障数量</div>
-        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
+        <div class="text-sm text-gray-400">报警数量</div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.warning }}</div>
         <div class="line-wrap bg-yellow-50">
-          <div class="line bg-yellow-300" style="width: 80%"></div>
+          <div :style="{ width: `${countPercent.warning}` }" class="line bg-yellow-300"></div>
         </div>
       </el-col>
       <el-col :span="12" class="mt-10">
-        <div class="text-sm text-gray-400">报警数量</div>
-        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
+        <div class="text-sm text-gray-400">故障数量</div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.fault }}</div>
         <div class="line-wrap bg-red-50">
-          <div class="line bg-red-300" style="width: 80%"></div>
+          <div :style="{ width: `${countPercent.fault}` }" class="line bg-red-300"></div>
         </div>
       </el-col>
     </el-row>
   </el-card>
 </template>
 
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+const count = computed(() => store.state.device.count);
+const countPercent = computed(() => {
+  return {
+    online: computeWidth(count.value.online),
+    offline: computeWidth(count.value.offline),
+    warning: computeWidth(count.value.warning),
+    fault: computeWidth(count.value.fault),
+  };
+});
+
+/**
+ * 计算宽度百分比
+ * @param {number} itemCount
+ * @returns {string}
+ */
+function computeWidth(itemCount) {
+  const percent = (itemCount * 100) / count.value.total;
+  return `${percent}%`;
+}
+</script>
+
 <style scoped>
 .line-wrap {
   position: relative;
diff --git a/src/components/statistical/data-report.vue b/src/components/statistical/stastistical-chart.vue
similarity index 100%
rename from src/components/statistical/data-report.vue
rename to src/components/statistical/stastistical-chart.vue
diff --git a/src/config/config.js b/src/config/config.js
index 608f0a7..fc26c51 100644
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -31,10 +31,6 @@ export const functionConfig = {
   temperatureLow: 0, // 温度低阈值
   temperatureHigh: 0, // 温度高阈值
   securityMode: 'OPEN', // 安全模式 OPEN->不加密 ENCRYPTION->加密
-  corrosiveType1: '', // 金属腐蚀类型
-  corrosiveType2: '', // 金属腐蚀类型
-  corrosiveType3: '', // 金属腐蚀类型
-  corrosiveType4: '', // 金属腐蚀类型
   report: {
     type: 'CYCLE', // 上报周期类型 0->时间点  1->周期
     timePoints: [''], // 设置时间点
diff --git a/src/routers/index.js b/src/routers/index.js
index 2532019..f4a43e1 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -38,15 +38,6 @@ export const routes = [
     },
     component: () => import('@/views/data-realtime.vue'),
   },
-  {
-    path: '/corrosion/history',
-    name: 'history',
-    meta: {
-      title: '历史数据',
-      icon: 'el-icon-document',
-    },
-    component: () => import('@/views/history.vue'),
-  },
   {
     path: '/corrosion/statistical',
     name: 'statistical',
@@ -56,6 +47,15 @@ export const routes = [
     },
     component: () => import('@/views/statistical-report.vue'),
   },
+  {
+    path: '/corrosion/history',
+    name: 'history',
+    meta: {
+      title: '历史数据',
+      icon: 'el-icon-document',
+    },
+    component: () => import('@/views/history.vue'),
+  },
   {
     path: '/corrosion/commands',
     name: 'commands',
@@ -72,11 +72,11 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      redirect: '/corrosion/devices',
+      redirect: '/corrosion/overview',
     },
     {
       path: '/corrosion',
-      redirect: '/corrosion/devices',
+      redirect: '/corrosion/overview',
     },
   ].concat(routes),
 });
diff --git a/src/utils/overview.js b/src/utils/overview.js
index 44f6bf7..e3e340c 100644
--- a/src/utils/overview.js
+++ b/src/utils/overview.js
@@ -51,10 +51,26 @@ export function generateChartOption(count) {
         },
         labelLine: { show: false },
         data: [
-          { value: count.online, name: '在线' },
-          { value: count.offline, name: '离线' },
-          { value: count.fault, name: '故障' },
-          { value: count.warning, name: '报警' },
+          {
+            value: count.online,
+            name: '在线',
+            itemStyle: { color: '#10B981' },
+          },
+          {
+            value: count.offline,
+            name: '离线',
+            itemStyle: { color: '#6B7280' },
+          },
+          {
+            value: count.fault,
+            name: '故障',
+            itemStyle: { color: '#EF4444' },
+          },
+          {
+            value: count.warning,
+            name: '报警',
+            itemStyle: { color: '#F59E0B' },
+          },
         ],
       },
     ],
diff --git a/src/views/config.vue b/src/views/config.vue
index 562b9cc..fd677a9 100644
--- a/src/views/config.vue
+++ b/src/views/config.vue
@@ -3,7 +3,7 @@
   <DeviceSelectAndStatus :status="status" />
 
   <el-tabs v-model="activeName">
-    <el-tab-pane :lazy="true" label="运动参数" name="function">
+    <el-tab-pane :lazy="true" label="远动参数" name="function">
       <FunctionConfigPending v-if="activeName === 'function'" :active-name="activeName" />
     </el-tab-pane>
     <el-tab-pane :lazy="true" label="网络参数" name="network">
diff --git a/src/views/data-realtime.vue b/src/views/data-realtime.vue
index f44023d..3e00883 100644
--- a/src/views/data-realtime.vue
+++ b/src/views/data-realtime.vue
@@ -4,12 +4,6 @@
   <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) }}
@@ -20,22 +14,29 @@
           {{ 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="130" prop="corrosion1" />
       <el-table-column align="center" label="铜腐蚀电流(nA)" min-width="130" prop="corrosion2" />
       <el-table-column align="center" label="铝腐蚀电流(nA)" min-width="130" prop="corrosion3" />
       <el-table-column align="center" label="钢腐蚀电流(nA)" min-width="130" prop="corrosion4" />
+      <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" />
+      <!--      TODO:-->
+      <el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="salt" />
+      <el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="salt" />
+      <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="太阳能板电压(V)" min-width="140" 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="剩余电量(mAH)" min-width="140" prop="batteryVoltageRemain" />
+      <el-table-column align="center" label="消耗电量(mAH)" min-width="140" prop="batteryLoss" />
+      <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>
 
     <el-pagination
diff --git a/src/views/statistical-report.vue b/src/views/statistical-report.vue
index 3678e39..1333847 100644
--- a/src/views/statistical-report.vue
+++ b/src/views/statistical-report.vue
@@ -1,11 +1,11 @@
 <template>
   <SearchBar ref="searchBar" :loading-search="loadingSearch" @search="onSearch" />
-  <HistoryData ref="childRef" class="mt-4" :search-height="searchHeight" />
+  <HistoryData ref="childRef" :search-height="searchHeight" class="mt-4" />
 </template>
 
 <script setup>
 import SearchBar from 'components/statistical/search-bar.vue';
-import HistoryData from 'components/statistical/data-report.vue';
+import HistoryData from 'components/statistical/stastistical-chart.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';