fix

README.md

@@ -1,5 +1,5 @@
 # JCCE
-
+Thanks to KubeSphere and Harvester for providing back-end support for this system.
 ## 电脑需要安装 node 环境
 
 ## 安装依赖命令

src/components/ClusterManagement/clusterMessage.vue

@@ -1,5 +1,5 @@
 <template>
-  <table border="0">
+  <table class="table" border="0">
     <tr>
       <th>服务商</th>
       <th>JCCE版本</th>

src/components/ClusterManagement/componentStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <table border="0">
+  <table class="table" border="0">
     <tr>
       <th>API每秒请求数</th>
       <th>API请求延迟</th>

src/components/ClusterManagement/resourceUsage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <table class="noborder">
+    <table class="table noborder">
       <tr>
         <td style="width:400px">
           <div id="radarChart" />

src/components/FormData/index.js

@@ -29,7 +29,7 @@ export const FormData = {
     }
 
     return (
-      <table class='formData'>
+      <table class='table formData'>
         {list()}
       </table>
     )

src/layout/components/Sidebar/Logo.vue

@@ -3,12 +3,11 @@
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <!-- <img src="@/assets/JCCE-logo.png" class="sidebar-logo"> -->
-        <p>{{ new Date() }}</p>
         <!-- <h1 v-else class="sidebar-title">{{ title }} </h1> -->
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <!-- <img src="@/assets/JCCE-logo.png" class="sidebar-logo"> -->
+        <img src="@/assets/JCCE-logo.png" class="sidebar-logo">
-        <p class="sidebar-title">{{ new Date().toLocaleString() }}</p>
+        <!-- <p class="sidebar-title">{{ new Date().toLocaleString() }}</p> -->
         <!-- <h1 class="sidebar-title">{{ title }} </h1> -->
       </router-link>
     </transition>
@@ -63,7 +62,7 @@ export default {
       // height: 100%;
       // padding: 5px 0;
       height: 60px;
-      margin-top: 10px;
+      // margin-top: 10px;
       vertical-align: middle;
       // margin-right: 12px;
     }

src/main.js

@@ -14,7 +14,7 @@ import App from './App'
 import store from './store'
 import router from './router'
 
-// import echarts from 'echarts'
+import echarts from 'echarts'
 import axios from 'axios'
 
 import './icons' // icon
@@ -36,7 +36,7 @@ import HandleFunc from '@/utils/get-Kube-List' // global filters
 //   const { mockXHR } = require('../mock')
 //   mockXHR()
 // }
-// Vue.prototype.$echarts = echarts
+Vue.prototype.$echarts = echarts
 Vue.prototype.$ajax = axios
 Vue.prototype.$HandleFunc = HandleFunc
 

src/router/index.js

@@ -135,7 +135,7 @@ export const constantRoutes = [
         component: () => import('@/views/projectManagement/index'),
         name: 'ProjectManagement',
         redirect: '/projectManagement/userproject',
-        meta: { title: '项目管理', icon: 'el-icon-s-management', affix: true }
+        meta: { title: '项目管理', icon: 'el-icon-s-order', affix: true }
       },
       {
         path: 'userproject',
@@ -200,7 +200,7 @@ export const constantRoutes = [
         path: '',
         component: () => import('@/views/storageManagement/index'),
         name: 'StorageManagement',
-        meta: { title: '存储管理', icon: 'el-icon-s-management', affix: true }
+        meta: { title: '存储管理', icon: 'el-icon-s-finance', affix: true }
       }
     ]
   },
@@ -214,7 +214,7 @@ export const constantRoutes = [
         component: () => import('@/views/workloadsManagement/index'),
         name: 'workloadsManagement',
         redirect: '/workloadsManagement/deployments',
-        meta: { title: '工作负载', icon: 'el-icon-s-management', affix: true }
+        meta: { title: '工作负载', icon: 'el-icon-s-cooperation', affix: true }
       },
       {
         path: 'deployments',
@@ -320,7 +320,7 @@ export const constantRoutes = [
         path: '',
         component: () => import('@/views/podManagement/index'),
         name: 'PodManagement',
-        meta: { title: '容器组', icon: 'el-icon-s-management', affix: true }
+        meta: { title: '容器组', icon: 'el-icon-s-platform', affix: true }
       },
       {
         path: '/podManagement/:name',
@@ -357,7 +357,7 @@ export const constantRoutes = [
         path: '',
         component: () => import('@/views/serviceManagement/index'),
         name: 'ServiceManagement',
-        meta: { title: '服务', icon: 'el-icon-s-management', affix: true }
+        meta: { title: '服务', icon: 'el-icon-s-help', affix: true }
       }
     ]
   }

src/router/modules/pod.js

@@ -0,0 +1,270 @@
+
+export default [
+  {
+    path: '/nodeManagement',
+    redirect: 'nodeManagement',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/nodeManagement/index'),
+        name: 'NodeManagement',
+        meta: { title: '节点管理', icon: 'el-icon-s-management', affix: true }
+      },
+      {
+        path: '/nodeManagement/:name',
+        component: () => import('@/views/nodeManagement/detail'),
+        name: 'NodeManagementDetail',
+        meta: { activeMenu: '/nodeManagement' },
+        hidden: true,
+        children: [
+          {
+            path: 'status',
+            component: () => import('@/views/nodeManagement/status'),
+            meta: { activeMenu: '/nodeManagement', keepAlive: true }
+          },
+          {
+            path: 'pods',
+            component: () => import('@/views/nodeManagement/pods'),
+            meta: { activeMenu: '/nodeManagement', keepAlive: true }
+          },
+          {
+            path: 'monitors',
+            component: () => import('@/views/nodeManagement/monitors'),
+            meta: { activeMenu: '/nodeManagement', keepAlive: true }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: '/projectManagement',
+    redirect: 'projectManagement',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/projectManagement/index'),
+        name: 'ProjectManagement',
+        redirect: '/projectManagement/userproject',
+        meta: { title: '项目管理', icon: 'el-icon-s-order', affix: true }
+      },
+      {
+        path: 'userproject',
+        component: () => import('@/views/projectManagement/index'),
+        name: 'userproject',
+        meta: { activeMenu: '/projectManagement', keepAlive: true },
+        hidden: true
+      },
+      {
+        path: 'systemproject',
+        component: () => import('@/views/projectManagement/index'),
+        name: 'systemproject',
+        meta: { activeMenu: '/projectManagement', keepAlive: true },
+        hidden: true
+      },
+      {
+        path: 'userproject/:name',
+        component: () => import('@/views/projectManagement/detail'),
+        name: 'UserProjectDetail',
+        meta: { activeMenu: '/projectManagement' },
+        hidden: true,
+        children: [
+          {
+            path: 'overview',
+            component: () => import('@/views/projectManagement/overview'),
+            meta: { activeMenu: '/projectManagement', keepAlive: true }
+          },
+          {
+            path: 'pods',
+            component: () => import('@/views/projectManagement/pods'),
+            meta: { activeMenu: '/projectManagement', keepAlive: true }
+          }
+        ]
+      },
+      {
+        path: 'systemproject/:name',
+        component: () => import('@/views/projectManagement/detail'),
+        name: 'SystemProjectDetail',
+        meta: { activeMenu: '/projectManagement' },
+        hidden: true,
+        children: [
+          {
+            path: 'overview',
+            component: () => import('@/views/projectManagement/overview'),
+            meta: { activeMenu: '/projectManagement', keepAlive: true }
+          },
+          {
+            path: 'pods',
+            component: () => import('@/views/projectManagement/pods'),
+            meta: { activeMenu: '/projectManagement', keepAlive: true }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: '/storageManagement',
+    redirect: 'storageManagement',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/storageManagement/index'),
+        name: 'StorageManagement',
+        meta: { title: '存储管理', icon: 'el-icon-s-finance', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/workloadsManagement',
+    redirect: 'workloadsManagement',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/workloadsManagement/index'),
+        name: 'workloadsManagement',
+        redirect: '/workloadsManagement/deployments',
+        meta: { title: '工作负载', icon: 'el-icon-s-cooperation', affix: true }
+      },
+      {
+        path: 'deployments',
+        component: () => import('@/views/workloadsManagement/index'),
+        name: 'deployments',
+        hidden: true,
+        meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+      },
+      {
+        path: 'statefulsets',
+        component: () => import('@/views/workloadsManagement/index'),
+        name: 'statefulsets',
+        hidden: true,
+        meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+      },
+      {
+        path: 'daemonsets',
+        component: () => import('@/views/workloadsManagement/index'),
+        name: 'daemonsets',
+        hidden: true,
+        meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+      },
+      {
+        path: 'deployments/:name',
+        component: () => import('@/views/workloadsManagement/detail'),
+        name: 'DeploymentDetail',
+        meta: { activeMenu: '/workloadsManagement' },
+        hidden: true,
+        children: [
+          {
+            path: 'resource-status',
+            component: () => import('@/views/workloadsManagement/resource-status'),
+            meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+          },
+          {
+            path: 'schedule',
+            component: () => import('@/views/workloadsManagement/schedule'),
+            meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+          },
+          {
+            path: 'monitors',
+            component: () => import('@/views/workloadsManagement/monitors'),
+            meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+          }
+        ]
+      },
+      {
+        path: 'statefulsets/:name',
+        component: () => import('@/views/workloadsManagement/detail'),
+        name: 'StatefulSetDetail',
+        meta: { activeMenu: '/workloadsManagement' },
+        hidden: true,
+        children: [
+          {
+            path: 'resource-status',
+            component: () => import('@/views/workloadsManagement/resource-status'),
+            meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+          },
+          {
+            path: 'schedule',
+            component: () => import('@/views/workloadsManagement/schedule'),
+            meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+          },
+          {
+            path: 'monitors',
+            component: () => import('@/views/workloadsManagement/monitors'),
+            meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+          }
+        ]
+      },
+      {
+        path: 'daemonsets/:name',
+        component: () => import('@/views/workloadsManagement/detail'),
+        name: 'DaemonSetDetail',
+        meta: { activeMenu: '/workloadsManagement' },
+        hidden: true,
+        children: [
+          {
+            path: 'resource-status',
+            component: () => import('@/views/workloadsManagement/resource-status'),
+            meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+          },
+          {
+            path: 'schedule',
+            component: () => import('@/views/workloadsManagement/schedule'),
+            meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+          },
+          {
+            path: 'monitors',
+            component: () => import('@/views/workloadsManagement/monitors'),
+            meta: { activeMenu: '/workloadsManagement', keepAlive: true }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: '/podManagement',
+    redirect: 'podManagement',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/podManagement/index'),
+        name: 'PodManagement',
+        meta: { title: '容器组', icon: 'el-icon-s-platform', affix: true }
+      },
+      {
+        path: '/podManagement/:name',
+        component: () => import('@/views/podManagement/detail'),
+        name: 'PodManagementDetail',
+        meta: { activeMenu: '/podManagement' },
+        hidden: true,
+        children: [
+          {
+            path: 'resource-status',
+            component: () => import('@/views/podManagement/resource-status'),
+            meta: { activeMenu: '/podManagement', keepAlive: true }
+          },
+          {
+            path: 'schedule',
+            component: () => import('@/views/podManagement/schedule'),
+            meta: { activeMenu: '/podManagement', keepAlive: true }
+          },
+          {
+            path: 'monitors',
+            component: () => import('@/views/podManagement/monitors'),
+            meta: { activeMenu: '/podManagement', keepAlive: true }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: '/serviceManagement',
+    redirect: 'serviceManagement',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/serviceManagement/index'),
+        name: 'ServiceManagement',
+        meta: { title: '服务', icon: 'el-icon-s-help', affix: true }
+      }
+    ]
+  }
+]

src/styles/element-variables.scss

@@ -17,7 +17,7 @@ $--button-font-weight: 400;
 $--border-color-light: #dfe4ed;
 $--border-color-lighter: #e6ebf5;
 
-$--table-border: 1px solid #dfe6ec;
+$--table-border: 1px solid #eeeeee;
 
 /* icon font path, required */
 $--font-path: "~element-ui/lib/theme-chalk/fonts";

src/styles/index.scss

@@ -211,11 +211,19 @@ span.tips {
   height: 260px;
 }
 
-.el-table th {
+.el-table{
-  background: #F5F7FA;
+  border: 1px solid #eeeeee;
+  border-bottom: 0px;
+  th {
+    background: #f5f5f5;
+  }
+
+}
+.el-table::before{
+  height: 0;
 }
 
-table{
+.table{
   width: 100%;
   font-size: 0.8rem;
   border-top: 1px solid #eeeeee;

src/styles/variables.scss

@@ -1,6 +1,6 @@
 // base color
-$blue:#409EFF;
+$blue:#419EFF;
-$light-blue:#409EFF;
+$light-blue:#419EFF;
 $red:#C03639;
 $pink: #e65d5d;
 $green: #30B08F;
@@ -10,7 +10,7 @@ $panGreen: #0DBEAE;
 
 // sidebar
 $menuText:#303133;
-$menuActiveText:#409EFF;
+$menuActiveText:#419EFF;
 $subMenuActiveText:#303133; // https://github.com/ElemeFE/element/issues/12951
 
 $menuBg:#ffffff;

src/views/login/index.vue

@@ -1,53 +1,72 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
+    <div class="manufacturer">
+      <el-row :gutter="50" class="login-part">
+        <el-col :span="12">
+          <p class="title">欢迎使用云际计算</p>
+          <p>操作更便捷，访问更安全</p>
+          <img src="@/assets/log-img.png">
+        </el-col>
+        <el-col :span="12">
+          <el-card shadow="always">
+            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
+              <div class="title-container">
+                <p>用户登录</p>
+              </div>
 
-      <div class="title-container">
+              <el-form-item prop="username" label="">
-        <h3 class="title">Login Form</h3>
+                <el-input
-      </div>
+                  ref="username"
+                  v-model="loginForm.username"
+                  placeholder="Username"
+                  name="username"
+                  type="text"
+                  tabindex="1"
+                  autocomplete="on"
+                />
+              </el-form-item>
 
-      <el-form-item prop="username">
+              <el-tooltip
-        <span class="svg-container">
+                v-model="capsTooltip"
-          <svg-icon icon-class="user" />
+                content="Caps lock is On"
-        </span>
+                placement="right"
-        <el-input
+                manual
-          ref="username"
+              >
-          v-model="loginForm.username"
+                <el-form-item prop="password" label="">
-          placeholder="Username"
+                  <el-input
-          name="username"
+                    :key="passwordType"
-          type="text"
+                    ref="password"
-          tabindex="1"
+                    v-model="loginForm.password"
-          autocomplete="on"
+                    placeholder="Password"
-        />
+                    name="password"
-      </el-form-item>
+                    tabindex="2"
+                    autocomplete="on"
+                    show-password
+                    @keyup.native="checkCapslock"
+                    @blur="capsTooltip = false"
+                    @keyup.enter.native="handleLogin"
+                  />
+                </el-form-item>
+              </el-tooltip>
+              <!-- <el-checkbox class="margin-20" v-model="rememberMe">记住我</el-checkbox> -->
 
-      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+              <el-button
-        <el-form-item prop="password">
+                :loading="loading"
-          <span class="svg-container">
+                type="primary"
-            <svg-icon icon-class="password" />
+                style="width:100%;margin-bottom:30px;"
-          </span>
+                @click.native.prevent="handleLogin"
-          <el-input
+              >登录</el-button>
-            :key="passwordType"
-            ref="password"
-            v-model="loginForm.password"
-            :type="passwordType"
-            placeholder="Password"
-            name="password"
-            tabindex="2"
-            autocomplete="on"
-            @keyup.native="checkCapslock"
-            @blur="capsTooltip = false"
-            @keyup.enter.native="handleLogin"
-          />
-          <span class="show-pwd" @click="showPwd">
-            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-          </span>
-        </el-form-item>
-      </el-tooltip>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+              <!-- <div style="position:relative">
-
+                <div class="tips">
-    </el-form>
+                  <a style="text-align:center" href="#/">返回首页</a>
+                </div>
+              </div> -->
+            </el-form>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
@@ -162,124 +181,55 @@ export default {
 </script>
 
 <style lang="scss">
-/* 修复input 背景不协调 和光标变色 */
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-$bg:#283443;
-$light_gray:#fff;
-$cursor: #fff;
-
-@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-  .login-container .el-input input {
-    color: $cursor;
-  }
-}
-
-/* reset element-ui css */
 .login-container {
-  .el-input {
+    height: 100%;
-    display: inline-block;
-    height: 47px;
-    width: 85%;
-
-    input {
-      background: transparent;
-      border: 0;
-      -webkit-appearance: none;
-      border-radius: 0;
-      padding: 12px 5px 12px 15px;
-      color: $light_gray;
-      height: 47px;
-      caret-color: $cursor;
-
-      &:-webkit-autofill {
-        box-shadow: 0 0 0 1000px $bg inset !important;
-        -webkit-text-fill-color: $cursor !important;
-      }
-    }
-  }
-
-  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    color: #454545;
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
-
-.login-container {
-  min-height: 100%;
-  width: 100%;
-  background-color: $bg;
-  overflow: hidden;
-
-  .login-form {
-    position: relative;
-    width: 520px;
-    max-width: 100%;
-    padding: 160px 35px 0;
-    margin: 0 auto;
     overflow: hidden;
-  }
+    background-color: #f7f7f7;
-
+}
-  .tips {
+.manufacturer{
-    font-size: 14px;
+  // margin-top: 10px;
-    color: #fff;
+  max-width: 1200px;
-    margin-bottom: 10px;
+  margin: 0 auto;
-
+  box-sizing: border-box;
-    span {
+  padding: 100px 20px;
-      &:first-of-type {
+  // padding-top: 40px;
-        margin-right: 16px;
+  text-align: left;
-      }
+}
-    }
+@media screen and (max-width: 1200px) {
-  }
+  .manufacturer{
-
+    width: 86%;
-  .svg-container {
+    padding: 80px 20px;
-    padding: 6px 5px 6px 15px;
+    // padding-top: 20px;
-    color: $dark_gray;
+    .indexTitle{
-    vertical-align: middle;
+      font-size: 1rem;
-    width: 30px;
-    display: inline-block;
-  }
-
-  .title-container {
-    position: relative;
-
-    .title {
-      font-size: 26px;
-      color: $light_gray;
-      margin: 0 auto 40px auto;
-      text-align: center;
-      font-weight: bold;
-    }
-  }
-
-  .show-pwd {
-    position: absolute;
-    right: 10px;
-    top: 7px;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .thirdparty-button {
-    position: absolute;
-    right: 0;
-    bottom: 6px;
-  }
-
-  @media only screen and (max-width: 470px) {
-    .thirdparty-button {
-      display: none;
     }
   }
 }
+
+.login-part{
+  img{
+    width: 90%;
+  }
+  p{
+    font-size: 25px;
+    padding: 0 20px;
+    text-align: left;
+  }
+  .title{
+    font-size: 40px;
+    font-weight: 600;
+    margin: 0;
+  }
+  .el-card{
+    margin: 0 20px;
+  }
+  .login-form{
+    margin: 40px;
+    color: #666666;
+    .title-container p{
+      padding: 0;
+    }
+  }
+
+}
 </style>

src/views/overview/components/virtualMachine.vue

@@ -18,7 +18,7 @@
       </el-col>
 
     </el-row>
-    <table border="0">
+    <table class="table" border="0">
       <tr>
         <th>主机</th>
         <th>虚拟机</th>

src/views/overview/index.vue

@@ -22,12 +22,6 @@
           <h4>函数概览</h4>
         </el-card>
       </el-tab-pane>
-      <el-tab-pane name="fourth">
-        <el-card slot="label" class="overviewTab" shadow="never">
-          <img src="@/assets/img/node.png">
-          <h4>跨链概览</h4>
-        </el-card>
-      </el-tab-pane>
     </el-tabs>
 
   </div>
@@ -62,7 +56,7 @@ export default {
     width: 100%;
   }
   .el-tabs__item{
-    width: 25%;
+    width: 33.33%;
     padding: 0;
 
   }

src/views/prometheusMonitor/earth.vue

@@ -0,0 +1,134 @@
+<template>
+  <div />
+</template>
+<script>
+import * as Three from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+export default {
+  mounted() {
+    // this.date_trans()
+    this.$nextTick(() => {
+      // this.drawBarchart()
+      // this.chinaConfigure()
+      // this.load_average()
+      // this.cpu_average()
+      // this.memory_total()
+      // this.memory_average()
+      // this.resource_used()
+      this.init()
+      // this.animate()
+    })
+  },
+  methods: {
+    init() {
+      // const container = document.getElementById('myEchart')
+
+      /**
+       * 创建场景对象Scene
+       */
+      this.scene = new Three.Scene()
+      /**
+       * 创建网格模型
+       */
+      var geometry = new Three.SphereGeometry(100, 40, 40) // 创建一个球体几何对象
+      // var geometry = new Three.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
+      // var material = new Three.MeshLambertMaterial({
+      //   color: 0x0000ff
+      // }); //材质对象Material
+
+      // var mesh = new Three.Mesh(geometry, material); //网格模型对象Mesh
+      // scene.add(mesh); //网格模型添加到场景中
+      /**
+       * 光源设置
+       */
+      // 点光源
+      var point = new Three.DirectionalLight(0xffffff)
+      // point.position.set(400, 200, 300); //点光源位置
+      this.scene.add(point) // 点光源添加到场景中
+      // 环境光
+      var ambient = new Three.AmbientLight(0x444444)
+      this.scene.add(ambient)
+      /**
+       * 相机设置
+       */
+      var width = window.innerWidth // 窗口宽度
+      var height = window.innerHeight // 窗口高度
+      var k = width / height // 窗口宽高比
+      var s = 200 // 三维场景显示范围控制系数，系数越大，显示的范围越大
+      // 创建相机对象
+      this.camera = new Three.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
+      this.camera.position.set(200, 300, 200) // 设置相机位置
+      this.camera.lookAt(this.scene.position) // 设置相机方向(指向的场景对象)
+      /**
+       * 创建渲染器对象
+       */
+      this.renderer = new Three.WebGLRenderer()
+      // 设置纹理贴图
+      var textureLoader = new Three.TextureLoader()
+      textureLoader.load('/earth.png', (texture) => {
+        var material = new Three.MeshLambertMaterial({
+          // color: 0x0000ff,
+          // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值
+          map: texture// 设置颜色贴图属性值
+        }) // 材质对象Material
+        this.mesh = new Three.Mesh(geometry, material) // 网格模型对象Mesh
+        this.scene.add(this.mesh) // 网格模型添加到场景中
+
+        this.setMark(this.mapMarks)
+
+        // 纹理贴图加载成功后，调用渲染函数执行渲染操作
+        // render();
+        this.renderer.setSize(width, height)// 设置渲染区域尺寸
+        this.renderer.setClearColor(0xb9d3ff, 1) // 设置背景颜色
+        document.body.appendChild(this.renderer.domElement)
+        // 执行渲染操作   指定场景、相机作为参数
+        this.renderer.render(this.scene, this.camera)
+        this.animate()
+      })
+      // 新建一个轨道控制器
+      this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement)
+      this.orbitControls.target = new Three.Vector3(0, 0, 0)// 控制焦点
+      this.orbitControls.autoRotate = false// 将自动旋转关闭
+      this.orbitControls.minZoom = 0.5
+      this.orbitControls.maxZoom = 2
+    },
+    setMark(_markData) {
+      var marking = new Three.Group()
+      for (var i = 0; i < _markData.length; i++) {
+        // 创建标记点球体
+        var mark = new Three.Mesh(new Three.SphereGeometry(2, 2, 2), new Three.MeshBasicMaterial({
+          color: '#1bb4b0'
+        }))
+        // 获取标记点坐标
+        var markPos = this.getPosition(_markData[i].attributes.x + 90, _markData[i].attributes.y, 100)
+        console.log(markPos)
+        mark.position.set(markPos.x, markPos.y, markPos.z)
+        marking.add(mark)
+      }
+      console.log(marking)
+      this.scene.add(marking)
+    },
+    getPosition(_longitude, _latitude, _radius) {
+      var lg = Three.Math.degToRad(_longitude)
+      var lt = Three.Math.degToRad(_latitude)
+      var temp = _radius * Math.cos(lt)
+      var x = temp * Math.sin(lg)
+      var y = _radius * Math.sin(lt)
+      var z = temp * Math.cos(lg)
+      return {
+        x: x,
+        y: y,
+        z: z
+      }
+    },
+    animate() {
+      // this.mesh.rotation.y += 0.01
+      // this.clock = new Three.Clock();//用于更新轨道控制器
+      // let delta = this.clock.getDelta();
+      this.orbitControls.update()
+      requestAnimationFrame(this.animate)
+      this.renderer.render(this.scene, this.camera)
+    }
+  }
+}
+</script>

src/views/prometheusMonitor/index.vue

@@ -111,12 +111,10 @@
 // import echarts from 'echarts'
 import * as echarts from 'echarts'
 import Card from './card.vue'
-// import 'echarts/map/js/china'
+import chinaJson from './china.json'
 import { cpu_average, load_average, memory_average, memory_total } from '@/api/one-class-page/prometheusMonitor'
 import { timeTrans_now } from '@/utils/timeTrans'
 import { resource_used } from '@/api/one-class-page/prometheus'
-import * as Three from 'three'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 
 export default {
   name: 'Chart',
@@ -501,128 +499,19 @@ export default {
   },
   mounted() {
     // this.date_trans()
+
     this.$nextTick(() => {
-      // this.drawBarchart()
+      this.drawBarchart()
-      // this.chinaConfigure()
+      this.chinaConfigure()
-      // this.load_average()
+      this.load_average()
-      // this.cpu_average()
+      this.cpu_average()
-      // this.memory_total()
+      this.memory_total()
-      // this.memory_average()
+      this.memory_average()
-      // this.resource_used()
+      this.resource_used()
-      this.init()
       // this.animate()
     })
   },
   methods: {
-    init() {
-      // const container = document.getElementById('myEchart')
-
-      /**
-       * 创建场景对象Scene
-       */
-      this.scene = new Three.Scene()
-      /**
-       * 创建网格模型
-       */
-      var geometry = new Three.SphereGeometry(100, 40, 40) // 创建一个球体几何对象
-      // var geometry = new Three.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
-      // var material = new Three.MeshLambertMaterial({
-      //   color: 0x0000ff
-      // }); //材质对象Material
-
-      // var mesh = new Three.Mesh(geometry, material); //网格模型对象Mesh
-      // scene.add(mesh); //网格模型添加到场景中
-      /**
-       * 光源设置
-       */
-      // 点光源
-      var point = new Three.DirectionalLight(0xffffff)
-      // point.position.set(400, 200, 300); //点光源位置
-      this.scene.add(point) // 点光源添加到场景中
-      // 环境光
-      var ambient = new Three.AmbientLight(0x444444)
-      this.scene.add(ambient)
-      /**
-       * 相机设置
-       */
-      var width = window.innerWidth // 窗口宽度
-      var height = window.innerHeight // 窗口高度
-      var k = width / height // 窗口宽高比
-      var s = 200 // 三维场景显示范围控制系数，系数越大，显示的范围越大
-      // 创建相机对象
-      this.camera = new Three.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
-      this.camera.position.set(200, 300, 200) // 设置相机位置
-      this.camera.lookAt(this.scene.position) // 设置相机方向(指向的场景对象)
-      /**
-       * 创建渲染器对象
-       */
-      this.renderer = new Three.WebGLRenderer()
-      // 设置纹理贴图
-      var textureLoader = new Three.TextureLoader()
-      textureLoader.load('/earth.png', (texture) => {
-        var material = new Three.MeshLambertMaterial({
-          // color: 0x0000ff,
-          // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值
-          map: texture// 设置颜色贴图属性值
-        }) // 材质对象Material
-        this.mesh = new Three.Mesh(geometry, material) // 网格模型对象Mesh
-        this.scene.add(this.mesh) // 网格模型添加到场景中
-
-        this.setMark(this.mapMarks)
-
-        // 纹理贴图加载成功后，调用渲染函数执行渲染操作
-        // render();
-        this.renderer.setSize(width, height)// 设置渲染区域尺寸
-        this.renderer.setClearColor(0xb9d3ff, 1) // 设置背景颜色
-        document.body.appendChild(this.renderer.domElement)
-        // 执行渲染操作   指定场景、相机作为参数
-        this.renderer.render(this.scene, this.camera)
-        this.animate()
-      })
-      // 新建一个轨道控制器
-      this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement)
-      this.orbitControls.target = new Three.Vector3(0, 0, 0)// 控制焦点
-      this.orbitControls.autoRotate = false// 将自动旋转关闭
-      this.orbitControls.minZoom = 0.5
-      this.orbitControls.maxZoom = 2
-    },
-    setMark(_markData) {
-      var marking = new Three.Group()
-      for (var i = 0; i < _markData.length; i++) {
-        // 创建标记点球体
-        var mark = new Three.Mesh(new Three.SphereGeometry(2, 2, 2), new Three.MeshBasicMaterial({
-          color: '#1bb4b0'
-        }))
-        // 获取标记点坐标
-        var markPos = this.getPosition(_markData[i].attributes.x + 90, _markData[i].attributes.y, 100)
-        console.log(markPos)
-        mark.position.set(markPos.x, markPos.y, markPos.z)
-        marking.add(mark)
-      }
-      console.log(marking)
-      this.scene.add(marking)
-    },
-    getPosition(_longitude, _latitude, _radius) {
-      var lg = Three.Math.degToRad(_longitude)
-      var lt = Three.Math.degToRad(_latitude)
-      var temp = _radius * Math.cos(lt)
-      var x = temp * Math.sin(lg)
-      var y = _radius * Math.sin(lt)
-      var z = temp * Math.cos(lg)
-      return {
-        x: x,
-        y: y,
-        z: z
-      }
-    },
-    animate() {
-      // this.mesh.rotation.y += 0.01
-      // this.clock = new Three.Clock();//用于更新轨道控制器
-      // let delta = this.clock.getDelta();
-      this.orbitControls.update()
-      requestAnimationFrame(this.animate)
-      this.renderer.render(this.scene, this.camera)
-    },
     drawBarchart() {
       const pieChart = echarts.init(this.$refs.pieChart, 'dark')
       pieChart.setOption(this.pieChartOption)
@@ -630,8 +519,10 @@ export default {
       lineChart.setOption(this.lineChartOption)
     },
     chinaConfigure() {
+      echarts.registerMap('china', chinaJson)
       const myChart = echarts.init(this.$refs.myEchart, 'dark') // 这里是为了获得容器所在位置
       window.onresize = myChart.resize
+
       myChart.setOption({ // 进行相关配置
         backgroundColor: 'transparent',
         tooltip: {}, // 鼠标移到图里面的浮动提示框
@@ -715,7 +606,7 @@ export default {
               backgroundColor: 'rgba(70,255,255,0.3)',
               borderColor: '#46ffff',
               borderWidth: 1,
-              textStyle: { fontSize: 10 },
+              textStyle: { fontSize: 10, color: '#ffffff' },
               borderRadius: 0,
               padding: [3, 10]
             }
@@ -754,7 +645,7 @@ export default {
           cnt[i] !== 0 ? result[i] = result[i] / cnt[i] : result[i] = 0
         }
         this.lineBarOption.series[0].data = result
-        const lineBarChart = this.$echarts.init(this.$refs.lineBarChart, 'dark')
+        const lineBarChart = echarts.init(this.$refs.lineBarChart, 'dark')
         lineBarChart.setOption(this.lineBarOption)
       }).catch(function(error) {
         console.log(error)
@@ -784,7 +675,7 @@ export default {
           cnt[i] !== 0 ? result[i] = result[i] / cnt[i] : result[i] = 0
         }
         this.lineBarOption.series[2].data = result
-        const lineBarChart = this.$echarts.init(this.$refs.lineBarChart, 'dark')
+        const lineBarChart = echarts.init(this.$refs.lineBarChart, 'dark')
         lineBarChart.setOption(this.lineBarOption)
       }).catch(function(error) {
         console.log(error)
@@ -814,7 +705,7 @@ export default {
           cnt[i] !== 0 ? result[i] = result[i] / (cnt[i] * 1024 * 1024 * 1024) : result[i] = 0
         }
         this.lineBarOption.series[1].data = result
-        const lineBarChart = this.$echarts.init(this.$refs.lineBarChart, 'dark')
+        const lineBarChart = echarts.init(this.$refs.lineBarChart, 'dark')
         lineBarChart.setOption(this.lineBarOption)
       }).catch(function(error) {
         console.log(error)
@@ -844,14 +735,14 @@ export default {
           cnt[i] !== 0 ? result[i] = result[i] / cnt[i] : result[i] = 0
         }
         this.lineBarOption.series[3].data = result
-        const lineBarChart = this.$echarts.init(this.$refs.lineBarChart, 'dark')
+        const lineBarChart = echarts.init(this.$refs.lineBarChart, 'dark')
         lineBarChart.setOption(this.lineBarOption)
       }).catch(function(error) {
         console.log(error)
       })
     },
     resource_used() {
-      const resourceChart = this.$echarts.init(this.$refs.resourceChart)
+      const resourceChart = echarts.init(this.$refs.resourceChart)
       resource_used(timeTrans_now()).then(response => {
         this.device_used_data = (response.data.data.result[0].value[1] / 3).toFixed(1)
         this.device_unused_data = 100 - this.device_used_data
@@ -987,6 +878,14 @@ export default {
       }
     }
   }
+  .el-table{
+    border: 0;
+    font-size: 0.8rem;
+    line-height: 1rem;
+    .cell{
+      line-height: 1rem;
+    }
+  }
   .el-table th.is-leaf, .el-table td{
     border: 0;
   }