You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
352 lines
10 KiB
352 lines
10 KiB
<script lang="ts" setup>
|
|
import homeProbe1 from 'assets/images/home/home-probe1.svg'
|
|
import Environment from 'components/home/Environment.vue'
|
|
import HomeFormula from 'components/home/HomeFormula.vue'
|
|
import HomeOperation from 'components/home/HomeOperation.vue'
|
|
import HomeSetting from 'components/home/HomeSetting.vue'
|
|
import PressureControl from 'components/home/PressureControl.vue'
|
|
import { FtMessageBox } from 'libs/messageBox'
|
|
import { useDeviceStore } from 'stores/deviceStore'
|
|
import { useGasStore } from 'stores/gasStore'
|
|
import { useHomeStore } from 'stores/homeStore'
|
|
import { useLiquidStore } from 'stores/liquidStore'
|
|
import { computed, onMounted, ref, watchEffect } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import { roundNumber } from '@/libs/utils'
|
|
import { useFormulaStore } from '@/stores/formulaStore'
|
|
import { useSystemStore } from '@/stores/systemStore'
|
|
|
|
const gasStore = useGasStore()
|
|
const selectChannel = (channel: string, name: any) => {
|
|
FtMessageBox.warning(`请确认打开${name}?`).then(() => {
|
|
gasStore.selectChannel(channel)
|
|
})
|
|
}
|
|
const route = useRoute()
|
|
const homeStore = useHomeStore()
|
|
const deviceStore = useDeviceStore()
|
|
const liquidStore = useLiquidStore()
|
|
const formulaStore = useFormulaStore()
|
|
const systemStore = useSystemStore()
|
|
const environmentParams = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[0])
|
|
const liquidInfo = ref<Liquid.LiquidData>(liquidStore.liquidStateData)
|
|
const liquidTotal = ref<number>(liquidStore.liquidTotal)
|
|
const formulaInfo = ref()
|
|
const loading = ref(false)
|
|
|
|
onMounted(() => {
|
|
watchEffect(() => {
|
|
formulaInfo.value = formulaStore.currentSelectedFormulaInfo
|
|
liquidTotal.value = liquidStore.liquidTotal
|
|
liquidInfo.value = liquidStore.liquidStateData
|
|
loading.value = systemStore.loading
|
|
if (homeStore.h2O2SensorData && homeStore.h2O2SensorData.length) {
|
|
styles.value = computedStyle()
|
|
// console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData)
|
|
environmentParams.value = {
|
|
...homeStore.h2O2SensorData[0],
|
|
title: '仓内',
|
|
type: 'inside',
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
// 当前消毒液余量百分比（最大不超过100）
|
|
const nowLiquidProgress = computed(() => {
|
|
const now = Number(liquidInfo.value.nowLiquid)
|
|
const total = Number(liquidTotal.value)
|
|
if (!now || total <= 0) {
|
|
return 0
|
|
}
|
|
// 先算出百分比并四舍五入
|
|
const rawPercent = roundNumber((now / total) * 100, 0)
|
|
// 如果大于100，就返回100；否则返回原值
|
|
return rawPercent > 100 ? 100 : rawPercent
|
|
})
|
|
|
|
// 当前消毒液余量
|
|
const nowLiquid = computed(() => {
|
|
return roundNumber(liquidInfo.value.nowLiquid, 0)
|
|
})
|
|
|
|
const styles = ref<any>({
|
|
gridTemplateColumns: 'repeat(2, 1fr)',
|
|
gridTemplateRows: 'repeat(2, 1fr)',
|
|
})
|
|
|
|
const computedStyle = () => {
|
|
if (
|
|
deviceType.value === deviceStore.deviceTypeMap.PipeDM
|
|
|| deviceType.value === deviceStore.deviceTypeMap.DrawBarDM
|
|
) {
|
|
return {
|
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
gridTemplateRows: 'repeat(2, 1fr)',
|
|
}
|
|
}
|
|
return {
|
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
gridTemplateRows: 'repeat(2, 1fr)',
|
|
}
|
|
}
|
|
const deviceType = computed(() => {
|
|
return __DEVICE_TYPE__
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="home">
|
|
<div v-if="route.path === '/home'" class="home-grid-container">
|
|
<div class="home-left">
|
|
<div class="left-box">
|
|
<el-card
|
|
v-for="item in homeStore.h2O2SensorData.filter(item => item.type !== 'WirelessExtSensor')"
|
|
:key="item.sensorId"
|
|
class="card"
|
|
:class="{
|
|
'card-one': [deviceStore.deviceTypeMap.PipeDM].includes(deviceType),
|
|
'card-two': [deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType),
|
|
}"
|
|
>
|
|
<Environment :env-params="item" />
|
|
</el-card>
|
|
<el-card
|
|
v-if="deviceStore.deviceTypeMap.DrawBarDM === deviceType"
|
|
class="card card-three"
|
|
>
|
|
<div class="box">
|
|
<div class="title">
|
|
<div style="width: 100%; display: flex; align-items: center">
|
|
<img :src="homeProbe1" alt="" style="margin-right: 10px">气路控制
|
|
</div>
|
|
|
|
<el-tag v-if="!gasStore.isOnline" type="danger">
|
|
离线
|
|
</el-tag>
|
|
</div>
|
|
<div class="btn-box">
|
|
<h4>当前通道：{{ gasStore.currentChannel === gasStore.channelSwitcherMap[0] ? '降解通道' : gasStore.currentChannel === gasStore.channelSwitcherMap[1] ? '消毒通道' : '除湿通道' }}</h4>
|
|
<el-button :type="gasStore.currentChannel === gasStore.channelSwitcherMap[0] ? 'info' : 'primary'" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[0]" @click="() => selectChannel(gasStore.channelSwitcherMap[0], '降解通道')">
|
|
降解通道
|
|
</el-button>
|
|
<el-button :type="gasStore.currentChannel === gasStore.channelSwitcherMap[1] ? 'info' : 'primary'" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[1]" @click="() => selectChannel(gasStore.channelSwitcherMap[1], '消毒通道')">
|
|
消毒通道
|
|
</el-button>
|
|
<el-button :type="gasStore.currentChannel === gasStore.channelSwitcherMap[2] ? 'info' : 'primary'" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[2]" @click="() => selectChannel(gasStore.channelSwitcherMap[2], '除湿通道')">
|
|
除湿通道
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<div class="left-box">
|
|
<el-card
|
|
v-for="item in homeStore.h2O2SensorData.filter(item => item.type === 'WirelessExtSensor')"
|
|
:key="item.sensorId"
|
|
class="card"
|
|
>
|
|
<Environment :env-params="item" />
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
<div class="home-grid-item home-right">
|
|
<!-- 正在进行的配方 -->
|
|
<div class="top">
|
|
<HomeFormula />
|
|
|
|
<div
|
|
v-if="![deviceStore.deviceTypeMap.LargeSpaceDM_B, deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType)"
|
|
style="margin-top: 60px"
|
|
>
|
|
<div class="card-progress">
|
|
<!-- <div class="card-title-name"> -->
|
|
<!-- <img :src="homeLiquid"> -->
|
|
<!-- </div> -->
|
|
<div class="card-progress-content">
|
|
<el-progress size="small" :text-inside="true" :stroke-width="40" :percentage="nowLiquidProgress" />
|
|
</div>
|
|
</div>
|
|
<div class="card-num-g">
|
|
消毒液剩余:{{ nowLiquid || 0 }}（g）
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="middle">
|
|
<!-- 选择消毒的等级 -->
|
|
<!-- <HomeLogLevel v-if="!formulaStore.selectedFormulaInfo?.name" /> -->
|
|
<!-- 开始消毒、停止消毒及状态区 -->
|
|
<HomeOperation />
|
|
</div>
|
|
<!-- 消毒设置 -->
|
|
<div
|
|
class="bottom"
|
|
:style="{
|
|
justifyContent: deviceType === deviceStore.deviceTypeMap.PipeDM ? 'space-between' : 'space-evenly',
|
|
}"
|
|
>
|
|
<PressureControl />
|
|
<HomeSetting />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<router-view v-else />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.bottom {
|
|
display: flex;
|
|
}
|
|
$input-height: 3rem;
|
|
.home {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.home-grid-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.home-left {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-rows: repeat(2, 1fr);
|
|
grid-template-columns: repeat(1, 1fr);
|
|
gap: 20px;
|
|
.left-box {
|
|
display: flex; // 使用 Flexbox 布局
|
|
flex-direction: row; // 子元素水平排列（默认值）
|
|
align-items: flex-start; // 子元素顶部对齐
|
|
overflow-x: auto; // 横向滚动支持
|
|
width: 100%; // 父容器宽度占满
|
|
gap: 10px; // 子元素之间的间距（可选）
|
|
.card-one {
|
|
width: 100% !important;
|
|
}
|
|
.card-two {
|
|
width: calc((100% / 3)*2 - 10px) !important;
|
|
}
|
|
.card-three {
|
|
|
|
width: calc(100% / 3 - 10px) !important;
|
|
}
|
|
.card {
|
|
flex: 0 0 auto;
|
|
width: calc(100% / 3 - 10px);
|
|
height: 100%;
|
|
min-width: 200px;
|
|
border: 1px solid rgb(225, 225, 225);
|
|
border-radius: 10px;
|
|
background: rgba(147, 203, 255, 0.1);
|
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
|
|
|
.title-line {
|
|
height: 1vw;
|
|
background-color: #b3d9ff;
|
|
position: absolute;
|
|
width: 100%;
|
|
border-radius: 10px 10px 0 0;
|
|
margin: -2.12rem;
|
|
}
|
|
|
|
.card-title-name {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 20px;
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.home-right {
|
|
padding: 10px;
|
|
background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
|
|
background: rgba(147, 203, 255, 0.1);
|
|
border-radius: 10px;
|
|
box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.middle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
padding: 5px 0;
|
|
}
|
|
.el-button {
|
|
/* background-color: #2892f3 !important;*/
|
|
}
|
|
.card-center-1 {
|
|
grid-column: 1 / -1; // 占据整行
|
|
justify-self: center; // 横向居中
|
|
}
|
|
.card-center-2 {
|
|
grid-column: 1 / 3; // 占据整行
|
|
justify-self: center; // 横向居中
|
|
}
|
|
|
|
:deep(.el-card__body) {
|
|
height: 100%;
|
|
}
|
|
|
|
.card-progress {
|
|
margin-top: 10px;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.card-title-name {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.card-progress-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.card-num-g {
|
|
text-align: center;
|
|
font-size: 15px;
|
|
color: #3f4349;
|
|
font-weight: bold;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
}
|
|
.box {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 10px 0;
|
|
}
|
|
.btn-box {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
.el-button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|