joint-cloud
/
joint-cloud-computing
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

任务与资源调度子系统 

Signed-off-by: gaohuanbo <13083643+gaohuanbo@user.noreply.gitee.com>
This commit is contained in:
gaohuanbo 2023-07-28 03:40:21 +00:00 committed by Gitee
parent d78dcdd257
commit 939ee40433
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
4 changed files with 1522 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
task-and-resource-scheduling-subsystem/api/testApi.js Normal file
View File

@ -0,0 +1,202 @@
import request from '@/utils/request'
const testApi = {
getUsageHostInfo: getUsageHostInfo,
getTaskAllocationChartData: getTaskAllocationChartData,
getExpenseLists: getExpenseLists,
chooseSet: chooseSet,
getHostNums: getHostNums,
getGailanInfo: getGailanInfo,
getAbnormalDataList: getAbnormalDataList,
getManufacturerChartData: getManufacturerChartData,
getCpuChartData: getCpuChartData,
getDiskChartData: getDiskChartData,
getMemoryChartData: getMemoryChartData,
getPerformanceChartData: getPerformanceChartData,
getLineChartByOrgName: getLineChartByOrgName,
getAlarmTableData: getAlarmTableData,
getAbnormalInfoList: getAbnormalInfoList,
getEventResponseChartData: getEventResponseChartData,
getIllegalInfoList: getIllegalInfoList,
getIllegalPublicityChartData: getIllegalPublicityChartData,
getTransactionInfoList: getTransactionInfoList,
getSupplierList: getSupplierList,
getSupplierInfoById: getSupplierInfoById,
searchHostInfoById: searchHostInfoById,
getHostChartsById: getHostChartsById
}
// kt2/taskAllocation
function getUsageHostInfo() {
return request({
url: `/cloud/v1.0/kt2/taskAllocation/getUsageHostInfo`,
method: 'get'
})
}
function getTaskAllocationChartData() {
return request({
url: `/cloud/v1.0/kt2/taskAllocation/getTaskAllocationChartData`,
method: 'get'
})
}
function getExpenseLists() {
return request({
url: `/cloud/v1.0/kt2/taskAllocation/getExpenseLists`,
method: 'get'
})
}
function chooseSet(data) {
return request({
url: `/cloud/v1.0/kt2/taskAllocation/chooseSet`,
data: data,
method: 'post'
})
}
// kt3/screen
function getHostNums() {
return request({
url: `/cloud/v1.0/kt3/screen/getHostNums`,
method: 'get'
})
}
function getGailanInfo() {
return request({
url: `/cloud/v1.0/kt3/screen/getGailanInfo`,
method: 'get'
})
}
function getManufacturerChartData() {
return request({
url: `/cloud/v1.0/kt3/screen/getManufacturerChartData`,
method: 'get'
})
}
function getCpuChartData(params) {
return request({
url: `/cloud/v1.0/kt3/screen/getCpuChartData`,
method: 'get',
params: params
})
}
function getDiskChartData(params) {
return request({
url: `/cloud/v1.0/kt3/screen/getDiskChartData`,
method: 'get',
params: params
})
}
function getMemoryChartData(params) {
return request({
url: `/cloud/v1.0/kt3/screen/getMemoryChartData`,
method: 'get',
params: params
})
}
function getPerformanceChartData(params) {
return request({
url: `/cloud/v1.0/kt3/screen/getPerformanceChartData`,
method: 'get',
params: params
})
}
function getLineChartByOrgName(params) {
return request({
url: `/cloud/v1.0/kt3/screen/getLineChartByOrgName`,
method: 'get',
params: params
})
}
function getAlarmTableData(params) {
return request({
url: `/cloud/v1.0/kt3/screen/getAlarmTableData`,
method: 'get',
params: params
})
}
function getAbnormalDataList() {
return request({
url: `/cloud/v1.0/kt3/screen/getAbnormalDataList`,
method: 'get'
})
}
// kt3/eventResponse
function getAbnormalInfoList() {
return request({
url: `/cloud/v1.0/kt3/eventResponse/getAbnormalInfoList`,
method: 'get'
})
}
function getEventResponseChartData() {
return request({
url: `/cloud/v1.0/kt3/eventResponse/getEventResponseChartData`,
method: 'get'
})
}
// kt3/illegalPublicity
function getIllegalInfoList() {
return request({
url: `/cloud/v1.0/kt3/illegalPublicity/getIllegalInfoList`,
method: 'get'
})
}
function getIllegalPublicityChartData() {
return request({
url: `/cloud/v1.0/kt3/illegalPublicity/getIllegalPublicityChartData`,
method: 'get'
})
}
// kt3/supplierManagement
function getTransactionInfoList() {
return request({
url: `/cloud/v1.0/kt3/supplierManagement/getTransactionInfoList`,
method: 'get'
})
}
function getSupplierList() {
return request({
url: `/cloud/v1.0/kt3/supplierManagement/getSupplierList`,
method: 'get'
})
}
function getSupplierInfoById(params) {
return request({
url: `/cloud/v1.0/kt3/supplierManagement/getSupplierInfoById`,
method: 'get',
params: params
})
}
// kt3/hostPerformance
function searchHostInfoById(params) {
return request({
url: `/cloud/v1.0/kt3/hostPerformance/searchHostInfoById`,
method: 'get',
params: params
})
}
function getHostChartsById(params) {
return request({
url: `/cloud/v1.0/kt3/hostPerformance/searchHostInfoById`,
method: 'get',
params: params
})
}
export default testApi

235
task-and-resource-scheduling-subsystem/views/taskAllocation/css/taskAllocation.scss Normal file
View File

@ -0,0 +1,235 @@
#taskAllocation {
.top_row_button{
margin-top:1.8vh;
}
#top-row-button-box {
.el-button--primary {
background-color: #1890ff1f
}
}
.top_row_text{
color: #FFFFFF;
margin-top:1.8vh;
}
.title_row {
display: flex;
display: -webkit-flex;
justify-content: center;
}
.title_box {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.title_box_text {
font-family: 'Alternate';
font-size: 30px;
color: white;
}
.title_box_hr {
border-bottom: 2px solid;
opacity: 0.2;
color: white;
width: 120%;
margin-top: 2%;
margin-left: -10%;
}
.el-card {
border-radius: 4px;
border: 1px solid #ffffff;
background-color: rgba(255, 255, 255, 0);
}
.el-card__header {
padding: 3px 10px;
border-bottom: 1px solid #EBEEF5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 4vh;
}
.el-card__body, .el-main {
padding: 5px;
}
.el-card__body{
padding: 5px;
height: 20vh;
}
.card1{
height:30vh;
margin: 20px 20px 20px 20px;
padding: 10px 20px 0 20px;
}
.card2{
height:30vh;
margin: 20px 20px 20px 20px;
padding: 10px 20px 0 20px;
}
.card3{
height:26vh;
margin: 20px 20px 20px 20px;
padding: 10px 20px 0 20px;
}
.card3-box{
display: flex;
display: -webkit-flex;
height:25vh;
}
.chart_box {
width: 90%;
margin-left: 10%;
}
.tableBox {
width: 100%;
overflow: hidden
}
.tableInner {
height: auto;
}
.card1-inner{
height:24vh;
padding-bottom:80px;
color: #FFFFFF;
}
.card1_inner_row{
height:5vh;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.card1_inner_num {
font-family: 'Alternate';
color: #FFFFFF;
letter-spacing: 0;
text-shadow: 0 0 6px #26A2FF;
font-size: 11pt;
}
.card1_inner_img {
margin-top:-2px;
height: 25px;
width: 25px;
}
.card2-inner{
height:25vh;
padding-bottom:80px;
color: #FFFFFF;
flex-wrap: wrap;
margin-top: -1vh;
}
.card-chart-box{
width: 103%;
margin-top: -5vh;
margin-left: 2%;
}
.card3-inner-box{
height:100%;
padding-bottom:80px;
color: #FFFFFF;
width: 23.8%;
flex-shrink: 0;
margin-right: 1.8%;
}
.card3-inner{
height:19vh;
color: #FFFFFF;
width: 100%;
}
.card3_inner_img {
margin-top:-2px;
height: 20px;
width: 20px;
}
.card3_detail_box{
margin-left: 20px;
overflow: auto;
height:13vh
}
.el-dialog {
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.el-dialog > .el-dialog__body {
padding: 0px;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
background-color: rgba(0, 0, 0, 0.3);
color: white;
margin: 0 0 0 0;
}
.el-dialog__title {
color: #FFFFFF;
}
.el-dialog__header {
border-top: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
}
.el-dialog__footer {
border-bottom: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
}
.top_button_box {
margin-top: 1%;
margin-left: auto;
display: flex;
display: -webkit-flex;
align-items: center;
}
.title_class {
font-family: 'Alternate';
font-weight: bold;
font-size: 11pt;
color: white;
}
.el-descriptions {
background: rgba(255, 255, 255, 0);
margin-left: 3%;
}
.el-descriptions__body {
color: #ffffff;
background-color: rgba(255, 255, 255, 0);
}
.el-descriptions__title {
color: white;
font-size: 11pt;
}
el-descriptions-item el-descriptions-item__cell {
height: 15px;
}
}

383
task-and-resource-scheduling-subsystem/views/taskAllocation/index.vue Normal file
View File

@ -0,0 +1,383 @@
<template>
<div id="taskAllocation" >
<!--右上角按钮-->
<div style='position:absolute;right:55px;top:12.5%;z-index: 99'>
<div class='top_button_box'>
<i style="margin-left:5px;color: white;font-size: 30px;opacity: 0.5;z-index: 98" @click="fullScreen" class="el-icon-full-screen"></i>
</div>
</div>
<div id="entirety" style="background-image: url('/static/background/background.png');padding: 10px">
<!--标题行-->
<el-row :gutter="30">
<el-col :span='8'>
<div id= "top-row-button-box" style='margin-left: 30px'>
<el-button type="primary" size="small" class='top_row_button' @click='upDateResults'>预测结果更新</el-button>
<el-button type="primary" size="small" class='top_row_button'>资源调度更新</el-button>
<el-button type="primary" size="small" class='top_row_button'>任务分配更新</el-button>
</div>
</el-col>
<el-col :span='8'>
<div class="title_row">
<div class='title_box'>
<div class="title_box_text">
任务分配与资源调度平台
</div>
<div class="title_box_hr"></div>
</div>
</div>
</el-col>
<el-col :span='8' >
<div class='top_row_text' style='float: right;margin-right: 80px'>
<span>滚动播放：</span>
<el-radio-group v-model="scrollValue" size="small" @change='scrollChange'>
<el-radio-button label="开"></el-radio-button>
<el-radio-button label="关"></el-radio-button>
</el-radio-group>
</div>
</el-col>
</el-row>
<!-- card1 -->
<el-card class="card1">
<div class="title_class" style='margin-top: -5px'>当前资源使用情况</div>
<el-row :gutter="20">
<el-col :span="6">
<el-card class='card1-inner'>
<div slot="header" class="clearfix">
<span>CPU使用率</span>
</div>
<div class="tableInnerCpu">
<div v-for="item in usageDataList" :key="item.id" class="card1_inner_row">
<el-row style="width:80%;margin-left: 15%">
<el-col :span='12'>
<img class="card1_inner_img" :src='item.icon'>
<span class="card1_inner_num" style='margin-left:5%'>{{item.label}}: </span>
</el-col>
<el-col :span='12'>
<span class="card1_inner_num" >{{item.cpuUsage}}</span>
<span class="card1_inner_num">/ </span>
<span class="card1_inner_num" style="color:#87CEFA;"> {{item.cpuTotal }}</span>
</el-col>
</el-row>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class='card1-inner'>
<div slot="header" class="clearfix">
<span>内存使用率</span>
</div>
<div class="tableInnerMemory">
<div v-for="item in usageDataList" :key="item.id" class="card1_inner_row">
<el-row style="width:80%;margin-left: 10%">
<el-col :span='12'>
<img class="card1_inner_img" :src='item.icon'>
<span class="card1_inner_num" style='margin-left:5%;'>{{item.label}}: </span>
</el-col>
<el-col :span='12'>
<span class="card1_inner_num" >{{item.memoryUsage}}</span>
<span class="card1_inner_num" >/ </span>
<span class="card1_inner_num" style="color:#87CEFA;"> {{item.memoryTotal }}</span>
</el-col>
</el-row>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class='card1-inner'>
<div slot="header" class="clearfix">
<span>带宽使用率</span>
</div>
<div class="tableInnerBandWidth">
<div v-for="item in usageDataList" :key="item.id" class="card1_inner_row">
<el-row style="width:90%;margin-left: 5%">
<el-col :span='10'>
<img class="card1_inner_img" :src='item.icon'>
<span class="card1_inner_num" style='margin-left:5%;'>{{item.label}}: </span>
</el-col>
<el-col :span='14'>
<span class="card1_inner_num" >{{item.bandWidthUsage}}</span>
<span class="card1_inner_num" >/ </span>
<span class="card1_inner_num" style="color:#87CEFA;"> {{item.bandWidthTotal }}</span>
</el-col>
</el-row>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class='card1-inner'>
<div slot="header" class="clearfix">
<span>存储使用率</span>
</div>
<div class="tableInnerDisk">
<div v-for="item in usageDataList" :key="item.id" class="card1_inner_row">
<el-row style="width:80%;margin-left: 10%">
<el-col :span='12'>
<img class="card1_inner_img" :src='item.icon'>
<span class="card1_inner_num" style='margin-left:5%;'>{{item.label}}: </span>
</el-col>
<el-col :span='12'>
<span class="card1_inner_num" >{{item.diskUsage}}</span>
<span class="card1_inner_num" >/ </span>
<span class="card1_inner_num" style="color:#87CEFA;"> {{item.diskTotal }}</span>
</el-col>
</el-row>
</div>
</div>
</el-card>
</el-col>
</el-row>
</el-card>
<el-card class="card2">
<div class="title_class" style='margin-top: -5px'>云际平台未来费用预测</div>
<el-row :gutter="20">
<el-col :span="6">
<div id="chart_real" style="height: 29vh;"></div>
</el-col>
<el-col :span="6">
<el-card class='card2-inner'>
<div slot="header" class="clearfix">
<span>短期套餐</span>
<el-button style="float: right; padding: 3px 0" type="text" @click='openDetailDialog(`shortTerm`)'>详情</el-button>
<el-button style="float: right; padding: 3px 0;margin-right: 10px" type="text" :disabled='chooseBtnFlag' @click='chooseSet(`shortTerm`)'>选择</el-button>
</div>
<div style='text-align: center;margin-top: 1vh'>
<span class='card1_inner_num'>总费用</span>
<span class='card1_inner_num'>${{expenseLists.shortTermExpenseDetail.totalExpense}}</span>
</div>
<div class='card-chart-box'>
<div id='short_term_chart' style="height: 24vh"> </div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class='card2-inner'>
<div slot="header" class="clearfix">
<span>中期套餐</span>
<el-button style="float: right; padding: 3px 0" type="text" @click='openDetailDialog(`mediumTerm`)'>详情</el-button>
<el-button style="float: right; padding: 3px 0;margin-right: 10px" type="text" :disabled='chooseBtnFlag' @click='chooseSet(`mediumTerm`)'>选择</el-button>
</div>
<div style="text-align: center;margin-top: 1vh">
<span class='card1_inner_num'>总费用</span>
<span class='card1_inner_num'>${{expenseLists.mediumTermExpenseDetail.totalExpense}}</span>
</div>
<div class='card-chart-box'>
<div id='medium_term_chart' style="height: 24vh"> </div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class='card2-inner'>
<div slot="header" class="clearfix">
<span>长期套餐</span>
<el-button style="float: right; padding: 3px 0" type="text" @click='openDetailDialog(`longTerm`)'>详情</el-button>
<el-button style="float: right; padding: 3px 0;margin-right: 10px" type="text" :disabled='chooseBtnFlag' @click='chooseSet(`longTerm`)'>选择</el-button>
</div>
<div style='text-align: center;margin-top: 1vh'>
<span class='card1_inner_num'>总费用</span>
<span class='card1_inner_num'>${{expenseLists.longTermExpenseDetail.totalExpense}}</span>
</div>
<div class='card-chart-box'>
<div id='long_term_chart' style="height: 24vh"> </div>
</div>
</el-card>
</el-col>
</el-row>
</el-card>
<el-card class="card3">
<div class="title_class" style='margin-top: -5px'>资源调度及任务分配结果</div>
<div class='card3-box'>
<div v-for="item in usageDataList" :key="item.id" class='card3-inner-box' >
<el-card class='card3-inner' >
<div slot="header" class="clearfix">
<img class="card3_inner_img" :src='item.icon'>
<span>{{ item.label }}</span>
</div>
<div v-if='item.showAll'>
<el-row style="width:90%;margin-left: 10%;margin-top: 2%">
<el-col :span='6'>
<span class="card1_inner_num" style='margin-left:5%;'>cpu: </span>
</el-col>
<el-col :span='12'>
<span class="card1_inner_num" style="color:#87CEFA;"> {{item.cpuTotal }}</span>
</el-col>
<el-col :span='6'>
<el-button style="padding: 3px 0" type="text" @click='showCpuDetail(item)'>详情</el-button>
</el-col>
</el-row>
<el-row style="width:90%;margin-left: 10%">
<el-col :span='6'>
<span class="card1_inner_num" style='margin-left:5%;'>内存: </span>
</el-col>
<el-col :span='12'>
<span class="card1_inner_num" style="color:#87CEFA;"> {{item.memoryTotal }}</span>
</el-col>
<el-col :span='6'>
<el-button style="padding: 3px 0" type="text" @click='showMemoryDetail(item)'>详情</el-button>
</el-col>
</el-row>
<el-row style="width:90%;margin-left: 10%">
<el-col :span='6'>
<span class="card1_inner_num" style='margin-left:5%;'>带宽: </span>
</el-col>
<el-col :span='12'>
<span class="card1_inner_num" style="color:#87CEFA;"> {{item.bandWidthTotal }}</span>
</el-col>
<el-col :span='6'>
<el-button style="padding: 3px 0" type="text" @click='showBandWidthDetail(item)'>详情</el-button>
</el-col>
</el-row>
<el-row style="width:90%;margin-left: 10%">
<el-col :span='6'>
<span class="card1_inner_num" style='margin-left:5%;'>存储: </span>
</el-col>
<el-col :span='12'>
<span class="card1_inner_num" style="color:#87CEFA;"> {{item.diskTotal }}</span>
</el-col>
<el-col :span='6'>
<el-button style="padding: 3px 0" type="text" @click='showDiskDetail(item)'>详情</el-button>
</el-col>
</el-row>
</div>
<div v-if='item.showCpuDetail' class="card3_detail_box">
<el-row class="card1_inner_num" style='margin-top: 2%'>
<el-col :span='12'>
<span>CPU</span>
</el-col>
<el-col :span='12'>
<el-button style="padding: 3px 0" type="text" @click='quitDetail(item)'>退出详情</el-button>
</el-col>
</el-row>
<div v-for="detailItem in item.cpuList" :key="detailItem" class="card1_inner_num">
<span> {{detailItem.num}}</span>
<span> vCPU</span>
<span> {{detailItem.detail}}</span>
</div>
</div>
<div v-if='item.showMemoryDetail' class="card3_detail_box">
<el-row class="card1_inner_num" style='margin-top: 2%'>
<el-col :span='12'>
<span>内存</span>
</el-col>
<el-col :span='12'>
<el-button style="padding: 3px 0" type="text" @click='quitDetail(item)'>退出详情</el-button>
</el-col>
</el-row>
<div v-for="detailItem in item.memoryList" :key="detailItem" class="card1_inner_num" >
<span> {{detailItem.num}}</span>
<span style='margin-left: 10%'> {{detailItem.detail}}</span>
</div>
</div>
<div v-if='item.showBandWidthDetail' class="card3_detail_box">
<el-row class="card1_inner_num" style='margin-top: 2%'>
<el-col :span='12'>
<span>带宽</span>
</el-col>
<el-col :span='12'>
<el-button style="padding: 3px 0" type="text" @click='quitDetail(item)'>退出详情</el-button>
</el-col>
</el-row>
<div v-for="detailItem in item.bandWidthList" :key="detailItem" >{{detail}}</div>
</div>
<div v-if='item.showDiskDetail' class="card3_detail_box">
<el-row class="card1_inner_num" style='margin-top: 2%'>
<el-col :span='12'>
<span>存储</span>
</el-col>
<el-col :span='12'>
<el-button style="padding: 3px 0" type="text" @click='quitDetail(item)'>退出详情</el-button>
</el-col>
</el-row>
<div v-for="detailItem in item.diskList" :key="detailItem" class="card1_inner_num">
<span> {{detailItem.num}}</span>
<span> {{detailItem.detail}}</span>
</div>
</div>
</el-card>
</div>
</div>
</el-card>
<!--折线图详情-->
<el-dialog
title="详情"
:visible.sync="chartDialogVisible"
width="40%"
>
<el-descriptions title="对象存储">
<el-descriptions-item label="存储量">{{expenseInDialog.objectStorage.storageCapacity}}</el-descriptions-item>
<el-descriptions-item label="存储时长">{{expenseInDialog.objectStorage.storageDuration}}h</el-descriptions-item>
<el-descriptions-item label="单价">{{expenseInDialog.objectStorage.unitPrice}}</el-descriptions-item>
<el-descriptions-item label="总费用">{{expenseInDialog.objectStorage.cost}}</el-descriptions-item>
</el-descriptions>
<el-divider></el-divider>
<el-descriptions title="数据传输">
<el-descriptions-item label="传输量">{{expenseInDialog.dataTransfer.transferCapacity}}</el-descriptions-item>
<el-descriptions-item label="单价">{{expenseInDialog.dataTransfer.unitPrice}}</el-descriptions-item>
<el-descriptions-item label="总费用">{{expenseInDialog.dataTransfer.cost}}</el-descriptions-item>
</el-descriptions>
<el-divider></el-divider>
<el-descriptions title=" 数据库服务">
<el-descriptions-item label="数据库类型">{{expenseInDialog.databaseService.databaseType}}</el-descriptions-item>
<el-descriptions-item label="存储量">{{expenseInDialog.databaseService.storageCapacity}}</el-descriptions-item>
<el-descriptions-item label="使用时长">{{expenseInDialog.databaseService.duration}}h</el-descriptions-item>
<el-descriptions-item label="单价">{{expenseInDialog.databaseService.unitPrice}}</el-descriptions-item>
<el-descriptions-item label="总费用">{{expenseInDialog.databaseService.cost}}</el-descriptions-item>
</el-descriptions>
<el-divider></el-divider>
<el-descriptions title=" 负载均衡">
<el-descriptions-item label="实例数">{{expenseInDialog.loadBalancer.instancesNum}}</el-descriptions-item>
<el-descriptions-item label="使用时长">{{expenseInDialog.loadBalancer.duration}}h</el-descriptions-item>
<el-descriptions-item label="单价">{{expenseInDialog.loadBalancer.unitPrice}}/h/实例</el-descriptions-item>
<el-descriptions-item label="总费用">{{expenseInDialog.loadBalancer.cost}}</el-descriptions-item>
</el-descriptions>
<el-divider></el-divider>
<el-descriptions title=" 总费用">
<el-descriptions-item label="对象存储">{{expenseInDialog.objectStorage.cost}}</el-descriptions-item>
<el-descriptions-item label="数据传输">{{expenseInDialog.dataTransfer.cost}}</el-descriptions-item>
<el-descriptions-item label="数据库服务">{{expenseInDialog.databaseService.cost}}</el-descriptions-item>
<el-descriptions-item label="负载均衡">{{expenseInDialog.loadBalancer.cost}}</el-descriptions-item>
<el-descriptions-item label="总计">{{expenseInDialog.totalExpense}}</el-descriptions-item>
</el-descriptions>
<el-divider></el-divider>
<div id='chartInDialog' style='margin:0px 20px 0px 20px;height: 30vh;width:80%'></div>
<span slot="footer" class="dialog-footer">
</span>
</el-dialog>
</div>
</div>
</template>
<script src='./js/index.js'>
</script>
<style lang="scss">
@font-face {
font-family: 'Alternate';
//src: url('../../assets/iconfont/Alternate.ttf');
font-style: normal;
font-width: normal;
}
@import './css/taskAllocation.scss';
</style>

702
task-and-resource-scheduling-subsystem/views/taskAllocation/js/index.js Normal file
View File

@ -0,0 +1,702 @@
import echarts from 'echarts'
import $ from 'jQuery'
import testApi from '@/api/testApi'
export default {
name: 'businessScreen',
data() {
return {
scrollValue: '开',
intervalCpu: '',
intervalMemory: '',
intervalDisk: '',
intervalBandWidth: '',
intervalDispatch: '',
// 第一个card
usageDataList: [],
usageDataList1: [], // 没用
// 第二个card
chartDialogVisible: false,
chooseBtnFlag: false,
recentExpense: [],
shortTermExpense: [],
longTermExpense: [],
mediumTermExpense: [],
chartShortOption: '',
chartMediumOption: '',
chartLongOption: '',
expenseLists: {},
expenseInDialog: {}
}
},
created() {
},
beforeDestroy() {
if (this.intervalCpu !== '') {
clearInterval(this.intervalCpu)
}
if (this.intervalMemory !== '') {
clearInterval(this.intervalMemory)
}
if (this.intervalBandWidth !== '') {
clearInterval(this.intervalBandWidth)
}
if (this.intervalDisk !== '') {
clearInterval(this.intervalDisk)
}
if (this.intervalDispatch !== '') {
clearInterval(this.intervalDispatch)
}
},
async mounted() {
await this.getUsageHostInfo()
await this.upDateResults()
this.scrollChange()
},
methods: {
async upDateResults() {
const self = this
this.getCharts()
await this.getExpenseLists()
this.chooseBtnFlag = false
setTimeout(function() {
self.chooseBtnFlag = true
}, 10000)
},
async getUsageHostInfo() {
await testApi.getUsageHostInfo().then((res) => {
this.usageDataList = res.data
}).catch(() => {
this.usageDataList = [
{ id: 0, label: '阿里云', icon: '/static/hostPerformance/阿里云.png', cpuUsage: '4', cpuTotal: '10', memoryUsage: '4GB', memoryTotal: '116GB', diskUsage: '1TB', diskTotal: '10TB', bandWidthUsage: '2Mbps', bandWidthTotal: '10Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 2, detail: '2.5GHz' }, { num: 4, detail: '3GHz' }, { num: 4, detail: '3.6GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '8TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] },
{ id: 1, label: '华为云', icon: '/static/hostPerformance/华为云.png', cpuUsage: '2', cpuTotal: '10', memoryUsage: '4GB', memoryTotal: '48GB', diskUsage: '8TB', diskTotal: '15TB', bandWidthUsage: '20Mbps', bandWidthTotal: '50Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 4, detail: '2.5GHz' }, { num: 2, detail: '3GHz' }, { num: 4, detail: '3.6GHz' }],
memoryList: [{ num: 4, detail: '8GB RAM' }, { num: 2, detail: '4GB RAM' }, { num: 4, detail: '2GB RAM' }],
diskList: [{ num: '10TB', detail: 'SSD' }, { num: '5TB', detail: 'HDD' }] },
{ id: 2, label: '联通云', icon: '/static/hostPerformance/联通云.png', cpuUsage: '3', cpuTotal: '10', memoryUsage: '8GB', memoryTotal: '48GB', diskUsage: '5TB', diskTotal: '8TB', bandWidthUsage: '60Mbps', bandWidthTotal: '100Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 6, detail: '2.5GHz' }, { num: 4, detail: '3GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '6TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] },
{ id: 3, label: '火山云', icon: '/static/hostPerformance/火山云.png', cpuUsage: '5', cpuTotal: '10', memoryUsage: '16GB', memoryTotal: '116GB', diskUsage: '4TB', diskTotal: '20TB', bandWidthUsage: '10Mbps', bandWidthTotal: '100Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 2, detail: '2.5GHz' }, { num: 2, detail: '3GHz' }, { num: 6, detail: '3.7GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '16TB', detail: 'SSD' }, { num: '4TB', detail: 'HDD' }] },
{ id: 4, label: 'test1', icon: '/static/hostPerformance/火山云.png', cpuUsage: '4', cpuTotal: '10', memoryUsage: '16GB', memoryTotal: '128GB', diskUsage: '3TB', diskTotal: '10TB', bandWidthUsage: '40Mbps', bandWidthTotal: '200Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 4, detail: '2.4GHz' }, { num: 4, detail: '3GHz' }, { num: 2, detail: '3.7GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '8TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] },
{ id: 5, label: 'test2', icon: '/static/hostPerformance/火山云.png', cpuUsage: '2', cpuTotal: '10', memoryUsage: '16GB', memoryTotal: '128GB', diskUsage: '4.5TB', diskTotal: '10TB', bandWidthUsage: '20Mbps', bandWidthTotal: '100Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 2, detail: '2.5GHz' }, { num: 4, detail: '3GHz' }, { num: 4, detail: '3.6GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '8TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] },
{ id: 6, label: 'test3', icon: '/static/hostPerformance/火山云.png', cpuUsage: '5', cpuTotal: '10', memoryUsage: '12GB', memoryTotal: '128GB', diskUsage: '2.5TB', diskTotal: '10TB', bandWidthUsage: '20Mbps', bandWidthTotal: '100Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 2, detail: '2.5GHz' }, { num: 4, detail: '3GHz' }, { num: 4, detail: '3.6GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '8TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] },
{ id: 7, label: 'test4', icon: '/static/hostPerformance/火山云.png', cpuUsage: '4', cpuTotal: '10', memoryUsage: '16GB', memoryTotal: '128GB', diskUsage: '1TB', diskTotal: '10TB', bandWidthUsage: '20Mbps', bandWidthTotal: '100Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 2, detail: '2.5GHz' }, { num: 4, detail: '3GHz' }, { num: 4, detail: '3.6GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '8TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] }
]
this.usageDataList1 = [{ id: 0, label: '阿里云', icon: '/static/hostPerformance/阿里云.png', cpuUsage: '4', cpuTotal: '15', memoryUsage: '4GB', memoryTotal: '48GB', diskUsage: '1TB', diskTotal: '15TB', bandWidthUsage: '2Mbps', bandWidthTotal: '20Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 2, detail: '2.5GHz' }, { num: 4, detail: '3GHz' }, { num: 4, detail: '3.6GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '8TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] },
{ id: 1, label: '华为云', icon: '/static/hostPerformance/华为云.png', cpuUsage: '2', cpuTotal: '8', memoryUsage: '4GB', memoryTotal: '112GB', diskUsage: '8TB', diskTotal: '10TB', bandWidthUsage: '20Mbps', bandWidthTotal: '20Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 4, detail: '2.5GHz' }, { num: 2, detail: '3GHz' }, { num: 4, detail: '3.6GHz' }],
memoryList: [{ num: 4, detail: '8GB RAM' }, { num: 2, detail: '4GB RAM' }, { num: 4, detail: '2GB RAM' }],
diskList: [{ num: '10TB', detail: 'SSD' }, { num: '5TB', detail: 'HDD' }] },
{ id: 2, label: '联通云', icon: '/static/hostPerformance/联通云.png', cpuUsage: '3', cpuTotal: '15', memoryUsage: '8GB', memoryTotal: '128GB', diskUsage: '5TB', diskTotal: '10TB', bandWidthUsage: '60Mbps', bandWidthTotal: '200Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 6, detail: '2.5GHz' }, { num: 4, detail: '3GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '6TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] },
{ id: 3, label: '火山云', icon: '/static/hostPerformance/火山云.png', cpuUsage: '5', cpuTotal: '8', memoryUsage: '16GB', memoryTotal: '116GB', diskUsage: '4TB', diskTotal: '8TB', bandWidthUsage: '10Mbps', bandWidthTotal: '50Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 2, detail: '2.5GHz' }, { num: 2, detail: '3GHz' }, { num: 6, detail: '3.7GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '16TB', detail: 'SSD' }, { num: '4TB', detail: 'HDD' }] },
{ id: 4, label: 'test1', icon: '/static/hostPerformance/火山云.png', cpuUsage: '4', cpuTotal: '10', memoryUsage: '16GB', memoryTotal: '128GB', diskUsage: '3TB', diskTotal: '15TB', bandWidthUsage: '40Mbps', bandWidthTotal: '200Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 4, detail: '2.4GHz' }, { num: 4, detail: '3GHz' }, { num: 2, detail: '3.7GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '8TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] },
{ id: 5, label: 'test2', icon: '/static/hostPerformance/火山云.png', cpuUsage: '2', cpuTotal: '10', memoryUsage: '16GB', memoryTotal: '128GB', diskUsage: '4.5TB', diskTotal: '10TB', bandWidthUsage: '20Mbps', bandWidthTotal: '100Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 2, detail: '2.5GHz' }, { num: 4, detail: '3GHz' }, { num: 4, detail: '3.6GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '8TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] },
{ id: 6, label: 'test3', icon: '/static/hostPerformance/火山云.png', cpuUsage: '5', cpuTotal: '10', memoryUsage: '12GB', memoryTotal: '128GB', diskUsage: '2.5TB', diskTotal: '10TB', bandWidthUsage: '20Mbps', bandWidthTotal: '100Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 2, detail: '2.5GHz' }, { num: 4, detail: '3GHz' }, { num: 4, detail: '3.6GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '8TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] },
{ id: 7, label: 'test4', icon: '/static/hostPerformance/火山云.png', cpuUsage: '4', cpuTotal: '10', memoryUsage: '16GB', memoryTotal: '128GB', diskUsage: '1TB', diskTotal: '10TB', bandWidthUsage: '20Mbps', bandWidthTotal: '100Mbps',
showAll: true, showCpuDetail: false, showMemoryDetail: false, showBandWidthDetail: false, showDiskDetail: false,
cpuList: [{ num: 2, detail: '2.5GHz' }, { num: 4, detail: '3GHz' }, { num: 4, detail: '3.6GHz' }],
memoryList: [{ num: 1, detail: '64GB RAM' }, { num: 10, detail: '2GB RAM' }, { num: 4, detail: '8GB RAM' }],
diskList: [{ num: '8TB', detail: 'SSD' }, { num: '2TB', detail: 'HDD' }] }]
})
},
async getExpenseLists() {
await testApi.getExpenseLists().then((res) => {
this.expenseLists = res.data
}).catch(() => {
this.expenseLists = {
recentExpenseDetail: {
totalExpense: '200',
objectStorage: {
storageCapacity: '100GB',
storageDuration: 720,
unitPrice: '$0.02/GB/h',
cost: '$14.40'
},
dataTransfer: {
transferCapacity: '500GB',
unitPrice: '$0.10/GB',
cost: '$50.00'
},
databaseService: {
databaseType: 'MySQL',
storageCapacity: '50GB',
duration: 720,
unitPrice: '$0.02/GB/h',
cost: '$28.80'
},
loadBalancer: {
instancesNum: 2,
duration: 720,
unitPrice: '$0.02',
cost: '$28.80'
}
},
shortTermExpenseDetail: {
totalExpense: '122',
objectStorage: {
storageCapacity: '100GB',
storageDuration: 720,
unitPrice: '$0.02/GB/h',
cost: '$14.40'
},
dataTransfer: {
transferCapacity: '500GB',
unitPrice: '$0.10/GB',
cost: '$50.00'
},
databaseService: {
databaseType: 'MySQL',
storageCapacity: '50GB',
duration: 720,
unitPrice: '$0.02/GB/h',
cost: '$28.80'
},
loadBalancer: {
instancesNum: 2,
duration: 720,
unitPrice: '$0.02',
cost: '$28.80'
}
},
mediumTermExpenseDetail: {
totalExpense: '158',
objectStorage: {
storageCapacity: '100GB',
storageDuration: 720,
unitPrice: '$0.02/GB/h',
cost: '$14.40'
},
dataTransfer: {
transferCapacity: '500GB',
unitPrice: '$0.10/GB',
cost: '$50.00'
},
databaseService: {
databaseType: 'MySQL',
storageCapacity: '50GB',
duration: 720,
unitPrice: '$0.02/GB/h',
cost: '$28.80'
},
loadBalancer: {
instancesNum: 2,
duration: 720,
unitPrice: '$0.02',
cost: '$28.80'
}
},
longTermExpenseDetail: {
totalExpense: '158',
objectStorage: {
storageCapacity: '100GB',
storageDuration: 720,
unitPrice: '$0.02/GB/h',
cost: '$14.40'
},
dataTransfer: {
transferCapacity: '500GB',
unitPrice: '$0.10/GB',
cost: '$50.00'
},
databaseService: {
databaseType: 'MySQL',
storageCapacity: '50GB',
duration: 720,
unitPrice: '$0.02/GB/h',
cost: '$28.80'
},
loadBalancer: {
instancesNum: 2,
duration: 720,
unitPrice: '$0.02',
cost: '$28.80'
}
}
}
this.expenseLists.shortTermExpenseDetail.totalExpense = (Math.abs(Math.random() * 100) + 100).toFixed(2)
this.expenseLists.longTermExpenseDetail.totalExpense = (Math.abs(Math.random() * 100) + 100).toFixed(2)
this.expenseLists.mediumTermExpenseDetail.totalExpense = (Math.abs(Math.random() * 100) + 100).toFixed(2)
})
},
scrollChange() {
const self = this
if (self.scrollValue === '开') {
const doscrollDispatch = function() {
const $parent = $('.card3-box')
const $first = $parent.find('div:first')
console.log($first)
const width = $first.width()
$first.animate({
width: 0
}, 500, function() {
$first.css('width', width).appendTo($parent)
})
}
this.intervalDispatch = setInterval(function() { doscrollDispatch() }, 5000)
const doscrollCpu = function() {
const $parent = $('.tableInnerCpu')
const $first = $parent.find('div:first')
console.log($first)
const height = $first.height()
$first.animate({
height: 0
}, 500, function() {
$first.css('height', height).appendTo($parent)
})
}
const doscrollMemory = function() {
const $parent = $('.tableInnerMemory')
const $first = $parent.find('div:first')
const height = $first.height()
$first.animate({
height: 0
}, 500, function() {
$first.css('height', height).appendTo($parent)
})
}
const doscrollBandWidth = function() {
const $parent = $('.tableInnerBandWidth')
const $first = $parent.find('div:first')
const height = $first.height()
$first.animate({
height: 0
}, 500, function() {
$first.css('height', height).appendTo($parent)
})
}
const doscrollDisk = function() {
const $parent = $('.tableInnerDisk')
const $first = $parent.find('div:first')
const height = $first.height()
$first.animate({
height: 0
}, 500, function() {
$first.css('height', height).appendTo($parent)
})
}
console.log(this.intervalCpu)
console.log(this.intervalMemory)
self.intervalCpu = setInterval(function() { doscrollCpu() }, 5000)
self.intervalMemory = setInterval(function() { doscrollMemory() }, 5000)
self.intervalBandWidth = setInterval(function() { doscrollBandWidth() }, 5000)
self.intervalDisk = setInterval(function() { doscrollDisk() }, 5000)
} else if (this.scrollValue === '关') {
if (this.intervalCpu !== '') {
clearInterval(self.intervalCpu)
}
if (this.intervalMemory !== '') {
clearInterval(self.intervalMemory)
}
if (this.intervalBandWidth !== '') {
clearInterval(self.intervalBandWidth)
}
if (this.intervalDisk !== '') {
clearInterval(self.intervalDisk)
}
if (this.intervalDispatch !== '') {
clearInterval(self.intervalDispatch)
}
}
},
makeData() {
const base = +new Date()
const oneDay = 24 * 3600 * 1000
// const data = [[base, Math.random() * 300]]
const data = []
for (let i = -49; i < 50; i++) {
const now = new Date((base + i * oneDay))
data.push([+now, Math.abs(Math.random() * 300).toFixed(2)])
}
return data
},
async getChartsData() {
await testApi.getTaskAllocationChartData().then((res) => {
this.recentExpense = res.data.recentExpense
this.shortTermExpense = res.data.shortTermExpense
this.mediumTermExpense = res.data.mediumTermExpense
this.longTermExpense = res.data.longTermExpense
}).catch(() => {
this.recentExpense = this.makeData()
this.shortTermExpense = this.makeData()
this.mediumTermExpense = this.makeData()
this.longTermExpense = this.makeData()
})
},
getCharts() {
this.getChartsData().then(r => {
const chart_real = echarts.init(document.getElementById('chart_real'), 'dark')
const chartRealOption = {
tooltip: {
trigger: 'axis'
},
title: {
left: 'center',
text: ''
},
backgroundColor: 'transparent',
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
type: 'inside',
start: 0,
end: 100
}
],
series: [
{
name: '费用(元)',
type: 'line',
smooth: true,
symbol: 'none',
areaStyle: {},
data: this.recentExpense,
itemStyle: {
color: '#6495ED'
}
}
]
}
chart_real.setOption(chartRealOption)
const short_term_chart = echarts.init(document.getElementById('short_term_chart'), 'dark')
this.chartShortOption = {
tooltip: {
trigger: 'axis'
},
title: {
left: 'center',
text: ''
},
backgroundColor: 'transparent',
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [
{
type: 'inside',
start: 46,
end: 54
},
{
type: 'inside',
start: 46,
end: 54
}
],
series: [
{
name: '当前费用(元)',
type: 'line',
smooth: true,
symbol: 'none',
data: this.recentExpense,
itemStyle: {
color: '#6495ED'
}
}, {
name: '短期套餐费用(元)',
type: 'line',
smooth: true,
symbol: 'none',
data: this.shortTermExpense,
itemStyle: {
color: '#f5b000'
}
}
]
}
short_term_chart.setOption(this.chartShortOption)
const medium_term_chart = echarts.init(document.getElementById('medium_term_chart'), 'dark')
this.chartMediumOption = {
tooltip: {
trigger: 'axis'
},
title: {
left: 'center',
text: ''
},
backgroundColor: 'transparent',
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [
{
type: 'inside',
start: 46,
end: 54
},
{
type: 'inside',
start: 46,
end: 54
}
],
series: [
{
name: '当前费用(元)',
type: 'line',
smooth: true,
symbol: 'none',
data: this.recentExpense,
itemStyle: {
color: '#6495ED'
}
}, {
name: '中期套餐费用(元)',
type: 'line',
smooth: true,
symbol: 'none',
data: this.mediumTermExpense,
itemStyle: {
color: '#f5b000'
}
}
]
}
medium_term_chart.setOption(this.chartMediumOption)
const long_term_chart = echarts.init(document.getElementById('long_term_chart'), 'dark')
this.chartLongOption = {
tooltip: {
trigger: 'axis'
},
title: {
left: 'center',
text: ''
},
backgroundColor: 'transparent',
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [
{
type: 'inside',
start: 46,
end: 54
},
{
type: 'inside',
start: 46,
end: 54
}
],
series: [
{
name: '当前费用(元)',
type: 'line',
smooth: true,
symbol: 'none',
data: this.recentExpense,
itemStyle: {
color: '#6495ED'
}
}, {
name: '长期套餐费用(元)',
type: 'line',
smooth: true,
symbol: 'none',
data: this.longTermExpense,
itemStyle: {
color: '#f5b000'
}
}
]
}
long_term_chart.setOption(this.chartLongOption)
})
},
openDetailDialog(termType) {
this.chartDialogVisible = true
this.$nextTick(() => {
const dialogChart = echarts.init(document.getElementById('chartInDialog'), 'dark')
let chartOption
if (termType === `shortTerm`) {
chartOption = this.chartShortOption
this.expenseInDialog = this.expenseLists.shortTermExpenseDetail
} else if (termType === `mediumTerm`) {
chartOption = this.chartMediumOption
this.expenseInDialog = this.expenseLists.mediumTermExpenseDetail
} else if (termType === `longTerm`) {
chartOption = this.chartLongOption
this.expenseInDialog = this.expenseLists.longTermExpenseDetail
}
dialogChart.setOption(chartOption)
})
},
async chooseSet(termType) {
await testApi.chooseSet({ termType: termType }).then((res) => {
this.getUsageHostInfo()
this.upDateResults()
}).catch(() => {
this.getUsageHostInfo()
this.upDateResults()
const tempData = this.usageDataList
this.usageDataList = this.usageDataList1
this.usageDataList1 = tempData
})
},
showCpuDetail(item) {
for (let i = 0; i < this.usageDataList.length; i++) {
if (this.usageDataList[i].id === item.id) {
this.usageDataList[i].showAll = false
this.usageDataList[i].showCpuDetail = true
this.usageDataList[i].showBandWidthDetail = false
this.usageDataList[i].showDiskDetail = false
this.usageDataList[i].showMemoryDetail = false
}
}
},
showBandWidthDetail(item) {
for (let i = 0; i < this.usageDataList.length; i++) {
if (this.usageDataList[i].id === item.id) {
this.usageDataList[i].showAll = false
this.usageDataList[i].showCpuDetail = false
this.usageDataList[i].showBandWidthDetail = true
this.usageDataList[i].showDiskDetail = false
this.usageDataList[i].showMemoryDetail = false
}
}
},
showDiskDetail(item) {
for (let i = 0; i < this.usageDataList.length; i++) {
if (this.usageDataList[i].id === item.id) {
this.usageDataList[i].showAll = false
this.usageDataList[i].showCpuDetail = false
this.usageDataList[i].showBandWidthDetail = false
this.usageDataList[i].showDiskDetail = true
this.usageDataList[i].showMemoryDetail = false
}
}
},
showMemoryDetail(item) {
for (let i = 0; i < this.usageDataList.length; i++) {
if (this.usageDataList[i].id === item.id) {
this.usageDataList[i].showAll = false
this.usageDataList[i].showCpuDetail = false
this.usageDataList[i].showBandWidthDetail = false
this.usageDataList[i].showDiskDetail = false
this.usageDataList[i].showMemoryDetail = true
}
}
},
quitDetail(item) {
for (let i = 0; i < this.usageDataList.length; i++) {
if (this.usageDataList[i].id === item.id) {
this.usageDataList[i].showAll = true
this.usageDataList[i].showCpuDetail = false
this.usageDataList[i].showBandWidthDetail = false
this.usageDataList[i].showDiskDetail = false
this.usageDataList[i].showMemoryDetail = false
}
}
},
fullScreen() {
const element = document.getElementById('entirety')
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
}
}
}
}