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

添加二维码批量下载功能

Browse Source
This commit is contained in:
GGJ
2025-04-22 08:46:51 +08:00
parent d282e7a2f2
commit 1e3b60eaaa
4 changed files with 260 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/styles/vxeTable.scss
View File

@@ -43,7 +43,8 @@
.vxe-table--render-default .is--checked.vxe-cell--checkbox,
.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon {
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,
.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon {
color: var(--el-color-primary-light-3);
}
@@ -51,12 +52,33 @@
.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
color: var(--el-color-primary-light-8);
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,
.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,
.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,
.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon {
color: var(--el-color-primary-light-5);
}
.vxe-table--render-default .vxe-cell--radio.is--checked,
.vxe-table--render-default .vxe-cell--radio.is--checked .vxe-radio--icon,
.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon,
.vxe-button.type--text:not(.is--disabled):hover {
color: var(--el-color-primary);
// .vxe-table--render-default .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
// color: #fff0;
// }
.vxe-table--tooltip-wrapper {
z-index: 10000 !important;
}
.is--disabled {
background-color: var(--vxe-input-disabled-color);
}
.vxe-modal--wrapper {
z-index: 5000 !important;
}
.vxe-table--body .vxe-body--row:nth-child(even) {
background-color: #f9f9f9;
// background-color: var(--el-color-primary-light-9);
}
.vxe-table--body .vxe-body--row:nth-child(odd) {
background-color: #ffffff;
}

2
src/views/govern/device/control/index.vue
View File

@@ -1066,7 +1066,7 @@ const handleClick = async (tab?: any) => {
setTimeout(() => {
trendRef.value && trendRef.value.getTrendRequest(obj)
tableLoading.value = false
}, 1500)
}, 0)
}
//查询实时数据
if (dataSet.value.includes('_realtimedata')) {

4
src/views/govern/device/control/tabs/trend.vue
View File

@@ -166,7 +166,9 @@ queryByCode(props?.TrendList?.lineType == 0 ? 'apf-harmonic' : 'portable-harmoni
}
})
})
init()
})
})
const activeName: any = ref()
const deviceData: any = ref([])
@@ -184,7 +186,7 @@ const range = (start: any, end: any, step: any) => {
const trendRequestData = ref()
const getTrendRequest = (val: any) => {
trendRequestData.value = val
init()
// init()
}
//初始化趋势图
const headerRef = ref()

323
src/views/govern/manage/factory.vue
View File

@@ -4,21 +4,41 @@
<template v-slot:select>
<el-form-item label="设备类型">
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
<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" />
<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"
/>
</el-select>
</el-form-item>
<el-form-item label="设备型号">
<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" />
<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"
/>
</el-select>
</el-form-item>
<el-form-item label="通讯协议">
<el-select v-model.trim="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
<el-select
v-model.trim="tableStore.table.params.devAccessMethod"
clearable
placeholder="请选择通讯协议"
>
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="CLD"></el-option>
</el-select>
@@ -32,39 +52,80 @@
</el-form-item> -->
</template>
<template v-slot:operation>
<el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
<el-button type="primary" @click="downLoadFile1" 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-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>
<el-button
type="primary"
class="ml10"
icon="el-icon-Download"
@click="downLoadQrCode"
v-if="showQrCode"
>
批量下载二维码
</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
<Table ref="tableRef" :checkbox-config="checkboxConfig" :key="tableKey"></Table>
<el-dialog :title="dialogTitle" v-model.trim="dialogFormVisible" :close-on-click-modal="false"
:before-close="resetForm" draggable width="800px">
<el-dialog
:title="dialogTitle"
v-model.trim="dialogFormVisible"
:close-on-click-modal="false"
:before-close="resetForm"
draggable
width="800px"
>
<el-form :model="form" label-width="auto" :rules="rules" ref="ruleFormRef" class="form-two">
<el-form-item label="设备名称:" prop="name">
<el-input maxlength="32" show-word-limit v-model.trim="form.name" autocomplete="off" clearable
placeholder="请输入（项目名称+设备名称）"></el-input>
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.name"
autocomplete="off"
clearable
placeholder="请输入（项目名称+设备名称）"
></el-input>
</el-form-item>
<el-form-item label="网络设备ID:" prop="ndid" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.ndid" autocomplete="off"
placeholder="请输入"></el-input>
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.ndid"
autocomplete="off"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="设备类型:" prop="devType" class="top">
<el-select v-model.trim="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-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.trim="form.devModel" filterable placeholder="请选择" clearable>
<el-option v-for="item in formDevModelOptionsFilter" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<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">
@@ -91,6 +152,12 @@
<div class="qrcode-label-title">{{ deivce.mac }}</div>
<img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
</div>
<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>
</div>
</template>
<script setup lang="ts">
@@ -101,6 +168,7 @@ import TableHeader from '@/components/table/header/index.vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ElMessage, ElMessageBox } from 'element-plus'
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
import { downLoadFile } from '@/api/cs-system-boot/manage.ts'
import {
addEquipmentDelivery,
deleteEquipmentDelivery,
@@ -114,11 +182,12 @@ import {
} from '@/api/cs-system-boot/device'
import html2canvas from 'html2canvas'
import { fullUrl } from '@/utils/common'
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
defineOptions({
name: 'govern/manage/factory'
})
const showQrCode = ref(false)
const devTypeOptions: any = ref([])
const deivce: any = ref({})
const ruleFormRef = ref()
@@ -140,40 +209,45 @@ const rules = reactive({
cntractNo: [{ required: true, message: '合同号不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
})
const qrcodeFlag = ref(false)
const tableKey = ref(0)
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增设备')
const loading = ref<boolean>(false)
const devModelOptions: any = ref([])
queryByCode('Device_Type').then(res => {
const id = res.data.id
queryCsDictTree(id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
const queryTheDictionary = () => {
queryByCode('Device_Type').then(async res => {
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
}
})
// let index = devTypeOptions.value.findIndex((item: any) => {
// return item.name == '网关'
// })
// devTypeOptions.value.splice(index, 1)
})
// 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()
})
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
}
})
})
})
}
const devModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (tableStore.table.params.devType) {
@@ -197,7 +271,13 @@ const tableStore = new TableStore({
method: 'POST',
column: [
{
title: '序号', width: 80, formatter: (row: any) => {
width: '60',
type: 'checkbox'
},
{
title: '序号',
width: 80,
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
@@ -207,7 +287,7 @@ const tableStore = new TableStore({
title: '设备类型',
field: 'devType',
formatter: row => {
return devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
return devTypeOptions.value.find((item: any) => item.value == row.cellValue).label
}
},
@@ -215,7 +295,7 @@ const tableStore = new TableStore({
title: '设备型号',
field: 'devModel',
formatter: row => {
return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
return devModelOptions.value.find((item: any) => item.value == row.cellValue).label
}
},
{
@@ -244,31 +324,32 @@ const tableStore = new TableStore({
customClass: 'customInput',
inputType: 'text',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
if (instance.inputValue == null) {
return ElMessage.warning('请输入密码')
} else if (instance.inputValue?.length > 32) {
return ElMessage.warning('密码长度不能超过32位,当前密码长度为' + instance.inputValue.length)
return ElMessage.warning(
'密码长度不能超过32位,当前密码长度为' + instance.inputValue.length
)
} else {
done();
done()
}
} else {
done();
done()
}
}
}).then(({ value }) => {
passwordConfirm(value).then(res => {
editEquipmentDelivery({ ...row, status: row.status == 5 ? 1 : row.status == 6 ? 2 : row.status, usageStatus: row.usageStatus == 1 ? 0 : 1 }).then(res => {
editEquipmentDelivery({
...row,
status: row.status == 5 ? 1 : row.status == 6 ? 2 : row.status,
usageStatus: row.usageStatus == 1 ? 0 : 1
}).then(res => {
ElMessage.success(row.usageStatus == 1 ? '设备停用成功！' : '设备启用成功！')
tableStore.index()
})
})
})
}
},
{
@@ -277,15 +358,15 @@ const tableStore = new TableStore({
width: 100,
render: 'tag',
custom: {
1: 'error',
2: 'success',
1: 'danger',
2: 'success'
// 3: 'primary',
// 4: 'primary',
// 5: 'warning'
},
replaceValue: {
1: '离线',
2: '在线',
2: '在线'
// 3: '接入',
// 4: '已取消',
// 5: '未接入'
@@ -425,7 +506,7 @@ const tableStore = new TableStore({
tableStore.index()
})
})
.catch(e => { })
.catch(e => {})
}
},
{
@@ -458,7 +539,6 @@ const tableStore = new TableStore({
loading.value = false
ElMessage.success(res.message)
tableStore.index()
})
.catch(e => {
loading.value = false
@@ -475,18 +555,18 @@ const tableStore = new TableStore({
icon: 'el-icon-Grid',
render: 'basicButton',
disabled: row => {
return !(
row.devType == '2d4e186e2462590dedc765c5b6700a32'
)
},
return !(row.devType == '2d4e186e2462590dedc765c5b6700a32')
},
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')
console.log('🚀 ~ html2canvas ~ url:', url)
// 下载图片
let a = document.createElement('a')
let event = new MouseEvent('click')
@@ -531,18 +611,26 @@ const tableStore = new TableStore({
tableStore.onTableAction('search', {})
})
})
.catch(e => { })
.catch(e => {})
}
}
]
}
],
beforeSearchFun: () => {
// for (let key in tableStore.table.params) {
// if (tableStore.table.params[key] === '') {
// delete tableStore.table.params[key]
// }
// }
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
}
})
tableStore.table.params.orderBy = 'desc'
@@ -559,8 +647,7 @@ const devTypeChange = (e: any) => {
tableStore.table.params.devModel = ''
}
// 下载模版
const downLoadFile = () => {
const downLoadFile1 = () => {
getExcelTemplate().then(res => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
@@ -575,7 +662,12 @@ const downLoadFile = () => {
ElMessage.success('下载成功')
})
}
// 禁止点击
const checkboxConfig = reactive({
checkMethod: ({ row }) => {
return row.devType == '2d4e186e2462590dedc765c5b6700a32'
}
})
// 导入模版
const bulkImport = (e: any) => {
batchImportDevice(e.raw).then((res: any) => {
@@ -604,6 +696,45 @@ const bulkImport = (e: any) => {
}
})
}
// 批量下载
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)
}
// 示例用法
// 新增
const add = () => {
dialogFormVisible.value = true
@@ -612,9 +743,6 @@ const add = () => {
// 确认
const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (dialogTitle.value == '新增设备') {
@@ -626,14 +754,16 @@ const onSubmit = () => {
}, 3000)
portableDeviceRegister({
nDid: res.data.ndid
}).then(pres => {
ElMessage.success(pres.message)
setTimeout(() => {
tableStore.index()
}, 1000)
}).catch(err => {
// clearTimeout (time)
})
.then(pres => {
ElMessage.success(pres.message)
setTimeout(() => {
tableStore.index()
}, 1000)
})
.catch(err => {
// clearTimeout (time)
})
}
resetForm()
@@ -676,12 +806,11 @@ const formDevTypeChange = (e: any) => {
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 100)
queryTheDictionary()
setTimeout(() => {}, 100)
})
const addMenu = () => { }
const addMenu = () => {}
</script>
<style lang="scss" scoped>
.qrcode-label {