From 74c7a381839875265d90c6f931422d0f94bf1784 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Wed, 9 Oct 2024 15:11:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=A1=A5=E5=8F=AC=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../supplementaryRecruitment/current.vue      | 606 ------------------
 .../currentDevice.vue                         |  98 ++-
 2 files changed, 86 insertions(+), 618 deletions(-)
 delete mode 100644 src/views/govern/device/control/supplementaryRecruitment/current.vue

diff --git a/src/views/govern/device/control/supplementaryRecruitment/current.vue b/src/views/govern/device/control/supplementaryRecruitment/current.vue
deleted file mode 100644
index 6bd9475..0000000
--- a/src/views/govern/device/control/supplementaryRecruitment/current.vue
+++ /dev/null
@@ -1,606 +0,0 @@
-<!-- 当前设备补召 -->
-<template>
-    <div class="default-main">
-        <TableHeader>
-            <template v-slot:select>
-                <el-form-item label="设备类型">
-                    <!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
-                    <el-select
-                        v-model="tableStore.table.params.devType"
-                        clearable
-                        @change="devTypeChange"
-                        placeholder="请选择设备类型"
-                    >
-                        <el-option
-                            v-for="item in devTypeOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="设备型号">
-                    <el-select v-model="tableStore.table.params.devModel" filterable clearable placeholder="请选择设备型号">
-                        <el-option
-                            v-for="item in devModelOptionsFilter"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="通讯协议">
-                    <el-select v-model="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
-                        <el-option label="MQTT" value="mqtt"></el-option>
-                        <el-option label="CLD" value="cloud"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="状态">
-                    <el-select v-model="tableStore.table.params.status" clearable placeholder="请选择状态">
-                        <el-option label="未注册" :value="1"></el-option>
-                        <el-option label="注册" :value="2"></el-option>
-                        <el-option label="接入" :value="3"></el-option>
-                    </el-select>
-                </el-form-item>
-            </template>
-            <template v-slot:operation>
-                <el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
-                    模版下载
-                </el-button>
-                <el-upload
-                    style="display: inline-block"
-                    action=""
-                    accept=".xlsx"
-                    class="upload-demo"
-                    :show-file-list="false"
-                    :auto-upload="false"
-                    :on-change="bulkImport"
-                >
-                    <el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
-                </el-upload>
-                <el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
-            </template>
-        </TableHeader>
-        <Table ref="tableRef"></Table>
-
-        <el-dialog
-            :title="dialogTitle"
-            v-model="dialogFormVisible"
-            :close-on-click-modal="false"
-            :before-close="resetForm"
-            draggable
-            width="40%"
-        >
-            <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
-                <el-form-item label="设备名称:" prop="name">
-                    <el-input
-                        v-model="form.name"
-                        autocomplete="off"
-                        clearable
-                        placeholder="请输入（项目名称+设备名称）"
-                    ></el-input>
-                </el-form-item>
-                <el-form-item label="网络设备ID:" prop="ndid" class="top">
-                    <el-input v-model="form.ndid" autocomplete="off" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item label="设备类型:" prop="devType" class="top">
-                    <el-select v-model="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
-                        <el-option
-                            v-for="item in devTypeOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="设备型号:" prop="devModel" class="top">
-                    <el-select v-model="form.devModel" filterable placeholder="请选择" clearable>
-                        <el-option
-                            v-for="item in formDevModelOptionsFilter"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
-                    <el-select v-model="form.devAccessMethod" placeholder="请选择" clearable>
-                        <el-option label="MQTT" value="MQTT"></el-option>
-                        <el-option label="CLD" value="cloud"></el-option>
-                    </el-select>
-                </el-form-item>
-
-                <el-form-item label="合同号:" prop="cntractNo" class="top">
-                    <el-input v-model="form.cntractNo" autocomplete="off" placeholder="请输入"></el-input>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <el-button @click="resetForm">取 消</el-button>
-                <el-button type="primary" @click="onSubmit">确 定</el-button>
-            </template>
-        </el-dialog>
-
-        <div class="qrcode-label">
-            <div class="qrcode-label-title">{{ deivce.mac }}</div>
-            <img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
-import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import {
-    addEquipmentDelivery,
-    deleteEquipmentDelivery,
-    editEquipmentDelivery,
-    batchImportDevice,
-    resetEquipmentDelivery,
-    governDeviceRegister,
-    portableDeviceRegister,
-    portableDeviceAccess
-} from '@/api/cs-system-boot/device'
-import html2canvas from 'html2canvas'
-import { fullUrl } from '@/utils/common'
-
-defineOptions({
-    name: 'govern/log/debug'
-})
-
-const devTypeOptions: any = ref([])
-const deivce: any = ref({})
-const ruleFormRef = ref()
-const form = reactive({
-    cntractNo: '',
-    devAccessMethod: 'mqtt',
-    devModel: '',
-    devType: '',
-    name: '',
-    ndid: ''
-})
-const rules = reactive({
-    name: [{ required: true, message: '设备名不能为空', trigger: 'blur' }],
-    ndid: [{ required: true, message: '网络设备id不能为空', trigger: 'blur' }],
-    devType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
-    devModel: [{ required: true, message: '设备型号不能为空', trigger: 'change' }],
-    devAccessMethod: [{ required: true, message: '接入方式不能为空', trigger: 'blur' }],
-    cntractNo: [{ required: true, message: '合同号不能为空', trigger: 'blur' }]
-})
-const dialogFormVisible = ref(false)
-const dialogTitle = ref('新增设备')
-
-const devModelOptions: any = ref([])
-queryByCode('Device_Type').then(res => {
-    queryCsDictTree(res.data.id).then(res => {
-        devTypeOptions.value = res.data.map((item: any) => {
-            return {
-                value: item.id,
-                label: item.name,
-                ...item
-            }
-        })
-    })
-    queryByid(res.data.id).then(res => {
-        devModelOptions.value = res.data.map((item: any) => {
-            return {
-                value: item.id,
-                label: item.name,
-                ...item
-            }
-        })
-    })
-    tableStore.index()
-})
-const devModelOptionsFilter = computed(() => {
-    return devModelOptions.value.filter((item: any) => {
-        if (tableStore.table.params.devType) {
-            return item.pid == tableStore.table.params.devType
-        } else {
-            return true
-        }
-    })
-})
-const formDevModelOptionsFilter = computed(() => {
-    return devModelOptions.value.filter((item: any) => {
-        if (form.devType) {
-            return item.pid == form.devType
-        } else {
-            return true
-        }
-    })
-})
-const tableStore = new TableStore({
-    url: '/cs-device-boot/EquipmentDelivery/list',
-    method: 'POST',
-    column: [
-        { title: '序号', type: 'seq',width:60 },
-        { title: '设备名称', field: 'name' },
-        {
-            title: '设备类型',
-            field: 'devType',
-            formatter: row => {
-                return devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
-            }
-        },
-        {
-            title: '设备型号',
-            field: 'devModel',
-            formatter: row => {
-                return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
-            }
-        },
-        {
-            title: '通讯协议',
-            field: 'devAccessMethod',
-            formatter: row => {
-                return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
-            }
-        },
-        { title: '录入时间', field: 'createTime' },
-        { title: '网络设备ID', field: 'ndid' },
-        {
-            title: '状态',
-            field: 'status',
-            width: 100,
-            render: 'tag',
-            custom: {
-                1: 'warning',
-                2: 'success',
-                3: 'primary',
-                4: 'primary',
-                5: 'warning'
-            },
-            replaceValue: {
-                1: '未注册',
-                2: '注册',
-                3: '接入',
-                4: '已取消',
-                5: '未接入'
-            }
-            // formatter: row => {
-            //     return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
-            // },
-        },
-        {
-            title: '操作',
-            align: 'center',
-            width: '180',
-            render: 'buttons',
-            buttons: [
-                //直连装置注册
-                {
-                    title: '注册',
-                    type: 'primary',
-                    icon: 'el-icon-Grid',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return (
-                            (row.devType == '8b45cf6b7f5266e777d07c166ad5fa77' &&
-                                row.devModel == 'a0d4da4b5c17b2172362a3f5a27bf217') ||
-                            row.status != '1'
-                        )
-                    },
-                    click: row => {
-                        // 直连设备注册
-                        ElMessageBox.confirm('确定注册该设备吗?', '提示', {
-                            confirmButtonText: '确认',
-                            cancelButtonText: '取消',
-                            type: 'warning'
-                        })
-                            .then(() => {
-                                governDeviceRegister({
-                                    nDid: row.ndid,
-                                    type: '4'
-                                }).then(res => {
-                                    ElMessage.success(res.message)
-                                    tableStore.onTableAction('search', {})
-                                })
-                            })
-                            .catch(e => {})
-                    }
-                },
-                //便携式设备注册
-                {
-                    title: '注册',
-                    type: 'primary',
-                    icon: 'el-icon-Grid',
-                    render: 'basicButton',
-                    disabled: row => {
-                        // return (
-                        //     (row.devType != '8b45cf6b7f5266e777d07c166ad5fa77' &&
-                        //         row.devModel != 'a0d4da4b5c17b2172362a3f5a27bf217') ||
-                        //     row.status != '1'
-                        // )
-                        return true
-                    },
-                    click: row => {
-                        // 便携式设备注册
-                        ElMessageBox.confirm('确定注册该设备吗?', '提示', {
-                            confirmButtonText: '确认',
-                            cancelButtonText: '取消',
-                            type: 'warning'
-                        })
-                            .then(() => {
-                                portableDeviceRegister({
-                                    nDid: row.ndid
-                                }).then(res => {
-                                    console.log(res, '8888')
-                                    ElMessage.success(res.message)
-                                    tableStore.index()
-                                })
-                            })
-                            .catch(e => {})
-                    }
-                },
-                //直连设备接入
-                {
-                    title: '接入',
-                    type: 'primary',
-                    icon: 'el-icon-Grid',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return (
-                            (row.devType == '8b45cf6b7f5266e777d07c166ad5fa77' &&
-                                row.devModel == 'a0d4da4b5c17b2172362a3f5a27bf217') ||
-                            row.status != '2'
-                        )
-                    },
-                    click: row => {
-                        // 直连设备接入
-                        ElMessageBox.confirm('确定接入该设备吗?', '提示', {
-                            confirmButtonText: '确认',
-                            cancelButtonText: '取消',
-                            type: 'warning'
-                        })
-                            .then(() => {
-                                governDeviceRegister({
-                                    nDid: row.ndid,
-                                    type: '4'
-                                }).then(res => {
-                                    ElMessage.success(res.message)
-                                    tableStore.onTableAction('search', {})
-                                })
-                            })
-                            .catch(e => {})
-                    }
-                },
-                //便携式设备接入
-                {
-                    title: '接入',
-                    type: 'primary',
-                    icon: 'el-icon-Grid',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return (
-                            (row.devType != '8b45cf6b7f5266e777d07c166ad5fa77' &&
-                                row.devModel != 'a0d4da4b5c17b2172362a3f5a27bf217') ||
-                            row.status == '3'
-                        )
-                    },
-                    click: row => {
-                        // 便携式设备接入
-                        ElMessageBox.confirm('确定接入该设备吗?', '提示', {
-                            confirmButtonText: '确认',
-                            cancelButtonText: '取消',
-                            type: 'warning'
-                        })
-                            .then(() => {
-                                portableDeviceAccess({
-                                    nDid: row.ndid
-                                }).then(res => {
-                                    ElMessage.success(res.message)
-                                    tableStore.index()
-                                })
-                            })
-                            .catch(e => {})
-                    }
-                },
-                {
-                    title: '二维码',
-                    type: 'primary',
-                    icon: 'el-icon-Grid',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return (
-                            row.devType == '8b45cf6b7f5266e777d07c166ad5fa77' &&
-                            row.devModel == 'a0d4da4b5c17b2172362a3f5a27bf217'
-                        )
-                    },
-                    click: row => {
-                        deivce.value = row
-                        deivce.value.qrPath = fullUrl(deivce.value.qrPath)
-                        setTimeout(() => {
-                            html2canvas(document.querySelector('.qrcode-label'), {
-                                useCORS: true
-                            }).then(canvas => {
-                                let url = canvas.toDataURL('image/png')
-                                // 下载图片
-                                let a = document.createElement('a')
-                                let event = new MouseEvent('click')
-                                a.href = url
-                                a.download = row.mac + '.png'
-                                a.dispatchEvent(event)
-                            })
-                        }, 0)
-                    }
-                },
-                {
-                    name: 'edit',
-                    title: '编辑',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-
-                    click: async row => {
-                        dialogFormVisible.value = true
-                        dialogTitle.value = '编辑设备'
-                        for (let key in form) {
-                            form[key] = row[key]
-                        }
-                        form.id = row.id
-                    }
-                },
-                {
-                    name: 'del',
-                    title: '删除',
-                    type: 'danger',
-                    icon: 'el-icon-Delete',
-                    render: 'basicButton',
-                    click: row => {
-                        ElMessageBox.confirm('确定删除该设备吗?', '提示', {
-                            confirmButtonText: '确认',
-                            cancelButtonText: '取消',
-                            type: 'warning'
-                        })
-                            .then(() => {
-                                deleteEquipmentDelivery(row.id).then(res => {
-                                    ElMessage.success('删除成功!')
-                                    tableStore.onTableAction('search', {})
-                                })
-                            })
-                            .catch(e => {})
-                    }
-                }
-            ]
-        }
-    ],
-    beforeSearchFun: () => {
-        for (let key in tableStore.table.params) {
-            if (tableStore.table.params[key] === '') {
-                delete tableStore.table.params[key]
-            }
-        }
-    }
-})
-tableStore.table.params.orderBy = 'desc'
-
-// 设备类型
-const devTypeChange = (e: any) => {
-    if (!e) {
-        return
-    }
-    tableStore.table.params.devModel = ''
-}
-// 下载模版
-const downLoadFile = () => {
-    window.open(window.location.origin + '/api/cs-device-boot/EquipmentDelivery/getExcelTemplate')
-}
-
-// 导入模版
-const bulkImport = (e: any) => {
-    batchImportDevice(e.raw).then((res: any) => {
-        if (res.type === 'application/json') {
-            const reader = new FileReader()
-            reader.readAsText(res)
-            reader.onload = (e: any) => {
-                let data = JSON.parse(e.target.result)
-                if (data.code === 'A0000') {
-                    ElMessage.success(data.message)
-                    tableStore.onTableAction('search', {})
-                } else {
-                    ElMessage.error(data.message)
-                }
-            }
-        } else {
-            ElMessage.error('导入失败!')
-            let url = window.URL.createObjectURL(res)
-            let link = document.createElement('a')
-            link.style.display = 'none'
-            link.href = url
-            link.setAttribute('download', '导入失败.xlsx')
-            document.body.appendChild(link)
-            link.click()
-            document.body.removeChild(link)
-        }
-    })
-}
-// 新增
-const add = () => {
-    dialogFormVisible.value = true
-    dialogTitle.value = '新增设备'
-}
-
-// 确认
-const onSubmit = () => {
-    ruleFormRef.value.validate((valid: any) => {
-        if (valid) {
-            if (dialogTitle.value == '新增设备') {
-                addEquipmentDelivery(form).then(res => {
-                    ElMessage.success('新增成功')
-                    resetForm()
-                    tableStore.onTableAction('search', {})
-                })
-            } else {
-                editEquipmentDelivery(form).then(res => {
-                    ElMessage.success('修改成功')
-                    resetForm()
-                    tableStore.onTableAction('search', {})
-                })
-            }
-        }
-    })
-}
-// 清空表格
-const resetForm = () => {
-    ruleFormRef.value.resetFields()
-    dialogFormVisible.value = false
-    nextTick(() => {
-        // 模拟待编辑数据
-        let user = {
-            cntractNo: '',
-            devAccessMethod: 'mqtt',
-            devModel: '',
-            devType: '',
-            name: '',
-            ndid: ''
-        }
-        Object.assign(form, user)
-    })
-}
-
-const formDevTypeChange = (e: any) => {
-    if (!e) {
-        return
-    }
-    form.devModel = ''
-}
-provide('tableStore', tableStore)
-
-onMounted(() => {
-    setTimeout(() => {
-        // tableStore.index()
-    }, 100)
-})
-
-const addMenu = () => {}
-</script>
-<style lang="scss" scoped>
-.qrcode-label {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: -99;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 180px;
-    height: 180px;
-    padding: 10px;
-    background: #fff;
-    flex-direction: column;
-
-    .qrcode-label-title {
-        margin-bottom: 10px;
-        font-size: 14px;
-        font-weight: bold;
-    }
-
-    .qrcode-label-img {
-        width: 140px;
-        height: 140px;
-    }
-}
-</style>
diff --git a/src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue b/src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue
index 30e788b..86d4954 100644
--- a/src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue
+++ b/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;