浏览代码

云平台帮助文档

Rgx 1 年之前
父节点
当前提交
52fd2e77e0
共有 4 个文件被更改,包括 23 次插入452 次删除
  1. 20 449
      src/views/common/home.vue
  2. 2 2
      src/views/common/login.vue
  3. 1 1
      src/views/main-navbar.vue
  4. 二进制
      static/pdf/cloudhelpword.pdf

+ 20 - 449
src/views/common/home.vue

@@ -1,479 +1,50 @@
 <template>
-  <div class="mod-home">
-    <el-row>
-      <el-col :span="22">
-        <h3>集群资源使用状况</h3>
-      </el-col>
-      <el-col :span="2"> </el-col>
-    </el-row>
-
-    <el-row type="flex">
-      <el-col :span="8">
-        <el-card shadow="hover" body-style="padding:5px">
-          <columnCharts
-            :charData="radarDataList"
-            :id="'Radarcontainer'"
-          ></columnCharts>
-        </el-card>
-      </el-col>
-      <el-col :span="8">
-        <el-card shadow="hover">
-          <el-row :gutter="20">
-            <el-col :span="8">
-              <pieChart
-                :charData="cpuPieData"
-                :id="'CPUcontainer'"
-                :content="'CPU'"
-              ></pieChart>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong
-                >{{
-                  formatNumber(metrics.cluster_cpu_utilisation * 100)
-                }}%</strong
-              >
-              <br />
-              <br />
-              <div>CPU</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong>{{ this.metrics.cluster_cpu_usage }}core</strong>
-              <br />
-              <br />
-              <div>已使用</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong>{{ this.metrics.cluster_cpu_total }}core</strong>
-              <br />
-              <br />
-              <div>总计</div>
-            </el-col>
-          </el-row>
-        </el-card>
-        <el-card shadow="hover">
-          <el-row :gutter="20">
-            <el-col :span="8">
-              <pieChart
-                :charData="memoryPieData"
-                :id="'Memorycontainer'"
-                :content="'内存'"
-              ></pieChart>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong
-                >{{
-                  formatNumber(metrics.cluster_memory_utilisation * 100)
-                }}%</strong
-              >
-              <br />
-              <br />
-              <div>内存</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong
-                >{{
-                  formatNumber(
-                    this.metrics.cluster_memory_usage_wo_cache /
-                      (1024 * 1024 * 1024)
-                  )
-                }}Gi</strong
-              >
-              <br />
-              <br />
-              <div>已使用</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong
-                >{{
-                  formatNumber(
-                    this.metrics.cluster_memory_total / (1024 * 1024 * 1024)
-                  )
-                }}Gi</strong
-              >
-              <br />
-              <br />
-              <div>总计</div>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-      <el-col :span="8">
-        <el-card shadow="hover">
-          <el-row :gutter="20">
-            <el-col :span="8">
-              <pieChart
-                :charData="localDiskSizePieData"
-                :id="'Localdiskchart'"
-                :content="'存储'"
-              ></pieChart>
-              <!-- <div :id="'container3'"></div> -->
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong
-                >{{
-                  formatNumber(
-                    this.metrics.cluster_disk_size_utilisation * 100
-                  )
-                }}%</strong
-              >
-              <br />
-              <br />
-              <div>存储</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong
-                >{{
-                  formatNumber(
-                    this.metrics.cluster_disk_size_usage / (1024 * 1024 * 1024)
-                  )
-                }}GB</strong
-              >
-              <br />
-              <br />
-              <div>已使用</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong
-                >{{
-                  formatNumber(
-                    metrics.cluster_disk_size_capacity / (1024 * 1024 * 1024)
-                  )
-                }}GB</strong
-              >
-              <br />
-              <br />
-              <div>总计</div>
-            </el-col>
-          </el-row>
-        </el-card>
-        <el-card shadow="hover">
-          <el-row :gutter="20">
-            <el-col :span="8">
-              <!-- <g2-pie
-                style="height: 125px; width: 125px"
-                :type="'ring'"
-                :axis-name="{ name: '容器组', value: ' ' }"
-                :data="containerGroupPieData"
-                :guide="{ name: '容器组' }"
-              >
-              </g2-pie> -->
-
-              <pieChart
-                :charData="containerGroupPieData"
-                :id="'Containerscontainer'"
-                :content="'容器组'"
-              ></pieChart>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong
-                >{{
-                  formatNumber(metrics.cluster_pod_utilisation * 100)
-                }}%</strong
-              >
-              <br />
-              <br />
-              <div>容器组</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong>{{ metrics.cluster_pod_running_count }}</strong>
-              <br />
-              <br />
-              <div>已使用</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong>{{ metrics.cluster_pod_quota }}</strong>
-              <br />
-              <br />
-              <div>总计</div>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <el-row>
-      <el-col :span="8">
-        <el-card shadow="hover">
-          <h3>集群组件状态</h3>
-          <el-row :gutter="8">
-            <el-col :span="8">
-              <br />
-              <strong
-                >{{
-                  formatNumber(this.apiServer.apiserver_request_rate)
-                }}times/s</strong
-              >
-              <br />
-              <br />
-              <div>API 每秒请求数</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong
-                >{{
-                  formatNumber(
-                    this.apiServer.apiserver_request_latencies * 1000
-                  )
-                }}ms</strong
-              >
-              <br />
-              <br />
-              <div>API 请求延迟</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong>{{ this.scheduler.scheduler_schedule_attempts }}</strong>
-              <br />
-              <br />
-              <div>调度器调度次数</div>
-            </el-col>
-            <el-col :span="4">
-              <br />
-              <strong>-</strong>
-              <br />
-              <br />
-              <div>调度失败的容器组</div>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card>
-          <el-row>
-            <h3>节点用量</h3>
-          </el-row>
-          <el-row>
-            <el-col>
-              <el-table
-                stripe
-                style="width: 100%"
-                :data="nodesList"
-                height="250"
-              >
-                <el-table-column prop="host" label="host"></el-table-column>
-                <el-table-column prop="role" label="role"></el-table-column>
-                <el-table-column prop="node" label="node"></el-table-column>
-                <el-table-column
-                  prop="node_cpu_utilisation"
-                  label="CPU%"
-                ></el-table-column>
-                <el-table-column
-                  prop="node_disk_inode_utilisation"
-                  label="inode 使用率"
-                ></el-table-column>
-                <el-table-column
-                  prop="node_pod_utilisation"
-                  label="容器组"
-                ></el-table-column>
-                <el-table-column
-                  prop="node_memory_utilisation"
-                  label="内存%"
-                ></el-table-column>
-                <el-table-column
-                  prop="node_disk_size_utilisation"
-                  label="存储%"
-                ></el-table-column>
-              </el-table>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="8"> </el-col>
-    </el-row>
-
-    <el-col> </el-col>
+  <div class="iframediv">
+    <iframe class="mod-home" frameborder="0" src="../../../static/pdf/cloudhelpword.pdf"></iframe>
   </div>
+
 </template>
 
 <script>
-import pieChart from "../modules/monitor/charts/pieChart.vue";
-import columnCharts from "../modules/monitor/charts/cloumnCharts.vue";
-import {
-  getMetrics,
-  getApiServer,
-  getScheduler,
-  getNodes,
-  getPhysicalMonitor,
-} from "@/utils/token";
+
 export default {
   components: {
-    pieChart,
-    columnCharts,
   },
   data() {
     return {};
   },
   computed: {
-    //节点列表
-    nodesList() {
-      const nodes = this.$store.state.monitor.nodesList;
-      var nodesList = [];
-      for (var i = 0; i < nodes.length; i++) {
-        const host = nodes[i].host;
-        const node = nodes[i].node;
-        const role = nodes[i].role;
-        const node_cpu_utilisation = this.formatNumber(
-          nodes[i].node_cpu_utilisation * 100
-        );
-        const node_disk_inode_utilisation = this.formatNumber(
-          nodes[i].node_disk_inode_utilisation * 100
-        );
-        const node_pod_utilisation = this.formatNumber(
-          nodes[i].node_pod_utilisation * 100
-        );
-        const node_memory_utilisation = this.formatNumber(
-          nodes[i].node_memory_utilisation * 100
-        );
-        const node_disk_size_utilisation = this.formatNumber(
-          nodes[i].node_disk_size_utilisation * 100
-        );
-        nodesList.push({
-          host: host,
-          node: node,
-          role: role,
-          node_cpu_utilisation: node_cpu_utilisation,
-          node_disk_inode_utilisation: node_disk_inode_utilisation,
-          node_cpu_utilisation: node_pod_utilisation,
-          node_memory_utilisation: node_memory_utilisation,
-          node_disk_size_utilisation: node_disk_size_utilisation,
-        });
-      }
-
-      console.log("nodelist", nodesList);
-      return nodesList;
-    },
-
-    //完整的cluster_metrics
-    metrics() {
-      var metrics = this.$store.state.monitor.metrics;
-
-      return metrics;
-    },
-
-    //集群资源使用比例
-    radarDataList() {
-      var radarDataList = [];
-      var cpu_utilisation = this.metrics.cluster_cpu_utilisation * 100;
-      var memory_utilisation = this.metrics.cluster_memory_utilisation * 100;
-      var disk_size_utilisation =
-        this.metrics.cluster_disk_size_utilisation * 100;
-      var pod_utilisation = this.metrics.cluster_pod_utilisation * 100;
-
-      var cpu=this.formatNumber(cpu_utilisation);
-      var disk=this.formatNumber(disk_size_utilisation);
-      var pod=this.formatNumber(pod_utilisation);
-      var memory=this.formatNumber(memory_utilisation);
 
-      radarDataList.push({ name: "CPU", value: cpu });
-      radarDataList.push({ name: "本地存储", value: disk });
-      radarDataList.push({ name: "容器组", value: pod });
-      radarDataList.push({ name: "内存", value: memory });
-
-      return radarDataList;
-    },
-
-    //CPU 饼图
-    cpuPieData() {
-      var cpuPieData = [];
-      var cpu_usage = this.metrics.cluster_cpu_usage * 1;
-      var cpu_rest =
-        (this.metrics.cluster_cpu_total - this.metrics.cluster_cpu_usage) * 1;
-      cpuPieData.push({ name: "已使用", value: cpu_usage });
-      cpuPieData.push({ name: "未使用", value: cpu_rest });
-      return cpuPieData;
-    },
-
-    //内存饼图
-    memoryPieData() {
-      var memoryPieData = [];
-      var memory_rest =
-        this.metrics.cluster_memory_total *
-        (1 - this.metrics.cluster_memory_utilisation) *
-        1;
-      var memory_usage =
-        (this.metrics.cluster_memory_total -
-          this.metrics.cluster_memory_available) *
-        1;
-
-      memoryPieData.push({ name: "已使用", value: memory_usage });
-      memoryPieData.push({ name: "未使用", value: memory_rest });
-      return memoryPieData;
-    },
-
-    //存储饼图
-    localDiskSizePieData() {
-      var localDiskSizePieData = [];
-
-      var disk_size_rest = this.metrics.cluster_disk_size_capacity * 1;
-      var disk_size_usage = this.metrics.cluster_disk_size_usage * 1;
-
-      localDiskSizePieData.push({ name: "已使用", value: disk_size_usage });
-      localDiskSizePieData.push({ name: "未使用", value: disk_size_rest });
-
-      return localDiskSizePieData;
-    },
-    apiServer() {
-      var apiServer = this.$store.state.monitor.apiServer;
-      return apiServer;
-    },
-    scheduler() {
-      var scheduler = this.$store.state.monitor.scheduler;
-      return scheduler;
-    },
-
-    //容器组饼图
-    containerGroupPieData() {
-      var containerGroupPieData = [];
-      var pod_rest =
-        (this.metrics.cluster_pod_quota -
-          this.metrics.cluster_pod_running_count) *
-        1;
-      var pod_usage = this.metrics.cluster_pod_running_count * 1;
-      containerGroupPieData.push({ name: "已使用", value: pod_usage });
-      containerGroupPieData.push({ name: "未使用", value: pod_rest });
-      return containerGroupPieData;
-    },
   },
 
   created() {
-    getNodes();
-    getMetrics();
-    getApiServer();
-    getScheduler();
-    getPhysicalMonitor();
   },
 
   activated() {},
   mounted() {},
 
   methods: {
-    //数字处理
-    formatNumber(num) {
-      return Math.round(num * 100) / 100;
-    },
-    reset() {},
+
   },
   updated() {},
 };
 </script>
 
 <style>
-.mod-home {
-  line-height: 1.5;
-}
+  .iframediv {
+    width: 100%;
+    height: 100%;
+    margin: auto auto;
+    overflow: hidden;
+  }
+  .iframediv iframe {
+    width: 1920px;
+    height: 2000px;
+    top: 0;
+    left: 0;
+    transform-origin: top left;
+    transform: scale(1)
+  }
+
 </style>
 

+ 2 - 2
src/views/common/login.vue

@@ -101,7 +101,7 @@ export default {
               console.log("data.token", data);
               this.$cookie.set("cloudToken", data.token);
               // console.log("cookie.token", this.$cookie.get("cloudToken"));
-              this.$router.replace({ name: "home" });
+              this.$router.replace({ name: "generator-algorithm" });
               this.$cookie.set("Authorization", 'Bearer '+ data.kubeSphereToken);
               // this.getToken();
             } else {
@@ -140,7 +140,7 @@ export default {
     //     this.$cookie.set("Authorization", 'Bearer '+ data.access_token);
     //     this.$cookie.set("refresh_Authorization", 'Bearer '+ data.refresh_token);
     //     this.$cookie.set("KSexpires_in", new Date().getTime() + data.expires_in);
-        
+
 
     //   });
     // },

+ 1 - 1
src/views/main-navbar.vue

@@ -10,7 +10,7 @@
     <div class="site-navbar__body clearfix">
       <el-menu class="site-navbar__menu" mode="horizontal">
         <el-menu-item index="home" @click="$router.push({ name: 'home' })">
-          <span slot="title">主页</span>
+          <span slot="title">帮助文档</span>
         </el-menu-item>
 
         <!-- <el-submenu index="demo">

二进制
static/pdf/cloudhelpword.pdf