添加 设备登记 页面
This commit is contained in:
66
src/api/cs-system-boot/device.ts
Normal file
66
src/api/cs-system-boot/device.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import createAxios from '@/utils/request'
|
||||
// 新增出厂设备
|
||||
export const addEquipmentDelivery = (data: any) => {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/EquipmentDelivery/addEquipmentDelivery',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除出厂设备
|
||||
export const deleteEquipmentDelivery = (id: any) => {
|
||||
let form = new FormData()
|
||||
form.append('id', id)
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/EquipmentDelivery/AuditEquipmentDelivery',
|
||||
method: 'POST',
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
// 恢复出厂设置
|
||||
export const resetEquipmentDelivery = (id: any) => {
|
||||
let form = new FormData()
|
||||
form.append('nDid', id)
|
||||
return createAxios({
|
||||
url: '/access-boot/device/resetFactory',
|
||||
method: 'POST',
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑出厂设备
|
||||
|
||||
export const editEquipmentDelivery = (data: any) => {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/EquipmentDelivery/updateEquipmentDelivery',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 上传拓扑图
|
||||
export const uploadTopo = (file: any) => {
|
||||
let form = new FormData()
|
||||
form.append('file', file)
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/topologyTemplate/uploadImage',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
// 批量导入设备
|
||||
export const batchImportDevice = (file: any) => {
|
||||
let form = new FormData()
|
||||
form.append('file', file)
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/EquipmentDelivery/importEquipment',
|
||||
method: 'POST',
|
||||
responseType: 'blob',
|
||||
data: form
|
||||
})
|
||||
}
|
||||
@@ -87,7 +87,11 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
|
||||
response => {
|
||||
removePending(response.config)
|
||||
options.loading && closeLoading(options) // 关闭loading
|
||||
if (response.data.code === 'A0000') {
|
||||
if (
|
||||
response.data.code === 'A0000' ||
|
||||
response.data.type === 'application/json' ||
|
||||
response.data.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
) {
|
||||
return options.reductDataFormat ? response.data : response
|
||||
} else if (response.data.code == 'A0202') {
|
||||
if (!window.tokenRefreshing) {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
||||
<el-descriptions title="用户基本信息" class="mb10" :column="2" border>
|
||||
<template #extra>
|
||||
<el-button type="primary" icon="el-icon-Plus" @click="getMarketEnginner">添加工程</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-Plus" @click="getMarketEnginner">添加工程</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="名称">
|
||||
{{ user.name }}
|
||||
|
||||
@@ -4,7 +4,12 @@
|
||||
<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 placeholder="请选择设备类型">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.devType"
|
||||
clearable
|
||||
@change="devTypeChange"
|
||||
placeholder="请选择设备类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in devTypeOptions"
|
||||
:key="item.value"
|
||||
@@ -37,46 +42,376 @@
|
||||
</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" :isGroup="true" />
|
||||
<Table ref="tableRef">
|
||||
<template v-slot:columns>
|
||||
<vxe-column field="name" title="设备名称"></vxe-column>
|
||||
<vxe-column field="devType" title="设备类型">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
devTypeOptions.filter((item: any) => item.value == row.devType)[0] &&
|
||||
devTypeOptions.filter((item: any) => item.value == row.devType)[0].label
|
||||
}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="devModel" title="设备型号">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
devModelOptions.filter((item: any) => item.value == row.devModel)[0] &&
|
||||
devModelOptions.filter((item: any) => item.value == row.devModel)[0].label
|
||||
}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="devAccessMethod" title="通讯协议">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
row.devAccessMethod === 'MQTT'
|
||||
? 'MQTT'
|
||||
: row.devAccessMethod === 'cloud'
|
||||
? 'CLD'
|
||||
: row.devAccessMethod
|
||||
}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="createTime" title="录入时间"></vxe-column>
|
||||
<vxe-column field="createTime" title="网络设备ID"></vxe-column>
|
||||
<vxe-column field="status" title="状态">
|
||||
<template #default="{ row }">
|
||||
{{ row.status == 1 ? '未注册' : row.status == 2 ? '注册' : '接入' }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="操作" min-width="340">
|
||||
<template #default="{ row }">
|
||||
<!-- <div class="table-operation"> -->
|
||||
<el-button size="small" type="primary" @click="edit(row)" icon="el-icon-Edit">编辑</el-button>
|
||||
<el-button size="small" type="primary" @click="qrCode(row)" icon="el-icon-Grid">
|
||||
二维码
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="reset(row.ndid)" icon="el-icon-Setting">
|
||||
出厂恢复
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="deletes(row.id)" icon="el-icon-Delete">
|
||||
删除
|
||||
</el-button>
|
||||
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
</vxe-column>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
v-model="dialogFormVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="600px"
|
||||
:before-close="resetForm"
|
||||
>
|
||||
<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="请选择"
|
||||
style="width: 100%"
|
||||
@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" placeholder="请选择" style="width: 100%" 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="请选择" style="width: 100%" 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 { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { ref, onMounted, provide, computed, reactive } 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,
|
||||
uploadTopo,
|
||||
batchImportDevice,
|
||||
resetEquipmentDelivery
|
||||
} from '@/api/cs-system-boot/device'
|
||||
import html2canvas from 'html2canvas'
|
||||
defineOptions({
|
||||
name: 'govern/log/debug'
|
||||
})
|
||||
|
||||
const devTypeOptions: any = ref([])
|
||||
const devModelOptionsFilter: 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([])
|
||||
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: '设备名称', field: 'name', align: 'center' },
|
||||
{ title: '设备类型', field: 'operatorName', align: 'center' },
|
||||
{ title: '设备型号', field: 'devModel', align: 'center', width: '300' },
|
||||
{ title: '通讯协议', field: 'devAccessMethod', align: 'center' },
|
||||
{ title: '录入时间', field: 'createTime', align: 'center' },
|
||||
{ title: '网络设备ID', field: 'ndid', align: 'center' },
|
||||
{ title: '状态', field: 'status', align: 'center' }
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.failReason = item.failReason || '/'
|
||||
item.result = item.result === 1 ? '成功' : '失败'
|
||||
item.loginName = item.loginName || '/'
|
||||
})
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
for (let key in tableStore.table.params) {
|
||||
if (tableStore.table.params[key] === '') {
|
||||
delete tableStore.table.params[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
tableStore.table.params.orderBy = 'desc'
|
||||
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
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
// 设备类型
|
||||
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)
|
||||
console.log('🚀 ~ batchImportDevice ~ data:', data)
|
||||
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 edit = (row: any) => {
|
||||
dialogFormVisible.value = true
|
||||
dialogTitle.value = '编辑设备'
|
||||
for (let key in form) {
|
||||
form[key] = row[key]
|
||||
}
|
||||
form.id = row.id
|
||||
}
|
||||
// 确认
|
||||
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
|
||||
}
|
||||
// 二维码
|
||||
const qrCode = (item: any) => {
|
||||
deivce.value = item
|
||||
deivce.value.qrPath = localStorage.getItem('STATIC_URL') + 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 = item.mac + '.png'
|
||||
a.dispatchEvent(event)
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
// 出厂设置
|
||||
const reset = (id: string) => {
|
||||
ElMessageBox.confirm('确定该设备恢复出厂吗?', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
resetEquipmentDelivery(id).then(res => {
|
||||
ElMessage.success('恢复成功!')
|
||||
tableStore.onTableAction('search', {})
|
||||
})
|
||||
})
|
||||
}
|
||||
// 删除
|
||||
const deletes = (id: string) => {
|
||||
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteEquipmentDelivery(id).then(res => {
|
||||
ElMessage.success('删除成功!')
|
||||
tableStore.onTableAction('search', {})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const formDevTypeChange = (e: any) => {
|
||||
console.log(e)
|
||||
if (!e) {
|
||||
return
|
||||
}
|
||||
form.devModel = ''
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
@@ -85,3 +420,30 @@ onMounted(() => {
|
||||
|
||||
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>
|
||||
|
||||
@@ -46,7 +46,6 @@
|
||||
round
|
||||
type="info"
|
||||
@click="onSubmit(formRef)"
|
||||
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
@@ -113,7 +112,6 @@ const focusInput = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
timer = window.setTimeout(() => {
|
||||
pageBubble.init()
|
||||
}, 0)
|
||||
@@ -139,8 +137,10 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
|
||||
imageCode: '',
|
||||
verifyCode: 0
|
||||
}).then(res => {
|
||||
console.log('🚀 ~ file: login.vue:134 ~ gongkey ~ res:', res)
|
||||
|
||||
// console.log('🚀 ~ file: login.vue:134 ~ gongkey ~ res:', res)
|
||||
let DOMIN = window.location.origin
|
||||
let STATIC_URL = DOMIN + '/api/system-boot/image/toStream?bgImage='
|
||||
localStorage.setItem('STATIC_URL', STATIC_URL)
|
||||
userInfo.setToken(res.data.token_type + ' ' + res.data.access_token, 'auth')
|
||||
state.submitLoading = false
|
||||
router.push({
|
||||
|
||||
Reference in New Issue
Block a user