Files
admin-govern/src/views/govern/manage/factory.vue

901 lines
35 KiB
Vue
Raw Normal View History

2024-01-16 16:31:11 +08:00
<template>
2024-09-24 14:20:12 +08:00
<div class="default-main" v-loading="loading">
2024-01-16 16:31:11 +08:00
<TableHeader>
<template v-slot:select>
<el-form-item label="关键字筛选">
2026-06-11 20:27:37 +08:00
<el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue"
style="width: 200px" clearable placeholder="请输入设备名称/网络设备ID" />
</el-form-item>
2026-04-13 10:48:32 +08:00
<!-- <el-form-item label="流程阶段">
<el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择状态">
<el-option label="功能调试" :value="2"></el-option>
<el-option label="出厂调试" :value="3"></el-option>
<el-option label="正式投运" :value="4"></el-option>
</el-select>
2026-04-13 10:48:32 +08:00
</el-form-item> -->
<el-form-item label="物联状态">
2026-06-11 20:27:37 +08:00
<el-select v-model.trim="tableStore.table.params.connectStatus" clearable placeholder="请选择物联状态">
<el-option label="已连接" :value="1"></el-option>
<el-option label="未连接" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备状态">
<el-select v-model.trim="tableStore.table.params.runStatus" clearable placeholder="请选择状态">
<el-option label="在线" :value="2"></el-option>
<el-option label="离线" :value="1"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="设备类型">
2025-04-22 08:46:51 +08:00
<el-select
v-model.trim="tableStore.table.params.devType"
clearable
@change="devTypeChange"
placeholder="请选择设备类型"
>
<el-option
v-for="item in devTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
2024-01-16 16:31:11 +08:00
</el-select>
</el-form-item>
<el-form-item label="设备型号">
2025-04-22 08:46:51 +08:00
<el-select
v-model.trim="tableStore.table.params.devModel"
filterable
clearable
placeholder="请选择设备型号"
>
<el-option
v-for="item in devModelOptionsFilter"
:key="item.value"
:label="item.label"
:value="item.value"
/>
2024-01-16 16:31:11 +08:00
</el-select>
</el-form-item>
<el-form-item label="通讯协议">
2025-04-22 08:46:51 +08:00
<el-select
v-model.trim="tableStore.table.params.devAccessMethod"
clearable
placeholder="请选择通讯协议"
>
2024-09-30 11:33:19 +08:00
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="CLD"></el-option>
2024-01-16 16:31:11 +08:00
</el-select>
</el-form-item>-->
2024-11-27 16:32:13 +08:00
<!-- <el-form-item label="状态">
2024-12-25 10:53:07 +08:00
<el-select v-model.trim="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>
2024-01-16 16:31:11 +08:00
</el-select>
2024-11-27 16:32:13 +08:00
</el-form-item> -->
2024-01-16 16:31:11 +08:00
</template>
2024-01-17 14:29:31 +08:00
<template v-slot:operation>
2025-04-22 08:46:51 +08:00
<el-button type="primary" @click="downLoadFile1" class="ml10" icon="el-icon-Download">
2024-01-17 14:29:31 +08:00
模版下载
</el-button>
2026-06-11 20:27:37 +08:00
<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>
2024-01-17 14:29:31 +08:00
</el-upload>
2024-12-23 11:30:28 +08:00
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
2026-06-11 20:27:37 +08:00
<el-button type="primary" class="ml10" icon="el-icon-Download" @click="downLoadQrCode"
:disabled="!showQrCode">
2025-04-22 08:46:51 +08:00
批量下载二维码
</el-button>
2024-01-17 14:29:31 +08:00
</template>
2024-01-16 16:31:11 +08:00
</TableHeader>
2025-04-28 09:14:56 +08:00
<Table ref="tableRef" :checkbox-config="checkboxConfig" :key="tableKey" @sort-change="handleSortChange"></Table>
2024-01-17 14:29:31 +08:00
2026-06-11 20:27:37 +08:00
<FactoryForm ref="factoryFormRef" :user-list="userList" :engineering-list="engineeringList"
:dev-type-options="devTypeOptions" :dev-type-options2="devTypeOptions2" :dev-model-options="devModelOptions"
:dev-model-options2="devModelOptions2" @success="onFormSuccess" />
2024-01-17 14:29:31 +08:00
<div class="qrcode-label">
<div class="qrcode-label-title">{{ deivce.mac }}</div>
<img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
2024-01-17 14:29:31 +08:00
</div>
2025-04-22 08:46:51 +08:00
<div v-if="qrcodeFlag">
<div class="qrcode-label" :class="`qrcode${i}`" v-for="(item, i) in tableStore.table.selection">
<div class="qrcode-label-title">{{ item.mac }}</div>
<img class="qrcode-label-img" alt="二维码加载失败" :src="fullUrl(item.qrPath)" />
</div>
</div>
2024-01-16 16:31:11 +08:00
</div>
</template>
<script setup lang="ts">
2026-06-11 20:27:37 +08:00
import { ref, onMounted, onActivated, provide, computed, reactive } from 'vue'
2024-01-16 16:31:11 +08:00
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
2026-06-11 20:27:37 +08:00
import FactoryForm from './components/factoryForm.vue'
2024-01-17 14:29:31 +08:00
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ElMessage, ElMessageBox } from 'element-plus'
2024-11-27 16:01:08 +08:00
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
2026-03-30 09:03:53 +08:00
import { downLoadFile } from '@/api/cs-system-boot/manage'
2024-01-17 14:29:31 +08:00
import {
deleteEquipmentDelivery,
editEquipmentDelivery,
batchImportDevice,
2026-03-30 09:03:53 +08:00
getExcelTemplate,
2026-04-15 19:29:36 +08:00
engineeringProject,
2026-04-24 09:13:48 +08:00
onlineRegister,
2026-06-11 20:27:37 +08:00
resetFactory,
portableDeviceRegister,
portableDeviceAccess,
2024-01-17 14:29:31 +08:00
} from '@/api/cs-system-boot/device'
import html2canvas from 'html2canvas'
2024-01-19 14:08:07 +08:00
import { fullUrl } from '@/utils/common'
2025-04-22 08:46:51 +08:00
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
2026-06-11 20:27:37 +08:00
import { getList } from '@/api/cs-harmonic-boot/recruitment'
2024-01-16 16:31:11 +08:00
defineOptions({
2024-09-25 16:36:53 +08:00
name: 'govern/manage/factory'
2024-01-16 16:31:11 +08:00
})
2026-06-11 20:27:37 +08:00
const userList: any = ref([])
2025-04-22 08:46:51 +08:00
const showQrCode = ref(false)
2024-01-16 16:31:11 +08:00
const devTypeOptions: any = ref([])
2025-10-11 10:35:25 +08:00
const devTypeOptions2: any = ref([])
const devModelOptions2: any = ref([])
2026-03-30 09:03:53 +08:00
const engineeringList: any = ref([])
2024-01-17 14:29:31 +08:00
const deivce: any = ref({})
2026-06-11 20:27:37 +08:00
const factoryFormRef = ref<InstanceType<typeof FactoryForm>>()
2025-04-22 08:46:51 +08:00
const qrcodeFlag = ref(false)
const tableKey = ref(0)
2024-09-24 14:20:12 +08:00
const loading = ref<boolean>(false)
2024-01-17 14:29:31 +08:00
const devModelOptions: any = ref([])
2025-04-22 08:46:51 +08:00
const queryTheDictionary = () => {
2026-03-30 09:03:53 +08:00
queryByCode('DEV_CLD')
.then(res => {
2025-10-11 10:35:25 +08:00
devTypeOptions2.value = res.data
2026-04-15 19:29:36 +08:00
queryCsDictTree(res.data.id).then(res => {
2025-10-11 10:35:25 +08:00
devModelOptions2.value = res.data.map((item: any) => {
2026-03-30 09:03:53 +08:00
return {
value: item.id,
label: item.name,
...item
}
})
2025-04-22 08:46:51 +08:00
})
2026-03-30 09:03:53 +08:00
queryByCode('Device_Type').then(async res => {
2025-10-11 10:35:25 +08:00
const id = res.data.id
await queryCsDictTree(id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
2026-03-30 09:03:53 +08:00
2025-10-11 10:35:25 +08:00
// let index = devTypeOptions.value.findIndex((item: any) => {
// return item.name == '网关'
// })
// devTypeOptions.value.splice(index, 1)
})
await queryByid(id).then(res => {
res.data.map((item: any, index: any) => {
if (item.pid == id) {
res.data.splice(index, 1)
}
})
devModelOptions.value = res.data.map((item: any, index: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
await tableStore.index()
2025-04-22 08:46:51 +08:00
})
2026-03-30 09:03:53 +08:00
})
2026-04-15 19:29:36 +08:00
2026-03-30 09:03:53 +08:00
.catch(error => {
2025-10-11 10:35:25 +08:00
console.error('查询过程中出现错误:', error)
2024-01-18 15:50:17 +08:00
})
2025-04-22 08:46:51 +08:00
}
2024-01-17 14:29:31 +08:00
const devModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (tableStore.table.params.devType) {
return item.pid == tableStore.table.params.devType
} else {
return true
}
})
})
2025-10-11 10:35:25 +08:00
2024-01-16 16:31:11 +08:00
const tableStore = new TableStore({
url: '/cs-device-boot/EquipmentDelivery/list',
method: 'POST',
2025-07-10 16:33:41 +08:00
isWebPaging: true,
2024-01-18 15:50:17 +08:00
column: [
2024-12-13 14:36:23 +08:00
{
2025-04-22 08:46:51 +08:00
width: '60',
type: 'checkbox'
},
{
title: '序号',
width: 80,
formatter: (row: any) => {
2024-12-13 14:36:23 +08:00
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
2026-06-11 20:27:37 +08:00
{ title: '设备名称', field: 'name', minWidth: 160 },
{ title: '网络设备ID', field: 'ndid', minWidth: 130 },
2024-01-18 15:50:17 +08:00
{
title: '设备类型',
field: 'devType',
formatter: row => {
2025-10-11 10:35:25 +08:00
if (row.row.devAccessMethod === 'CLD') {
2026-03-30 09:03:53 +08:00
// 遍历devTypeOptions2查找匹配
2025-10-11 10:35:25 +08:00
return devTypeOptions2.value.name
2026-03-30 09:03:53 +08:00
}
2025-10-11 10:35:25 +08:00
// 如果是MQTT协议使用devTypeOptions查找
else if (row.row.devAccessMethod === 'MQTT') {
2026-03-30 09:03:53 +08:00
const item = devTypeOptions.value.find((item: any) => item.value == row.cellValue)
return item ? item.label : '/'
2025-10-11 10:35:25 +08:00
}
2025-07-15 16:31:06 +08:00
},
2026-06-11 20:27:37 +08:00
minWidth: 110
2024-01-18 15:50:17 +08:00
},
{
title: '设备型号',
field: 'devModel',
formatter: row => {
2025-10-11 10:35:25 +08:00
const options = row.row.devAccessMethod === 'MQTT' ? devModelOptions.value : devModelOptions2.value
2026-03-30 09:03:53 +08:00
const item = options.find((item: any) => item.value == row.cellValue)
return item ? item.label : '/'
2025-07-15 16:31:06 +08:00
},
minWidth: 120
2024-01-18 15:50:17 +08:00
},
2026-06-11 20:27:37 +08:00
{
title: '治理类型',
field: 'governType',
minWidth: 100,
formatter: row => {
return row.cellValue === 'event' ? '暂态' : row.cellValue === 'harmonic' ? '稳态' : (row.cellValue || '/')
}
},
{
title: '治理方法',
field: 'governMethod',
minWidth: 100,
formatter: row => {
return row.cellValue || '/'
}
},
{
title: '敏感用户',
field: 'monitorUser',
minWidth: 120,
formatter: row => {
return userList.value.find((item: any) => item.id == row.cellValue)?.name || '/'
}
},
2024-01-18 15:50:17 +08:00
{
title: '通讯协议',
field: 'devAccessMethod',
formatter: row => {
2024-09-30 11:33:19 +08:00
return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'CLD' ? 'CLD' : row.cellValue
2025-07-15 16:31:06 +08:00
},
2026-06-11 20:27:37 +08:00
minWidth: 100
2024-01-18 15:50:17 +08:00
},
2025-07-15 16:31:06 +08:00
{ title: '录入时间', field: 'createTime', sortable: true, minWidth: 150 },
2025-01-03 12:45:54 +08:00
2024-11-27 16:01:08 +08:00
{
title: '使用状态',
render: 'switch',
width: 100,
field: 'usageStatus',
activeText: '启用',
inactiveText: '停用',
inactiveValue: '0',
activeValue: '1',
onChangeField: (row: any, value: any) => {
2026-06-11 20:27:37 +08:00
// console.log("🚀 ~ row", row)
2024-11-27 16:01:08 +08:00
ElMessageBox.prompt('二次校验密码确认', '', {
confirmButtonText: '确认',
cancelButtonText: '取消',
customClass: 'customInput',
2024-12-17 20:57:07 +08:00
inputType: 'text',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
if (instance.inputValue == null) {
return ElMessage.warning('请输入密码')
} else if (instance.inputValue?.length > 32) {
2025-04-22 08:46:51 +08:00
return ElMessage.warning(
'密码长度不能超过32位,当前密码长度为' + instance.inputValue.length
)
2024-12-17 20:57:07 +08:00
} else {
2025-04-22 08:46:51 +08:00
done()
2024-12-17 20:57:07 +08:00
}
} else {
2025-04-22 08:46:51 +08:00
done()
2024-12-17 20:57:07 +08:00
}
}
2024-11-27 16:01:08 +08:00
}).then(({ value }) => {
passwordConfirm(value).then(res => {
2025-04-22 08:46:51 +08:00
editEquipmentDelivery({
...row,
status: row.status == 5 ? 1 : row.status == 6 ? 2 : row.status,
usageStatus: row.usageStatus == 1 ? 0 : 1
}).then(res => {
2024-11-27 16:01:08 +08:00
ElMessage.success(row.usageStatus == 1 ? '设备停用成功!' : '设备启用成功!')
tableStore.index()
})
})
})
}
},
2025-04-28 15:51:30 +08:00
// { title: 'MQTT状态', field: 'connectStatus', width: 100, },
{
title: '物联状态',
2025-04-28 15:51:30 +08:00
field: 'connectStatus',
width: 100,
render: 'tag',
custom: {
未连接: 'danger',
已连接: 'success'
},
replaceValue: {
未连接: '未连接',
已连接: '已连接'
2025-07-15 16:31:06 +08:00
},
minWidth: 80
2025-04-28 15:51:30 +08:00
},
2024-01-18 15:50:17 +08:00
{
title: '设备状态',
field: 'runStatus',
2024-06-12 18:05:35 +08:00
width: 100,
render: 'tag',
custom: {
2025-04-22 08:46:51 +08:00
1: 'danger',
2: 'success'
},
replaceValue: {
1: '离线',
2025-04-22 08:46:51 +08:00
2: '在线'
2025-07-15 16:31:06 +08:00
},
minWidth: 80
2024-01-18 15:50:17 +08:00
},
2026-06-11 20:27:37 +08:00
// {
// title: '流程阶段',
// field: 'process',
// width: 100,
// render: 'tag',
// custom: {
// 2: 'warning',
// 3: 'warning',
// 4: 'success'
// },
// replaceValue: {
// 2: '功能调试',
// 3: '出厂调试',
// 4: '正式投运'
// },
// minWidth: 80
// },
2024-01-18 15:50:17 +08:00
{
2026-03-30 09:03:53 +08:00
title: '操作',
fixed: 'right',
2024-01-18 15:50:17 +08:00
align: 'center',
2026-06-11 20:27:37 +08:00
width: 180,
2024-01-18 15:50:17 +08:00
render: 'buttons',
buttons: [
2026-04-02 09:08:57 +08:00
//直连设备注册
2024-11-27 16:01:08 +08:00
// {
// 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 => {
// ElMessage.success(res.message)
// tableStore.index()
// })
// })
// .catch(e => {})
// }
// },
2024-06-12 18:05:35 +08:00
//直连设备接入
// {
// 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 => {})
// }
// },
2026-04-15 19:29:36 +08:00
// 在线设备注册
{
title: '接入',
type: 'primary',
icon: 'el-icon-Grid',
render: 'basicButton',
loading: 'loading1',
disabled: row => {
return !(
row.devType == '123202e523be2b8defc8d0c2f118f232' &&
row.associatedProject != null &&
row.status != 3
)
},
click: row => {
// 便携式设备手动接入
ElMessageBox.confirm('确定接入该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
row.loading1 = true
onlineRegister({
projectId: row.associatedProject,
nDid: row.ndid
})
.then(res => {
ElMessage.success(res.message)
row.loading1 = false
tableStore.index()
})
.catch(() => {
row.loading1 = false
})
})
}
},
2024-09-24 09:58:25 +08:00
//便携式设备手动接入
{
2024-12-25 10:53:07 +08:00
title: '接入',
2024-09-24 09:58:25 +08:00
type: 'primary',
icon: 'el-icon-Grid',
render: 'basicButton',
2026-04-15 19:29:36 +08:00
loading: 'loading1',
2024-09-24 09:58:25 +08:00
disabled: row => {
return (
(row.devType != '8b45cf6b7f5266e777d07c166ad5fa77' &&
row.devModel != 'a0d4da4b5c17b2172362a3f5a27bf217') ||
2024-12-25 10:53:07 +08:00
row.status != '6'
2024-09-24 09:58:25 +08:00
)
},
click: row => {
// 便携式设备手动接入
ElMessageBox.confirm('确定接入该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
2026-04-15 19:29:36 +08:00
row.loading1 = true
2024-09-24 09:58:25 +08:00
portableDeviceAccess({
nDid: row.ndid
}).then(res => {
ElMessage.success(res.message)
2026-04-15 19:29:36 +08:00
row.loading1 = false
2024-09-24 09:58:25 +08:00
tableStore.index()
})
})
2026-04-15 19:29:36 +08:00
.catch(e => {
row.loading1 = false
})
2024-09-24 09:58:25 +08:00
}
},
2024-01-18 15:50:17 +08:00
{
2024-12-25 10:53:07 +08:00
title: '接入',
2024-01-18 15:50:17 +08:00
type: 'primary',
icon: 'el-icon-Grid',
2024-01-30 14:11:29 +08:00
render: 'basicButton',
2026-04-15 19:29:36 +08:00
loading: 'loading1',
disabled: row => {
return (
(row.devType != '8b45cf6b7f5266e777d07c166ad5fa77' &&
2024-06-12 18:05:35 +08:00
row.devModel != 'a0d4da4b5c17b2172362a3f5a27bf217') ||
2024-12-25 10:53:07 +08:00
row.status != '5'
)
},
click: row => {
2024-06-12 18:05:35 +08:00
// 便携式设备接入
2024-09-23 19:48:24 +08:00
// portableDeviceAccess
2024-06-12 18:05:35 +08:00
ElMessageBox.confirm('确定接入该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
2026-04-15 19:29:36 +08:00
}).then(() => {
row.loading1 = true
portableDeviceRegister({
nDid: row.ndid
2024-06-12 18:05:35 +08:00
})
2026-04-15 19:29:36 +08:00
.then(res => {
row.loading1 = false
ElMessage.success(res.message)
tableStore.index()
})
.catch(e => {
row.loading1 = false
})
})
2024-01-18 15:50:17 +08:00
}
},
{
2024-01-26 09:35:33 +08:00
title: '二维码',
2024-01-18 15:50:17 +08:00
type: 'primary',
icon: 'el-icon-Grid',
2024-01-30 14:11:29 +08:00
render: 'basicButton',
disabled: row => {
2025-04-22 08:46:51 +08:00
return !(row.devType == '2d4e186e2462590dedc765c5b6700a32')
},
2024-01-18 15:50:17 +08:00
click: row => {
deivce.value = row
2024-01-19 14:08:07 +08:00
deivce.value.qrPath = fullUrl(deivce.value.qrPath)
2025-04-22 08:46:51 +08:00
2024-01-18 15:50:17 +08:00
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 => {
2026-06-11 20:27:37 +08:00
factoryFormRef.value?.openEdit(row)
}
},
2026-04-24 09:13:48 +08:00
{
name: 'edit',
2026-05-26 16:23:18 +08:00
title: '重置',
2026-04-24 09:13:48 +08:00
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
2026-05-28 15:10:40 +08:00
ElMessageBox.confirm('确定重置该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
resetFactory({
nDid: row.ndid
}).then(res => {
ElMessage.success('重置成功!')
tableStore.onTableAction('search', {})
})
2026-04-24 09:13:48 +08:00
})
}
},
2024-01-18 15:50:17 +08:00
{
name: 'del',
2024-01-26 09:35:33 +08:00
title: '删除',
2024-01-18 15:50:17 +08:00
type: 'danger',
icon: 'el-icon-Delete',
2024-01-30 14:11:29 +08:00
render: 'basicButton',
2024-01-18 15:50:17 +08:00
click: row => {
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
2024-06-12 18:05:35 +08:00
.then(() => {
deleteEquipmentDelivery(row.id).then(res => {
ElMessage.success('删除成功!')
tableStore.onTableAction('search', {})
})
})
2026-06-11 20:27:37 +08:00
.catch(e => { })
2024-01-18 15:50:17 +08:00
}
}
]
}
],
2024-01-17 14:29:31 +08:00
beforeSearchFun: () => {
2025-04-22 08:46:51 +08:00
showQrCode.value = false
tableStore.table.column[0].type == 'checkbox' ? tableStore.table.column.splice(0, 1) : ''
},
loadCallback: () => {
tableStore.table.data.forEach(item => {
if (item.devType == '2d4e186e2462590dedc765c5b6700a32') {
showQrCode.value = true
tableStore.table.column[0].type != 'checkbox'
? tableStore.table.column.unshift({ type: 'checkbox', width: '60' })
: ''
}
})
tableKey.value += 1
2024-01-16 16:31:11 +08:00
}
})
2024-01-17 14:29:31 +08:00
tableStore.table.params.orderBy = 'desc'
2024-09-30 11:33:19 +08:00
tableStore.table.params.devType = ''
tableStore.table.params.devModel = ''
2026-04-13 10:48:32 +08:00
// tableStore.table.params.process = 2
2024-09-30 11:33:19 +08:00
tableStore.table.params.devAccessMethod = ''
tableStore.table.params.status = ''
2025-04-28 09:14:56 +08:00
tableStore.table.params.sortBy = ''
tableStore.table.params.orderBy = ''
tableStore.table.params.searchValue = ''
tableStore.table.params.connectStatus = ''
tableStore.table.params.runStatus = ''
2024-01-18 15:50:17 +08:00
2024-01-17 14:29:31 +08:00
// 设备类型
const devTypeChange = (e: any) => {
if (!e) {
return
}
tableStore.table.params.devModel = ''
}
// 下载模版
2025-04-22 08:46:51 +08:00
const downLoadFile1 = () => {
2025-01-03 12:45:54 +08:00
getExcelTemplate().then(res => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = '设备导入模版.xlsx' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
ElMessage.success('下载成功')
})
2024-01-17 14:29:31 +08:00
}
2025-04-22 08:46:51 +08:00
// 禁止点击
const checkboxConfig = reactive({
checkMethod: ({ row }) => {
return row.devType == '2d4e186e2462590dedc765c5b6700a32'
}
})
2024-01-17 14:29:31 +08:00
// 导入模版
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)
}
})
}
2025-04-22 08:46:51 +08:00
// 批量下载
const downLoadQrCode = async () => {
if (tableStore.table.selection.length == 0) {
ElMessage.warning('请选择需要下载的设备')
return
}
ElMessage.info('下载中,请稍后...')
qrcodeFlag.value = true
const zip = new JSZip()
// 创建一个数组来存储所有的异步操作
setTimeout(() => {
const promises = tableStore.table.selection.map(async (item: any, i: number) => {
// 等待 html2canvas 完成
const canvas = await html2canvas(document.querySelector(`.qrcode${i}`), {
useCORS: true
})
// 将 canvas 转换为 Base64
const url = canvas.toDataURL('image/png')
// 将文件添加到 ZIP 中
zip.file(item.mac + '.png', url.split(',')[1], { base64: true })
})
// 使用 Promise.all 等待所有异步操作完成
Promise.all(promises)
.then(() => {
// 所有文件都已添加到 ZIP 中,现在生成 ZIP 文件
zip.generateAsync({ type: 'blob' }).then(content => {
saveAs(content, `二维码.zip`) // 保存 ZIP 文件
})
})
.catch(error => {
console.error('生成 ZIP 文件时出错:', error)
})
qrcodeFlag.value = false
}, 500)
}
2025-04-28 09:14:56 +08:00
// 排序
const handleSortChange = ({ column, order }: { column: TableColumn; order: 'asc' | 'desc' | null }) => {
// console.log('排序列:', column?.property);
// console.log('排序顺序:', order);
// tableStore.onTableAction('sortable', { column, order })
tableStore.table.params.sortBy = column?.property
tableStore.table.params.orderBy = order
tableStore.table.params.pageNum = 1
2025-04-22 08:46:51 +08:00
2025-04-28 09:14:56 +08:00
tableStore.index()
// // 在这里可以根据 column 和 order 进行相应的数据排序操作
// if (order === 'asc') {
// } else if (order === 'desc') {
// }
}
2025-04-22 08:46:51 +08:00
// 示例用法
2024-01-17 14:29:31 +08:00
// 新增
const add = () => {
2026-03-30 09:03:53 +08:00
2026-06-11 20:27:37 +08:00
factoryFormRef.value?.openAdd()
}
2024-11-27 16:01:08 +08:00
2026-06-11 20:27:37 +08:00
const onFormSuccess = () => {
tableStore.onTableAction('search', {})
2024-01-17 14:29:31 +08:00
}
2026-06-11 20:27:37 +08:00
const getUserList = () => {
return getList({
pageNum: 1,
pageSize: 2000
}).then(res => {
userList.value = res.data.records
2024-01-17 14:29:31 +08:00
})
}
2024-01-16 16:31:11 +08:00
2026-06-11 20:27:37 +08:00
// 页面被 keep-alive 缓存后,从敏感用户页返回时刷新下拉列表
onActivated(() => {
if (sessionStorage.getItem('factoryNeedRefreshUserList')) {
sessionStorage.removeItem('factoryNeedRefreshUserList')
getUserList()
2024-01-17 14:29:31 +08:00
}
2026-06-11 20:27:37 +08:00
})
2024-01-16 16:31:11 +08:00
provide('tableStore', tableStore)
onMounted(() => {
2026-06-11 20:27:37 +08:00
getUserList()
2025-04-22 08:46:51 +08:00
queryTheDictionary()
2026-03-30 09:03:53 +08:00
engineeringProject().then(res => {
engineeringList.value = res.data.filter(item => {
item.projectName = item.engineeringName
item.projectId = item.engineeringId
item.disabled = item.projectInfoList ? false : true
return item
})
})
2026-06-11 20:27:37 +08:00
setTimeout(() => { }, 100)
2024-01-16 16:31:11 +08:00
})
2026-06-11 20:27:37 +08:00
const addMenu = () => { }
2024-01-16 16:31:11 +08:00
</script>
<style lang="scss" scoped>
2024-01-17 14:29:31 +08:00
.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>
2024-11-27 16:01:08 +08:00
<style lang="scss">
.customInput {
.el-input__inner {
-webkit-text-security: disc !important;
}
}
</style>