From 46ceb9e9f182cfb7d42e781cdb6cbf7939c324b5 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Thu, 28 Oct 2021 16:40:50 +0800
Subject: [PATCH] feat: config api

---
 .eslintrc.js                  |  1 +
 package.json                  |  1 +
 src/App.vue                   |  2 +-
 src/apis/index.js             | 12 ++++++++++
 src/views/function-config.vue | 44 +++++++++++++++++++++++++++++++----
 src/views/network-config.vue  | 23 ++++++++++++++----
 6 files changed, 73 insertions(+), 10 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 34af86d..6449dea 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,6 +12,7 @@ module.exports = {
   rules: {
     'import/no-unresolved': 0,
     'import/extensions': 0,
+    'no-plusplus': 0,
     'vue/html-self-closing': 'off',
     'no-unused-expressions': 'off',
     'vue/no-mutating-props': 'off',
diff --git a/package.json b/package.json
index 3d78f36..0bdc377 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@vitejs/plugin-vue": "^1.9.3",
     "axios": "^0.23.0",
     "element-plus": "^1.1.0-beta.24",
+    "lodash": "^4.17.21",
     "vite": "^2.6.4",
     "vite-plugin-windicss": "^1.4.11",
     "vue": "^3.2.16",
diff --git a/src/App.vue b/src/App.vue
index 804d273..c0ea327 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,7 +53,7 @@ getDeviceData();
       <el-header style="padding: 0">
         <Navbar />
       </el-header>
-      <el-container>
+      <el-container class="overflow-hidden">
         <!-- <el-aside width="180px" v-if="menu.show"> -->
         <el-aside :width="!menu.collapse ? '180px' : '64px'" v-if="menu.show">
           <el-menu :default-active="0" class="el-menu-vertical-demo" :collapse="menu.collapse">
diff --git a/src/apis/index.js b/src/apis/index.js
index d688a58..98608ba 100644
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -21,3 +21,15 @@ export const getMonthsDate = params => http.get(`${corrosion}/statistics/months`
 
 // 获取实时数据统计
 export const getRealtimeData = params => http.get(`${corrosion}/statistics/realtime`, { params });
+
+// 获取网络配置参数
+export const getConfigNetwork = () => http.get(`${corrosion}/config/network`);
+
+// 获取功能配置参数
+export const getConfigFunction = () => http.get(`${corrosion}/config/function`);
+
+// 提交网络配置参数
+export const createConfigNetwork = data => http.post(`${corrosion}/config/network`, data);
+
+// 提交功能配置参数
+export const createConfigFunction = data => http.post(`${corrosion}/config/function`, data);
diff --git a/src/views/function-config.vue b/src/views/function-config.vue
index f6fb21e..4f8bf1f 100644
--- a/src/views/function-config.vue
+++ b/src/views/function-config.vue
@@ -30,7 +30,7 @@
       <el-col :span="12">
         <el-form-item label="设置时间" prop="time">
           <!-- <el-input v-model="data.time"></el-input> -->
-          <el-date-picker v-model="data.time" type="datetime" placeholder="设置时间"> </el-date-picker>
+          <el-date-picker v-model="data.time" type="datetime" placeholder="设置时间"></el-date-picker>
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -134,9 +134,12 @@
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { cloneDeep, isDate } from 'lodash';
+import { getConfigFunction, createConfigFunction } from 'apis/index';
 
-const data = reactive({
+const data = ref({
   frequency: {
     so2: 0, // SO2采样频率
     metal: 0, // 金属腐蚀采样频率
@@ -170,10 +173,36 @@ const types = ref([
 
 const functionForm = ref(null); // form
 
+/**
+ * 格式化时间
+ */
+const formatTime = date => {
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  return `${hour}:${minute}`;
+};
+
 // 提交表单
 const onSubmit = () => {
-  functionForm.value.validate(valid => {
-    console.log(valid, { ...data });
+  functionForm.value.validate(async () => {
+    try {
+      const param = cloneDeep({ ...data.value });
+      if (param.report.type === 0) {
+        // 按时间点上报 格式化时间格式
+        const points = [...param.report.timePoints];
+        for (let i = 0; i < points.length; i++) {
+          if (points[i] && isDate(points[i])) {
+            points[i] = formatTime(points[i]);
+          }
+        }
+        param.report.timePoints = points;
+      }
+      await createConfigFunction(param);
+      ElMessage.success('提交成功');
+    } catch (error) {
+      ElMessage.error('提交失败, 请稍后重试');
+      throw new Error(error);
+    }
   });
 };
 
@@ -181,4 +210,9 @@ const onSubmit = () => {
 const onReset = () => {
   functionForm.value.resetFields();
 };
+
+// 获取功能参数
+getConfigFunction().then(res => {
+  data.value = res;
+});
 </script>
diff --git a/src/views/network-config.vue b/src/views/network-config.vue
index 0835140..ac225a1 100644
--- a/src/views/network-config.vue
+++ b/src/views/network-config.vue
@@ -82,9 +82,11 @@
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getConfigNetwork, createConfigNetwork } from 'apis/index';
 
-const data = reactive({
+const data = ref({
   ip1: '',
   port1: '',
   ip2: '',
@@ -102,8 +104,16 @@ const networkForm = ref(null); // form
 
 // 提交表单
 const onSubmit = () => {
-  networkForm.value.validate(valid => {
-    console.log(valid, { ...data });
+  networkForm.value.validate(async valid => {
+    console.log(valid, { ...data.value });
+    const param = { ...data.value };
+    try {
+      await createConfigNetwork(param);
+      ElMessage.success('提交成功');
+    } catch (error) {
+      console.log('error: ', error);
+      ElMessage.error('提交失败, 请稍后重试');
+    }
   });
 };
 
@@ -111,4 +121,9 @@ const onSubmit = () => {
 const onReset = () => {
   networkForm.value.resetFields();
 };
+
+// 获取网络配置数据 填入表单中
+getConfigNetwork().then(res => {
+  data.value = res;
+});
 </script>