提交

src/components/Main.vue

@@ -46,11 +46,12 @@
           <el-sub-menu index="6">
             <template #title>
               <font-awesome-icon class="ico" :icon="['fas', 'screwdriver-wrench']"/>
-              <span style="margin-right: 10px">软件设置</span>
+              <span style="margin-right: 10px">软件管理</span>
             </template>
-            <el-menu-item index="6-1">nps设置</el-menu-item>
-            <el-menu-item index="6-2">nginx设置</el-menu-item>
-            <el-menu-item index="6-3">mysql设置</el-menu-item>
+            <el-menu-item index="6-1">NPS管理</el-menu-item>
+            <el-menu-item index="6-2">Nginx管理</el-menu-item>
+            <el-menu-item index="6-3">MySql管理</el-menu-item>
+            <el-menu-item index="6-4">Docker管理</el-menu-item>
           </el-sub-menu>
           <el-menu-item index="7">
             <font-awesome-icon class="ico" :icon="['fas', 'sliders']"/>
@@ -114,4 +115,4 @@ const change = () => {
   isCollapse.value = !isCollapse.value;
 }
 
-</script>
+</script>

src/components/State.vue

@@ -1,5 +1,78 @@
 <script setup>
 import {onMounted, ref} from "vue";
+import * as echarts from 'echarts'
+
+onMounted(() => {
+  let chartDom;
+  chartDom = document.getElementById('net');
+  let myChart = null;
+  myChart = echarts.init(chartDom);
+  let option;
+  option = {
+    title: {
+      text: 'Stacked Line'
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        name: 'Email',
+        type: 'line',
+        stack: 'Total',
+        data: [120, 132, 101, 134, 90, 230, 210]
+      },
+      {
+        name: 'Union Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [220, 182, 191, 234, 290, 330, 310]
+      },
+      {
+        name: 'Video Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [150, 232, 201, 154, 190, 330, 410]
+      },
+      {
+        name: 'Direct',
+        type: 'line',
+        stack: 'Total',
+        data: [320, 332, 301, 334, 390, 330, 320]
+      },
+      {
+        name: 'Search Engine',
+        type: 'line',
+        stack: 'Total',
+        data: [820, 932, 901, 934, 1290, 1330, 1320]
+      }
+    ]
+  };
+  option && myChart.setOption(option);
+})
+
 
 const windowHeight = ref("height:" + (window.innerHeight - 131) + "px")
 
@@ -7,27 +80,32 @@ const softWare = [
   {
     ico: '/nginx.svg',
     name: 'NGINX',
-    notes: '一款开源的http反向代理软件，具有较高的性能，可代理tcp和udp。'
+    notes: '一款开源的http反向代理软件，具有较高的性能，可代理tcp和udp。',
+    url: 'https://nginx.org'
   },
   {
     ico: '/mysql.svg',
     name: 'MYSQL',
-    notes: 'MySQL是一款流行的开源关系型数据库管理系统，用于存储和管理数据。'
+    notes: 'MySQL是一款流行的开源关系型数据库管理系统，用于存储和管理数据。',
+    url: ''
   },
   {
     ico: '/nps.svg',
     name: 'NPS',
-    notes: 'nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。'
+    notes: 'nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。',
+    url: ''
   },
   {
     ico: '/java.svg',
     name: 'JAVA',
-    notes: 'Java是一种面向对象的编程语言，广泛应用于软件开发和企业级应用程序的构建。'
+    notes: 'Java是一种面向对象的编程语言，广泛应用于软件开发和企业级应用程序的构建。',
+    url: ''
   },
   {
     ico: '/docker.svg',
     name: 'DOCKER',
-    notes: 'Docker是一种开源的容器化平台，用于快速构建、部署和运行应用程序。'
+    notes: 'Docker是一种开源的容器化平台，用于快速构建、部署和运行应用程序。',
+    url: ''
   }
 ]
 
@@ -35,6 +113,10 @@ window.addEventListener('resize', function () {
   windowHeight.value = "height:" + (window.innerHeight - 131) + "px";
   console.log('窗口高度变化为: ' + windowHeight.value);
 });
+
+const href = (url) => {
+  window.open(url, '_blank')
+}
 </script>
 
 <template>
@@ -122,9 +204,10 @@ window.addEventListener('resize', function () {
             <template #header>
               <span style="font-size: 16px">服务器监控</span>
             </template>
+            <div id="net"></div>
           </el-card>
         </el-col>
-        <el-col :span="8" style="margin-bottom: 20px">
+        <el-col :span="8">
           <el-card
               style="margin-bottom: 20px"
               shadow="hover"
@@ -157,7 +240,6 @@ window.addEventListener('resize', function () {
             </div>
           </el-card>
           <el-card
-              style="margin-bottom: 20px"
               shadow="hover"
               :body-style="{display: 'flex', padding: '20px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
             <template #header>
@@ -168,10 +250,9 @@ window.addEventListener('resize', function () {
                   style="box-shadow: #ececec 0 0 6px 1px;width: 60px;height:60px;border-radius: 8px;display: flex;align-items: center;justify-content: center">
                 <el-image style="width: 80%;height: 80%" :src="item.ico"/>
               </div>
-              <div style="width: 60%;height: 60px; padding: 0 20px">
+              <div style="width: 60%;height: 60px; padding: 0 20px" @click="href(item.url)">
                 <span style="display: block;">{{ item.name }}</span>
-                <span
-                    style="display: block;font-size: 14px;color: gray">{{ item.notes }}</span>
+                <span style="display: block;font-size: 14px;color: gray">{{ item.notes }}</span>
               </div>
               <el-button>安装</el-button>
             </div>