From d10010ded69a472b2c28d5a958f8e4876417cd3d Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Thu, 21 Oct 2021 16:52:44 +0800
Subject: [PATCH] feat: function config & device create ui
---
.eslintrc.js | 20 ++++
mock/function-config.js | 23 +++++
mock/network-config.js | 13 +++
src/App.vue | 4 +-
src/main.js | 10 +-
src/routers/index.js | 6 ++
src/views/device-create.vue | 175 ++++++++++++++++++++++++++++++++++
src/views/function-config.vue | 99 +++++++++++++------
src/views/network-config.vue | 2 +-
9 files changed, 312 insertions(+), 40 deletions(-)
create mode 100644 mock/function-config.js
create mode 100644 mock/network-config.js
create mode 100644 src/views/device-create.vue
diff --git a/.eslintrc.js b/.eslintrc.js
index 77cece1..aea2d4a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -13,5 +13,25 @@ module.exports = {
'import/no-unresolved': 0,
'import/extensions': 0,
'no-console': 0,
+ 'vue/html-self-closing': 'off',
+ 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+ 'no-param-reassign': 'off',
+ 'max-len': ['error', { code: 140, tabWidth: 2 }],
+ 'object-curly-newline': ['error', { multiline: true }],
+ 'arrow-parens': ['error', 'as-needed'],
+ 'linebreak-style': 'off',
+ 'vue/attributes-order': 'off',
+ 'vue/singleline-html-element-content-newline': 'off',
+ 'vue/max-attributes-per-line': 'off',
+ 'vue/multiline-html-element-content-newline': 'off',
+ 'vue/html-indent': 'off',
+ 'vue/html-closing-bracket-newline': [
+ 'error',
+ {
+ singleline: 'never',
+ multiline: 'always',
+ },
+ ],
},
};
diff --git a/mock/function-config.js b/mock/function-config.js
new file mode 100644
index 0000000..032b02b
--- /dev/null
+++ b/mock/function-config.js
@@ -0,0 +1,23 @@
+module.exports = {
+ frequency: {
+ so2: 0, // SO2采样频率
+ metal: 0, // 金属腐蚀采样频率
+ th: 0, // 温湿度 采样频率
+ salt: 0, // 盐雾 采样频率
+ }, // 采样频率
+ count: 0, // 采集个数
+ time: new Date(), // 设置时间
+ batteryLow: 0, // 电池电压低阈值
+ batteryHigh: 0, // 电池电压高阈值
+ sunHigh: 0, // 太阳能电压高阈值
+ humidityHigh: 0, // 湿度高阈值
+ temperatureLow: 0, // 温度低阈值
+ temperatureHigh: 0, // 温度高阈值
+ securityMode: 0, // 安全模式 0->不加密 1->加密
+ corrosiveType: '', // 金属腐蚀类型
+ report: {
+ type: 0, // 上报周期类型 0->时间点 1->周期
+ timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点
+ cycle: 0, // 上报周期分钟数
+ },
+};
diff --git a/mock/network-config.js b/mock/network-config.js
new file mode 100644
index 0000000..74dbdae
--- /dev/null
+++ b/mock/network-config.js
@@ -0,0 +1,13 @@
+module.exports = {
+ ip1: '',
+ port1: '',
+ ip2: '',
+ port2: '',
+ ip3: '',
+ port3: '',
+ ipBackup: '', // 备用ip
+ portBackup: '', // 备用端口号
+ account: '', // 账号
+ password: '', // 密码
+ apn: '', // apn
+};
diff --git a/src/App.vue b/src/App.vue
index 3405d4d..135d798 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
diff --git a/src/main.js b/src/main.js
index 0d40cc0..781f94b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,9 @@
-import 'virtual:windi.css'
+import 'virtual:windi.css';
-import App from './App.vue'
-import { createApp } from 'vue'
+import { createApp } from 'vue';
+import App from './App.vue';
import router from './routers/index';
const app = createApp(App);
-app
- .use(router)
- .mount('#app')
+app.use(router).mount('#app');
diff --git a/src/routers/index.js b/src/routers/index.js
index 7f486ef..b52177f 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -15,6 +15,12 @@ export const routes = [
meta: { title: '功能参数配置' },
component: () => import('@/views/function-config.vue'),
},
+ {
+ path: '/device-create',
+ name: 'device-create',
+ meta: { title: '设备添加' },
+ component: () => import('@/views/device-create.vue'),
+ },
{
path: '/test',
name: 'test',
diff --git a/src/views/device-create.vue b/src/views/device-create.vue
new file mode 100644
index 0000000..a1ccda1
--- /dev/null
+++ b/src/views/device-create.vue
@@ -0,0 +1,175 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+ 重置
+
+
+
+
+
+
diff --git a/src/views/function-config.vue b/src/views/function-config.vue
index cf8248f..f6fb21e 100644
--- a/src/views/function-config.vue
+++ b/src/views/function-config.vue
@@ -3,12 +3,12 @@
-
+
-
+
@@ -16,12 +16,12 @@
-
+
-
+
@@ -29,12 +29,13 @@
-
+
+
-
+
@@ -42,12 +43,12 @@
-
+
-
+
@@ -55,12 +56,12 @@
-
+
-
+
@@ -68,12 +69,12 @@
-
+
-
+
@@ -81,25 +82,49 @@
-
+
+ 不加密
+ 加密
-
+
+
+
+
-
-
+
+
+ 按设定时间点上报
+ 按设定周期上报(分钟)
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
提交
重置
@@ -113,24 +138,36 @@ import { reactive, ref } from 'vue';
const data = reactive({
frequency: {
- so2: '', // SO2采样频率
- metal: '', // 金属腐蚀采样频率
- th: '', // 温湿度 采样频率
- salt: '', // 盐雾 采样频率
+ so2: 0, // SO2采样频率
+ metal: 0, // 金属腐蚀采样频率
+ th: 0, // 温湿度 采样频率
+ salt: 0, // 盐雾 采样频率
}, // 采样频率
- count: '', // 采集个数
- time: '', // 设置时间
- batteryLow: '', // 电池电压低阈值
- batteryHigh: '', // 电池电压高阈值
- sunHigh: '', // 太阳能电压高阈值
- humidityHigh: '', // 湿度高阈值
- temperatureLow: '', // 温度低阈值
- temperatureHigh: '', // 温度高阈值
- securityMode: '', // 安全模式
+ count: 0, // 采集个数
+ time: new Date(), // 设置时间
+ batteryLow: 0, // 电池电压低阈值
+ batteryHigh: 0, // 电池电压高阈值
+ sunHigh: 0, // 太阳能电压高阈值
+ humidityHigh: 0, // 湿度高阈值
+ temperatureLow: 0, // 温度低阈值
+ temperatureHigh: 0, // 温度高阈值
+ securityMode: 0, // 安全模式 0->不加密 1->加密
corrosiveType: '', // 金属腐蚀类型
- reportType: '', // 上报周期类型 0->时间点 1->周期
+ report: {
+ type: 0, // 上报周期类型 0->时间点 1->周期
+ timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点
+ cycle: 0, // 上报周期分钟数
+ },
});
+// 金属腐蚀的类型
+const types = ref([
+ { value: 0, type: '金属腐蚀通道 1 类型' },
+ { value: 1, type: '金属腐蚀通道 2 类型' },
+ { value: 2, type: '金属腐蚀通道 3 类型' },
+ { value: 3, type: '金属腐蚀通道 4 类型' },
+]);
+
const functionForm = ref(null); // form
// 提交表单
diff --git a/src/views/network-config.vue b/src/views/network-config.vue
index b002e82..0835140 100644
--- a/src/views/network-config.vue
+++ b/src/views/network-config.vue
@@ -72,7 +72,7 @@
-
+
提交
重置