384 lines
18 KiB
Vue
384 lines
18 KiB
Vue
<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>
|