图表修改；增加报表栏目

package-lock.json

@@ -15,6 +15,8 @@
         "echarts-liquidfill": "^3.1.0",
         "element-resize-detector": "^1.2.4",
         "hikvs-web": "^1.0.4",
+        "html2canvas": "^1.4.1",
+        "jspdf": "^2.5.1",
         "moment": "^2.29.4",
         "pinia": "^2.0.16",
         "pinia-plugin-persistedstate": "^3.1.0",
@@ -288,6 +290,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/standalone": {
       "version": "7.20.15",
       "resolved": "https://registry.npmmirror.com/@babel/standalone/-/standalone-7.20.15.tgz",
@@ -622,6 +635,12 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmmirror.com/@types/resolve/-/resolve-1.17.1.tgz",
@@ -1267,6 +1286,17 @@
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -1318,6 +1348,14 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/batch-processor": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/batch-processor/-/batch-processor-1.0.0.tgz",
@@ -1379,6 +1417,17 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -1428,6 +1477,25 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmmirror.com/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/cfb": {
       "version": "1.2.2",
       "resolved": "https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz",
@@ -1718,6 +1786,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
@@ -1878,6 +1954,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmmirror.com/dompurify/-/dompurify-2.4.5.tgz",
+      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==",
+      "optional": true
+    },
     "node_modules/domutils": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/domutils/-/domutils-3.0.1.tgz",
@@ -3108,6 +3190,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3522,6 +3609,18 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-8.0.1.tgz",
@@ -4086,6 +4185,23 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.4.8"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/klona": {
       "version": "2.0.6",
       "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz",
@@ -5118,8 +5234,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/regexp-tree": {
       "version": "0.1.24",
@@ -5221,6 +5336,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
@@ -5503,6 +5627,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmmirror.com/statuses/-/statuses-1.5.0.tgz",
@@ -5634,6 +5767,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/systemjs": {
       "version": "6.13.0",
       "resolved": "https://registry.npmmirror.com/systemjs/-/systemjs-6.13.0.tgz",
@@ -5705,6 +5847,14 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -6054,6 +6204,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -6807,6 +6965,14 @@
       "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.20.15.tgz",
       "integrity": "sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg=="
     },
+    "@babel/runtime": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.11"
+      }
+    },
     "@babel/standalone": {
       "version": "7.20.15",
       "resolved": "https://registry.npmmirror.com/@babel/standalone/-/standalone-7.20.15.tgz",
@@ -7076,6 +7242,12 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
+    "@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmmirror.com/@types/resolve/-/resolve-1.17.1.tgz",
@@ -7606,6 +7778,11 @@
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
     "available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -7654,6 +7831,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "batch-processor": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/batch-processor/-/batch-processor-1.0.0.tgz",
@@ -7703,6 +7885,11 @@
         "update-browserslist-db": "^1.0.10"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -7746,6 +7933,22 @@
       "dev": true,
       "peer": true
     },
+    "canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmmirror.com/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      }
+    },
     "cfb": {
       "version": "1.2.2",
       "resolved": "https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz",
@@ -7986,6 +8189,14 @@
         "which": "^2.0.1"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
@@ -8111,6 +8322,12 @@
         "domelementtype": "^2.3.0"
       }
     },
+    "dompurify": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmmirror.com/dompurify/-/dompurify-2.4.5.tgz",
+      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==",
+      "optional": true
+    },
     "domutils": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/domutils/-/domutils-3.0.1.tgz",
@@ -8982,6 +9199,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -9314,6 +9536,15 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-8.0.1.tgz",
@@ -9773,6 +10004,21 @@
         "universalify": "^2.0.0"
       }
     },
+    "jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "klona": {
       "version": "2.0.6",
       "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz",
@@ -10582,8 +10828,7 @@
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regexp-tree": {
       "version": "0.1.24",
@@ -10659,6 +10904,12 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
@@ -10885,6 +11136,12 @@
         "frac": "~1.1.2"
       }
     },
+    "stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true
+    },
     "statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmmirror.com/statuses/-/statuses-1.5.0.tgz",
@@ -10989,6 +11246,12 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
+    },
     "systemjs": {
       "version": "6.13.0",
       "resolved": "https://registry.npmmirror.com/systemjs/-/systemjs-6.13.0.tgz",
@@ -11036,6 +11299,14 @@
         "terser": "^5.14.1"
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -11305,6 +11576,14 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -15,6 +15,8 @@
     "echarts-liquidfill": "^3.1.0",
     "element-resize-detector": "^1.2.4",
     "hikvs-web": "^1.0.4",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1",
     "moment": "^2.29.4",
     "pinia": "^2.0.16",
     "pinia-plugin-persistedstate": "^3.1.0",

src/components/dashboard/more/pv/pvPowerProfitChart.vue

@@ -9,11 +9,31 @@ export default {
         tooltip: {
           trigger: 'item',
         },
+        grid: {
+          left: '2%', //默认10%
+          right: '0%', //默认10%
+          bottom: '30%', //默认60
+      
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
         legend: {
           bottom: "8%",
           left: "center",
           icon: "circle",
         },
+        title:[
+          {
+            subtext: "单位: 元", //主标题
+            right: "0%", //标题的位置 默认是left，其余还有center、right属性
+            bottom: "20%",
+            subtextStyle: {
+              color: "rgb(160,160,160)",
+              fontSize: 14,
+              fontWeight: "normal",
+            },
+          },
+        ],
         series: [
           {
             name: "金额",

src/components/dashboard/more/pvPowerChart.vue

@@ -8,7 +8,7 @@ export default {
     let timeRange = this.$util.dateUtil.getNearlyMonthRange();
     return {
       queryData: {
-        timeRange: timeRange
+        timeRange: timeRange,
       },
     };
   },
@@ -22,7 +22,7 @@ export default {
 
 <template>
   <div class="dashboard-pvPower">
-    <Card title="光伏发电量: kWh">
+    <Card title="光伏发电量">
       <div style="height: 200px">
         <PvPowerSummaryChart
           :height="220"
@@ -34,7 +34,7 @@ export default {
       </div>
     </Card>
 
-    <Card title="光伏盈利: 元">
+    <Card title="光伏盈利">
       <div style="width: 90%; margin: 0 auto; padding: 15px">
         <PvPowerProfitChart
           :height="200"

src/components/dashboard/portrait/electricity/electricityDistributionChart.vue

@@ -10,26 +10,42 @@ export default {
           trigger: "item",
         },
         textStyle: {
-          fontSize: '14px',
+          fontSize: "14px",
           fontFamily: "PingFangSC-Regular, serif",
         },
         grid: {
           top: "-30%",
           bottom: "50%",
         },
-        title: {
-          text: "用电分布",
-          top: "7%",
-          left: "5%",
-          textStyle: {},
-        },
+        title: [
+          {
+            text: "用电分布", //主标题
+            left: "5%", //标题的位置 默认是left，其余还有center、right属性
+            top: "7%",
+            textStyle: {
+              color: "#000",
+              fontSize: 18,
+              fontWeight: "normal",
+            },
+          },
+          {
+            subtext: "单位: kWh", //主标题
+            right: "0%", //标题的位置 默认是left，其余还有center、right属性
+            bottom: "15%",
+            subtextStyle: {
+              color: "rgb(160,160,160)",
+              fontSize: 14,
+              fontWeight: "normal",
+            },
+          },
+        ],
         legend: {
           bottom: "5%",
           left: "10%",
           right: "10%",
           icon: "circle",
           textStyle: {
-            color: '#757575',
+            color: "#757575",
           },
         },
         series: [
@@ -41,15 +57,12 @@ export default {
             label: {
               show: true,
               formatter: (params) => {
-                const arr = [
-                  `{a|${params.name}}`,
-                  `{b|${params.value}}`,
-                ]
-                return arr.join('\n\n')
+                const arr = [`{a|${params.name}}`, `{b|${params.value}}`];
+                return arr.join("\n\n");
               },
               rich: {
                 b: {
-                  color: '#4D4D4D'
+                  color: "#4D4D4D",
                 },
               },
               textStyle: {
@@ -90,20 +103,23 @@ export default {
       let chart = this.$echarts.init(this.$refs.myChart);
       this.chart = chart;
       this.$util.chartsResize(this.chart);
-      this.option = this.$util.dataUtil.circleChartConfig(this.option)
+      this.option = this.$util.dataUtil.circleChartConfig(this.option);
       chart.setOption(this.option);
       this.getData();
     },
     getData() {
       this.loading = true;
-      return apiDashboard.getElectricityCircleInfoList(this.queryData).then((res) => {
-        this.option.series[0].data = res;
-        this.option = this.$util.dataUtil.circleChartConfig(this.option)
-        this.chart.setOption(this.option);
-        this.loading = false;
-      }).catch(err => {
-        this.loading = false;
-      });
+      return apiDashboard
+        .getElectricityCircleInfoList(this.queryData)
+        .then((res) => {
+          this.option.series[0].data = res;
+          this.option = this.$util.dataUtil.circleChartConfig(this.option);
+          this.chart.setOption(this.option);
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
     },
   },
 };
@@ -112,9 +128,9 @@ export default {
 <template>
   <a-spin :spinning="loading">
     <div
-        style="width: 100%"
-        :style="{ height: height + 'px' }"
-        ref="myChart"
+      style="width: 100%"
+      :style="{ height: height + 'px' }"
+      ref="myChart"
     ></div>
   </a-spin>
 </template>

src/components/dashboard/portrait/electricity/electricityUseChart.vue

@@ -8,7 +8,7 @@ export default {
       option: {
         legend: {
           data: [
-            '用电量',
+            '用电',
           ]
         },
         grid: {
@@ -24,7 +24,7 @@ export default {
         },
         yAxis: [
           {
-            name: 'kWh',
+            name: '电量(kWh)',
             type: 'value',
           },
         ],
@@ -49,7 +49,7 @@ export default {
         },
         series: [
           {
-            name: '用电量',
+            name: '用电',
             data: [],
             type: 'line',
             stack: 'x',

src/components/dashboard/portrait/water/waterDistributionChart.vue

@@ -13,11 +13,32 @@ export default {
           bottom: "8%",
           icon: "circle",
         },
-        title: {
-          text: "用水分布",
-          top: "7%",
-          left: "5%",
+        textStyle: {
+          fontSize: "14px",
+          fontFamily: "PingFangSC-Regular, serif",
         },
+        title: [
+          {
+            text: "用水分布", //主标题
+            left: "5%", //标题的位置 默认是left，其余还有center、right属性
+            top: "7%",
+            textStyle: {
+              color: "#000",
+              fontSize: 18,
+              fontWeight: "normal",
+            },
+          },
+          {
+            subtext: "单位: m³", //主标题
+            right: "0%", //标题的位置 默认是left，其余还有center、right属性
+            bottom: "15%",
+            subtextStyle: {
+              color: "rgb(160,160,160)",
+              fontSize: 14,
+              fontWeight: "normal",
+            },
+          },
+        ],
         series: [
           {
             name: "用水量",
@@ -59,20 +80,23 @@ export default {
       let chart = this.$echarts.init(this.$refs.myChart);
       this.chart = chart;
       this.$util.chartsResize(this.chart);
-      this.option = this.$util.dataUtil.circleChartConfig(this.option)
+      this.option = this.$util.dataUtil.circleChartConfig(this.option);
       chart.setOption(this.option);
       this.getData();
     },
     getData() {
       this.loading = true;
-      return apiDashboard.getWaterCircleInfoList(this.queryData).then((res) => {
-        this.option.series[0].data = res;
-        this.option = this.$util.dataUtil.circleChartConfig(this.option)
-        this.chart.setOption(this.option);
-        this.loading = false;
-      }).catch(err=>{
-        this.loading = false;
-      });
+      return apiDashboard
+        .getWaterCircleInfoList(this.queryData)
+        .then((res) => {
+          this.option.series[0].data = res;
+          this.option = this.$util.dataUtil.circleChartConfig(this.option);
+          this.chart.setOption(this.option);
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
     },
   },
 };
@@ -80,7 +104,11 @@ export default {
 
 <template>
   <a-spin :spinning="loading">
-    <div style="width: 100%" :style="{ height: height + 'px' }" ref="myChart"></div>
+    <div
+      style="width: 100%"
+      :style="{ height: height + 'px' }"
+      ref="myChart"
+    ></div>
   </a-spin>
 </template>
 

src/components/dashboard/portrait/water/waterUseChart.vue

@@ -12,7 +12,7 @@ export default {
           ]
         },
         grid: {
-          left: '0%', //默认10%
+          left: '2%', //默认10%
           right: '0%', //默认10%
           bottom: '20px', //默认60
           top: '60px',
@@ -24,7 +24,7 @@ export default {
         },
         yAxis: [
           {
-            name: 'm³',
+            name: '用水量(m³）',
             type: 'value',
           },
         ],

src/components/report/common/reportQuery.vue

@@ -13,12 +13,31 @@
       <!--    <a-select-option value="电信规划院"> 电信规划院 </a-select-option>-->
       <!--  </a-select>-->
       <!--</a-form-item>-->
-      <a-form-item label="时间范围：" class="formItem">
-        <timeRange ref="timeRange"></timeRange>
+      <a-form-item label="时间范围：" class="formItem" v-if="visible.time">
+        <timeRange
+          :time-range.sync="formData.timeRange"
+          ref="timeRange"
+          style="width: 250px"
+        ></timeRange>
       </a-form-item>
-      <a-form-item class="formItem">
-        <a-button type="primary">重置</a-button>
-        <a-button type="primary">查询</a-button>
+      <slot name="extraItem"></slot>
+      <a-form-item class="formItem" style="float: right; margin-right: 3%">
+        <a-space size="middle">
+          <a-button
+            type="primary"
+            size="small"
+            style="width: 70px; background-color: #b3b3b3; border: none"
+            @click="formReset"
+            >重置</a-button
+          >
+          <a-button
+            type="primary"
+            size="small"
+            style="width: 70px"
+            @click="search(formData)"
+            >查询</a-button
+          >
+        </a-space>
       </a-form-item>
     </a-form>
   </div>
@@ -30,10 +49,61 @@ export default {
   components: {
     timeRange,
   },
+  props: {
+    queryData: Object,
+    show: Array,
+    reset: Function,
+    search: Function,
+  },
+  emits: ["update:queryData"],
   data() {
     return {
       formData: {},
+      visible: {
+        company: false,
+        floor: false,
+        dept: false,
+        energy: false,
+        time: true,
+      },
+    };
+  },
+  setup(props, context) {
+    const methods = {
+      updateFormData(obj) {
+        context.emit("update:queryData", obj);
+      },
     };
+    return methods;
+  },
+  watch: {
+    formData: {
+      handler: function (val) {
+        this.updateFormData(val);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    if (this.floorOptions) {
+      this.floorData = this.floorOptions;
+    }
+    if (this.companyOptions) {
+      this.companyData = this.companyOptions;
+    }
+    if (this.queryData) {
+      this.formData = JSON.parse(JSON.stringify(this.queryData));
+      // if (this.queryData.floorId == "0") {
+      //   this.formData.floorId = "1";
+      // }
+      this.oriQueryData = JSON.parse(JSON.stringify(this.queryData));
+    }
+  },
+  methods: {
+    formReset() {
+      this.formData = JSON.parse(JSON.stringify(this.oriQueryData));
+      this.search();
+    },
   },
 };
 </script>
@@ -42,4 +112,4 @@ export default {
 .formItem {
   margin: 0px 15px;
 }
-</style>
+</style>

src/components/report/table/reportTableCustom.vue

@@ -1,7 +1,32 @@
 <template>
   <div class="reportTable-custom">
     <div class="report-query">
-      <Query :show="['time']" :query-data.sync="queryData" :search="search" />
+      <Query :show="['time']" :query-data.sync="queryData" :search="search">
+        <template #extraItem>
+          <a-form-model-item label="统计维度: ">
+            <a-select v-model="queryData.statis" style="width: 200px">
+              <a-select-option
+                v-for="(item, index) in statisOptions"
+                :key="index"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item label="事件对象: ">
+            <a-select v-model="queryData.event" style="width: 200px">
+              <a-select-option
+                v-for="(item, index) in eventOptions"
+                :key="index"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </template>
+      </Query>
     </div>
 
     <div class="report-table-view">
@@ -17,7 +42,16 @@
             <a-button type="link" size="small">打印</a-button>
           </div>
         </template>
-        <reportDataTable :data="tableData" :time-range="timeRange" />
+        <a-table
+          :rowKey="(record, index) => index"
+          :columns="columns"
+          :data-source="tableData"
+          bordered
+          :pagination="false"
+          ref="myTable"
+        >
+        </a-table>
+        <!-- <reportDataTable :data="tableData" :time-range="timeRange" /> -->
       </Card>
     </div>
   </div>
@@ -28,6 +62,8 @@ import Query from "@/components/common/query.vue";
 import Card from "@/components/common/card.vue";
 import reportDataTable from "@/components/report/data/tables/reportDataTable.vue";
 import * as XLSX from "xlsx";
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
 export default {
   components: {
     Card,
@@ -40,8 +76,179 @@ export default {
       timeRange: "",
       queryData: {
         timeRange: timeRange,
+        statis: "0",
+        event: "0",
       },
+      columns: [
+        {
+          title: "告警时段统计单表(单位：次)",
+          dataIndex: "building",
+          key: "building",
+          children: [
+            {
+              title: "建筑",
+              dataIndex: "building",
+              key: "building",
+              customRender: (value, row, index) => {
+                let obj = {
+                  children: value,
+                  attrs: {},
+                };
+                if (index === 0) {
+                  obj.attrs.rowSpan = 8;
+                } else {
+                  obj.attrs.rowSpan = 0;
+                }
+                return obj;
+              },
+            },
+            {
+              title: "统计维度",
+              dataIndex: "tjwd",
+              key: "tjwd",
+              customRender: (value, row, index) => {
+                let obj = {
+                  children: value,
+                  attrs: {},
+                };
+                if (index < 2) {
+                  obj.attrs.colSpan = 1;
+                } else if (index === 3) {
+                  obj.attrs.rowSpan = 5;
+                } else if (index > 3) {
+                  obj.attrs.colSpan = 0;
+                }
+                return obj;
+              },
+            },
+            {
+              title: "事件对象",
+              dataIndex: "eventObj",
+              key: "eventObj",
+            },
+            {
+              title: "2023/3/19-2023/4/19",
+              dataIndex: "dateRange",
+              key: "dateRange",
+              children: [
+                {
+                  title: "欠压",
+                  dataIndex: "undervoltage",
+                  key: "undervoltage",
+                  //align: 'center',
+                  //customRender: (value, row, index) => {
+                  //  let obj = {
+                  //    children: value,
+                  //    attrs: {
+                  //    }
+                  //  }
+                  //  if (index===0) {
+                  //    obj.attrs.colSpan = 9
+                  //  } else {
+                  //    obj.attrs.colSpan = 0
+                  //  }
+                  //  return obj;
+                  //},
+                },
+                {
+                  title: "过压",
+                  dataIndex: "overvoltage",
+                  key: "overvoltage",
+                },
+                {
+                  title: "过流",
+                  dataIndex: "overcurrent",
+                  key: "overcurrent",
+                },
+                {
+                  title: "过载",
+                  dataIndex: "overload",
+                  key: "overload",
+                },
+                {
+                  title: "过温",
+                  dataIndex: "overtm",
+                  key: "overtm",
+                },
+                {
+                  title: "低温",
+                  dataIndex: "undertm",
+                  key: "undertm",
+                },
+                {
+                  title: "短路",
+                  dataIndex: "shortcircuit",
+                  key: "shortcircuit",
+                },
+                {
+                  title: "断电",
+                  dataIndex: "breakele",
+                  key: "breakele",
+                },
+                {
+                  title: "离线",
+                  dataIndex: "underline",
+                  key: "underline",
+                },
+              ],
+            },
+            {
+              title: "处理情况",
+              dataIndex: "situation",
+              key: "situation",
+              children: [
+                {
+                  title: "已处理",
+                  dataIndex: "processed",
+                  key: "processed",
+                },
+                {
+                  title: "未处理",
+                  dataIndex: "unprocessed",
+                  key: "unprocessed",
+                },
+              ],
+            },
+          ],
+        },
+      ],
       oriTableData: [],
+      statisOptions: [
+        {
+          label: "全部",
+          value: "0",
+        },
+        {
+          label: "事项总计",
+          value: "1",
+        },
+        {
+          label: "分项总计",
+          value: "2",
+        },
+        {
+          label: "规划院",
+          value: "3",
+        },
+      ],
+      eventOptions: [
+        {
+          label: "全部",
+          value: "0",
+        },
+        {
+          label: "1F 插座动力	",
+          value: "1",
+        },
+        {
+          label: "7F 一般照明	",
+          value: "2",
+        },
+        {
+          label: "8F 插座动力	",
+          value: "3",
+        },
+      ],
       tableData: [
         {
           building: "主语国际",
@@ -137,23 +344,29 @@ export default {
       ],
     };
   },
+  watch: {
+    timeRange: function (val) {
+      this.columns[0].children[3].title = val;
+    },
+  },
   mounted() {
     this.oriTableData = JSON.parse(JSON.stringify(this.tableData));
+    this.columns[0].children[3].title = this.timeRange;
     this.search();
   },
   methods: {
     exportFunc() {
-      console.log("打印报表");
-      const data = [
-        ["姓名", "年龄", "性别", "毕业院校"],
-        ["张三", 18, "男", "清华大学"],
-        ["李四", 22, "女", "北京大学"],
-        ["王五", 20, "男", "上海交通大学"],
-      ];
-      const worksheet = XLSX.utils.aoa_to_sheet(data);
-      const workbook = XLSX.utils.book_new();
-      XLSX.utils.book_append_sheet(workbook, worksheet, "表格名字");
-      XLSX.writeFile(workbook, "能源报警报表.xlsx");
+      
+      // const data = [
+      //   ["姓名", "年龄", "性别", "毕业院校"],
+      //   ["张三", 18, "男", "清华大学"],
+      //   ["李四", 22, "女", "北京大学"],
+      //   ["王五", 20, "男", "上海交通大学"],
+      // ];
+      // const worksheet = XLSX.utils.aoa_to_sheet(data);
+      // const workbook = XLSX.utils.book_new();
+      // XLSX.utils.book_append_sheet(workbook, worksheet, "表格名字");
+      // XLSX.writeFile(workbook, "告警时段统计单表.xlsx");
     },
     getRandom(m, n) {
       let val = Math.random() * (m - n) + n;

src/components/report/table/reportTableSecurity.vue

@@ -1,18 +1,65 @@
 <template>
   <div class="reportTable-security">
     <div class="report-query">
-      <ReportQuery />
+      <ReportQuery
+        :show="['time']"
+        :query-data.sync="queryData"
+        :search="search"
+      >
+        <template #extraItem>
+          <a-form-model-item label="人员姓名">
+            <a-input
+              style="width: 200px"
+              v-model="queryData.name"
+              placeholder="请输入姓名"
+            />
+          </a-form-model-item>
+          <a-form-model-item label="所属部门名称: ">
+            <a-select v-model="queryData.dept" style="width: 200px">
+              <a-select-option
+                v-for="(item, index) in deptData"
+                :key="index"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item label="人员类型: ">
+            <a-select v-model="queryData.people" style="width: 200px">
+              <a-select-option
+                v-for="(item, index) in peopleOptions"
+                :key="index"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </template>
+      </ReportQuery>
     </div>
 
     <div class="report-table-view">
       <Card title="报告预览">
         <template #title-extra>
           <div style="padding-right: 20px">
-            <span style="color: #B2B2B2;font-size: 12px">支持 pdf,word,excel</span>
-            <a-button type="link" size="small">导出</a-button>
-            <a-button type="link" size="small" >打印</a-button>
+            <span style="color: #b2b2b2; font-size: 12px"
+              >支持 pdf,word,excel</span
+            >
+            <a-button type="link" size="small" @click="exportFunc"
+              >导出</a-button
+            >
+            <a-button type="link" size="small">打印</a-button>
           </div>
         </template>
+        <a-table
+          :columns="tableColumns"
+          :data-source="tableData"
+          :pagination="true"
+          :scroll="{ y: tableContainerHeight }"
+          bordered
+        ></a-table>
       </Card>
     </div>
   </div>
@@ -21,20 +68,373 @@
 <script>
 import ReportQuery from "@/components/report/common/reportQuery.vue";
 import Card from "@/components/common/card.vue";
+import * as XLSX from "xlsx";
 export default {
   components: {
     Card,
-    ReportQuery
+    ReportQuery,
   },
   data() {
-    return {}
+    let timeRange = this.$util.dateUtil.getNearlyMonthRange();
+    return {
+      timeRange: "",
+      queryData: {
+        timeRange: timeRange,
+        statis: "0",
+        name: "",
+        dept: "0",
+        people: "0",
+      },
+      oriTableData: [],
+      // 部门数据
+      deptData: [
+        {
+          label: "全部",
+          value: "0",
+        },
+        {
+          label: "业务一部",
+          value: "1",
+        },
+        {
+          label: "业务二部",
+          value: "2",
+        },
+        {
+          label: "业务三部",
+          value: "3",
+        },
+      ],
+      peopleOptions: [
+        {
+          label: "全部",
+          value: "0",
+        },
+        {
+          label: "自有员工",
+          value: "1",
+        },
+        {
+          label: "协作员工",
+          value: "2",
+        },
+        {
+          label: "访客",
+          value: "3",
+        },
+      ],
+      tableContainerHeight: 500,
+      tableColumns: [
+        {
+          title: "序号",
+          dataIndex: "index",
+          key: "index",
+          align: "center",
+          width: 80,
+          customRender: (text, record, index) => `${index + 1}`,
+        },
+        {
+          title: "姓名",
+          dataIndex: "name",
+          key: "name",
+          align: "center",
+        },
+        {
+          title: "人员类型",
+          dataIndex: "people_type",
+          key: "people_type",
+          align: "center",
+        },
+        {
+          title: "部门",
+          dataIndex: "department",
+          key: "department",
+          align: "center",
+        },
+        {
+          title: "通行时间",
+          dataIndex: "time",
+          key: "time",
+        },
+        {
+          title: "通行设备",
+          dataIndex: "equipment",
+          key: "equipment",
+          align: "center",
+        },
+        {
+          title: "通行方向",
+          dataIndex: "direction",
+          key: "direction",
+          align: "center",
+        },
+        {
+          title: "行为感知",
+          key: "operation",
+          fixed: "right",
+          width: 100,
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      originalData: [
+        {
+          key: "1",
+          name: "潘夏彤",
+          people_type: "自有员工",
+          department: "业务一部",
+          time: "2023-03-11 12:00:00",
+          equipment: "ZX010012",
+          direction: "进入B3",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "2",
+          name: "庞慧",
+          people_type: "协作员工",
+          department: "业务二部",
+          time: "2023-03-15 12:00:00",
+          equipment: "ZX010012",
+          direction: "进入1F",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "3",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务二部",
+          time: "2023-03-24 12:00:00",
+          equipment: "ZX010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "4",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务二部",
+          time: "2022-09-11 12:00:00",
+          equipment: "ZX010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "5",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务二部",
+          time: "2022-09-11 12:00:00",
+          equipment: "ZX010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "6",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务二部",
+          time: "2022-09-11 12:00:00",
+          equipment: "ZX010017",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "7",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZX010017",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "8",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZX010017",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "9",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "10",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "11",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "12",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "13",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "14",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "15",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "16",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "17",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "18",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "19",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "20",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "21",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+      ],
+      tableData: [],
+    };
   },
   mounted() {
+    this.initData();
   },
   methods: {
-
-  }
-}
+    initData() {
+      this.tableData = JSON.parse(JSON.stringify(this.originalData));
+    },
+    exportFunc() {
+      console.log("打印报表");
+      const data = [
+        ["姓名", "年龄", "性别", "毕业院校"],
+        ["张三", 18, "男", "清华大学"],
+        ["李四", 22, "女", "北京大学"],
+        ["王五", 20, "男", "上海交通大学"],
+      ];
+      const worksheet = XLSX.utils.aoa_to_sheet(data);
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, worksheet, "表格名字");
+      XLSX.writeFile(workbook, "智慧安防-安防人员.xlsx");
+    },
+    search() {},
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -52,4 +452,4 @@ export default {
     background-color: #ffffff;
   }
 }
-</style>
+</style>

src/components/report/table/reportTableWork.vue

@@ -1,18 +1,34 @@
 <template>
   <div class="reportTable-work">
     <div class="report-query">
-      <ReportQuery />
+      <ReportQuery
+        :show="['time']"
+        :query-data.sync="queryData"
+        :search="search"
+      >
+      </ReportQuery>
     </div>
 
     <div class="report-table-view">
       <Card title="报告预览">
         <template #title-extra>
           <div style="padding-right: 20px">
-            <span style="color: #B2B2B2;font-size: 12px">支持 pdf,word,excel</span>
-            <a-button type="link" size="small">导出</a-button>
-            <a-button type="link" size="small" >打印</a-button>
+            <span style="color: #b2b2b2; font-size: 12px"
+              >支持 pdf,word,excel</span
+            >
+            <a-button type="link" size="small" @click="exportFunc"
+              >导出</a-button
+            >
+            <a-button type="link" size="small">打印</a-button>
           </div>
         </template>
+        <a-table
+          :columns="tableColumns"
+          :data-source="tableData"
+          :pagination="true"
+          :scroll="{ y: tableContainerHeight }"
+          bordered
+        ></a-table>
       </Card>
     </div>
   </div>
@@ -21,20 +37,327 @@
 <script>
 import ReportQuery from "@/components/report/common/reportQuery.vue";
 import Card from "@/components/common/card.vue";
+import * as XLSX from "xlsx";
 export default {
   components: {
     Card,
-    ReportQuery
+    ReportQuery,
   },
   data() {
-    return {}
-  },
-  mounted() {
+    let timeRange = this.$util.dateUtil.getNearlyMonthRange();
+    return {
+      timeRange: "",
+      queryData: {
+        timeRange: timeRange,
+      },
+      oriTableData: [],
+      tableContainerHeight: 500,
+      tableColumns: [
+        {
+          title: "序号",
+          dataIndex: "index",
+          key: "index",
+          align: "center",
+          width: 80,
+          customRender: (text, record, index) => `${index + 1}`,
+        },
+        {
+          title: "姓名",
+          dataIndex: "name",
+          key: "name",
+          align: "center",
+        },
+        {
+          title: "人员类型",
+          dataIndex: "people_type",
+          key: "people_type",
+          align: "center",
+        },
+        {
+          title: "部门",
+          dataIndex: "department",
+          key: "department",
+          align: "center",
+        },
+        {
+          title: "通行时间",
+          dataIndex: "time",
+          key: "time",
+        },
+        {
+          title: "通行设备",
+          dataIndex: "equipment",
+          key: "equipment",
+          align: "center",
+        },
+        {
+          title: "通行方向",
+          dataIndex: "direction",
+          key: "direction",
+          align: "center",
+        },
+        {
+          title: "行为感知",
+          key: "operation",
+          fixed: "right",
+          width: 100,
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      originalData: [
+        {
+          key: "1",
+          name: "潘夏彤",
+          people_type: "自有员工",
+          department: "业务一部",
+          time: "2023-03-11 12:00:00",
+          equipment: "ZX010012",
+          direction: "进入B3",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "2",
+          name: "庞慧",
+          people_type: "协作员工",
+          department: "业务二部",
+          time: "2023-03-15 12:00:00",
+          equipment: "ZX010012",
+          direction: "进入1F",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "3",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务二部",
+          time: "2023-03-24 12:00:00",
+          equipment: "ZX010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "4",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务二部",
+          time: "2022-09-11 12:00:00",
+          equipment: "ZX010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "5",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务二部",
+          time: "2022-09-11 12:00:00",
+          equipment: "ZX010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "6",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务二部",
+          time: "2022-09-11 12:00:00",
+          equipment: "ZX010017",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "7",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZX010017",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "8",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZX010017",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "9",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "10",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "11",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "12",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "13",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "14",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "15",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "16",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "17",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "进入B2",
+          behavior: "",
+          directionStatus: "进",
+        },
+        {
+          key: "18",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务一部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "19",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "20",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+        {
+          key: "21",
+          name: "李天泽",
+          people_type: "访客",
+          department: "业务三部",
+          time: "2022-08-26 12:00:00",
+          equipment: "ZY010012",
+          direction: "出去B2",
+          behavior: "",
+          directionStatus: "出",
+        },
+      ],
+      tableData: [],
+    };
   },
+  mounted() {},
   methods: {
-
-  }
-}
+    exportFunc() {
+      console.log("打印报表");
+      const data = [
+        ["姓名", "年龄", "性别", "毕业院校"],
+        ["张三", 18, "男", "清华大学"],
+        ["李四", 22, "女", "北京大学"],
+        ["王五", 20, "男", "上海交通大学"],
+      ];
+      const worksheet = XLSX.utils.aoa_to_sheet(data);
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, worksheet, "表格名字");
+      XLSX.writeFile(workbook, "智慧办公-会议管理.xlsx");
+    },
+    search() {},
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -52,4 +375,4 @@ export default {
     background-color: #ffffff;
   }
 }
-</style>
+</style>

src/data/json/menuList.json

@@ -238,6 +238,16 @@
             "name": "能源报警报表",
             "router": "/report/table/custom",
             "icon": ""
+          },
+          {
+            "name": "智慧安防报表",
+            "router": "/report/table/reportTableSecurity",
+            "icon": ""
+          },
+          {
+            "name": "智慧办公报表",
+            "router": "/report/table/work",
+            "icon": ""
           }
         ]
       },
@@ -277,4 +287,4 @@
       }
     ]
   }
-]
+]