优化布局

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>
@@ -83,7 +83,7 @@ export default defineComponent({
  }
  const router = useRouter()
  const route = useRoute()
- const goTopage = (item) => {
+ const goPage = (item) => {
  router.push('/' + item.key).catch((err) => err)
  }
  const logout = () => {
@@ -95,7 +95,7 @@ export default defineComponent({
  collapsed,
  selectedKeys,
  container,
- goTopage,
+ goPage,
  route,
  logout,
  username,
@@ -148,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/view/Monit.vue

@@ -1,22 +1,30 @@
 <template>
- <div class="charts" style="background: #fff; padding: 15px">
+ <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-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="系统信息" :bordered="false">
+ </a-row>
- <p>在线用户：{{sysparams.name}}</p>
- <p>用户数量：{{sysparams.count}}</p>
- <p>系统当前时间：{{sysparams.current_time}}</p>
- <p>系统开机时间：{{sysparams.start_time}}</p>
- </a-card>
- <a-card title="cpu使用率" :bordered="false">
- <echarts class="chart" :option="option"/>
- </a-card>
-
- <a-card title="memory使用率" :bordered="false">
- <echarts class="chart" :option="memory"/>
- </a-card>
-
-
- </div>
 
 </template>
 
@@ -76,6 +84,37 @@ const memory = ref({
  ]
 })
 
+
+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()
@@ -118,15 +157,18 @@ const QueryCpu =()=>{
  height: 300px;
  width: 300px;
 }
-.a-card{
+.echarts{
- width: 300px;
+ width: 270px;
- height: 300px;
 }
 
 .charts {
  display: flex;
- justify-content: space-between;
+ justify-content: space-around;
- flex-wrap: wrap
+ justify-items: center;
+ height: 85%;
+ width: 100%;
+ background-color: #42EBFF;
+ overflow-x:scroll;
 }
 p{
  display: flex;
@@ -134,4 +176,29 @@ p{
  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>