efc
/
scr-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 修改

catl
时启龙 2024-09-20 17:15:02 +08:00
parent a9313551b0
commit 6a0e381dcb
6 changed files with 123 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/OverviewState/index.vue
View File

@ -1,28 +1,32 @@
<template> <template>
<el-row class="stat-container"> <el-row class="stat-container">
<!-- <dv-border-box-8 :reverse="true" style="height: 74px"> --> <!-- <dv-border-box-8 :reverse="true" style="height: 74px"> -->
<div class="stat-border" style="top: -2px"></div> <div class="stat-border" style="top: -2px"></div>
<div class="stat-border" style="top: -2px; right: 1px"></div> <div class="stat-border" style="top: -2px; right: 1px"></div>
<div class="stat-border" style="bottom: 0; right: 1px"></div> <div class="stat-border" style="bottom: 0; right: 1px"></div>
<div class="stat-border" style="bottom: 0;"></div> <div class="stat-border" style="bottom: 0;"></div>
<el-col :span="24/configs.length" class="stat-part" v-for="item in configs" :key="item.title"> <el-col :span="24 / configs.length" class="stat-part" v-for="item in configs" :key="item.title">
<div class="title"> <div class="title">
<i class="icon" :class="item.icon"></i> <i class="icon" :class="item.icon"></i>
<span>{{item.title}}</span> <span>{{ item.title }}</span>
</div>
<div class="stat-count" v-for="(cell, index) in item.data" :key="index">
<div :class="['hover', { active: activePlateform === index }]" v-if="item.title === '平台情况' && item.type === 'COUNT'" @click="plateformClick(index)">
<div>{{ cell.title }}</div>
<div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
</div> </div>
<div class="stat-count" v-for="(cell,index) in item.data" :key="index"> <div v-else>
<template v-if="item.type === 'COUNT'"> <div>{{ cell.title }}</div>
<div>{{cell.title}}</div> <div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
<div class="number" :class="cell.className" :style="cell.style">{{cell.value}} {{cell.unit}}</div>
</template>
<template v-if="item.type === 'PROGRESS'">
<div :style="item.titleStyle">{{cell.title}}</div>
<div class="progress-wrap">
<Progress :used="cell.used" :total="cell.total" :unit="cell.unit" :color="cell.color"></Progress>
</div>
</template>
</div> </div>
</el-col> <div v-if="item.type === 'PROGRESS'">
<div :style="item.titleStyle">{{ cell.title }}</div>
<div class="progress-wrap">
<Progress :used="cell.used" :total="cell.total" :unit="cell.unit" :color="cell.color"></Progress>
</div>
</div>
</div>
</el-col>
<!-- </dv-border-box-8> --> <!-- </dv-border-box-8> -->
</el-row> </el-row>
</template> </template>
@ -35,10 +39,38 @@ export default {
type: Array, type: Array,
required: true required: true
} }
},
data() {
return {
activePlateform: ''
}
},
methods: {
plateformClick(index) {
let isPublic
if (this.activePlateform === index) {
this.activePlateform = ''
isPublic = null
} else {
this.activePlateform = index
isPublic = index === 1
}
this.$emit('plateformClick', isPublic)
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.hover {
cursor: pointer;
padding-left: 5px;
&:hover {
background: #161c5f;
}
&.active {
background: #161c5f;
}
}
.stat-container { .stat-container {
position: relative; position: relative;
height: 74px; height: 74px;
@ -97,7 +129,7 @@ export default {
font-size: 28px; font-size: 28px;
margin-right: 5px; margin-right: 5px;
} }
span{ span {
max-width: 90px; max-width: 90px;
} }
} }

36
src/services/screen/resource.js
View File

@ -1,37 +1,37 @@
import request from 'utils/request' import request from 'utils/request'
import { wrapperParams } from 'utils' import { wrapperParams } from 'utils'
import { isObject } from 'lodash-es'
export function getOverview (type) { export function getOverview(type) {
return request.get('/cos/v1/cloud/resource/overview', { params: { type } }) return request.get('/cos/v1/cloud/resource/overview', { params: isObject(type) ? type : { type } })
} }
export function getPlatformOverview (type) { export function getPlatformOverview(type) {
return request.get('/cos/v1/cloud/resource', { params: { type } }) return request.get('/cos/v1/cloud/resource', { params: { type } })
} }
export function getUsed (type) { export function getUsed(type) {
return request.get('/cos/v1/cloud/resource/used', { params: { type } }) return request.get('/cos/v1/cloud/resource/used', { params: { type } })
} }
export function getVendors () { export function getVendors() {
return request.get('/cos/v1/cloud/resource/type') return request.get('/cos/v1/cloud/resource/type')
} }
export function getPlatforms (type) { export function getPlatforms(type) {
return request.get('/cos/v1/cloud/resource/platform', { params: wrapperParams({ type }) }) return request.get('/cos/v1/cloud/resource/platform', { params: wrapperParams({ type }) })
} }
export function getAlarmPieChart() { export function getAlarmPieChart(isPublic) {
return request.get('/cms/v1/alarms/chart', { return request.get('/cms/v1/alarms/chart', {
params: { action: 'pieChart' } params: { action: 'pieChart', isPublic }
}) })
} }
export function getResourceApply (type) { export function getResourceApply(type) {
return request.get('/cos/v1/cloud/resource/apply', { params: { type } }) return request.get('/cos/v1/cloud/resource/apply', { params: isObject(type) ? type : { type } })
} }
export function getResourceTrend (type) { export function getResourceTrend(type) {
return request.get('/cos/v1/cloud/resource/trend', { params: { type } }) return request.get('/cos/v1/cloud/resource/trend', { params: isObject(type) ? type : { type } })
} }
// 资源利用率TOP5 // 资源利用率TOP5
@ -41,16 +41,18 @@ export function getResTops(params) {
}) })
} }
export function getVendorTypes() { export function getVendorTypes(isPublic) {
return request.get('/cos/v1/cloud/resource/types') return request.get('/cos/v1/cloud/resource/types', {
params: { action: 'pieChart', isPublic }
})
} }
export function getHostStatus(type) { export function getHostStatus(type) {
return request.get('/cos/v1/cloud/resource/status', { return request.get('/cos/v1/cloud/resource/status', {
params: { type } params: isObject(type) ? type : { type }
}) })
} }
export function getResourceCount(type) { export function getResourceCount(type) {
return request.get('/cos/v1/cloud/resource/count', { return request.get('/cos/v1/cloud/resource/count', {
params: { type } params: isObject(type) ? type : { type }
}) })
} }

19
src/views/resource_screen/PlatformCard.vue
View File

@ -2,11 +2,11 @@
<div class="platform-card"> <div class="platform-card">
<div class="platform-card-title">云资源</div> <div class="platform-card-title">云资源</div>
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item" :style="{animation: `move${i} 20s infinite linear`}" @click="selectPlatform(item.value)" v-for="(item, i) in list" :key="item.name"> <div class="item" :style="{ animation: `move${i} 20s infinite linear` }" @click="selectPlatform(item.value)" v-for="(item, i) in list" :key="item.name">
<div class="item-animate"></div> <div class="item-animate"></div>
<div class="item-content"> <div class="item-content">
<img :src="item.icon" alt=""> <img :src="item.icon" alt="" />
<span>{{item.name}}</span> <span>{{ item.name }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -39,9 +39,9 @@ export default {
const state = reactive({ const state = reactive({
list: [] list: []
}) })
let style; let style
const getVendorsList = async () => { const getVendorsList = async (isPublic = null) => {
const res = await getVendorTypes(); const res = await getVendorTypes(isPublic)
if (res.success) { if (res.success) {
state.list = res.data state.list = res.data
} }
@ -49,14 +49,15 @@ export default {
} }
onUnmounted(() => { onUnmounted(() => {
style && style.remove() style && style.remove()
}); })
getVendorsList() getVendorsList()
function selectPlatform(type) { function selectPlatform(type) {
context.emit('changePlatform', type) context.emit('changePlatform', type)
} }
return { return {
...toRefs(state), ...toRefs(state),
selectPlatform selectPlatform,
getVendorsList
} }
} }
} }
@ -131,7 +132,7 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transform: rotateZ(-62deg); transform: rotateZ(-62deg);
img { img {
width: 80px; width: 80px;
} }

49
src/views/resource_screen/data.js
View File

@ -4,12 +4,6 @@ export const overviewConfigs = [
icon: 'el-icon-tickets', icon: 'el-icon-tickets',
type: 'COUNT', type: 'COUNT',
data: [ data: [
{
title: '物理机',
className: 'lgreen',
unit: '台',
value: 0
},
{ {
title: '云主机', title: '云主机',
className: 'green', className: 'green',
@ -34,44 +28,13 @@ export const overviewConfigs = [
className: 'lgreen', className: 'lgreen',
unit: '个', unit: '个',
value: 0 value: 0
},
{
title: '公有云',
className: 'green',
unit: '个',
value: 0
} }
// {
// title: "公有云",
// className: "green",
// unit: "个",
// value: 0,
// },
] ]
} }
// {
// title: "私有云使用情况",
// icon: "el-icon-data-line",
// type: "PROGRESS",
// titleStyle: {
// fontSize: "14px",
// },
// data: [
// {
// title: "CPU总量/剩余量",
// unit: "核",
// color: "#3AE13A",
// used: 0,
// total: 0,
// },
// {
// title: "内存总量/剩余量",
// unit: "G",
// color: "#FFC400",
// used: 0,
// total: 0,
// },
// {
// title: "存储总量/剩余量",
// unit: "T",
// color: "#33A1FF",
// used: 0,
// total: 0,
// },
// ],
// },
] ]

103
src/views/resource_screen/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<ScreenWrapper code="RESOURCE_SCREEN" :loading="loading"> <ScreenWrapper code="RESOURCE_SCREEN" :loading="loading">
<OverviewState :configs="overviewConfigs"></OverviewState> <OverviewState :configs="overviewConfigs" @plateformClick="plateformClick"></OverviewState>
<el-row class="m-t-md" :gutter="10"> <el-row class="m-t-md" :gutter="10">
<el-col :span="8" class="left"> <el-col :span="8" class="left">
<div class="card"> <div class="card">
@ -31,12 +31,12 @@
<div class="card h-300"> <div class="card h-300">
<div class="card-title">告警统计</div> <div class="card-title">告警统计</div>
<div class="card-body"> <div class="card-body">
<pie-charts :data="alarmCount" width="100%" height="240px" unit="" :configs="{color: ['#EC1C24', '#FF7F27', '#FFF200', '#4EAFF5']}"></pie-charts> <pie-charts :data="alarmCount" width="100%" height="240px" unit="" :configs="{ color: ['#EC1C24', '#FF7F27', '#FFF200', '#4EAFF5'] }"></pie-charts>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="8" class="center"> <el-col :span="8" class="center">
<PlatformCard @changePlatform="change"></PlatformCard> <PlatformCard @changePlatform="change" ref="PlatformCard"></PlatformCard>
<div class="card h-300"> <div class="card h-300">
<div class="card-title">云主机资源申请趋势</div> <div class="card-title">云主机资源申请趋势</div>
<div class="card-body"> <div class="card-body">
@ -69,24 +69,13 @@
</template> </template>
<script> <script>
import { reactive, toRefs } from '@vue/composition-api' import { reactive, toRefs, ref } from '@vue/composition-api'
import ScreenWrapper from 'components/ScreenWrapper' import ScreenWrapper from 'components/ScreenWrapper'
import OverviewState from 'components/OverviewState' import OverviewState from 'components/OverviewState'
import PlatformCard from './PlatformCard' import PlatformCard from './PlatformCard'
import ResourceCount from '../count_screen/ResourceCount' import ResourceCount from '../count_screen/ResourceCount'
import { overviewConfigs } from './data' import { overviewConfigs } from './data'
import { import { getOverview, getPlatformOverview, getPlatforms, getAlarmPieChart, getResourceApply, getResourceTrend, getResTops, getHostStatus, getResourceCount } from 'services/screen/resource'
getOverview,
getPlatformOverview,
getUsed,
getPlatforms,
getAlarmPieChart,
getResourceApply,
getResourceTrend,
getResTops,
getHostStatus,
getResourceCount
} from 'services/screen/resource'
export default { export default {
components: { components: {
ScreenWrapper, ScreenWrapper,
@ -105,16 +94,24 @@ export default {
applyTrendData: {}, applyTrendData: {},
usedTrendData: {}, usedTrendData: {},
vendorType: '', vendorType: '',
loading: true loading: true,
isPublic: null
}) })
const plateformClick = isPublic => {
state.isPublic = isPublic
init()
PlatformCard.value.getVendorsList(isPublic)
}
// 总体情况 // 总体情况
const getOverviewState = async () => { const getOverviewState = async () => {
const res = await getOverview() const res = await getOverview({
isPublic: state.isPublic
})
if (res.success) { if (res.success) {
// 处理数据对configs赋值 // 处理数据对configs赋值
const { hosts, servers, running } = res.data const { servers, running } = res.data
const unit = state.overviewConfigs[0] const unit = state.overviewConfigs[0]
;[hosts, servers, running].forEach((item, index) => { ;[servers, running].forEach((item, index) => {
unit.data[index].value = item unit.data[index].value = item
}) })
} }
@ -131,30 +128,6 @@ export default {
}) })
} }
} }
// 使用情况
const getUsedState = async () => {
const res = await getUsed()
if (res.success) {
// 处理数据对configs赋值
const {
menUnused,
memTotal,
cpuUnused,
cpuTotal,
diskTotal,
diskUnused
} = res.data
const unit = state.overviewConfigs[2]
;[
{ used: cpuUnused, total: cpuTotal },
{ used: menUnused, total: memTotal },
{ used: diskUnused, total: diskTotal }
].forEach((item, index) => {
unit.data[index].used = item.used
unit.data[index].total = item.total
})
}
}
// 公有私有统计 // 公有私有统计
const getPlatformCount = async () => { const getPlatformCount = async () => {
const colors = ['#1890FF', '#19BE6B', '#4144E3', '#ecbc1e'] const colors = ['#1890FF', '#19BE6B', '#4144E3', '#ecbc1e']
@ -181,35 +154,35 @@ export default {
} }
// 云资源统计 // 云资源统计
const getResource = async () => { const getResource = async () => {
const res = await getResourceCount(state.vendorType) const res = await getResourceCount({ type: state.vendorType, isPublic: state.isPublic })
if (res.success) { if (res.success) {
state.resourceCount = res.data state.resourceCount = res.data
} }
} }
// 云主机状态 // 云主机状态
const getHostCount = async () => { const getHostCount = async () => {
const res = await getHostStatus(state.vendorType) const res = await getHostStatus({ type: state.vendorType, isPublic: state.isPublic })
if (res.success) { if (res.success) {
state.hostCount = res.data state.hostCount = res.data
} }
} }
// 告警统计 // 告警统计
const getAlarmCount = async () => { const getAlarmCount = async () => {
const res = await getAlarmPieChart() const res = await getAlarmPieChart(state.isPublic)
if (res.success) { if (res.success) {
state.alarmCount = res.data state.alarmCount = res.data
} }
} }
// 申请趋势 // 申请趋势
const getApplyCount = async () => { const getApplyCount = async () => {
const res = await getResourceApply(state.vendorType) const res = await getResourceApply({ type: state.vendorType, isPublic: state.isPublic })
if (res.success) { if (res.success) {
state.applyTrendData = res.data state.applyTrendData = res.data
} }
} }
// 使用趋势 // 使用趋势
const getUsedCount = async () => { const getUsedCount = async () => {
const res = await getResourceTrend(state.vendorType) const res = await getResourceTrend({ type: state.vendorType, isPublic: state.isPublic })
if (res.success) { if (res.success) {
state.usedTrendData = res.data state.usedTrendData = res.data
} }
@ -219,7 +192,8 @@ export default {
const res = await getResTops({ const res = await getResTops({
vendorType: state.vendorType, vendorType: state.vendorType,
type: 'vmCpu', type: 'vmCpu',
limit: 5 limit: 5,
isPublic: state.isPublic
}) })
if (res.success) { if (res.success) {
state.cpuTop5 = res.data state.cpuTop5 = res.data
@ -230,41 +204,32 @@ export default {
const res = await getResTops({ const res = await getResTops({
vendorType: state.vendorType, vendorType: state.vendorType,
type: 'vmMem', type: 'vmMem',
limit: 5 limit: 5,
isPublic: state.isPublic
}) })
if (res.success) { if (res.success) {
state.memTop5 = res.data state.memTop5 = res.data
} }
} }
// 切换平台 // 切换平台
const change = async (type) => { const change = async type => {
state.vendorType = type state.vendorType = type
const proArr = [ const proArr = [getApplyCount(), getUsedCount(), getCpuTop5(), getMemTop5(), getHostCount(), getResource()]
getApplyCount(),
getUsedCount(),
getCpuTop5(),
getMemTop5(),
getHostCount(),
getResource()
]
await Promise.all(proArr) await Promise.all(proArr)
} }
const init = async () => { const init = async () => {
try { try {
await Promise.all([ await Promise.all([getOverviewState(), getPlatformState(), getAlarmCount(), change()])
getOverviewState(),
getUsedState(),
getPlatformState(),
getAlarmCount(),
change()
])
} catch (error) {} } catch (error) {}
state.loading = false state.loading = false
} }
const PlatformCard = ref(null)
init() init()
return { return {
...toRefs(state), ...toRefs(state),
change change,
plateformClick,
PlatformCard
} }
} }
} }
@ -296,7 +261,7 @@ export default {
height: calc(100% - 30px); height: calc(100% - 30px);
} }
} }
.resource-count ::v-deep .cell{ .resource-count ::v-deep .cell {
height: 85px; height: 85px;
} }
</style> </style>

2
vue.config.js
View File

@ -8,7 +8,7 @@ function resolve(dir) {
return path.join(__dirname, dir) return path.join(__dirname, dir)
} }
const httpType = 'https://' const httpType = 'https://'
const proxyUrl = '23.33.3.22:60006' // 代理地址设置 const proxyUrl = '10.10.33.54:60006' // 代理地址设置
// const proxyUrl = '10.20.51.92:7001' // 代理地址设置 // const proxyUrl = '10.20.51.92:7001' // 代理地址设置
const publicPath = process.env.NODE_ENV === 'production' ? '/scr-web/' : '/' const publicPath = process.env.NODE_ENV === 'production' ? '/scr-web/' : '/'