<script setup lang="ts">
|
import {onMounted, reactive, ref, toRaw} from "vue";
|
import {useRouter} from "vue-router";
|
import {ipcApiRoute} from '@/api';
|
import {ipc} from '@/utils/ipcRenderer';
|
import {showConfirmDialog} from "vant";
|
|
const router = useRouter();
|
|
interface config {
|
id: number;
|
name: string;
|
code: string;
|
config_data: string;
|
}
|
|
const showSubmitDialog = ref(false);
|
const showResetDialog = ref(false);
|
|
// 安全参数（必须读取旧参数成功才允许更新）
|
|
const systemConfig = reactive<config>({
|
id: 1000,
|
name: '系统配置',
|
code: 'system',
|
config_data: '{}',
|
});
|
|
const defaultData = {
|
ip: "127.0.0.1",
|
port: "8888",
|
|
autoStartup: null, // 开机启动
|
debugging: null, // 调试模式
|
startupDelay: 1, // 启动延时
|
|
updateTime: 2, // 更新粮种
|
checkTime: 60, // 检测
|
autoSave: true, // 检测
|
prefixes: 'ss', // 检测
|
|
heartbeatIp: '192.168.0.200',
|
heartbeatPort: '8868',
|
|
serial: 'COM1',
|
baud: 115200,
|
ver1: 'N',
|
ver2: '8',
|
ver3: '1',
|
|
psd: '123',
|
}
|
|
const configData = reactive<any>({ ...defaultData});
|
|
const goBack = () => {
|
router.back(); // 或者使用 router.go(-1);
|
};
|
|
const dirPath = ref("D:/file/file");
|
|
const showPopover = ref(false);
|
|
const actions = [{text: "COM1"}, {text: "COM2"}, {text: "COM3"}];
|
|
// 选择com口
|
function onSelect(action) {
|
configData.serial.value = action.text;
|
}
|
|
|
const handleBlur = (fieldName, event, value) => {
|
const configData = JSON.parse(systemConfig.config_data);
|
configData[fieldName] = value;
|
systemConfig.config_data = JSON.stringify(configData);
|
// console.log(`字段 ${fieldName} 失去焦点，值为:`, value)
|
|
};
|
const handleCheckboxChange = (fieldName, value) => {
|
const configData = JSON.parse(systemConfig.config_data);
|
configData[fieldName] = value;
|
systemConfig.config_data = JSON.stringify(configData);
|
// console.log(`字段 ${fieldName} 失去焦点，值为:`, value)
|
|
|
};
|
|
onMounted(() => {
|
initData();
|
});
|
|
// 系统配置
|
const SYSTEM_CONFIG = 1000;
|
|
function initData() {
|
ipc.invoke(ipcApiRoute.config.queryConfig, SYSTEM_CONFIG).then((res: config) => {
|
if (res) {
|
Object.assign(systemConfig, res);
|
|
Object.assign(configData, JSON.parse(systemConfig.config_data));
|
}
|
})
|
}
|
|
|
function handleUpdateConfig(info: any) {
|
ipc.invoke(ipcApiRoute.config.setConfig, info).then((res: number) => {
|
initData()
|
})
|
}
|
|
function handleSubmitClick(){
|
const info = toRaw(systemConfig);
|
handleUpdateConfig(info)
|
}
|
|
//重置参数
|
function handleResetClick(){
|
systemConfig.config_data = JSON.stringify(defaultData);
|
Object.assign(configData, JSON.parse(systemConfig.config_data));
|
const info = toRaw(systemConfig);
|
handleUpdateConfig(info)
|
}
|
|
function handleSubmitDialog(){
|
showSubmitDialog.value = true;
|
}
|
function handleResetDialog(){
|
showResetDialog.value = true;
|
}
|
|
</script>
|
|
<template>
|
<div class="app">
|
<div class="content-box">
|
<div class="content-left">
|
<div class="w-full h-[50px] flex items-center px-4">
|
<div class="w-[6px] h-[20px] bg-[var(--base-green)] rounded-md"/>
|
<span class="ml-2 text-lg font-bold">服务端参数</span>
|
</div>
|
<div class="flex pl-[32px] pb-3">
|
<van-field
|
@blur="(e) => handleBlur('ip', e, configData.ip)"
|
v-model="configData.ip"
|
label="IP地址"
|
:border="false"
|
class="ip-write-field field-lab-60px"
|
/>
|
<van-field :border="false" v-model="configData.port" @blur="(e) => handleBlur('port', e, configData.port)"
|
class="ml-1 port-write-field"/>
|
</div>
|
<van-divider/>
|
<div class="w-full h-[50px] flex items-center px-4">
|
<div class="w-[6px] h-[20px] bg-[var(--base-green)] rounded-md"/>
|
<span class="ml-2 text-lg font-bold">系统选项</span>
|
</div>
|
<div class="pl-[32px] items-center">
|
<div class="flex pl-1">
|
<van-checkbox shape="square" v-model="configData.autoStartup"
|
@change="(checked) => handleCheckboxChange('autoStartup', checked)">开机自动启动(A)
|
</van-checkbox>
|
|
<van-checkbox class="ml-24" shape="square" v-model="configData.debugging"
|
@change="(checked) => handleCheckboxChange('debugging', checked)">调试(D)
|
</van-checkbox>
|
|
</div>
|
<div class="flex items-center">
|
<van-field
|
:border="false"
|
v-model="configData.startupDelay"
|
@blur="(e) => handleBlur('startupDelay', e, configData.startupDelay)"
|
label="开机启动延时"
|
class="port-write-field field-lab-120px"
|
/>
|
<span class="ml-2">s</span>
|
</div>
|
</div>
|
|
<van-divider/>
|
<div class="w-full h-[50px] flex items-center px-4">
|
<div class="w-[6px] h-[20px] bg-[var(--base-green)] rounded-md"/>
|
<span class="ml-2 text-lg font-bold">检测参数</span>
|
</div>
|
<div class="pl-[32px] items-center">
|
<div class="flex items-center">
|
<div class="flex items-center">
|
<van-field
|
:border="false"
|
v-model="configData.updateTime"
|
@blur="(e) => handleBlur('updateTime', e, configData.updateTime)"
|
label="更新粮种"
|
class="port-write-field field-lab-80px"
|
/>
|
<span class="ml-2">s</span>
|
</div>
|
<div class="flex items-center ml-16">
|
<van-field
|
:border="false"
|
v-model="configData.checkTime"
|
@blur="(e) => handleBlur('checkTime', e, configData.checkTime)"
|
label="检测"
|
class="port-write-field field-lab-80px"
|
/>
|
<span class="ml-2">s</span>
|
</div>
|
</div>
|
|
<div class="flex pl-1 items-center">
|
<van-checkbox shape="square" v-model="configData.autoSave"
|
@change="(checked) => handleCheckboxChange('autoSave', checked)">自动保存样本
|
</van-checkbox>
|
|
|
<div class="flex items-center ml-[105px]">
|
<van-field
|
:border="false"
|
v-model="configData.prefixes"
|
@blur="(e) => handleBlur('prefixes', e, configData.prefixes)"
|
label="前缀"
|
class="port-write-field field-lab-80px"
|
/>
|
<div class="ml-2 h-[40px]">
|
<!-- <van-button size="small" icon="logistics"/>-->
|
</div>
|
</div>
|
</div>
|
<div class="flex pb-3 items-center">
|
<van-field
|
v-model="dirPath"
|
label="目录"
|
:border="false"
|
class="dir-write-field field-lab-40px"
|
/>
|
<div class="ml-2 h-[40px]">
|
<van-button size="small" icon="logistics"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="content-right">
|
<div class="w-full h-[50px] flex items-center px-4">
|
<div class="w-[6px] h-[20px] bg-[var(--base-green)] rounded-md"/>
|
<span class="ml-2 text-lg font-bold">心跳参数</span>
|
</div>
|
<div class="flex pl-[32px] pb-3">
|
<van-field
|
label="心跳IP"
|
@blur="(e) => handleBlur('heartbeatIp', e, configData.heartbeatIp)"
|
v-model="configData.heartbeatIp"
|
:border="false"
|
class="ip-write-field field-lab-100px"
|
/>
|
<van-field :border="false" @blur="(e) => handleBlur('heartbeatPort', e, configData.heartbeatPort)"
|
v-model="configData.heartbeatPort" class="ml-1 port-write-field"/>
|
</div>
|
<van-divider/>
|
|
<div class="w-full h-[50px] flex items-center px-4">
|
<div class="w-[6px] h-[20px] bg-[var(--base-green)] rounded-md"/>
|
<span class="ml-2 text-lg font-bold">水分仪参数</span>
|
</div>
|
|
<div class="pl-[32px]">
|
<van-popover
|
v-model:show="showPopover"
|
:actions="actions"
|
@select="onSelect"
|
>
|
<template #reference>
|
<div class="flex items-center">
|
<span>串口</span>
|
<div
|
class="w-[160px] h-[40px] ml-[63px] bg-green rounded-lg flex justify-around items-center text-white"
|
>
|
<span>{{ configData.serial }}</span>
|
<van-icon class="ml-2" name="arrow"/>
|
</div>
|
</div>
|
</template>
|
</van-popover>
|
</div>
|
|
<div class="flex pl-[32px] mt-2">
|
<van-field
|
readonly
|
v-model="configData.baud"
|
label="波特率"
|
:border="false"
|
class="bt-read-field field-lab-100px"
|
/>
|
</div>
|
<div class="flex pl-[32px] mt-2">
|
<van-field
|
v-model="configData.ver1"
|
label="校验位"
|
:border="false"
|
class="param-read-field field-lab-100px"
|
readonly
|
/>
|
<van-field :border="false" v-model="configData.ver2" class="ml-1 param-read-field" readonly/>
|
<van-field :border="false" v-model="configData.ver3" class="ml-1 param-read-field" readonly/>
|
</div>
|
<van-divider/>
|
<div class="w-full h-[50px] flex items-center px-4">
|
<div class="w-[6px] h-[20px] bg-[var(--base-green)] rounded-md"/>
|
<span class="ml-2 text-lg font-bold">登录参数</span>
|
</div>
|
<div class="flex pl-[32px] pb-3">
|
<van-field
|
@blur="(e) => handleBlur('psd', e, configData.psd)"
|
v-model="configData.psd"
|
label="登录口令"
|
:border="false"
|
type="password"
|
class="psd-write-field field-lab-100px"
|
/>
|
</div>
|
</div>
|
</div>
|
|
<div class="flex justify-center">
|
<div class="w-[60%] flex justify-evenly">
|
<div class="w-[120px]">
|
<van-button icon="records-o" size="large" color="var(--base-green)"
|
@click.stop="handleSubmitDialog"
|
>保存信息
|
</van-button
|
>
|
</div>
|
|
<div class="w-[120px]">
|
<van-button icon="replay" size="large" color="var(--base-green)"
|
@click.stop="handleResetDialog"
|
>系统复位
|
</van-button
|
>
|
</div>
|
</div>
|
</div>
|
|
<van-dialog v-model:show="showSubmitDialog" @confirm="handleSubmitClick" title="提示" show-cancel-button>
|
<div class="w-full h-[50px] flex justify-center items-center">
|
<span class="text-sm text-gray-500">确认保存配置？</span>
|
</div>
|
</van-dialog>
|
|
<van-dialog v-model:show="showResetDialog" @confirm="handleResetClick" title="提示" show-cancel-button>
|
<div class="w-full h-[50px] flex justify-center items-center">
|
<span class="text-sm text-gray-500">确认恢复配置到出厂设置？</span>
|
</div>
|
</van-dialog>
|
|
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.app {
|
.title-box {
|
height: 60px;
|
align-items: center;
|
background: white;
|
margin: 10px 10px 0 10px;
|
border-radius: 10px;
|
overflow: hidden;
|
}
|
|
.content-box {
|
display: flex;
|
font-size: 18px;
|
|
.content-left {
|
flex: 1;
|
background: white;
|
margin: 10px;
|
border-radius: 10px;
|
}
|
|
.content-right {
|
flex: 1;
|
background: white;
|
margin: 10px 10px 10px 0;
|
border-radius: 10px;
|
}
|
}
|
}
|
|
.bg-green {
|
background: var(--base-green);
|
}
|
|
:deep(.van-nav-bar__text) {
|
font-size: 20px;
|
}
|
|
.ip-write-field {
|
:deep(.van-field__control) {
|
width: 120px;
|
background: var(--base-green);
|
color: white;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
font-size: 18px;
|
}
|
}
|
|
.param-write-field {
|
:deep(.van-field__control) {
|
width: 160px;
|
background: var(--base-green);
|
color: white;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
font-size: 18px;
|
}
|
}
|
|
.psd-write-field {
|
:deep(.van-field__control) {
|
width: 180px;
|
background: var(--base-green);
|
color: white;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
font-size: 18px;
|
}
|
}
|
|
.bt-read-field {
|
:deep(.van-field__control) {
|
width: 160px;
|
background: #e5e5e5;
|
color: black;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
font-size: 18px;
|
}
|
}
|
|
.param-read-field {
|
:deep(.van-field__control) {
|
width: 50px;
|
background: #e5e5e5;
|
color: black;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
font-size: 18px;
|
}
|
}
|
|
.port-write-field {
|
:deep(.van-field__control) {
|
width: 80px;
|
background: var(--base-green);
|
color: white;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
font-size: 18px;
|
}
|
}
|
|
.dir-write-field {
|
:deep(.van-field__control) {
|
width: 365px;
|
background: var(--base-green);
|
color: white;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
font-size: 18px;
|
}
|
}
|
|
:deep(.van-cell) {
|
width: auto;
|
padding: 0;
|
}
|
|
// 定义宽度列表
|
@widths: 40, 60, 70, 80, 90, 100, 120, 200;
|
|
// 循环生成类
|
.generate-width-classes(@i: 1) when (@i <= length(@widths)) {
|
@width: extract(@widths, @i);
|
|
.field-lab-@{width}px {
|
:deep(.van-field__label) {
|
display: flex;
|
justify-content: left;
|
align-items: center;
|
width: ~"@{width}px";
|
margin-right: 0;
|
padding-right: 0;
|
font-size: 18px;
|
}
|
}
|
|
.generate-width-classes(@i + 1);
|
}
|
|
.generate-width-classes(); // 执行循环
|
</style>
|
