refactor: 设备管理颜色调整;2.远动参数删除4个金属通道类型;定时数据排序,盐分名称修改;历史数据与统计导航顺序互换

src/apis/index.js

@@ -19,10 +19,10 @@ export const getDevicesCount = () => {
     setTimeout(() => {
       resolve({
         total: 100,
-        online: 10,
+        online: 90,
-        offline: 90,
+        offline: 10,
         fault: 10,
-        warning: 5,
+        warning: 15,
       });
     }, 100);
   });

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();

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="text-gray-500 text-4xl mt-1 mb-3">{{ count.offline }}</div>
-        <div class="line-wrap bg-purple-50">
+        <div class="line-wrap bg-gray-50">
-          <div class="line bg-purple-300" style="width: 80%"></div>
+          <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-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.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-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.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;

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: [''], // 设置时间点

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),
 });

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.online,
-          { value: count.fault, name: '故障' },
+            name: '在线',
-          { value: count.warning, 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' },
+          },
         ],
       },
     ],

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">

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

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';