|
|
|
@ -7,7 +7,7 @@ |
|
|
|
<el-button v-hasPermi="['maintain:equipmentOnlineAnalysis:export']" size="mini" icon="el-icon-download" class="btnSearch" @click="SystemStatusExport('1')">导出丢包</el-button> |
|
|
|
</div> |
|
|
|
<div class="right-div"> |
|
|
|
<InputSearch |
|
|
|
<InputSearch |
|
|
|
ref="searchComp" |
|
|
|
:formList="searchFormList" @handleSearch="handleSearch" /> |
|
|
|
</div> |
|
|
|
@ -17,7 +17,7 @@ |
|
|
|
<el-checkbox-group class="device" v-model="devices" @change="onDeviceChange"> |
|
|
|
<el-checkbox v-for="(item,index) in deviceTypeList" :label="item.value" >{{ item.label }}</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="cright"> |
|
|
|
<div class="queryChart"> |
|
|
|
<Empty |
|
|
|
@ -58,10 +58,10 @@ |
|
|
|
</template> </ElTableColumn> |
|
|
|
<ElTableColumn prop="id" width="200" label="日志"> |
|
|
|
<template slot="header" slot-scope="scope"> |
|
|
|
|
|
|
|
<InputSearch2 |
|
|
|
|
|
|
|
<InputSearch2 |
|
|
|
placeholder="搜索" |
|
|
|
:formList="searchFormList2" |
|
|
|
:formList="searchFormList2" |
|
|
|
@handleSearch="handleSearch2" /> |
|
|
|
</template> |
|
|
|
<template slot-scope="scope"> |
|
|
|
@ -142,7 +142,7 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
destroyed() { |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
showRecord(item){ |
|
|
|
@ -206,42 +206,79 @@ export default { |
|
|
|
params.direction = this.direction |
|
|
|
} |
|
|
|
request({ |
|
|
|
url: "/system/status/list", |
|
|
|
url: "/system/status/listHourSystem", |
|
|
|
method: "get", |
|
|
|
params |
|
|
|
}).then((res) => { |
|
|
|
}).then(res => { |
|
|
|
if (res.code == 200) { |
|
|
|
const _chartsOption = _.cloneDeep(chartsOption) |
|
|
|
const _chartsOption = _.cloneDeep(chartsOption); |
|
|
|
this.setStatus("01", "finish"); |
|
|
|
|
|
|
|
let x = []; |
|
|
|
let serie = []; |
|
|
|
for(let i in res.data){ |
|
|
|
|
|
|
|
// 遍历外层的分类 |
|
|
|
Object.keys(res.data).forEach(i => { |
|
|
|
const s = _.cloneDeep(chartsOption.series[0]); |
|
|
|
if(x.length === 0){ |
|
|
|
for(let j in res.data[i]){ |
|
|
|
x.push(j) |
|
|
|
|
|
|
|
// 获取对应分类的设备信息 |
|
|
|
const _deviceType = _.find(deviceType, { value: i }); |
|
|
|
s.name = _deviceType.label; |
|
|
|
s.itemStyle.color = _deviceType.color; |
|
|
|
|
|
|
|
// 遍历该分类下的日期 |
|
|
|
Object.values(res.data[i]).forEach(dateData => { |
|
|
|
// 遍历每个日期下的时间点 |
|
|
|
Object.keys(dateData).forEach(timeStr => { |
|
|
|
// 如果X轴数据还未初始化，则添加时间点 |
|
|
|
if (!x.includes(timeStr)) { |
|
|
|
x.push(timeStr); |
|
|
|
} |
|
|
|
|
|
|
|
// 添加数据点到series |
|
|
|
s.data.push(parseFloat(dateData[timeStr].replace(/%|W/, ''))); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
serie.push(s); |
|
|
|
}); |
|
|
|
|
|
|
|
// 对X轴数据进行排序 |
|
|
|
x.sort((a, b) => moment(a).diff(moment(b))); |
|
|
|
|
|
|
|
// 更新图表选项 |
|
|
|
_chartsOption.xAxis = { |
|
|
|
data: x, |
|
|
|
axisLabel: { |
|
|
|
formatter: function (value, index) { |
|
|
|
const date = moment(value); |
|
|
|
const isSameDay = index > 0 && moment(x[index - 1]).isSame(date, 'day'); |
|
|
|
return date.format('YYYY-MM-DD'); |
|
|
|
} |
|
|
|
} |
|
|
|
const _deviceType = _.find(deviceType,{value:i}) |
|
|
|
s.name = _deviceType.label |
|
|
|
s.itemStyle.color = _deviceType.color |
|
|
|
s.data = []; |
|
|
|
for(let j in res.data[i]){ |
|
|
|
const p = res.data[i][j]; |
|
|
|
s.data.push(parseFloat(p.substr(0,p.length-1))); |
|
|
|
}; |
|
|
|
// 更新 tooltip 选项，以显示完整的时间格式 |
|
|
|
_chartsOption.tooltip = { |
|
|
|
trigger: 'axis', |
|
|
|
formatter: function (params) { |
|
|
|
let tooltip = ''; |
|
|
|
params.forEach(param => { |
|
|
|
const date = moment(param.name); |
|
|
|
tooltip += `${date.format('YYYY-MM-DD HH:mm')}<br>${param.seriesName}: ${param.value}%<br>`; |
|
|
|
}); |
|
|
|
return tooltip; |
|
|
|
} |
|
|
|
serie.push(s); |
|
|
|
} |
|
|
|
x.sort(function(a,b){return moment(a).diff(moment(b))}) |
|
|
|
_chartsOption.xAxis.data = x; |
|
|
|
_chartsOption.series= serie; |
|
|
|
}; |
|
|
|
|
|
|
|
_chartsOption.series = serie; |
|
|
|
|
|
|
|
// 初始化并设置ECharts图表 |
|
|
|
this.queryChart = echarts.init(this.$refs["queryChart"]); |
|
|
|
this.queryChart.setOption(_chartsOption); |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//查询列表 |
|
|
|
initQueryTable() { |
|
|
|
this.loading = true; |
|
|
|
@ -259,7 +296,7 @@ export default { |
|
|
|
if(this.deviceName){ |
|
|
|
params.deviceName = this.deviceName |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
request({ |
|
|
|
url: "/system/status/tablist", |
|
|
|
method: "get", |
|
|
|
@ -269,7 +306,7 @@ export default { |
|
|
|
this.loading = false; |
|
|
|
this.total = res.total; |
|
|
|
this.tableData = res.rows |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
@ -288,7 +325,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
onRefreshData() { |
|
|
|
|
|
|
|
|
|
|
|
this.$refs.searchComp.handleResetForm(); |
|
|
|
|
|
|
|
this.searchData.pageNum = 1; |
|
|
|
@ -307,12 +344,12 @@ export default { |
|
|
|
|
|
|
|
this.deviceName = data.deviceName |
|
|
|
this.direction = data.direction |
|
|
|
|
|
|
|
|
|
|
|
this.initQueryChart(); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
handleSearch2(data){ |
|
|
|
|
|
|
|
|
|
|
|
this.searchData.pageNum = 1; |
|
|
|
this.tabelSearch = data; |
|
|
|
this.initQueryTable(); |
|
|
|
@ -342,7 +379,7 @@ export default { |
|
|
|
if(t === '1'){ |
|
|
|
params.exportType='1' |
|
|
|
fileName = '设备丢包信息.xlsx' |
|
|
|
} |
|
|
|
} |
|
|
|
getSystemStatusExport(params) |
|
|
|
.then((res) => { |
|
|
|
const url = window.URL.createObjectURL(new Blob([res])); |
|
|
|
@ -377,7 +414,7 @@ export default { |
|
|
|
this.queryChart.resize(); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
