From d99e4876c7a7ad7752e08b8a20fdaaa8c9c389ec Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Sat, 13 Nov 2021 23:18:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B9=E6=8D=AE=E7=94=B2=E6=96=B9?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E8=B0=83=E6=95=B4=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/{ => chart}/data-report.vue    | 30 +++++---------
 .../{ => config}/function-config-pending.vue  | 34 +++++++--------
 .../{ => config}/network-config-pending.vue   | 38 +++++++++--------
 .../device}/device-create.vue                 | 18 ++++----
 src/config/config.js                          |  4 +-
 src/hooks/useDeviceCreate.js                  | 24 +++++++++++
 src/routers/index.js                          | 41 ++++---------------
 src/store/device.js                           | 11 ++++-
 src/views/config.vue                          | 18 ++++++++
 src/views/device-list.vue                     | 17 ++++++--
 src/views/function-config.vue                 | 10 ++---
 src/views/network-config.vue                  | 10 ++---
 src/views/statistical-report.vue              | 12 +++---
 13 files changed, 147 insertions(+), 120 deletions(-)
 rename src/components/{ => chart}/data-report.vue (69%)
 rename src/components/{ => config}/function-config-pending.vue (86%)
 rename src/components/{ => config}/network-config-pending.vue (78%)
 rename src/{views => components/device}/device-create.vue (94%)
 create mode 100644 src/hooks/useDeviceCreate.js
 create mode 100644 src/views/config.vue

diff --git a/src/components/data-report.vue b/src/components/chart/data-report.vue
similarity index 69%
rename from src/components/data-report.vue
rename to src/components/chart/data-report.vue
index ce4cfba..943bf91 100644
--- a/src/components/data-report.vue
+++ b/src/components/chart/data-report.vue
@@ -1,12 +1,12 @@
 <template>
   <el-card class="box-card">
-    <el-empty description="暂无数据" v-if="noData"></el-empty>
+    <el-empty v-if="noData" description="暂无数据"></el-empty>
     <div id="realtimeContainer"></div>
   </el-card>
 </template>
 
 <script setup>
-import { onMounted, ref, defineExpose } from 'vue';
+import { defineExpose, onMounted, ref } from 'vue';
 import { Line } from '@antv/g2plot';
 import { formatChartTime } from 'utils/time';
 
@@ -61,16 +61,14 @@ const changeDate = value => {
   value.forEach(element => {
     const item = { ...element };
 
-    const so2Item = { category: 'SO2' };
-    const saltItem = { category: '盐分' };
-    const environmentTemperatureItem = { category: '环温' };
-    const environmentHumidityItem = { category: '环湿' };
-    const deviceTemperatureItem = { category: '机温' };
-    const deviceHumidityItem = { category: '机湿' };
-    const corrosion1Item = { category: '腐流1' };
-    const corrosion2Item = { category: '腐流2' };
-    const corrosion3Item = { category: '腐流3' };
-    const corrosion4Item = { category: '腐流4' };
+    const so2Item = { category: 'SO2(ppb)' };
+    const saltItem = { category: '盐分阻抗(Ω)' };
+    const environmentTemperatureItem = { category: '环温(℃)' };
+    const environmentHumidityItem = { category: '环湿(RH%)' };
+    const corrosion1Item = { category: '锌腐蚀电流(nA)' };
+    const corrosion2Item = { category: '铜腐蚀电流(nA)' };
+    const corrosion3Item = { category: '铝腐蚀电流(nA)' };
+    const corrosion4Item = { category: '钢腐蚀电流(nA)' };
 
     so2Item.time = formatChartTime(item.time);
     so2Item.value = item.so2;
@@ -88,14 +86,6 @@ const changeDate = value => {
     environmentHumidityItem.value = item.environmentHumidity;
     arr.push(environmentHumidityItem);
 
-    deviceTemperatureItem.time = formatChartTime(item.time);
-    deviceTemperatureItem.value = item.deviceTemperature;
-    arr.push(deviceTemperatureItem);
-
-    deviceHumidityItem.time = formatChartTime(item.time);
-    deviceHumidityItem.value = item.deviceHumidity;
-    arr.push(deviceHumidityItem);
-
     corrosion1Item.time = formatChartTime(item.time);
     corrosion1Item.value = item.corrosion1;
     arr.push(corrosion1Item);
diff --git a/src/components/function-config-pending.vue b/src/components/config/function-config-pending.vue
similarity index 86%
rename from src/components/function-config-pending.vue
rename to src/components/config/function-config-pending.vue
index 03a890d..cef1389 100644
--- a/src/components/function-config-pending.vue
+++ b/src/components/config/function-config-pending.vue
@@ -2,68 +2,68 @@
   <el-form ref="functionForm" :model="data" label-position="top">
     <el-row :gutter="20">
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置金属腐蚀采样频率(分钟)" prop="frequency.metal">
+        <el-form-item label="金属腐蚀采样频率(分钟)" prop="frequency.metal">
           <el-input-number v-model="data.frequency.metal" :min="0" />
         </el-form-item>
       </el-col>
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置温湿度采样频率(分钟)" prop="frequency.th">
+        <el-form-item label="温湿度采样频率(分钟)" prop="frequency.th">
           <el-input-number v-model="data.frequency.th" :min="0" />
         </el-form-item>
       </el-col>
 
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置SO2采样频率(分钟)" prop="frequency.so2">
+        <el-form-item label="SO2采样频率(分钟)" prop="frequency.so2">
           <el-input-number v-model="data.frequency.so2" :min="0" />
         </el-form-item>
       </el-col>
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置盐雾采样频率(分钟)" prop="frequency.salt">
+        <el-form-item label="盐雾采样频率(分钟)" prop="frequency.salt">
           <el-input-number v-model="data.frequency.salt" :min="0" />
         </el-form-item>
       </el-col>
 
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置时间" prop="time">
+        <el-form-item label="时间" prop="time">
           <!-- <el-input v-model="data.time"></el-input> -->
           <el-date-picker v-model="data.time" placeholder="设置时间" type="datetime"></el-date-picker>
         </el-form-item>
       </el-col>
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置金属腐蚀采集个数" prop="count">
+        <el-form-item label="金属腐蚀采集个数" prop="count">
           <el-input-number v-model="data.count" :min="0" />
         </el-form-item>
       </el-col>
 
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置电池电压低阈值(V)" prop="batteryLow">
+        <el-form-item label="电池电压低阈值(V)" prop="batteryLow">
           <el-input-number v-model="data.batteryLow" :min="0" />
         </el-form-item>
       </el-col>
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置电池电压高阈值(V)" prop="batteryHigh">
+        <el-form-item label="电池电压高阈值(V)" prop="batteryHigh">
           <el-input-number v-model="data.batteryHigh" :min="0" />
         </el-form-item>
       </el-col>
 
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置太阳能电压高阈值(V)" prop="sunHigh">
+        <el-form-item label="太阳能板电压高阈值(V)" prop="sunHigh">
           <el-input-number v-model="data.sunHigh" :min="0" />
         </el-form-item>
       </el-col>
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置湿度高阈值(V)" prop="humidityHigh">
+        <el-form-item label="湿度高阈值(RH%)" prop="humidityHigh">
           <el-input-number v-model="data.humidityHigh" :min="0" />
         </el-form-item>
       </el-col>
 
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置温度低阈值(℃)" prop="temperatureLow">
+        <el-form-item label="温度低阈值(℃)" prop="temperatureLow">
           <el-input-number v-model="data.temperatureLow" :min="-30" />
         </el-form-item>
       </el-col>
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设置温度高阈值(℃)" prop="temperatureHigh">
+        <el-form-item label="温度高阈值(℃)" prop="temperatureHigh">
           <el-input-number v-model="data.temperatureHigh" :min="0" />
         </el-form-item>
       </el-col>
@@ -102,7 +102,7 @@
 
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="设置安全模式" prop="securityMode">
+        <el-form-item label="安全模式" prop="securityMode">
           <!-- <el-input v-model="data.securityMode"></el-input> -->
           <el-radio v-model="data.securityMode" label="OPEN">不加密</el-radio>
           <el-radio v-model="data.securityMode" label="ENCRYPTION">加密</el-radio>
@@ -112,10 +112,10 @@
 
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="设置上报时间" prop="report.type" style="margin-bottom: 0 !important">
+        <el-form-item label="上报时间" prop="report.type" style="margin-bottom: 0 !important">
           <el-radio-group v-model="data.report.type">
-            <el-radio label="POINT">按设定时间点上报</el-radio>
-            <el-radio label="CYCLE">按设定周期上报(分钟)</el-radio>
+            <el-radio label="POINT">定时上报</el-radio>
+            <el-radio label="CYCLE">周期上报(分钟)</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-col>
@@ -132,7 +132,7 @@
     <el-row v-else :gutter="20">
       <el-col :span="12">
         <el-form-item prop="report.cycle">
-          <el-input-number v-model="data.report.cycle" :min="0" />
+          <el-input-number v-model="data.report.cycle" :max="1440" :min="10" step="10" />
         </el-form-item>
       </el-col>
     </el-row>
diff --git a/src/components/network-config-pending.vue b/src/components/config/network-config-pending.vue
similarity index 78%
rename from src/components/network-config-pending.vue
rename to src/components/config/network-config-pending.vue
index a5a4f98..7688657 100644
--- a/src/components/network-config-pending.vue
+++ b/src/components/config/network-config-pending.vue
@@ -1,62 +1,62 @@
 <template>
-  <el-form label-position="top" :model="data" ref="networkForm">
+  <el-form ref="networkForm" :model="data" label-position="top">
     <el-row :gutter="20">
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="上报IP1地址" prop="ip1">
           <el-input v-model="data.ip1"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="上报端口号1" prop="port1">
           <el-input v-model="data.port1"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="上报IP2地址" prop="ip2">
           <el-input v-model="data.ip2"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="上报端口号2" prop="port2">
           <el-input v-model="data.port2"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="上报IP3地址" prop="ip3">
           <el-input v-model="data.ip3"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="上报端口号3" prop="port3">
           <el-input v-model="data.port3"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="备用ip地址" prop="ipBackup">
           <el-input v-model="data.ipBackup"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="备用端口号" prop="portBackup">
           <el-input v-model="data.portBackup"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="用户名" prop="account">
           <el-input v-model="data.account"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="密码" prop="password">
           <el-input v-model="data.password"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="APN" prop="apn">
           <el-input v-model="data.apn"></el-input>
         </el-form-item>
@@ -76,10 +76,10 @@
 </template>
 
 <script setup>
-import { computed, ref, watch, defineEmits, defineProps } from 'vue';
+import { computed, defineEmits, defineProps, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
-import { getConfigNetwork, createConfigNetwork } from 'apis/index';
+import { createConfigNetwork, getConfigNetwork } from 'apis';
 import Refresh from 'components/refresh.vue';
 import { networkConfig } from '@/config/config';
 
@@ -97,7 +97,10 @@ const props = defineProps({ activeName: String });
  */
 async function onSearch(deviceId, type = 0) {
   try {
-    const params = { deviceId, type };
+    const params = {
+      deviceId,
+      type,
+    };
     const resData = await getConfigNetwork(params);
     data.value = resData || networkConfig;
     if (resData && resData.status) {
@@ -121,7 +124,10 @@ watch(
 // 提交表单
 const onSubmit = () => {
   networkForm.value.validate(async () => {
-    const param = { ...data.value, deviceId: currentDeviceId.value };
+    const param = {
+      ...data.value,
+      deviceId: currentDeviceId.value,
+    };
     try {
       await createConfigNetwork(param);
       ElMessage.success('提交成功');
diff --git a/src/views/device-create.vue b/src/components/device/device-create.vue
similarity index 94%
rename from src/views/device-create.vue
rename to src/components/device/device-create.vue
index 8500d11..3702fe9 100644
--- a/src/views/device-create.vue
+++ b/src/components/device/device-create.vue
@@ -124,11 +124,10 @@
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
-import { ElMessageBox } from 'element-plus';
+import { reactive, ref, defineEmits } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
 import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
-import { createDevice } from '../apis/index';
+import { createDevice } from 'apis';
 
 const data = reactive({
   deviceId: '', // 设备id
@@ -170,8 +169,7 @@ const rules = {
 
 const deviceCreate = ref(null); // form
 const store = useStore();
-const route = useRoute();
-const router = useRouter();
+const emit = defineEmits(['hide']);
 
 // 重置表单
 const onReset = () => {
@@ -190,6 +188,7 @@ const onSubmit = () => {
     }
     try {
       await createDevice({ ...data });
+      store.commit('device/unshiftDevice', { ...data });
       ElMessageBox.confirm('添加成功，是否继续添加', '提示', {
         confirmButtonText: '继续添加',
         cancelButtonText: '关闭',
@@ -200,13 +199,12 @@ const onSubmit = () => {
           onReset();
         })
         .catch(() => {
-          router.push({
-            path: '/corrosion/devices',
-            query: route.query,
-          }); // 取消/关闭 跳转到设备管理列表
+          onReset();
+          emit('on-hide');
         });
       await store.dispatch('device/getDevices'); // 更新站点列表
     } catch (error) {
+      ElMessage.error(error);
       throw new Error(error);
     }
   });
diff --git a/src/config/config.js b/src/config/config.js
index 3d86aa3..9f2d272 100644
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -38,7 +38,7 @@ export const functionConfig = {
   report: {
     type: 'CYCLE', // 上报周期类型 0->时间点  1->周期
     timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点
-    cycle: 0, // 上报周期分钟数
+    cycle: 240, // 上报周期分钟数
   },
   status: '',
 };
@@ -91,4 +91,4 @@ export const PEND_TYPE = {
 };
 
 // 实时查询数据的轮询时间 1分钟
-export const REALTIME_DATA_INTERVAL = 60000;
+export const REALTIME_DATA_INTERVAL = 60000 * 5;
diff --git a/src/hooks/useDeviceCreate.js b/src/hooks/useDeviceCreate.js
new file mode 100644
index 0000000..29bd730
--- /dev/null
+++ b/src/hooks/useDeviceCreate.js
@@ -0,0 +1,24 @@
+import { ref } from 'vue';
+
+export default function useDeviceCreate() {
+  const display = ref(false);
+
+  function toggle() {
+    display.value = !display.value;
+  }
+
+  function hide() {
+    display.value = false;
+  }
+
+  function show() {
+    display.value = true;
+  }
+
+  return {
+    display,
+    toggle,
+    hide,
+    show,
+  };
+}
diff --git a/src/routers/index.js b/src/routers/index.js
index 6991bfe..562941f 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -21,37 +21,19 @@ export const routes = [
     component: () => import('@/views/device-list.vue'),
   },
   {
-    path: '/corrosion/network-config',
-    name: 'network-config',
+    path: '/corrosion/config',
+    name: 'config',
     meta: {
-      title: '网络参数配置',
-      icon: 'el-icon-setting',
-    },
-    component: () => import('@/views/network-config.vue'),
-  },
-  {
-    path: '/corrosion/function-config',
-    name: 'function-config',
-    meta: {
-      title: '功能参数配置',
+      title: '参数配置',
       icon: 'el-icon-set-up',
     },
-    component: () => import('@/views/function-config.vue'),
-  },
-  {
-    path: '/corrosion/device-create',
-    name: 'device-create',
-    meta: {
-      title: '设备添加',
-      icon: 'el-icon-first-aid-kit',
-    },
-    component: () => import('@/views/device-create.vue'),
+    component: () => import('@/views/config.vue'),
   },
   {
     path: '/corrosion/data-realtime',
     name: 'data-realtime',
     meta: {
-      title: '实时数据查看',
+      title: '实时数据',
       icon: 'el-icon-odometer',
     },
     component: () => import('@/views/data-realtime.vue'),
@@ -65,15 +47,6 @@ export const routes = [
     },
     component: () => import('@/views/statistical-realtime.vue'),
   },
-  {
-    path: '/corrosion/data-report',
-    name: 'data-report',
-    meta: {
-      title: '上报数据查看',
-      icon: 'el-icon-stopwatch',
-    },
-    component: () => import('@/views/data-report.vue'),
-  },
   {
     path: '/corrosion/statistical-report',
     name: 'statistical-report',
@@ -87,7 +60,7 @@ export const routes = [
     path: '/corrosion/data-history',
     name: 'data-history',
     meta: {
-      title: '历史数据查看',
+      title: '历史数据',
       icon: 'el-icon-document-copy',
     },
     component: () => import('@/views/data-history.vue'),
@@ -96,7 +69,7 @@ export const routes = [
     path: '/corrosion/commands',
     name: 'commands',
     meta: {
-      title: '历史数据指令下发状态',
+      title: '平台日志',
       icon: 'el-icon-moon-night',
     },
     component: () => import('@/views/commands.vue'),
diff --git a/src/store/device.js b/src/store/device.js
index a927169..0989694 100644
--- a/src/store/device.js
+++ b/src/store/device.js
@@ -7,7 +7,7 @@ const user = {
 
   state: {
     devices: [], // 站点列表 设备列表简版
-    devicesAll: null, // 设备列表完整版
+    devicesAll: { page: {}, data: [] }, // 设备列表完整版
     currentDeviceId: '', // 当前正在编辑的设备deviceId
     count: {
       total: 0, // 总设备数量
@@ -113,6 +113,15 @@ const user = {
       if (!devicesAll || !devicesAll.data || !devicesAll.data.length) return;
       devicesAll.data = devicesAll.data.filter(item => item.deviceId !== deviceId);
     },
+
+    /**
+     * 新增设备后将设备数据追加到最前边
+     * @param {array} devicesAll
+     * @param {object} device 后台返回的新增设备信息
+     */
+    unshiftDevice({ devicesAll }, device) {
+      devicesAll.data.unshift(device);
+    },
   },
 
   actions: {
diff --git a/src/views/config.vue b/src/views/config.vue
new file mode 100644
index 0000000..f2ec10c
--- /dev/null
+++ b/src/views/config.vue
@@ -0,0 +1,18 @@
+<template>
+  <el-tabs v-model="activeName">
+    <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">
+      <NetworkConfigPending v-if="activeName === 'network'" :active-name="activeName" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import FunctionConfigPending from 'components/config/function-config-pending.vue';
+import NetworkConfigPending from 'components/config/network-config-pending.vue';
+
+const activeName = ref('function');
+</script>
diff --git a/src/views/device-list.vue b/src/views/device-list.vue
index 853d265..5e4f80e 100644
--- a/src/views/device-list.vue
+++ b/src/views/device-list.vue
@@ -2,7 +2,7 @@
   <SearchBar @search="onSearch" />
 
   <div class="my-3">
-    <el-button type="primary" @click="openPage(null, 'device-create')">
+    <el-button type="primary" @click="deviceCreate.show()">
       <i class="el-icon-plus mr-2"></i>
       添加设备
     </el-button>
@@ -90,16 +90,22 @@
 
   <!-- 编辑设备信息 -->
   <DeviceEdit :show="editing" @toggle-mdoal="editing = false" />
+
+  <el-dialog v-model="deviceCreate.display" title="添加设备" width="80%" top="30px">
+    <DeviceCreate @on-hide="deviceCreate.hide()" />
+  </el-dialog>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
-import SearchBar from 'components/search-bar.vue';
-import DeviceEdit from 'components/device-edit.vue';
 import { deleteDevice } from 'apis';
 import { ElMessage } from 'element-plus';
+import SearchBar from 'components/search-bar.vue';
+import DeviceEdit from 'components/device-edit.vue';
+import DeviceCreate from 'components/device/device-create.vue';
+import useDeviceCreate from '@/hooks/useDeviceCreate';
 
 let timer = null;
 const store = useStore();
@@ -112,6 +118,8 @@ const devicesAll = computed(() => {
 const currentDeviceId = computed(() => store.state.device.currentDeviceId);
 const contentHeight = ref(600);
 const editing = ref(false);
+const { show, display, hide } = useDeviceCreate();
+const deviceCreate = reactive({ show, display, hide }); // 设备添加hook
 
 // 获取设备完整信息列表
 const getDevicesAllData = () => {
@@ -126,6 +134,7 @@ const getDevicesAllData = () => {
       });
     }
   } catch (error) {
+    ElMessage.error(error);
     throw new Error(error);
   }
 };
diff --git a/src/views/function-config.vue b/src/views/function-config.vue
index 287c938..67fae54 100644
--- a/src/views/function-config.vue
+++ b/src/views/function-config.vue
@@ -3,11 +3,11 @@
   <DeviceSelectAndStatus :status="status" />
 
   <el-tabs v-model="activeName">
-    <el-tab-pane label="下发参数" name="pending" :lazy="true">
-      <FunctionConfigPending @status="setStatus" v-if="activeName === 'pending'" :active-name="activeName" />
+    <el-tab-pane :lazy="true" label="下发参数" name="pending">
+      <FunctionConfigPending v-if="activeName === 'pending'" :active-name="activeName" @status="setStatus" />
     </el-tab-pane>
-    <el-tab-pane label="设备参数" name="applied" :lazy="true">
-      <FunctionConfigApplied @status="setStatus" v-if="activeName === 'applied'" :active-name="activeName" />
+    <el-tab-pane :lazy="true" label="设备参数" name="applied">
+      <FunctionConfigApplied v-if="activeName === 'applied'" :active-name="activeName" @status="setStatus" />
     </el-tab-pane>
   </el-tabs>
 </template>
@@ -15,7 +15,7 @@
 <script setup>
 import { ref } from 'vue';
 import DeviceSelectAndStatus from 'components/device-select-and-status.vue';
-import FunctionConfigPending from 'components/function-config-pending.vue';
+import FunctionConfigPending from 'components/config/function-config-pending.vue';
 import FunctionConfigApplied from 'components/function-config-applied.vue';
 
 const activeName = ref('pending');
diff --git a/src/views/network-config.vue b/src/views/network-config.vue
index 725081c..f7b416f 100644
--- a/src/views/network-config.vue
+++ b/src/views/network-config.vue
@@ -3,11 +3,11 @@
   <DeviceSelectAndStatus :status="status" />
 
   <el-tabs v-model="activeName">
-    <el-tab-pane label="下发参数" name="pending" :lazy="true">
-      <NetworkConfigPending @status="setStatus" v-if="activeName === 'pending'" :active-name="activeName" />
+    <el-tab-pane :lazy="true" label="下发参数" name="pending">
+      <NetworkConfigPending v-if="activeName === 'pending'" :active-name="activeName" @status="setStatus" />
     </el-tab-pane>
-    <el-tab-pane label="设备参数" name="applied" :lazy="true">
-      <NetworkConfigApplied @status="setStatus" v-if="activeName === 'applied'" :active-name="activeName" />
+    <el-tab-pane :lazy="true" label="设备参数" name="applied">
+      <NetworkConfigApplied v-if="activeName === 'applied'" :active-name="activeName" @status="setStatus" />
     </el-tab-pane>
   </el-tabs>
 </template>
@@ -15,7 +15,7 @@
 <script setup>
 import { ref } from 'vue';
 import DeviceSelectAndStatus from 'components/device-select-and-status.vue';
-import NetworkConfigPending from 'components/network-config-pending.vue';
+import NetworkConfigPending from 'components/config/network-config-pending.vue';
 import NetworkConfigApplied from 'components/network-config-applied.vue';
 
 const activeName = ref('pending');
diff --git a/src/views/statistical-report.vue b/src/views/statistical-report.vue
index d9cc4ec..13a74bc 100644
--- a/src/views/statistical-report.vue
+++ b/src/views/statistical-report.vue
@@ -1,11 +1,11 @@
 <template>
-  <SearchBar @search="onSearch" :loading-search="loadingSearch" />
+  <SearchBar :loading-search="loadingSearch" @search="onSearch" />
   <HistoryData ref="childRef" class="mt-4" />
 </template>
 
 <script setup>
 import SearchBar from 'components/search-bar-data.vue';
-import HistoryData from 'components/data-report.vue';
+import HistoryData from 'components/chart/data-report.vue';
 import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
 
@@ -28,7 +28,7 @@ const loadingSearch = ref(false);
  * @param {*} size // 每页多少条
  * @param {*} type // 0查全部
  */
-const getDate = async () => {
+const getData = async () => {
   try {
     if (token && token.value) {
       loadingSearch.value = true;
@@ -47,7 +47,7 @@ const getDate = async () => {
     } else {
       loadingSearch.value = false;
       timer = setTimeout(() => {
-        getDate();
+        getData();
       });
     }
   } catch (error) {
@@ -56,7 +56,7 @@ const getDate = async () => {
   }
 };
 
-getDate();
+getData();
 
 /**
  * 监听search信息
@@ -64,6 +64,6 @@ getDate();
  */
 const onSearch = payload => {
   search.value = { ...payload };
-  getDate();
+  getData();
 };
 </script>