<script setup lang="ts">
|
import {onMounted, reactive, ref} from "vue";
|
import {ipcApiRoute} from '@/api';
|
import {ipc} from '@/utils/ipcRenderer';
|
|
const value1 = ref("100");
|
const activeId = ref(null);
|
const activeIndex = ref(0);
|
|
|
const grainList = reactive(
|
[
|
{
|
id: 1,
|
text: "粮食",
|
children: [
|
// { text: "大米1", id: 1 },
|
// { text: "小麦2", id: 2 },
|
// { text: "玉米3", id: 3 }
|
]
|
}
|
]
|
)
|
onMounted(() => {
|
initData()
|
})
|
// 后端接口操作
|
function initData() {
|
// 数据库中查询基础粮食数据（此部分数据无法修改、删除）
|
ipc.invoke(ipcApiRoute.grain.queryGrainAll).then((res: any) => {
|
if (res && Array.isArray(res)) {
|
// 使用响应式方法修改数组
|
grainList[0].children.splice(0, grainList[0].children.length, ...res.map(item => ({
|
text: item.name,
|
id: item.id,
|
code: item.code,
|
no: item.no,
|
flag:item.flag
|
})));
|
activeId.value = res[0].id;
|
}
|
})
|
}
|
</script>
|
|
<template>
|
<div class="app">
|
<div class="statu-box">
|
<div class="h-full flex items-center">
|
<span class="text-2xl font-bold">计时器</span>
|
<div class="ml-2">
|
<flop-time-mini/>
|
</div>
|
</div>
|
|
<div class="text-2xl">
|
<span>设备状态</span>
|
<span class="ml-2 text-green-500">正常</span>
|
</div>
|
</div>
|
<van-divider/>
|
<div class="content-box">
|
<div class="content-info">
|
<div class="check-box">
|
<div class="test-box">
|
<div class="flex justify-center items-center">测试值(mV)</div>
|
<div>
|
<div>
|
<p>低含水率</p>
|
<p>校准点</p>
|
</div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
<div>
|
<van-button icon="search" type="primary" class="w-[100px]"
|
>检测1
|
</van-button
|
>
|
</div>
|
</div>
|
<div>
|
<div>
|
<p>低含水率</p>
|
<p>校准点</p>
|
</div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
<div>
|
<van-button icon="search" type="primary" class="w-[100px]"
|
>检测1
|
</van-button
|
>
|
</div>
|
</div>
|
<div>
|
<div>
|
<p>低含水率</p>
|
<p>校准点</p>
|
</div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
<div>
|
<van-button icon="search" type="primary" class="w-[100px]"
|
>检测1
|
</van-button
|
>
|
</div>
|
</div>
|
<div>
|
<div>
|
<p>低含水率</p>
|
<p>校准点</p>
|
</div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
<div>
|
<van-button icon="search" type="primary" class="w-[100px]"
|
>检测1
|
</van-button
|
>
|
</div>
|
</div>
|
</div>
|
<div class="water-box">
|
<div class="flex justify-center items-center">实际水分值(%)</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px] write-field"/>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px] write-field"/>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px] write-field"/>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px] write-field"/>
|
</div>
|
</div>
|
</div>
|
<div class="auto-box">
|
<div class="flex justify-center items-center">自动校准系数</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
</div>
|
</div>
|
<div class="manual-box">
|
<div class="flex justify-center items-center">手动校准系数</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px] write-field"/>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px] write-field"/>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px] write-field"/>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px] write-field"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="seeds-box">
|
<van-tree-select
|
v-model:active-id="activeId"
|
v-model:main-active-index="activeIndex"
|
:items="grainList"
|
/>
|
<div class="w-[100px]">
|
<van-button icon="exchange" color="var(--base-green)"
|
>切换
|
</van-button
|
>
|
</div>
|
</div>
|
</div>
|
<div class="content-submit">
|
<van-button type="primary" icon="clock-o" color="var(--base-green)">计算</van-button>
|
<div class="w-[60px]"/>
|
<van-button type="primary" icon="records-o" color="var(--base-green)">保存</van-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.app {
|
width: 100vw;
|
height: 548px;
|
|
.statu-box {
|
height: 68px;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 10px;
|
box-sizing: border-box;
|
align-items: center;
|
border-radius: 10px;
|
background: white;
|
margin: 10px 10px 0 10px;
|
}
|
|
.content-box {
|
width: 100vw;
|
|
.content-info {
|
height: 400px;
|
display: flex;
|
|
|
.check-box {
|
font-size: 18px;
|
flex: 1;
|
margin: 10px;
|
background: white;
|
border-radius: 10px;
|
|
.test-box {
|
height: 180px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
div {
|
flex: 1;
|
}
|
}
|
|
.water-box,
|
.auto-box,
|
.manual-box {
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
div {
|
flex: 1;
|
}
|
}
|
}
|
|
.seeds-box {
|
width: 300px;
|
margin: 10px 10px 10px 0;
|
background: white;
|
border-radius: 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 10px;
|
}
|
}
|
|
.content-submit {
|
height: 80px;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
}
|
|
:deep(.van-cell) {
|
padding: 0;
|
}
|
|
:deep(.van-field__control) {
|
width: 100px;
|
background: #e5e5e5;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
}
|
|
.write-field {
|
:deep(.van-field__control) {
|
width: 100px;
|
background: var(--base-green);
|
color: white;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
}
|
}
|
</style>
|
