ccsens_tall
/
tall4-pc
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: netword funciton config user interface

master
wally 4 years ago
parent
41e5e1db4b
commit
62afba6fc3
6 changed files with 333 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      .eslintrc.js
  2. 13
      src/App.vue
  3. 29
      src/routers/index.js
  4. 147
      src/views/function-config.vue
  5. 118
      src/views/network-config.vue
  6. 37
      src/views/test.vue

6
.eslintrc.js
View File

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

13
src/App.vue
View File

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

29
src/routers/index.js
View File

@ -1,14 +1,31 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router';
// 还有 createWebHashHistory 和 createMemoryHistory // 还有 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({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes, routes,
}) });
export default router export default router;

147
src/views/function-config.vue
View File

@ -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>

118
src/views/network-config.vue
View File

@ -1,8 +1,114 @@
<template> <template>
<el-row :gutter="20"> <el-form label-position="top" :model="data" ref="networkForm">
<el-col :span="6"><div class="bg-gray-400">1</div></el-col> <el-row :gutter="20">
<el-col :span="6"><div class="bg-gray-400">2</div></el-col> <el-col :span="12">
<el-col :span="6"><div class="bg-gray-400">3</div></el-col> <el-form-item label="上报IP1地址" prop="ip1">
<el-col :span="6"><div class="bg-gray-400">4</div></el-col> <el-input v-model="data.ip1"></el-input>
</el-row> </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> </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>

37
src/views/test.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save