设备补召修改
This commit is contained in:
zhujiyan
@@ -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>
|
|
||||||
@@ -18,9 +18,21 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
<div class="current_body" ref="tbodyRef">
|
<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" type="checkbox" width="60"></vxe-column>
|
||||||
<vxe-column align="center" field="name" title="名称"></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="startTime" title="起始时间"></vxe-column>
|
||||||
<vxe-column align="center" field="endTime" title="结束时间"></vxe-column>
|
<vxe-column align="center" field="endTime" title="结束时间"></vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
@@ -28,10 +40,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<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 { getMakeUpData, getAskDirOrFile, offlineDataUploadMakeUp } from '@/api/cs-harmonic-boot/recruitment.ts'
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
import {
|
import {
|
||||||
Plus,
|
Plus,
|
||||||
Back,
|
Back,
|
||||||
@@ -49,6 +62,7 @@ import {
|
|||||||
FolderOpened
|
FolderOpened
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
import mqtt from 'mqtt'
|
||||||
const checkList: any = ref([])
|
const checkList: any = ref([])
|
||||||
// const props = defineProps(['lineId'])
|
// const props = defineProps(['lineId'])
|
||||||
const { push, currentRoute, go } = useRouter() // 路由
|
const { push, currentRoute, go } = useRouter() // 路由
|
||||||
@@ -67,18 +81,17 @@ const getMakeUpDataList = (row: any) => {
|
|||||||
: item.prjDataPath.replace('/bd0/cmn/', '')
|
: item.prjDataPath.replace('/bd0/cmn/', '')
|
||||||
item.startTime = item.startTime ? item.startTime : '/'
|
item.startTime = item.startTime ? item.startTime : '/'
|
||||||
item.endTime = item.endTime ? item.endTime : '/'
|
item.endTime = item.endTime ? item.endTime : '/'
|
||||||
|
item.status = Math.floor(Math.random() * 100) + 1
|
||||||
})
|
})
|
||||||
dirList.value = res.data
|
dirList.value = res.data
|
||||||
console.log(dirList.value, '查询3333333333333333')
|
|
||||||
loading.value = false
|
loading.value = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 进入文件夹
|
// 进入文件夹
|
||||||
const dirCheckedList: any = ref([])
|
const dirCheckedList: any = ref([])
|
||||||
const tbodyRef = ref()
|
const tbodyRef = ref()
|
||||||
const tableHeight = ref(0)
|
const tableHeight = mainHeight(90).height
|
||||||
const routes = useRoute()
|
const routes = useRoute()
|
||||||
console.log(routes, '+++++++++++++89')
|
|
||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
const handleUpDevice = () => {
|
const handleUpDevice = () => {
|
||||||
let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
|
let proList = tableRef.value.getCheckboxRecords().map((item: any) => {
|
||||||
@@ -98,16 +111,9 @@ const handleUpDevice = () => {
|
|||||||
ndid: routes.query.ndid,
|
ndid: routes.query.ndid,
|
||||||
proList: proList
|
proList: proList
|
||||||
}
|
}
|
||||||
console.log(
|
|
||||||
tableRef.value.getCheckboxRecords().map((item: any) => {
|
|
||||||
return item.prjDataPath
|
|
||||||
}),
|
|
||||||
form
|
|
||||||
)
|
|
||||||
loading.value = true
|
loading.value = true
|
||||||
offlineDataUploadMakeUp(form)
|
offlineDataUploadMakeUp(form)
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
console.log(res, '-------')
|
|
||||||
if (res.code == 'A0000') {
|
if (res.code == 'A0000') {
|
||||||
ElMessage.success(res.message)
|
ElMessage.success(res.message)
|
||||||
loading.value = false
|
loading.value = false
|
||||||
@@ -133,10 +139,76 @@ const handleIntoDir = (row: any) => {
|
|||||||
console.log(dirList.value, '查询3333333333333333')
|
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(() => {
|
onMounted(() => {
|
||||||
console.log()
|
console.log()
|
||||||
// getMakeUpDataList()
|
// getMakeUpDataList()
|
||||||
})
|
})
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (mqttRef.value) {
|
||||||
|
mqttRef.value.end()
|
||||||
|
}
|
||||||
|
})
|
||||||
defineExpose({ getMakeUpDataList })
|
defineExpose({ getMakeUpDataList })
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -182,8 +254,10 @@ defineExpose({ getMakeUpDataList })
|
|||||||
.current_header {
|
.current_header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
|
padding: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
.el-form-item {
|
.el-form-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user