Browse Source

fix:样式优化;按钮状态添加

master
guoapeng 4 months ago
parent
commit
da76472389
  1. 4
      src/assets/styles/element.scss
  2. 92
      src/libs/utils.ts
  3. 18
      src/views/clean/index.vue
  4. 9
      src/views/main/index.vue
  5. 30
      src/views/spray/index.d.ts
  6. 277
      src/views/spray/index.vue
  7. 31
      src/views/spraySet/index.vue

4
src/assets/styles/element.scss

@ -73,6 +73,10 @@
}
}
}
.el-checkbox {
width: 60px;
height: 60px;
}
.el-checkbox__input {
border: 1px solid #ccc;
}

92
src/libs/utils.ts

@ -8,59 +8,6 @@ export const sendControl = async (params: any, type?: string) => {
params.cmdId = Date.now().toString()
}
const systemStore = useSystemStore()
const systemStatus = systemStore.systemStatus
const sprayingDisableCmd = [
'slide_tray_in',
'slide_tray_out',
'matrix_prefill',
'nozzle_pipeline_wash',
'syringe_pipeline_wash',
'matrix_spray_start',
'syringe_pipeline_wash_stop',
'matrix_prefill_stop',
]
if (systemStatus.spraying && (type === 'debug' || sprayingDisableCmd.includes(params.cmdCode))) {
FtMessage.error('设备正在喷涂中, 请等待喷涂完成')
return
}
if (!systemStatus.spraying && ['matrix_spray_stop'].includes(params.cmdCode)) {
FtMessage.error('设备没有正在喷涂的任务')
return
}
if (systemStatus.paused && (type === 'debug' || sprayingDisableCmd.includes(params.cmdCode))) {
FtMessage.error('喷涂暂停中,请等待喷涂完成')
return
}
if (!systemStatus.paused && ['matrix_spray_continue'].includes(params.cmdCode)) {
FtMessage.error('当前没有暂停的喷涂任务, 无法继续')
return
}
if (!systemStatus.suspendable && ['matrix_spray_pause'].includes(params.cmdCode)) {
FtMessage.error('当前不可以暂停')
return
}
const PipelineDisableCmd = [
'syringe_pipeline_wash',
'nozzle_pipeline_wash',
'matrix_spray_start',
'matrix_prefill',
]
if (systemStatus.cleaningSyringePipeline && (type === 'debug' || PipelineDisableCmd.includes(params.cmdCode))) {
FtMessage.error('正在清洗注射器管路, 无法执行')
return
}
if (systemStatus.cleaningNozzlePipeline && (type === 'debug' || PipelineDisableCmd.includes(params.cmdCode))) {
FtMessage.error('正在清洗喷嘴管路, 无法执行')
return
}
if (systemStatus.prefilling && (type === 'debug' || PipelineDisableCmd.includes(params.cmdCode))) {
FtMessage.error('正在预充管路, 无法执行')
return
}
systemStore.systemList = []
const cmdName = cmdNameMap[params.cmdCode as keyof typeof cmdNameMap] || params.cmdCode
@ -124,3 +71,42 @@ export const cmdNameMap = {
matrix_spray_change_param: '实时调整参数',
}
export const generateColors = (count: number): string[] => {
const colors: string[] = []
for (let i = 0; i < count; i++) {
// Increase hue step to make colors more distinct
const hue = (i * 360) / count
// Introduce variation in saturation and lightness with larger steps
const saturation = 30 + (i % 5) * 20 // Alternate between 30, 50, 70, 90, 110
const lightness = 30 + (i % 4) * 20 // Alternate between 30, 50, 70, 90
// Convert HSL to RGB
const rgb = hslToRgb(hue, saturation, lightness)
// Convert RGB to hex
const hex = rgbToHex(rgb.r, rgb.g, rgb.b)
colors.push(hex)
}
return colors
}
const hslToRgb = (h: number, s: number, l: number): { r: number, g: number, b: number } => {
s /= 100
l /= 100
const k = (n: number) => (n + h / 30) % 12
const a = s * Math.min(l, 1 - l)
const f = (n: number) =>
l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))
return {
r: Math.round(f(0) * 255),
g: Math.round(f(8) * 255),
b: Math.round(f(4) * 255),
}
}
const rgbToHex = (r: number, g: number, b: number): string => {
const toHex = (c: number) => `0${c.toString(16)}`.slice(-2)
return `#${toHex(r)}${toHex(g)}${toHex(b)}`
}
export const colors = generateColors(100)
console.log(colors)

18
src/views/clean/index.vue

@ -2,8 +2,10 @@
import { ElMessageBox } from 'element-plus'
import { FtMessage } from 'libs/message'
import { sendControl } from 'libs/utils'
import { useSystemStore } from 'stores/useSystemStore'
import { h, ref } from 'vue'
const systemStore = useSystemStore() // 使 systemStore
const clearSpeed = ref()
const syringePipelineWashRef = ref()
@ -99,13 +101,23 @@ const syringePipelineWashStop = async () => {
<el-input v-model="clearSpeed" type="number" style="width: 100px;margin:0 10px" />
<span>uL/min</span>
</div>
<ft-button ref="syringePipelineWashRef" class="button-style" type="primary" @click="syringePipelineWash">
<ft-button
ref="syringePipelineWashRef" class="button-style" type="primary" :disabled="systemStore.systemStatus.spraying
|| systemStore.systemStatus.cleaningSyringePipeline
|| systemStore.systemStatus.cleaningNozzlePipeline
|| systemStore.systemStatus.prefilling" @click="syringePipelineWash"
>
清洗注射器管路
</ft-button>
<ft-button ref="nozzlePipelineWashRef" class="button-style" type="primary" @click="nozzlePipelineWash">
<ft-button
ref="nozzlePipelineWashRef" class="button-style" type="primary" :disabled="systemStore.systemStatus.spraying
|| systemStore.systemStatus.cleaningSyringePipeline
|| systemStore.systemStatus.cleaningNozzlePipeline
|| systemStore.systemStatus.prefilling" @click="nozzlePipelineWash"
>
清洗喷嘴管路
</ft-button>
<ft-button class="button-style" :click-handle="syringePipelineWashStop">
<ft-button class="button-style" :click-handle="syringePipelineWashStop" :disabled="!systemStore.systemStatus.cleaningSyringePipeline || !systemStore.systemStatus.cleaningNozzlePipeline">
结束清洗
</ft-button>
</div>

9
src/views/main/index.vue

@ -81,7 +81,7 @@ const ingObj = {
const status = computed(() => {
const keys = Object.keys(systemStore.systemStatus).filter((key) => {
return !['paused', 'suspendable', 'selfTestCompleted'].includes(key)
return !['suspendable', 'selfTestCompleted'].includes(key)
})
let str = ''
keys.forEach((key) => {
@ -133,8 +133,7 @@ const slideTrayOut = async () => {
watch(() => isClose.value, async (newValue) => {
if (!newValue) {
await getStatus()
console.log(1111)
if (systemStore.systemStatus.spraying) {
if (systemStore.systemStatus.spraying && router.currentRoute.value.path !== '/spray') {
ElMessageBox.confirm('检测到您有正在喷涂的任务,是否进入喷涂?', '提示', {
type: 'warning',
confirmButtonText: '确定',
@ -193,10 +192,10 @@ watch(() => isClose.value, async (newValue) => {
</ft-button>
</div>
<div>
<ft-button :click-handle="slideTrayIn">
<ft-button :click-handle="slideTrayIn" :disabled="systemStore.systemStatus.spraying">
推入托盘
</ft-button>
<ft-button :click-handle="slideTrayOut">
<ft-button :click-handle="slideTrayOut" :disabled="systemStore.systemStatus.spraying">
推出托盘
</ft-button>
</div>

30
src/views/spray/index.d.ts

@ -0,0 +1,30 @@
interface SprayForm {
matrixId: undefined | number
matrixCraftId: undefined | number
matrixPathType: string
motorZHeight: undefined | number
gasPressure: undefined | number
volume: undefined | number
highVoltage: boolean
highVoltageValue: undefined | number
spacing: undefined | number
movingSpeed: undefined | number
times: undefined | number
position: {
select: boolean
x1: number
y1: number
x2: number
y2: number
index: number
}[]
}
interface SprayUpdateForm {
motorZHeight: undefined | number
gasPressure: undefined | number
volume: undefined | number
highVoltage: boolean
highVoltageValue: undefined | number
movingSpeed: undefined | number
}

277
src/views/spray/index.vue

@ -12,7 +12,7 @@ import Edit from 'components/martixCraft/Edit/index.vue'
import TrayGraph from 'components/spray/trayGraph/index.vue'
import { FtMessage } from 'libs/message'
import { socket } from 'libs/socket'
import { sendControl } from 'libs/utils'
import { colors, sendControl } from 'libs/utils'
import { useSystemStore } from 'stores/useSystemStore'
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
@ -55,17 +55,16 @@ onMounted(async () => {
await getDeviceStatus().then((res: any) => {
systemStore.updateSystemStatus(res)
if (systemStore.systemStatus.spraying) {
FtMessage.info('正在喷涂中...')
maskVisible.value = true
getSpraying()
}
})
})
const isActive = true
onUnmounted(() => {
socket.unregisterCallback(sprayPointReceiveMessage, 'spray_point')
socket.unregisterCallback(finishMessage, 'cmd_response')
// isActive = false
})
const getSpraying = async () => {
@ -100,7 +99,7 @@ const getMatrixList = async () => {
matrixList.value = res.list
}
const form = ref({
const form = ref<SprayForm>({
matrixId: undefined,
matrixCraftId: undefined,
matrixPathType: 'horizontal', //
@ -112,10 +111,15 @@ const form = ref({
spacing: undefined, //
movingSpeed: undefined, //
times: undefined, //
position: [{ select: true }, { select: false }, { select: false }, { select: false }],
position: [
{ select: true, x1: 0, y1: 0, x2: 25, y2: 75, index: 0 },
{ select: false, x1: 0, y1: 0, x2: 25, y2: 75, index: 1 },
{ select: false, x1: 0, y1: 0, x2: 25, y2: 75, index: 2 },
{ select: false, x1: 0, y1: 0, x2: 25, y2: 75, index: 3 },
],
})
const updateForm = ref({
const updateForm = ref<SprayUpdateForm>({
motorZHeight: undefined, //
gasPressure: undefined, // Mpa
volume: undefined, // uL
@ -152,7 +156,7 @@ const checkPosition = () => {
return position
}
const maskVisible = ref(false)
const maskVisible = ref(true)
const startWork = async () => {
formRef.value.validate(async (valid: boolean) => {
console.log('valid', valid)
@ -174,9 +178,7 @@ const startWork = async () => {
position,
},
}
console.log(params)
// socket.init(sprayPointReceiveMessage, 'spray_point')
// socket.init(finishMessage, 'cmd_response')
maskVisible.value = true
await sendControl(params)
currentSpeed = Number(form.value.movingSpeed)
@ -186,7 +188,7 @@ const startWork = async () => {
let currentSpeed = 0
// let poll: ReturnType<typeof setInterval>
console.log(currentSpeed)
const colors = ['#FAF0E6', '#191970', '#2E8B57', '#C0FF3E', '#8B658B', '#EE7942', '#EE1289', '#FF00FF', '#C6E2FF', '#556B2F', '#00BFFF', '#7B68EE']
const sprayPointReceiveMessage = (data: any) => {
if (data.cmdId === cmdId) {
const { currentPoint, index, number } = data
@ -238,11 +240,7 @@ const finishMessage = (data: any) => {
const drawLine = async (index: number, point: { x: number, y: number }, number: number) => {
console.log('drawLine', sprayRefs.value[index], index, point, number)
await nextTick(() => {
if (!isActive) {
return
}
if (!(sprayRefs.value[index].hasLine(number))) {
if (!sprayRefs.value[index].hasLine(number)) {
sprayRefs.value[index].addLine(colors[number])
}
sprayRefs.value[index].updateLine(point, number, colors[number])
@ -346,7 +344,7 @@ const rules = {
const addVisible = ref(false)
const ok = async () => {
addVisible.value = false
matrixCraftList.value = await getListByMatrixId(form.value.matrixId)
matrixCraftList.value = await getListByMatrixId(form.value.matrixId as number)
}
const upDateLoading = ref(false)
@ -381,118 +379,119 @@ const addCraft = () => {
<template>
<div class="spray-container">
<el-form ref="formRef" label-width="120" :model="form" :rules="rules">
<div class="spray-left">
<div>
<ft-button type="primary" @click="startWork">
开始喷涂
</ft-button>
<ft-button type="primary" @click="updateParam">
调整参数
</ft-button>
<ft-button @click="pauseWork">
暂停喷涂
</ft-button>
<ft-button @click="continueWork">
继续喷涂
</ft-button>
<ft-button @click="stopWork">
结束喷涂
</ft-button>
</div>
<div style="display: flex">
<div class="select-box" />
</div>
<div style="display: flex; position: relative">
<div v-show="maskVisible" class="mask-box" />
<div
v-for="(p, index) in form.position"
:key="index"
style="display: flex; flex-direction: column; align-items: center"
>
<p class="tray-name">
玻片{{ index + 1 }}
</p>
<TrayGraph ref="sprayRefs" :container="`spray-${index + 1}`" :select="p.select" />
<el-checkbox v-model="p.select" style="margin-top: 10px" />
</div>
</div>
<div class="button-box">
<ft-button type="primary" :disabled="systemStore.systemStatus.spraying" @click="startWork">
开始喷涂
</ft-button>
<ft-button type="primary" :disabled="!systemStore.systemStatus.spraying" @click="updateParam">
调整参数
</ft-button>
<ft-button type="primary" :disabled="!systemStore.systemStatus.suspendable" @click="pauseWork">
暂停喷涂
</ft-button>
<ft-button type="primary" :disabled="!systemStore.systemStatus.paused" @click="continueWork">
继续喷涂
</ft-button>
<ft-button type="primary" :disabled="!systemStore.systemStatus.spraying" @click="stopWork">
结束喷涂
</ft-button>
</div>
<div class="spray-form">
<el-form-item label="基质" prop="matrixId">
<el-select v-model="form.matrixId" placeholder="" @change="matrixChange">
<el-option v-for="item in matrixList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="工艺">
<el-select v-model="form.matrixCraftId" placeholder="" @change="matrixCraftChange">
<el-option v-for="item in matrixCraftList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="喷涂路线">
<div class="route-img">
<img
style="margin-left: 20px"
:src="form.matrixPathType === 'horizontal' ? route_horizontal_active : route_horizontal"
alt=""
@click="form.matrixPathType = 'horizontal'"
>
<img
style="margin: 0 20px"
:src="form.matrixPathType === 'vertical' ? route_vertical_active : route_vertical"
alt=""
@click="form.matrixPathType = 'vertical'"
>
<img
:src="form.matrixPathType === 'grid' ? route_active : route"
alt=""
@click="form.matrixPathType = 'grid'"
<div class="spray-box">
<div class="spray-left">
<div style="display: flex; position: relative;height: fit-content">
<div v-show="maskVisible" class="mask-box" />
<div
v-for="(p, index) in form.position"
:key="index"
style="display: flex; flex-direction: column; align-items: center"
>
<p class="tray-name">
玻片{{ index + 1 }}
</p>
<TrayGraph ref="sprayRefs" :container="`spray-${index + 1}`" :select="p.select" />
<el-checkbox v-model="p.select" />
</div>
</div>
</el-form-item>
<el-form-item label="Z轴高度" prop="motorZHeight">
<el-input v-model="form.motorZHeight" type="number" />
<span class="unit-text">mm</span>
</el-form-item>
<el-form-item label="氮气气压" prop="gasPressure">
<el-input v-model="form.gasPressure" type="number" />
<span class="unit-text">Mpa</span>
</el-form-item>
<el-form-item label="基质流速" prop="volume">
<el-input v-model="form.volume" type="number" />
<span class="unit-text">uL/min</span>
</el-form-item>
<el-form-item label="是否加电" prop="highVoltageValue">
<div class="voltage-box">
<el-switch v-model="form.highVoltage" />
<el-input
v-show="form.highVoltage"
v-model="form.highVoltageValue"
max="5000"
type="number"
class="voltage-input"
/>
<span v-show="form.highVoltage" class="unit-text"> V</span>
</div>
</el-form-item>
<el-form-item label="移动速度" prop="movingSpeed">
<el-input v-model="form.movingSpeed" type="number" />
<span class="unit-text">mm/s</span>
</el-form-item>
<el-form-item label="间距" prop="spacing">
<el-input v-model="form.spacing" type="number" />
<span class="unit-text">mm</span>
</el-form-item>
<el-form-item label="喷涂次数" prop="times">
<el-input v-model="form.times" type="number" />
<span class="unit-text"></span>
</el-form-item>
<div style="display: flex; justify-content: center">
<ft-button type="primary" :loading="upDateLoading" @click="updateCraft">
更新工艺
</ft-button>
<ft-button type="primary" @click="addCraft">
保存到新工艺
</ft-button>
</div>
<div class="spray-form">
<el-form-item label="基质" prop="matrixId">
<el-select v-model="form.matrixId" placeholder="" @change="matrixChange">
<el-option v-for="item in matrixList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="工艺">
<el-select v-model="form.matrixCraftId" placeholder="" @change="matrixCraftChange">
<el-option v-for="item in matrixCraftList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="喷涂路线">
<div class="route-img">
<img
style="margin-left: 20px"
:src="form.matrixPathType === 'horizontal' ? route_horizontal_active : route_horizontal"
alt=""
@click="form.matrixPathType = 'horizontal'"
>
<img
style="margin: 0 20px"
:src="form.matrixPathType === 'vertical' ? route_vertical_active : route_vertical"
alt=""
@click="form.matrixPathType = 'vertical'"
>
<img
:src="form.matrixPathType === 'grid' ? route_active : route"
alt=""
@click="form.matrixPathType = 'grid'"
>
</div>
</el-form-item>
<el-form-item label="Z轴高度" prop="motorZHeight">
<el-input v-model="form.motorZHeight" type="number" />
<span class="unit-text">mm</span>
</el-form-item>
<el-form-item label="氮气气压" prop="gasPressure">
<el-input v-model="form.gasPressure" type="number" />
<span class="unit-text">Mpa</span>
</el-form-item>
<el-form-item label="基质流速" prop="volume">
<el-input v-model="form.volume" type="number" />
<span class="unit-text">uL/min</span>
</el-form-item>
<el-form-item label="是否加电" prop="highVoltageValue">
<div class="voltage-box">
<el-switch v-model="form.highVoltage" />
<el-input
v-show="form.highVoltage"
v-model="form.highVoltageValue"
max="5000"
type="number"
class="voltage-input"
/>
<span v-show="form.highVoltage" class="unit-text"> V</span>
</div>
</el-form-item>
<el-form-item label="移动速度" prop="movingSpeed">
<el-input v-model="form.movingSpeed" type="number" />
<span class="unit-text">mm/s</span>
</el-form-item>
<el-form-item label="间距" prop="spacing">
<el-input v-model="form.spacing" type="number" />
<span class="unit-text">mm</span>
</el-form-item>
<el-form-item label="喷涂次数" prop="times">
<el-input v-model="form.times" type="number" />
<span class="unit-text"></span>
</el-form-item>
<el-form-item>
<div style="display: flex; justify-content: center;width: 100%">
<ft-button type="primary" :loading="upDateLoading" @click="updateCraft">
更新工艺
</ft-button>
<ft-button type="primary" @click="addCraft">
保存到新工艺
</ft-button>
</div>
</el-form-item>
</div>
</div>
</el-form>
@ -537,7 +536,6 @@ const addCraft = () => {
</div>
</el-form>
</el-drawer>
<!-- <start-spray v-model="wsList" :visible @close="visible = false" /> -->
<Edit v-if="addVisible" :matrix-list :form-data other-page @ok="ok" @cancel="addVisible = false" />
</div>
</template>
@ -550,17 +548,28 @@ const addCraft = () => {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: auto;
.spray-left {
.button-box {
display: flex;
flex-direction: column;
justify-content: center;
}
.spray-form {
.spray-box {
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
.spray-left {
display: flex;
flex-direction: column;
justify-content: center
}
.spray-form {
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
}
.el-input,
@ -601,7 +610,7 @@ const addCraft = () => {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
z-index: 5000;
z-index: 2000;
}
.tray-name {
color: var(--el-color-primary);

31
src/views/spraySet/index.vue

@ -222,13 +222,26 @@ const dehumidifierStop = async () => {
<el-input v-model="clearSpeed" type="number" style="width: 100px; margin: 0 10px" />
<span>uL/min</span>
</div>
<ft-button ref="syringePipelineWashRef" type="primary" :click-handle="syringePipelineWash">
<ft-button
ref="syringePipelineWashRef"
type="primary"
:click-handle="syringePipelineWash"
:disabled="systemStore.systemStatus.spraying
|| systemStore.systemStatus.cleaningSyringePipeline
|| systemStore.systemStatus.cleaningNozzlePipeline
|| systemStore.systemStatus.prefilling"
>
清洗注射器管路
</ft-button>
<ft-button ref="nozzlePipelineWashRef" type="primary" :click-handle="nozzlePipelineWash">
<ft-button
ref="nozzlePipelineWashRef" type="primary" :click-handle="nozzlePipelineWash" :disabled="systemStore.systemStatus.spraying
|| systemStore.systemStatus.cleaningSyringePipeline
|| systemStore.systemStatus.cleaningNozzlePipeline
|| systemStore.systemStatus.prefilling"
>
清洗喷嘴管路
</ft-button>
<ft-button :click-handle="pipelineWashStop">
<ft-button :click-handle="pipelineWashStop" :disabled="!systemStore.systemStatus.cleaningSyringePipeline || !systemStore.systemStatus.cleaningNozzlePipeline">
停止清洗
</ft-button>
</div>
@ -248,13 +261,17 @@ const dehumidifierStop = async () => {
<el-input v-model="speed" type="number" style="width: 100px; margin: 0 10px" />
<span>uL/min</span>
</div>
<ft-button ref="matrixPrefillRef" type="primary" :click-handle="matrixPrefill">
<ft-button
ref="matrixPrefillRef" type="primary" :click-handle="matrixPrefill" :disabled="systemStore.systemStatus.spraying
|| systemStore.systemStatus.cleaningSyringePipeline
|| systemStore.systemStatus.cleaningNozzlePipeline
|| systemStore.systemStatus.prefilling"
>
开始预充
</ft-button>
<ft-button :click-handle="matrixPrefillStop">
<ft-button :click-handle="matrixPrefillStop" :disabled="!systemStore.systemStatus.prefilling">
结束预充
</ft-button>
<!-- <ft-button @click="motorToHome">回原点</ft-button> -->
</div>
</el-card>
<el-card>
@ -280,7 +297,7 @@ const dehumidifierStop = async () => {
<ft-button ref="dehumidifierStartRef" type="primary" :click-handle="dehumidifierStart">
开始除湿
</ft-button>
<ft-button :click-handle="dehumidifierStop">
<ft-button :click-handle="dehumidifierStop" :disabled="!systemStore.systemStatus.dehumidifierRunning">
停止除湿
</ft-button>
</div>

Loading…
Cancel
Save