Skip to content

I
IT-monitor
Commit 58d06c03 authored by Asjoker's avatar Asjoker
Browse files
Options

feat: 综合监控-剩余

parent 52996207
Hide whitespace changes
Inline Side-by-side
Showing with 2214 additions and 5 deletions
src/views/IntegratedMonitor/reportStatistics/TOPNReport.vue 0 → 100644
View file @ 58d06c03
<template>
<div id="sylog-container" class="flowStatistics-container">
<div style="padding: 10px;text-align: right">
<el-button type="primary" @click="changeTime">添加</el-button>
<el-button type="primary" @click="changeTime">修改</el-button>
<el-button type="primary" @click="handleDelete">删除</el-button>
<el-button type="primary" @click="handleExport">导出报表</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button id="fullScreen" type="primary">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
</div>
<div class="placeholder" />
<div class="app-container-realTime">
<div style="font-weight: bold">流量统计图</div>
<el-form ref="queryForm" style="padding: 0 0 0 10px;margin-top: 10px" :model="queryParams" :style="{ paddingTop: isScreen ? '20px' : '0' }" :inline="true" label-width="68px">
<el-button-group style="margin-right: 10px;padding-bottom: 10px">
<el-button>今天</el-button>
<el-button>昨天</el-button>
<el-button>三天</el-button>
<el-button>一个月</el-button>
<el-button @click="changeCustom">自定义</el-button>
</el-button-group>
</el-form>
<div style="padding: 10px">
<div id="echarts-one" class="span_1">
<div v-show="echartsFlag === '0'" id="dataCharts_one" ref="chart_one" style="height: 35vh" />
</div>
</div>
<div v-show="echartsFlag === '0'" style="padding: 10px 10px 10px 0">
<el-table
v-loading="loading"
border
:data="initialData"
height="200"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column type="index" label="编号" width="55" align="center" />
<el-table-column :show-overflow-tooltip="true" label="管理对象" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.object || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测点名称" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.point || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="内存使用率 %" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.flowSum || '-' }}
</template>
</el-table-column>
</el-table>
</div>
<pagination
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
<el-dialog :visible.sync="open" title="添加报告" width="700px">
<el-form label-width="110px">
<el-form-item label="报告标题">
<el-input />
</el-form-item>
<el-form-item label="列表个数">
<el-input />
</el-form-item>
<el-form-item label="选择设备列表">
<div class="equipmentDiv">
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
/>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="customOpen" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import screenfull from 'screenfull'
import * as echarts from 'echarts'
export default {
name: 'Sylog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 8,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 是否显示弹出层
customOpen: false,
// 表单参数
form: {},
// 表单参数
isScreen: false,
echartsFlag: '0',
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
currentTab: '1',
data: [
{
monitorTime: '2022-05-25 00:00:00',
get1: '0.00',
send1: '15266.00',
sum1: '15266.00'
},
{
monitorTime: '2022-05-25 01:00:00',
get1: '0.00',
send1: '0.00',
sum1: '0.00'
},
{
monitorTime: '2022-05-25 02:00:00',
get1: '0.00',
send1: '2455.00',
sum1: '2455.00'
},
{
monitorTime: '2022-05-25 03:00:00',
get1: '2455.00',
send1: '0.00',
sum1: '2455.00'
},
{
monitorTime: '2022-05-25 04:00:00',
get1: '0.00',
send1: '54545.00',
sum1: '54545.00'
},
{
monitorTime: '2022-05-25 05:00:00',
get1: '34.00',
send1: '15266.00',
sum1: '15300.00'
},
{
monitorTime: '2022-05-25 06:00:00',
get1: '24.00',
send1: '15266.00',
sum1: '15290.00'
},
{
monitorTime: '2022-05-25 07:00:00',
get1: '15234.00',
send1: '15266.00',
sum1: '30500.00'
},
{
monitorTime: '2022-05-25 08:00:00',
get1: '0.00',
send1: '15266.00',
sum1: '15266.00'
},
{
monitorTime: '2022-05-25 09:00:00',
get1: '0.00',
send1: '15266.00',
sum1: '15266.00'
}
],
initialData: [
{
id: '1',
object: '核心交换_192.168.6.155',
point: 'NetWork 内存',
flowSum: '20.00'
},
{
id: '1',
object: '18F-二网段10.1.1.38',
point: 'NetWork 内存',
flowSum: '90.00'
},
{
id: '1',
object: '总部24F-机柜2-24U',
point: 'NetWork 内存',
flowSum: '29.00'
},
{
id: '1',
object: '10.1.1.13(总部24-机柜2-16U-去贵阳的核心路由)',
point: 'NetWork 内存',
flowSum: '20.00'
},
{
id: '1',
object: '130网段虚拟设备',
point: 'NetWork 内存',
flowSum: '20.00'
},
{
id: '1',
object: '131网段虚拟设备',
point: 'NetWork 内存',
flowSum: '90.00'
},
{
id: '1',
object: '132网段虚拟设备',
point: 'NetWork 内存',
flowSum: '29.00'
},
{
id: '1',
object: '133网段虚拟设备',
point: 'NetWork 内存',
flowSum: '20.00'
}
],
treeData: [{
id: 1,
label: '本机容器',
children: [{
id: 4,
label: '虚拟化平台',
children: [{
id: 9,
label: '虚拟设备'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '服务器硬件',
children: [{
id: 5,
label: '云打印服务器'
}, {
id: 6,
label: '服务器'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
this.genderStatistics3()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
var elementResizeDetectorMaker = require('element-resize-detector')
var erd = elementResizeDetectorMaker()
var that = this
erd.listenTo(document.getElementById('echarts-one'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_one')).resize()
})
})
},
methods: {
/** 饼状图（1）*/
genderStatistics3() {
const myChartGender = echarts.init(document.getElementById('dataCharts_one'))
var optionEnter3 = {
tooltip: {
trigger: 'item'
},
xAxis: {
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
yAxis: {
type: 'value'
},
color: '#E9772B',
series: [
{
data: [67, 63.7, 32.5, 32.5, 32.5, 32.5, 32.5, 32.1, 32.1, 32.1],
type: 'bar'
}
]
}
myChartGender.setOption(optionEnter3)
},
handleChangeCharts(value) {
this.echartsFlag = value
},
handleExport() {
window.location.href = process.env.BASE_URL + 'exportFile.xls'
},
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled && this.isScreen === false) {
screenfull.request(element)
} else {
screenfull.exit()
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
handleDelete() {
const h = this.$createElement
this.$confirm(h('p', null, [
h('span', null, '确定删除本报告吗？ '),
h('br', null),
h('span', { style: 'font-size: 8px' }, '提示：该操作无法恢复')
]), '', {
customClass: 'custom-confirm',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
/** 查询按钮操作 */
changeCustom() {
this.customOpen = !this.customOpen
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.flowStatistics-container{
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
.app-container-realTime {
padding: 0 20px 10px;
font-size: 18px;
.equipmentDiv{
max-height: 200px;
height: 200px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
</style>
src/views/IntegratedMonitor/reportStatistics/addStatisticReport.vue 0 → 100644
View file @ 58d06c03
<template>
<div id="sylog-container" class="app-container-autoSearch">
<div style="font-weight: bold;padding-left: 20px">设备统计</div>
<el-form ref="queryForm" :model="queryParams" style="padding-top: 30px" :inline="true" label-width="100px">
<el-form-item label="报告名称">
<el-input />
</el-form-item>
<div v-for="item in addPassword" :key="item.id" style="display: block">
<div style="width: calc(80% + 100px);margin-top: 20px">
<div style="display:inline-block;font-weight: bold;padding-left: 20px">{{ '图' + item.length }}</div>
<el-button type="text" icon="el-icon-close" style="display:inline-block;margin-left: 800px" @click="deleteAccount(item.id)"></el-button>
</div>
<el-form-item label="名称">
<el-input />
<el-radio v-model="radio" label="1">线形图</el-radio>
<el-radio v-model="radio" label="2">面积图</el-radio>
<el-radio v-model="radio" label="3">柱状图</el-radio>
</el-form-item>
<div style="margin-left: 100px">
<el-table
v-loading="loading"
border
style="width: 800px"
:data="initialData"
height="200"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column :show-overflow-tooltip="true" label="颜色" width="80" align="center" prop="monitorObject">
<template>
{{ '自动填充' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="范围" align="center" prop="monitorObject">
<template>
{{ '本机容器' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测点范围" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.point || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测指标" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.standard || '-' }}
</template>
</el-table-column>
<el-table-column label="操作" width="250">
<template>
<el-button
size="small"
type="primary"
@click="addOrMulti('1')"
>
编辑
</el-button>
<el-button
size="small"
type="primary"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div style="width: 100%;display: block;margin-left: 500px">
<el-button style="margin: 10px 10px 0 0" @click="addOrMulti('2')">单个增加监测指标</el-button>
<el-button style="margin: 10px 0 0" @click="addOrMulti('1')">批量增加监测指标</el-button>
</div>
<br/>
</div>
</div>
<el-button style="margin-top: 20px" @click="addAccount">添加图</el-button>
<el-divider/>
<div style="width: 100%">
<el-button size="middle" type="primary" style="margin: 20px 20px 0 30px" @click="goBack">保存</el-button>
<el-button size="middle" style="margin: 20px 0 0" @click="goBack">取消</el-button>
</div>
</el-form>
<el-dialog :visible.sync="open" title="添加报告" width="700px">
<el-form label-width="110px">
<el-form-item label="监测点">
<div class="equipmentDiv">
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
/>
</div>
</el-form-item>
<el-form-item label="监测类型">
<el-select v-model="type">
<el-option value="1" label="NetWork CPU" />
<el-option value="2" label="LinuxCPU" />
<el-option value="3" label="Agent连接" />
</el-select>
</el-form-item>
<el-form-item v-if="flag !== '2'" label="监测指标">
<el-select v-model="standard">
<el-option value="1" label="CPU使用率%" />
</el-select>
</el-form-item>
<el-form-item v-if="flag === '2'" label="颜色">
<el-checkbox>自动填充颜色 ( 如勾选此项,将会自动填充颜色,无视下方选择 )</el-checkbox>
<br>
<el-color-picker v-model="color" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'Sylog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 10,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
PasswordOpen: false,
passwordTitle: '',
dialogFlag: 'mysql',
radio: '1',
standard: '1',
type: '1',
addPassword: [
{
id: '1',
length: 1
}
],
flag: '1',
color: '#000000',
// 表单参数
form: {},
// 表单参数
isScreen: screenfull.isEnabled,
// 查询参数
queryParams: {
page: 1,
rows: 10,
startInput: '192.168.1.28',
endInput: '255.255.255.0',
select: '2',
logContent: ''
},
data: [
{
ipAddress: '39.100.39.54',
origin: 'agent',
port: '2198'
},
{
ipAddress: '45.100.25.54',
origin: 'agent',
port: '2022-05-17 00:59:01'
},
{
ipAddress: '22.100.1.54',
origin: 'mysql',
port: '3306'
},
{
ipAddress: '56.100.17.54',
origin: 'mysql',
port: '3306'
},
{
ipAddress: '65.100.39.54',
origin: 'oracle',
port: '1521'
},
{
ipAddress: '1.80.25.55',
origin: 'oracle',
port: '1521'
},
{
ipAddress: '39.100.39.54',
origin: 'snmp',
port: '161'
},
{
ipAddress: '45.100.25.54',
origin: 'snmp',
port: '161'
},
{
ipAddress: '45.87.77.44',
origin: 'ssh',
port: '22'
},
{
ipAddress: '9.15.76.44',
origin: 'ssh',
port: '22'
}
],
initialData: [
{
software: 'agent',
createTime: '2198',
logContent: '0'
},
{
software: 'mysql',
createTime: '3306',
logContent: '1'
},
{
software: 'oracle',
createTime: '1521',
logContent: '1'
},
{
software: 'snmp',
createTime: '161',
logContent: '1'
},
{
software: 'ssh',
createTime: '22',
logContent: '1'
}
],
treeData: [{
id: 1,
label: '本机容器',
children: [{
id: 4,
label: '虚拟化平台',
children: [{
id: 9,
label: '虚拟设备'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '服务器硬件',
children: [{
id: 5,
label: '云打印服务器'
}, {
id: 6,
label: '服务器'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
},
methods: {
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
this.$refs.theTable.toggleRowSelection(this.initialData[1], true)
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.open = true
},
/** 查询按钮操作 */
addOrMulti(value) {
this.open = true
this.flag = value
},
goBack() {
this.$router.go(-1)
},
/** 查询按钮操作 */
changeSenior(row) {
this.PasswordOpen = true
this.passwordTitle = row.software + '--高级'
this.dialogFlag = row.software
},
addAccount() {
this.addPassword.push({
id: this.addPassword.length,
length: this.addPassword.length + 1
})
},
deleteAccount(id) {
this.addPassword.splice(id, 1)
},
/** 查询按钮操作 */
changeSelect() {
if (this.queryParams.select === '1') {
this.queryParams.startInput = ''
this.queryParams.endInput = ''
} else if (this.queryParams.select === '2') {
this.queryParams.startInput = '192.168.1.28'
this.queryParams.endInput = '255.255.255.0'
}
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.app-container-autoSearch {
padding: 0 20px;
font-size: 18px;
.equipmentDiv{
max-height: 200px;
height: 200px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
}
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
.innerPort{
::v-deep .el-input__inner {
padding: 0 10px!important;
}
}
}
</style>
src/views/IntegratedMonitor/reportStatistics/errorReport.vue 0 → 100644
View file @ 58d06c03
<template>
<div id="sylog-container" class="flowStatistics-container">
<div style="padding: 10px;text-align: right">
<el-button type="primary" @click="changeTime">添加</el-button>
<el-button type="primary" @click="changeTime">修改</el-button>
<el-button type="primary" @click="handleDelete">删除</el-button>
<el-button type="primary" @click="handleExport">导出报表</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button id="fullScreen" type="primary">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
</div>
<div class="placeholder" />
<div class="app-container-realTime">
<div style="font-weight: bold">设备统计</div>
<el-form ref="queryForm" style="padding: 0 0 0 10px;margin-top: 10px" :model="queryParams" :style="{ paddingTop: isScreen ? '20px' : '0' }" :inline="true" label-width="68px">
<el-button-group style="margin-right: 10px;padding-bottom: 10px">
<el-button>日报</el-button>
<el-button>周报</el-button>
<el-button>月报</el-button>
<el-button @click="changeCustom">自定义</el-button>
</el-button-group>
<el-form-item label="统计单元" label-width="auto">
<el-select v-model="queryParams.ipAddress">
<el-option value="1" label="小时">小时</el-option>
<el-option value="2" label="天">天</el-option>
</el-select>
</el-form-item>
<el-form-item label="统计数据类型" label-width="auto">
<el-select v-model="queryParams.logContent">
<el-option value="1" label="平均值">平均值</el-option>
<el-option value="2" label="最大值">最大值</el-option>
<el-option value="3" label="最小值">最小值</el-option>
</el-select>
</el-form-item>
</el-form>
<div style="padding: 10px">
<div id="echarts-one" class="span_1">
<div v-show="echartsFlag === '0'" id="dataCharts_one" ref="chart_one" style="height: 35vh" />
</div>
</div>
<div v-show="echartsFlag === '0'" style="padding: 10px 10px 10px 0">
<el-table
v-loading="loading"
border
:data="initialData"
height="200"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column label="管理对象">
<el-table-column :show-overflow-tooltip="true" label="名称" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.object || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="ip" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.ip || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="类型" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.type || '-' }}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="次数统计">
<el-table-column :show-overflow-tooltip="true" label="故障次数" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.num || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="百分比(%)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.numPer || '-' }}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="故障持续时间统计">
<el-table-column :show-overflow-tooltip="true" label="故障开始时间" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.errorStart || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="故障持续时间" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.errorLong || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="百分比(%)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.errorPer || '-' }}
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
<div style="padding: 10px">
<div style="font-weight: bold">监测点统计</div>
<div id="echarts-two" class="span_1">
<div v-show="echartsFlag === '0'" id="dataCharts_two" ref="chart_one" style="height: 35vh" />
</div>
</div>
<div v-show="echartsFlag === '0'" style="padding: 10px 10px 10px 0">
<el-table
v-loading="loading"
border
:data="data"
height="200"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column label="管理对象">
<el-table-column :show-overflow-tooltip="true" label="名称" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.object || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="ip" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.ip || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="类型" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.type || '-' }}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="次数统计">
<el-table-column :show-overflow-tooltip="true" label="故障次数" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.num || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="百分比(%)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.numPer || '-' }}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="故障持续时间统计">
<el-table-column :show-overflow-tooltip="true" label="故障开始时间" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.errorStart || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="故障持续时间" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.errorLong || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="百分比(%)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.errorPer || '-' }}
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
<div style="padding: 10px">
<div style="font-weight: bold">趋势图</div>
<div style="width: 100%;text-align: center">A10负载均衡---10.1.1.1</div>
<div id="echarts-three" class="span_1">
<div v-show="echartsFlag === '0'" id="dataCharts_three" ref="chart_three" style="height: 35vh" />
</div>
</div>
<el-dialog :visible.sync="open" title="添加报告" width="700px">
<el-form label-width="110px">
<el-form-item label="报告标题">
<el-input />
</el-form-item>
<el-form-item label="列表个数">
<el-input />
</el-form-item>
<el-form-item label="选择设备列表">
<div class="equipmentDiv">
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
/>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="customOpen" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import screenfull from 'screenfull'
import * as echarts from 'echarts'
export default {
name: 'Sylog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 8,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 是否显示弹出层
customOpen: false,
// 表单参数
form: {},
// 表单参数
isScreen: false,
echartsFlag: '0',
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '1',
logContent: '1'
},
currentTab: '1',
data: [
{
id: '7',
object: '132网段虚拟设备',
ip: '10.1.1.1',
type: 'Network\\Networkset\\Infosec',
num: '1',
numPer: '95',
errorStart: '2020-1-10 14:39:44',
errorLong: '00:00:24',
errorPer: '28'
},
{
id: '8',
object: '133网段虚拟设备',
ip: '10.1.1.1',
type: 'Network\\Networkset\\Infosec',
num: '1',
numPer: '95',
errorStart: '2020-1-10 14:39:44',
errorLong: '00:00:24',
errorPer: '28'
}
],
initialData: [
{
id: '1',
object: '光环新网',
ip: '10.1.1.1',
type: 'Network\\Networkset\\Infosec',
num: '1',
numPer: '95',
errorStart: '2020-1-10 14:39:44',
errorLong: '00:00:24',
errorPer: '28'
},
{
id: '2',
object: '总部18F-出口核心交换备',
ip: '10.1.1.13',
type: 'Network\\Networkset\\Infosec',
num: '1',
numPer: '45',
errorStart: '2020-1-10 00:54:38',
errorLong: '00:00:02',
errorPer: '1'
},
{
id: '3',
object: '18F-二网段10.1.1.38',
ip: '10.1.1.19',
type: 'Network\\Networkset\\Infosec',
num: '1',
numPer: '5',
errorStart: '2020-1-10 21:52:42',
errorLong: '00:00:44',
errorPer: '2'
},
{
id: '4',
object: '10.1.1.13(总部24-机柜2-16U-去贵阳的核心路由)',
ip: '10.1.1.26',
type: 'Network\\Networkset\\Infosec',
num: '2',
numPer: '45',
errorStart: '2020-1-10 10:12:24',
errorLong: '00:10:24',
errorPer: '66'
},
{
id: '5',
object: '130网段虚拟设备',
ip: '10.1.1.13',
type: 'Network\\Networkset\\Infosec',
num: '1',
numPer: '95',
errorStart: '2020-1-10 14:39:44',
errorLong: '00:00:24',
errorPer: '28'
},
{
id: '6',
object: '131网段虚拟设备',
ip: '10.1.1.1',
type: 'Network\\Networkset\\Infosec',
num: '1',
numPer: '95',
errorStart: '2020-1-10 14:39:44',
errorLong: '00:00:24',
errorPer: '28'
},
{
id: '7',
object: '132网段虚拟设备',
ip: '10.1.1.1',
type: 'Network\\Networkset\\Infosec',
num: '1',
numPer: '95',
errorStart: '2020-1-10 14:39:44',
errorLong: '00:00:24',
errorPer: '28'
},
{
id: '8',
object: '133网段虚拟设备',
ip: '10.1.1.11',
type: 'Network\\Networkset\\Infosec',
num: '1',
numPer: '95',
errorStart: '2020-1-10 14:39:44',
errorLong: '00:00:24',
errorPer: '28'
}
],
treeData: [{
id: 1,
label: '本机容器',
children: [{
id: 4,
label: '虚拟化平台',
children: [{
id: 9,
label: '虚拟设备'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '服务器硬件',
children: [{
id: 5,
label: '云打印服务器'
}, {
id: 6,
label: '服务器'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
this.genderStatistics3()
this.genderStatistics4()
this.genderStatistics5()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
var elementResizeDetectorMaker = require('element-resize-detector')
var erd = elementResizeDetectorMaker()
var that = this
erd.listenTo(document.getElementById('echarts-two'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_two')).resize()
})
})
erd.listenTo(document.getElementById('echarts-one'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_one')).resize()
})
})
erd.listenTo(document.getElementById('echarts-three'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_three')).resize()
})
})
},
methods: {
/** 饼状图（1）*/
genderStatistics3() {
const myChartGender = echarts.init(document.getElementById('dataCharts_one'))
var optionEnter3 = {
tooltip: {
trigger: 'axis'
},
legend: {
bottom: '10px'
},
xAxis: {
type: 'category',
data: ['13:25:00\n19-12-13', '13:30:00\n19-12-13', '13:35:00\n19-12-13', '13:40:00\n19-12-13', '13:45:00\n19-12-13', '13:50:00\n19-12-13', '13:55:00\n19-12-13']
},
yAxis: {
type: 'value'
},
series: [
{
name: '光环新网',
data: [88, 25, 65, 757, 78, 55, 21.1],
type: 'bar'
},
{
name: '总部18F-出口核心交换备',
data: [15, 96, 79, 89, 5, 35, 58],
type: 'bar'
},
{
name: '18F-二网段10.1.1.38',
data: [24, 21, 22, 22.5, 20.3, 24.4, 21.1],
type: 'bar'
},
{
name: '10.1.1.13(总部24-机柜2-16U-去贵阳的核心路由)',
data: [70, 15, 21, 93, 55, 6, 11],
type: 'bar'
},
{
name: '130网段虚拟设备',
data: [40, 32, 35, 11, 54, 88, 52],
type: 'bar'
},
{
name: '131网段虚拟设备',
data: [76, 36, 30, 28, 100, 39, 27],
type: 'bar'
},
{
name: '132网段虚拟设备',
data: [17, 51, 45, 28, 49, 85, 7],
type: 'bar'
},
{
name: '133网段虚拟设备',
data: [21, 64, 77, 27, 82, 60, 42],
type: 'bar'
}
]
}
myChartGender.setOption(optionEnter3)
},
genderStatistics4() {
const myChartGender = echarts.init(document.getElementById('dataCharts_two'))
var optionEnter3 = {
tooltip: {
trigger: 'axis'
},
legend: {
bottom: '10px'
},
xAxis: {
type: 'category',
data: ['13:25:00\n19-12-13', '13:30:00\n19-12-13', '13:35:00\n19-12-13', '13:40:00\n19-12-13', '13:45:00\n19-12-13', '13:50:00\n19-12-13', '13:55:00\n19-12-13']
},
yAxis: {
type: 'value'
},
series: [
{
name: '云打印服务器-硬件',
data: [88, 100, 65, 100, 100, 100, 100],
type: 'bar'
},
{
name: 'HIS系统',
data: [15, 96, 79, 89, 5, 35, 58],
type: 'bar'
}
]
}
myChartGender.setOption(optionEnter3)
},
genderStatistics5() {
const myChartGender = echarts.init(document.getElementById('dataCharts_three'))
var optionEnter3 = {
tooltip: {
trigger: 'axis'
},
legend: {
bottom: '10px'
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['A10负载均衡---10.1.1.1', '4', '1', 'cpu情况', 'SSL', '用户数量', 'snmp连接监测', 'Ping', '10']
},
series: [
{
data: [100, 100, 65, 100, 100, 100, 100, 100, 100],
type: 'bar'
}
]
}
myChartGender.setOption(optionEnter3)
},
handleChangeCharts(value) {
this.echartsFlag = value
},
handleExport() {
window.location.href = process.env.BASE_URL + 'exportFile.xls'
},
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled && this.isScreen === false) {
screenfull.request(element)
} else {
screenfull.exit()
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
handleDelete() {
const h = this.$createElement
this.$confirm(h('p', null, [
h('span', null, '确定删除本报告吗？ '),
h('br', null),
h('span', { style: 'font-size: 8px' }, '提示：该操作无法恢复')
]), '', {
customClass: 'custom-confirm',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.$router.push({
path: '/IntegratedMonitor/reportStatistics/addStatisticReport',
type: 'add'
})
},
/** 查询按钮操作 */
changeCustom() {
this.customOpen = !this.customOpen
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.flowStatistics-container{
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
.app-container-realTime {
padding: 0 20px 10px;
font-size: 18px;
.equipmentDiv{
max-height: 200px;
height: 200px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
</style>
src/views/IntegratedMonitor/reportStatistics/flowStatistics.vue
View file @ 58d06c03
......@@ -138,10 +138,10 @@
>
<el-table-column :show-overflow-tooltip="true" label="颜色" width="80" align="center" prop="monitorObject">
<template slot-scope="scope">
<div v-if="scope.row.id === '1'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#b2d48d"></div>
<div v-if="scope.row.id === '2'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#89a3ec"></div>
<div v-if="scope.row.id === '3'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#5fb9c9"></div>
<div v-if="scope.row.id === '4'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#ec89bc"></div>
<div v-if="scope.row.id === '1'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#b2d48d" />
<div v-if="scope.row.id === '2'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#89a3ec" />
<div v-if="scope.row.id === '3'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#5fb9c9" />
<div v-if="scope.row.id === '4'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#ec89bc" />
</template>
</el-table-column>
<el-table-column type="index" label="名次" width="55" align="center" />
......@@ -634,7 +634,7 @@ export default {
margin-bottom:10px
}
.app-container-realTime {
padding: 0px 20px 10px;
padding: 0 20px 10px;
font-size: 18px;
.equipmentDiv{
max-height: 200px;
......
src/views/IntegratedMonitor/reportStatistics/statisticsReport.vue 0 → 100644
View file @ 58d06c03
<template>
<div id="sylog-container" class="flowStatistics-container">
<div style="padding: 10px;text-align: right">
<el-button type="primary" @click="changeTime">添加</el-button>
<el-button type="primary" @click="changeTime">修改</el-button>
<el-button type="primary" @click="handleDelete">删除</el-button>
<el-button type="primary" @click="handleExport">导出报表</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button id="fullScreen" type="primary">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
</div>
<div class="placeholder" />
<div class="app-container-realTime">
<div style="font-weight: bold">设备统计</div>
<el-form ref="queryForm" style="padding: 0 0 0 10px;margin-top: 10px" :model="queryParams" :style="{ paddingTop: isScreen ? '20px' : '0' }" :inline="true" label-width="68px">
<el-button-group style="margin-right: 10px;padding-bottom: 10px">
<el-button>日报</el-button>
<el-button>周报</el-button>
<el-button>月报</el-button>
<el-button @click="changeCustom">自定义</el-button>
</el-button-group>
<el-form-item label="统计单元" label-width="auto">
<el-select v-model="queryParams.ipAddress">
<el-option value="1" label="小时">小时</el-option>
<el-option value="2" label="天">天</el-option>
</el-select>
</el-form-item>
<el-form-item label="统计数据类型" label-width="auto">
<el-select v-model="queryParams.logContent">
<el-option value="1" label="平均值">平均值</el-option>
<el-option value="2" label="最大值">最大值</el-option>
<el-option value="3" label="最小值">最小值</el-option>
</el-select>
</el-form-item>
</el-form>
<div style="padding: 10px">
<div id="echarts-one" class="span_1">
<div v-show="echartsFlag === '0'" id="dataCharts_one" ref="chart_one" style="height: 35vh" />
</div>
</div>
<div v-show="echartsFlag === '0'" style="padding: 10px 10px 10px 0">
<el-table
v-loading="loading"
border
:data="initialData"
height="200"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column :show-overflow-tooltip="true" label="颜色" width="80" align="center" prop="monitorObject">
<template slot-scope="scope">
<div v-if="scope.row.id === '1' || scope.row.id === '7'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#b2d48d" />
<div v-if="scope.row.id === '2' || scope.row.id === '8'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#89a3ec" />
<div v-if="scope.row.id === '3' || scope.row.id === '5'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#5fb9c9" />
<div v-if="scope.row.id === '4' || scope.row.id === '6'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#ec89bc" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="设备名称" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.object || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测点名称" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.point || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测指标" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.standard || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="平均值" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.ave || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="最大值" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.max || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="最小值" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.min || '-' }}
</template>
</el-table-column>
</el-table>
</div>
<div style="padding: 10px">
<div id="echarts-two" class="span_1">
<div v-show="echartsFlag === '0'" id="dataCharts_two" ref="chart_one" style="height: 35vh" />
</div>
</div>
<div v-show="echartsFlag === '0'" style="padding: 10px 10px 10px 0">
<el-table
v-loading="loading"
border
:data="data"
height="200"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column :show-overflow-tooltip="true" label="颜色" width="80" align="center" prop="monitorObject">
<template slot-scope="scope">
<div v-if="scope.row.id === '1' || scope.row.id === '7'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#b2d48d" />
<div v-if="scope.row.id === '2' || scope.row.id === '8'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#89a3ec" />
<div v-if="scope.row.id === '3' || scope.row.id === '5'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#5fb9c9" />
<div v-if="scope.row.id === '4' || scope.row.id === '6'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#ec89bc" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="设备名称" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.object || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测点名称" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.point || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测指标" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.standard || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="平均值" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.ave || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="最大值" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.max || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="最小值" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.min || '-' }}
</template>
</el-table-column>
</el-table>
</div>
<el-dialog :visible.sync="open" title="添加报告" width="700px">
<el-form label-width="110px">
<el-form-item label="报告标题">
<el-input />
</el-form-item>
<el-form-item label="列表个数">
<el-input />
</el-form-item>
<el-form-item label="选择设备列表">
<div class="equipmentDiv">
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
/>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="customOpen" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import screenfull from 'screenfull'
import * as echarts from 'echarts'
export default {
name: 'Sylog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 8,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 是否显示弹出层
customOpen: false,
// 表单参数
form: {},
// 表单参数
isScreen: false,
echartsFlag: '0',
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '1',
logContent: '1'
},
currentTab: '1',
data: [
{
id: '7',
object: '132网段虚拟设备',
point: 'Ping 192.168.1.55',
standard: '服务成功率 %',
min: '100.000',
max: '99.722',
ave: '99.9786'
},
{
id: '8',
object: '133网段虚拟设备',
point: 'NetWork CPU',
standard: 'CPU使用率 %',
min: '0.00',
max: '42.00',
ave: '5.12544'
}
],
initialData: [
{
id: '1',
object: '光环新网',
point: 'NetWork CPU',
standard: 'CPU使用率 %',
min: '20.00',
max: '20.00',
ave: '20.00'
},
{
id: '2',
object: '总部18F-出口核心交换备',
point: 'NetWork CPU',
standard: 'CPU使用率 %',
min: '20.00',
max: '24.00',
ave: '22.00'
},
{
id: '3',
object: '18F-二网段10.1.1.38',
point: 'NetWork CPU',
standard: 'CPU使用率 %',
min: '20.00',
max: '80.00',
ave: '45.00'
},
{
id: '4',
object: '10.1.1.13(总部24-机柜2-16U-去贵阳的核心路由)',
point: 'NetWork CPU',
standard: 'CPU使用率 %',
min: '20.00',
max: '35.00',
ave: '30.00'
},
{
id: '5',
object: '130网段虚拟设备',
point: 'NetWork CPU',
standard: 'CPU使用率 %',
min: '20.00',
max: '48.00',
ave: '25.00'
},
{
id: '6',
object: '131网段虚拟设备',
point: 'NetWork CPU',
standard: 'CPU使用率 %',
min: '20.00',
max: '99.00',
ave: '70.00'
},
{
id: '7',
object: '132网段虚拟设备',
point: 'NetWork CPU',
standard: 'CPU使用率 %',
min: '20.00',
max: '80.00',
ave: '77.00'
},
{
id: '8',
object: '133网段虚拟设备',
point: 'NetWork CPU',
standard: 'CPU使用率 %',
min: '20.00',
max: '22.00',
ave: '20.99'
}
],
treeData: [{
id: 1,
label: '本机容器',
children: [{
id: 4,
label: '虚拟化平台',
children: [{
id: 9,
label: '虚拟设备'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '服务器硬件',
children: [{
id: 5,
label: '云打印服务器'
}, {
id: 6,
label: '服务器'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
this.genderStatistics3()
this.genderStatistics4()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
var elementResizeDetectorMaker = require('element-resize-detector')
var erd = elementResizeDetectorMaker()
var that = this
erd.listenTo(document.getElementById('echarts-two'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_two')).resize()
})
})
erd.listenTo(document.getElementById('echarts-one'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_one')).resize()
})
})
},
methods: {
/** 饼状图（1）*/
genderStatistics3() {
const myChartGender = echarts.init(document.getElementById('dataCharts_one'))
var optionEnter3 = {
tooltip: {
trigger: 'axis'
},
legend: {
bottom: '10px'
},
xAxis: {
type: 'category',
data: ['13:25:00\n19-12-13', '13:30:00\n19-12-13', '13:35:00\n19-12-13', '13:40:00\n19-12-13', '13:45:00\n19-12-13', '13:50:00\n19-12-13', '13:55:00\n19-12-13']
},
yAxis: {
type: 'value'
},
series: [
{
name: '光环新网',
data: [88, 25, 65, 757, 78, 55, 21.1],
type: 'line'
},
{
name: '总部18F-出口核心交换备',
data: [15, 96, 79, 89, 5, 35, 58],
type: 'line'
},
{
name: '18F-二网段10.1.1.38',
data: [24, 21, 22, 22.5, 20.3, 24.4, 21.1],
type: 'line'
},
{
name: '10.1.1.13(总部24-机柜2-16U-去贵阳的核心路由)',
data: [70, 15, 21, 93, 55, 6, 11],
type: 'line'
},
{
name: '130网段虚拟设备',
data: [40, 32, 35, 11, 54, 88, 52],
type: 'line'
},
{
name: '131网段虚拟设备',
data: [76, 36, 30, 28, 100, 39, 27],
type: 'line'
},
{
name: '132网段虚拟设备',
data: [17, 51, 45, 28, 49, 85, 7],
type: 'line'
},
{
name: '133网段虚拟设备',
data: [21, 64, 77, 27, 82, 60, 42],
type: 'line'
}
]
}
myChartGender.setOption(optionEnter3)
},
genderStatistics4() {
const myChartGender = echarts.init(document.getElementById('dataCharts_two'))
var optionEnter3 = {
tooltip: {
trigger: 'axis'
},
legend: {
bottom: '10px'
},
xAxis: {
type: 'category',
data: ['13:25:00\n19-12-13', '13:30:00\n19-12-13', '13:35:00\n19-12-13', '13:40:00\n19-12-13', '13:45:00\n19-12-13', '13:50:00\n19-12-13', '13:55:00\n19-12-13']
},
yAxis: {
type: 'value'
},
series: [
{
name: '云打印服务器-硬件',
data: [88, 100, 65, 100, 100, 100, 100],
type: 'line'
},
{
name: 'HIS系统',
data: [15, 96, 79, 89, 5, 35, 58],
type: 'line'
}
]
}
myChartGender.setOption(optionEnter3)
},
handleChangeCharts(value) {
this.echartsFlag = value
},
handleExport() {
window.location.href = process.env.BASE_URL + 'exportFile.xls'
},
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled && this.isScreen === false) {
screenfull.request(element)
} else {
screenfull.exit()
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
handleDelete() {
const h = this.$createElement
this.$confirm(h('p', null, [
h('span', null, '确定删除本报告吗？ '),
h('br', null),
h('span', { style: 'font-size: 8px' }, '提示：该操作无法恢复')
]), '', {
customClass: 'custom-confirm',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.$router.push({
path: '/IntegratedMonitor/reportStatistics/addStatisticReport',
type: 'add'
})
},
/** 查询按钮操作 */
changeCustom() {
this.customOpen = !this.customOpen
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.flowStatistics-container{
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
.app-container-realTime {
padding: 0 20px 10px;
font-size: 18px;
.equipmentDiv{
max-height: 200px;
height: 200px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment