增加仪表盘

增加仪表盘
This commit is contained in:
huoji
2022-09-21 19:58:49 +08:00
parent 3ddca10161
commit e1fb23c112
24 changed files with 306 additions and 106 deletions

View File

@@ -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 }}&nbsp;({{ 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 }}&nbsp;({{ 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()
}
})
}