testcase

2022-08-14 13:32:32 +08:00 · 2022-08-14 13:32:32 +08:00 · 5c5b20c9b4
parent 833527db46
commit 5c5b20c9b4
9 changed files with 277 additions and 24 deletions
--- 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=="
+ }
+ }
 }
 }
 }
--- 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": {
--- a/src/App.vue
+++ b/src/App.vue
@ -3,9 +3,9 @@
 </template>

 <script>
-
 export default {
 name: 'App',
+
 }
 </script>

--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@ -7,14 +7,14 @@
 <pie-chart-outlined />
 <span>{{collapsed?"监控":"系统监控"}}</span>
 </a-menu-item>
- <a-sub-menu key="2">
+ <a-sub-menu>
 <template #title>
 <span>
 <user-outlined />
- <span>User</span>
+ <span>用户</span>
 </span>
 </template>
- <a-menu-item key="2-1">Tom</a-menu-item>
+ <a-menu-item key="user">用户列表</a-menu-item>
 </a-sub-menu>
 </a-menu>
 </a-layout-sider>
@ -28,7 +28,7 @@
 <template #overlay>
 <a-menu>
 <a-menu-item>
- <a href="javascript:;">注销</a>
+ <a href="javascript:" @click="login">注销</a>
 </a-menu-item>
 </a-menu>
 </template>
@ -36,7 +36,8 @@
 </a-layout-header>
 <a-layout-content style="margin: 0 16px">
 <a-breadcrumb style="margin: 16px 0">
- <a-breadcrumb-item>User</a-breadcrumb-item>
+ <a-breadcrumb-item v-if="route.meta.module">{{route.meta.module}}</a-breadcrumb-item>
+ <a-breadcrumb-item>{{route.meta.title}}</a-breadcrumb-item>
 </a-breadcrumb>
 <div :style="container">

@ -44,7 +45,7 @@
 </div>
 </a-layout-content>
 <a-layout-footer style="text-align: center">
- Ant Design ©2018 Created by Ant UED
+ 自动化测试研发 ©2018 研发部
 </a-layout-footer>
 </a-layout>
 </a-layout>
@ -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
 };
 },
 });
--- 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')
--- 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,
+ }

 ]

--- a/src/view/Login.vue
+++ b/src/view/Login.vue
@ -0,0 +1,15 @@
+<template>
+<div>
+ 我是登录页面
+</div>
+</template>
+
+<script>
+export default {
+ name: "Login.vue"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/view/Monit.vue
+++ b/src/view/Monit.vue
@ -1,15 +1,76 @@
 <template>
-<div>
- 我是监控页面
+<div class="charts" style="background: #fff; padding: 15px">
+<a-card title="cpu使用率" :bordered="false" style="width: 350px;height:350px" >
+ <echarts class="chart" :option="option" />
+</a-card>
+
+<a-card title="memory使用率" :bordered="false" style="width: 350px;height:350px" >
+ <echarts class="chart" :option="memory" />
+</a-card>
+
+
 </div>
+
 </template>

-<script>
-export default {
- name: "Monit"
-}
+<script setup>
+import {ref} from "vue";
+const option = ref( {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ series: [
+ {
+ name: 'cpu',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}'
+ },
+ data: [
+ {
+ value: 60,
+ name: 'cpu'
+ }
+ ]
+ }
+ ]
+})
+
+const memory = ref( {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ series: [
+ {
+ name: 'memory',
+ type: 'gauge',
+ progress: {
+ show: true
+ },
+ detail: {
+ valueAnimation: true,
+ formatter: '{value}'
+ },
+ data: [
+ {
+ value: 71.5,
+ name: 'memory'
+ }
+ ]
+ }
+ ]
+})
 </script>

-<style scoped>

+<style scoped>
+.chart{
+
+ height: 300px;
+ width: 300px;
+}
+.charts{
+ display: flex;
+ justify-content: flex-start;
+}
 </style>
--- a/src/view/User.vue
+++ b/src/view/User.vue
@ -0,0 +1,15 @@
+<template>
+<div>
+ 我是用户列表页面
+</div>
+</template>
+
+<script>
+export default {
+ name: "User.vue"
+}
+</script>
+
+<style scoped>
+
+</style>