testcase

package-lock.json

@@ -10,6 +10,7 @@
  "dependencies": {
  "ant-design-vue": "^3.3.0-beta.3",
  "axios": "^0.27.2",
+ "canvas-nest.js": "^2.0.4",
  "core-js": "^3.8.3",
  "echarts": "^5.3.3",
  "mitt": "^3.0.0",
@@ -17,6 +18,7 @@
  "pinia": "^2.0.18",
  "pinia-plugin-persist": "^1.0.0",
  "vue": "^3.2.13",
+ "vue-canvas-nest": "^2.0.0",
  "vue-echarts": "^6.2.3",
  "vue-router": "^4.1.3"
  },
@@ -3793,6 +3795,14 @@
  "integrity": "sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==",
  "dev": true
  },
+ "node_modules/canvas-nest.js": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmmirror.com/canvas-nest.js/-/canvas-nest.js-2.0.4.tgz",
+ "integrity": "sha512-Wgc+39fQBIP8fm9+Rq+Zt6+QLHZRsIKpaOQPL5KcWPlXTAalCKY4KCuklY7qzzZqBRF/t2APIrk+PuRw6ZlOog==",
+ "dependencies": {
+ "size-sensor": "^0.2.0"
+ }
+ },
  "node_modules/case-sensitive-paths-webpack-plugin": {
  "version": "2.4.0",
  "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -9476,6 +9486,11 @@
  "node": ">= 10"
  }
  },
+ "node_modules/size-sensor": {
+ "version": "0.2.6",
+ "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-0.2.6.tgz",
+ "integrity": "sha512-0EZ0tXXjyRl9R9+JpoBdH57Xpnbf5NTyDdj7fnFL6KqCsdKyah286ShMflnV2SonnrSFH4OAT/52Jy8qqnoerg=="
+ },
  "node_modules/slash": {
  "version": "3.0.0",
  "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@@ -10249,6 +10264,25 @@
  "@vue/shared": "3.2.37"
  }
  },
+ "node_modules/vue-canvas-nest": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmmirror.com/vue-canvas-nest/-/vue-canvas-nest-2.0.0.tgz",
+ "integrity": "sha512-YUKwbDDEB36NlEvU/Et6S68LaP+RQatEQIJZuL1f0nGIp5h8r+WjsWmwAZK/pt2c7FeXvWWNmuHUcY+539EPbA==",
+ "dependencies": {
+ "canvas-nest.js": "2.0.3"
+ },
+ "peerDependencies": {
+ "vue": "^2.x"
+ }
+ },
+ "node_modules/vue-canvas-nest/node_modules/canvas-nest.js": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmmirror.com/canvas-nest.js/-/canvas-nest.js-2.0.3.tgz",
+ "integrity": "sha512-zL+AN9alP5fl/Ek2gZMpWS4Hoz5jMf1NonYPvdsU5SV++m8/b45EUnTje6GUs1998q6wGISYYRHiWho1JXGM6w==",
+ "dependencies": {
+ "size-sensor": "^0.2.0"
+ }
+ },
  "node_modules/vue-echarts": {
  "version": "6.2.3",
  "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.2.3.tgz",
@@ -14160,6 +14194,14 @@
  "integrity": "sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==",
  "dev": true
  },
+ "canvas-nest.js": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmmirror.com/canvas-nest.js/-/canvas-nest.js-2.0.4.tgz",
+ "integrity": "sha512-Wgc+39fQBIP8fm9+Rq+Zt6+QLHZRsIKpaOQPL5KcWPlXTAalCKY4KCuklY7qzzZqBRF/t2APIrk+PuRw6ZlOog==",
+ "requires": {
+ "size-sensor": "^0.2.0"
+ }
+ },
  "case-sensitive-paths-webpack-plugin": {
  "version": "2.4.0",
  "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -18603,6 +18645,11 @@
  "totalist": "^1.0.0"
  }
  },
+ "size-sensor": {
+ "version": "0.2.6",
+ "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-0.2.6.tgz",
+ "integrity": "sha512-0EZ0tXXjyRl9R9+JpoBdH57Xpnbf5NTyDdj7fnFL6KqCsdKyah286ShMflnV2SonnrSFH4OAT/52Jy8qqnoerg=="
+ },
  "slash": {
  "version": "3.0.0",
  "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@@ -19222,6 +19269,24 @@
  "@vue/shared": "3.2.37"
  }
  },
+ "vue-canvas-nest": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmmirror.com/vue-canvas-nest/-/vue-canvas-nest-2.0.0.tgz",
+ "integrity": "sha512-YUKwbDDEB36NlEvU/Et6S68LaP+RQatEQIJZuL1f0nGIp5h8r+WjsWmwAZK/pt2c7FeXvWWNmuHUcY+539EPbA==",
+ "requires": {
+ "canvas-nest.js": "2.0.3"
+ },
+ "dependencies": {
+ "canvas-nest.js": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmmirror.com/canvas-nest.js/-/canvas-nest.js-2.0.3.tgz",
+ "integrity": "sha512-zL+AN9alP5fl/Ek2gZMpWS4Hoz5jMf1NonYPvdsU5SV++m8/b45EUnTje6GUs1998q6wGISYYRHiWho1JXGM6w==",
+ "requires": {
+ "size-sensor": "^0.2.0"
+ }
+ }
+ }
+ },
  "vue-echarts": {
  "version": "6.2.3",
  "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.2.3.tgz",

package.json

@@ -10,6 +10,7 @@
  "dependencies": {
  "ant-design-vue": "^3.3.0-beta.3",
  "axios": "^0.27.2",
+ "canvas-nest.js": "^2.0.4",
  "core-js": "^3.8.3",
  "echarts": "^5.3.3",
  "mitt": "^3.0.0",
@@ -17,6 +18,7 @@
  "pinia": "^2.0.18",
  "pinia-plugin-persist": "^1.0.0",
  "vue": "^3.2.13",
+ "vue-canvas-nest": "^2.0.0",
  "vue-echarts": "^6.2.3",
  "vue-router": "^4.1.3"
  },

src/view/Login.vue

@@ -1,5 +1,6 @@
 <template>
- <div class="container">
+
+ <div class="container" id="log_father">
  <div class="loginBox">
  <div class="text">
  监控系统后台
@@ -32,9 +33,10 @@
 </template>
 
 <script>
+import CanvasNest from 'canvas-nest.js'
 import {UserOutlined, LockOutlined} from '@ant-design/icons-vue';
 import {useRouter} from 'vue-router'
-import {reactive, ref} from 'vue'
+import {onMounted, reactive, ref} from 'vue'
 import {message} from 'ant-design-vue';
 import {useStore} from "@/store";
 import {Login} from '@/api/user';
@@ -53,6 +55,17 @@ export default {
  })
  //用户名和密码验证校验
  const formRef = ref();
+ onMounted(()=>{
+ let element = document.getElementById("log_father")
+ let config = {
+ color: "123, 104, 238",
+ pointColor: '255, 155, 0',
+ opacity: 1,
+ zIndex: 5,
+ count: 100,
+ }
+ new CanvasNest(element, config);
+ })
 
  const router = useRouter()
 
@@ -103,7 +116,7 @@ export default {
  close,
  rules,
  formRef,
- logins
+ logins,
  }
  },