<script setup lang="ts">
|
import { reactive, ref } from "vue";
|
import Manual from "@/views/demo/manual.vue";
|
|
defineOptions({
|
name: "Demo"
|
});
|
|
const startEnable = ref(false);
|
const pauseEnable = ref(false);
|
const resetEnable = ref(false);
|
const autoEnable = ref(true);
|
const modeText = ref("自动");
|
const runText = ref("停止");
|
const running = ref(false);
|
const floptime = ref(null);
|
|
function autoClick() {
|
autoEnable.value = !autoEnable.value;
|
autoEnable.value ? (modeText.value = "自动") : (modeText.value = "手动");
|
}
|
|
function run() {
|
running.value = !running.value;
|
running.value ? (runText.value = "运行中") : (runText.value = "停止");
|
if (running.value) {
|
floptime.value.startTimer();
|
} else {
|
floptime.value.resetTimer();
|
}
|
}
|
</script>
|
|
<template>
|
<div class="app">
|
<div class="statu-box text-2xl">
|
<div class="flex items-center box-border">
|
<span>运行模式</span>
|
<span class="text-green ml-2">{{ modeText }}</span>
|
<span class="ml-4">运行状态</span>
|
<span
|
class="ml-2"
|
:class="{ 'text-green': running, 'text-red-500': !running }"
|
>{{ runText }}</span
|
>
|
<div class="grain-tag ml-4" @click.stop="run">小麦</div>
|
</div>
|
|
<div class="statu-action">
|
<!-- <div v-show="!autoEnable" class="flex items-center">
|
<van-icon
|
v-if="startEnable"
|
class="text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-green-600"
|
name="play-circle"
|
size="60"
|
/>
|
<van-icon
|
v-else
|
class="text-slate-400"
|
name="play-circle"
|
size="60"
|
/>
|
<div class="text-base">
|
<p>检验</p>
|
<p>启动</p>
|
</div>
|
</div>
|
<div v-show="!autoEnable" class="flex items-center ml-4">
|
<van-icon
|
v-if="pauseEnable"
|
class="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-rose-600"
|
name="stop-circle"
|
size="60"
|
/>
|
<van-icon
|
v-else
|
class="text-slate-400"
|
name="stop-circle"
|
size="60"
|
/>
|
|
<div class="text-base">
|
<div>检验</div>
|
<div>暂停</div>
|
</div>
|
</div>
|
<div v-show="!autoEnable" class="flex items-center ml-4">
|
<van-icon
|
v-if="resetEnable"
|
class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600"
|
name="underway"
|
size="60"
|
/>
|
<van-icon v-else class="text-slate-400" name="underway" size="60" />
|
<div class="text-base">
|
<p>检验</p>
|
<p>复位</p>
|
</div>
|
</div>-->
|
<div class="flex items-center ml-4" @click.stop="autoClick">
|
<van-icon
|
v-if="autoEnable"
|
class="text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-green-600"
|
name="smile"
|
size="60"
|
/>
|
<van-icon v-else class="text-slate-400" name="smile" size="60" />
|
<div class="text-base">
|
<p>手动</p>
|
<p>自动</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<transition name="van-fade">
|
<div v-show="modeText === '自动'" class="content-box">
|
<div class="conn-box">
|
<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="check-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-divider />
|
<div class="result-box">
|
<div class="result-data">
|
<div class="result-water">
|
<div class="water-item">
|
<p class="text-base">水分含量</p>
|
<p>
|
<span class="text-3xl text-green font-bold">12.26</span>
|
<span>%</span>
|
</p>
|
</div>
|
|
<div class="water-item">
|
<p class="text-base">容重比</p>
|
<p>
|
<span class="text-3xl text-green font-bold">-19.0</span>
|
<span>g/L</span>
|
</p>
|
</div>
|
</div>
|
<div class="result-chart">
|
<div v-if="running">
|
<charging-animation />
|
</div>
|
<div
|
v-else
|
class="w-full flex flex-col justify-center items-center"
|
>
|
<div class="text-green text-lg">检测完成</div>
|
<van-icon name="passed" class="bg-green" size="140" />
|
</div>
|
</div>
|
<div class="result-bulk">
|
<div class="bulk-item">
|
<p class="text-base">环境温度</p>
|
<p>
|
<span class="text-3xl text-green font-bold">25</span>
|
<span>℃</span>
|
</p>
|
</div>
|
|
<div class="bulk-item">
|
<p class="text-base">环境湿度</p>
|
<p>
|
<span class="text-3xl text-green font-bold">46</span>
|
<span>%</span>
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</transition>
|
|
<transition name="van-fade">
|
<div v-show="modeText === '手动'" class="content-box">
|
<manual />
|
</div>
|
</transition>
|
</div>
|
</template>
|
<style lang="less" scoped>
|
.app {
|
display: flex;
|
flex-direction: column;
|
font-weight: bold;
|
cursor: pointer;
|
|
.statu-box {
|
height: 85px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
box-sizing: border-box;
|
padding: 20px;
|
background: white;
|
margin: 10px;
|
border-radius: 10px;
|
|
.statu-action {
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.content-box {
|
flex: 1;
|
display: flex;
|
|
.conn-box,
|
.check-box,
|
.sel-box {
|
border-radius: 10px;
|
}
|
|
.conn-box {
|
flex: 2;
|
margin: 0 5px 10px 10px;
|
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;
|
}
|
}
|
|
.check-box {
|
background: white;
|
flex: 3;
|
margin: 0 10px 10px 5px;
|
overflow: hidden;
|
|
.result-box {
|
display: flex;
|
flex-direction: column;
|
min-height: 370px;
|
|
.result-tip {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 60px;
|
font-size: 20px;
|
color: var(--base-green);
|
}
|
|
.result-data {
|
flex: 1;
|
display: flex;
|
height: 100%;
|
|
.result-water {
|
flex: 2;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: flex-end;
|
flex-direction: column;
|
|
.water-item {
|
width: 80%;
|
height: 30%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
border-radius: 8px;
|
background: #d8f1db;
|
}
|
}
|
|
.result-chart {
|
min-height: 370px;
|
height: 100%;
|
flex: 3;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.result-bulk {
|
flex: 2;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: flex-start;
|
flex-direction: column;
|
|
.bulk-item {
|
width: 80%;
|
height: 30%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
border-radius: 8px;
|
background: #d8f1db;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.grain-tag {
|
padding: 4px 20px;
|
background: var(--base-green);
|
color: white;
|
border-radius: 20px;
|
}
|
}
|
|
.text-green {
|
color: var(--base-green);
|
}
|
|
.bg-green {
|
color: var(--base-green);
|
}
|
</style>
|
