|
|
@ -1,7 +1,9 @@ |
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { queryCraftList } from 'apis/crafts' |
|
|
import { queryCraftList } from 'apis/crafts' |
|
|
import { getSolsList } from 'apis/solution' |
|
|
import { getSolsList } from 'apis/solution' |
|
|
|
|
|
import { sync } from 'apis/system' |
|
|
import solutionIcon from 'assets/images/solution.svg' |
|
|
import solutionIcon from 'assets/images/solution.svg' |
|
|
|
|
|
import solutionSelectIcon from 'assets/images/solutionSelect.svg' |
|
|
import Receive from 'components/home/Receive/index.vue' |
|
|
import Receive from 'components/home/Receive/index.vue' |
|
|
import { useSystemStore } from 'stores/systemStore' |
|
|
import { useSystemStore } from 'stores/systemStore' |
|
|
import { computed, onMounted, ref, watch } from 'vue' |
|
|
import { computed, onMounted, ref, watch } from 'vue' |
|
|
@ -69,11 +71,23 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' | |
|
|
concentration: data.concentration, |
|
|
concentration: data.concentration, |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const cardClick = async (item: System.ChannelState) => { |
|
|
|
|
|
const channel = systemStore.systemStatus.channelState.find(channel => channel.channelCode === item.channelCode) |
|
|
|
|
|
await sync({ |
|
|
|
|
|
channels: [ |
|
|
|
|
|
{ |
|
|
|
|
|
channelCode: item.channelCode, |
|
|
|
|
|
selected: !channel?.selected, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<template lang="pug"> |
|
|
<template lang="pug"> |
|
|
div.home-container(v-loading="loading") |
|
|
div.home-container(v-loading="loading") |
|
|
el-card(v-for="item in channelList.sort((a,b)=>a.channelCode.localeCompare(b.channelCode))" :key="item.channelCode") |
|
|
|
|
|
|
|
|
el-card(v-for="item in channelList" :key="item.channelCode" :class="{'card-selected': item.selected }" @click.stop="() => cardClick(item)") |
|
|
div.top-box |
|
|
div.top-box |
|
|
p.title {{channelMap[item.channelCode]}} |
|
|
p.title {{channelMap[item.channelCode]}} |
|
|
div.solution-box(@click="() => receiveHandle(item)") |
|
|
div.solution-box(@click="() => receiveHandle(item)") |
|
|
@ -82,7 +96,7 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' | |
|
|
|
|
|
|
|
|
div.input-box |
|
|
div.input-box |
|
|
p.label |
|
|
p.label |
|
|
img(:src="solutionIcon" alt="") |
|
|
|
|
|
|
|
|
img(:src="item.selected ? solutionSelectIcon: solutionIcon" alt="") |
|
|
span 每次加液体积 |
|
|
span 每次加液体积 |
|
|
div.solution-box |
|
|
div.solution-box |
|
|
el-select(v-model="item.targetVolume" placeholder="请选择" no-data-text="无数据, 请添加对应配方" :disabled="!item.solutionName") |
|
|
el-select(v-model="item.targetVolume" placeholder="请选择" no-data-text="无数据, 请添加对应配方" :disabled="!item.solutionName") |
|
|
@ -107,6 +121,11 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' | |
|
|
display grid |
|
|
display grid |
|
|
grid-template-columns 1fr 1fr 1fr 1fr |
|
|
grid-template-columns 1fr 1fr 1fr 1fr |
|
|
gap 20px |
|
|
gap 20px |
|
|
|
|
|
.el-card |
|
|
|
|
|
transform: all 0.3s; |
|
|
|
|
|
.card-selected |
|
|
|
|
|
background-color #1778D2 |
|
|
|
|
|
color #fff |
|
|
:deep(.el-card__body) |
|
|
:deep(.el-card__body) |
|
|
height 100% |
|
|
height 100% |
|
|
display flex |
|
|
display flex |
|
|
@ -120,41 +139,42 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' | |
|
|
font-size 18px |
|
|
font-size 18px |
|
|
font-weight 500 |
|
|
font-weight 500 |
|
|
margin-bottom 30px |
|
|
margin-bottom 30px |
|
|
.solution-box |
|
|
|
|
|
|
|
|
.solution-box |
|
|
|
|
|
width 100% |
|
|
|
|
|
height 50px |
|
|
|
|
|
background: #F8F8F8; |
|
|
|
|
|
box-shadow: inset 1px 2px 6px 0 rgba(210, 210, 210, 0.3); |
|
|
|
|
|
display flex |
|
|
|
|
|
align-items center |
|
|
|
|
|
.el-select |
|
|
|
|
|
width 100% |
|
|
|
|
|
height 100% |
|
|
|
|
|
.unit |
|
|
|
|
|
height 40px |
|
|
|
|
|
line-height 40px |
|
|
|
|
|
font-size 18px |
|
|
|
|
|
font-weight 500 |
|
|
|
|
|
color: #3C445C; |
|
|
|
|
|
padding 0 15px |
|
|
|
|
|
border-left 1px solid #D1D1D1; |
|
|
|
|
|
.content |
|
|
|
|
|
width 100% |
|
|
|
|
|
color: #3C445C; |
|
|
|
|
|
text-align center |
|
|
|
|
|
font-weight bold |
|
|
|
|
|
font-size 18px |
|
|
|
|
|
.input-box |
|
|
|
|
|
width 100% |
|
|
|
|
|
|
|
|
|
|
|
.label |
|
|
width 100% |
|
|
width 100% |
|
|
height 50px |
|
|
|
|
|
background: #F8F8F8; |
|
|
|
|
|
box-shadow: inset 1px 2px 6px 0 rgba(210, 210, 210, 0.3); |
|
|
|
|
|
display flex |
|
|
display flex |
|
|
align-items center |
|
|
align-items center |
|
|
.el-select |
|
|
|
|
|
width 100% |
|
|
|
|
|
height 100% |
|
|
|
|
|
.unit |
|
|
|
|
|
height 40px |
|
|
|
|
|
line-height 40px |
|
|
|
|
|
font-size 18px |
|
|
|
|
|
font-weight 500 |
|
|
|
|
|
color: #3C445C; |
|
|
|
|
|
padding 0 15px |
|
|
|
|
|
border-left 1px solid #D1D1D1; |
|
|
|
|
|
.content |
|
|
|
|
|
width 100% |
|
|
|
|
|
text-align center |
|
|
|
|
|
font-weight bold |
|
|
|
|
|
font-size 18px |
|
|
|
|
|
.input-box |
|
|
|
|
|
width 100% |
|
|
|
|
|
|
|
|
|
|
|
.label |
|
|
|
|
|
width 100% |
|
|
|
|
|
display flex |
|
|
|
|
|
align-items center |
|
|
|
|
|
justify-content flex-start |
|
|
|
|
|
padding 10px |
|
|
|
|
|
img |
|
|
|
|
|
width 10px |
|
|
|
|
|
margin-right 10px |
|
|
|
|
|
|
|
|
justify-content flex-start |
|
|
|
|
|
padding 10px |
|
|
|
|
|
img |
|
|
|
|
|
width 10px |
|
|
|
|
|
margin-right 10px |
|
|
:deep(.el-select__wrapper) { |
|
|
:deep(.el-select__wrapper) { |
|
|
height 100% |
|
|
height 100% |
|
|
line-height 100% |
|
|
line-height 100% |
|
|
|
