优化布局

src/api/monitor.js

@@ -0,0 +1,9 @@
+import {get} from "@/utils/request";
+// 获取磁盘信息
+export let disk =()=>{return get("/sys/disk")}
+//获取系统信息
+export let SysInfo =()=>{return get("sys/info")}
+//获取cpu信息
+export let Cpu = ()=>{return get("sys/cpu")}
+//获取内存信息
+export let get_memory =()=>{return get("sys/memory")}

src/api/user.js

@@ -1,9 +1,3 @@
-import {get,post} from "@/utils/request";
+import {post} from "@/utils/request";
 
-let Login = (json)=>{
- return post("/login",json)
-}
-
-export {
- Login
-}
+export let Login = (json)=>{return post("/login",json)}

src/assets/css/style.css

@@ -12,3 +12,4 @@ html,body,#app {
  margin-top: 15px;
 
 }
+

src/components/Layout.vue

@@ -2,7 +2,7 @@
  <a-layout class="layout">
  <a-layout-sider v-model:collapsed="collapsed" collapsible class="left-menu">
  <div class="logo">{{ collapsed ? "系统" : "自动化系统监控" }}</div>
- <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline" @click="goTopage">
+ <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline" @click="goPage">
  <a-menu-item key="monit">
  <pie-chart-outlined/>
  <span>{{ collapsed ? "监控" : "系统监控" }}</span>
@@ -40,7 +40,6 @@
  <a-breadcrumb-item>{{ route.meta.title }}</a-breadcrumb-item>
  </a-breadcrumb>
  <div :style="container">
-
  <router-view></router-view>
  </div>
  </a-layout-content>
@@ -80,11 +79,11 @@ export default defineComponent({
  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 goPage = (item) => {
  router.push('/' + item.key).catch((err) => err)
  }
  const logout = () => {
@@ -96,7 +95,7 @@ export default defineComponent({
  collapsed,
  selectedKeys,
  container,
- goTopage,
+ goPage,
  route,
  logout,
  username,
@@ -149,22 +148,21 @@ export default defineComponent({
 
 /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar {
- width: 8px;
- height: 16px;
- background-color: rgba(0, 9, 38, 0.69);
+ width: 0px;
+ height: 0px;
+ /*background-color: rgba(0, 9, 38, 0.69);*/
 }
 
 /*定义滚动条轨道内阴影+圆角*/
 ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
- border-radius: 10px;
+ border-radius: 5px;
  background-color: rgba(17, 16, 16, 1);
 }
 
 /*定义滑块内阴影+圆角*/
-::-webkit-scrollbar-thumb {
- border-radius: 10px;
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
- background-color: #42EBFF;
-}
+/*::-webkit-scrollbar-thumb {*/
+/* border-radius: 10px;*/
+/* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/
+/*}*/
 </style>

src/utils/request.js

@@ -4,7 +4,7 @@ import {useRouter} from "vue-router";
 import NProgress from "nprogress"
 
 const service = axios.create({
- baseURL: 'http://192.168.10.80:8000/api',
+ baseURL: 'http://192.168.0.107:8000/api',
  timeout: 5000
 });
 const router = useRouter()

src/view/Monit.vue

@@ -1,22 +1,44 @@
 <template>
- <div class="charts" style="background: #fff; padding: 15px">
- <a-card title="cpu使用率" :bordered="false">
+ <a-row justify="space-between" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
+ <a-col :span="6">
+ <a-card title="系统信息" :bordered="false" class="sys">
+ <p>在线用户：{{ sysparams.name }}</p>
+ <p>用户数量：{{ sysparams.count }}</p>
+ <p>系统当前时间：{{ sysparams.current_time }}</p>
+ <p>系统开机时间：{{ sysparams.start_time }}</p>
+ </a-card>
+ </a-col>
+ <a-col :span="6">
+ <a-card title="cpu使用率" :bordered="false" class="cpu">
  <echarts class="chart" :option="option"/>
  </a-card>
-
- <a-card title="memory使用率" :bordered="false">
+ </a-col>
+ <a-col :span="6">
+ <a-card title="内存使用率" :bordered="false" class="memory">
  <echarts class="chart" :option="memory"/>
  </a-card>
+ </a-col>
+ <a-col :span="6">
+ <a-card title="磁盘分区" :bordered="false" class="disk">
+ <a-table :columns="columns" :data-source="data" size="middle" :pagination="false"/>
+ </a-card>
+ </a-col>
 
-
- </div>
+ </a-row>
 
 </template>
 
 <script setup>
-import {ref} from "vue";
-
-const option = ref({
+import {onMounted, reactive, ref} from "vue";
+import {Cpu, SysInfo} from "@/api/monitor"
+let sysparams = reactive({
+ count: 0,
+ name: "",
+ current_time: "",
+ start_time: "",
+ cpu_percent: 0,
+})
+const option = reactive({
  tooltip: {
  formatter: '{a} <br/>{b} : {c}%'
  },
@@ -54,13 +76,78 @@ const memory = ref({
  },
  data: [
  {
-  value: 71.5,
+ value: 60,
  name: 'memory'
  }
  ]
  }
  ]
 })
+
+
+const columns = [{
+ title: 'Name',
+ dataIndex: 'name',
+}, {
+ title: 'Age',
+ dataIndex: 'age',
+}, {
+ title: 'Address',
+ dataIndex: 'address',
+},{
+
+}
+];
+const data = [{
+ key: '1',
+ name: 'John Brown',
+ age: 32,
+ address: 'New York No. 1 Lake Park',
+}, {
+ key: '2',
+ name: 'Jim Green',
+ age: 42,
+ address: 'London No. 1 Lake Park',
+}, {
+ key: '3',
+ name: 'Joe Black',
+ age: 32,
+ address: 'Sidney No. 1 Lake Park',
+}];
+
+onMounted(()=>{
+ QuerySys()
+ QueryCpu()
+ setInterval(()=>{
+ QuerySys();
+ QueryCpu();
+
+ },5000)
+})
+function QuerySys() {
+ SysInfo().then((response)=>{
+ if (response.code===200){
+ let {count,name,current_time,start_time} = response.data
+ sysparams.count = count
+ sysparams.name = name
+ sysparams.current_time = current_time
+ sysparams.start_time = start_time
+
+ }
+ })
+}
+const QueryCpu =()=>{
+ Cpu().then((rep)=>{
+ let {cpu_percent} =rep.data
+ option.series.forEach((data)=>{
+ data.data.forEach((key)=>{
+ key.value = cpu_percent
+ })
+ })
+ console.log(rep.data)
+
+ })
+}
 </script>
 
 
@@ -70,13 +157,48 @@ const memory = ref({
  height: 300px;
  width: 300px;
 }
-.a-card{
- width: 350px;
- height: 350px;
+.echarts{
+ width: 270px;
 }
 
 .charts {
  display: flex;
- justify-content: flex-start;
+ justify-content: space-around;
+ justify-items: center;
+ height: 85%;
+ width: 100%;
+ background-color: #42EBFF;
+ overflow-x:scroll;
 }
+p{
+ display: flex;
+ justify-content: flex-start;
+ font-size: 16px;
+ font-weight: bold;
+}
+#components-table-demo-size h4 {
+ margin-bottom: 16px;
+}
+.disk{
+ background-color: lightblue;
+ border: 1px;
+ height:100%
+}
+.memory{
+ background-color: aliceblue;
+ border: 1px;
+ height:100%;
+}
+.sys{
+ background-color: mintcream;
+ border: 1px solid #f5f5f5;
+ height:100%
+
+}
+.cpu{
+ background-color: honeydew;
+ height:100%;
+}
+
+
 </style>