优化布局

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)=>{
+export let Login = (json)=>{return post("/login",json)}
- return post("/login",json)
-}
-
-export {
- Login
-}

src/assets/css/style.css

@@ -11,4 +11,5 @@ html,body,#app {
 .ant-table{
  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;
+ width: 0px;
- height: 16px;
+ height: 0px;
- 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);
- border-radius: 10px;
+ border-radius: 5px;
  background-color: rgba(17, 16, 16, 1);
 }
 
 /*定义滑块内阴影+圆角*/
-::-webkit-scrollbar-thumb {
+/*::-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;
+/*}*/
-}
 </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,82 +1,204 @@
 <template>
- <div class="charts" style="background: #fff; padding: 15px">
+ <a-row justify="space-between" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
- <a-card title="cpu使用率" :bordered="false">
+ <a-col :span="6">
- <echarts class="chart" :option="option"/>
+ <a-card title="系统信息" :bordered="false" class="sys">
- </a-card>
+ <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-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>
 
- <a-card title="memory使用率" :bordered="false">
+ </a-row>
- <echarts class="chart" :option="memory"/>
- </a-card>
-
-
- </div>
 
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {onMounted, reactive, ref} from "vue";
-
+import {Cpu, SysInfo} from "@/api/monitor"
-const option = ref({
+let sysparams = reactive({
- tooltip: {
+ count: 0,
- formatter: '{a} <br/>{b} : {c}%'
+ name: "",
- },
+ current_time: "",
- series: [
+ start_time: "",
- {
+ cpu_percent: 0,
- name: 'cpu',
+})
- type: 'gauge',
+const option = reactive({
- detail: {
+ tooltip: {
- formatter: '{value}'
+ formatter: '{a} <br/>{b} : {c}%'
- },
+ },
- data: [
+ series: [
- {
+ {
- value: 60,
+ name: 'cpu',
- name: 'cpu'
+ type: 'gauge',
- }
+ detail: {
- ]
+ formatter: '{value}'
- }
+ },
- ]
+ data: [
+ {
+ value: 60,
+ name: 'cpu'
+ }
+ ]
+ }
+ ]
 })
 
 const memory = ref({
- tooltip: {
+ tooltip: {
- formatter: '{a} <br/>{b} : {c}%'
+ formatter: '{a} <br/>{b} : {c}%'
- },
+ },
- series: [
+ series: [
-  {
+ {
-  name: 'memory',
+ name: 'memory',
-  type: 'gauge',
+ type: 'gauge',
-  progress: {
+ progress: {
-  show: true
+ show: true
-  },
+ },
-  detail: {
+ detail: {
-  valueAnimation: true,
+ valueAnimation: true,
-  formatter: '{value}'
+ formatter: '{value}'
-  },
+ },
-  data: [
+ data: [
-  {
+ {
-  value: 71.5,
+ value: 60,
-  name: 'memory'
+ 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>
 
 
 <style scoped>
 .chart {
 
- height: 300px;
+ height: 300px;
- width: 300px;
+ width: 300px;
 }
-.a-card{
+.echarts{
- width: 350px;
+ width: 270px;
- height: 350px;
 }
 
 .charts {
+ display: flex;
+ 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>