From 4751ebe631fa2d75da7d625f860427caf826da57 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Wed, 17 Nov 2021 22:45:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=201.=20=E5=8F=82=E6=95=B0=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=B7=BB=E5=8A=A0tab=E6=9C=AA=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=EF=BC=9B2.=E7=BB=9F=E8=AE=A1=E5=9B=BE=E8=A1=A8=E5=90=88?=
 =?UTF-8?q?=E5=B9=B6=E7=9B=B8=E5=90=8C=E5=8D=95=E4=BD=8D=E7=9A=84=E8=BD=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/config/config-log.vue          |  92 ++++++++++++
 .../config/function-config-pending.vue        |   3 +
 .../config/network-config-pending.vue         |   3 +
 .../config/status-and-last-time.vue           |  19 +++
 src/config/chart.js                           | 139 ++++++------------
 src/config/config.js                          |   4 +-
 src/utils/statistical.js                      |  55 +++++--
 src/views/config.vue                          |   6 +-
 8 files changed, 212 insertions(+), 109 deletions(-)
 create mode 100644 src/components/config/config-log.vue
 create mode 100644 src/components/config/status-and-last-time.vue

diff --git a/src/components/config/config-log.vue b/src/components/config/config-log.vue
new file mode 100644
index 0000000..acec61c
--- /dev/null
+++ b/src/components/config/config-log.vue
@@ -0,0 +1,92 @@
+<template>
+  <template v-if="devicesAll && devicesAll.data">
+    <el-table :data="devicesAll.data" :max-height="contentHeight" border stripe style="width: 100%">
+      <el-table-column type="expand">
+        <template #default="props">
+          <el-row :gutter="20" class="px-6 text-gray-400">
+            <el-col :span="9">链路地址：{{ props.row.linkAddress }}</el-col>
+            <el-col :span="9">探头编号：{{ props.row.probNo }}</el-col>
+            <el-col :span="9">设备朝向：{{ props.row.deviceDirection }}</el-col>
+            <el-col :span="9">试样：{{ props.row.simple }}</el-col>
+            <el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col>
+            <el-col :span="9">sim1：{{ props.row.sim1 }}</el-col>
+            <el-col :span="18">与主站后台联调情况：{{ props.row.joint }}</el-col>
+            <el-col :span="9">维修记录：{{ props.row.operationRecord }}</el-col>
+            <el-col :span="9">备注：{{ props.row.remark }}</el-col>
+          </el-row>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
+      <el-table-column align="center" label="设备完整ID" min-width="150" prop="deviceFullId" />
+      <el-table-column align="left" header-align="center" label="站点" min-width="150" prop="address" />
+      <el-table-column align="left" header-align="center" label="地区" min-width="120" prop="area" />
+      <el-table-column align="center" label="状态" min-width="70">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status" :color="STATUS_COLOR[scope.row.status].color">{{ STATUS_COLOR[scope.row.status].text }} </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="联系人" min-width="100" prop="contact" />
+      <el-table-column align="center" label="联系电话" min-width="150" prop="phone" />
+      <el-table-column align="center" label="安装时间" min-width="200" prop="installTime" />
+      <el-table-column align="center" label="时间" min-width="200" prop="runTime" />
+    </el-table>
+
+    <el-pagination
+      :current-page="devicesAll.page.page"
+      :default-page-size="50"
+      :page-count="devicesAll.page.count"
+      :page-size="devicesAll.page.size"
+      :page-sizes="[1, 10, 20, 50, 100]"
+      :total="devicesAll.page.total"
+      background
+      class="my-3 float-right"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="onSizeChange"
+      @current-change="onCurrentPageChange"
+    ></el-pagination>
+  </template>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useStore } from 'vuex';
+import { STATUS_COLOR } from '@/config/config';
+
+const store = useStore();
+const devicesAll = computed(() => {
+  return store.state.device.devicesAll;
+});
+const currentDeviceId = computed(() => store.state.device.currentDeviceId);
+const contentHeight = ref(600);
+
+// 设置表格高度
+onMounted(() => {
+  const winHeight = document.documentElement.clientHeight;
+  contentHeight.value = winHeight - 250;
+});
+
+/**
+ * 删除
+ * @param {number} page 页码
+ * @param {number} size 每页条数
+ */
+function onSearch(page, size = 50) {
+  const deviceId = currentDeviceId.value;
+  const params = {
+    deviceId,
+    page,
+    size,
+  };
+  store.dispatch('device/getDevicesAll', params);
+}
+
+// 当前页码变化
+const onCurrentPageChange = page => {
+  onSearch(page, devicesAll.value.page.size || 50);
+};
+
+// 每页条数变化
+const onSizeChange = size => {
+  onSearch(1, size);
+};
+</script>
diff --git a/src/components/config/function-config-pending.vue b/src/components/config/function-config-pending.vue
index 3ed1515..7f480f6 100644
--- a/src/components/config/function-config-pending.vue
+++ b/src/components/config/function-config-pending.vue
@@ -1,5 +1,7 @@
 <template>
   <el-form ref="functionForm" :model="data" label-position="top">
+    <StatusAndLastTime v-if="data.settingStatus" :setting-status="data.settingStatus" :setting-time="+data.settingTime" />
+
     <el-row :gutter="20">
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="金属腐蚀采样频率(分钟)" prop="frequency.metal">
@@ -124,6 +126,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import isDate from 'lodash/isDate';
 import { createConfigFunction, getConfigAppliedFunction } from 'apis';
 import Refresh from 'components/config/refresh.vue';
+import StatusAndLastTime from 'components/config/status-and-last-time.vue';
 import { functionConfig } from '@/config/config';
 
 const data = ref(functionConfig);
diff --git a/src/components/config/network-config-pending.vue b/src/components/config/network-config-pending.vue
index 3dba42c..8b920e9 100644
--- a/src/components/config/network-config-pending.vue
+++ b/src/components/config/network-config-pending.vue
@@ -1,5 +1,7 @@
 <template>
   <el-form ref="networkForm" :model="data" label-position="top">
+    <StatusAndLastTime v-if="data.settingStatus" :setting-status="data.settingStatus" :setting-time="+data.settingTime" />
+
     <el-row :gutter="20">
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="上报IP1地址" prop="ip1">
@@ -81,6 +83,7 @@ import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
 import { createConfigNetwork, getConfigAppliedNetwork } from 'apis';
 import Refresh from 'components/config/refresh.vue';
+import StatusAndLastTime from 'components/config/status-and-last-time.vue';
 import { networkConfig } from '@/config/config';
 
 const data = ref(networkConfig);
diff --git a/src/components/config/status-and-last-time.vue b/src/components/config/status-and-last-time.vue
new file mode 100644
index 0000000..9136cff
--- /dev/null
+++ b/src/components/config/status-and-last-time.vue
@@ -0,0 +1,19 @@
+<template>
+  <el-row class="text-gray-500 text-sm my-2 flex items-center">
+    <span class="mr-10">
+      配置状态：<el-tag :type="PEND_TYPE[settingStatus].type">{{ PEND_TYPE[settingStatus].text }}</el-tag>
+    </span>
+    <span>最后配置时间：{{ dayjs(data.settingTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+  </el-row>
+</template>
+
+<script setup>
+import dayjs from 'dayjs';
+import { defineProps } from 'vue';
+import { PEND_TYPE } from '@/config/config';
+
+defineProps({
+  settingStatus: String,
+  settingTime: Number,
+});
+</script>
diff --git a/src/config/chart.js b/src/config/chart.js
index 299b7c7..090a718 100644
--- a/src/config/chart.js
+++ b/src/config/chart.js
@@ -30,62 +30,59 @@ export const defaultSelectedLegend = {
 export const yAxisData = [
   {
     type: 'value',
-    name: 'SO2(ppb)',
+    name: '腐蚀电流(nA)',
+    offset: 0,
     position: 'left',
-    show: false,
     axisLine: {
       show: true,
       lineStyle: { color: colors[0] },
     },
-    axisLabel: { formatter: '{value}ppb' },
+    axisLabel: { formatter: '{value}' },
     axisPointer: { show: false },
   },
   {
     type: 'value',
-    name: '盐分阻抗(Ω)',
-    show: false,
-    position: 'left',
-    offset: 70,
+    name: '温度(℃)',
+    offset: 0,
+    position: 'right',
     axisLine: {
       show: true,
       lineStyle: { color: colors[1] },
     },
-    axisLabel: { formatter: '{value}Ω' },
+    axisLabel: { formatter: '{value}' },
     axisPointer: { show: false },
   },
-
   {
     type: 'value',
-    name: '环境温度(℃)',
-    show: false,
-    position: 'left',
-    offset: 135,
+    name: '湿度(RH%)',
+    offset: 70,
+    position: 'right',
     axisLine: {
       show: true,
       lineStyle: { color: colors[2] },
     },
-    axisLabel: { formatter: '{value}°C' },
+    axisLabel: { formatter: '{value}' },
     axisPointer: { show: false },
   },
   {
     type: 'value',
-    name: '环境湿度(RH%)',
+    name: 'SO2(ppb)',
+    position: 'right',
     show: false,
-    position: 'left',
-    offset: 200,
+    offset: 150,
     axisLine: {
       show: true,
       lineStyle: { color: colors[3] },
     },
-    axisLabel: { formatter: '{value}RH%' },
+    axisLabel: { formatter: '{value}ppb' },
     axisPointer: { show: false },
   },
   {
     type: 'value',
-    name: '盐分温度(℃)',
+    name: '盐分阻抗(Ω)',
     show: false,
-    position: 'left',
-    offset: 270,
+    position: 'right',
+    offset: 220,
     axisLine: {
       show: true,
       lineStyle: { color: colors[4] },
@@ -93,53 +90,6 @@ export const yAxisData = [
     axisLabel: { formatter: '{value}Ω' },
     axisPointer: { show: false },
   },
-  {
-    type: 'value',
-    name: '锌腐蚀电流(nA)',
-    position: 'right',
-    axisLine: {
-      show: true,
-      lineStyle: { color: colors[5] },
-    },
-    axisLabel: { formatter: '{value}' },
-    axisPointer: { show: false },
-  },
-  {
-    type: 'value',
-    name: '铜腐蚀电流(nA)',
-    offset: 100,
-    position: 'right',
-    axisLine: {
-      show: true,
-      lineStyle: { color: colors[6] },
-    },
-    axisLabel: { formatter: '{value}' },
-    axisPointer: { show: false },
-  },
-  {
-    type: 'value',
-    name: '铝腐蚀电流(nA)',
-    offset: 200,
-    position: 'right',
-    axisLine: {
-      show: true,
-      lineStyle: { color: colors[7] },
-    },
-    axisLabel: { formatter: '{value}' },
-    axisPointer: { show: false },
-  },
-  {
-    type: 'value',
-    name: '钢腐蚀电流(nA)',
-    offset: 300,
-    position: 'right',
-    axisLine: {
-      show: true,
-      lineStyle: { color: colors[8] },
-    },
-    axisLabel: { formatter: '{value}' },
-    axisPointer: { show: false },
-  },
 ];
 
 /**
@@ -150,57 +100,58 @@ export const yAxisData = [
 export function generateDefaultSeries(data) {
   return [
     {
-      name: 'SO2(ppb)',
+      name: '锌腐蚀电流(nA)',
       type: 'line',
-      data: data.so2,
+      yAxisIndex: 0,
+      data: data.corrosionXIN,
     },
     {
-      name: '盐分阻抗(Ω)',
+      name: '铜腐蚀电流(nA)',
       type: 'line',
-      yAxisIndex: 1,
-      data: data.saltR,
+      yAxisIndex: 0,
+      data: data.corrosionTONG,
     },
     {
-      name: '环境温度(℃)',
+      name: '铝腐蚀电流(nA)',
       type: 'line',
-      yAxisIndex: 2,
-      data: data.environmentTemperature,
+      yAxisIndex: 0,
+      data: data.corrosionLV,
     },
     {
-      name: '环境湿度(RH%)',
+      name: '钢腐蚀电流(nA)',
       type: 'line',
-      yAxisIndex: 3,
-      data: data.environmentHumidity,
+      yAxisIndex: 0,
+      data: data.corrosionGANG,
     },
     {
-      name: '盐分温度(℃)',
+      name: '环境温度(℃)',
       type: 'line',
-      yAxisIndex: 4,
-      data: data.saltT,
+      yAxisIndex: 1,
+      data: data.environmentTemperature,
     },
     {
-      name: '锌腐蚀电流(nA)',
+      name: '盐分温度(℃)',
       type: 'line',
-      yAxisIndex: 5,
-      data: data.corrosionXIN,
+      yAxisIndex: 1,
+      data: data.saltT,
     },
     {
-      name: '铜腐蚀电流(nA)',
+      name: '环境湿度(RH%)',
       type: 'line',
-      yAxisIndex: 6,
-      data: data.corrosionTONG,
+      yAxisIndex: 2,
+      data: data.environmentHumidity,
     },
     {
-      name: '铝腐蚀电流(nA)',
+      name: 'SO2(ppb)',
       type: 'line',
-      yAxisIndex: 7,
-      data: data.corrosionLV,
+      yAxisIndex: 3,
+      data: data.so2,
     },
     {
-      name: '钢腐蚀电流(nA)',
+      name: '盐分阻抗(Ω)',
       type: 'line',
-      yAxisIndex: 8,
-      data: data.corrosionGANG,
+      yAxisIndex: 4,
+      data: data.saltR,
     },
   ];
 }
diff --git a/src/config/config.js b/src/config/config.js
index 022b706..844d65b 100644
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -115,11 +115,11 @@ export const PEND_TYPE = {
   },
   FAIL: {
     type: 'danger',
-    text: '下发失败',
+    text: '配置失败',
   },
   SUCCESS: {
     type: 'success',
-    text: '下发成功',
+    text: '配置成功',
   },
 };
 
diff --git a/src/utils/statistical.js b/src/utils/statistical.js
index 65d9eda..d2e9496 100644
--- a/src/utils/statistical.js
+++ b/src/utils/statistical.js
@@ -8,20 +8,22 @@ import { colors, defaultSelectedLegend, generateDefaultSeries, legendData, yAxis
  * @param {Object[]} data 服务端返回数据
  * @param {string} data[].time 时间 ms
  * @param {string} data[].so2 SO2
- * @param {string} data[].salt 盐阻
+ * @param {string} data[].saltR 盐阻
+ * @param {string} data[].saltT 盐温
  * @param {string} data[].environmentTemperature 环温
  * @param {string} data[].environmentHumidity 环湿
  * @param {string} data[].corrosion1 锌
  * @param {string} data[].corrosion2 铜
  * @param {string} data[].corrosion3 铝
  * @param {string} data[].corrosion4 钢
- * @returns {{environmentTemperature: *[], corrosionXIN: *[], corrosionGANG: *[], salt: *[], corrosionTONG: *[], so2: *[], corrosionLV: *[], time: *[], environmentHumidity: *[]}}
+ * @returns {{environmentTemperature: *[], corrosionXIN: *[], corrosionGANG: *[], corrosionTONG: *[], so2: *[], corrosionLV: *[], time: *[], saltT: *[], saltR: *[], environmentHumidity: *[]}}
  */
 function generateParams(data) {
   const result = {
     time: [],
     so2: [],
-    salt: [],
+    saltR: [],
+    saltT: [],
     environmentTemperature: [],
     environmentHumidity: [],
     corrosionXIN: [],
@@ -32,7 +34,8 @@ function generateParams(data) {
   data.forEach(item => {
     result.time.push(dayjs(+item.time).format('YY/MM/MM HH:mm'));
     result.so2.push(+item.so2);
-    result.salt.push(+item.salt);
+    result.saltR.push(+item.saltR);
+    result.saltT.push(+item.saltT);
     result.environmentTemperature.push(+item.environmentTemperature);
     result.environmentHumidity.push(+item.environmentHumidity);
     result.corrosionXIN.push(+item.corrosion1);
@@ -43,6 +46,23 @@ function generateParams(data) {
   return result;
 }
 
+/**
+ * 计算Y轴的显示
+ * @param {string} yName Y轴的name
+ * @param {Object} selectedLegend legends
+ * @returns {boolean}
+ */
+export function computeYAxisShow(yName, selectedLegend) {
+  // eslint-disable-next-line guard-for-in,no-restricted-syntax
+  for (const key in selectedLegend) {
+    console.log('key:', key, yName);
+    if (key.includes(yName) && selectedLegend[key]) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * 生产y轴内容
  * @param {Object} selectedLegend
@@ -52,13 +72,13 @@ export function generateYAxis(selectedLegend) {
   let leftIndex = 0;
   let rightIndex = 0;
   yAxisData.forEach(item => {
-    item.show = selectedLegend[item.name];
+    item.show = computeYAxisShow(item.name, selectedLegend);
     if (item.show) {
       if (item.position === 'left') {
-        item.offset = 70 * leftIndex;
+        item.offset = 100 * leftIndex;
         leftIndex += 1;
       } else {
-        item.offset = 85 * rightIndex;
+        item.offset = 80 * rightIndex;
         rightIndex += 1;
       }
     }
@@ -77,8 +97,18 @@ function generateSeries(data, yAxis) {
   const showArr = seriesArr.filter(item => yAxis.find(y => y.name === item.name));
   const hideArr = seriesArr.filter(item => !yAxis.find(y => y.name === item.name));
   const result = [...showArr, ...hideArr];
-  result.forEach((item, index) => {
-    item.yAxisIndex = index;
+  result.forEach(item => {
+    if (item.name.includes('电流')) {
+      item.yAxisIndex = 0;
+    } else if (item.name.includes('温度')) {
+      item.yAxisIndex = 1;
+    } else if (item.name.includes('湿度')) {
+      item.yAxisIndex = 2;
+    } else if (item.name.includes('SO2')) {
+      item.yAxisIndex = 3;
+    } else if (item.name.includes('阻抗')) {
+      item.yAxisIndex = 4;
+    }
   });
   return result || [];
 }
@@ -88,7 +118,7 @@ function generateSeries(data, yAxis) {
  * @param {Object[]} yAxis
  * @returns {{left: number, right: number}}
  */
-function genereteGrid(yAxis) {
+function generateGrid(yAxis) {
   const left = [];
   const right = [];
   yAxis.forEach(item => {
@@ -101,7 +131,7 @@ function genereteGrid(yAxis) {
     }
   });
   return {
-    left: max(left) + 45,
+    left: max(left) + 100,
     right: max(right) + 45,
   };
 }
@@ -117,7 +147,7 @@ export function generateChartOption(rawData, selected = defaultSelectedLegend) {
   const data = generateParams(rawData);
   const yAxis = generateYAxis(selected);
   const series = generateSeries(data, yAxis);
-  const grid = genereteGrid(yAxis);
+  const grid = generateGrid(yAxis);
   const option = {
     color: colors,
     tooltip: {
@@ -143,5 +173,6 @@ export function generateChartOption(rawData, selected = defaultSelectedLegend) {
     yAxis,
     series,
   };
+  console.log(option);
   return option;
 }
diff --git a/src/views/config.vue b/src/views/config.vue
index fd677a9..a415904 100644
--- a/src/views/config.vue
+++ b/src/views/config.vue
@@ -9,14 +9,18 @@
     <el-tab-pane :lazy="true" label="网络参数" name="network">
       <NetworkConfigPending v-if="activeName === 'network'" :active-name="activeName" />
     </el-tab-pane>
+    <el-tab-pane :lazy="true" label="配置记录" name="log">
+      <ConfigLog v-if="activeName === 'log'" :active-name="activeName" />
+    </el-tab-pane>
   </el-tabs>
 </template>
 
 <script setup>
 import { ref } from 'vue';
+import DeviceSelectAndStatus from 'components/config/device-select-and-status.vue';
 import FunctionConfigPending from 'components/config/function-config-pending.vue';
 import NetworkConfigPending from 'components/config/network-config-pending.vue';
-import DeviceSelectAndStatus from 'components/config/device-select-and-status.vue';
+import ConfigLog from 'components/config/config-log.vue';
 
 const status = ref('');