From 03fedb6bd519c3badb0af92fb85d5f6f34bc0f60 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Tue, 26 Oct 2021 16:55:10 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E7=BC=96=E8=BE=91=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                   |   2 +-
 src/components/device-edit.vue |  12 +--
 src/store/device.js            |  27 ++++-
 src/views/device-edit.vue      | 179 +++++++++++++++++++++++++++++++++
 src/views/device-list.vue      |  10 +-
 5 files changed, 214 insertions(+), 16 deletions(-)
 create mode 100644 src/views/device-edit.vue

diff --git a/package.json b/package.json
index 321193c..56ad52e 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "cz": "git add . && git cz",
     "format": "prettier --write ./src",
     "lint": "eslint ./src --ext .vue,.js,.ts",
-    "lint-fix": "eslint --fix ./src --ext .vue,.js,.ts",
+    "fix": "eslint --fix ./src --ext .vue,.js,.ts",
     "prepare": "husky install"
   },
   "dependencies": {
diff --git a/src/components/device-edit.vue b/src/components/device-edit.vue
index e469345..cf2ad62 100644
--- a/src/components/device-edit.vue
+++ b/src/components/device-edit.vue
@@ -1,19 +1,13 @@
 <template>
-  <el-dialog v-model="show" title="编辑设备信息" width="80%" :before-close="handleClose">
-    <span>This is a message</span>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="$emit('toggle-mdoal')">Cancel</el-button>
-        <el-button type="primary" @click="$emit('toggle-mdoal')">Confirm</el-button>
-      </span>
-    </template>
+  <el-dialog v-model="show" title="编辑设备信息" fullscreen="true" @close="$emit('toggle-mdoal')">
+    <DeviceEdit :edit="true" />
   </el-dialog>
 </template>
 
 <script setup>
 import { defineProps, defineEmits } from 'vue';
+import DeviceEdit from 'views/device-edit.vue';
 
 defineProps({ show: Boolean });
-
 defineEmits(['toggle-mdoal']);
 </script>
diff --git a/src/store/device.js b/src/store/device.js
index bdd5466..1966708 100644
--- a/src/store/device.js
+++ b/src/store/device.js
@@ -4,11 +4,21 @@ const user = {
   namespaced: true,
 
   state: {
-    devices: [],
-    devicesAll: null,
+    devices: [], // 站点列表 设备列表简版
+    devicesAll: null, // 设备列表完整版
+    currentDeviceId: '', // 当前正在编辑的设备deviceId
   },
 
-  getters: {},
+  getters: {
+    // 当前正在编辑的设备的完整信息
+    current({ devicesAll, currentDeviceId }) {
+      try {
+        return devicesAll.data.find(device => device.deviceId === currentDeviceId);
+      } catch (error) {
+        return null;
+      }
+    },
+  },
 
   mutations: {
     /**
@@ -23,11 +33,20 @@ const user = {
     /**
      * 设置devicesAll的数据
      * @param {*} state
-     * @param {*} devices
+     * @param {array} devices
      */
     setDevicesAll(state, devices) {
       state.devicesAll = devices;
     },
+
+    /**
+     * 设置正则编辑的设备deviceId
+     * @param {*} state
+     * @param {string} deviceId
+     */
+    setCurrentDeviceId(state, deviceId) {
+      state.currentDeviceId = deviceId;
+    },
   },
 
   actions: {
diff --git a/src/views/device-edit.vue b/src/views/device-edit.vue
new file mode 100644
index 0000000..0ae2293
--- /dev/null
+++ b/src/views/device-edit.vue
@@ -0,0 +1,179 @@
+<template>
+  <el-form label-position="top" :model="data" ref="deviceCreate">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="设备ID号" prop="deviceId">
+          <el-input v-model="data.deviceId"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设备完整ID" prop="deviceFullId">
+          <el-input v-model="data.deviceFullId"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="地区" prop="area">
+          <el-input v-model="data.area"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="安装地点名称" prop="address">
+          <el-input v-model="data.address"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="联系人" prop="contact">
+          <el-input v-model="data.contact"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="电话" prop="phone">
+          <el-input v-model="data.phone"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="经度" prop="lon">
+          <el-input v-model="data.lon"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="纬度" prop="lat">
+          <el-input v-model="data.lat"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="负责人" prop="head">
+          <el-input v-model="data.head"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="安装位置" prop="installLocation">
+          <el-input v-model="data.installLocation"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="安装时间" prop="installTime">
+          <el-input v-model="data.installTime"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="正式运行时间" prop="runTime">
+          <el-input v-model="data.runTime"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="链路地址" prop="linkAddress">
+          <el-input v-model="data.linkAddress"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="探头编号" prop="probNo">
+          <el-input v-model="data.probNo"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="试样" prop="simple">
+          <el-input v-model="data.simple"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="sim卡1" prop="sim1">
+          <el-input v-model="data.sim1"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="设备朝向" prop="deviceDirection">
+          <el-input v-model="data.deviceDirection"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="与主站后台联调情况" prop="joint">
+          <el-input v-model="data.joint"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="data.remark" type="textarea"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" class="mt-5 pl-2">
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">提交</el-button>
+        <el-button @click="onReset">重置</el-button>
+      </el-form-item>
+    </el-row>
+  </el-form>
+  {{ device }}
+</template>
+
+<script setup>
+import { reactive, ref, computed } from 'vue';
+import { useStore } from 'vuex';
+
+const data = reactive({
+  deviceId: '', // 设备id
+  deviceFullId: '', // 设备完整id
+  deviceDirection: '', // 设备朝向
+  area: '', // 地区
+  address: '', // 安装地点名称
+  contact: '', // 联系人
+  phone: '', // 联系人电话
+  lon: '', // 经度
+  lat: '', // 纬度
+  head: '', // 负责人
+  installLocation: '', // 安装位置
+  installTime: '', // 安装时间
+  runTime: '', // 正式运行时间
+  linkAddress: '', // 链路地址
+  probNo: '', // 探头编号
+  simple: '', // 试样
+  sim1: '', // sim卡1
+  joint: '', // 主站后台联调情况
+  remark: '', // 备注
+});
+
+const deviceCreate = ref(null); // form
+const store = useStore();
+const device = computed(() => store.getters['device/current']);
+
+// 提交表单
+const onSubmit = () => {
+  deviceCreate.value.validate(valid => {
+    console.log(valid, { ...data });
+  });
+};
+
+// 重置表单
+const onReset = () => {
+  deviceCreate.value.resetFields();
+};
+</script>
diff --git a/src/views/device-list.vue b/src/views/device-list.vue
index 97bef5d..e5d6d51 100644
--- a/src/views/device-list.vue
+++ b/src/views/device-list.vue
@@ -26,14 +26,14 @@
       <el-table-column label="安装时间" prop="installTime" width="200" />
       <el-table-column label="正式运行时间" prop="runTime" width="200" />
       <el-table-column fixed="right" label="操作" width="148">
-        <template #default>
+        <template #default="props">
           <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete">
             <template #reference>
               <el-button type="danger" plain size="mini">删除</el-button>
             </template>
           </el-popconfirm>
 
-          <el-button type="primary" plain size="mini" @click="editting = true">编辑</el-button>
+          <el-button type="primary" plain size="mini" @click="handleEdit(props.row)">编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -114,4 +114,10 @@ const onPrev = e => {
 const handleDelete = () => {
   console.log('delete');
 };
+
+// 编辑设备信息
+const handleEdit = item => {
+  store.commit('device/setCurrentDeviceId', item.deviceId);
+  editting.value = true;
+};
 </script>

From 3f0b0587c32b3d1c7a17dcbde6568723ec930fe4 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Wed, 27 Oct 2021 08:51:10 +0800
Subject: [PATCH 2/5] build: setting

---
 .vscode/settings.json |   9 +--
 package-lock.json     | 161 +++++++++++++++++++++++-------------------
 package.json          |   1 +
 3 files changed, 90 insertions(+), 81 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f37bf03..4f31ac9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,9 +1,4 @@
 {
-  "cSpell.words": [
-    "browserslist",
-    "commitlint",
-    "unplugin",
-    "windi",
-    "windicss"
-  ]
+  "cSpell.words": ["browserslist", "commitlint", "unplugin", "windi", "windicss"],
+  "vue3snippets.enable-compile-vue-file-on-did-save-code": true
 }
diff --git a/package-lock.json b/package-lock.json
index 2414c72..c563721 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
       "version": "0.3.0",
       "resolved": "https://registry.nlark.com/@antfu/utils/download/@antfu/utils-0.3.0.tgz",
       "integrity": "sha1-YwbEO1Kog72Olz4+2N1kJIQYvMQ=",
-      "dev": true,
       "requires": {
         "@types/throttle-debounce": "^2.1.0"
       }
@@ -409,7 +408,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.nlark.com/@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.5.tgz",
       "integrity": "sha1-dhnC6yGyVIP20WdUi0z9WnSIw9U=",
-      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -418,14 +416,12 @@
     "@nodelib/fs.stat": {
       "version": "2.0.5",
       "resolved": "https://registry.nlark.com/@nodelib/fs.stat/download/@nodelib/fs.stat-2.0.5.tgz",
-      "integrity": "sha1-W9Jir5Tp0lvR5xsF3u1Eh2oiLos=",
-      "dev": true
+      "integrity": "sha1-W9Jir5Tp0lvR5xsF3u1Eh2oiLos="
     },
     "@nodelib/fs.walk": {
       "version": "1.2.8",
       "resolved": "https://registry.nlark.com/@nodelib/fs.walk/download/@nodelib/fs.walk-1.2.8.tgz",
       "integrity": "sha1-6Vc36LtnRt3t9pxVaVNJTxlv5po=",
-      "dev": true,
       "requires": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -495,14 +491,12 @@
     "@types/throttle-debounce": {
       "version": "2.1.0",
       "resolved": "https://registry.nlark.com/@types/throttle-debounce/download/@types/throttle-debounce-2.1.0.tgz",
-      "integrity": "sha1-HD32JL/Eti+ZLTASuExW1B6rN3Y=",
-      "dev": true
+      "integrity": "sha1-HD32JL/Eti+ZLTASuExW1B6rN3Y="
     },
     "@vitejs/plugin-vue": {
       "version": "1.9.3",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/download/@vitejs/plugin-vue-1.9.3.tgz",
-      "integrity": "sha1-k9YYk85scj0CCa8Eg+yLkaLNgR8=",
-      "dev": true
+      "integrity": "sha1-k9YYk85scj0CCa8Eg+yLkaLNgR8="
     },
     "@vue/compiler-core": {
       "version": "3.2.20",
@@ -636,7 +630,6 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmmirror.com/@windicss/config/download/@windicss/config-1.4.11.tgz",
       "integrity": "sha1-MAH9dDBzKdgLr1CO3G9rrKYYq5Y=",
-      "dev": true,
       "requires": {
         "debug": "^4.3.2",
         "jiti": "^1.12.7",
@@ -647,7 +640,6 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmmirror.com/@windicss/plugin-utils/download/@windicss/plugin-utils-1.4.11.tgz",
       "integrity": "sha1-hxn0zAvnTVOkPwi0puDTl3yLa9Q=",
-      "dev": true,
       "requires": {
         "@antfu/utils": "^0.3.0",
         "@windicss/config": "1.4.11",
@@ -735,7 +727,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
       "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-      "dev": true,
       "requires": {
         "color-convert": "^2.0.1"
       }
@@ -846,7 +837,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.nlark.com/braces/download/braces-3.0.2.tgz",
       "integrity": "sha1-NFThpGLujVmeI23zNs2epPiv4Qc=",
-      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -909,7 +899,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646655305&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
       "integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
-      "dev": true,
       "requires": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -996,7 +985,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.nlark.com/color-convert/download/color-convert-2.0.1.tgz",
       "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-      "dev": true,
       "requires": {
         "color-name": "~1.1.4"
       }
@@ -1004,8 +992,7 @@
     "color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.nlark.com/color-name/download/color-name-1.1.4.tgz",
-      "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-      "dev": true
+      "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI="
     },
     "colorette": {
       "version": "1.4.0",
@@ -1341,7 +1328,6 @@
       "version": "4.3.2",
       "resolved": "https://registry.nlark.com/debug/download/debug-4.3.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdebug%2Fdownload%2Fdebug-4.3.2.tgz",
       "integrity": "sha1-8KScGKyHeeMdSgxgKd+3aHPHQos=",
-      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -1418,6 +1404,51 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.nlark.com/dom-serializer/download/dom-serializer-1.3.2.tgz?cache=0&sync_timestamp=1621256858583&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdom-serializer%2Fdownload%2Fdom-serializer-1.3.2.tgz",
+      "integrity": "sha1-YgZDfTLO767HFhgDIwx6ILwbTZE=",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "2.2.0",
+          "resolved": "https://registry.nlark.com/entities/download/entities-2.2.0.tgz?cache=0&sync_timestamp=1628508126700&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fentities%2Fdownload%2Fentities-2.2.0.tgz",
+          "integrity": "sha1-CY3JDruD2N/6CJ1VJWs1HTTE2lU=",
+          "dev": true
+        }
+      }
+    },
+    "domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npm.taobao.org/domelementtype/download/domelementtype-2.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomelementtype%2Fdownload%2Fdomelementtype-2.2.0.tgz",
+      "integrity": "sha1-mgtsJ4LtahxzI9QiZxg9+b2LHVc=",
+      "dev": true
+    },
+    "domhandler": {
+      "version": "4.2.2",
+      "resolved": "https://registry.nlark.com/domhandler/download/domhandler-4.2.2.tgz?cache=0&sync_timestamp=1630246778110&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdomhandler%2Fdownload%2Fdomhandler-4.2.2.tgz",
+      "integrity": "sha1-6CXXIdGahrjCAaNSZOImxnjudV8=",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.2.0"
+      }
+    },
+    "domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.nlark.com/domutils/download/domutils-2.8.0.tgz?cache=0&sync_timestamp=1630106535879&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdomutils%2Fdownload%2Fdomutils-2.8.0.tgz",
+      "integrity": "sha1-RDfe9dtuLR9dbuhZvZXKfQIEgTU=",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
+    },
     "dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npm.taobao.org/dot-prop/download/dot-prop-5.3.0.tgz?cache=0&sync_timestamp=1605778235569&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdot-prop%2Fdownload%2Fdot-prop-5.3.0.tgz",
@@ -1466,6 +1497,12 @@
         "ansi-colors": "^4.1.1"
       }
     },
+    "entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.nlark.com/entities/download/entities-3.0.1.tgz?cache=0&sync_timestamp=1628508126700&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fentities%2Fdownload%2Fentities-3.0.1.tgz",
+      "integrity": "sha1-K4h8piWF6W2zkDSC0zbBAGwwAdQ=",
+      "dev": true
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npm.taobao.org/error-ex/download/error-ex-1.3.2.tgz",
@@ -1518,7 +1555,6 @@
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild/download/esbuild-0.13.8.tgz?cache=0&sync_timestamp=1634439403556&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild%2Fdownload%2Fesbuild-0.13.8.tgz",
       "integrity": "sha1-vXzFG4gasGd4n4jhe6ynRyTB7E8=",
-      "dev": true,
       "requires": {
         "esbuild-android-arm64": "0.13.8",
         "esbuild-darwin-64": "0.13.8",
@@ -1543,119 +1579,102 @@
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-android-arm64/download/esbuild-android-arm64-0.13.8.tgz?cache=0&sync_timestamp=1634439415306&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-android-arm64%2Fdownload%2Fesbuild-android-arm64-0.13.8.tgz",
       "integrity": "sha1-wg6HXDyYFksf+6myhje9+W9ennw=",
-      "dev": true,
       "optional": true
     },
     "esbuild-darwin-64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-darwin-64/download/esbuild-darwin-64-0.13.8.tgz?cache=0&sync_timestamp=1634439397884&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-darwin-64%2Fdownload%2Fesbuild-darwin-64-0.13.8.tgz",
       "integrity": "sha1-9G5rRx3b9iJlI0gIpqGqkd8YpBc=",
-      "dev": true,
       "optional": true
     },
     "esbuild-darwin-arm64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-darwin-arm64/download/esbuild-darwin-arm64-0.13.8.tgz?cache=0&sync_timestamp=1634439409770&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-darwin-arm64%2Fdownload%2Fesbuild-darwin-arm64-0.13.8.tgz",
       "integrity": "sha1-qZEVemAT+s1PLhQVm32lJibJAVQ=",
-      "dev": true,
       "optional": true
     },
     "esbuild-freebsd-64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-freebsd-64/download/esbuild-freebsd-64-0.13.8.tgz",
       "integrity": "sha1-MBYB0uRDrUWJYONZtAKhfZUAvp0=",
-      "dev": true,
       "optional": true
     },
     "esbuild-freebsd-arm64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-freebsd-arm64/download/esbuild-freebsd-arm64-0.13.8.tgz",
       "integrity": "sha1-A5pjrMEuwIkgBsFH6iIeVfkSWp8=",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-32": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-linux-32/download/esbuild-linux-32-0.13.8.tgz?cache=0&sync_timestamp=1634439427536&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-linux-32%2Fdownload%2Fesbuild-linux-32-0.13.8.tgz",
       "integrity": "sha1-xTe2fX5pS2C/onhlgUEoOMa6AoQ=",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-linux-64/download/esbuild-linux-64-0.13.8.tgz?cache=0&sync_timestamp=1634439421101&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-linux-64%2Fdownload%2Fesbuild-linux-64-0.13.8.tgz",
       "integrity": "sha1-AJL8igZAAad3v6DjtCW7i+j5bmo=",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-arm": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-linux-arm/download/esbuild-linux-arm-0.13.8.tgz",
       "integrity": "sha1-rWNPlr8pdVNpB665/bdaMZT03c4=",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-arm64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-linux-arm64/download/esbuild-linux-arm64-0.13.8.tgz?cache=0&sync_timestamp=1634439402514&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-linux-arm64%2Fdownload%2Fesbuild-linux-arm64-0.13.8.tgz",
       "integrity": "sha1-XNPyu5JCEpcUgujbwlxK/QmygRA=",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-mips64le": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-linux-mips64le/download/esbuild-linux-mips64le-0.13.8.tgz?cache=0&sync_timestamp=1634439403033&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-linux-mips64le%2Fdownload%2Fesbuild-linux-mips64le-0.13.8.tgz",
       "integrity": "sha1-V4V+3+v5v2V2bci+FjfyF5yZBXI=",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-ppc64le": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-linux-ppc64le/download/esbuild-linux-ppc64le-0.13.8.tgz?cache=0&sync_timestamp=1634439402029&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-linux-ppc64le%2Fdownload%2Fesbuild-linux-ppc64le-0.13.8.tgz",
       "integrity": "sha1-/bgqBZpbhrsQ+0IJG0689Ii5zUY=",
-      "dev": true,
       "optional": true
     },
     "esbuild-netbsd-64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-netbsd-64/download/esbuild-netbsd-64-0.13.8.tgz",
       "integrity": "sha1-14eecSPTssBHVOzovQYapoZt7v8=",
-      "dev": true,
       "optional": true
     },
     "esbuild-openbsd-64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-openbsd-64/download/esbuild-openbsd-64-0.13.8.tgz",
       "integrity": "sha1-iLKAtssKP2rbYKvyf8UGxQajXPA=",
-      "dev": true,
       "optional": true
     },
     "esbuild-sunos-64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-sunos-64/download/esbuild-sunos-64-0.13.8.tgz",
       "integrity": "sha1-Iprnx3AxlqWKzQ8Cka2b69qBXWM=",
-      "dev": true,
       "optional": true
     },
     "esbuild-windows-32": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-windows-32/download/esbuild-windows-32-0.13.8.tgz?cache=0&sync_timestamp=1634439444336&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-windows-32%2Fdownload%2Fesbuild-windows-32-0.13.8.tgz",
       "integrity": "sha1-iS0JPjKiHAyRNeWg/9w4Cutw52M=",
-      "dev": true,
       "optional": true
     },
     "esbuild-windows-64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-windows-64/download/esbuild-windows-64-0.13.8.tgz?cache=0&sync_timestamp=1634439403833&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-windows-64%2Fdownload%2Fesbuild-windows-64-0.13.8.tgz",
       "integrity": "sha1-fe/Y15rju35vU7ZacZC+fa+QFoY=",
-      "dev": true,
       "optional": true
     },
     "esbuild-windows-arm64": {
       "version": "0.13.8",
       "resolved": "https://registry.npmmirror.com/esbuild-windows-arm64/download/esbuild-windows-arm64-0.13.8.tgz",
       "integrity": "sha1-5ZrgBElv2KWrZ7/HlFouR0gNb7k=",
-      "dev": true,
       "optional": true
     },
     "escalade": {
@@ -1778,6 +1797,15 @@
         }
       }
     },
+    "eslint-plugin-html": {
+      "version": "6.2.0",
+      "resolved": "https://registry.nlark.com/eslint-plugin-html/download/eslint-plugin-html-6.2.0.tgz?cache=0&sync_timestamp=1632176597928&other_urls=https%3A%2F%2Fregistry.nlark.com%2Feslint-plugin-html%2Fdownload%2Feslint-plugin-html-6.2.0.tgz",
+      "integrity": "sha1-cVvAC1C70NmW4o+VPCiaXr7GnUM=",
+      "dev": true,
+      "requires": {
+        "htmlparser2": "^7.1.2"
+      }
+    },
     "eslint-plugin-import": {
       "version": "2.25.2",
       "resolved": "https://registry.npmmirror.com/eslint-plugin-import/download/eslint-plugin-import-2.25.2.tgz?cache=0&sync_timestamp=1634079318456&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-plugin-import%2Fdownload%2Feslint-plugin-import-2.25.2.tgz",
@@ -2008,7 +2036,6 @@
       "version": "3.2.7",
       "resolved": "https://registry.nlark.com/fast-glob/download/fast-glob-3.2.7.tgz",
       "integrity": "sha1-/Wy3otfpqnp4RhEehaGW1rL3ZqE=",
-      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -2033,7 +2060,6 @@
       "version": "1.13.0",
       "resolved": "https://registry.nlark.com/fastq/download/fastq-1.13.0.tgz",
       "integrity": "sha1-YWdg+Ip1Jr38WWt8q4wYk4w2uYw=",
-      "dev": true,
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -2068,7 +2094,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.nlark.com/fill-range/download/fill-range-7.0.1.tgz",
       "integrity": "sha1-GRmmp8df44ssfHflGYU12prN2kA=",
-      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -2152,14 +2177,12 @@
       "version": "2.3.2",
       "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-2.3.2.tgz?cache=0&sync_timestamp=1612536409579&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-2.3.2.tgz",
       "integrity": "sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=",
-      "dev": true,
       "optional": true
     },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz",
-      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=",
-      "dev": true
+      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0="
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -2237,7 +2260,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/glob-parent/download/glob-parent-5.1.2.tgz",
       "integrity": "sha1-hpgyxYA0/mikCTwX3BXoNA2EAcQ=",
-      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -2311,7 +2333,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.nlark.com/has/download/has-1.0.3.tgz",
       "integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -2325,8 +2346,7 @@
     "has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
-      "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-      "dev": true
+      "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s="
     },
     "has-symbols": {
       "version": "1.0.2",
@@ -2361,6 +2381,18 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "htmlparser2": {
+      "version": "7.1.2",
+      "resolved": "https://registry.nlark.com/htmlparser2/download/htmlparser2-7.1.2.tgz?cache=0&sync_timestamp=1631386311915&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-7.1.2.tgz",
+      "integrity": "sha1-WHkj048DvIngMHbgDLosdHPzf3w=",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.2",
+        "domutils": "^2.8.0",
+        "entities": "^3.0.1"
+      }
+    },
     "human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.nlark.com/human-signals/download/human-signals-2.1.0.tgz",
@@ -2665,7 +2697,6 @@
       "version": "2.8.0",
       "resolved": "https://registry.npmmirror.com/is-core-module/download/is-core-module-2.8.0.tgz?cache=0&sync_timestamp=1634236731601&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fis-core-module%2Fdownload%2Fis-core-module-2.8.0.tgz",
       "integrity": "sha1-AyEzbD0JJeSX/Zf12VyxFKXM1Ug=",
-      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
@@ -2682,8 +2713,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/is-extglob/download/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-      "dev": true
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
@@ -2695,7 +2725,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/is-glob/download/is-glob-4.0.3.tgz?cache=0&sync_timestamp=1632934586547&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fis-glob%2Fdownload%2Fis-glob-4.0.3.tgz",
       "integrity": "sha1-ZPYeQsu7LuwgcanawLKLoeZdUIQ=",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -2709,8 +2738,7 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.nlark.com/is-number/download/is-number-7.0.0.tgz",
-      "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss=",
-      "dev": true
+      "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss="
     },
     "is-number-object": {
       "version": "1.0.6",
@@ -2818,8 +2846,7 @@
     "jiti": {
       "version": "1.12.9",
       "resolved": "https://registry.npmmirror.com/jiti/download/jiti-1.12.9.tgz?cache=0&sync_timestamp=1634564409316&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fjiti%2Fdownload%2Fjiti-1.12.9.tgz",
-      "integrity": "sha1-LORbJlz8jckevXClIEgHz5FSkbw=",
-      "dev": true
+      "integrity": "sha1-LORbJlz8jckevXClIEgHz5FSkbw="
     },
     "js-tokens": {
       "version": "4.0.0",
@@ -3111,14 +3138,12 @@
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.nlark.com/merge2/download/merge2-1.4.1.tgz",
-      "integrity": "sha1-Q2iJL4hekHRVpv19xVwMnUBJkK4=",
-      "dev": true
+      "integrity": "sha1-Q2iJL4hekHRVpv19xVwMnUBJkK4="
     },
     "micromatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.4.tgz?cache=0&sync_timestamp=1618054841521&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmicromatch%2Fdownload%2Fmicromatch-4.0.4.tgz",
       "integrity": "sha1-iW1Rnf6dsl/OlM63pQCRm/iB6/k=",
-      "dev": true,
       "requires": {
         "braces": "^3.0.1",
         "picomatch": "^2.2.3"
@@ -3174,8 +3199,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/download/ms-2.1.2.tgz",
-      "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=",
-      "dev": true
+      "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk="
     },
     "mute-stream": {
       "version": "0.0.7",
@@ -3391,8 +3415,7 @@
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.nlark.com/path-parse/download/path-parse-1.0.7.tgz",
-      "integrity": "sha1-+8EUtgykKzDZ2vWFjkvWi77bZzU=",
-      "dev": true
+      "integrity": "sha1-+8EUtgykKzDZ2vWFjkvWi77bZzU="
     },
     "path-type": {
       "version": "4.0.0",
@@ -3408,8 +3431,7 @@
     "picomatch": {
       "version": "2.3.0",
       "resolved": "https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpicomatch%2Fdownload%2Fpicomatch-2.3.0.tgz",
-      "integrity": "sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI=",
-      "dev": true
+      "integrity": "sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI="
     },
     "pkg-dir": {
       "version": "2.0.0",
@@ -3481,8 +3503,7 @@
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.nlark.com/queue-microtask/download/queue-microtask-1.2.3.tgz",
-      "integrity": "sha1-SSkii7xyTfrEPg77BYyve2z7YkM=",
-      "dev": true
+      "integrity": "sha1-SSkii7xyTfrEPg77BYyve2z7YkM="
     },
     "quick-lru": {
       "version": "4.0.1",
@@ -3659,7 +3680,6 @@
       "version": "1.20.0",
       "resolved": "https://registry.nlark.com/resolve/download/resolve-1.20.0.tgz",
       "integrity": "sha1-YpoBP7P3B1XW8LeTXMHCxTeLGXU=",
-      "dev": true,
       "requires": {
         "is-core-module": "^2.2.0",
         "path-parse": "^1.0.6"
@@ -3703,8 +3723,7 @@
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.nlark.com/reusify/download/reusify-1.0.4.tgz",
-      "integrity": "sha1-kNo4Kx4SbvwCFG6QhFqI2xKSXXY=",
-      "dev": true
+      "integrity": "sha1-kNo4Kx4SbvwCFG6QhFqI2xKSXXY="
     },
     "rimraf": {
       "version": "3.0.2",
@@ -3719,7 +3738,6 @@
       "version": "2.58.0",
       "resolved": "https://registry.npmmirror.com/rollup/download/rollup-2.58.0.tgz?cache=0&sync_timestamp=1633071808909&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Frollup%2Fdownload%2Frollup-2.58.0.tgz",
       "integrity": "sha1-pkOYM2Xnv39bfGKoMxuYO3xMZ/s=",
-      "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -3734,7 +3752,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/run-parallel/download/run-parallel-1.2.0.tgz",
       "integrity": "sha1-ZtE2jae9+SHrnZW9GpIp5/IaQ+4=",
-      "dev": true,
       "requires": {
         "queue-microtask": "^1.2.2"
       }
@@ -3987,7 +4004,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703414084&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
       "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-      "dev": true,
       "requires": {
         "has-flag": "^4.0.0"
       }
@@ -4066,7 +4082,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.nlark.com/to-regex-range/download/to-regex-range-5.0.1.tgz",
       "integrity": "sha1-FkjESq58jZiKMmAY7XL1tN0DkuQ=",
-      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -4210,7 +4225,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmmirror.com/vite/download/vite-2.6.9.tgz?cache=0&sync_timestamp=1634546166900&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvite%2Fdownload%2Fvite-2.6.9.tgz",
       "integrity": "sha1-PdfFAYElRICp6BUnij+EjNPk3zo=",
-      "dev": true,
       "requires": {
         "esbuild": "^0.13.2",
         "fsevents": "~2.3.2",
@@ -4375,7 +4389,6 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmmirror.com/vite-plugin-windicss/download/vite-plugin-windicss-1.4.11.tgz",
       "integrity": "sha1-fGu5MishcuSU8XKh82+CzxW+ug8=",
-      "dev": true,
       "requires": {
         "@windicss/plugin-utils": "1.4.11",
         "chalk": "^4.1.2",
diff --git a/package.json b/package.json
index 56ad52e..4b1ff3a 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-html": "^6.2.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^7.19.1",

From a0d79c278f476679c2c7e8e37a11521d1d53b93c Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Wed, 27 Oct 2021 14:11:48 +0800
Subject: [PATCH 3/5] feat: device update

---
 src/components/device-edit.vue |  2 +-
 src/routers/index.js           |  6 ++++++
 src/views/data-history.vue     |  3 +++
 src/views/device-edit.vue      | 28 +++++++++++++++-------------
 4 files changed, 25 insertions(+), 14 deletions(-)
 create mode 100644 src/views/data-history.vue

diff --git a/src/components/device-edit.vue b/src/components/device-edit.vue
index cf2ad62..38a1566 100644
--- a/src/components/device-edit.vue
+++ b/src/components/device-edit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog v-model="show" title="编辑设备信息" fullscreen="true" @close="$emit('toggle-mdoal')">
-    <DeviceEdit :edit="true" />
+    <DeviceEdit v-if="show" :edit="true" @cancel="$emit('toggle-mdoal')" />
   </el-dialog>
 </template>
 
diff --git a/src/routers/index.js b/src/routers/index.js
index 3d25c40..6ffda4f 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -27,6 +27,12 @@ export const routes = [
     meta: { title: '设备管理' },
     component: () => import('@/views/device-list.vue'),
   },
+  {
+    path: '/data-history',
+    name: 'data-history',
+    meta: { title: '历史数据查看' },
+    component: () => import('@/views/data-history.vue'),
+  },
   {
     path: '/test',
     name: 'test',
diff --git a/src/views/data-history.vue b/src/views/data-history.vue
new file mode 100644
index 0000000..7b8b46c
--- /dev/null
+++ b/src/views/data-history.vue
@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>
diff --git a/src/views/device-edit.vue b/src/views/device-edit.vue
index 0ae2293..66a1309 100644
--- a/src/views/device-edit.vue
+++ b/src/views/device-edit.vue
@@ -1,9 +1,9 @@
 <template>
-  <el-form label-position="top" :model="data" ref="deviceCreate">
+  <el-form label-position="top" :model="data" ref="deviceEdit">
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设备ID号" prop="deviceId">
-          <el-input v-model="data.deviceId"></el-input>
+          <el-input v-model="data.deviceId" disabled></el-input>
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -128,18 +128,17 @@
     <el-row :gutter="20" class="mt-5 pl-2">
       <el-form-item>
         <el-button type="primary" @click="onSubmit">提交</el-button>
-        <el-button @click="onReset">重置</el-button>
+        <el-button @click="$emit('cancel')">取消</el-button>
       </el-form-item>
     </el-row>
   </el-form>
-  {{ device }}
 </template>
 
 <script setup>
-import { reactive, ref, computed } from 'vue';
+import { reactive, ref, computed, watch } from 'vue';
 import { useStore } from 'vuex';
 
-const data = reactive({
+let data = reactive({
   deviceId: '', // 设备id
   deviceFullId: '', // 设备完整id
   deviceDirection: '', // 设备朝向
@@ -161,19 +160,22 @@ const data = reactive({
   remark: '', // 备注
 });
 
-const deviceCreate = ref(null); // form
+const deviceEdit = ref(null); // form
 const store = useStore();
 const device = computed(() => store.getters['device/current']);
 
+watch(
+  () => device,
+  newValue => {
+    data = newValue.value;
+  },
+  { immediate: true, deep: true },
+);
+
 // 提交表单
 const onSubmit = () => {
-  deviceCreate.value.validate(valid => {
+  deviceEdit.value.validate(valid => {
     console.log(valid, { ...data });
   });
 };
-
-// 重置表单
-const onReset = () => {
-  deviceCreate.value.resetFields();
-};
 </script>

From 5a024a9781b507a5cbe440ca9ecef71e65af1f46 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Wed, 27 Oct 2021 16:43:56 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E6=9F=A5=E7=9C=8B=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/index.js                  |   9 ++-
 src/components/search-bar-data.vue |  59 ++++++++++++++
 src/views/data-history.vue         | 120 ++++++++++++++++++++++++++++-
 3 files changed, 184 insertions(+), 4 deletions(-)
 create mode 100644 src/components/search-bar-data.vue

diff --git a/src/apis/index.js b/src/apis/index.js
index ba262e5..335f98a 100644
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -14,10 +14,13 @@ export const getDevices = () => http.get(`${corrosion}/devices`);
 export const getDevicesAll = () => http.get(`${corrosion}/devices/all`);
 
 // 获取数据统计 积分电量
-export const getIntegralElectric = () => http.get(`${corrosion}/monthes/integralElectric`);
+export const getIntegralElectric = () => http.get(`${corrosion}/months/integralElectric`);
 
 // 获取数据统计 月累计腐蚀
-export const getTotalCorrosion = () => http.get(`${corrosion}/monthes/totalCorrosion`);
+export const getTotalCorrosion = () => http.get(`${corrosion}/months/totalCorrosion`);
 
 // 获取数据统计 月累计湿润时间图
-export const getMoistTime = () => http.get(`${corrosion}/monthes/moistTime`);
+export const getMoistTime = () => http.get(`${corrosion}/months/moistTime`);
+
+// 查历史数据
+export const getHistories = params => http.get(`${corrosion}/histories`, { params });
diff --git a/src/components/search-bar-data.vue b/src/components/search-bar-data.vue
new file mode 100644
index 0000000..1cfa5b6
--- /dev/null
+++ b/src/components/search-bar-data.vue
@@ -0,0 +1,59 @@
+<template>
+  <el-form :inline="true" :model="searchDevice" ref="searchDeviceForm">
+    <el-form-item label="选择站点">
+      <el-select v-model="searchDevice.deviceId" placeholder="请选择站点">
+        <el-option label="全部" value></el-option>
+        <el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="选择日期">
+      <el-date-picker
+        v-model="searchDevice.date"
+        type="daterange"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { reactive, ref, computed, defineEmits } from 'vue';
+import { useStore } from 'vuex';
+
+const emit = defineEmits(['search']);
+const searchDevice = reactive({ deviceId: '', date: '' });
+const searchDeviceForm = ref(null); // form
+const store = useStore();
+const devices = computed(() => store.state.device.devices);
+
+/**
+ * 格式化日期
+ * @param {Date} date 选择的日期
+ */
+const formatDate = date => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${year}-${month}-${day}`;
+};
+
+// 提交
+const onSubmit = () => {
+  searchDeviceForm.value.validate(() => {
+    const { deviceId, date } = searchDevice;
+    if (date) {
+      const daterange = [formatDate(date[0]), formatDate(date[1])];
+      emit('search', { deviceId, date: daterange });
+    } else {
+      emit('search', { deviceId, date });
+    }
+  });
+};
+</script>
diff --git a/src/views/data-history.vue b/src/views/data-history.vue
index 7b8b46c..c7a9853 100644
--- a/src/views/data-history.vue
+++ b/src/views/data-history.vue
@@ -1,3 +1,121 @@
+<script setup>
+import { computed, onMounted, reactive } from 'vue';
+import { useStore } from 'vuex';
+import SearchBar from 'components/search-bar-data.vue';
+import { getHistories } from 'apis/index';
+
+const filter = reactive({ search: {}, page: { page: 1, size: 10 } });
+
+const onSearch = payload => {
+  console.log('payload: ', payload);
+  filter.search = { ...payload };
+};
+
+let timer = null;
+const store = useStore();
+const token = computed(() => store.getters['user/token']);
+let contentHeight = 600;
+let data = reactive(null);
+
+// 获取设备完整信息列表
+const getData = async () => {
+  try {
+    if (token) {
+      const params = { ...filter };
+      console.log('params: ', params);
+      data = await getHistories(params);
+      console.log('data: ', data);
+      timer && clearTimeout(timer);
+      timer = null;
+    } else {
+      timer = setTimeout(() => {
+        getData();
+      });
+    }
+  } catch (error) {
+    console.log('error: ', error);
+  }
+};
+
+getData();
+
+// 设置表格高度
+onMounted(() => {
+  const winHeight = document.documentElement.clientHeight;
+  contentHeight = winHeight - 150;
+});
+
+// 当前页码变化
+const onCurrentPageChange = e => {
+  console.log(e);
+};
+
+// 每页条数变化
+const onSizeChange = e => {
+  console.log(e);
+};
+
+// 下一页
+const onNext = e => {
+  console.log(e);
+};
+
+// 上一页
+const onPrev = e => {
+  console.log(e);
+};
+</script>
+
 <template>
-  <div></div>
+  <SearchBar @search="onSearch" />
+  <template v-if="data">
+    <el-table :data="data.data" style="width: 100%" :style="{ 'max-height': contentHeight + 'px' }">
+      <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="18">备注：{{ props.row.remark }}</el-col>
+          </el-row>
+        </template>
+      </el-table-column>
+      <el-table-column label="ID" prop="deviceId" width="100" />
+      <el-table-column label="完整ID" prop="deviceFullId" width="150" />
+      <el-table-column label="地点" prop="address" width="150" />
+      <el-table-column label="地区" prop="area" width="120" />
+      <el-table-column label="联系人" prop="contact" width="100" />
+      <el-table-column label="联系电话" prop="phone" width="150" />
+      <el-table-column label="安装时间" prop="installTime" width="200" />
+      <el-table-column label="正式运行时间" prop="runTime" width="200" />
+      <el-table-column fixed="right" label="操作" width="148">
+        <template #default="props">
+          <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete">
+            <template #reference>
+              <el-button type="danger" plain size="mini">删除</el-button>
+            </template>
+          </el-popconfirm>
+
+          <el-button type="primary" plain size="mini" @click="handleEdit(props.row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      background
+      :current-page="data.page.page"
+      :page-size="data.page.size"
+      :default-page-size="10"
+      :page-count="data.page.total"
+      class="my-3 float-right"
+      @size-change="onSizeChange"
+      @current-change="onCurrentPageChange"
+      @prev-click="onPrev"
+      @next-click="onNext"
+    ></el-pagination>
+  </template>
 </template>

From c00320c6fd6c1b0cc845316f9750c60fc1cd97ed Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Thu, 28 Oct 2021 09:57:34 +0800
Subject: [PATCH 5/5] feat: menu

---
 src/App.vue                |  45 +++++++++++++--
 src/components/navbar.vue  |  22 ++++++-
 src/routers/index.js       |  19 ++----
 src/store/index.js         |  11 +++-
 src/views/data-history.vue | 115 +++++++++++++++++++------------------
 src/views/device-list.vue  |   4 +-
 src/views/test.vue         |   2 +-
 7 files changed, 136 insertions(+), 82 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 78ed659..dc7d3a1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,20 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import Navbar from 'components/navbar.vue';
 import zhCn from 'element-plus/lib/locale/lang/zh-cn';
 import { ElMessage } from 'element-plus';
+import { routes } from '@/routers/index.js';
 
 const local = zhCn;
 const store = useStore();
 let timer = null;
 
+const routeList = ref(routes);
+
+const menu = computed(() => store.state.menu);
+
 // 验证 获取query中u参数 获取token
 const validateQuery = async () => {
   const route = useRoute();
@@ -44,14 +49,44 @@ getDeviceData();
 
 <template>
   <el-config-provider :locale="local">
-    <Navbar />
-    <div class="p-4">
-      <router-view></router-view>
-    </div>
+    <el-container>
+      <el-header style="padding: 0">
+        <Navbar />
+      </el-header>
+      <el-container>
+        <!-- <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">
+            <el-menu-item :index="index" v-for="(item, index) in routeList" :key="item.name">
+              <i :class="item.meta.icon"></i>
+              <template #title>
+                <router-link :to="item.path">{{ item.meta.title }}</router-link>
+              </template>
+            </el-menu-item>
+          </el-menu>
+        </el-aside>
+        <el-main style="padding: 0">
+          <div class="p-4">
+            <router-view></router-view>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
   </el-config-provider>
 </template>
 
 <style>
+html,
+body,
+#app,
+#app > section {
+  height: 100%;
+}
+
+.el-menu {
+  min-height: 100%;
+}
+
 .el-form--label-top .el-form-item__label {
   padding-bottom: 0 !important;
 }
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 7e66889..62eb903 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -1,3 +1,23 @@
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+const toggleCollapse = () => {
+  console.log('Toggle Collapse');
+  store.commit('toggleCollapse');
+};
+const menu = computed(() => store.state.menu);
+</script>
+
 <template>
-  <h1 class="text-lg font-medium py-3 px-6 shadow">{{ $route.meta.title || '智能大气腐蚀检测平台' }}</h1>
+  <h1 class="text-lg font-medium py-3 px-6 shadow">
+    <i
+      class="el-icon-guide mr-2"
+      :class="{ 'text-gray-800': !menu.collapse, 'text-gray-400': menu.collapse }"
+      @click="toggleCollapse"
+      v-if="menu.show"
+    ></i>
+    {{ $route.meta.title || '智能大气腐蚀检测平台' }}
+  </h1>
 </template>
diff --git a/src/routers/index.js b/src/routers/index.js
index 7d35ee3..6aeff09 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -2,49 +2,42 @@ import { createRouter, createWebHistory } from 'vue-router';
 // 还有 createWebHashHistory 和 createMemoryHistory
 
 export const routes = [
-  { path: '/', redirect: '/test' },
   {
     path: '/network-config',
     name: 'network-config',
-    meta: { title: '网络参数配置' },
+    meta: { title: '网络参数配置', icon: 'el-icon-setting' },
     component: () => import('@/views/network-config.vue'),
   },
   {
     path: '/function-config',
     name: 'function-config',
-    meta: { title: '功能参数配置' },
+    meta: { title: '功能参数配置', icon: 'el-icon-set-up' },
     component: () => import('@/views/function-config.vue'),
   },
   {
     path: '/device-create',
     name: 'device-create',
-    meta: { title: '设备添加' },
+    meta: { title: '设备添加', icon: 'el-icon-plus' },
     component: () => import('@/views/device-create.vue'),
   },
   {
     path: '/devices',
     name: 'devices',
-    meta: { title: '设备管理' },
+    meta: { title: '设备管理', icon: 'el-icon-box' },
     component: () => import('@/views/device-list.vue'),
   },
   {
     path: '/data-history',
     name: 'data-history',
-    meta: { title: '历史数据查看' },
+    meta: { title: '历史数据查看', icon: 'el-icon-data-line' },
     component: () => import('@/views/data-history.vue'),
   },
   {
     path: '/months',
     name: 'months',
-    meta: { title: '月累计数据分析' },
+    meta: { title: '月累计数据分析', icon: 'el-icon-data-analysis' },
     component: () => import('@/views/month-data.vue'),
   },
-  {
-    path: '/test',
-    name: 'test',
-    meta: { title: '测试' },
-    component: () => import('@/views/test.vue'),
-  },
 ];
 
 const router = createRouter({
diff --git a/src/store/index.js b/src/store/index.js
index 7238607..37706ae 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,12 +1,17 @@
 import { createStore } from 'vuex';
 import device from './device';
-import user from './user';
 import statistics from './statistics';
+import user from './user';
 
 export default createStore({
   modules: { user, device, statistics },
-  state: {},
+  state: { menu: { show: true, collapse: false } },
   getters: {},
-  mutations: {},
+  mutations: {
+    toggleCollapse(state) {
+      console.log('1');
+      state.menu.collapse = !state.menu.collapse;
+    },
+  },
   actions: {},
 });
diff --git a/src/views/data-history.vue b/src/views/data-history.vue
index c7a9853..f1d9251 100644
--- a/src/views/data-history.vue
+++ b/src/views/data-history.vue
@@ -1,36 +1,32 @@
 <script setup>
-import { computed, onMounted, reactive } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import SearchBar from 'components/search-bar-data.vue';
 import { getHistories } from 'apis/index';
 
-const filter = reactive({ search: {}, page: { page: 1, size: 10 } });
-
-const onSearch = payload => {
-  console.log('payload: ', payload);
-  filter.search = { ...payload };
-};
-
+const search = ref({});
+const page = ref({ page: 2, size: 10 });
 let timer = null;
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
 let contentHeight = 600;
-let data = reactive(null);
+const data = ref(null);
 
 // 获取设备完整信息列表
 const getData = async () => {
   try {
     if (token) {
-      const params = { ...filter };
+      const params = { search: { ...search.value }, page: { page: page.value.page, size: page.value.size } };
       console.log('params: ', params);
-      data = await getHistories(params);
-      console.log('data: ', data);
+      const resData = await getHistories(params);
+      data.value = resData.data;
+      page.value = resData.page;
       timer && clearTimeout(timer);
       timer = null;
     } else {
       timer = setTimeout(() => {
         getData();
-      });
+      }, 20);
     }
   } catch (error) {
     console.log('error: ', error);
@@ -45,75 +41,80 @@ onMounted(() => {
   contentHeight = winHeight - 150;
 });
 
-// 当前页码变化
+/**
+ * 监听search信息
+ * @param {object} payload search组件emit的数据
+ */
+const onSearch = payload => {
+  search.value = { ...payload };
+  getData();
+};
+
+/**
+ * 当前页码变化
+ * 更新page 重新获取数据
+ * @param {number} e 当前的页码
+ */
 const onCurrentPageChange = e => {
-  console.log(e);
+  page.value.page = e;
+  getData();
 };
 
-// 每页条数变化
 const onSizeChange = e => {
-  console.log(e);
+  page.value.size = e;
+  getData();
 };
 
 // 下一页
 const onNext = e => {
-  console.log(e);
+  page.value.page = e + 1;
+  getData();
 };
 
 // 上一页
 const onPrev = e => {
-  console.log(e);
+  page.value.page = e - 1;
+  getData();
 };
 </script>
 
 <template>
   <SearchBar @search="onSearch" />
-  <template v-if="data">
-    <el-table :data="data.data" style="width: 100%" :style="{ 'max-height': contentHeight + 'px' }">
-      <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="18">备注：{{ props.row.remark }}</el-col>
-          </el-row>
-        </template>
-      </el-table-column>
-      <el-table-column label="ID" prop="deviceId" width="100" />
-      <el-table-column label="完整ID" prop="deviceFullId" width="150" />
-      <el-table-column label="地点" prop="address" width="150" />
-      <el-table-column label="地区" prop="area" width="120" />
-      <el-table-column label="联系人" prop="contact" width="100" />
-      <el-table-column label="联系电话" prop="phone" width="150" />
-      <el-table-column label="安装时间" prop="installTime" width="200" />
-      <el-table-column label="正式运行时间" prop="runTime" width="200" />
-      <el-table-column fixed="right" label="操作" width="148">
-        <template #default="props">
-          <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete">
-            <template #reference>
-              <el-button type="danger" plain size="mini">删除</el-button>
-            </template>
-          </el-popconfirm>
 
-          <el-button type="primary" plain size="mini" @click="handleEdit(props.row)">编辑</el-button>
-        </template>
-      </el-table-column>
+  <template v-if="data">
+    <el-table :data="data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }">
+      <el-table-column label="设备编号" fixed prop="deviceNo" width="140" />
+      <el-table-column label="ICCID" fixed prop="ICCID" width="100" />
+      <el-table-column label="IMEI" fixed prop="IMEI" width="80" />
+      <el-table-column label="信号强度" prop="signal" width="80" />
+      <el-table-column label="基站编号" prop="stationNo" width="80" />
+      <el-table-column label="版本号" prop="version" width="80" />
+      <el-table-column label="太阳能电压" prop="solarVoltage" width="94" />
+      <el-table-column label="蓄电池电压" prop="batteryVoltage" width="94" />
+      <el-table-column label="机箱温度" prop="deviceTemperature" width="80" />
+      <el-table-column label="机箱湿度" prop="deviceHumidity" width="80" />
+      <el-table-column label="环境温度" prop="environmentTemperature" width="80" />
+      <el-table-column label="环境湿度" prop="environmentHumidity" width="80" />
+      <el-table-column label="SO2" prop="so2" width="50" />
+      <el-table-column label="盐分" prop="salt" width="50" />
+      <el-table-column label="腐流1" prop="corrosion1" width="60" />
+      <el-table-column label="腐流2" prop="corrosion2" width="60" />
+      <el-table-column label="腐流3" prop="corrosion3" width="60" />
+      <el-table-column label="腐流4" prop="corrosion4" width="60" />
     </el-table>
 
     <el-pagination
       background
-      :current-page="data.page.page"
-      :page-size="data.page.size"
+      :current-page="page.page"
+      :page-size="page.size"
       :default-page-size="10"
-      :page-count="data.page.total"
+      :page-count="page.count"
+      layout="total, sizes, prev, pager, next, jumper"
+      :page-sizes="[1, 10, 20, 50, 100]"
       class="my-3 float-right"
-      @size-change="onSizeChange"
+      :total="page.total"
       @current-change="onCurrentPageChange"
+      @size-change="onSizeChange"
       @prev-click="onPrev"
       @next-click="onNext"
     ></el-pagination>
diff --git a/src/views/device-list.vue b/src/views/device-list.vue
index e5d6d51..35341ce 100644
--- a/src/views/device-list.vue
+++ b/src/views/device-list.vue
@@ -2,7 +2,7 @@
   <SearchBar />
 
   <template v-if="devicesAll && devicesAll.data">
-    <el-table :data="devicesAll.data" style="width: 100%" :style="{ 'max-height': contentHeight + 'px' }">
+    <el-table :data="devicesAll.data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }">
       <el-table-column type="expand">
         <template #default="props">
           <el-row :gutter="20" class="px-6 text-gray-400">
@@ -43,7 +43,7 @@
       :current-page="devicesAll.page.page"
       :page-size="devicesAll.page.size"
       :default-page-size="10"
-      :page-count="devicesAll.page.total"
+      :page-count="devicesAll.page.count"
       class="my-3 float-right"
       @size-change="onSizeChange"
       @current-change="onCurrentPageChange"
diff --git a/src/views/test.vue b/src/views/test.vue
index 05d4963..cd5c5d2 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -5,7 +5,7 @@
         <span>测试</span>
       </div>
     </template>
-    <div class="text item" v-for="item in routeList" :key="item">
+    <div class="text item" v-for="item in routeList" :key="item.name">
       <router-link :to="item.path">
         <el-button type="text">{{ item.name }}</el-button>
       </router-link>