监管与治理子系统
Signed-off-by: gaohuanbo <13083643+gaohuanbo@user.noreply.gitee.com>
This commit is contained in:
gaohuanbo
Gitee
parent
94d3d68343
commit
3e6f0f21e6
|
|
@ -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
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
#eventResponse{
|
||||
|
||||
.title_class {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.hr {
|
||||
border-bottom: 1px solid;
|
||||
opacity: 0.2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hr_tag {
|
||||
margin-top: 17px;
|
||||
border-bottom: 2px solid;
|
||||
color: #FFFFFF;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.hr_left {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.chart_card{
|
||||
height:36vh;
|
||||
padding-bottom:80px;
|
||||
color: #FFFFFF;
|
||||
flex-wrap: wrap;
|
||||
margin-top: -1vh;
|
||||
}
|
||||
|
||||
.cardDiv{
|
||||
margin: 10px 50px 20px 50px;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
margin: 20px 50px 20px 50px;
|
||||
.el-table--mini .el-table__cell {
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color:white ;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: transparent !important;
|
||||
font-size: 11pt;
|
||||
color: #a8a7a7;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #a8a7a7;
|
||||
font-size: 11pt;
|
||||
height:19px
|
||||
}
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div id="eventResponse" >
|
||||
<!--右上角按钮-->
|
||||
<div style='position:absolute;right:2%;top:10%;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');height:90vh">
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 2vh;font-size: 15pt'>异常报告</div>
|
||||
</div>
|
||||
<div style="height: 40vh" class='table_box'>
|
||||
<el-table
|
||||
:data="abnormalInfoList"
|
||||
height="35vh"
|
||||
:header-row-style="{height: '5vh'}"
|
||||
border
|
||||
style="width:100%">
|
||||
<el-table-column type="index" label="序号" width='80' ></el-table-column>
|
||||
<el-table-column prop="hostId" label="主机ID" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="supplierName" label="所属云商" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="abnormalTime" label="异常时间" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column label="异常类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getTypeText(scope.row.abnormalType).label}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="responseTime" label="响应时间" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="recoverTime" label="恢复时间" :show-overflow-tooltip="true" ></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class='cardDiv'>
|
||||
<el-row :gutter='30'>
|
||||
<el-col :span=8>
|
||||
<el-card class='chart_card'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>云商异常事件比例</div>
|
||||
</div>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center;align-items: center'>
|
||||
<div id='pieChart' style="height: 33vh;width:100%;margin-top: 1vh"> </div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span=8>
|
||||
<el-card class='chart_card'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>平均响应时间/秒</div>
|
||||
</div>
|
||||
<div id='responseTimeChart' style="height: 33vh"> </div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span=8>
|
||||
<el-card class='chart_card'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>平均恢复时间/秒</div>
|
||||
</div>
|
||||
<div id='recoverTimeChart' style="height: 33vh"> </div>
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
|
||||
</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/eventResponse.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,294 @@
|
|||
import echarts from 'echarts'
|
||||
import testApi from '@/api/testApi'
|
||||
|
||||
export default {
|
||||
name: 'eventResponse',
|
||||
data() {
|
||||
return {
|
||||
abnormalInfoList: [],
|
||||
chartsDatas: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
await this.getList()
|
||||
this.makeCharts()
|
||||
},
|
||||
methods: {
|
||||
async getList() {
|
||||
await testApi.getAbnormalInfoList().then((res) => {
|
||||
this.abnormalInfoList = res.data
|
||||
}).catch((error) => {
|
||||
this.abnormalInfoList = [
|
||||
{
|
||||
id: '0',
|
||||
hostId: '12',
|
||||
supplierName: '阿里云',
|
||||
abnormalType: '0',
|
||||
abnormalTime: '2023-07-02 15:42:53',
|
||||
responseTime: '2023-07-02 15:43:12',
|
||||
recoverTime: '2023-07-02 15:45:33'
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
hostId: '22',
|
||||
supplierName: '阿里云',
|
||||
abnormalType: '1',
|
||||
abnormalTime: '2023-07-02 15:42:23',
|
||||
responseTime: '2023-07-02 15:44:11',
|
||||
recoverTime: '2023-07-02 15:45:12'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
hostId: '17',
|
||||
supplierName: '联通云',
|
||||
abnormalType: '0',
|
||||
abnormalTime: '2023-07-02 15:12:12',
|
||||
responseTime: '2023-07-02 15:12:31',
|
||||
recoverTime: '2023-07-02 15:16:08'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
hostId: '14',
|
||||
supplierName: '华为云',
|
||||
abnormalType: '1',
|
||||
abnormalTime: '2023-07-02 14:29:14',
|
||||
responseTime: '2023-07-02 14:29:57',
|
||||
recoverTime: '2023-07-02 14:33:43'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
hostId: '19',
|
||||
supplierName: '华为云',
|
||||
abnormalType: '2',
|
||||
abnormalTime: '2023-07-02 14:22:33',
|
||||
responseTime: '2023-07-02 14:22:42',
|
||||
recoverTime: '2023-07-02 14:25:55'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
hostId: '33',
|
||||
supplierName: '火山云',
|
||||
abnormalType: '3',
|
||||
abnormalTime: '2023-07-02 13:42:33',
|
||||
responseTime: '2023-07-02 13:43:01',
|
||||
recoverTime: '2023-07-02 13:44:17'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
hostId: '11',
|
||||
supplierName: '火山云',
|
||||
abnormalType: '2',
|
||||
abnormalTime: '2023-07-02 13:22:33',
|
||||
responseTime: '2023-07-02 13:22:13',
|
||||
recoverTime: '2023-07-02 13:23:33'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
await testApi.getEventResponseChartData().then((res) => {
|
||||
this.chartsDatas = res.data
|
||||
}).catch((error) => {
|
||||
this.chartsDatas = [
|
||||
{ id: 0, supplierName: '阿里云', abnormalNum: 12, argResponseTime: 12, argRecoverTime: 49 },
|
||||
{ id: 1, supplierName: '联通云', abnormalNum: 15, argResponseTime: 9, argRecoverTime: 35 },
|
||||
{ id: 2, supplierName: '华为云', abnormalNum: 8, argResponseTime: 15, argRecoverTime: 79 },
|
||||
{ id: 3, supplierName: '火山云', abnormalNum: 11, argResponseTime: 21, argRecoverTime: 125 }
|
||||
]
|
||||
})
|
||||
},
|
||||
makeCharts() {
|
||||
this.makePieChart()
|
||||
this.makeBarCharts()
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
getTypeText(type) {
|
||||
switch (type) {
|
||||
case '0':
|
||||
return {
|
||||
label: '网络异常'
|
||||
}
|
||||
case '1':
|
||||
return {
|
||||
label: '传输异常'
|
||||
}
|
||||
case '2':
|
||||
return {
|
||||
label: '服务失败'
|
||||
}
|
||||
case '3':
|
||||
return {
|
||||
label: '计算错误'
|
||||
}
|
||||
}
|
||||
},
|
||||
makePieChart() {
|
||||
const pieChart = echarts.init(document.getElementById('pieChart'), 'light')
|
||||
const data = []
|
||||
for (let i = 0; i < this.chartsDatas.length; i++) {
|
||||
data.push({
|
||||
value: this.chartsDatas[i].abnormalNum,
|
||||
name: this.chartsDatas[i].supplierName
|
||||
})
|
||||
}
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
left: 'left',
|
||||
textStyle: {
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
pieChart.setOption(option)
|
||||
},
|
||||
makeBarCharts() {
|
||||
const responseTimeChart = echarts.init(document.getElementById('responseTimeChart'), 'light')
|
||||
const recoverTimeChart = echarts.init(document.getElementById('recoverTimeChart'), 'light')
|
||||
|
||||
const data = this.chartsDatas
|
||||
const responseTimeOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter(params) {
|
||||
return params[0].name
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: 'rgb(255, 255, 255, 0.5)',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.map(s => s.supplierName),
|
||||
axisLabel: {
|
||||
color: 'rgb(255, 255, 255, 0.5)',
|
||||
formatter(val) {
|
||||
if (val.length < 5) {
|
||||
return val
|
||||
} else {
|
||||
return val.substring(0, 4) + '..'
|
||||
}
|
||||
},
|
||||
show: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: data.map(s => s.argResponseTime),
|
||||
type: 'bar',
|
||||
barWidth: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'top',
|
||||
textStyle: { // 数值样式
|
||||
color: '#5FA4E9',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
color: '#307CE0'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
const recoverTimeOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter(params) {
|
||||
return params[0].name
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: 'rgb(255, 255, 255, 0.5)',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.map(s => s.supplierName),
|
||||
axisLabel: {
|
||||
color: 'rgb(255, 255, 255, 0.5)',
|
||||
formatter(val) {
|
||||
if (val.length < 5) {
|
||||
return val
|
||||
} else {
|
||||
return val.substring(0, 4) + '..'
|
||||
}
|
||||
},
|
||||
show: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: data.map(s => s.argRecoverTime),
|
||||
type: 'bar',
|
||||
barWidth: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'top',
|
||||
textStyle: { // 数值样式
|
||||
color: '#5FA4E9',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
color: '#307CE0'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
responseTimeChart.setOption(responseTimeOption)
|
||||
recoverTimeChart.setOption(recoverTimeOption)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
#hostPerformance {
|
||||
.el-radio-button__inner {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-radio-button--mini .el-radio-button__inner {
|
||||
padding: 7px 7px;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.el-popover .my-el-popover {
|
||||
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
el-descriptions-item el-descriptions-item__cell {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-notification.right {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
right: 16px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.el-notification__title {
|
||||
color: white
|
||||
}
|
||||
|
||||
.el-notification__content {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-notification__closeBtn {
|
||||
color: #ffffff;
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.title_row {
|
||||
margin-top: 1%;
|
||||
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: 32px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title_box_hr {
|
||||
border-bottom: 2px solid;
|
||||
opacity: 0.2;
|
||||
color: white;
|
||||
width: 120%;
|
||||
margin-top: 2%;
|
||||
margin-left: -10%;
|
||||
}
|
||||
|
||||
.top_button_box {
|
||||
margin-top: 1%;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.gailan_label {
|
||||
font-family: 'Alternate';
|
||||
opacity: 0.7;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.title_class {
|
||||
font-family: 'Alternate';
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.gailan_box {
|
||||
background-image: url("/static/hostPerformance/box.png");
|
||||
background-size: 100% 100%;
|
||||
border-color: white;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
box-shadow: 5px 5px 20px 0 rgba(19, 29, 39, 0.50);
|
||||
}
|
||||
|
||||
.gailan_box hr {
|
||||
background: #FFFFFF;
|
||||
width: 14px;
|
||||
/*height: 2px;*/
|
||||
}
|
||||
|
||||
.gailan_box img {
|
||||
/*box-shadow: 0 0 6px 1px #26A2FF;*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gailan_box_total {
|
||||
font-family: 'Alternate';
|
||||
/*font-size: 42px;*/
|
||||
font-size: 36px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
line-height: 59px;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
}
|
||||
|
||||
.gailan_box_center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gailan_box_img {
|
||||
margin-top: 28px;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.gailan_box_lable {
|
||||
font-family: 'Alternate';
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.host_num_box {
|
||||
margin-top: 1.5vh;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.host_num_text {
|
||||
font-family: 'Alternate';
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card_title_row {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chart_box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hr {
|
||||
border-bottom: 1px solid;
|
||||
opacity: 0.2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hr_tag {
|
||||
margin-top: 17px;
|
||||
border-bottom: 2px solid;
|
||||
color: #FFFFFF;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.hr_left {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.title_class {
|
||||
font-family: 'Alternate';
|
||||
font-weight: bold;
|
||||
font-size: 11pt;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title_left_class {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.hr_mid {
|
||||
/*margin-top: 17px;*/
|
||||
/*width: 630px*/
|
||||
}
|
||||
|
||||
.hr_right {
|
||||
/*width: 590px*/
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
.el-table--mini .el-table__cell {
|
||||
padding: 2px 0
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
height: 8vh
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #a8a7a7
|
||||
}
|
||||
|
||||
//去除边框
|
||||
.el-table--border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table_title span {
|
||||
color: white;
|
||||
opacity: 0.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table_value {
|
||||
padding-left: 20px;
|
||||
margin-left: 50px;
|
||||
height: 30px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.table_value span {
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
/* 偶数行的样式 */
|
||||
.table_value:nth-child(even) {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,302 @@
|
|||
<template>
|
||||
<div id="hostPerformance" >
|
||||
<!--右上角按钮-->
|
||||
<div style='position:absolute;right:2%;top:10%;z-index: 99'>
|
||||
<div class='top_button_box'>
|
||||
<!--
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:picker-options="pickerOptions"
|
||||
>
|
||||
</el-date-picker>-->
|
||||
|
||||
<el-switch style="margin-left: 5px"
|
||||
v-model="switchValue">
|
||||
</el-switch>
|
||||
<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/hostPerformance/背景.png')">
|
||||
|
||||
<!--标题行-->
|
||||
<el-row>
|
||||
<div class="title_row">
|
||||
|
||||
<div class='title_box'>
|
||||
<div class="title_box_text">
|
||||
主机性能监控
|
||||
</div>
|
||||
<div class="title_box_hr"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</el-row>
|
||||
<!-- 左侧 -->
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="8">
|
||||
<!-- 主机CPU性能统计TOP5 -->
|
||||
<div>
|
||||
<div class='card_title_row'>
|
||||
<div class="title_class title_left_class">主机CPU性能统计TOP5</div>
|
||||
<el-radio-group v-model="cpuRadio" size="mini" @change='makeCpuChart'>
|
||||
<el-row :gutter='10'>
|
||||
<el-col :span='8'><el-radio-button label="云主机"></el-radio-button></el-col>
|
||||
<el-col :span='8'><el-radio-button label="物理机"></el-radio-button></el-col>
|
||||
<el-col :span='8'><el-radio-button label="虚拟机"></el-radio-button></el-col>
|
||||
</el-row>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="hr_tag" style="margin-left: 50px;"></div>
|
||||
<div class="hr hr_left"></div>
|
||||
<div class='chart_box'>
|
||||
<div id="statistics_cpu" style="height: 27vh;">statistics_cpu</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主机内存性能统计TOP5 -->
|
||||
<div>
|
||||
<div class='card_title_row'>
|
||||
<div class="title_class title_left_class">主机内存性能统计TOP5</div>
|
||||
<el-radio-group v-model="memoryRadio" size="mini" @change='makeMemoryChart'>
|
||||
<el-row :gutter='10'>
|
||||
<el-col :span='8'><el-radio-button label="云主机"></el-radio-button></el-col>
|
||||
<el-col :span='8'><el-radio-button label="物理机"></el-radio-button></el-col>
|
||||
<el-col :span='8'><el-radio-button label="虚拟机"></el-radio-button></el-col>
|
||||
</el-row>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="hr_tag" style="margin-left: 50px;"></div>
|
||||
<div class="hr hr_left"></div>
|
||||
<div class='chart_box'>
|
||||
<div id="statistics_memory" style="height: 27vh;">statistics_memory</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主机磁盘性能统计TOP5 -->
|
||||
<div>
|
||||
<div class='card_title_row'>
|
||||
<div class="title_class title_left_class">主机磁盘性能统计TOP5</div>
|
||||
<el-radio-group v-model="diskRadio" size="mini" @change='makeDiskChart'>
|
||||
<el-row :gutter='10'>
|
||||
<el-col :span='8'><el-radio-button label="云主机"></el-radio-button></el-col>
|
||||
<el-col :span='8'><el-radio-button label="物理机"></el-radio-button></el-col>
|
||||
<el-col :span='8'><el-radio-button label="虚拟机"></el-radio-button></el-col>
|
||||
</el-row>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="hr_tag" style="margin-left: 50px;"></div>
|
||||
<div class="hr hr_left"></div>
|
||||
<div class='chart_box'>
|
||||
<div id="statistics_disk" style="height: 27vh;">statistics_disk</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 中间部分 -->
|
||||
<el-col :span="8">
|
||||
<!-- 主机数 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="host_num_box">
|
||||
<span class='host_num_text' style='color:white'>主机总数</span>
|
||||
<span class='host_num_text' style='color:#C0C0C0'>{{hostNum}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="host_num_box">
|
||||
<span class='host_num_text' style='color:white'>正常主机数</span>
|
||||
<span class='host_num_text' style='color:#87CEFA'>{{normalHostNum}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="host_num_box">
|
||||
<span class='host_num_text' style='color:white'>异常主机数</span>
|
||||
<span class='host_num_text' style='color:red'>{{abnormalHostNum}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 8个box -->
|
||||
<div>
|
||||
<div>
|
||||
<div class="hr_tag"></div>
|
||||
<div class="hr hr_mid"></div>
|
||||
<div style="margin-left: -9px">
|
||||
<el-row>
|
||||
<el-col v-for="(item,i) in gailan_box" :key="i" :span="6">
|
||||
<div class="gailan_box">
|
||||
<div class="gailan_box_center"><img class="gailan_box_img" :src='item.icon'></div>
|
||||
<div>
|
||||
<hr/>
|
||||
</div>
|
||||
<div class="gailan_box_center">
|
||||
<span class="gailan_box_total" style="font-size: 23px;">{{ item.value }}</span>
|
||||
<span v-if="item.total != null" class="gailan_box_total" style="font-size: 16px;">/{{
|
||||
item.total
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="gailan_box_lable" style="margin-top: 3vh;padding-bottom: 2vh;">
|
||||
<div v-for="(label,i) in item.label" :key="i">{{ label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 2vh;">
|
||||
<div class="title_class">厂商资源统计TOP5</div>
|
||||
<div class="hr_tag"></div>
|
||||
<div class="hr hr_mid"></div>
|
||||
<div>
|
||||
<div id="manufacturer_chart" style="height: 27vh;">manufacturerChartData</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!--右侧-->
|
||||
<el-col :span="8" style='margin-left: -2%'>
|
||||
<!--异常数据统计-->
|
||||
<div>
|
||||
<div class='card_title_row'>
|
||||
<div class="title_class title_left_class">异常数据统计</div>
|
||||
<el-radio-group v-model="abnormalRadio" size="mini" @change='makePieChart'>
|
||||
<el-row :gutter='10'>
|
||||
<el-col :span='8'><el-radio-button label="CPU"></el-radio-button></el-col>
|
||||
<el-col :span='8'><el-radio-button label="内存"></el-radio-button></el-col>
|
||||
<el-col :span='8'><el-radio-button label="磁盘"></el-radio-button></el-col>
|
||||
</el-row>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="hr_tag" style="margin-left: 50px;"></div>
|
||||
<div class="hr hr_left"></div>
|
||||
<div>
|
||||
<div id="abnormal_chart" style="height: 27vh;width:100%;margin-left: 3%">abnormal_chart_data</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--资源告警数统计-->
|
||||
<div>
|
||||
<div class='card_title_row' >
|
||||
<div class="title_class title_left_class">资源告警数统计TOP5</div>
|
||||
<el-radio-group v-model="alarmRadio" size="mini" @change='getAlarmTableData'>
|
||||
<el-row :gutter='10'>
|
||||
<el-col :span='6'><el-radio-button label="全部"></el-radio-button></el-col>
|
||||
<el-col :span='6'><el-radio-button label="严重"></el-radio-button></el-col>
|
||||
<el-col :span='6'><el-radio-button label="中等"></el-radio-button></el-col>
|
||||
<el-col :span='6'><el-radio-button label="一般"></el-radio-button></el-col>
|
||||
</el-row>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="hr_tag" style="margin-left: 50px;"></div>
|
||||
<div class="hr hr_left"></div>
|
||||
<div style="height: 26vh;" class='table_box'>
|
||||
<el-table
|
||||
:data="alarmTableDataShow"
|
||||
:row-style="{height: '3.5vh'}"
|
||||
:cell-style="{padding: '0'}"
|
||||
:header-row-style="{height: '4vh'}"
|
||||
:header-cell-style="{padding: '0'}"
|
||||
style="width: 90%;margin-left: 10%;margin-top:5px">
|
||||
<el-table-column label="等级">
|
||||
<template slot-scope="scope">
|
||||
{{getSeverityText(scope.row.severity)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="message" label="告警内容" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="host" label="IP地址"></el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button slot="reference" size="mini" type="text" @click='openTableDetailDialog(scope.row)'>详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<!--资源告警数统计-->
|
||||
<div>
|
||||
<div class='card_title_row'>
|
||||
<div class="title_class title_left_class">云服务性能统计TOP5</div>
|
||||
<el-radio-group v-model="serviceRadio" size="mini" @change='makePerformenceChart'>
|
||||
<el-row :gutter='10'>
|
||||
<el-col :span='8'><el-radio-button label="aaaa"></el-radio-button></el-col>
|
||||
<el-col :span='8'><el-radio-button label="bbbb"></el-radio-button></el-col>
|
||||
<el-col :span='8'><el-radio-button label="cccc"></el-radio-button></el-col>
|
||||
</el-row>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="hr_tag" style="margin-left: 50px;"></div>
|
||||
<div class="hr hr_left"></div>
|
||||
<div class='chart_box'>
|
||||
<div id="test" style="height: 27vh;">statistics_cpu</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--折线图-->
|
||||
<el-dialog
|
||||
title=""
|
||||
:visible.sync="chartDialogVisible"
|
||||
width="50%"
|
||||
>
|
||||
<div ref='chartInDialog' style='margin:0px 20px 0px 20px;height: 60vh;width:90%'></div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!--饼图点击详情-->
|
||||
<el-dialog
|
||||
:title="pieChartDialogTitle"
|
||||
:visible.sync="pieChartDialogVisible"
|
||||
width="40%"
|
||||
style='margin-left:50%'
|
||||
>
|
||||
<div style='padding:20px;'>
|
||||
<div v-for="item in pieChartAbnormalList" :key='item.id' >
|
||||
<span>id:</span>
|
||||
<span>{{item.id}}</span>
|
||||
<span>{{item.message}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!--Table详情-->
|
||||
<el-dialog
|
||||
:visible.sync="tableDetailDialogVisible"
|
||||
width="40%"
|
||||
style='margin-left:50%;margin-top:15vh'
|
||||
>
|
||||
<div style='padding:20px;'>
|
||||
<el-descriptions title="详情" :column="1">
|
||||
<el-descriptions-item label="等级">{{ getSeverityText(tableDetailMessage.severity) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="告警内容">{{ tableDetailMessage.message }}</el-descriptions-item>
|
||||
<el-descriptions-item label="告警资源名称">{{ tableDetailMessage.messageName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="IP地址">{{ tableDetailMessage.host }}</el-descriptions-item>
|
||||
<el-descriptions-item label="发生时间">{{ tableDetailMessage.firstTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="关闭时间">{{ tableDetailMessage.affirmedTime }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</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/hostPerformance.scss';
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,118 @@
|
|||
#illegalPublicity{
|
||||
.title_class {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.hr {
|
||||
border-bottom: 1px solid;
|
||||
opacity: 0.2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hr_tag {
|
||||
margin-top: 17px;
|
||||
border-bottom: 2px solid;
|
||||
color: #FFFFFF;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.hr_left {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.chart_card1{
|
||||
height:51vh;
|
||||
padding-bottom:80px;
|
||||
color: #FFFFFF;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
.chart_card2{
|
||||
height:25vh;
|
||||
padding-bottom:80px;
|
||||
color: #FFFFFF;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
.cardDiv{
|
||||
margin: 10px 50px 20px 50px;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
margin: 20px 50px 20px 50px;
|
||||
.el-table--mini .el-table__cell {
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color:white ;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
height:3vh
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #a8a7a7;
|
||||
font-size: 11pt;
|
||||
height:19px
|
||||
}
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<div id="illegalPublicity" >
|
||||
<!--右上角按钮-->
|
||||
<div style='position:absolute;right:2%;top:10%;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-bottom: 10px">
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 2vh;font-size: 13pt'>最新违规信息公示</div>
|
||||
</div>
|
||||
<div class='table_box'>
|
||||
<el-table
|
||||
:data="illegalInfoList"
|
||||
height="31.5vh"
|
||||
border
|
||||
:header-row-style="{height: '5vh'}"
|
||||
style="width:100%">
|
||||
<el-table-column prop="supplierName" label="云平台" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="time" label="处罚时间" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="credenceValue" label="当前信誉值" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column label="处罚措施">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getLevelInfo(scope.row.punishmentLevel).measureLabel}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="处罚等级">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="getLevelInfo(scope.row.punishmentLevel).type"
|
||||
effect="dark">
|
||||
{{getLevelInfo(scope.row.punishmentLevel).levelLabel}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" :show-overflow-tooltip="true" ></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='font-size: 13pt'>云平台响应能力展示</div>
|
||||
</div>
|
||||
<div class='cardDiv'>
|
||||
<el-row :gutter='30'>
|
||||
<el-col :span=8>
|
||||
<el-card class='chart_card1'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>云商处罚次数占比</div>
|
||||
</div>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center;align-items: center'>
|
||||
<div id='pieChart' style="height: 43vh;width:90%;margin-top: 1vh"> </div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span=8>
|
||||
<el-card class='chart_card2'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>各平台受到一级处罚次数</div>
|
||||
</div>
|
||||
<div style='width: 100%;padding:10px'>
|
||||
<div id='level1Chart' style="height: 20vh"> </div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class='chart_card2'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>各平台受到三级处罚次数</div>
|
||||
</div>
|
||||
<div id='level3Chart' style="height: 20vh"> </div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span=8>
|
||||
<el-card class='chart_card2'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>各平台受到二级处罚次数</div>
|
||||
</div>
|
||||
<div id='level2Chart' style="height: 20vh"> </div>
|
||||
</el-card>
|
||||
<el-card class='chart_card2'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>各平台受到四级处罚次数</div>
|
||||
</div>
|
||||
<div id='level4Chart' style="height: 20vh"> </div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
|
||||
</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/illegalPublicity.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,440 @@
|
|||
import echarts from 'echarts'
|
||||
import testApi from '@/api/testApi'
|
||||
|
||||
export default {
|
||||
name: 'illegalPublicity',
|
||||
data() {
|
||||
return {
|
||||
illegalInfoList: [],
|
||||
chartsDatas: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
await this.getList()
|
||||
this.makeCharts()
|
||||
},
|
||||
methods: {
|
||||
async getList() {
|
||||
await testApi.getIllegalInfoList().then((res) => {
|
||||
this.illegalInfoList = res.data
|
||||
}).catch((error) => {
|
||||
this.illegalInfoList = [
|
||||
{
|
||||
id: '0',
|
||||
supplierName: '阿里云',
|
||||
credenceValue: '90',
|
||||
punishmentLevel: '1',
|
||||
time: '2023-07-02',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
supplierName: '联通云',
|
||||
credenceValue: '92',
|
||||
punishmentLevel: '2',
|
||||
time: '2023-07-02',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
supplierName: '华为云',
|
||||
credenceValue: '95',
|
||||
punishmentLevel: '1',
|
||||
time: '2023-07-02',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
supplierName: '火山云',
|
||||
credenceValue: '90',
|
||||
punishmentLevel: '3',
|
||||
time: '2023-07-02',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
supplierName: '阿里云',
|
||||
credenceValue: '91',
|
||||
punishmentLevel: '4',
|
||||
time: '2023-07-02',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
supplierName: '华为云',
|
||||
credenceValue: '99',
|
||||
punishmentLevel: '2',
|
||||
time: '2023-07-02',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
supplierName: '火山云',
|
||||
credenceValue: '90',
|
||||
punishmentLevel: '3',
|
||||
time: '2023-07-02',
|
||||
remark: ''
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
await testApi.getIllegalPublicityChartData().then((res ) => {
|
||||
this.chartsDatas = res.data
|
||||
}).catch((error) => {
|
||||
this.chartsDatas = [
|
||||
{ id: 0, supplierName: '阿里云', punishmentNum: 55, level1Num: 22, level2Num: 13, level3Num: 18, level4Num: 2 },
|
||||
{ id: 1, supplierName: '联通云', punishmentNum: 61, level1Num: 12, level2Num: 19, level3Num: 22, level4Num: 8 },
|
||||
{ id: 2, supplierName: '华为云', punishmentNum: 71, level1Num: 13, level2Num: 17, level3Num: 33, level4Num: 5 },
|
||||
{ id: 3, supplierName: '火山云', punishmentNum: 68, level1Num: 28, level2Num: 13, level3Num: 18, level4Num: 9 }
|
||||
]
|
||||
})
|
||||
},
|
||||
makeCharts() {
|
||||
this.makePieChart()
|
||||
this.makeBarCharts()
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
getLevelInfo(level) {
|
||||
switch (level) {
|
||||
case '1':
|
||||
return {
|
||||
levelLabel: '一级',
|
||||
measureLabel: '警告',
|
||||
type: ''
|
||||
}
|
||||
case '2':
|
||||
return {
|
||||
levelLabel: '二级',
|
||||
measureLabel: '罚款',
|
||||
type: 'success'
|
||||
}
|
||||
case '3':
|
||||
return {
|
||||
levelLabel: '三级',
|
||||
measureLabel: '暂停服务',
|
||||
type: 'warning'
|
||||
}
|
||||
case '4':
|
||||
return {
|
||||
levelLabel: '四级',
|
||||
measureLabel: '重新审查',
|
||||
type: 'danger'
|
||||
}
|
||||
}
|
||||
},
|
||||
makePieChart() {
|
||||
const pieChart = echarts.init(document.getElementById('pieChart'), 'light')
|
||||
const data = []
|
||||
for (let i = 0; i < this.chartsDatas.length; i++) {
|
||||
data.push({
|
||||
value: this.chartsDatas[i].punishmentNum,
|
||||
name: this.chartsDatas[i].supplierName
|
||||
})
|
||||
}
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
left: 'left',
|
||||
textStyle: {
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
formatter: '{b|{b}：}\n{c} {per|{d}%} ',
|
||||
rich: {
|
||||
b: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 33
|
||||
},
|
||||
per: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#4C5058',
|
||||
padding: [3, 4],
|
||||
borderRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
pieChart.setOption(option)
|
||||
},
|
||||
makeBarCharts() {
|
||||
const level1Chart = echarts.init(document.getElementById('level1Chart'), 'light')
|
||||
const level2Chart = echarts.init(document.getElementById('level2Chart'), 'light')
|
||||
const level3Chart = echarts.init(document.getElementById('level3Chart'), 'light')
|
||||
const level4Chart = echarts.init(document.getElementById('level4Chart'), 'light')
|
||||
|
||||
const data = this.chartsDatas
|
||||
const level1Option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter(params) {
|
||||
return params[0].name
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
max: 'dataMax'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: data.map(s => s.supplierName).reverse(),
|
||||
axisLabel: {
|
||||
color: 'rgb(255, 255, 255, 0.5)',
|
||||
formatter(val) {
|
||||
if (val.length < 5) {
|
||||
return val
|
||||
} else {
|
||||
return val.substring(0, 4) + '..'
|
||||
}
|
||||
},
|
||||
show: true
|
||||
},
|
||||
// 去掉刻度线
|
||||
axisLine: { 'show': false },
|
||||
axisTick: { 'show': false }
|
||||
},
|
||||
series: [{
|
||||
data: data.map(s => s.level1Num).reverse(),
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'right',
|
||||
textStyle: { // 数值样式
|
||||
color: '#5FA4E9',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
color: '#307CE0'
|
||||
}
|
||||
}
|
||||
}],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
top: 5,
|
||||
left: 10,
|
||||
bottom: 10
|
||||
}
|
||||
}
|
||||
const level2Option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter(params) {
|
||||
return params[0].name
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
max: 'dataMax'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: data.map(s => s.supplierName).reverse(),
|
||||
axisLabel: {
|
||||
color: 'rgb(255, 255, 255, 0.5)',
|
||||
formatter(val) {
|
||||
if (val.length < 5) {
|
||||
return val
|
||||
} else {
|
||||
return val.substring(0, 4) + '..'
|
||||
}
|
||||
},
|
||||
show: true
|
||||
},
|
||||
// 去掉刻度线
|
||||
axisLine: { 'show': false },
|
||||
axisTick: { 'show': false }
|
||||
},
|
||||
series: [{
|
||||
data: data.map(s => s.level2Num).reverse(),
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'right',
|
||||
textStyle: { // 数值样式
|
||||
color: '#5FA4E9',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
color: '#307CE0'
|
||||
}
|
||||
}
|
||||
}],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
top: 5,
|
||||
left: 10,
|
||||
bottom: 10
|
||||
}
|
||||
}
|
||||
const level3Option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter(params) {
|
||||
return params[0].name
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
max: 'dataMax'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: data.map(s => s.supplierName).reverse(),
|
||||
axisLabel: {
|
||||
color: 'rgb(255, 255, 255, 0.5)',
|
||||
formatter(val) {
|
||||
if (val.length < 5) {
|
||||
return val
|
||||
} else {
|
||||
return val.substring(0, 4) + '..'
|
||||
}
|
||||
},
|
||||
show: true
|
||||
},
|
||||
// 去掉刻度线
|
||||
axisLine: { 'show': false },
|
||||
axisTick: { 'show': false }
|
||||
},
|
||||
series: [{
|
||||
data: data.map(s => s.level3Num).reverse(),
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'right',
|
||||
textStyle: { // 数值样式
|
||||
color: '#5FA4E9',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
color: '#307CE0'
|
||||
}
|
||||
}
|
||||
}],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
top: 5,
|
||||
left: 10,
|
||||
bottom: 10
|
||||
}
|
||||
}
|
||||
const level4Option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter(params) {
|
||||
return params[0].name
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
max: 'dataMax'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: data.map(s => s.supplierName).reverse(),
|
||||
axisLabel: {
|
||||
color: 'rgb(255, 255, 255, 0.5)',
|
||||
formatter(val) {
|
||||
if (val.length < 5) {
|
||||
return val
|
||||
} else {
|
||||
return val.substring(0, 4) + '..'
|
||||
}
|
||||
},
|
||||
show: true
|
||||
},
|
||||
// 去掉刻度线
|
||||
axisLine: { 'show': false },
|
||||
axisTick: { 'show': false }
|
||||
},
|
||||
series: [{
|
||||
data: data.map(s => s.level4Num).reverse(),
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'right',
|
||||
textStyle: { // 数值样式
|
||||
color: '#5FA4E9',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
color: '#307CE0'
|
||||
}
|
||||
}
|
||||
}],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
top: 5,
|
||||
left: 10,
|
||||
bottom: 10
|
||||
}
|
||||
}
|
||||
level1Chart.setOption(level1Option)
|
||||
level2Chart.setOption(level2Option)
|
||||
level3Chart.setOption(level3Option)
|
||||
level4Chart.setOption(level4Option)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
#storageTransfer{
|
||||
.title_class {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
.chart_card{
|
||||
height:43vh;
|
||||
padding-bottom:80px;
|
||||
color: #FFFFFF;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
.cardDiv{
|
||||
margin: 10px 50px 20px 50px;
|
||||
}
|
||||
.el-input__inner {
|
||||
background-color: transparent !important;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
.description1 {
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-descriptions-item el-descriptions-item__cell {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-descriptions-item__content {
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 13pt;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
}
|
||||
}
|
||||
.description2 {
|
||||
padding-left:20px;
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-descriptions-item el-descriptions-item__cell {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.el-descriptions-item__content {
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 10pt;
|
||||
color: rgba(243, 232, 232, 0.6);
|
||||
}
|
||||
.el-descriptions-item__label {
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 10pt;
|
||||
color: rgba(243, 232, 232, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<div id="storageTransfer" >
|
||||
<!--右上角按钮-->
|
||||
<div style='position:absolute;right:2%;top:10%;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-bottom: 10px">
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<el-input placeholder="请输入主机ID" v-model="searchId" style='width: 40%;margin-top: 3vh'>
|
||||
</el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click='searchHost' style='margin-top: 3vh'></el-button>
|
||||
</div>
|
||||
<div class='cardDiv'>
|
||||
<el-row :gutter='30'>
|
||||
<el-col :span=12>
|
||||
<el-card class='chart_card'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>CPU</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span='15'>
|
||||
<div style='width: 100%;padding-left:20px'>
|
||||
<div id='CPUChart' style="height: 30vh"> </div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span='9'>
|
||||
<div class='description1'>
|
||||
<el-descriptions :column="2" direction="vertical">
|
||||
<el-descriptions-item label="利用率">{{hostInfoShow.cpu['useRatio']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="速度">{{hostInfoShow.cpu['speed']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="进程">{{hostInfoShow.cpu['process']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="线程">{{hostInfoShow.cpu['thread']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="句柄">{{hostInfoShow.cpu['handle']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="正常运行时间">{{hostInfoShow.cpu['operationTime']}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class='description2'>
|
||||
<el-descriptions :column="4">
|
||||
<el-descriptions-item label="基准速度">{{hostInfoShow.cpu['referenceSpeed']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="插槽">{{hostInfoShow.cpu['slot']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="内核">{{hostInfoShow.cpu['kernel']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="逻辑处理器">{{hostInfoShow.cpu['logicProcessor']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="虚拟化">{{hostInfoShow.cpu['virtualization']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="L1 缓存">{{hostInfoShow.cpu['l1']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="L2 缓存">{{hostInfoShow.cpu['l2']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="L3 缓存">{{hostInfoShow.cpu['l3']}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class='chart_card'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>磁盘</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span='15'>
|
||||
<div style='width: 100%;padding-left:20px'>
|
||||
<div id='diskChart' style="height: 30vh"> </div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span='9'>
|
||||
<div class='description1'>
|
||||
<el-descriptions :column="2" direction="vertical" style='margin-top: 4vh'>
|
||||
<el-descriptions-item label="活动时间">{{hostInfoShow.disk['activeTime']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="平均响应时间">{{hostInfoShow.disk['argResponseTime']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="读取速度">{{hostInfoShow.disk['readSpeed']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="写入速度">{{hostInfoShow.disk['writeSpeed']}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class='description2'>
|
||||
<el-descriptions :column="3">
|
||||
<el-descriptions-item label="容量">{{hostInfoShow.disk['capacity']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="已格式化">{{hostInfoShow.disk['formatted']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="系统磁盘">{{hostInfoShow.disk['systemDisk']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="页面文件">{{hostInfoShow.disk['pageFile']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="类型">{{hostInfoShow.disk['type']}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span=12>
|
||||
<el-card class='chart_card'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>内存</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span='15'>
|
||||
<div style='width: 100%;padding-left:20px'>
|
||||
<div id='memoryChart' style="height: 30vh"> </div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span='9'>
|
||||
<div class='description1'>
|
||||
<el-descriptions :column="2" direction="vertical" >
|
||||
<el-descriptions-item label="使用中">{{hostInfoShow.memory['using']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="可用">{{hostInfoShow.memory['usable']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="已提交">{{hostInfoShow.memory['submitted']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="已缓存">{{hostInfoShow.memory['cache']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="分页缓冲池">{{hostInfoShow.memory['pagingBuffer']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="非分页缓冲池">{{hostInfoShow.memory['nonPagingBuffer']}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class='description2'>
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item label="速度">{{hostInfoShow.memory['speed']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="已使用的插槽">{{hostInfoShow.memory['usedSlot']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="外形规格">{{hostInfoShow.memory['shape']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="为硬件保留的内存">{{hostInfoShow.memory['reservedMemory']}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class='chart_card'>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 10px'>以太网</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span='15'>
|
||||
<div style='width: 100%;padding-left:20px'>
|
||||
<div id='networkChart' style="height: 30vh"> </div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span='9'>
|
||||
<div class='description1'>
|
||||
<el-descriptions :column="1" direction="vertical" style='margin-top: 4vh;margin-left: 40%'>
|
||||
<el-descriptions-item label="发送">{{hostInfoShow.network['send']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="接收">{{hostInfoShow.network['receive']}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class='description2'>
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item label="适配器名称">{{hostInfoShow.network['adapter']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="连接类型">{{hostInfoShow.network['connectType']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="IPv4地址">{{hostInfoShow.network['IPv4']}}</el-descriptions-item>
|
||||
<el-descriptions-item label="IPv6地址">{{hostInfoShow.network['IPv6']}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
|
||||
</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/storageTransfer.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
import echarts from 'echarts'
|
||||
import testApi from '@/api/testApi'
|
||||
|
||||
export default {
|
||||
name: 'storageTransfer',
|
||||
data() {
|
||||
return {
|
||||
searchId: '0',
|
||||
cpuChartData: [],
|
||||
memoryChartData: [],
|
||||
diskChartData: [],
|
||||
networkChartData: [],
|
||||
hostInfoList: [],
|
||||
hostInfoShow: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
await this.searchHost(this.searchId)
|
||||
},
|
||||
methods: {
|
||||
async searchHost() {
|
||||
await testApi.searchHostInfoById({ id: this.searchId }).then((res) => {
|
||||
if (res.data !== null) {
|
||||
this.hostInfoShow = res.data
|
||||
this.makeCharts()
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请输入正确的主机ID',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
}).catch((error) => {
|
||||
this.hostInfoList = [{ id: '0', cpu: { useRatio: '80%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
|
||||
referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
|
||||
memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
|
||||
speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
|
||||
disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
|
||||
network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }},
|
||||
{ id: '1', cpu: { useRatio: '84%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
|
||||
referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
|
||||
memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
|
||||
speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
|
||||
disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
|
||||
network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }},
|
||||
{ id: '2', cpu: { useRatio: '70%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
|
||||
referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
|
||||
memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
|
||||
speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
|
||||
disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
|
||||
network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }},
|
||||
{ id: '3', cpu: { useRatio: '90%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
|
||||
referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
|
||||
memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
|
||||
speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
|
||||
disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
|
||||
network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }}]
|
||||
|
||||
this.hostInfoShow = null
|
||||
for (let i = 0; i < this.hostInfoList.length; i++) {
|
||||
if (this.hostInfoList[i].id === this.searchId) {
|
||||
this.hostInfoShow = this.hostInfoList[i]
|
||||
}
|
||||
}
|
||||
if (!this.hostInfoShow) {
|
||||
this.$message({
|
||||
message: '请输入正确的主机ID',
|
||||
type: 'warning'
|
||||
})
|
||||
} else {
|
||||
this.makeCharts()
|
||||
}
|
||||
})
|
||||
},
|
||||
makeData() {
|
||||
const base = +new Date()
|
||||
const data = []
|
||||
for (let i = -60; i < 0; i++) {
|
||||
const now = new Date((base + i * 1000))
|
||||
data.push([+now, Math.abs(Math.random()).toFixed(2)])
|
||||
}
|
||||
return data
|
||||
},
|
||||
async getChartsData() {
|
||||
await testApi.getHostChartsById({ id: this.searchId }).then((res) => {
|
||||
this.cpuChartData = res.data.cpuChartData
|
||||
this.memoryChartData = res.data.memoryChartData
|
||||
this.diskChartData = res.data.diskChartData
|
||||
this.networkChartData = res.data.networkChartData
|
||||
}).catch((error) => {
|
||||
this.cpuChartData = this.makeData()
|
||||
this.memoryChartData = this.makeData()
|
||||
this.diskChartData = this.makeData()
|
||||
this.networkChartData = this.makeData()
|
||||
})
|
||||
},
|
||||
makeCharts() {
|
||||
this.getChartsData().then(r => {
|
||||
const cpuChart = echarts.init(document.getElementById('CPUChart'), 'dark')
|
||||
const memoryChart = echarts.init(document.getElementById('memoryChart'), 'dark')
|
||||
const diskChart = echarts.init(document.getElementById('diskChart'), 'dark')
|
||||
const networkChart = echarts.init(document.getElementById('networkChart'), 'dark')
|
||||
|
||||
const cpuChartOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
toolbox: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
max: 1,
|
||||
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.cpuChartData,
|
||||
itemStyle: {
|
||||
color: '#6495ED'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const memoryChartOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
toolbox: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
max: 1,
|
||||
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.memoryChartData,
|
||||
itemStyle: {
|
||||
color: '#6495ED'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const diskChartOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
toolbox: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
max: 1,
|
||||
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.diskChartData,
|
||||
itemStyle: {
|
||||
color: '#6495ED'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const networkChartOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
toolbox: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
max: 1,
|
||||
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.networkChartData,
|
||||
itemStyle: {
|
||||
color: '#6495ED'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
cpuChart.setOption(cpuChartOption)
|
||||
memoryChart.setOption(memoryChartOption)
|
||||
diskChart.setOption(diskChartOption)
|
||||
networkChart.setOption(networkChartOption)
|
||||
})
|
||||
},
|
||||
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()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,308 @@
|
|||
import echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'storageTransfer',
|
||||
data() {
|
||||
return {
|
||||
searchId: '',
|
||||
cpuChartData: [],
|
||||
memoryChartData: [],
|
||||
diskChartData: [],
|
||||
networkChartData: [],
|
||||
hostInfoList: [],
|
||||
hostInfoShow: { id: 0, cpu: { useRatio: '80%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
|
||||
referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
|
||||
memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
|
||||
speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
|
||||
disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
|
||||
network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.makeCharts()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.hostInfoList = [{ id: '0', cpu: { useRatio: '80%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
|
||||
referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
|
||||
memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
|
||||
speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
|
||||
disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
|
||||
network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }},
|
||||
{ id: '1', cpu: { useRatio: '84%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
|
||||
referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
|
||||
memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
|
||||
speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
|
||||
disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
|
||||
network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }},
|
||||
{ id: '2', cpu: { useRatio: '70%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
|
||||
referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
|
||||
memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
|
||||
speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
|
||||
disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
|
||||
network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }},
|
||||
{ id: '3', cpu: { useRatio: '90%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
|
||||
referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
|
||||
memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
|
||||
speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
|
||||
disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
|
||||
network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }}]
|
||||
},
|
||||
searchHost() {
|
||||
const flag = this.getInfoShow(this.searchId)
|
||||
if (flag) {
|
||||
this.makeCharts()
|
||||
}
|
||||
},
|
||||
makeData() {
|
||||
const base = +new Date()
|
||||
const data = []
|
||||
for (let i = -60; i < 0; i++) {
|
||||
const now = new Date((base + i * 1000))
|
||||
data.push([+now, Math.abs(Math.random()).toFixed(2)])
|
||||
}
|
||||
return data
|
||||
},
|
||||
getChartsData() {
|
||||
this.cpuChartData = this.makeData()
|
||||
this.memoryChartData = this.makeData()
|
||||
this.diskChartData = this.makeData()
|
||||
this.networkChartData = this.makeData()
|
||||
},
|
||||
makeCharts() {
|
||||
this.getChartsData()
|
||||
const cpuChart = echarts.init(document.getElementById('CPUChart'), 'dark')
|
||||
const memoryChart = echarts.init(document.getElementById('memoryChart'), 'dark')
|
||||
const diskChart = echarts.init(document.getElementById('diskChart'), 'dark')
|
||||
const networkChart = echarts.init(document.getElementById('networkChart'), 'dark')
|
||||
|
||||
const cpuChartOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
toolbox: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
max: 1,
|
||||
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.cpuChartData,
|
||||
itemStyle: {
|
||||
color: '#6495ED'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const memoryChartOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
toolbox: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
max: 1,
|
||||
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.memoryChartData,
|
||||
itemStyle: {
|
||||
color: '#6495ED'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const diskChartOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
toolbox: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
max: 1,
|
||||
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.diskChartData,
|
||||
itemStyle: {
|
||||
color: '#6495ED'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const networkChartOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
toolbox: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
max: 1,
|
||||
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.networkChartData,
|
||||
itemStyle: {
|
||||
color: '#6495ED'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
cpuChart.setOption(cpuChartOption)
|
||||
memoryChart.setOption(memoryChartOption)
|
||||
diskChart.setOption(diskChartOption)
|
||||
networkChart.setOption(networkChartOption)
|
||||
},
|
||||
getInfoShow(hostId) {
|
||||
let idFlag = 0
|
||||
for (let i = 0; i < this.hostInfoList.length; i++) {
|
||||
if (this.hostInfoList[i].id === hostId) {
|
||||
this.hostInfoShow = this.hostInfoList[i]
|
||||
idFlag = 1
|
||||
}
|
||||
}
|
||||
if (idFlag === 0) {
|
||||
this.$message({
|
||||
message: '请输入正确的主机ID',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
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()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
#supplierManagement {
|
||||
.el-radio-group {
|
||||
font-size: 0;
|
||||
width: 25%;
|
||||
}
|
||||
.el-radio-button__inner {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-radio-button--mini .el-radio-button__inner {
|
||||
padding: 7px 7px;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.title_class {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.tab_row {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hr {
|
||||
border-bottom: 1px solid;
|
||||
opacity: 0.2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hr_tag {
|
||||
margin-top: 17px;
|
||||
border-bottom: 2px solid;
|
||||
color: #FFFFFF;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.hr_left {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.cardTop{
|
||||
height:30vh;
|
||||
margin: 20px 50px 20px 50px;
|
||||
padding: 10px 20px 0 20px;
|
||||
}
|
||||
.card1{
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height:20vh;
|
||||
margin-left: 25%;
|
||||
}
|
||||
.card1_inner_row{
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
.card1_inner_num {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 13pt;
|
||||
}
|
||||
.card2_inner_num {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
margin: 20px 50px 20px 50px;
|
||||
.el-table--mini .el-table__cell {
|
||||
padding: 2px 0
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 9px;
|
||||
border-color:white ;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
height: 8vh
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #a8a7a7;
|
||||
font-size: 11pt;
|
||||
height:25px;
|
||||
}
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div id="supplierManagement" >
|
||||
<!--右上角按钮-->
|
||||
<div style='position:absolute;right:2%;top:10%;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');height:90vh">
|
||||
<div class='tab_row'>
|
||||
<el-radio-group v-model="supplierSelected" size="mini" @change='changeSupplier' style='margin-left:50px; margin-top: 3vh;'>
|
||||
<el-row :gutter='10'>
|
||||
<el-col :span='6' v-for='item in supplierList' :key="item.id"><el-radio-button :label="item.id">{{item.name}}</el-radio-button></el-col>
|
||||
</el-row>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-card class="cardTop">
|
||||
<div class="title_class" style='margin-top: -5px'>云供应商基础信息</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="8" :offset='3'>
|
||||
<el-card>
|
||||
<div class='card1'>
|
||||
<div class="card1_inner_row">
|
||||
<span class="card1_inner_num">主机数目：</span>
|
||||
<span class="card1_inner_num" style="color:#87CEFA;">{{supplierInfoShow.hostNum }}</span>
|
||||
</div>
|
||||
<div class="card1_inner_row">
|
||||
<span class="card1_inner_num">正常主机数目：</span>
|
||||
<span class="card1_inner_num" style="color:#87CEFA;">{{supplierInfoShow.normalHostNum }}</span>
|
||||
</div>
|
||||
<div class="card1_inner_row">
|
||||
<span class="card1_inner_num">异常主机数目：</span>
|
||||
<span class="card1_inner_num" style="color:#87CEFA;">{{supplierInfoShow.abnormalHostNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset='2'>
|
||||
<el-card>
|
||||
<div class='card1'>
|
||||
<div class="card1_inner_row">
|
||||
<span class="card2_inner_num">计算信誉值:</span>
|
||||
<span class="card2_inner_num" style="color:#87CEFA;">{{supplierInfoShow.computeCredenceValue }}</span>
|
||||
</div>
|
||||
<div class="card1_inner_row">
|
||||
<span class="card2_inner_num">存储信誉值：</span>
|
||||
<span class="card2_inner_num" style="color:#87CEFA;">{{supplierInfoShow.memoryCredenceValue }}</span>
|
||||
</div>
|
||||
<div class="card1_inner_row">
|
||||
<span class="card2_inner_num">交易信誉值：</span>
|
||||
<span class="card2_inner_num" style="color:#87CEFA;">{{supplierInfoShow.transactionCredenceValue}}</span>
|
||||
</div>
|
||||
<div class="card1_inner_row">
|
||||
<span class="card1_inner_num">异常主机数目：</span>
|
||||
<span class="card1_inner_num" style="color:#87CEFA;">{{supplierInfoShow.compreCredenceValue}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<div class="title_class" style='margin-top: -5px;margin-left: 70px'>最新交易信息</div>
|
||||
<div style="height: 40vh" class='table_box'>
|
||||
<el-table
|
||||
:data="transactionInfoList"
|
||||
height="39vh"
|
||||
border
|
||||
style="width:100%">
|
||||
<el-table-column prop="userId" label="用户ID" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="supplierId" label="云商ID" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="transInfo" label="交易条目信息" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="transDate" label="交易时间" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="getStateText(scope.row.state).type"
|
||||
effect="dark">
|
||||
{{getStateText(scope.row.state).label}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
</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/supplierManagement.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import testApi from '@/api/testApi'
|
||||
|
||||
export default {
|
||||
name: 'supplierManagement',
|
||||
data() {
|
||||
return {
|
||||
supplierList: [],
|
||||
supplierSelected: '',
|
||||
supplierInfoShow: { },
|
||||
transactionInfoList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
await this.getTransactionInfoList()
|
||||
await this.getSupplierList()
|
||||
},
|
||||
methods: {
|
||||
async getTransactionInfoList() {
|
||||
await testApi.getTransactionInfoList().then((res) => {
|
||||
this.transactionInfoList = res.data
|
||||
}).catch((error) => {
|
||||
this.transactionInfoList = [
|
||||
{ id: '0', userId: '10000', supplierId: '0', transInfo: '计算服务', transDate: '2023-07-02', state: '0' },
|
||||
{ id: '1', userId: '20000', supplierId: '1', transInfo: '存储服务', transDate: '2023-07-02', state: '1' },
|
||||
{ id: '2', userId: '30000', supplierId: '2', transInfo: '计算服务', transDate: '2023-07-02', state: '2' },
|
||||
{ id: '3', userId: '40000', supplierId: '3', transInfo: '存储服务', transDate: '2023-07-02', state: '2' },
|
||||
{ id: '4', userId: '50000', supplierId: '1', transInfo: '计算服务', transDate: '2023-07-02', state: '0' },
|
||||
{ id: '5', userId: '60000', supplierId: '1', transInfo: '存储服务', transDate: '2023-07-02', state: '1' },
|
||||
{ id: '6', userId: '80000', supplierId: '1', transInfo: '存储服务', transDate: '2023-07-02', state: '2' },
|
||||
{ id: '7', userId: '10000', supplierId: '1', transInfo: '计算服务', transDate: '2023-07-02', state: '1' }
|
||||
]
|
||||
})
|
||||
},
|
||||
async getSupplierList() {
|
||||
await testApi.getSupplierList().then((res) => {
|
||||
this.supplierList = res.data
|
||||
this.initData()
|
||||
}).catch((error) => {
|
||||
this.supplierList = [
|
||||
{ id: 0, name: '阿里云', hostNum: 100, normalHostNum: 95, abnormalHostNum: 5, computeCredenceValue: 90, memoryCredenceValue: 80, transactionCredenceValue: 90, compreCredenceValue: 85 },
|
||||
{ id: 1, name: '联通云', hostNum: 100, normalHostNum: 98, abnormalHostNum: 2, computeCredenceValue: 95, memoryCredenceValue: 85, transactionCredenceValue: 95, compreCredenceValue: 90 },
|
||||
{ id: 2, name: '华为云', hostNum: 100, normalHostNum: 89, abnormalHostNum: 11, computeCredenceValue: 90, memoryCredenceValue: 90, transactionCredenceValue: 90, compreCredenceValue: 90 },
|
||||
{ id: 3, name: '火山云', hostNum: 100, normalHostNum: 93, abnormalHostNum: 7, computeCredenceValue: 85, memoryCredenceValue: 85, transactionCredenceValue: 90, compreCredenceValue: 85 }
|
||||
]
|
||||
this.initData()
|
||||
})
|
||||
},
|
||||
async changeSupplier() {
|
||||
await testApi.getSupplierInfoById({ id: this.supplierSelected }).then((res) => {
|
||||
this.supplierInfoShow = res.data
|
||||
}).catch((error) => {
|
||||
for (let i = 0; i < this.supplierList.length; i++) {
|
||||
if (this.supplierList[i].id === this.supplierSelected) {
|
||||
this.supplierInfoShow = this.supplierList[i]
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
initData() {
|
||||
if (this.supplierList.length > 0) {
|
||||
this.supplierSelected = this.supplierList[0].id
|
||||
this.supplierInfoShow = this.supplierList[0]
|
||||
}
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
getStateText(state) {
|
||||
switch (state) {
|
||||
case '0':
|
||||
return {
|
||||
label: '已完成',
|
||||
type: ''
|
||||
}
|
||||
case '1':
|
||||
return {
|
||||
label: '未完成',
|
||||
type: 'warning'
|
||||
}
|
||||
case '2':
|
||||
return {
|
||||
label: '进行中',
|
||||
type: 'success'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue