145 lines
3.7 KiB
Vue
145 lines
3.7 KiB
Vue
<template>
|
|
<aside class="project-analysis-sidebar">
|
|
<section class="sidebar-card">
|
|
<div class="sidebar-card__title">人员基础信息</div>
|
|
<div class="sidebar-field">
|
|
<span class="sidebar-field__label">姓名</span>
|
|
<span class="sidebar-field__value">{{ sidebarData.basicInfo.name || "-" }}</span>
|
|
</div>
|
|
<div class="sidebar-field">
|
|
<span class="sidebar-field__label">工号</span>
|
|
<span class="sidebar-field__value">{{ sidebarData.basicInfo.staffCode || "-" }}</span>
|
|
</div>
|
|
<div class="sidebar-field">
|
|
<span class="sidebar-field__label">部门</span>
|
|
<span class="sidebar-field__value">{{ sidebarData.basicInfo.department || "-" }}</span>
|
|
</div>
|
|
<div class="sidebar-field">
|
|
<span class="sidebar-field__label">风险等级</span>
|
|
<span class="sidebar-field__value">{{ sidebarData.basicInfo.riskLevel || "-" }}</span>
|
|
</div>
|
|
<div class="sidebar-field">
|
|
<span class="sidebar-field__label">所属项目</span>
|
|
<span class="sidebar-field__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="sidebar-card">
|
|
<div class="sidebar-card__title">命中模型摘要</div>
|
|
<div class="sidebar-field">
|
|
<span class="sidebar-field__label">命中模型数</span>
|
|
<span class="sidebar-field__value">{{ sidebarData.modelSummary.modelCount || "-" }}</span>
|
|
</div>
|
|
<div class="sidebar-field">
|
|
<span class="sidebar-field__label">当前命中模型</span>
|
|
<span class="sidebar-field__value">{{ sidebarData.modelSummary.currentModel || "-" }}</span>
|
|
</div>
|
|
<div class="sidebar-field sidebar-field--column">
|
|
<span class="sidebar-field__label">核心异常标签</span>
|
|
<div v-if="sidebarData.modelSummary.riskTags.length" class="tag-list">
|
|
<el-tag
|
|
v-for="(tag, index) in sidebarData.modelSummary.riskTags"
|
|
:key="`${tag}-${index}`"
|
|
size="mini"
|
|
effect="plain"
|
|
>
|
|
{{ tag }}
|
|
</el-tag>
|
|
</div>
|
|
<span v-else class="sidebar-field__value">暂无异常标签</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="sidebar-card">
|
|
<div class="sidebar-card__title">排查记录摘要</div>
|
|
<p class="sidebar-summary">{{ sidebarData.recordSummary }}</p>
|
|
</section>
|
|
</aside>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ProjectAnalysisSidebar",
|
|
props: {
|
|
sidebarData: {
|
|
type: Object,
|
|
default: () => ({
|
|
basicInfo: {},
|
|
modelSummary: {
|
|
riskTags: [],
|
|
},
|
|
recordSummary: "",
|
|
}),
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.project-analysis-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.sidebar-card {
|
|
padding: 18px 16px;
|
|
border: 1px solid #e2e8f0;
|
|
background: #fff;
|
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.sidebar-card__title {
|
|
margin-bottom: 14px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.sidebar-field + .sidebar-field {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.sidebar-field {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.sidebar-field--column {
|
|
display: block;
|
|
}
|
|
|
|
.sidebar-field__label {
|
|
flex: 0 0 84px;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.sidebar-field__value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
text-align: right;
|
|
color: #0f172a;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.tag-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.sidebar-summary {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
color: #475569;
|
|
}
|
|
</style>
|