微调
This commit is contained in:
guanj
@@ -1,273 +1,281 @@
|
||||
<template>
|
||||
<TableHeader ref="refheader" :showSearch="false">
|
||||
<template #select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox-group style="width: 150px" v-model.trim="checkList">
|
||||
<el-checkbox label="稳态" :value="0" />
|
||||
<el-checkbox label="暂态" :value="1" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<!-- 设备补召 -->
|
||||
<div class=" current_device" v-loading="loading">
|
||||
|
||||
<div class="current_body" ref="tbodyRef">
|
||||
<vxe-table border ref="tableRef" :data="dirList" align="center" height="auto"
|
||||
:style="{ height: tableHeight }" @radio-change="radioChangeEvent">
|
||||
<vxe-column type="radio" width="60">
|
||||
<template #header>
|
||||
<vxe-button mode="text" @click="clearRadioRowEvent" :disabled="!selectRow">取消</vxe-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
|
||||
<vxe-column field="name" title="名称"></vxe-column>
|
||||
<vxe-column field="status" title="补召进度">
|
||||
<template #default="{ row }">
|
||||
<div class="finish" v-if="row.status == 100">
|
||||
<SuccessFilled style="width: 16px;" /><span class="ml5">补召完成</span>
|
||||
</div>
|
||||
<el-progress v-model.trim="row.status" v-else :class="row.status == 100 ? 'progress' : ''"
|
||||
:format="format" :stroke-width="10" striped :percentage="row.status" :duration="30"
|
||||
striped-flow />
|
||||
|
||||
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="startTime" title="起始时间"></vxe-column>
|
||||
<vxe-column field="endTime" title="结束时间"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, 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 TableHeader from '@/components/table/header/index.vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table'
|
||||
import { SuccessFilled } from '@element-plus/icons-vue'
|
||||
import {
|
||||
Back,
|
||||
Setting, Search
|
||||
} from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import mqtt from 'mqtt'
|
||||
defineOptions({
|
||||
name: 'supplementaryRecruitment'
|
||||
})
|
||||
const checkList: any = ref([])
|
||||
// const props = defineProps(['lineId'])
|
||||
const { go } = useRouter() // 路由
|
||||
const selectRow: any = ref(null)
|
||||
const loading = ref(false)
|
||||
const dirList = ref([])
|
||||
const route: any = ref({})
|
||||
const datePickerRef = ref()
|
||||
const format = (percentage) => (percentage === 100 ? '完成' : `${percentage}%`)
|
||||
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 = 0
|
||||
})
|
||||
dirList.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
// 进入文件夹
|
||||
const dirCheckedList: any = ref([])
|
||||
const tbodyRef = ref()
|
||||
const tableHeight = mainHeight(85).height
|
||||
const routes = useRoute()
|
||||
const tableRef = ref()
|
||||
const selectRowCopy: any = ref(null)
|
||||
const handleUpDevice = () => {
|
||||
let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
|
||||
return item.prjDataPath
|
||||
})
|
||||
if (checkList.value.length == 0) {
|
||||
return ElMessage.warning('请选择暂态稳态')
|
||||
}
|
||||
if (selectRow.value == null) {
|
||||
return ElMessage.warning('请选择工程')
|
||||
}
|
||||
selectRowCopy.value = JSON.parse(JSON.stringify(selectRow.value))
|
||||
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: [selectRow.value?.prjDataPath]
|
||||
}
|
||||
ElMessage.warning('补召中, 请稍等...')
|
||||
offlineDataUploadMakeUp(form)
|
||||
.then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
// ElMessage.success(res.data)
|
||||
dirList.value.map((item: any) => {
|
||||
// checkedList.map((vv: any) => {
|
||||
if (item.name == selectRowCopy.value?.name) {
|
||||
item.status = 5
|
||||
}
|
||||
// })
|
||||
})
|
||||
// loading.value = false
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const radioChangeEvent: VxeTableEvents.RadioChange = ({ row }) => {
|
||||
selectRow.value = row
|
||||
// console.log('单选事件')
|
||||
}
|
||||
|
||||
|
||||
const clearRadioRowEvent = () => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
selectRow.value = null
|
||||
$table.clearRadioRow()
|
||||
}
|
||||
}
|
||||
const mqttRef = ref()
|
||||
const url: any = window.localStorage.getItem('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)
|
||||
}
|
||||
const handleSearch = () => {
|
||||
getMakeUpDataList(route.value)
|
||||
}
|
||||
connectMqtt()
|
||||
mqttRef.value.on('connect', () => {
|
||||
// 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>({})
|
||||
mqttRef.value.on('message', (topic: any, message: any) => {
|
||||
// console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
|
||||
loading.value = false
|
||||
let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
||||
let regex1 = /allStep:(.*?),nowStep/
|
||||
let regex2 = /nowStep:(.*?)}/
|
||||
mqttMessage.value = {
|
||||
allStep: str.match(regex1)[1],
|
||||
nowStep: str.match(regex2)[1]
|
||||
}
|
||||
// console.log(mqttMessage.value)
|
||||
let checkedList = tableRef.value.getCheckboxRecords().map((item: any) => {
|
||||
return item.name
|
||||
})
|
||||
dirList.value.map((item: any) => {
|
||||
// checkedList.map((vv: any) => {
|
||||
if (item.name == selectRowCopy.value?.name) {
|
||||
let percentage = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100)) || 0
|
||||
if (percentage > 5) {
|
||||
item.status = percentage
|
||||
|
||||
}
|
||||
}
|
||||
// })
|
||||
})
|
||||
})
|
||||
|
||||
mqttRef.value.on('error', (error: any) => {
|
||||
console.log('mqtt连接失败...', error)
|
||||
mqttRef.value.end()
|
||||
})
|
||||
|
||||
mqttRef.value.on('close', function () {
|
||||
console.log('mqtt客户端已断开连接.....')
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
if (mqttRef.value) {
|
||||
mqttRef.value.end()
|
||||
}
|
||||
})
|
||||
defineExpose({ getMakeUpDataList })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// .current_device {
|
||||
// width: 100%;
|
||||
|
||||
// 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 {
|
||||
// flex: 1;
|
||||
// }
|
||||
// }
|
||||
:deep(.el-progress-bar__inner--striped) {
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 75%, transparent 0, transparent);
|
||||
|
||||
}
|
||||
|
||||
:deep(.progress) {
|
||||
.el-progress__text {
|
||||
color: green;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.finish {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: 550;
|
||||
color: #009688
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<TableHeader ref="refheader" :showSearch="false">
|
||||
<template #select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox-group style="width: 150px" v-model.trim="checkList">
|
||||
<el-checkbox label="稳态" :value="0" />
|
||||
<el-checkbox label="暂态" :value="1" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<!-- 设备补召 -->
|
||||
<div class=" current_device" v-loading="loading">
|
||||
|
||||
<div class="current_body" ref="tbodyRef">
|
||||
<vxe-table border ref="tableRef" :data="dirList" align="center" height="auto"
|
||||
:style="{ height: tableHeight }" @radio-change="radioChangeEvent">
|
||||
<vxe-column type="radio" width="60">
|
||||
<template #header>
|
||||
<vxe-button mode="text" @click="clearRadioRowEvent" :disabled="!selectRow">取消</vxe-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
|
||||
<vxe-column field="name" title="名称"></vxe-column>
|
||||
<vxe-column field="status" title="补召进度">
|
||||
<template #default="{ row }">
|
||||
<div class="finish" v-if="row.status == 100">
|
||||
<SuccessFilled style="width: 16px;" /><span class="ml5">补召完成</span>
|
||||
</div>
|
||||
<el-progress v-model.trim="row.status" v-else :class="row.status == 100 ? 'progress' : ''"
|
||||
:format="format" :stroke-width="10" striped :percentage="row.status" :duration="30"
|
||||
striped-flow />
|
||||
|
||||
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="startTime" title="起始时间"></vxe-column>
|
||||
<vxe-column field="endTime" title="结束时间"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, 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 TableHeader from '@/components/table/header/index.vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table'
|
||||
import { SuccessFilled } from '@element-plus/icons-vue'
|
||||
import {
|
||||
Back,
|
||||
Setting, Search
|
||||
} from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import mqtt from 'mqtt'
|
||||
defineOptions({
|
||||
name: 'supplementaryRecruitment'
|
||||
})
|
||||
const checkList: any = ref([])
|
||||
// const props = defineProps(['lineId'])
|
||||
const { go } = useRouter() // 路由
|
||||
const selectRow: any = ref(null)
|
||||
const loading = ref(false)
|
||||
const dirList = ref([])
|
||||
const route: any = ref({})
|
||||
const datePickerRef = ref()
|
||||
const format = (percentage) => (percentage === 100 ? '完成' : `${percentage}%`)
|
||||
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 = 0
|
||||
})
|
||||
dirList.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
// 进入文件夹
|
||||
const dirCheckedList: any = ref([])
|
||||
const tbodyRef = ref()
|
||||
const tableHeight = mainHeight(85).height
|
||||
const routes = useRoute()
|
||||
const tableRef = ref()
|
||||
const selectRowCopy: any = ref(null)
|
||||
const handleUpDevice = () => {
|
||||
let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
|
||||
return item.prjDataPath
|
||||
})
|
||||
if (checkList.value.length == 0) {
|
||||
return ElMessage.warning('请选择暂态稳态')
|
||||
}
|
||||
if (selectRow.value == null) {
|
||||
return ElMessage.warning('请选择工程')
|
||||
}
|
||||
selectRowCopy.value = JSON.parse(JSON.stringify(selectRow.value))
|
||||
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: [selectRow.value?.prjDataPath]
|
||||
}
|
||||
ElMessage.warning('补召中, 请稍等...')
|
||||
offlineDataUploadMakeUp(form)
|
||||
.then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
// ElMessage.success(res.data)
|
||||
dirList.value.map((item: any) => {
|
||||
// checkedList.map((vv: any) => {
|
||||
if (item.name == selectRowCopy.value?.name) {
|
||||
item.status = 5
|
||||
}
|
||||
// })
|
||||
})
|
||||
// loading.value = false
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const radioChangeEvent: VxeTableEvents.RadioChange = ({ row }) => {
|
||||
selectRow.value = row
|
||||
// console.log('单选事件')
|
||||
}
|
||||
|
||||
|
||||
const clearRadioRowEvent = () => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
selectRow.value = null
|
||||
$table.clearRadioRow()
|
||||
}
|
||||
}
|
||||
const mqttRef = ref()
|
||||
const url: any = window.localStorage.getItem('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)
|
||||
}
|
||||
const handleSearch = () => {
|
||||
getMakeUpDataList(route.value)
|
||||
}
|
||||
function parseStringToObject(str:string) {
|
||||
const content = str.replace(/^{|}$/g, '')
|
||||
const pairs = content.split(',')
|
||||
const result:any = {}
|
||||
pairs.forEach(pair => {
|
||||
const [key, value] = pair.split(':')
|
||||
// 尝试将数字转换为Number类型
|
||||
result[key.trim()] = isNaN(Number(value)) ? value.trim() : Number(value)
|
||||
})
|
||||
return result
|
||||
}
|
||||
connectMqtt()
|
||||
mqttRef.value.on('connect', () => {
|
||||
// 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>({})
|
||||
mqttRef.value.on('message', (topic: any, message: any) => {
|
||||
// console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
|
||||
loading.value = false
|
||||
let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
||||
let regex1 = /allStep:(.*?),nowStep/
|
||||
let regex2 = /nowStep:(.*?)}/
|
||||
mqttMessage.value = parseStringToObject(str)
|
||||
// console.log(mqttMessage.value)
|
||||
let checkedList = tableRef.value.getCheckboxRecords().map((item: any) => {
|
||||
return item.name
|
||||
})
|
||||
dirList.value.map((item: any) => {
|
||||
// checkedList.map((vv: any) => {
|
||||
if (item.name == selectRowCopy.value?.name) {
|
||||
let percentage = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100)) || 0
|
||||
if (percentage > 5) {
|
||||
item.status = percentage
|
||||
|
||||
}
|
||||
}
|
||||
// })
|
||||
})
|
||||
})
|
||||
|
||||
mqttRef.value.on('error', (error: any) => {
|
||||
console.log('mqtt连接失败...', error)
|
||||
mqttRef.value.end()
|
||||
})
|
||||
|
||||
mqttRef.value.on('close', function () {
|
||||
console.log('mqtt客户端已断开连接.....')
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
if (mqttRef.value) {
|
||||
mqttRef.value.end()
|
||||
}
|
||||
})
|
||||
defineExpose({ getMakeUpDataList })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// .current_device {
|
||||
// width: 100%;
|
||||
|
||||
// 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 {
|
||||
// flex: 1;
|
||||
// }
|
||||
// }
|
||||
:deep(.el-progress-bar__inner--striped) {
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 75%, transparent 0, transparent);
|
||||
|
||||
}
|
||||
|
||||
:deep(.progress) {
|
||||
.el-progress__text {
|
||||
color: green;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.finish {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: 550;
|
||||
color: #009688
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user