mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-04-06 03:57:53 +08:00
Merge branch 'master' of https://github.com/ziszat/vue-element-admin
This commit is contained in:
handsomewu
commit
b49a8e24c6
@ -69,6 +69,7 @@ module.exports = {
|
||||
'newIsCap': true,
|
||||
'capIsNew': false
|
||||
}],
|
||||
'vue/no-unused-components': 'off',
|
||||
'new-parens': 2,
|
||||
'no-array-constructor': 2,
|
||||
'no-caller': 2,
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
"script-loader": "0.7.2",
|
||||
"sortablejs": "1.8.4",
|
||||
"tui-editor": "1.3.3",
|
||||
"vis-network": "^9.1.9",
|
||||
"vue": "2.6.10",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-router": "3.0.2",
|
||||
|
||||
BIN
src/assets/custom-theme/topology.png
Normal file
BIN
src/assets/custom-theme/topology.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
@ -84,13 +84,13 @@ export const constantRoutes = [
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/documentation',
|
||||
path: '/grafana',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/documentation/index'),
|
||||
name: 'Documentation',
|
||||
component: () => import('@/views/grafana/index'),
|
||||
name: 'Grafana',
|
||||
meta: { title: '算力可视化', icon: 'chart', affix: true }
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,97 +1,86 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<github-corner class="github-corner" />
|
||||
<el-image
|
||||
style="width: 100%; height: 100%"
|
||||
:src="require('@/assets/custom-theme/topology.png')"
|
||||
fit="fill"
|
||||
/>
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="date" label="所属集群" width="180" />
|
||||
<el-table-column prop="name" label="Node 名称" width="180" />
|
||||
<el-table-column prop="address" label="Node IP" />
|
||||
<el-table-column prop="role" label="Role" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="scope.row.status === 'Ready' ? 'success' : 'danger'"
|
||||
disable-transitions
|
||||
>{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="8">
|
||||
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
|
||||
<transaction-table />
|
||||
</el-col>
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
|
||||
<todo-list />
|
||||
</el-col>
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
|
||||
<box-card />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GithubCorner from '@/components/GithubCorner'
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
import TransactionTable from './components/TransactionTable'
|
||||
import TodoList from './components/TodoList'
|
||||
import BoxCard from './components/BoxCard'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
components: {
|
||||
GithubCorner,
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart,
|
||||
TransactionTable,
|
||||
TodoList,
|
||||
BoxCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
tableData: [] // 初始为空数组，将在 mounted 时获取数据
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchTableData() // 页面加载时调用数据请求方法
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
fetchTableData() {
|
||||
fetch('http://localhost:5000/dashboard/nodes', {
|
||||
method: 'Get',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// 转换数据为json
|
||||
const parseClusterData = (clusterString, clusterName) => {
|
||||
const rows = clusterString.trim().split('\n').slice(1)
|
||||
return rows.map(row => {
|
||||
const columns = row.trim().split(/\s{2,}/)
|
||||
return {
|
||||
cluster: clusterName,
|
||||
name: columns[0],
|
||||
status: columns[1],
|
||||
role: columns[2],
|
||||
age: columns[3],
|
||||
version: columns[4],
|
||||
ip: columns[5],
|
||||
externalIp: columns[6] || '<none>',
|
||||
osImage: columns[7],
|
||||
kernelVersion: columns[8],
|
||||
containerRuntime: columns[9]
|
||||
}
|
||||
})
|
||||
}
|
||||
const clusterAData = parseClusterData(data.cluster_a, 'Cluster A')
|
||||
const clusterBData = parseClusterData(data.cluster_b, 'Cluster B')
|
||||
const combinedData = [...clusterAData, ...clusterBData]
|
||||
console.log('looking handsome', combinedData)
|
||||
|
||||
// 假设返回的数据包含节点列表，并转换成表格所需格式
|
||||
this.tableData = combinedData.map(node => ({
|
||||
date: node.cluster, // 假设 cluster 表示集群
|
||||
name: node.name, // 假设 name 表示节点名称
|
||||
address: node.ip, // 假设 ip 表示节点 IP
|
||||
role: node.role, // 假设 role 表示节点角色
|
||||
status: node.status // 假设 status 表示状态
|
||||
}))
|
||||
})
|
||||
.catch(error => console.error('Error fetching table data:', error))
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container documentation-container">
|
||||
<a class="document-btn" target="_blank" href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=demo_English_button">Java backend integration</a>
|
||||
<a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">Documentation</a>
|
||||
<a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">Github Repository</a>
|
||||
<a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
|
||||
<dropdown-menu class="document-btn" :items="articleList" title="系列文章" />
|
||||
<a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/">内推招聘</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DropdownMenu from '@/components/Share/DropdownMenu'
|
||||
|
||||
export default {
|
||||
name: 'Documentation',
|
||||
components: { DropdownMenu },
|
||||
data() {
|
||||
return {
|
||||
articleList: [
|
||||
{ title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
|
||||
{ title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
|
||||
{ title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
|
||||
{ title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
|
||||
{ title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
|
||||
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
|
||||
{ title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
|
||||
{ title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
|
||||
{ title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.documentation-container {
|
||||
margin: 50px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.document-btn {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: black;
|
||||
color: white;
|
||||
height: 60px;
|
||||
padding: 0 16px;
|
||||
margin: 16px;
|
||||
line-height: 60px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
src/views/grafana/index.vue
Normal file
48
src/views/grafana/index.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="app-container documentation-container">
|
||||
<iframe src="http://localhost:3030/d/rYdddlPWk/node-exporter-full" frameborder="0" name="popup" class="web" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DropdownMenu from '@/components/Share/DropdownMenu'
|
||||
|
||||
export default {
|
||||
name: 'Documentation',
|
||||
components: { DropdownMenu },
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.documentation-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 0px;
|
||||
|
||||
.document-btn {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: black;
|
||||
color: white;
|
||||
height: 60px;
|
||||
padding: 0 16px;
|
||||
margin: 16px;
|
||||
line-height: 60px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.web {
|
||||
display: inline;
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -27,7 +27,7 @@ module.exports = {
|
||||
publicPath: '/',
|
||||
outputDir: 'dist',
|
||||
assetsDir: 'static',
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
lintOnSave: false,
|
||||
productionSourceMap: false,
|
||||
devServer: {
|
||||
port: port,
|
||||
@ -36,6 +36,13 @@ module.exports = {
|
||||
warnings: false,
|
||||
errors: true
|
||||
},
|
||||
proxy: {
|
||||
'/grafana': {
|
||||
target: 'http://localhost:3030', // 替换为服务器 B 的域名或 IP 地址
|
||||
changeOrigin: true,
|
||||
pathRewrite: { '^/grafana': '' } // 如果服务器 B 的接口不以 /api 开头，去掉前缀
|
||||
}
|
||||
},
|
||||
before: require('./mock/mock-server.js')
|
||||
},
|
||||
configureWebpack: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user