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