matrix-spray-web/src/views/spray/index.vue

<script setup lang="ts">
import { list as listMatrix } from 'apis/matrix'
import { getDeviceStatus, getSprayStatus, setParams } from 'apis/system'
import SprayParams from 'components//spray/sprayParams/index.vue'
import Countdown from 'components/spray/Countdown/index.vue'
import TrayGraph from 'components/spray/trayGraph/index.vue'
import { FtMessage } from 'libs/message'
import { socket } from 'libs/socket'
import { colors, sendControl } from 'libs/utils'
import { cloneDeep } from 'lodash'
import { useSprayStore } from 'stores/useSprayStore'
import { useSystemStore } from 'stores/useSystemStore'
import { nextTick, onMounted, onUnmounted, ref } from 'vue'

const systemStore = useSystemStore()
const sprayStore = useSprayStore()

onMounted(async () => {
  socket.init(sprayPointReceiveMessage, 'spray_point')
  socket.init(finishMessage, 'cmd_response')
  socket.init(finishTimeMessage, 'spray_task_finish_time')
  await getMatrixList()
  await getDeviceStatus().then((res: any) => {
    systemStore.updateSystemStatus(res)
    if (systemStore.systemStatus.spraying) {
      FtMessage.info('正在喷涂中...')
      maskVisible.value = true
      getSpraying()
    }
  })
})

onUnmounted(() => {
  socket.unregisterCallback(sprayPointReceiveMessage, 'spray_point')
  socket.unregisterCallback(finishMessage, 'cmd_response')
  socket.unregisterCallback(finishTimeMessage, 'spray_task_finish_time')
})

const matrixList = ref<{ name: string, id: number }[]>([])
const getMatrixList = async () => {
  const res = await listMatrix({ pageNum: 1, pageSize: 100, matrixName: '' })
  matrixList.value = res.list
}

const getSpraying = async () => {
  const res: any = await getSprayStatus()
  cmdId = res.cmdId
  res.sprayTaskParams.forEach((item: any) => {
    sprayStore.updateSprayForm({ ...item, select: true }, item.index)
  })
  res.sprayTaskSprayedList.forEach((task: any) => {
    nextTick(() => {
      drawLine(task.index, { x: task.sprayedPoints.x * 5, y: task.sprayedPoints.y * 5 }, task.number)
    })
  })
  finishTImeList.value = res.finishTime
}

const sprayRefs = ref<any>([])

const maskVisible = ref(false)

const startWork = async () => {
  const data = sprayStore.sprayTaskParams.filter(item => item.select)
  if (!data.length) {
    FtMessage.error('至少选择一个喷涂玻片')
    return
  }
  const errIndex = []
  sprayStore.sprayTaskParams.forEach((item, index) => {
    if (!item.hasSet && item.select) {
      errIndex.push(index)
      FtMessage.error(`玻片${index + 1}: 请设置喷涂参数`)
    }
  })
  if (errIndex.length) {
    return
  }
  sprayStore.sprayTaskParams.forEach((item, index) => {
    if (item.select) {
      sprayRefs.value[index].clearLines()
    }
  })
  await setParams({ sprayTaskParams: sprayStore.sprayTaskParams.filter(item => item.select) })
  cmdId = Date.now().toString()
  const params = {
    cmdCode: 'matrix_spray_start',
    cmdId,
    params: {},
  }

  await sendControl(params)
  maskVisible.value = true
  // currentSpeed = Number(form.value.movingSpeed)
}

const countdownRefs = ref([])

const pauseWork = async () => {
  const params = {
    cmdCode: 'matrix_spray_pause',
    cmdId: '',
  }
  await sendControl(params)
  countdownRefs.value.forEach((item) => {
    item?.stopTimer()
  })
}

const continueWork = async () => {
  const params = {
    cmdCode: 'matrix_spray_continue',
    cmdId: '',
    params: {},
  }
  await sendControl(params)
  countdownRefs.value.forEach((item) => {
    item?.startTimer()
  })
  // currentSpeed = Number(form.value.movingSpeed)
}

const stopWork = async () => {
  const params = {
    cmdCode: 'matrix_spray_stop',
    cmdId: '',
  }
  await sendControl(params)
  sprayStore.sprayTaskParams.forEach((item, index) => {
    if (item.select) {
      sprayRefs.value[index].clearLines()
      item.select = false
    }
  })
}

// let currentSpeed = 0
// console.log(currentSpeed)
// let poll: ReturnType<typeof setInterval>

let cmdId = ''
const sprayPointReceiveMessage = (data: any) => {
  if (data.cmdId === cmdId) {
    const { currentPoint, index, number } = data
    drawLine(index, { x: currentPoint.x * 5, y: currentPoint.y * 5 }, number)
  }

  // if (poll) {
  //   clearInterval(poll)
  // }
  // const { currentPoint, nextPoint, index } = data
  // // 计算累加的mm
  // const moveDistance = currentSpeed / 2
  // // y轴移动
  // if (currentPoint.x === nextPoint.x) {
  //   let currentY = currentPoint.y
  //   poll = setInterval(() => {
  //     currentY += moveDistance
  //     if (currentY >= nextPoint.y) {
  //       clearInterval(poll)
  //     }
  //     drawLine(index, { x: currentPoint.x * 5, y: currentY * 5 })
  //   }, 500)
  // }
  // else if (currentPoint.y === nextPoint.y) {
  //   // x轴移动
  //   let currentX = currentPoint.x
  //   poll = setInterval(() => {
  //     currentX += moveDistance
  //     if (currentX >= nextPoint.x) {
  //       clearInterval(poll)
  //     }
  //     drawLine(index, { x: currentX * 5, y: currentPoint.y * 5 })
  //   }, 500)
  // }
}

const finishMessage = (data: any) => {
  if (data.cmdId === cmdId) {
    if (data.status === 'fail') {
      FtMessage.error(data.title)
    }
    if (data.status === 'success') {
      FtMessage.success('喷涂执行成功')
    }
    if (data.status === 'spray_task_finish') {
      console.log('------------------', data, cmdId, sprayStore.sprayTaskParams)
      sprayStore.sprayTaskParams.forEach((item, index) => {
        if (item.select) {
          sprayRefs.value[index].clearLines()
          item.select = false
        }
      })
      finishTImeList.value = []
      maskVisible.value = false
    }
  }
}

const finishTImeList = ref<{ finishTime: number, index: number }[]>([])

const finishTimeMessage = (data: any) => {
  if (data.cmdId !== cmdId)
    return
  finishTImeList.value = data.finishTime
}

const drawLine = async (index: number, point: { x: number, y: number }, number: number) => {
  console.log('drawLine', sprayRefs.value[index], index, point, number)
  await nextTick(() => {
    if (!sprayRefs.value[index].hasLine(number)) {
      sprayRefs.value[index].addLine(colors[number])
    }
    sprayRefs.value[index].updateLine(point, number, colors[number])
  })
}

const selectCraftVisible = ref(false)
const ok = async (data: any) => {
  selectCraftVisible.value = false
  sprayStore.updateSprayForm(data, selectIndex.value)
}

const sprayParamsCancelHandle = () => {
  selectCraftVisible.value = false
}

const selectIndex = ref(0)
const currentFormData = ref()
const openSetting = (index: number) => {
  selectIndex.value = index
  currentFormData.value = cloneDeep(sprayStore.sprayTaskParams[index])
  sprayParamsDisabled.value = false
  selectCraftVisible.value = true
}

const checkChange = (index: number, checked: boolean) => {
  // if (checked) {
  //   selectCraftVisible.value = true
  // }
  console.log(checked, index)
}

const sprayParamsDisabled = ref(false)

const viewParams = (index: number) => {
  selectIndex.value = index
  currentFormData.value = cloneDeep(sprayStore.sprayTaskParams[index])
  sprayParamsDisabled.value = true
  selectCraftVisible.value = true
}
</script>

<template>
  <div class="spray-container">
    <div class="button-box">
      <ft-button type="primary" :disabled="systemStore.systemStatus.spraying" :click-handle="startWork">
        开始喷涂
      </ft-button>
      <!--            <ft-button type="primary" :disabled="!systemStore.systemStatus.spraying" @click="updateParam"> -->
      <!--              调整参数 -->
      <!--            </ft-button> -->
      <ft-button
        type="primary"
        :disabled="!systemStore.systemStatus.spraying || systemStore.systemStatus.paused"
        :click-handle="pauseWork"
      >
        暂停喷涂
      </ft-button>
      <ft-button type="primary" :disabled="!systemStore.systemStatus.paused" :click-handle="continueWork">
        继续喷涂
      </ft-button>
      <ft-button type="primary" :disabled="!systemStore.systemStatus.spraying" :click-handle="stopWork">
        结束喷涂
      </ft-button>
    </div>
    <div class="spray-box">
      <div v-show="maskVisible" class="mask-box" />
      <div
        v-for="(p, index) in sprayStore.sprayTaskParams"
        :key="index"
        style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly"
      >
        <p class="tray-name">
          <el-checkbox v-model="p.select" @change="val => checkChange(index, val)" />
          <span>玻片{{ index + 1 }}</span>
        </p>
        <TrayGraph ref="sprayRefs" :key="index" :container="`spray-${index + 1}`" :edit-select="false" />

        <ft-button v-if="!systemStore.systemStatus.spraying" type="primary" @click="() => openSetting(index)">
          <template #default>
            <div class="spray-status">
              <el-icon v-show="sprayStore.sprayTaskParams[index].hasSet" color="#67C23A">
                <SuccessFilled />
              </el-icon>
              <el-icon v-show="!sprayStore.sprayTaskParams[index].hasSet" color="#E6A23C">
                <WarningFilled />
              </el-icon>
              <span>喷涂设置</span>
            </div>
          </template>
        </ft-button>

        <ft-button v-else type="primary" @click="() => viewParams(index)">
          运行参数
        </ft-button>
        <div class="spray-params-footer">
          <Countdown v-if="finishTImeList.find(item => item.index === index)?.finishTime" ref="countdownRefs" :end-time="finishTImeList.find(item => item.index === index)?.finishTime" />
        </div>
      </div>
    </div>
    <SprayParams
      v-if="selectCraftVisible"
      :disabled="sprayParamsDisabled"
      :form-data="currentFormData"
      @ok="ok"
      @cancel="sprayParamsCancelHandle"
    />
  </div>
</template>

<style scoped lang="scss">
.spray-container {
  width: 100%;
  height: 100%;
  padding: 30px 10px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  .button-box {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 120px;
    gap: 50px;
  }
  .spray-box {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 200px;
    //gap: 200px;
  }
}
.el-input,
.el-select {
  width: 400px;
  margin: 0 40px;
}
.unit-text {
  font-size: 40px;
  color: #0349a8;
  font-weight: 500;
}
.select-box {
  display: flex;
  margin: 40px;
}
.route-img {
  display: flex;
  img {
    width: 70px;
  }
}

.voltage-box {
  display: flex;
  align-items: center;
  margin-left: 40px;
  height: 100px;
  .voltage-input {
    width: 280px;
  }
}
:deep(.el-form-item__error) {
  font-size: 22px;
  margin-left: 50px;
}
.mask-box {
  position: absolute;
  width: 90%;
  top: 0;
  height: 50%;
  background: rgba(255, 255, 255, 0.01);
  z-index: 2000;
}
.tray-name {
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.spray-params-footer {
  height: 80px;
}
.spray-status {
  display: flex;
  align-items: center;
  gap: 10px;
}
:deep(.ft-button) {
  margin: 0;
}
:deep(.el-drawer) {
  width: 33% !important;
}
:deep(.el-tabs) {
  margin: 0;
}
:deep(.el-tabs__content) {
  display: none;
}
</style>