添加二维码批量下载功能

src/styles/vxeTable.scss

@@ -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 {
+.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
-    color: var(--el-color-primary-light-8);
+.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 .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
-.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon,
+//     color: #fff0;
-.vxe-button.type--text:not(.is--disabled):hover {
+// }
-    color: var(--el-color-primary);
+.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;
 }

src/views/govern/device/control/index.vue

@@ -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')) {

src/views/govern/device/control/tabs/trend.vue

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

src/views/govern/manage/factory.vue

@@ -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"
+                    <el-select
-                        placeholder="请选择设备类型">
+                        v-model.trim="tableStore.table.params.devType"
-                        <el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
+                        clearable
-                            :value="item.value" />
+                        @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
+                    <el-select
-                        placeholder="请选择设备型号">
+                        v-model.trim="tableStore.table.params.devModel"
-                        <el-option v-for="item in devModelOptionsFilter" :key="item.value" :label="item.label"
+                        filterable
-                            :value="item.value" />
+                        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"
+                <el-upload
-                    :show-file-list="false" :auto-upload="false" :on-change="bulkImport">
+                    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"
+        <el-dialog
-            :before-close="resetForm" draggable width="800px">
+            :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
+                    <el-input
-                        placeholder="请输入（项目名称+设备名称）"></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"
+                    <el-input
-                        placeholder="请输入"></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"
+                        <el-option
-                            :value="item.value"></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"
+                        <el-option
-                            :value="item.value"></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,13 +209,16 @@ 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 queryTheDictionary = () => {
+    queryByCode('Device_Type').then(async res => {
         const id = res.data.id
-    queryCsDictTree(id).then(res => {
+        await queryCsDictTree(id).then(res => {
             devTypeOptions.value = res.data.map((item: any) => {
                 return {
                     value: item.id,
@@ -159,7 +231,7 @@ queryByCode('Device_Type').then(res => {
             // })
             // devTypeOptions.value.splice(index, 1)
         })
-    queryByid(id).then(res => {
+        await queryByid(id).then(res => {
             res.data.map((item: any, index: any) => {
                 if (item.pid == id) {
                     res.data.splice(index, 1)
@@ -173,7 +245,9 @@ queryByCode('Device_Type').then(res => {
                 }
             })
         })
+        await tableStore.index()
     })
+}
 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',
+                1: 'danger',
-                2: 'success',
+                2: 'success'
                 // 3: 'primary',
                 // 4: 'primary',
                 // 5: 'warning'
             },
             replaceValue: {
                 1: '离线',
-                2: '在线',
+                2: '在线'
                 // 3: '接入',
                 // 4: '已取消',
                 // 5: '未接入'
@@ -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 !(
+                        return !(row.devType == '2d4e186e2462590dedc765c5b6700a32')
-                            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')
@@ -538,11 +618,19 @@ const tableStore = new TableStore({
         }
     ],
     beforeSearchFun: () => {
-        // for (let key in tableStore.table.params) {
+        showQrCode.value = false
-        //     if (tableStore.table.params[key] === '') {
+        tableStore.table.column[0].type == 'checkbox' ? tableStore.table.column.splice(0, 1) : ''
-        //         delete tableStore.table.params[key]
+    },
-        //     }
+    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,12 +754,14 @@ const onSubmit = () => {
                         }, 3000)
                         portableDeviceRegister({
                             nDid: res.data.ndid
-                        }).then(pres => {
+                        })
+                            .then(pres => {
                                 ElMessage.success(pres.message)
                                 setTimeout(() => {
                                     tableStore.index()
                                 }, 1000)
-                        }).catch(err => {
+                            })
+                            .catch(err => {
                                 // clearTimeout (time)
                             })
                     }
@@ -676,9 +806,8 @@ const formDevTypeChange = (e: any) => {
 provide('tableStore', tableStore)
 
 onMounted(() => {
-    setTimeout(() => {
+    queryTheDictionary()
-        tableStore.index()
+    setTimeout(() => {}, 100)
-    }, 100)
 })
 
 const addMenu = () => {}