<script setup lang="ts">
|
import { ref, computed } from "vue";
|
import { useRouter } from "vue-router";
|
|
const router = useRouter();
|
|
const goBack = () => {
|
router.back(); // 或者使用 router.go(-1);
|
};
|
const value1 = ref("100");
|
|
|
const stepvalue1 = ref(1024);
|
const stepvalue2 = ref(2);
|
</script>
|
|
<template>
|
<div class="app">
|
<div class="title-box">
|
<van-nav-bar
|
title="重量校准"
|
left-text="返回"
|
left-arrow
|
right-text="设备状态-[正常]"
|
@click-left="goBack"
|
/>
|
</div>
|
|
<van-divider />
|
<div class="content-box">
|
<div class="content-info">
|
<div class="check-box">
|
<div class="statu-box">
|
<div class="label-box">校准说明</div>
|
<div class="info-box">
|
<div>校准公式,丫=0.0000X- 0.0000,误差士2.0000！</div>
|
</div>
|
</div>
|
<div class="name-box">
|
<div class="flex justify-center items-center" />
|
<div>
|
<div>
|
<p>第一组称重</p>
|
<p>校准点</p>
|
</div>
|
</div>
|
<div>
|
<div>
|
<p>第二组称重</p>
|
<p>校准点</p>
|
</div>
|
</div>
|
<div>
|
<div>
|
<p>第三组称重</p>
|
<p>校准点</p>
|
</div>
|
</div>
|
</div>
|
<div class="test-box">
|
<div class="flex justify-center items-center">测试值(g)</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="water-box">
|
<div class="flex justify-center items-center">实际重量(g)</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="write-field" />
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="write-field" />
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="write-field" />
|
</div>
|
</div>
|
</div>
|
|
<div class="adjust-box">
|
<div class="flex justify-center items-center"></div>
|
<div>
|
<div>
|
<van-button icon="search" type="primary" class="w-[100px]"
|
>检测1</van-button
|
>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-button icon="search" type="primary" class="w-[100px]"
|
>检测1</van-button
|
>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-button icon="search" type="primary" class="w-[100px]"
|
>检测1</van-button
|
>
|
</div>
|
</div>
|
</div>
|
<div class="t-box">
|
<div class="t-label flex justify-center items-center">校准后测试(g)</div>
|
<div class="t-input">
|
<div>
|
<van-field v-model="value1" class="custom-write-field" />
|
</div>
|
</div>
|
|
<div class="t-btn">
|
<div>
|
<van-button
|
icon="logistics"
|
color="var(--base-green)"
|
class="w-[100px]"
|
>测试</van-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="seeds-box">
|
<div class="w-full h-[60px] flex items-center">
|
<div class="w-[6px] h-[20px] bg-[var(--base-green)] rounded-md" />
|
<span class="ml-2 text-lg font-bold">校准参数</span>
|
</div>
|
<div class="w-[72%] text-lg mt-[10px]">去皮(g)</div>
|
<div class="mt-[10px]">
|
<van-stepper
|
v-model="stepvalue1"
|
:min="0"
|
step="2"
|
:decimal-length="0"
|
button-size="32px"
|
/>
|
</div>
|
<div class="w-[72%] text-lg mt-[20px]">误差范围(±)</div>
|
<div class="mt-[10px]">
|
<van-stepper
|
v-model="stepvalue2"
|
:min="0"
|
step="0.1"
|
:decimal-length="1"
|
button-size="32px"
|
/>
|
|
</div>
|
|
<div class="mt-[40px]">
|
<van-button
|
icon="setting-o"
|
color="var(--base-green)"
|
class="w-[100px]"
|
>设置</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;
|
|
.title-box {
|
height: 60px;
|
align-items: center;
|
background: white;
|
margin: 10px 10px 0 10px;
|
border-radius: 10px;
|
overflow: hidden;
|
}
|
|
.content-box {
|
width: 100vw;
|
|
.content-info {
|
height: 400px;
|
display: flex;
|
|
.check-box {
|
font-size: 18px;
|
flex: 1;
|
margin: 10px;
|
background: white;
|
border-radius: 10px;
|
|
.statu-box {
|
height: 68px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.label-box {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.info-box {
|
flex: 3;
|
display: flex;
|
}
|
}
|
|
.name-box {
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
div {
|
flex: 1;
|
}
|
}
|
|
.test-box {
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
div {
|
flex: 1;
|
}
|
}
|
|
.water-box,
|
.adjust-box {
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
div {
|
flex: 1;
|
}
|
}
|
.t-box {
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.t-label {
|
flex: 1;
|
}
|
.t-input {
|
flex: 2;
|
}
|
.t-btn {
|
flex: 1;
|
}
|
}
|
}
|
|
.seeds-box {
|
width: 300px;
|
margin: 10px 10px 10px 0;
|
background: white;
|
border-radius: 10px;
|
padding: 0 10px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
}
|
|
.content-submit {
|
height: 80px;
|
margin-top: 10px;
|
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;
|
}
|
}
|
|
.custom-write-field {
|
:deep(.van-field__control) {
|
width: 288px;
|
background: var(--base-green);
|
color: white;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
}
|
}
|
|
.write-field-w200 {
|
:deep(.van-field__control) {
|
width: 200px;
|
background: var(--base-green);
|
color: white;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
}
|
}
|
|
:deep(.van-nav-bar__text) {
|
font-size: 20px;
|
}
|
|
:deep(.van-tree-select) {
|
height: 300px !important;
|
}
|
|
:deep(.van-dialog) {
|
width: 400px !important;
|
}
|
|
.dia-inp {
|
:deep(.van-field__label) {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
:deep(.van-field__body) {
|
width: 200px !important;
|
}
|
|
:deep(.van-field__control) {
|
width: 200px !important;
|
background: white !important;
|
}
|
}
|
|
.dia-picker {
|
:deep(.van-badge__wrapper) {
|
margin-top: 14px !important;
|
margin-right: 14px !important;
|
}
|
}
|
|
:deep(.van-stepper__minus) {
|
background: var(--base-green);
|
color: white;
|
width: 40px !important;
|
height: 40px !important;
|
}
|
:deep(.van-stepper__input) {
|
background:var(--base-green);
|
color: white;
|
width: 120px !important;
|
height: 40px !important;
|
font-size: 18px;
|
}
|
:deep(.van-stepper__plus) {
|
background:var(--base-green);
|
color: white;
|
width: 40px !important;
|
height: 40px !important;
|
}
|
</style>
|
