<script setup lang="ts">
|
import { ref } from "vue";
|
|
const autoSave = ref(null);
|
const toggle = () => {
|
console.error(1212);
|
autoSave.value.toggle();
|
console.error(checked.value);
|
};
|
const checked = ref(false);
|
const sampleName = ref("");
|
|
const activeId = ref(1);
|
const activeIndex = ref(0);
|
|
const items = [
|
{
|
text: "南方",
|
children: [
|
{ text: "大米1", id: 1 },
|
{ text: "小麦2", id: 2 },
|
{ text: "玉米3", id: 3 },
|
{ text: "大米4", id: 4 },
|
{ text: "小麦5", id: 5 },
|
{ text: "玉米6", id: 6 },
|
{ text: "大米7", id: 7 },
|
{ text: "小麦8", id: 8 },
|
{ text: "玉米9", id: 9 },
|
{ text: "大米10", id: 10 },
|
{ text: "小麦11", id: 11 },
|
{ text: "玉米12", id: 12 }
|
]
|
},
|
{
|
text: "北方",
|
children: [
|
{ text: "大米", id: 1 },
|
{ text: "小麦", id: 2 },
|
{ text: "玉米", id: 3 }
|
]
|
},
|
{ text: "西方" }
|
];
|
</script>
|
|
<template>
|
<div class="container">
|
<div class="section-one">
|
<div class="time-box">
|
<div class="w-full h-[60px] 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-1 flex items-center">
|
<flop-time ref="floptime" />
|
</div>
|
</div>
|
|
<div class="info-box">
|
<div class="w-full h-[60px] 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>
|
<van-cell-group>
|
<van-cell>
|
<template #icon>
|
<van-icon name="desktop-o" class="mt-[6px]" size="16" />
|
</template>
|
<template #title>
|
<span class="text-lg ml-1">设备状态</span>
|
</template>
|
<template #value>
|
<span class="text-green text-lg">正常</span>
|
</template>
|
</van-cell>
|
<van-divider />
|
<van-cell>
|
<template #icon>
|
<van-icon name="cluster-o" class="mt-[6px]" size="16" />
|
</template>
|
<template #title>
|
<span class="text-lg ml-1">网络连接</span>
|
</template>
|
<template #value>
|
<span class="text-green text-lg">正常</span>
|
</template>
|
</van-cell>
|
<van-divider />
|
<van-cell title="单元格">
|
<template #icon>
|
<van-icon name="hotel-o" class="mt-[6px]" size="16" />
|
</template>
|
<template #title>
|
<span class="text-lg font-thin ml-1">PLC</span>
|
<span class="text-lg">连接</span>
|
</template>
|
<template #value>
|
<span class="text-green text-lg">正常</span>
|
</template>
|
</van-cell>
|
</van-cell-group>
|
</div>
|
</div>
|
<div class="section-two mx-[10px]">
|
<div class="w-full h-[60px] 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>
|
<van-cell-group>
|
<van-cell>
|
<template #icon>
|
<van-icon name="brush-o" class="mt-[6px]" size="16" />
|
</template>
|
<template #title>
|
<span class="text-lg ml-1">含水率</span>
|
</template>
|
<template #value>
|
<div class="flex justify-end">
|
<van-loading size="18" class="text-blue" />
|
<span class="text-blue-500 text-lg ml-1">检测中</span>
|
</div>
|
</template>
|
</van-cell>
|
<van-divider />
|
<van-cell>
|
<template #icon>
|
<van-icon name="fire-o" class="mt-[6px]" size="16" />
|
</template>
|
<template #title>
|
<span class="text-lg ml-1">温度</span>
|
</template>
|
<template #value>
|
<span class="text-green text-lg">25</span>
|
<span class="ml-1 text-black">℃</span>
|
</template>
|
</van-cell>
|
<van-divider />
|
<van-cell>
|
<template #icon>
|
<van-icon name="shop-o" class="mt-[6px]" size="16" />
|
</template>
|
<template #title>
|
<span class="text-lg ml-1">湿度</span>
|
</template>
|
<template #value>
|
<span class="text-green text-lg">45</span>
|
<span class="ml-1 text-black">%</span>
|
</template>
|
</van-cell>
|
<van-cell class="mt-5" clickable @click="toggle()">
|
<template #icon>
|
<van-icon name="setting-o" class="mt-[6px]" size="16" />
|
</template>
|
<template #title>
|
<span class="text-lg ml-1">自动保存样本(s)</span>
|
</template>
|
<template #right-icon>
|
<van-checkbox
|
:ref="el => (autoSave = el)"
|
v-model="checked"
|
shape="square"
|
/>
|
</template>
|
</van-cell>
|
<van-divider />
|
<van-cell>
|
<template #icon>
|
<van-icon name="edit" class="mt-[6px]" size="17" />
|
</template>
|
<template #title>
|
<span class="text-lg ml-1">样本名称</span>
|
</template>
|
<template #value>
|
<van-field
|
v-model="sampleName"
|
placeholder="请输入样本名称"
|
input-align="right"
|
/>
|
</template>
|
</van-cell>
|
</van-cell-group>
|
<div class="w-full flex justify-center pt-2">
|
<van-button icon="plus" type="primary" class="w-[140px]" color="var(--base-green)"
|
>检测</van-button
|
>
|
</div>
|
</div>
|
<div class="section-three">
|
<div class="w-full h-[60px] 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>
|
<van-divider />
|
<van-tree-select
|
v-model:active-id="activeId"
|
v-model:main-active-index="activeIndex"
|
:items="items"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.container {
|
width: 100vw;
|
height: 433px;
|
display: flex;
|
margin: 0 10px 10px 10px;
|
overflow: hidden;
|
user-select: none;
|
|
.section-one,
|
.section-two,
|
.section-three {
|
flex: 1;
|
border-radius: 10px;
|
overflow: hidden;
|
}
|
.section-one {
|
display: flex;
|
flex-direction: column;
|
|
.time-box {
|
flex: 1;
|
background: white;
|
border-radius: 10px;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.info-box {
|
flex: 1;
|
background: white;
|
margin-top: 10px;
|
border-radius: 10px;
|
overflow: hidden;
|
}
|
}
|
.section-two {
|
border-radius: 10px;
|
overflow: hidden;
|
background: white;
|
}
|
|
.section-three{
|
background: white;
|
}
|
}
|
|
.bg-green {
|
background: var(--base-green);
|
}
|
.text-green {
|
color: var(--base-green);
|
}
|
.text-blue {
|
color: oklch(62.3% 0.214 259.815);
|
}
|
|
:deep(.van-sidebar-item--select:before) {
|
background: var(--base-green);
|
}
|
:deep(.van-tree-select) {
|
height: 380px !important;
|
}
|
:deep(.van-sidebar-item__text) {
|
font-size: 16px;
|
}
|
</style>
|
