feat: netword funciton config user interface

.eslintrc.js

@@ -9,5 +9,9 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['vue'],
-  rules: {},
+  rules: {
+    'import/no-unresolved': 0,
+    'import/extensions': 0,
+    'no-console': 0,
+  },
 };

src/App.vue

@@ -1,10 +1,15 @@
 <script setup>
+import { ref } from 'vue';
 import Navbar from 'components/navbar.vue';
+
+const local = ref({ name: 'zh-cn' });
 </script>
 
 <template>
+  <el-config-provider :locale="local">
     <Navbar />
     <div class="p-4">
       <router-view></router-view>
     </div>
+  </el-config-provider>
 </template>

src/routers/index.js

@@ -1,14 +1,31 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router';
 // 还有 createWebHashHistory 和 createMemoryHistory
 
-const routes = [
+export const routes = [
-  { path: '/', redirect: '/network-config'},
+  { path: '/', redirect: '/test' },
-  { path: '/network-config', name: 'network-config', meta: { title: '网络参数配置' }, component: () => import('@/views/network-config.vue')}
+  {
+    path: '/network-config',
+    name: 'network-config',
+    meta: { title: '网络参数配置' },
+    component: () => import('@/views/network-config.vue'),
+  },
+  {
+    path: '/function-config',
+    name: 'function-config',
+    meta: { title: '功能参数配置' },
+    component: () => import('@/views/function-config.vue'),
+  },
+  {
+    path: '/test',
+    name: 'test',
+    meta: { title: '测试' },
+    component: () => import('@/views/test.vue'),
+  },
 ];
 
 const router = createRouter({
   history: createWebHistory(),
   routes,
-})
+});
 
-export default router
+export default router;

src/views/function-config.vue

@@ -0,0 +1,147 @@
+<template>
+  <el-form label-position="top" :model="data" ref="functionForm">
+    <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-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-form-item>
+      </el-col>
+    </el-row>
+
+    <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-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-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="设置时间" prop="time">
+          <el-input v-model="data.time"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设置金属腐蚀采集个数" prop="count">
+          <el-input v-model="data.count"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="设置电池电压低阈值" prop="batteryLow">
+          <el-input v-model="data.batteryLow"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设置电池电压高阈值" prop="batteryHigh">
+          <el-input v-model="data.batteryHigh"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="设置太阳能电压高阈值" prop="sunHigh">
+          <el-input v-model="data.sunHigh"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设置湿度高阈值" prop="humidityHigh">
+          <el-input v-model="data.humidityHigh"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="设置温度低阈值" prop="temperatureLow">
+          <el-input v-model="data.temperatureLow"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设置温度高阈值" prop="temperatureHigh">
+          <el-input v-model="data.temperatureHigh"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="设置安全模式" prop="securityMode">
+          <el-input v-model="data.securityMode"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设置金属腐蚀类型" prop="corrosiveType">
+          <el-input v-model="data.corrosiveType"></el-input>
+        </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>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <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({
+  frequency: {
+    so2: '', // SO2采样频率
+    metal: '', // 金属腐蚀采样频率
+    th: '', // 温湿度 采样频率
+    salt: '', // 盐雾 采样频率
+  }, // 采样频率
+  count: '', // 采集个数
+  time: '', // 设置时间
+  batteryLow: '', // 电池电压低阈值
+  batteryHigh: '', // 电池电压高阈值
+  sunHigh: '', // 太阳能电压高阈值
+  humidityHigh: '', // 湿度高阈值
+  temperatureLow: '', // 温度低阈值
+  temperatureHigh: '', // 温度高阈值
+  securityMode: '', // 安全模式
+  corrosiveType: '', // 金属腐蚀类型
+  reportType: '', // 上报周期类型 0->时间点  1->周期
+});
+
+const functionForm = ref(null); // form
+
+// 提交表单
+const onSubmit = () => {
+  functionForm.value.validate(valid => {
+    console.log(valid, { ...data });
+  });
+};
+
+// 重置表单
+const onReset = () => {
+  functionForm.value.resetFields();
+};
+</script>

src/views/network-config.vue

@@ -1,8 +1,114 @@
 <template>
+  <el-form label-position="top" :model="data" ref="networkForm">
     <el-row :gutter="20">
-    <el-col :span="6"><div class="bg-gray-400">1</div></el-col>
+      <el-col :span="12">
-    <el-col :span="6"><div class="bg-gray-400">2</div></el-col>
+        <el-form-item label="上报IP1地址" prop="ip1">
-    <el-col :span="6"><div class="bg-gray-400">3</div></el-col>
+          <el-input v-model="data.ip1"></el-input>
-    <el-col :span="6"><div class="bg-gray-400">4</div></el-col>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="上报端口号1" prop="port1">
+          <el-input v-model="data.port1"></el-input>
+        </el-form-item>
+      </el-col>
     </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="上报IP2地址" prop="ip2">
+          <el-input v-model="data.ip2"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="上报端口号2" prop="port2">
+          <el-input v-model="data.port2"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="上报IP3地址" prop="ip3">
+          <el-input v-model="data.ip3"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="上报端口号3" prop="port3">
+          <el-input v-model="data.port3"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="备用ip地址" prop="ipBackup">
+          <el-input v-model="data.ipBackup"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="备用端口号" prop="portBackup">
+          <el-input v-model="data.portBackup"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="用户名" prop="account">
+          <el-input v-model="data.account"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="data.password"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="APN" prop="apn">
+          <el-input v-model="data.apn"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <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({
+  ip1: '',
+  port1: '',
+  ip2: '',
+  port2: '',
+  ip3: '',
+  port3: '',
+  ipBackup: '',
+  portBackup: '',
+  account: '',
+  password: '',
+  apn: '',
+});
+
+const networkForm = ref(null); // form
+
+// 提交表单
+const onSubmit = () => {
+  networkForm.value.validate(valid => {
+    console.log(valid, { ...data });
+  });
+};
+
+// 重置表单
+const onReset = () => {
+  networkForm.value.resetFields();
+};
+</script>

src/views/test.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-card class="box-card">
+    <template #header>
+      <div class="card-header">
+        <span>测试</span>
+      </div>
+    </template>
+    <div class="text item" v-for="item in routeList" :key="item">
+      <router-link :to="item.path">
+        <el-button type="text">{{ item.name }}</el-button>
+      </router-link>
+    </div>
+  </el-card>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { routes } from '@/routers/index.js';
+
+const routeList = ref(routes);
+</script>
+
+<style>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+</style>