forked from JointCloud/JCC-RIP
fix
This commit is contained in:
annzee
parent
79bba963fd
commit
07735cccc7
|
|
@ -1,5 +1,5 @@
|
|||
# JCCE
|
||||
|
||||
Thanks to KubeSphere and Harvester for providing back-end support for this system.
|
||||
## 电脑需要安装 node 环境
|
||||
|
||||
## 安装依赖命令
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<table border="0">
|
||||
<table class="table" border="0">
|
||||
<tr>
|
||||
<th>服务商</th>
|
||||
<th>JCCE版本</th>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<table border="0">
|
||||
<table class="table" border="0">
|
||||
<tr>
|
||||
<th>API每秒请求数</th>
|
||||
<th>API请求延迟</th>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<table class="noborder">
|
||||
<table class="table noborder">
|
||||
<tr>
|
||||
<td style="width:400px">
|
||||
<div id="radarChart" />
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export const FormData = {
|
|||
}
|
||||
|
||||
return (
|
||||
<table class='formData'>
|
||||
<table class='table formData'>
|
||||
{list()}
|
||||
</table>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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"> -->
|
||||
<p class="sidebar-title">{{ new Date().toLocaleString() }}</p>
|
||||
<img src="@/assets/JCCE-logo.png" class="sidebar-logo">
|
||||
<!-- <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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -211,11 +211,19 @@ span.tips {
|
|||
height: 260px;
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background: #F5F7FA;
|
||||
.el-table{
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// base color
|
||||
$blue:#409EFF;
|
||||
$light-blue:#409EFF;
|
||||
$blue:#419EFF;
|
||||
$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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<h3 class="title">Login Form</h3>
|
||||
</div>
|
||||
<el-form-item prop="username" label="">
|
||||
<el-input
|
||||
ref="username"
|
||||
v-model="loginForm.username"
|
||||
placeholder="Username"
|
||||
name="username"
|
||||
type="text"
|
||||
tabindex="1"
|
||||
autocomplete="on"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input
|
||||
ref="username"
|
||||
v-model="loginForm.username"
|
||||
placeholder="Username"
|
||||
name="username"
|
||||
type="text"
|
||||
tabindex="1"
|
||||
autocomplete="on"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-tooltip
|
||||
v-model="capsTooltip"
|
||||
content="Caps lock is On"
|
||||
placement="right"
|
||||
manual
|
||||
>
|
||||
<el-form-item prop="password" label="">
|
||||
<el-input
|
||||
:key="passwordType"
|
||||
ref="password"
|
||||
v-model="loginForm.password"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
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-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
: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"
|
||||
>登录</el-button>
|
||||
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
|
||||
|
||||
</el-form>
|
||||
<!-- <div style="position:relative">
|
||||
<div class="tips">
|
||||
<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 {
|
||||
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;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
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;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.manufacturer{
|
||||
// margin-top: 10px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 100px 20px;
|
||||
// padding-top: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.manufacturer{
|
||||
width: 86%;
|
||||
padding: 80px 20px;
|
||||
// padding-top: 20px;
|
||||
.indexTitle{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<table border="0">
|
||||
<table class="table" border="0">
|
||||
<tr>
|
||||
<th>主机</th>
|
||||
<th>虚拟机</th>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
@ -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.chinaConfigure()
|
||||
// this.load_average()
|
||||
// this.cpu_average()
|
||||
// this.memory_total()
|
||||
// this.memory_average()
|
||||
// this.resource_used()
|
||||
this.init()
|
||||
this.drawBarchart()
|
||||
this.chinaConfigure()
|
||||
this.load_average()
|
||||
this.cpu_average()
|
||||
this.memory_total()
|
||||
this.memory_average()
|
||||
this.resource_used()
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue