第一版完成

package-lock.json

@@ -2463,6 +2463,112 @@
         "strip-ansi": "^6.0.0"
       }
     },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
+      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.45",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
+      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.2.45",
+        "@vue/shared": "3.2.45"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
+      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.45",
+        "@vue/compiler-dom": "3.2.45",
+        "@vue/compiler-ssr": "3.2.45",
+        "@vue/reactivity-transform": "3.2.45",
+        "@vue/shared": "3.2.45",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/postcss": {
+      "version": "8.4.20",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
+      "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
+      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.45",
+        "@vue/shared": "3.2.45"
+      }
+    },
     "node_modules/@vue/component-compiler-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/component-compiler-utils/download/@vue/component-compiler-utils-3.3.0.tgz?cache=0&sync_timestamp=1635248303132&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vue%2Fcomponent-compiler-utils%2Fdownload%2F%40vue%2Fcomponent-compiler-utils-3.3.0.tgz",
@@ -2526,6 +2632,29 @@
         "webpack": ">=4.0.0"
       }
     },
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
+      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.45",
+        "@vue/shared": "3.2.45",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
+      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.nlark.com/@vue/web-component-wrapper/download/@vue/web-component-wrapper-1.3.0.tgz",
@@ -6528,6 +6657,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.nlark.com/esutils/download/esutils-2.0.3.tgz",
@@ -9543,6 +9680,17 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz",
@@ -10122,6 +10270,20 @@
       "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
       "dev": true
     },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.nlark.com/nanomatch/download/nanomatch-1.2.13.tgz",
@@ -13698,6 +13860,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.nlark.com/source-map-resolve/download/source-map-resolve-0.5.3.tgz",
@@ -13738,6 +13911,15 @@
       "deprecated": "See https://github.com/lydell/source-map-url#deprecated",
       "dev": true
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/spdx-correct/download/spdx-correct-3.1.1.tgz",
@@ -18276,6 +18458,97 @@
         "strip-ansi": "^6.0.0"
       }
     },
+    "@vue/compiler-core": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
+      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.45",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true,
+          "peer": true
+        }
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
+      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@vue/compiler-core": "3.2.45",
+        "@vue/shared": "3.2.45"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
+      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.45",
+        "@vue/compiler-dom": "3.2.45",
+        "@vue/compiler-ssr": "3.2.45",
+        "@vue/reactivity-transform": "3.2.45",
+        "@vue/shared": "3.2.45",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.4.20",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
+          "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "nanoid": "^3.3.4",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true,
+          "peer": true
+        }
+      }
+    },
+    "@vue/compiler-ssr": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
+      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@vue/compiler-dom": "3.2.45",
+        "@vue/shared": "3.2.45"
+      }
+    },
     "@vue/component-compiler-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/component-compiler-utils/download/@vue/component-compiler-utils-3.3.0.tgz?cache=0&sync_timestamp=1635248303132&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vue%2Fcomponent-compiler-utils%2Fdownload%2F%40vue%2Fcomponent-compiler-utils-3.3.0.tgz",
@@ -18330,6 +18603,29 @@
       "dev": true,
       "requires": {}
     },
+    "@vue/reactivity-transform": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
+      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.45",
+        "@vue/shared": "3.2.45",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
+      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.nlark.com/@vue/web-component-wrapper/download/@vue/web-component-wrapper-1.3.0.tgz",
@@ -21574,6 +21870,14 @@
       "integrity": "sha1-OYrT88WiSUi+dyXoPRGn3ijNvR0=",
       "dev": true
     },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.nlark.com/esutils/download/esutils-2.0.3.tgz",
@@ -23922,6 +24226,17 @@
         "yallist": "^3.0.2"
       }
     },
+    "magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz",
@@ -24394,6 +24709,14 @@
       "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
       "dev": true
     },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.nlark.com/nanomatch/download/nanomatch-1.2.13.tgz",
@@ -27356,6 +27679,14 @@
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.nlark.com/source-map-resolve/download/source-map-resolve-0.5.3.tgz",
@@ -27393,6 +27724,14 @@
       "integrity": "sha1-CvZmBadFpaL5HPG7+KevvCg97FY=",
       "dev": true
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/spdx-correct/download/spdx-correct-3.1.1.tgz",

src/components/PeopleRecord.vue

@@ -21,7 +21,13 @@
         </div>
         <!-- 实时监测表格区域 -->
         <div class="watch-form">
-          <el-table :data="tableData" border style="width: 100%" height="517">
+          <el-table
+            :data="tableData"
+            border
+            style="width: 100%"
+            height="517"
+            v-moretable="moretable"
+          >
             <el-table-column label="捕获" header-align="center" width="100">
               <template slot-scope="{ row }">
                 <img
@@ -79,14 +85,19 @@
                 placeholder="选择日期"
                 value-format="yyyy-MM-dd"
                 v-model="dateTime"
-                @change="getRecordData"
+                @change="handleChangeTime"
               >
               </el-date-picker>
             </div>
           </div>
           <!-- 表格数据 -->
           <div class="record-form-list">
-            <el-table :data="recordList" style="width: 100%" height="428">
+            <el-table
+              :data="recordList"
+              style="width: 100%"
+              height="428"
+              v-moretable="moretable_record"
+            >
               <el-table-column
                 prop="name"
                 label="姓名"
@@ -124,7 +135,7 @@
           <div class="line-img">
             <img src="@/assets/jiantou.png" />
           </div>
-          <div class="line-info">24小时人流量</div>
+          <div class="line-info">7小时人流量</div>
         </div>
         <!-- 折线图 -->
         <div class="right-line-body" id="line"></div>
@@ -153,15 +164,138 @@ export default {
   name: "HelloWorld",
   data() {
     return {
-      // 人员数据
+      // 实时监测人员列表数据
       tableData: [],
+      // 实时监测人员列表当前页
+      page: 1,
+      // 历史记录人员列表数据
+      recordList: [],
+      // 历史记录人员列表当前页
+      record_page: 1,
+      // 时间选择框选择的时间值
+      dateTime: null,
+      // 折线图数据
+      dateTimeList: [], // 最近7小时的时间数组
+      alumniList: [], // 校友数组
+      restsList: [], // 其他数组
+      staffList: [], // 教职工数组
+      studentList: [], // 学生数组
+      temporaryWorkerList: [], // 临时人员数组
+      visitorList: [], // 访客数组
+      // 饼形图数据
+      pieData: [],
+    };
+  },
+  created() {
+    this.getData();
+    this.getRecordData();
+    this.getRatioData();
+    this.getTrafficData();
+  },
+  watch: {
+    // 监听数据变化重新渲染图表
+    dateTimeList() {
+      this.getLineChart();
+    },
+    pieData() {
+      this.getPieChart();
+    },
+  },
+  methods: {
+    // 获取实时监测列表数据
+    async getData() {
+      let res = await this.$axios({
+        url: "/accessRecord/access/record/realTime",
+        method: "get",
+        params: {
+          page: this.page,
+          size: null,
+        },
+      });
+      // console.log(res);
+      if (res.data.status == 20001) {
+        this.tableData = [...this.tableData, ...res.data.data];
+      } else {
+        this.$message.error(res.data.desc);
+      }
+    },
+    // 获取历史记录列表数据
+    async getRecordData() {
+      let res = await this.$axios({
+        url: "/accessRecord/access/record/history",
+        method: "get",
+        params: {
+          dateTime: this.dateTime,
+          page: this.record_page,
+          size: null,
+        },
+      });
+      // console.log(res);
+      if (res.data.status == 20001) {
+        this.recordList = [...this.recordList, ...res.data.data];
+      } else {
+        this.$message.error(res.data.desc);
+      }
+    },
+    // 获取人员比例数据
+    async getRatioData() {
+      let res = await this.$axios({
+        url: "/accessRecord/access/record/ratios",
+        method: "get",
+      });
+      // console.log(res);
+      if (res.data.status == 20001) {
+        this.pieData = res.data.data.filter((item) => item.value != 0);
+      } else {
+        this.$message.error(res.data.desc);
+      }
+    },
+    // 获取7小时人流量数据
+    async getTrafficData() {
+      let res = await this.$axios({
+        url: "/accessRecord/access/record/traffic",
+        method: "get",
+      });
+      // console.log(res);
+      if (res.data.status == 20001) {
+        this.dateTimeList = res.data.data.dateTime;
+        this.alumniList = res.data.data.alumniList;
+        this.restsList = res.data.data.restsList;
+        this.staffList = res.data.data.staffList;
+        this.studentList = res.data.data.studentList;
+        this.temporaryWorkerList = res.data.data.temporaryWorkerList;
+        this.visitorList = res.data.data.visitorList;
+      } else {
+        this.$message.error(res.data.desc);
+      }
+    },
+    // 历史记录表格时间选择框改变时间回调
+    handleChangeTime() {
+      this.recordList = [];
+      this.record_page = 1;
+      this.getRecordData();
+    },
+    // 实时监测表格滑动到底部加载更多回调
+    moretable() {
+      this.page += 1;
+      this.getData();
+    },
+    // 历史记录表格滑动到底部加载更多回调
+    moretable_record() {
+      this.record_page += 1;
+      this.getRecordData();
+    },
+    // 创建折线图
+    getLineChart() {
+      let chartLineDom = document.getElementById("line");
+      let myLineChart = echarts.init(chartLineDom);
       // 折线图表配置
-      lineOption: {
+      let lineOption = {
         tooltip: {
           trigger: "axis",
         },
         legend: {
-          data: ["教师", "学生", "其他"],
+          data: ["教职工", "学生", "其他", "校友", "访客", "临时人员"],
           textStyle: {
             color: "#fff",
           },
@@ -175,7 +309,7 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: false,
-          data: [0, 4, 8, 12, 16, 20, 24],
+          data: this.dateTimeList,
           axisLine: {
             lineStyle: {
               color: "#0febff",
@@ -208,9 +342,9 @@ export default {
         },
         series: [
           {
-            name: "教师",
+            name: "教职工",
             type: "line",
-            data: [120, 132, 101, 134, 90, 230, 210],
+            data: this.staffList,
             //设定为实心点
             symbol: "circle",
             //设定实心点的大小
@@ -221,23 +355,48 @@ export default {
           {
             name: "学生",
             type: "line",
-            data: [220, 182, 191, 234, 290, 330, 310],
+            data: this.studentList,
             symbol: "circle",
             symbolSize: 10,
-            // label: { show: true },
           },
           {
             name: "其他",
             type: "line",
             symbol: "circle",
             symbolSize: 10,
-            data: [150, 232, 201, 154, 190, 330, 410],
-            // label: { show: true },
+            data: this.restsList,
+          },
+          {
+            name: "校友",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 10,
+            data: this.alumniList,
+          },
+          {
+            name: "访客",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 10,
+            data: this.visitorList,
+          },
+          {
+            name: "临时人员",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 10,
+            data: this.temporaryWorkerList,
           },
         ],
-      },
+      };
+      myLineChart.setOption(lineOption);
+    },
+    // 创建饼状图
+    getPieChart() {
+      let chartPieDom = document.getElementById("pie");
+      let myPieChart = echarts.init(chartPieDom);
       // 饼形图表配置
-      pieOption: {
+      let pieOption = {
         legend: {
           orient: "vertical",
           align: "left",
@@ -252,18 +411,16 @@ export default {
           {
             name: "数量",
             type: "pie",
+            // 设置最小角度，解决数据差异过大问题
+            minAngle: 10,
             radius: ["10%", "55%"],
-            center: ["40%", "50%"],
-            roseType: "radius",
+            center: ["38%", "50%"],
+            // 玫瑰扇形图设置
+            // roseType: "radius",
             itemStyle: {
               borderRadius: 5,
             },
-            data: [
-              { value: 80, name: "教师" },
-              { value: 60, name: "学生" },
-              { value: 40, name: "物业" },
-              { value: 50, name: "其他" },
-            ],
+            data: this.pieData,
             label: {
               formatter: "{d}%",
               fontWeight: "bold",
@@ -275,62 +432,8 @@ export default {
             },
           },
         ],
-      },
-      // 历史记录列表
-      recordList: [],
-      // 时间选择框选择的时间值
-      dateTime: null,
-    };
-  },
-  mounted() {
-    // 初始化图表
-    this.initChart();
-    this.getData();
-    this.getRecordData();
-  },
-  methods: {
-    async getData() {
-      let res = await this.$axios({
-        url: "/popup-api/access/record/realTime",
-        method: "get",
-        params: {
-          page: 1,
-          size: null,
-        },
-      });
-      console.log(res);
-      if (res.data.status == 20001) {
-        this.tableData = res.data.data;
-      } else {
-        this.$message.error(res.data.desc);
-      }
-    },
-    // 获取历史记录列表数据
-    async getRecordData() {
-      let res = await this.$axios({
-        url: "/popup-api/access/record/history",
-        method: "get",
-        params: {
-          dateTime: this.dateTime,
-          page: 1,
-          size: null,
-        },
-      });
-      // console.log(res);
-      if (res.data.status == 20001) {
-        this.recordList = res.data.data;
-      } else {
-        this.$message.error(res.data.desc);
-      }
-    },
-    // 创建图表
-    initChart() {
-      var chartLineDom = document.getElementById("line");
-      var chartPieDom = document.getElementById("pie");
-      var myLineChart = echarts.init(chartLineDom);
-      var myPieChart = echarts.init(chartPieDom);
-      myLineChart.setOption(this.lineOption);
-      myPieChart.setOption(this.pieOption);
+      };
+      myPieChart.setOption(pieOption);
     },
   },
 };
@@ -369,7 +472,7 @@ export default {
     display: flex;
     flex-wrap: wrap;
     float: left;
-    width: 811px;
+    width: 800px;
     height: 586px;
     .left-watch {
       margin: 0 11px 0 17px;
@@ -412,7 +515,7 @@ export default {
             display: flex;
             flex-direction: column;
             margin-left: 10px;
-            div{
+            div {
               flex: 1;
             }
           }

src/main.js

@@ -9,6 +9,20 @@ Vue.use(ElementUI);
 
 Vue.config.productionTip = false
 
+// 注册 表格滚动底部指令
+Vue.directive('moretable', {
+  bind(el, binding) {
+    // 获取element-ui定义好的scroll盒子 表格滚动底部事件
+    const TABLE_DOM = el.querySelector('.el-table__body-wrapper')
+    TABLE_DOM.addEventListener('scroll', function () {
+      const CONDITIONVALUE = this.scrollHeight - this.scrollTop <= this.clientHeight
+      if (CONDITIONVALUE) {
+        binding.value()
+      }
+    })
+  }
+})
+
 new Vue({
   render: h => h(App),
 }).$mount('#app')

vue.config.js

@@ -1,18 +1,18 @@
 module.exports = {
     assetsDir: 'static',
     parallel: false,
-    publicPath: './',
+    publicPath: '/accessRecordH5/',
     devServer: {
         open: true,
-        //以上的ip和端口是我们本机的;下面为需要跨域的
         proxy: {
             //配置跨域
-            '/popup-api': {
-                target: 'http://192.168.161.100:8087',
+            '/accessRecord': {
+                // target: 'http://192.168.161.100:8087',
+                target: 'https://chtech.ncjti.edu.cn/studentsportrait/accessRecord',
                 //这里后台的地址模拟的;应该填写你们真实的后台接口
                 changOrigin: true,//允许跨域
                 pathRewrite: {
-                    '^/popup-api': ''//请求的时候使用这个api就可以
+                    '^/accessRecord': ''//请求的时候使用这个api就可以
                 }
             },
         }