feat: 修改
时启龙
parent
a9313551b0
commit
6a0e381dcb
|
|
@ -1,28 +1,32 @@
|
|||
<template>
|
||||
<el-row class="stat-container">
|
||||
<!-- <dv-border-box-8 :reverse="true" style="height: 74px"> -->
|
||||
<div class="stat-border" style="top: -2px"></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;"></div>
|
||||
<el-col :span="24/configs.length" class="stat-part" v-for="item in configs" :key="item.title">
|
||||
<div class="title">
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
<span>{{item.title}}</span>
|
||||
<div class="stat-border" style="top: -2px"></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;"></div>
|
||||
<el-col :span="24 / configs.length" class="stat-part" v-for="item in configs" :key="item.title">
|
||||
<div class="title">
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
<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 class="stat-count" v-for="(cell,index) in item.data" :key="index">
|
||||
<template v-if="item.type === 'COUNT'">
|
||||
<div>{{cell.title}}</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 v-else>
|
||||
<div>{{ cell.title }}</div>
|
||||
<div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</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> -->
|
||||
</el-row>
|
||||
</template>
|
||||
|
|
@ -35,10 +39,38 @@ export default {
|
|||
type: Array,
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.hover {
|
||||
cursor: pointer;
|
||||
padding-left: 5px;
|
||||
&:hover {
|
||||
background: #161c5f;
|
||||
}
|
||||
&.active {
|
||||
background: #161c5f;
|
||||
}
|
||||
}
|
||||
.stat-container {
|
||||
position: relative;
|
||||
height: 74px;
|
||||
|
|
@ -97,7 +129,7 @@ export default {
|
|||
font-size: 28px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
span{
|
||||
span {
|
||||
max-width: 90px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,37 @@
|
|||
import request from 'utils/request'
|
||||
import { wrapperParams } from 'utils'
|
||||
|
||||
export function getOverview (type) {
|
||||
return request.get('/cos/v1/cloud/resource/overview', { params: { type } })
|
||||
import { isObject } from 'lodash-es'
|
||||
export function getOverview(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 } })
|
||||
}
|
||||
|
||||
export function getUsed (type) {
|
||||
export function getUsed(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')
|
||||
}
|
||||
|
||||
export function getPlatforms (type) {
|
||||
export function getPlatforms(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', {
|
||||
params: { action: 'pieChart' }
|
||||
params: { action: 'pieChart', isPublic }
|
||||
})
|
||||
}
|
||||
|
||||
export function getResourceApply (type) {
|
||||
return request.get('/cos/v1/cloud/resource/apply', { params: { type } })
|
||||
export function getResourceApply(type) {
|
||||
return request.get('/cos/v1/cloud/resource/apply', { params: isObject(type) ? type : { type } })
|
||||
}
|
||||
|
||||
export function getResourceTrend (type) {
|
||||
return request.get('/cos/v1/cloud/resource/trend', { params: { type } })
|
||||
export function getResourceTrend(type) {
|
||||
return request.get('/cos/v1/cloud/resource/trend', { params: isObject(type) ? type : { type } })
|
||||
}
|
||||
|
||||
// 资源利用率TOP5
|
||||
|
|
@ -41,16 +41,18 @@ export function getResTops(params) {
|
|||
})
|
||||
}
|
||||
|
||||
export function getVendorTypes() {
|
||||
return request.get('/cos/v1/cloud/resource/types')
|
||||
export function getVendorTypes(isPublic) {
|
||||
return request.get('/cos/v1/cloud/resource/types', {
|
||||
params: { action: 'pieChart', isPublic }
|
||||
})
|
||||
}
|
||||
export function getHostStatus(type) {
|
||||
return request.get('/cos/v1/cloud/resource/status', {
|
||||
params: { type }
|
||||
params: isObject(type) ? type : { type }
|
||||
})
|
||||
}
|
||||
export function getResourceCount(type) {
|
||||
return request.get('/cos/v1/cloud/resource/count', {
|
||||
params: { type }
|
||||
params: isObject(type) ? type : { type }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<div class="platform-card">
|
||||
<div class="platform-card-title">云资源</div>
|
||||
<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-content">
|
||||
<img :src="item.icon" alt="">
|
||||
<span>{{item.name}}</span>
|
||||
<img :src="item.icon" alt="" />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,9 +39,9 @@ export default {
|
|||
const state = reactive({
|
||||
list: []
|
||||
})
|
||||
let style;
|
||||
const getVendorsList = async () => {
|
||||
const res = await getVendorTypes();
|
||||
let style
|
||||
const getVendorsList = async (isPublic = null) => {
|
||||
const res = await getVendorTypes(isPublic)
|
||||
if (res.success) {
|
||||
state.list = res.data
|
||||
}
|
||||
|
|
@ -49,14 +49,15 @@ export default {
|
|||
}
|
||||
onUnmounted(() => {
|
||||
style && style.remove()
|
||||
});
|
||||
})
|
||||
getVendorsList()
|
||||
function selectPlatform(type) {
|
||||
context.emit('changePlatform', type)
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
selectPlatform
|
||||
selectPlatform,
|
||||
getVendorsList
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -131,7 +132,7 @@ export default {
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: rotateZ(-62deg);
|
||||
transform: rotateZ(-62deg);
|
||||
img {
|
||||
width: 80px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,6 @@ export const overviewConfigs = [
|
|||
icon: 'el-icon-tickets',
|
||||
type: 'COUNT',
|
||||
data: [
|
||||
{
|
||||
title: '物理机',
|
||||
className: 'lgreen',
|
||||
unit: '台',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
title: '云主机',
|
||||
className: 'green',
|
||||
|
|
@ -34,44 +28,13 @@ export const overviewConfigs = [
|
|||
className: 'lgreen',
|
||||
unit: '个',
|
||||
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,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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-col :span="8" class="left">
|
||||
<div class="card">
|
||||
|
|
@ -31,12 +31,12 @@
|
|||
<div class="card h-300">
|
||||
<div class="card-title">告警统计</div>
|
||||
<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>
|
||||
</el-col>
|
||||
<el-col :span="8" class="center">
|
||||
<PlatformCard @changePlatform="change"></PlatformCard>
|
||||
<PlatformCard @changePlatform="change" ref="PlatformCard"></PlatformCard>
|
||||
<div class="card h-300">
|
||||
<div class="card-title">云主机资源申请趋势</div>
|
||||
<div class="card-body">
|
||||
|
|
@ -69,24 +69,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from '@vue/composition-api'
|
||||
import { reactive, toRefs, ref } from '@vue/composition-api'
|
||||
import ScreenWrapper from 'components/ScreenWrapper'
|
||||
import OverviewState from 'components/OverviewState'
|
||||
import PlatformCard from './PlatformCard'
|
||||
import ResourceCount from '../count_screen/ResourceCount'
|
||||
import { overviewConfigs } from './data'
|
||||
import {
|
||||
getOverview,
|
||||
getPlatformOverview,
|
||||
getUsed,
|
||||
getPlatforms,
|
||||
getAlarmPieChart,
|
||||
getResourceApply,
|
||||
getResourceTrend,
|
||||
getResTops,
|
||||
getHostStatus,
|
||||
getResourceCount
|
||||
} from 'services/screen/resource'
|
||||
import { getOverview, getPlatformOverview, getPlatforms, getAlarmPieChart, getResourceApply, getResourceTrend, getResTops, getHostStatus, getResourceCount } from 'services/screen/resource'
|
||||
export default {
|
||||
components: {
|
||||
ScreenWrapper,
|
||||
|
|
@ -105,16 +94,24 @@ export default {
|
|||
applyTrendData: {},
|
||||
usedTrendData: {},
|
||||
vendorType: '',
|
||||
loading: true
|
||||
loading: true,
|
||||
isPublic: null
|
||||
})
|
||||
const plateformClick = isPublic => {
|
||||
state.isPublic = isPublic
|
||||
init()
|
||||
PlatformCard.value.getVendorsList(isPublic)
|
||||
}
|
||||
// 总体情况
|
||||
const getOverviewState = async () => {
|
||||
const res = await getOverview()
|
||||
const res = await getOverview({
|
||||
isPublic: state.isPublic
|
||||
})
|
||||
if (res.success) {
|
||||
// 处理数据对configs赋值
|
||||
const { hosts, servers, running } = res.data
|
||||
const { servers, running } = res.data
|
||||
const unit = state.overviewConfigs[0]
|
||||
;[hosts, servers, running].forEach((item, index) => {
|
||||
;[servers, running].forEach((item, index) => {
|
||||
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 colors = ['#1890FF', '#19BE6B', '#4144E3', '#ecbc1e']
|
||||
|
|
@ -181,35 +154,35 @@ export default {
|
|||
}
|
||||
// 云资源统计
|
||||
const getResource = async () => {
|
||||
const res = await getResourceCount(state.vendorType)
|
||||
const res = await getResourceCount({ type: state.vendorType, isPublic: state.isPublic })
|
||||
if (res.success) {
|
||||
state.resourceCount = res.data
|
||||
}
|
||||
}
|
||||
// 云主机状态
|
||||
const getHostCount = async () => {
|
||||
const res = await getHostStatus(state.vendorType)
|
||||
const res = await getHostStatus({ type: state.vendorType, isPublic: state.isPublic })
|
||||
if (res.success) {
|
||||
state.hostCount = res.data
|
||||
}
|
||||
}
|
||||
// 告警统计
|
||||
const getAlarmCount = async () => {
|
||||
const res = await getAlarmPieChart()
|
||||
const res = await getAlarmPieChart(state.isPublic)
|
||||
if (res.success) {
|
||||
state.alarmCount = res.data
|
||||
}
|
||||
}
|
||||
// 申请趋势
|
||||
const getApplyCount = async () => {
|
||||
const res = await getResourceApply(state.vendorType)
|
||||
const res = await getResourceApply({ type: state.vendorType, isPublic: state.isPublic })
|
||||
if (res.success) {
|
||||
state.applyTrendData = res.data
|
||||
}
|
||||
}
|
||||
// 使用趋势
|
||||
const getUsedCount = async () => {
|
||||
const res = await getResourceTrend(state.vendorType)
|
||||
const res = await getResourceTrend({ type: state.vendorType, isPublic: state.isPublic })
|
||||
if (res.success) {
|
||||
state.usedTrendData = res.data
|
||||
}
|
||||
|
|
@ -219,7 +192,8 @@ export default {
|
|||
const res = await getResTops({
|
||||
vendorType: state.vendorType,
|
||||
type: 'vmCpu',
|
||||
limit: 5
|
||||
limit: 5,
|
||||
isPublic: state.isPublic
|
||||
})
|
||||
if (res.success) {
|
||||
state.cpuTop5 = res.data
|
||||
|
|
@ -230,41 +204,32 @@ export default {
|
|||
const res = await getResTops({
|
||||
vendorType: state.vendorType,
|
||||
type: 'vmMem',
|
||||
limit: 5
|
||||
limit: 5,
|
||||
isPublic: state.isPublic
|
||||
})
|
||||
if (res.success) {
|
||||
state.memTop5 = res.data
|
||||
}
|
||||
}
|
||||
// 切换平台
|
||||
const change = async (type) => {
|
||||
const change = async type => {
|
||||
state.vendorType = type
|
||||
const proArr = [
|
||||
getApplyCount(),
|
||||
getUsedCount(),
|
||||
getCpuTop5(),
|
||||
getMemTop5(),
|
||||
getHostCount(),
|
||||
getResource()
|
||||
]
|
||||
const proArr = [getApplyCount(), getUsedCount(), getCpuTop5(), getMemTop5(), getHostCount(), getResource()]
|
||||
await Promise.all(proArr)
|
||||
}
|
||||
const init = async () => {
|
||||
try {
|
||||
await Promise.all([
|
||||
getOverviewState(),
|
||||
getUsedState(),
|
||||
getPlatformState(),
|
||||
getAlarmCount(),
|
||||
change()
|
||||
])
|
||||
await Promise.all([getOverviewState(), getPlatformState(), getAlarmCount(), change()])
|
||||
} catch (error) {}
|
||||
state.loading = false
|
||||
}
|
||||
const PlatformCard = ref(null)
|
||||
init()
|
||||
return {
|
||||
...toRefs(state),
|
||||
change
|
||||
change,
|
||||
plateformClick,
|
||||
PlatformCard
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -296,7 +261,7 @@ export default {
|
|||
height: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
.resource-count ::v-deep .cell{
|
||||
.resource-count ::v-deep .cell {
|
||||
height: 85px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ function resolve(dir) {
|
|||
return path.join(__dirname, dir)
|
||||
}
|
||||
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 publicPath = process.env.NODE_ENV === 'production' ? '/scr-web/' : '/'
|
||||
|
|
|
|||
Loading…
Reference in New Issue