testcase

src/components/Layout.vue

@@ -1,16 +1,16 @@
 <template>
  <a-layout class="layout">
  <a-layout-sider v-model:collapsed="collapsed" collapsible class="left-menu">
- <div class="logo">{{collapsed?"系统":"自动化系统监控"}}</div>
+ <div class="logo">{{ collapsed ? "系统" : "自动化系统监控" }}</div>
  <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline" @click="goTopage">
  <a-menu-item key="monit">
- <pie-chart-outlined />
+ <pie-chart-outlined/>
- <span>{{collapsed?"监控":"系统监控"}}</span>
+ <span>{{ collapsed ? "监控" : "系统监控" }}</span>
  </a-menu-item>
  <a-sub-menu>
  <template #title>
  <span>
- <user-outlined />
+ <user-outlined/>
  <span>用户</span>
  </span>
  </template>
@@ -21,23 +21,23 @@
  <a-layout>
  <a-layout-header style="background: #fff; padding: 0" class="headers">
  <a-dropdown style="margin-right: 20px" class="down">
- <a class="ant-dropdown-link" @click.prevent>
+  <a class="ant-dropdown-link" @click.prevent>
- {{username}}
+  {{ username }}
- <DownOutlined />
+  <DownOutlined/>
- </a>`
+  </a>`
- <template #overlay>
+  <template #overlay>
- <a-menu>
+  <a-menu>
- <a-menu-item>
+  <a-menu-item>
- <a href="javascript:" @click="logout">注销</a>
+  <a href="javascript:" @click="logout">注销</a>
- </a-menu-item>
+  </a-menu-item>
- </a-menu>
+  </a-menu>
- </template>
+  </template>
- </a-dropdown>
+  </a-dropdown>
  </a-layout-header>
  <a-layout-content style="margin: 0 16px">
  <a-breadcrumb style="margin: 16px 0">
- <a-breadcrumb-item v-if="route.meta.module">{{route.meta.module}}</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-item>{{ route.meta.title }}</a-breadcrumb-item>
  </a-breadcrumb>
  <div :style="container">
 
@@ -59,8 +59,8 @@ import {
  FileOutlined,
  DownOutlined,
 } from '@ant-design/icons-vue';
-import {useRouter,useRoute} from "vue-router";
+import {useRouter, useRoute} from "vue-router";
-import { defineComponent, ref } from 'vue';
+import {defineComponent, ref} from 'vue';
 import {useStore} from "@/store";
 import {storeToRefs} from "pinia";
 
@@ -76,17 +76,18 @@ export default defineComponent({
  },
 
  setup() {
- const  collapsed = ref(false)
+ const collapsed = ref(false)
  const selectedKeys = ref(['1'])
  const {username} = storeToRefs(useStore())
  let container = {
- padding: '24px', background: '#fff', minHeight: '100%'}
+ padding: '24px', background: '#fff', minHeight: '100%'
+ }
  const router = useRouter()
  const route = useRoute()
- const goTopage=(item)=>{
+ const goTopage = (item) => {
- router.push('/'+item.key).catch((err)=>err)
+ router.push('/' + item.key).catch((err) => err)
  }
- const logout =()=>{
+ const logout = () => {
  //清除cookie
  window.sessionStorage.clear()
  router.push("/login")
@@ -112,29 +113,35 @@ export default defineComponent({
  text-align: center;
  letter-spacing: 2px;
  font-size: 17px;
- font-weight:bold;
+ font-weight: bold;
  background: rgba(255, 255, 255, 0.3);
 }
-.layout{
+
+.layout {
  height: 100vh;
 }
-.left-menu{
+
+.left-menu {
  overflow-y: scroll;
  height: 100vh;
 
 
 }
+
 .site-layout .site-layout-background {
  background: #fff;
 }
+
 [data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
 }
-.headers{
+
+.headers {
  display: flex;
  justify-content: right;
 }
-.down{
+
+.down {
  margin-right: 45px;
  font-size: 15px;
  font-weight: bolder;
@@ -142,20 +149,22 @@ export default defineComponent({
 
 /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar {
- width:8px;
+ width: 8px;
- height:16px;
+ height: 16px;
- background-color: rgba(0, 9, 38, 0.69);
+ background-color: rgba(0, 9, 38, 0.69);
 }
+
 /*定义滚动条轨道内阴影+圆角*/
 ::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
- border-radius: 10px;
+ border-radius: 10px;
- background-color: rgba(17, 16, 16, 1);
+ background-color: rgba(17, 16, 16, 1);
 }
+
 /*定义滑块内阴影+圆角*/
 ::-webkit-scrollbar-thumb {
- border-radius: 10px;
+ border-radius: 10px;
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
- background-color: #42EBFF;
+ background-color: #42EBFF;
 }
 </style>

src/store/index.js

@@ -8,7 +8,7 @@ const useStore = defineStore("store",{
  },
  //触发动作
  actions:{
- setuser(username){
+ setUser(username){
  this.username = username
  }
  },

src/view/Login.vue

@@ -28,8 +28,6 @@
  </a-form-item>
  </a-form>
  </div>
-
-
  </div>
 </template>
 
@@ -74,7 +72,7 @@ export default {
  };
  const store = useStore()
  const Check = (username) => {
- store.setuser(username)
+ store.setUser(username)
  }
 
 
@@ -138,7 +136,8 @@ export default {
  padding: 0 20px;
  box-sizing: border-box;
 }
-.text{
+
+.text {
  display: flex;
  margin-top: 25px;
  height: 20px;

src/view/Monit.vue

@@ -1,21 +1,22 @@
 <template>
-<div class="charts" style="background: #fff; padding: 15px">
+ <div class="charts" style="background: #fff; padding: 15px">
-<a-card title="cpu使用率" :bordered="false" style="width: 350px;height:350px" >
+ <a-card title="cpu使用率" :bordered="false" style="width: 350px;height:350px">
- <echarts class="chart" :option="option" />
+  <echarts class="chart" :option="option"/>
-</a-card>
+ </a-card>
 
-<a-card title="memory使用率" :bordered="false" style="width: 350px;height:350px" >
+ <a-card title="memory使用率" :bordered="false" style="width: 350px;height:350px">
- <echarts class="chart" :option="memory" />
+  <echarts class="chart" :option="memory"/>
-</a-card>
+ </a-card>
 
 
-</div>
+ </div>
 
 </template>
 
 <script setup>
 import {ref} from "vue";
-const option = ref( {
+
+const option = ref({
  tooltip: {
  formatter: '{a} <br/>{b} : {c}%'
  },
@@ -36,7 +37,7 @@ const option = ref( {
  ]
 })
 
-const memory = ref( {
+const memory = ref({
  tooltip: {
  formatter: '{a} <br/>{b} : {c}%'
  },
@@ -64,12 +65,13 @@ const memory = ref( {
 
 
 <style scoped>
-.chart{
+.chart {
 
  height: 300px;
  width: 300px;
 }
-.charts{
+
+.charts {
  display: flex;
  justify-content: flex-start;
 }