270 lines
8.4 KiB
Vue
270 lines
8.4 KiB
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, inject } 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 url: any = inject('MQTTURL')
|
|
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'
|
|
}
|
|
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>
|