GuoAnPeng
/
separate-gold-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 修改首页按钮逻辑

master
guoapeng 2 months ago
parent
85de15d11e
commit
45cb0661fe
5 changed files with 210 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      src/components/home/AddLiquid/index.vue
  2. 32
      src/components/home/ExtractLiquid/index.vue
  3. 21
      src/components/home/FillSolution/index.vue
  4. 88
      src/components/home/StartClean/index.vue
  5. 78
      src/views/home/index.vue

35
src/components/home/AddLiquid/index.vue
View File

@ -1,10 +1,9 @@
<script setup lang="ts">
import { getSolsList } from 'apis/solution'
import { FtMessage } from 'libs/message'
import { socket } from 'libs/socket'
import { useHomeStore } from 'stores/homeStore'
import { useSystemStore } from 'stores/systemStore'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { onMounted, onUnmounted, ref } from 'vue'
const emits = defineEmits(['ok', 'cancel'])
@ -84,19 +83,19 @@ const getSols = async () => {
const res = await getSolsList()
solsList.value = res.list
}
const tubes = computed(() => {
const tray = systemStore.systemStatus.trays?.find(item => item.inSolutionPositon)
return tray?.tubes || []
})
//
// const tubes = computed(() => {
// const tray = systemStore.systemStatus.trays?.find(item => item.inSolutionPositon)
// return tray?.tubes || []
// })
const selectedColumns = ref(Array.from({ length: 5 }).fill(false))
const mousedownHandle = async (index: number) => {
if (!tubes.value.find(item => item.columnNum === index)?.exists) {
FtMessage.error('该列没有试管')
return
}
// if (!tubes.value.find(item => item.columnNum === index)?.exists) {
// FtMessage.error('该列没有试管')
// return
// }
selectedColumns.value[index - 1] = !selectedColumns.value[index - 1]
form.value.columns = selectedColumns.value.map((item, index) => {
return item ? index + 1 : false
@ -110,11 +109,23 @@ const mousedownHandle = async (index: number) => {
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
<el-form-item label="选择试管" prop="columns">
<div class="tube-item">
<!-- <div -->
<!-- v-for="item in 5" -->
<!-- :key="item" -->
<!-- class="tube-line" -->
<!-- :class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': !tubes.find(tu => tu.columnNum === item)?.exists }" -->
<!-- @click.prevent="() => mousedownHandle(item)" -->
<!-- @touch.prevent="() => mousedownHandle(item)" -->
<!-- > -->
<!-- <span v-for="i in 8" :key="i" class="tube-line-inner" /> -->
<!-- </div> -->
<div
v-for="item in 5"
:key="item"
class="tube-line"
:class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': !tubes.find(tu => tu.columnNum === item)?.exists }"
:class="{ 'tube-line-active': selectedColumns[item - 1] }"
@click.prevent="() => mousedownHandle(item)"
@touch.prevent="() => mousedownHandle(item)"

32
src/components/home/ExtractLiquid/index.vue
View File

@ -1,10 +1,9 @@
<script setup lang="ts">
import { getSolsList } from 'apis/solution'
import { FtMessage } from 'libs/message'
import { socket } from 'libs/socket'
import { useHomeStore } from 'stores/homeStore'
import { useSystemStore } from 'stores/systemStore'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { onMounted, onUnmounted, ref } from 'vue'
const emits = defineEmits(['ok', 'cancel'])
@ -79,18 +78,18 @@ const getSols = async () => {
solsList.value = res.list
}
const tubes = computed(() => {
const tray = systemStore.systemStatus.trays?.find(item => item.inSolutionPositon)
return tray?.tubes || []
})
// const tubes = computed(() => {
// const tray = systemStore.systemStatus.trays?.find(item => item.inSolutionPositon)
// return tray?.tubes || []
// })
const selectedColumns = ref(Array.from({ length: 5 }).fill(false))
const mousedownHandle = async (index: number) => {
if (!tubes.value.find(item => item.columnNum === index)?.exists) {
FtMessage.error('该列没有试管')
return
}
// if (!tubes.value.find(item => item.columnNum === index)?.exists) {
// FtMessage.error('该列没有试管')
// return
// }
selectedColumns.value[index - 1] = !selectedColumns.value[index - 1]
form.value.columns = selectedColumns.value.map((item, index) => {
return item ? index + 1 : false
@ -104,11 +103,22 @@ const mousedownHandle = async (index: number) => {
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
<el-form-item label="选择试管" prop="columns">
<div class="tube-item">
<!-- <div -->
<!-- v-for="item in 5" -->
<!-- :key="item" -->
<!-- class="tube-line" -->
<!-- :class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': !tubes.find(tu => tu.columnNum === item)?.exists }" -->
<!-- @click.prevent="() => mousedownHandle(item)" -->
<!-- @touch.prevent="() => mousedownHandle(item)" -->
<!-- > -->
<!-- <span v-for="i in 8" :key="i" class="tube-line-inner" /> -->
<!-- </div> -->
<div
v-for="item in 5"
:key="item"
class="tube-line"
:class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': !tubes.find(tu => tu.columnNum === item)?.exists }"
:class="{ 'tube-line-active': selectedColumns[item - 1] }"
@click.prevent="() => mousedownHandle(item)"
@touch.prevent="() => mousedownHandle(item)"

21
src/components/home/FillSolution/index.vue
View File

@ -22,7 +22,14 @@ const queryContainerList = async () => {
containerList.value = res.filter(item => item.type === 0)
}
const cancel = () => {
const cancel = async () => {
currentCommandId = Date.now().toString()
const params = {
commandId: currentCommandId,
command: 'liquid_motor_origin',
params: {},
}
await homeStore.sendControl(params)
emits('cancel')
}
@ -59,17 +66,11 @@ const filled_solution_start = async () => {
}
const filled_solution_stop = async () => {
if (!checked.value) {
FtMessage.warning('请选择要停止预充的溶液')
return
}
currentCommandId = Date.now().toString()
const params = {
commandId: currentCommandId,
command: 'liquid_pre_fill_stop',
params: {
solutionId: checked.value,
},
params: {},
}
await homeStore.sendControl(params)
}
@ -90,8 +91,8 @@ const checked = ref<number>()
<ft-button type="primary" :click-handle="filled_solution_stop">
停止预充
</ft-button>
<ft-button @click="cancel">
关闭
<ft-button :click-handle="cancel">
完成预充
</ft-button>
</template>
</FtDialog>

88
src/components/home/StartClean/index.vue
View File

@ -8,10 +8,23 @@ const homeStore = useHomeStore()
const form = ref({
cycle: undefined,
columns: [],
})
const formRef = ref()
const validateHandle = (rule: any, value: any, callback: any) => {
if (!value?.length) {
callback(new Error('请选择试管'))
}
else {
callback()
}
}
const rules = {
columns: [
{ required: true, message: '请选择试管', trigger: 'change', validator: validateHandle },
],
cycle: [
{ required: true, trigger: 'blur', message: '请输入清洗次数' },
],
@ -45,11 +58,51 @@ const commandHandle = async (command: string, params?: unknown) => {
}
await homeStore.sendControl(data)
}
const selectedColumns = ref(Array.from({ length: 5 }).fill(false))
const mousedownHandle = async (index: number) => {
// if (!tubes.value.find(item => item.columnNum === index)?.exists) {
// FtMessage.error('该列没有试管')
// return
// }
selectedColumns.value[index - 1] = !selectedColumns.value[index - 1]
form.value.columns = selectedColumns.value.map((item, index) => {
return item ? index + 1 : false
}).filter(item => item !== false)
formRef.value.validateField('columns')
}
</script>
<template>
<FtDialog visible title="设置清洗次数" width="40%" :ok-handle="okHandle" @cancel="cancel">
<el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
<el-form-item label="选择试管" prop="columns">
<div class="tube-item">
<!-- <div -->
<!-- v-for="item in 5" -->
<!-- :key="item" -->
<!-- class="tube-line" -->
<!-- :class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': !tubes.find(tu => tu.columnNum === item)?.exists }" -->
<!-- @click.prevent="() => mousedownHandle(item)" -->
<!-- @touch.prevent="() => mousedownHandle(item)" -->
<!-- > -->
<!-- <span v-for="i in 8" :key="i" class="tube-line-inner" /> -->
<!-- </div> -->
<div
v-for="item in 5"
:key="item"
class="tube-line"
:class="{ 'tube-line-active': selectedColumns[item - 1] }"
@click.prevent="() => mousedownHandle(item)"
@touch.prevent="() => mousedownHandle(item)"
>
<span v-for="i in 8" :key="i" class="tube-line-inner" />
</div>
</div>
</el-form-item>
<el-form-item label="清洗次数" prop="cycle">
<el-select
v-model="form.cycle"
@ -75,4 +128,39 @@ const commandHandle = async (command: string, params?: unknown) => {
.el-tag {
margin-right: 5px;
}
.tube-item {
padding: 5px;
background: #384D5D;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-gap: 5px;
position: relative;
.tube-line {
display: flex;
flex-direction: column;
.tube-line-inner {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background: #fff;
margin: 2px;
transition: background 0.5s;
}
}
.tube-line-disable {
.tube-line-inner {
background: #C6C6C6;
}
}
.tube-line-active {
.tube-line-inner {
background: #26D574;
}
}
}
</style>

78
src/views/home/index.vue
View File

@ -10,6 +10,7 @@ import StartClean from 'components/home/StartClean/index.vue'
import StartExperiment from 'components/home/StartExperiment/index.vue'
import Tube from 'components/home/Tube/index.vue'
import { ElMessageBox } from 'element-plus'
import { FtMessage } from 'libs/message'
import { socket } from 'libs/socket'
import { cmdNameMap, formatDateTime } from 'libs/utils'
@ -133,6 +134,63 @@ const commandHandle = async (command: string, params?: unknown) => {
}
await homeStore.sendControl(data)
}
const move_to_liquid_area = async () => {
if (!selectedHeatArea.value?.value) {
await ElMessageBox.confirm(
'是否要将上料区托盘移至加液位? ',
'提示',
{
confirmButtonText: '确认',
showClose: false,
showCancelButton: false,
closeOnClickModal: false,
closeOnPressEscape: false,
type: 'warning',
customClass: 'init-message',
},
)
}
await commandHandle('move_to_liquid_area', { heatModuleCode: selectedHeatArea.value?.value })
}
const move_to_feed_area = async () => {
if (!selectedHeatArea.value?.value) {
await ElMessageBox.confirm(
'是否要将加液位托盘移至上料区? ',
'提示',
{
confirmButtonText: '确认',
showClose: false,
showCancelButton: false,
closeOnClickModal: false,
closeOnPressEscape: false,
type: 'warning',
customClass: 'init-message',
},
)
}
await commandHandle('move_to_feed_area', { heatModuleCode: selectedHeatArea.value?.value })
}
const move_to_anneal_area = async () => {
if (!selectedHeatArea.value?.value) {
await ElMessageBox.confirm(
'是否要将加液位或上料区的托盘移至退火区? ',
'提示',
{
confirmButtonText: '确认',
showClose: false,
showCancelButton: false,
closeOnClickModal: false,
closeOnPressEscape: false,
type: 'warning',
customClass: 'init-message',
},
)
}
await commandHandle('move_to_anneal_area', { heatModuleCode: selectedHeatArea.value?.value })
}
</script>
<template>
@ -156,13 +214,13 @@ const commandHandle = async (command: string, params?: unknown) => {
移至加热位
</ft-button>
<ft-button size="large" :click-handle="() => commandHandle('move_to_liquid_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
移至加/排液位
<ft-button size="large" :click-handle="move_to_liquid_area">
移至加液位
</ft-button>
<ft-button size="large" :click-handle="() => commandHandle('move_to_feed_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
移至上/下料区
<ft-button size="large" :click-handle="move_to_feed_area">
移至上料区
</ft-button>
<ft-button size="large" :click-handle="() => commandHandle('move_to_anneal_area', { heatModuleCode: selectedHeatArea?.value || undefined })">
<ft-button size="large" :click-handle="move_to_anneal_area">
移至退火位
</ft-button>
</div>
@ -240,16 +298,14 @@ const commandHandle = async (command: string, params?: unknown) => {
</el-col>
<el-col :span="6">
<div style="display: grid; gap: 10px; grid-template-columns: repeat(1, 1fr);grid-template-rows: repeat(3, 1fr);height: 100%">
<ft-button size="large" :click-handle="() => commandHandle('x_origin')">
x轴回原点
<ft-button size="large" :click-handle="() => commandHandle('liquid_motor_origin')">
加液臂回原点
</ft-button>
<ft-button size="large" :click-handle="() => commandHandle('z_origin')">
z轴回原点
</ft-button>
<ft-button size="large" :click-handle="() => commandHandle('liquid_motor_origin')">
加液臂回原点
<ft-button size="large" :click-handle="() => commandHandle('x_origin')">
x轴回原点
</ft-button>
</div>
</el-col>

Write Preview
Loading…
Cancel
Save