diff --git a/package-lock.json b/package-lock.json index db502cf..15f83ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,9 @@ "ant-design-vue": "^3.3.0-beta.3", "axios": "^0.27.2", "core-js": "^3.8.3", + "echarts": "^5.3.3", "vue": "^3.2.13", + "vue-echarts": "^6.2.3", "vue-router": "^4.1.3" }, "devDependencies": { @@ -4938,6 +4940,20 @@ "node": ">=6.0.0" } }, + "node_modules/echarts": { + "version": "5.3.3", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz", + "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.3.2" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", @@ -8987,6 +9003,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "node_modules/resize-detector": { + "version": "0.3.0", + "resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz", + "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==" + }, "node_modules/resize-observer-polyfill": { "version": "1.5.1", "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", @@ -10130,6 +10151,48 @@ "@vue/shared": "3.2.37" } }, + "node_modules/vue-echarts": { + "version": "6.2.3", + "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.2.3.tgz", + "integrity": "sha512-xHzUvgsgk/asJTcNa8iVVwoovZU3iEUHvmBa3bzbiP3Y6OMxM1YXsoWOKVmVVaUusGs4ob4pSwjwNy2FemAz9w==", + "hasInstallScript": true, + "dependencies": { + "resize-detector": "^0.3.0", + "vue-demi": "^0.13.2" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.5", + "echarts": "^5.1.2", + "vue": "^2.6.12 || ^3.1.1" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/vue-echarts/node_modules/vue-demi": { + "version": "0.13.7", + "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.7.tgz", + "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/vue-eslint-parser": { "version": "8.3.0", "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", @@ -11056,6 +11119,19 @@ "resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz", "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", "dev": true + }, + "node_modules/zrender": { + "version": "5.3.2", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz", + "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } }, "dependencies": { @@ -14898,6 +14974,22 @@ "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==", "dev": true }, + "echarts": { + "version": "5.3.3", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz", + "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==", + "requires": { + "tslib": "2.3.0", + "zrender": "5.3.2" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", @@ -18047,6 +18139,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "resize-detector": { + "version": "0.3.0", + "resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz", + "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==" + }, "resize-observer-polyfill": { "version": "1.5.1", "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", @@ -18984,6 +19081,23 @@ "@vue/shared": "3.2.37" } }, + "vue-echarts": { + "version": "6.2.3", + "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.2.3.tgz", + "integrity": "sha512-xHzUvgsgk/asJTcNa8iVVwoovZU3iEUHvmBa3bzbiP3Y6OMxM1YXsoWOKVmVVaUusGs4ob4pSwjwNy2FemAz9w==", + "requires": { + "resize-detector": "^0.3.0", + "vue-demi": "^0.13.2" + }, + "dependencies": { + "vue-demi": { + "version": "0.13.7", + "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.7.tgz", + "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==", + "requires": {} + } + } + }, "vue-eslint-parser": { "version": "8.3.0", "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", @@ -19717,6 +19831,21 @@ "dev": true } } + }, + "zrender": { + "version": "5.3.2", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz", + "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==", + "requires": { + "tslib": "2.3.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } } } } diff --git a/package.json b/package.json index 0382295..4b411b9 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ "ant-design-vue": "^3.3.0-beta.3", "axios": "^0.27.2", "core-js": "^3.8.3", + "echarts": "^5.3.3", "vue": "^3.2.13", + "vue-echarts": "^6.2.3", "vue-router": "^4.1.3" }, "devDependencies": { diff --git a/src/App.vue b/src/App.vue index 2d20999..d95ef8b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,9 +3,9 @@ diff --git a/src/components/Layout.vue b/src/components/Layout.vue index 3e79939..22f80fc 100644 --- a/src/components/Layout.vue +++ b/src/components/Layout.vue @@ -7,14 +7,14 @@ {{collapsed?"监控":"系统监控"}} - + - Tom + 用户列表 @@ -28,7 +28,7 @@ @@ -36,7 +36,8 @@ - User + {{route.meta.module}} + {{route.meta.title}}
@@ -44,7 +45,7 @@
- Ant Design ©2018 Created by Ant UED + 自动化测试研发 ©2018 研发部 @@ -58,8 +59,8 @@ import { FileOutlined, DownOutlined, } from '@ant-design/icons-vue'; -import {useRouter} from "vue-router"; -import { defineComponent, ref } from 'vue'; +import {useRouter,useRoute} from "vue-router"; +import { defineComponent, ref,watch } from 'vue'; export default defineComponent({ name: "layout", components: { @@ -77,17 +78,23 @@ export default defineComponent({ let container = { padding: '24px', background: '#fff', minHeight: '100%'} const router = useRouter() + const route = useRoute() const goTopage=(item)=>{ - console.log(item.key,"=====>") router.push('/'+item.key).catch((err)=>err) - + console.log(route.meta.title) + } + const login =()=>{ + //清除cookie + router.push("/login") } return { collapsed, selectedKeys, container, - goTopage + goTopage, + route, + login }; }, }); diff --git a/src/main.js b/src/main.js index e6b5b23..efa6bd3 100644 --- a/src/main.js +++ b/src/main.js @@ -4,8 +4,10 @@ import Antd from 'ant-design-vue/es' import 'ant-design-vue/dist/antd.css' import router from './router' import './assets/css/style.css' - +import Echarts from "vue-echarts"; +import "echarts" const app = createApp(App) +app.component("Echarts",Echarts) app.use(Antd) app.use(router) app.mount('#app') diff --git a/src/router/index.js b/src/router/index.js index ff54bd1..686c177 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,18 +1,40 @@ import {createRouter,createWebHistory} from 'vue-router' import Layout from "@/components/Layout"; import Monit from "@/view/Monit"; - +import User from "@/view/User"; +import Login from "@/view/Login"; const routes = [ { path: "/", name: "layout", component: Layout, - children: [{ + children: [ + { path: "monit", name: "monit", - component: Monit, - }] + component: Monit, + meta:{ + title: "系统监控" + } + }, + { + path: "user", + name: "user", + component: User, + meta: { + title: "用户列表", + module: "用户", + } + } + + + ] }, + { + path: "/login", + name: "login", + component: Login, + } ] diff --git a/src/view/Login.vue b/src/view/Login.vue new file mode 100644 index 0000000..d6bace8 --- /dev/null +++ b/src/view/Login.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/view/Monit.vue b/src/view/Monit.vue index a006b9a..e3c4146 100644 --- a/src/view/Monit.vue +++ b/src/view/Monit.vue @@ -1,15 +1,76 @@ - - \ No newline at end of file diff --git a/src/view/User.vue b/src/view/User.vue new file mode 100644 index 0000000..2b99eac --- /dev/null +++ b/src/view/User.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file