调整overView页面中table列表的布局
处理history页面进入请求的列表接口没有携带日期参数的问题
This commit is contained in:
parent
6445ec0ae7
commit
eacddb549d
|
@ -240,7 +240,10 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
stationOptions: [],
|
stationOptions: [],
|
||||||
paramsArg: {},
|
paramsArg: {
|
||||||
|
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||||
|
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
|
||||||
|
},
|
||||||
columns,
|
columns,
|
||||||
columns_info,
|
columns_info,
|
||||||
dataSource: [],
|
dataSource: [],
|
||||||
|
|
|
@ -90,28 +90,23 @@ const columns = [
|
||||||
title: 'NUCLIDE',
|
title: 'NUCLIDE',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
dataIndex: 'nuclide',
|
dataIndex: 'nuclide',
|
||||||
// width: 200,
|
|
||||||
},{
|
},{
|
||||||
title: 'VALUE',
|
title: 'VALUE',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
dataIndex: 'val',
|
dataIndex: 'val',
|
||||||
// width: 200,
|
|
||||||
},{
|
|
||||||
title: 'CYCLE',
|
|
||||||
align: 'center',
|
|
||||||
dataIndex: 'cycle',
|
|
||||||
// width: 200,
|
|
||||||
},{
|
},{
|
||||||
title: 'SOURCE TYPE',
|
title: 'SOURCE TYPE',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
dataIndex: 'datasource',
|
dataIndex: 'datasource',
|
||||||
// width: 200,
|
|
||||||
},{
|
},{
|
||||||
title: 'CACL DATE',
|
title: 'CACL DATE',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
dataIndex: 'caclDate',
|
dataIndex: 'caclDate',
|
||||||
// width: 200,
|
},{
|
||||||
},
|
title: 'CYCLE',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'cycle'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
|
@ -168,55 +168,55 @@ import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: 'NAME',
|
title: 'NAME',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'name'
|
dataIndex: 'name'
|
||||||
},{
|
},{
|
||||||
title: 'STATUS',
|
title: 'STATUS',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'online',
|
dataIndex: 'online',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'status'
|
customRender: 'status'
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: 'IP ADDRESS',
|
title: 'IP ADDRESS',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'ipAddress'
|
dataIndex: 'ipAddress'
|
||||||
},{
|
},{
|
||||||
title: 'DB TYPE',
|
title: 'DB TYPE',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'type'
|
dataIndex: 'type'
|
||||||
},{
|
},{
|
||||||
title: 'PROT',
|
title: 'PROT',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'port'
|
dataIndex: 'port'
|
||||||
},{
|
},{
|
||||||
title: 'SLOW QUERY',
|
title: 'SLOW QUERY',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'slowQuery'
|
dataIndex: 'slowQuery'
|
||||||
},{
|
},{
|
||||||
title: 'ALARMS',
|
title: 'ALARMS',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'alarms',
|
dataIndex: 'alarms',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'alarms',
|
customRender: 'alarms',
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: 'CPU UTILIZATION',
|
title: 'CPU UTILIZATION',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'cpuUutilzation',
|
dataIndex: 'cpuUutilzation',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'cpu',
|
customRender: 'cpu',
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: 'MEMORY USAGE',
|
title: 'MEMORY USAGE',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'memoryUsage',
|
dataIndex: 'memoryUsage',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'memory',
|
customRender: 'memory',
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: 'DISK USAGE',
|
title: 'DISK USAGE',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'diskUsage',
|
dataIndex: 'diskUsage',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'disk',
|
customRender: 'disk',
|
||||||
|
|
|
@ -128,69 +128,6 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var data1 = [];
|
|
||||||
var dataCount = 24;
|
|
||||||
var startTime = +new Date();
|
|
||||||
console.log("startTime",startTime);
|
|
||||||
var categories = ['email'];
|
|
||||||
var types = [
|
|
||||||
{ name: 'num', color: '#0aaf25' },
|
|
||||||
];
|
|
||||||
var legendData = types.map(item=>{
|
|
||||||
return item.name
|
|
||||||
})
|
|
||||||
// Generate mock data
|
|
||||||
categories.forEach((category, index) => {
|
|
||||||
var baseTime = startTime;
|
|
||||||
for (var i = 0; i < dataCount; i++) {
|
|
||||||
var typeItem = types[0];
|
|
||||||
var duration = Math.round(Math.random() * 10000);
|
|
||||||
data1.push({
|
|
||||||
name: typeItem.name,
|
|
||||||
value: [index, baseTime, (baseTime += duration), duration],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: typeItem.color
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
baseTime += Math.round(Math.random() * 2000);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
function renderItem1(params, api) {
|
|
||||||
console.log("params",params);
|
|
||||||
console.log("api",api);
|
|
||||||
var categoryIndex = api.value(0);
|
|
||||||
var start = api.coord([api.value(1), categoryIndex]);
|
|
||||||
var end = api.coord([api.value(2), categoryIndex]);
|
|
||||||
var height = api.size([0, 1])[1] * 1;
|
|
||||||
console.log(categoryIndex);
|
|
||||||
console.log(start);
|
|
||||||
console.log(end);
|
|
||||||
console.log(height);
|
|
||||||
var rectShape = echarts.graphic.clipRectByRect(
|
|
||||||
{
|
|
||||||
x: start[0],
|
|
||||||
y: start[1] - height / 2,
|
|
||||||
width: end[0] - start[0],
|
|
||||||
height: height
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: params.coordSys.x,
|
|
||||||
y: params.coordSys.y,
|
|
||||||
width: params.coordSys.width,
|
|
||||||
height: params.coordSys.height
|
|
||||||
}
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
rectShape && {
|
|
||||||
type: 'rect',
|
|
||||||
transition: ['shape'],
|
|
||||||
shape: rectShape,
|
|
||||||
style: api.style()
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import BoxTitle from '../../components/boxTitle.vue';
|
import BoxTitle from '../../components/boxTitle.vue';
|
||||||
|
@ -603,60 +540,6 @@ export default {
|
||||||
this.guageStore.resize();
|
this.guageStore.resize();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
drawTimeline() {
|
|
||||||
this.timeLine = echarts.init(document.getElementById("timeLine"))
|
|
||||||
let option = {
|
|
||||||
color:['#0aaf25'],
|
|
||||||
tooltip: {
|
|
||||||
formatter: function (params) {
|
|
||||||
return params.marker + params.name + ': ' + params.value[3] + ' ms';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '10%',
|
|
||||||
right: '10%',
|
|
||||||
bottom: '0',
|
|
||||||
top:15,
|
|
||||||
height: 32,
|
|
||||||
containLabel: false,
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
min: startTime,
|
|
||||||
axisLabel: {
|
|
||||||
color: "#ade6ee",
|
|
||||||
fontSize: 14,
|
|
||||||
formatter: function (val) {
|
|
||||||
console.log("valvalvalval",val);
|
|
||||||
return Math.max(0, val - startTime) + ' ms';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
show:false,
|
|
||||||
data: categories
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{ name: legendData[0], type: 'bar', data: [] },
|
|
||||||
{
|
|
||||||
type: 'custom',
|
|
||||||
renderItem: renderItem1,
|
|
||||||
encode: {
|
|
||||||
x: [1, 2],
|
|
||||||
y: 0
|
|
||||||
},
|
|
||||||
data: data1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.timeLine.setOption(option)
|
|
||||||
window.addEventListener("resize", function () {
|
|
||||||
this.timeLine.resize();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
drawAreaMail() {
|
drawAreaMail() {
|
||||||
this.areaMailLine = echarts.init(document.getElementById("mailArea"))
|
this.areaMailLine = echarts.init(document.getElementById("mailArea"))
|
||||||
let option = {
|
let option = {
|
||||||
|
|
|
@ -195,57 +195,63 @@ import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: 'NAME',
|
title: 'NAME',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'name'
|
dataIndex: 'name'
|
||||||
},{
|
},{
|
||||||
title: 'STATUS',
|
title: 'STATUS',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'online',
|
dataIndex: 'online',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'status'
|
customRender: 'status'
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
|
<<<<<<< Updated upstream
|
||||||
title: 'ENABLE',
|
title: 'ENABLE',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
dataIndex: 'enabled',
|
dataIndex: 'enabled',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'enabled'
|
customRender: 'enabled'
|
||||||
}
|
}
|
||||||
|
=======
|
||||||
|
title: 'ENABLE OR NOT',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'enabled'
|
||||||
|
>>>>>>> Stashed changes
|
||||||
},{
|
},{
|
||||||
title: 'E-MAIL',
|
title: 'E-MAIL',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'emailServerAddress'
|
dataIndex: 'emailServerAddress'
|
||||||
},{
|
},{
|
||||||
title: "TODAY'S TOTAL",
|
title: "TODAY'S TOTAL",
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'today',
|
dataIndex: 'today',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'today'
|
customRender: 'today'
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: "YESTERDAY'S TOTAL",
|
title: "YESTERDAY'S TOTAL",
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'yesterday',
|
dataIndex: 'yesterday',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'yesterday'
|
customRender: 'yesterday'
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: "WEEKLY TOTAL",
|
title: "WEEKLY TOTAL",
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'weekly',
|
dataIndex: 'weekly',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'weekly'
|
customRender: 'weekly'
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: 'ALARMS',
|
title: 'ALARMS',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'alarms',
|
dataIndex: 'alarms',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'alarms',
|
customRender: 'alarms',
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: "STOER CAPACITY",
|
title: "STOER CAPACITY",
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'stoerCapacity',
|
dataIndex: 'stoerCapacity',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'stoer',
|
customRender: 'stoer',
|
||||||
|
|
|
@ -122,43 +122,43 @@ import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: 'NAME',
|
title: 'NAME',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'name'
|
dataIndex: 'name'
|
||||||
},{
|
},{
|
||||||
title: 'STATUS',
|
title: 'STATUS',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'serverInfo',
|
dataIndex: 'serverInfo',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'status'
|
customRender: 'status'
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: 'IP ADDRESS',
|
title: 'IP ADDRESS',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'ipAddress'
|
dataIndex: 'ipAddress'
|
||||||
},{
|
},{
|
||||||
title: 'ALARMS',
|
title: 'ALARMS',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'alarms',
|
dataIndex: 'alarms',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'alarms',
|
customRender: 'alarms',
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: 'CPU UTILIZATION',
|
title: 'CPU UTILIZATION',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'cpuUutilzation',
|
dataIndex: 'cpuUutilzation',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'cpu',
|
customRender: 'cpu',
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: 'MEMORY USAGE',
|
title: 'MEMORY USAGE',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'memoryUsage',
|
dataIndex: 'memoryUsage',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'memory',
|
customRender: 'memory',
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
title: 'DISK USAGE',
|
title: 'DISK USAGE',
|
||||||
align: 'left',
|
align: 'center',
|
||||||
dataIndex: 'diskUsage',
|
dataIndex: 'diskUsage',
|
||||||
scopedSlots: {
|
scopedSlots: {
|
||||||
customRender: 'disk',
|
customRender: 'disk',
|
||||||
|
|
Loading…
Reference in New Issue
Block a user