{"remainingRequest":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\reform-fvue\\src\\views\\BigScreen\\components\\subComponents\\previewExport.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\reform-fvue\\src\\views\\BigScreen\\components\\subComponents\\previewExport.vue","mtime":1727362433135},{"path":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport html2canvas from 'html2canvas'\r\nimport mapTarget from '@/views/BigScreen/components/subComponents/mapTarget.vue' // 重点关注指标\r\nimport JSZip from 'jszip'\r\nexport default {\r\n    components: {\r\n        mapTarget\r\n    },\r\n    data() {\r\n        return {\r\n            load: false,\r\n            downloadLoading: false,\r\n            dialogTableVisible: false,\r\n            indexData: [],\r\n            indeterminate: true,\r\n            doms: null,\r\n            len: 0\r\n        }\r\n    },\r\n    mounted() {\r\n\r\n    },\r\n    methods: {\r\n        open(lsIndex, totalGear) {\r\n            this.load = true\r\n            let arr = [totalGear, ...lsIndex]\r\n            arr.forEach(item => {\r\n                item.export = true\r\n                item.dataURL = ''\r\n            })\r\n            this.indexData = JSON.parse(JSON.stringify(arr))\r\n            this.dialogTableVisible = true\r\n            this.$nextTick(() => {\r\n                this.getScale()\r\n                this.doms = document.querySelectorAll('.index-item')\r\n            })\r\n        },\r\n        getScale() {\r\n            this.$nextTick(() => {\r\n                let dialogBody = document.querySelector('.el-dialog__body')\r\n                const wh = dialogBody.clientHeight / (935 * 3)\r\n                const ww = dialogBody.clientWidth / (1919 * 3)\r\n                let bl = ww < wh ? ww : wh\r\n                let doms = document.querySelectorAll('.index-item')\r\n                Array.from(doms).map(item => {\r\n                    item.style.transform = `scale(${bl})`\r\n                    item.style.transformOrigin = 'left top'\r\n                })\r\n            })\r\n        },\r\n        handleCheckAllChange(e) {\r\n            this.indexData.forEach(item => item.export = e)\r\n            this.indeterminate = !e\r\n        },\r\n        // 将dom转化为图片\r\n        async domToImg() {\r\n            this.len++\r\n            if (this.len === this.indexData.length) {\r\n                const processNext = (index) => {\r\n                    if (index < this.indexData.length) {\r\n                        this.getImgUrl(index).then(() => {\r\n                            processNext(index + 1);\r\n                        })\r\n                    } else {\r\n                        this.load = false;\r\n                    }\r\n                };\r\n                processNext(0);\r\n            } else {\r\n                return;\r\n            }\r\n        },\r\n        getImgUrl(index) {\r\n            return new Promise(resolve => {\r\n                html2canvas(this.doms[index], {\r\n                    allowTaint: true,\r\n                    scale: 1,\r\n                    backgroundColor: \"#072d62\",\r\n                    display: 'black',\r\n                    useCORS: true,\r\n                    allowTaint: true,\r\n                    logging: false,\r\n                    removeContainer: true,\r\n                    width: 1920,\r\n                    height: 935,\r\n                    onclone: (e) => {\r\n                        let doms = e.querySelectorAll('.index-item')\r\n                        doms[index].style.transform = \"none\"\r\n                    }\r\n\r\n                }).then((canvas) => {\r\n                    const dataURL = canvas.toDataURL('image/png');\r\n                    this.indexData[index].dataURL = dataURL\r\n                    resolve()\r\n                })\r\n            })\r\n        },\r\n        close() {\r\n            this.indexData = []\r\n            this.len = 0\r\n            this.doms = null\r\n            Object.assign(this.$data, this.$options.data())\r\n            this.dialogTableVisible = false\r\n        },\r\n        downloadImg() {\r\n            this.downloadLoading = true\r\n            // 根据目标宽度和高度将图片进行缩放\r\n            function getResizedImageData(image, targetWidth, targetHeight) {\r\n                let canvas = document.createElement('canvas')\r\n                let context = canvas.getContext('2d')\r\n                canvas.width = targetWidth\r\n                canvas.height = targetHeight\r\n                context.drawImage(image, 0, 0, targetWidth, targetHeight)\r\n                return canvas.toDataURL('image/png').split(';base64,')[1]\r\n            }\r\n            let data = this.indexData.filter(item => item.export)\r\n            let imgUrl = []\r\n            let promises = data.map(item => {\r\n                let img = new Image()\r\n                img.src = item.dataURL\r\n                return new Promise(resolve => {\r\n                    img.onload = () => {\r\n                        imgUrl.push({\r\n                            name: item.title + '.png',\r\n                            url: getResizedImageData(img, 1920, 935)\r\n                        })\r\n                        resolve()\r\n                    }\r\n                })\r\n            })\r\n            Promise.all(promises).then(() => {\r\n                let zip = new JSZip()\r\n                imgUrl.forEach(file => {\r\n                    zip.file(file.name, file.url, { base64: true })\r\n                })\r\n                zip.generateAsync({ type: 'blob' }).then(content => {\r\n                    saveAs(content, '改革报表指标晾晒.zip')\r\n                    this.$message.success('导出文件成功')\r\n                    this.downloadLoading = false\r\n                })\r\n            })\r\n        }\r\n    },\r\n}\r\n",null]}