feat: function config & device create ui

.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',
+      },
+    ],
   },
 };

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, // 上报周期分钟数
+  },
+};

mock/network-config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  ip1: '',
+  port1: '',
+  ip2: '',
+  port2: '',
+  ip3: '',
+  port3: '',
+  ipBackup: '', // 备用ip
+  portBackup: '', // 备用端口号
+  account: '', // 账号
+  password: '', // 密码
+  apn: '', // apn
+};

src/App.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { ref } from 'vue';
 import Navbar from 'components/navbar.vue';
+import zhCn from 'element-plus/lib/locale/lang/zh-cn';
 
-const local = ref({ name: 'zh-cn' });
+const local = zhCn;
 </script>
 
 <template>

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');

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',

src/views/device-create.vue

@@ -0,0 +1,175 @@
+<template>
+  <el-form label-position="top" :model="data" ref="networkForm">
+    <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>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+
+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 networkForm = ref(null); // form
+
+// 提交表单
+const onSubmit = () => {
+  networkForm.value.validate(valid => {
+    console.log(valid, { ...data });
+  });
+};
+
+// 重置表单
+const onReset = () => {
+  networkForm.value.resetFields();
+};
+</script>

src/views/function-config.vue

@@ -3,12 +3,12 @@
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设置金属腐蚀采样频率(分钟)" prop="frequency.metal">
-          <el-input v-model="data.frequency.metal"></el-input>
+          <el-input-number :min="0" v-model="data.frequency.metal" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="设置温湿度采样频率(分钟)" prop="frequency.th">
-          <el-input v-model="data.frequency.th"></el-input>
+          <el-input-number :min="0" v-model="data.frequency.th" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -16,12 +16,12 @@
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设置SO2采样频率(分钟)" prop="frequency.so2">
-          <el-input v-model="data.frequency.so2"></el-input>
+          <el-input-number :min="0" v-model="data.frequency.so2" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="设置盐雾采样频率(分钟)" prop="frequency.salt">
-          <el-input v-model="data.frequency.salt"></el-input>
+          <el-input-number :min="0" v-model="data.frequency.salt" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -29,12 +29,13 @@
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设置时间" prop="time">
-          <el-input v-model="data.time"></el-input>
+          <!-- <el-input v-model="data.time"></el-input> -->
+          <el-date-picker v-model="data.time" type="datetime" placeholder="设置时间"> </el-date-picker>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="设置金属腐蚀采集个数" prop="count">
-          <el-input v-model="data.count"></el-input>
+          <el-input-number :min="0" v-model="data.count" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -42,12 +43,12 @@
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设置电池电压低阈值" prop="batteryLow">
-          <el-input v-model="data.batteryLow"></el-input>
+          <el-input-number :min="0" v-model="data.batteryLow" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="设置电池电压高阈值" prop="batteryHigh">
-          <el-input v-model="data.batteryHigh"></el-input>
+          <el-input-number :min="0" v-model="data.batteryHigh" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -55,12 +56,12 @@
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设置太阳能电压高阈值" prop="sunHigh">
-          <el-input v-model="data.sunHigh"></el-input>
+          <el-input-number :min="0" v-model="data.sunHigh" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="设置湿度高阈值" prop="humidityHigh">
-          <el-input v-model="data.humidityHigh"></el-input>
+          <el-input-number :min="0" v-model="data.humidityHigh" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -68,12 +69,12 @@
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设置温度低阈值" prop="temperatureLow">
-          <el-input v-model="data.temperatureLow"></el-input>
+          <el-input-number :min="0" v-model="data.temperatureLow" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="设置温度高阈值" prop="temperatureHigh">
-          <el-input v-model="data.temperatureHigh"></el-input>
+          <el-input-number :min="0" v-model="data.temperatureHigh" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -81,25 +82,49 @@
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设置安全模式" prop="securityMode">
-          <el-input v-model="data.securityMode"></el-input>
+          <!-- <el-input v-model="data.securityMode"></el-input> -->
+          <el-radio v-model="data.securityMode" :label="0">不加密</el-radio>
+          <el-radio v-model="data.securityMode" :label="1">加密</el-radio>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="设置金属腐蚀类型" prop="corrosiveType">
-          <el-input v-model="data.corrosiveType"></el-input>
+          <!-- <el-input v-model="data.corrosiveType"></el-input> -->
+          <el-select v-model="data.corrosiveType" placeholder="选择金属腐蚀类型">
+            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
+          </el-select>
         </el-form-item>
       </el-col>
     </el-row>
 
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="设置上报时间" prop="reportType">
-          <el-input v-model="data.reportType"></el-input>
+        <el-form-item label="设置上报时间" prop="report.type" style="margin-bottom: 0 !important">
+          <el-radio-group v-model="data.report.type">
+            <el-radio :label="0">按设定时间点上报</el-radio>
+            <el-radio :label="1">按设定周期上报(分钟)</el-radio>
+          </el-radio-group>
         </el-form-item>
       </el-col>
     </el-row>
 
-    <el-row :gutter="20">
+    <el-row :gutter="20" v-if="data.report.type === 0">
+      <el-col :lg="6" :xl="4" :md="8" :sm="12" v-for="(item, index) in data.report.timePoints" :key="index">
+        <el-form-item prop="report.timePoints" style="margin-bottom: 10px !important">
+          <el-time-picker format="HH:mm" v-model="data.report.timePoints[index]" :placeholder="`上报时间点${index + 1}`"></el-time-picker>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" v-else>
+      <el-col :span="12">
+        <el-form-item prop="report.cycle">
+          <el-input-number :min="0" v-model="data.report.cycle" />
+        </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>
@@ -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
 
 // 提交表单

src/views/network-config.vue

@@ -72,7 +72,7 @@
       </el-col>
     </el-row>
 
-    <el-row :gutter="20">
+    <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>