src/api/monitor.js

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

src/assets/css/style.css

@@ -11,5 +11,4 @@ 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="goPage">
+ <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline" @click="goTopage">
  <a-menu-item key="monit">
  <pie-chart-outlined/>
  <span>{{ collapsed ? "监控" : "系统监控" }}</span>
@@ -40,6 +40,7 @@
  <a-breadcrumb-item>{{ route.meta.title }}</a-breadcrumb-item>
  </a-breadcrumb>
  <div :style="container">
+
  <router-view></router-view>
  </div>
  </a-layout-content>
@@ -79,11 +80,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 goPage = (item) => {
+ const goTopage = (item) => {
  router.push('/' + item.key).catch((err) => err)
  }
  const logout = () => {
@@ -95,7 +96,7 @@ export default defineComponent({
  collapsed,
  selectedKeys,
  container,
- goPage,
+ goTopage,
  route,
  logout,
  username,
@@ -148,21 +149,22 @@ export default defineComponent({
 
 /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar {
- width: 0px;
+ width: 8px;
- height: 0px;
+ 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);
- border-radius: 5px;
+ border-radius: 10px;
  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.0.107:8000/api',
+ baseURL: 'http://192.168.10.80:8000/api',
  timeout: 5000
 });
 const router = useRouter()

src/view/Monit.vue

@@ -1,204 +1,82 @@
 <template>
- <a-row justify="space-between" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
+ <div class="charts" style="background: #fff; padding: 15px">
- <a-col :span="6">
+ <a-card title="cpu使用率" :bordered="false">
- <a-card title="系统信息" :bordered="false" class="sys">
+ <echarts class="chart" :option="option"/>
- <p>在线用户：{{ sysparams.name }}</p>
+ </a-card>
- <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-row>
+ <a-card title="memory使用率" :bordered="false">
+ <echarts class="chart" :option="memory"/>
+ </a-card>
+
+
+ </div>
 
 </template>
 
 <script setup>
-import {onMounted, reactive, ref} from "vue";
+import {ref} from "vue";
-import {Cpu, SysInfo} from "@/api/monitor"
+
-let sysparams = reactive({
+const option = ref({
- count: 0,
+ tooltip: {
- name: "",
+ formatter: '{a} <br/>{b} : {c}%'
- current_time: "",
+ },
- start_time: "",
+ series: [
- cpu_percent: 0,
+ {
-})
+ name: 'cpu',
-const option = reactive({
+ type: 'gauge',
- tooltip: {
+ detail: {
- formatter: '{a} <br/>{b} : {c}%'
+ formatter: '{value}'
- },
+ },
- series: [
+ data: [
- {
+ {
- name: 'cpu',
+ value: 60,
- type: 'gauge',
+ name: 'cpu'
- 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: 60,
+ value: 71.5,
- 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;
 }
-.echarts{
+.a-card{
- width: 270px;
+ width: 350px;
+ 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>