按钮状态

src/api/index.js

@@ -21,13 +21,20 @@ export const breakOffAutoCheckApi = id => {
   })
 }
 
-export const saveCheckResult = (checkNumber, currentTaskId) => {
+export const saveCheckResult = (
+  checkNumber,
+  currentTaskId,
+  result_serial,
+  result_img,
+) => {
   return request({
     url: `/check/save`,
     method: 'POST',
     data: {
       checkNumber,
       taskId: currentTaskId,
+      result_serial,
+      result_img,
     },
   })
 }

src/pages/index.vue

@@ -306,11 +306,13 @@
           </div>
         </div>
         <div class="progress_btn">
-          <p class="title">核查进度（0/121）</p>
-          <t-progress theme="plump" :percentage="0" />
+          <p class="title">
+            核查进度（{{ hasTestedLength }} / {{ testArrLength }}）
+          </p>
+          <t-progress theme="plump" :percentage="detailProcess" />
         </div>
-        <div class="history_btn">
-          <p class="first">3号核反应堆</p>
+        <div class="history_btn" @click="catCurrentTaskDetail">
+          <p class="first">{{ imageStore.nuclearCoreName }}</p>
           <p class="second">当前历史记录</p>
         </div>
       </div>
@@ -366,7 +368,7 @@ import {
 import socket from '@/utils/websocket'
 import Cookie from '@/utils/cookie'
 import { MessagePlugin } from 'tdesign-vue-next'
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, onUnmounted } from 'vue'
 import Excel from 'cpns/Excel'
 import Nuclear from 'cpns/Nuclear'
 import Image from 'cpns/Image'
@@ -377,6 +379,7 @@ import DetailTable from 'cpns/DetailTable'
 import Debug from 'cpns/Debug'
 import { startAutoCheckApi, breakOffAutoCheckApi, saveCheckResult } from '@/api'
 import { getProcessTaskInfoApi, getNextCoordApi } from '@/api/task'
+import { getCharacterRecognitionResult } from '@/command'
 const accountStore = useAccountStore()
 const taskStore = useTaskStore()
 const imageStore = useImageStore()
@@ -468,7 +471,7 @@ const getInitData = async () => {
     } else {
       taskStore.updateCurrentCoord(null)
       // taskStore.updateCurrentTaskId(null)
-      taskStore.updateExcelData([])
+      // taskStore.updateExcelData([])
       imageStore.updateShowImage(false)
       taskStore.updateCheckStatus(false)
       taskStore.updateTaskStatus(0)
@@ -522,15 +525,10 @@ const nextBtn = async () => {
 }
 
 const check = async () => {
-  const checkNumber = checkStore.checkNumber
-  const currentTaskId = taskStore.currentTaskId
   // 检查当前坐标点的结果是否正确
   // 获取到结果后，传到后端保存
-  const res = await saveCheckResult(checkNumber, currentTaskId)
-  if (res?.code == 200) {
-    // 核查成功后请求新数据
-    // 更新exceldata
-  }
+  // 通过ws发送检查
+  websocketsend(getCharacterRecognitionResult)
 }
 
 onMounted(async () => {
@@ -539,7 +537,104 @@ onMounted(async () => {
   getInitData()
 })
 
+const catCurrentTaskDetail = () => {
+  const currentTaskId = taskStore.currentTaskId
+  // 查看当前进行任务的详情
+  taskStore.updateCurrentDetailTaskId(currentTaskId)
+  imageStore.updateShowImage(false)
+  accountStore.changePage(0)
+  taskStore.getExcelList(currentTaskId)
+}
+
+onUnmounted(() => {
+  websock.value.close()
+})
+
 // websocket 客户端 直接发送核查并获取结果
+
+// 是否真正建立连接
+const lockReconnect = ref(false)
+// 断开 重连倒计时
+const timeoutnum = ref(null)
+
+const websock = ref(null)
+
+const reconnect = () => {
+  //重新连接
+  if (lockReconnect.value) {
+    return
+  }
+  lockReconnect.value = true
+  //没连接上会一直重连，设置延迟避免请求过多
+  timeoutnum.value && clearTimeout(timeoutnum.value)
+  timeoutnum.value = setTimeout(function () {
+    //新连接
+    initWebSocket()
+    lockReconnect.value = false
+  }, 5000)
+}
+
+// 接收到消息后改变状态
+const websocketonmessage = async e => {
+  // 相机启动停止后接收到回执 而后发送获取相机状态指令 实时改变页面状态
+  const data = JSON.parse(e.data)
+  const checkNumber = checkStore.checkNumber
+  const currentTaskId = taskStore.currentTaskId
+  console.log(data)
+  const { messageId, success } = data
+  if (success) {
+    switch (messageId) {
+      case 'getCharacterRecognitionResult':
+        // 解析result 传入后端
+        // result_img
+        // result_serial
+        const res = await saveCheckResult(checkNumber, currentTaskId)
+        if (res?.code == 200) {
+          // 核查成功后请求新数据
+          // 更新exceldata
+          taskStore.getExcelList(taskStore.currentTaskId)
+        }
+        break
+      default:
+        break
+    }
+  } else {
+    MessagePlugin('error', { content: 'ws发送指令执行错误' })
+  }
+}
+
+const websocketonopen = () => {
+  console.log('客户端链接成功！！！')
+}
+
+const websocketonerror = () => {
+  reconnect()
+}
+
+// 发送消息
+const websocketsend = data => {
+  websock.value.send(data)
+}
+
+const websocketclose = () => {
+  reconnect()
+}
+
+const initWebSocket = () => {
+  //初始化weosocket
+  const wsuri = import.meta.env.VITE_WEBSOCKET_CAMERA_URL
+  websock.value = new WebSocket(wsuri)
+  // 客户端接收服务端数据时触发
+  websock.value.onmessage = websocketonmessage
+  // 连接建立时触发
+  websock.value.onopen = websocketonopen
+  // 通信发生错误时触发
+  websock.value.onerror = websocketonerror
+  // 连接关闭时触发
+  websock.value.onclose = websocketclose
+}
+
+initWebSocket()
 </script>
 
 <style lang="scss" scoped>