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

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

@ -5,22 +5,26 @@
<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">
<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>
<span>{{ item.title }}</span>
</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="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 v-else>
<div>{{ cell.title }}</div>
<div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
</div>
<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>
</template>
</div>
</div>
</el-col>
<!-- </dv-border-box-8> -->
@ -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;
}
}

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

@ -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 }
})
}

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

@ -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
}
}
}

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

@ -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,
// },
// ],
// },
]

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

@ -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>

2
vue.config.js
View File

@ -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/' : '/'