Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备补召修改

Browse Source
This commit is contained in:
zhujiyan
2024-10-09 15:11:56 +08:00
parent ca488a0793
commit 74c7a38183
2 changed files with 86 additions and 618 deletions
Download Patch File Download Diff File Expand all files Collapse all files

606
src/views/govern/device/control/supplementaryRecruitment/current.vue
View File

@@ -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>

98
src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue
View File

@@ -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;