cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: AI建议 & 许可证页面

Browse Source
This commit is contained in:
@user8949
2025-03-14 20:03:14 +08:00
parent 154a03dcf0
commit 03db951292
14 changed files with 786 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/views/Jyh/AIRepair/index.vue Normal file
View File

@@ -0,0 +1,206 @@
<template>
<div class="ai-container">
<div class="ai-container-card" style="width: 100%;" v-for="(rowItem, index) in list" :key="index">
<Panel :expand="rowItem.expand">
<template #header>
<div class="ai-panel-header">
<div style="padding: 20px 20px 0px 20px;">
<img style="width: 60px; height: 50px;" src="@/assets/imgs/jyh/warning.png">
</div>
<div style="width: 100%; padding: 20px 20px 0px 0;">
<div class="ai-panel-header-title">
<div>
<d-tag color="red-w98" class="mr-1">严重</d-tag>
<span>Morgan</span>
</div>
<div style="cursor: pointer; display: flex; gap: 8px; align-items: center;" @click="rowItem.expand = !rowItem.expand">
<img style="width: 14px; height: 14px;" src="@/assets/imgs/jyh/collapseIcon.png">
<span>全部收起</span>
</div>
</div>
<div class="ai-panel-header-sub-title">
<div>
<span class="weak-text">安全问题</span>
<span>2</span>
</div>
<div>
<span class="weak-text">修复兼容性</span>
<span>2</span>
<img src="@/assets/imgs/jyh/help.png" class="icon-sm">
<d-tag class="ml-1" type="warning" size="sm">中</d-tag>
</div>
<div>
<span class="weak-text">升级版本</span>
<span>xxx</span>
<img src="@/assets/imgs/jyh/ic_digital_power_next_step_@2x.png" class="icon-sm">
<span>xxx</span>
</div>
</div>
</div>
</div>
</template>
<template #body>
<div style="padding: 20px; width: 100%;">
<Table :tableConfig="tableConfig" :dataSource="rowItem.data.listData"/>
</div>
</template>
</Panel>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Panel from '@/components/AIRepair/Panel.vue';
import Table from '@/components/AIRepair/Table.vue';
const tableConfig = ref([
{
field: 'securityProblemCode',
header: '安全问题编号',
sortable: true,
sortMethod: null
},
{
field: 'type',
header: '安全问题类型',
sortable: false,
sortMethod: null
},
{
field: 'CWEcode',
header: 'CWE编号',
sortable: false,
sortMethod: null
},
{
field: 'score',
header: '分值',
sortable: true,
sortMethod: null
},
])
const list = ref([
{
expand: true,
data: {
listData: [
{
securityProblemCode: '1',
type: '安全问题',
CWEcode: 'CWE-123',
score: 100
},
{
securityProblemCode: '2',
type: '安全问题',
CWEcode: 'CWE-123',
score: 100
}
]
}
},
{
expand: true,
data: {
listData: [
{
securityProblemCode: '1',
type: '安全问题',
CWEcode: 'CWE-123',
score: 100
},
{
securityProblemCode: '2',
type: '安全问题',
CWEcode: 'CWE-123',
score: 100
}
]
}
},
{
expand: true,
data: {
listData: [
{
securityProblemCode: '1',
type: '安全问题',
CWEcode: 'CWE-123',
score: 100
},
{
securityProblemCode: '2',
type: '安全问题',
CWEcode: 'CWE-123',
score: 100
}
]
}
}
])
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
.ai-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
&-card {
border-top: 2px solid $devui-danger;
background-color: $devui-base-bg;
border-radius: var(--devui-border-radius-card, 8px);
box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
}
}
.ai-panel-header {
display: flex;
flex-direction: row;
&-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
&-sub-title {
display: flex;
align-items: center;
margin-top: 10px;
div {
display: flex;
gap: 8px;
align-items: center;
margin-right: 20px;
position: relative;
&:not(:last-child)::after {
content: '';
position: absolute;
right: -10px;
height: 100%;
width: 1px;
background-color: $devui-line;
}
}
}
}
.weak-text {
color: $devui-text-weak;
}
.icon-sm {
width: 14px;
height: 14px;
}
</style>