Skip to content

N
nse-ui
Commit 83256fe7 by ningjihai
Options

发现梳理-查看历史

parent 719e3ef7
正在显示 包含 498 行增加 和 7 行删除
src/views/discover/Discover/discoverHistory.vue 0 → 100644
<template>
<div class="app-container scroller">
<PageTitle :back="true" @back="pageProjectManage">
<template #title>
返回项目管理
</template>
</PageTitle>
<div class="app-container__body">
<div class="version-compare-container">
<!-- 上方：任务版本选择 -->
<div class="version-selection">
<h2 class="section-title">任务详情</h2>
<div class="version-cards">
<el-checkbox-group style="font-size: unset;line-height: unset;" v-model="selectedVersions" :max="2" @change="handleVersionChange">
<el-card
v-for="version in versionList"
:key="version.id"
class="version-card"
:class="{ 'card-selected': selectedVersions.includes(version.id) }"
>
<template #header>
<div class="card-header">
<el-checkbox :label="version.id">
<span class="version-name">{{ version.name }}</span>
</el-checkbox>
</div>
</template>
<div class="card-content">
<div class="info-item">
<span class="label">任务名称：</span>
<span class="value">{{ version.taskName }}</span>
</div>
<div class="info-item">
<span class="label">操作人：</span>
<span class="value">{{ version.operator }}</span>
</div>
<div class="info-item">
<span class="label">操作时间：</span>
<span class="value">{{ version.operateTime }}</span>
</div>
</div>
</el-card>
</el-checkbox-group>
</div>
</div>
<!-- 下方：对比结果 -->
<div class="compare-result" v-if="selectedVersions.length === 2">
<div class="filter-section">
<div class="filter-item">
<span class="filter-label">SCHEMA：</span>
<el-select v-model="filters.schema" placeholder="请选择SCHEMA" clearable>
<el-option
v-for="schema in schemaList"
:key="schema"
:label="schema"
:value="schema"
/>
</el-select>
</div>
<div class="filter-item">
<span class="filter-label">表：</span>
<el-select v-model="filters.table" placeholder="请选择表" clearable>
<el-option
v-for="table in tableList"
:key="table"
:label="table"
:value="table"
/>
</el-select>
</div>
<div class="filter-item">
<span class="filter-label">列：</span>
<el-select v-model="filters.column" placeholder="请选择列" clearable>
<el-option
v-for="column in columnList"
:key="column"
:label="column"
:value="column"
/>
</el-select>
</div>
</div>
<!-- 对比表格 - 按照图片修改表头 -->
<div class="compare-table">
<el-table
:data="filteredTableData"
style="width: 100%"
:header-cell-style="{ background: '#f0f7ff', color: '#606266', fontWeight: 'bold' }"
empty-text="暂无数据"
>
<!-- 基础信息列 -->
<el-table-column prop="schema" label="SCHEMA" width="120" fixed align="center" />
<el-table-column prop="tableName" label="表名" width="150" align="center" />
<el-table-column prop="columnName" label="列名" width="150" align="center" />
<!-- 数据域合并表头 -->
<el-table-column label="数据域" align="center" header-align="center">
<el-table-column
:label="getVersionName(selectedVersions[0])"
width="180"
align="center"
>
<template #default="{ row }">
<span>{{ row[`dataDomain_${selectedVersions[0]}`] || '-' }}</span>
</template>
</el-table-column>
<el-table-column
:label="getVersionName(selectedVersions[1])"
width="180"
align="center"
>
<template #default="{ row }">
<span>{{ row[`dataDomain_${selectedVersions[1]}`] || '-' }}</span>
</template>
</el-table-column>
</el-table-column>
<!-- 数据域生成规则合并表头 -->
<el-table-column label="数据域生成规则" align="center" header-align="center">
<el-table-column
:label="getVersionName(selectedVersions[0])"
width="200"
align="center"
>
<template #default="{ row }">
<span>{{ row[`rule_${selectedVersions[0]}`] || '-' }}</span>
</template>
</el-table-column>
<el-table-column
:label="getVersionName(selectedVersions[1])"
width="200"
align="center"
>
<template #default="{ row }">
<span>{{ row[`rule_${selectedVersions[1]}`] || '-' }}</span>
</template>
</el-table-column>
</el-table-column>
<!-- 是否确认合并表头 -->
<el-table-column label="是否确认" align="center" header-align="center">
<el-table-column
:label="getVersionName(selectedVersions[0])"
width="150"
align="center"
>
<template #default="{ row }">
<el-tag
:type="row[`confirmed_${selectedVersions[0]}`] ? 'success' : 'warning'"
size="small"
>
{{ row[`confirmed_${selectedVersions[0]}`] ? '已确认' : '未确认' }}
</el-tag>
</template>
</el-table-column>
<el-table-column
:label="getVersionName(selectedVersions[1])"
width="150"
align="center"
>
<template #default="{ row }">
<el-tag
:type="row[`confirmed_${selectedVersions[1]}`] ? 'success' : 'warning'"
size="small"
>
{{ row[`confirmed_${selectedVersions[1]}`] ? '已确认' : '未确认' }}
</el-tag>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
</div>
<!-- 未选择足够版本时的提示 -->
<div class="empty-state" v-else>
<div class="empty-content">
<el-empty description="请选择两个版本进行对比" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
// 选中的版本
const selectedVersions = ref([])
// 版本列表数据
const versionList = ref([
{
id: 'v1',
name: '版本一',
taskName: '1234',
operator: 'admin',
operateTime: '2025-08-23 09:16:34'
},
{
id: 'v2',
name: '版本二',
taskName: '5678',
operator: 'admin',
operateTime: '2025-08-23 10:20:15'
},
{
id: 'v3',
name: '版本三',
taskName: '9012',
operator: 'admin',
operateTime: '2025-08-23 11:30:45'
}
])
// 筛选条件
const filters = ref({
schema: '',
table: '',
column: ''
})
// 模拟筛选选项数据
const schemaList = ref(['schema1', 'schema2', 'schema3'])
const tableList = ref(['table1', 'table2', 'table3'])
const columnList = ref(['column1', 'column2', 'column3'])
// 表格数据
const tableData = ref([])
// 版本变化处理
const handleVersionChange = (selectedIds) => {
if (selectedIds.length === 2) {
fetchCompareData(selectedIds)
} else {
tableData.value = []
}
}
// 获取版本名称
const getVersionName = (versionId) => {
const version = versionList.value.find(v => v.id === versionId)
return version ? version.name : versionId
}
// 模拟获取对比数据
const fetchCompareData = async (versionIds) => {
console.log('获取对比数据，版本:', versionIds)
try {
const mockData = [
{
schema: 'schema1',
tableName: 'table1',
columnName: 'column1',
dataDomain_v1: '个人信息',
dataDomain_v2: '联系方式',
rule_v1: '按身份证号字段查询',
rule_v2: '按手机号字段查询',
confirmed_v1: true,
confirmed_v2: false
},
{
schema: 'schema1',
tableName: 'table1',
columnName: 'column2',
dataDomain_v1: '金融数据',
dataDomain_v2: '金融数据',
rule_v1: '按银行卡号字段查询',
rule_v2: '按银行卡号字段查询',
confirmed_v1: true,
confirmed_v2: true
},
{
schema: 'schema2',
tableName: 'table2',
columnName: 'column1',
dataDomain_v1: '联系方式',
dataDomain_v2: '个人信息',
rule_v1: '按邮箱字段查询',
rule_v2: '按身份证号字段查询',
confirmed_v1: false,
confirmed_v2: true
}
]
tableData.value = mockData
ElMessage.success('对比数据加载成功')
} catch (error) {
ElMessage.error('获取对比数据失败')
}
}
// 过滤后的表格数据
const filteredTableData = computed(() => {
let data = tableData.value
if (filters.value.schema) {
data = data.filter(item => item.schema === filters.value.schema)
}
if (filters.value.table) {
data = data.filter(item => item.tableName === filters.value.table)
}
if (filters.value.column) {
data = data.filter(item => item.columnName === filters.value.column)
}
return data
})
// 监听筛选条件变化
watch(filters, () => {
console.log('筛选条件变化:', filters.value)
}, { deep: true })
</script>
<style lang="scss" scoped>
.version-compare-container {
padding: 20px;
background: #f5f7fa;
}
.version-selection {
background: white;
border-radius: 8px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.section-title {
margin: 0 0 20px 0;
color: #303133;
font-size: 20px;
font-weight: 600;
}
.version-cards {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.version-card {
flex: 1;
min-width: 280px;
min-height: 180px;
border: 2px solid #dcdfe6;
transition: all 0.3s ease;
&.card-selected {
border-color: #1890ff;
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
}
}
.card-header {
display: flex;
align-items: center;
padding: 12px 16px;
:deep(.el-checkbox) {
margin: 0;
.el-checkbox__label {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
}
.card-content {
// padding: 16px;
}
.info-item {
display: flex;
// align-items: center;
// margin-bottom: 12px;
font-size: 14px;
.label {
color: #606266;
font-weight: 500;
// min-width: 70px;
}
.value {
color: #303133;
}
}
.compare-result {
background: white;
border-radius: 8px;
padding: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.filter-section {
display: flex;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.filter-item {
display: flex;
align-items: center;
gap: 8px;
.filter-label {
font-size: 14px;
color: #606266;
font-weight: 500;
}
}
.compare-table {
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.empty-state {
background: white;
border-radius: 8px;
padding: 60px 24px;
text-align: center;
}
// 表头样式调整
:deep(.el-table) {
.el-table__header-wrapper {
.el-table__cell {
background: #f0f7ff;
&.is-leaf {
border-bottom: 1px solid #e0e0e0;
}
.cell {
white-space: nowrap;
font-weight: bold;
color: #606266;
}
}
}
// 嵌套表头样式
.el-table__header {
.el-table__cell {
padding: 8px 0;
&:not(.is-leaf) {
background: #e6f7ff;
font-size: 14px;
}
}
}
}
:deep(.el-checkbox-group){
display: flex;
font-size: 14px;
flex-wrap: wrap;
.el-card {
margin-left: 10px;
margin-top: 10px;
}
}
</style>
\ No newline at end of file
src/views/discover/Discover/discoverProcess.vue
......@@ -17,7 +17,7 @@ const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance()
const props = defineProps({
discoverProcessData: {
listItem: {
type: Object,
default: () => ({})
}
......
src/views/discover/Discover/discoverResult.vue
......@@ -17,7 +17,7 @@ const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance()
const props = defineProps({
discoverProcessData: {
listItem: {
type: Object,
default: () => ({})
}
......
src/views/discover/Discover/index.vue
......@@ -3,11 +3,13 @@ import { ref } from 'vue'
import list from './list.vue'
import discoverProcess from './discoverProcess.vue'
import discoverResult from './discoverResult.vue'
import discoverHistory from './discoverHistory.vue'
const widget = {
list: list,
discoverProcess: discoverProcess,
discoverResult: discoverResult
discoverResult: discoverResult,
discoverHistory: discoverHistory
}
const page = ref('list')
......
src/views/discover/Discover/list.vue
......@@ -107,7 +107,7 @@ const handleEdit = (row) => {
const handleDiscover = (row) => {
console.log('发现:', row)
ElMessage.success(`开始发现任务: ${row.taskName}`)
emit('page', 'discoverProcess', { discoverProcessData: row})
emit('page', 'discoverProcess', { listItem: row})
// router.push({
// path: '/user/discoverProcess',
// query: {
......@@ -124,7 +124,7 @@ const handleDiscover = (row) => {
const handleMonitor = (row) => {
console.log('监控:', row)
ElMessage.warning(`监控任务: ${row.taskName}`)
emit('page', 'discoverProcess', { discoverProcessData: row})
emit('page', 'discoverProcess', { listItem: row})
}
const smartDiscoveryDialogRef = ref()
const smartData = ref(null)
......@@ -137,6 +137,8 @@ const handleMoreCommand = (command, row) => {
break
case 'viewHistory':
ElMessage.info(`查看历史: ${row.taskName}`)
emit('page','discoverHistory',{listItem:row})
break
case 'viewResult':
ElMessage.info(`查看结果: ${row.taskName}`)
......@@ -168,7 +170,7 @@ const handleSmartDiscover = (row) => {
}
const disCoverSmart = (val) => {
console.log(val)
emit('page', 'discoverProcess', { discoverProcessData: smartData.value})
emit('page', 'discoverProcess', { listItem: smartData.value})
}
const handleAddEditConfirm = (submitData, isEditMode) =>{
......
src/views/login.vue
......@@ -145,7 +145,7 @@ function handleLogin() {
appStore.setallNav(menus)
console.log('appStore.nav',appStore.allnavList)
// console.log('menus',filterMenus)
appStore.setNavStatus({type: appStore.navStatus.type || 'manage'})
// permissionStore.allsidebarRouters(menus)
permissionStore.setSidebarRouters(filterMenus)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论