增加仪表盘
增加仪表盘
This commit is contained in:
huoji
@@ -123,7 +123,7 @@ export default defineComponent({
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
selectLabel: 'non_hanlde_report',
|
||||
selectLabel: 'dashboard',
|
||||
drawer: false,
|
||||
miniState: true,
|
||||
plugin: [],
|
||||
|
||||
@@ -1,10 +1,189 @@
|
||||
<template>
|
||||
<h4 class="row q-gutter-md q-mb-sm q-pa-lg">施工中....</h4>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
<div class="q-gutter-md q-mb-sm q-pa-lg">
|
||||
<div>
|
||||
<q-card class="bg-transparent no-shadow no-border">
|
||||
<q-card-section class="q-pa-none">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div v-for="(item, index) in Threatitems" :key="index" class="col-md-3 col-sm-12 col-xs-12">
|
||||
<q-item :style="`background-color: ${item.color1}`" class="q-pa-none">
|
||||
<q-item-section side :style="`background-color: ${item.color2}`" class="q-pa-lg q-mr-none text-white">
|
||||
<q-icon :name="item.icon" color="white" size="24px"></q-icon>
|
||||
</q-item-section>
|
||||
<q-item-section class="q-pa-md q-ml-none text-white">
|
||||
<q-item-label class="text-white text-h6 text-weight-bolder">{{
|
||||
item.value
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{ item.title }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<q-card class="no-shadow" style="background: rbg(255,255,255)">
|
||||
<q-card-section>
|
||||
<div class="text-h6">
|
||||
主机数量: {{threatStatistics.host_num}}/50 <q-icon name="info" class="text-brown cursor-pointer">
|
||||
<q-popup-proxy transition-show="flip-up" transition-hide="flip-down">
|
||||
<q-banner class="bg-brown text-white">
|
||||
<template v-slot:avatar>
|
||||
<q-icon name="lightbulb" />
|
||||
</template>
|
||||
由于python+sqlite数据库作为后端,理论上最高支持的主机数量为50.
|
||||
</q-banner>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2">最近日志数量: {{threatStatistics.all_log_num}}</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<div ref="main_draw" style="width: 100%; height: 600px; ">
|
||||
1
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
defineComponent
|
||||
} from 'vue'
|
||||
import axios from 'axios'
|
||||
import * as echarts from 'echarts'
|
||||
export default defineComponent({
|
||||
name: 'Dashboard'
|
||||
name: 'Dashboard',
|
||||
data () {
|
||||
return {
|
||||
Threatitems: [{
|
||||
title: '发现的威胁',
|
||||
icon: 'remove_red_eye',
|
||||
value: '200',
|
||||
color1: '#5064b5',
|
||||
color2: '#3e51b5'
|
||||
},
|
||||
{
|
||||
title: '确认的威胁',
|
||||
icon: 'flash_on',
|
||||
value: '500',
|
||||
color1: '#f37169',
|
||||
color2: '#f34636'
|
||||
},
|
||||
{
|
||||
title: '忽略的威胁',
|
||||
icon: 'texture',
|
||||
value: '50',
|
||||
color1: '#ea6a7f',
|
||||
color2: '#ea4b64'
|
||||
},
|
||||
{
|
||||
title: '进行中的威胁',
|
||||
icon: 'bar_chart',
|
||||
value: '1020',
|
||||
color1: '#a270b1',
|
||||
color2: '#9f52b1'
|
||||
}
|
||||
],
|
||||
threatStatistics: {
|
||||
all: 1,
|
||||
confirm: 0,
|
||||
ingore: 1,
|
||||
working: 0,
|
||||
host_list: {},
|
||||
host_num: 10,
|
||||
all_log_num: 647
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
get_threatStatistics () {
|
||||
axios
|
||||
.get('/api/v1/get/threat_statistics', {
|
||||
'Content-Type': 'application/json'
|
||||
})
|
||||
.then((response) => {
|
||||
const data = response.data
|
||||
if (data.data) {
|
||||
this.threatStatistics = data.data
|
||||
this.threatStatistics.host_num = Object.keys(this.threatStatistics.host_list).length
|
||||
// Threatitems
|
||||
this.Threatitems[0].value = this.threatStatistics.all
|
||||
this.Threatitems[1].value = this.threatStatistics.confirm
|
||||
this.Threatitems[2].value = this.threatStatistics.ingore
|
||||
this.Threatitems[3].value = this.threatStatistics.working
|
||||
console.log(this.threatStatistics)
|
||||
|
||||
this.draw()
|
||||
}
|
||||
})
|
||||
},
|
||||
draw () {
|
||||
const hostList = []
|
||||
const hostLoggedNumList = []
|
||||
for (const key in this.threatStatistics.host_list) {
|
||||
hostList.push(key)
|
||||
hostLoggedNumList.push({
|
||||
name: key,
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: this.threatStatistics.host_list[key].log_num
|
||||
})
|
||||
}
|
||||
const dom = this.$refs.main_draw
|
||||
const myChart = echarts.init(dom)
|
||||
const option = {
|
||||
title: {
|
||||
text: '最近十分钟日志量'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: hostList
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['10min', '9min', '8min', '7min', '6min', '5min', '4min', '3min', '2min', '1min']
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value'
|
||||
}],
|
||||
series: hostLoggedNumList
|
||||
}
|
||||
myChart.setOption(option)
|
||||
setTimeout(() => {
|
||||
myChart.resize()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.get_threatStatistics()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,26 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="q-gutter-md q-mb-sm q-pa-lg">
|
||||
<q-card class="bg-transparent no-shadow no-border">
|
||||
<q-card-section class="q-pa-none">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div v-for="(item, index) in Threatitems" :key="index" class="col-md-3 col-sm-12 col-xs-12">
|
||||
<q-item :style="`background-color: ${item.color1}`" class="q-pa-none">
|
||||
<q-item-section side :style="`background-color: ${item.color2}`" class="q-pa-lg q-mr-none text-white">
|
||||
<q-icon :name="item.icon" color="white" size="24px"></q-icon>
|
||||
</q-item-section>
|
||||
<q-item-section class="q-pa-md q-ml-none text-white">
|
||||
<q-item-label class="text-white text-h6 text-weight-bolder">{{
|
||||
item.value
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{ item.title }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col"></div>
|
||||
<div class="col">
|
||||
@@ -133,7 +112,7 @@
|
||||
</div>
|
||||
<q-drawer show-if-above v-if="processChainShowDetails" v-model="processChainShowDetails" side="right" bordered width="350" class="text-dark">
|
||||
<q-list style="width: 100%;word-break: break-all;">
|
||||
<q-item>
|
||||
<q-item>
|
||||
<q-item-section>活跃状态: {{processChainDetails.active ? "运行中" : "已结束"}}</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
@@ -161,13 +140,13 @@
|
||||
<q-item-section>进程hash: {{processChainDetails.md5}}</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item>
|
||||
<q-item>
|
||||
<q-item-section>是否在白名单中: {{processChainDetails.isWhite ? "是" : "否"}}</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item>
|
||||
<q-item-section>进程命中的规则:
|
||||
<template v-for="(index, operation) in processChainDetails.hitRules" :key="index">
|
||||
<template v-for="(index, operation) in processChainDetails.hitRules" :key="index">
|
||||
<q-chip square color="rgb(239,243,246)">
|
||||
{{ operation }} ({{ index }})
|
||||
</q-chip>
|
||||
@@ -181,7 +160,7 @@
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>attck矩阵:
|
||||
<template v-for="(index, operation) in processChainDetails.hitAttck" :key="index">
|
||||
<template v-for="(index, operation) in processChainDetails.hitAttck" :key="index">
|
||||
<q-chip square color="rgb(239,243,246)">
|
||||
{{ operation }} ({{ index }})
|
||||
</q-chip>
|
||||
@@ -251,41 +230,6 @@ export default defineComponent({
|
||||
width: '9px',
|
||||
opacity: 0.2
|
||||
},
|
||||
threatStatistics: {
|
||||
all: 1,
|
||||
confirm: 0,
|
||||
ingore: 1,
|
||||
working: 0
|
||||
},
|
||||
Threatitems: [{
|
||||
title: '发现的威胁',
|
||||
icon: 'remove_red_eye',
|
||||
value: '200',
|
||||
color1: '#5064b5',
|
||||
color2: '#3e51b5'
|
||||
},
|
||||
{
|
||||
title: '确认的威胁',
|
||||
icon: 'flash_on',
|
||||
value: '500',
|
||||
color1: '#f37169',
|
||||
color2: '#f34636'
|
||||
},
|
||||
{
|
||||
title: '忽略的威胁',
|
||||
icon: 'texture',
|
||||
value: '50',
|
||||
color1: '#ea6a7f',
|
||||
color2: '#ea4b64'
|
||||
},
|
||||
{
|
||||
title: '进行中的威胁',
|
||||
icon: 'bar_chart',
|
||||
value: '1020',
|
||||
color1: '#a270b1',
|
||||
color2: '#9f52b1'
|
||||
}
|
||||
],
|
||||
dialog: false,
|
||||
maximizedToggle: true,
|
||||
server_threat: {},
|
||||
@@ -453,23 +397,7 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
},
|
||||
get_threatStatistics () {
|
||||
axios
|
||||
.get('/api/v1/get/threat_statistics', {
|
||||
'Content-Type': 'application/json'
|
||||
})
|
||||
.then((response) => {
|
||||
const data = response.data
|
||||
if (data.data) {
|
||||
this.threatStatistics = data.data
|
||||
// Threatitems
|
||||
this.Threatitems[0].value = this.threatStatistics.all
|
||||
this.Threatitems[1].value = this.threatStatistics.confirm
|
||||
this.Threatitems[2].value = this.threatStatistics.ingore
|
||||
this.Threatitems[3].value = this.threatStatistics.working
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
get_clientids () {
|
||||
const queryType = this.$route.params.queryIndex
|
||||
const queryIndex = (queryType === null || queryType === undefined) ? 0 : queryType
|
||||
@@ -484,7 +412,6 @@ export default defineComponent({
|
||||
data: []
|
||||
}
|
||||
this.server_threat.data = data.data
|
||||
this.get_threatStatistics()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user