设备补召修改

src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue

@@ -18,9 +18,21 @@
             </el-form-item>
         </div>
         <div class="current_body" ref="tbodyRef">
-            <vxe-table border ref="tableRef" :data="dirList" :height="tableHeight" style="margin-right: 30px">
+            <vxe-table
+                border
+                ref="tableRef"
+                :data="dirList"
+                height="auto"
+                style="margin-right: 30px; overflow-y: auto"
+                :style="{ height: tableHeight }"
+            >
                 <vxe-column align="center" type="checkbox" width="60"></vxe-column>
                 <vxe-column align="center" field="name" title="名称"></vxe-column>
+                <vxe-column align="center" field="status" title="补召进度">
+                    <template #default="{ row }">
+                        <el-progress v-model="row.status" :percentage="row.status" />
+                    </template>
+                </vxe-column>
                 <vxe-column align="center" field="startTime" title="起始时间"></vxe-column>
                 <vxe-column align="center" field="endTime" title="结束时间"></vxe-column>
             </vxe-table>
@@ -28,10 +40,11 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, defineProps, defineExpose } from 'vue'
+import { ref, onMounted, defineProps, defineExpose, onBeforeUnmount } from 'vue'
 import { getMakeUpData, getAskDirOrFile, offlineDataUploadMakeUp } from '@/api/cs-harmonic-boot/recruitment.ts'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import { useRouter, useRoute } from 'vue-router'
+import { mainHeight } from '@/utils/layout'
 import {
     Plus,
     Back,
@@ -49,6 +62,7 @@ import {
     FolderOpened
 } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
+import mqtt from 'mqtt'
 const checkList: any = ref([])
 // const props = defineProps(['lineId'])
 const { push, currentRoute, go } = useRouter() // 路由
@@ -67,18 +81,17 @@ const getMakeUpDataList = (row: any) => {
                 : item.prjDataPath.replace('/bd0/cmn/', '')
             item.startTime = item.startTime ? item.startTime : '/'
             item.endTime = item.endTime ? item.endTime : '/'
+            item.status = Math.floor(Math.random() * 100) + 1
         })
         dirList.value = res.data
-        console.log(dirList.value, '查询3333333333333333')
         loading.value = false
     })
 }
 // 进入文件夹
 const dirCheckedList: any = ref([])
 const tbodyRef = ref()
-const tableHeight = ref(0)
+const tableHeight = mainHeight(90).height
 const routes = useRoute()
-console.log(routes, '+++++++++++++89')
 const tableRef = ref()
 const handleUpDevice = () => {
     let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
@@ -98,16 +111,9 @@ const handleUpDevice = () => {
         ndid: routes.query.ndid,
         proList: proList
     }
-    console.log(
-        tableRef.value.getCheckboxRecords().map((item: any) => {
-            return item.prjDataPath
-        }),
-        form
-    )
     loading.value = true
     offlineDataUploadMakeUp(form)
         .then((res: any) => {
-            console.log(res, '-------')
             if (res.code == 'A0000') {
                 ElMessage.success(res.message)
                 loading.value = false
@@ -133,10 +139,76 @@ const handleIntoDir = (row: any) => {
         console.log(dirList.value, '查询3333333333333333')
     })
 }
+
+const mqttRef = ref()
+
+const connectMqtt = () => {
+    if (mqttRef.value) {
+        if (mqttRef.value.connected) {
+            return
+        }
+    }
+    const options = {
+        protocolId: 'MQTT',
+        qos: 2,
+        clean: true,
+        connectTimeout: 30 * 1000,
+        clientId: 'mqttjs' + Math.random(),
+        username: 't_user',
+        password: 'njcnpqs'
+    }
+    // 线上
+    // const url = 'wss://pqmcn.com:8087/mqtt'
+    const url = 'ws://192.168.1.24:8085/mqtt'
+    mqttRef.value = mqtt.connect(url, options)
+}
+connectMqtt()
+mqttRef.value.on('connect', (e: any) => {
+    // ElMessage.success('连接mqtt服务器成功!')
+    console.log('mqtt客户端已连接....')
+    // mqttRef.value.subscribe('/Web/Progress')
+    // mqttRef.value.subscribe('/Web/Progress/+')
+    mqttRef.value.subscribe('/dataOnlineRecruitment/Progress/' + route.value.id)
+})
+const mqttMessage = ref<any>({})
+const status: any = ref()
+mqttRef.value.on('message', (topic: any, message: any) => {
+    // console.log('🚀 ~ mqttRef.value.on ~ message:', JSON.parse(message))
+    // console.log('mqtt接收到消息', message,topic)
+    console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
+    // "{allStep:\""+times+"\",nowStep:"+i+"}"
+    let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
+    // eval('(' + str + ')').includes('fileName')
+    let regex1 = /allStep:(.*?),nowStep/
+    let regex2 = /nowStep:(.*?)}/
+    mqttMessage.value = {
+        allStep: str.match(regex1)[1],
+        nowStep: str.match(regex2)[1]
+    }
+    console.log(mqttMessage.value, '?????????')
+    status.value = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100))
+    if (status.value == 100) {
+        status.value = 99
+    }
+})
+
+mqttRef.value.on('error', (error: any) => {
+    console.log('mqtt连接失败...', error)
+    mqttRef.value.end()
+})
+
+mqttRef.value.on('close', function () {
+    console.log('mqtt客户端已断开连接.....')
+})
 onMounted(() => {
     console.log()
     // getMakeUpDataList()
 })
+onBeforeUnmount(() => {
+    if (mqttRef.value) {
+        mqttRef.value.end()
+    }
+})
 defineExpose({ getMakeUpDataList })
 </script>
 <style lang="scss" scoped>
@@ -182,8 +254,10 @@ defineExpose({ getMakeUpDataList })
     .current_header {
         width: 100%;
         height: 60px;
+        padding: 15px;
         display: flex;
         align-items: center;
+        box-sizing: border-box;
         .el-form-item {
             display: flex;
             align-items: center;