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

<template>
    <!-- 设备补召 -->
    <div class="default-main current_device" v-loading="loading">
        <div class="current_header">
            <el-form-item label="日期">
                <DatePicker ref="datePickerRef"></DatePicker>
            </el-form-item>
            <el-form-item>
                <el-checkbox-group style="width: 150px" v-model="checkList">
                    <el-checkbox label="稳态" :value="0" />
                    <el-checkbox label="暂态" :value="1" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item>
                <!-- <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button> -->
                <el-button type="primary" :icon="Setting" @click="handleUpDevice">补召</el-button>
                <el-button :icon="Back" @click="go(-1)">返回</el-button>
            </el-form-item>
        </div>
        <div class="current_body" ref="tbodyRef">
            <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>
        </div>
    </div>
</template>
<script lang="ts" setup>
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,
    Search,
    Refresh,
    RefreshRight,
    RefreshLeft,
    ScaleToOriginal,
    ZoomIn,
    Setting,
    Cpu,
    View,
    Download,
    ZoomOut,
    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() // 路由

const loading = ref(false)
const dirList = ref([])
const route: any = ref({})
const datePickerRef = ref()
const getMakeUpDataList = (row: any) => {
    route.value = row
    loading.value = true
    getMakeUpData(row.id).then(res => {
        res.data.map((item: any) => {
            item.name = item.prjName
                ? item.prjDataPath.replace('/bd0/cmn/', item.prjName + '-')
                : 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
        loading.value = false
    })
}
// 进入文件夹
const dirCheckedList: any = ref([])
const tbodyRef = ref()
const tableHeight = mainHeight(90).height
const routes = useRoute()
const tableRef = ref()
const handleUpDevice = () => {
    let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
        return item.prjDataPath
    })
    if (checkList.value.length == 0) {
        return ElMessage.warning('请选择暂态稳态')
    }
    if (proList.length == 0) {
        return ElMessage.warning('请选择工程')
    }
    let form = {
        dataTypeList: checkList.value,
        startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
        endTime: datePickerRef.value && datePickerRef.value.timeValue[1],
        lineId: routes.query.id,
        ndid: routes.query.ndid,
        proList: proList
    }
    loading.value = true
    offlineDataUploadMakeUp(form)
        .then((res: any) => {
            if (res.code == 'A0000') {
                ElMessage.success(res.message)
                loading.value = false
            }
        })
        .catch(e => {
            loading.value = false
        })
}
const handleIntoDir = (row: any) => {
    if (dirCheckedList.value.indexOf(row) == -1) {
        dirCheckedList.value.push(row)
    }
    console.log(row, 'hhhhh', dirCheckedList.value)
    const obj = {
        fileType: row.type,
        nDid: route.value.ndid,
        path: row.prjDataPath,
        prjName: row.prjName
    }
    getAskDirOrFile(obj).then(res => {
        dirList.value = res.data
        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>
// .current_device {
//     width: 100%;
//     height: calc(100vh - 200px);
//     display: flex;
//     flex-wrap: wrap;
//     align-items: flex-start;
//     // justify-content: space-between;
//     overflow-y: auto;
//     .device_dir {
//         width: 24.1%;
//         height: 120px;
//         border: 1px solid #eee;
//         margin: 0 0.3%;
//         display: flex;
//         align-items: center;
//         flex-direction: column;
//         justify-content: center;
//         .device_dir_file {
//             width: 60px;
//             height: 60px;
//         }
//         img {
//             width: 50px;
//             height: 50px;
//         }
//         img:hover {
//             cursor: pointer;
//         }
//         p {
//             margin-top: 10px;
//         }
//         // margin:10px;
//     }
// }
.current_device {
    width: 100%;
    height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    .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;
            margin-bottom: 0;
        }
    }
    .current_body {
        margin-top: 10px;
        flex: 1;
    }
}
</style>