DataOps-web/src/views/dataDeduplication/components/change.vue

<template>
  <div>
    <m-card title="元数据新旧差异" class="pb-3">
      <m-table
        class="candidate-table"
        :headers="headers"
        :items="items"
        :loading="false"
        :is-tools="false"
        :disable-sort="true"
        :show-select="false"
        :can-delete="false"
        :show-page="false"
        :items-per-page="-1"
        :no-radius="true"
      >
      </m-table>
    </m-card>

    <m-card title="影响关系图谱" bodyStyle="flex: 1" style="height: 800px;" class="d-flex flex-column mt-3">
      <Graph :graphData="info.impact_graph"></Graph>
    </m-card>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import MTable from '@/components/List/table.vue'
import Graph from './graph.vue'

export default {
  name: 'changeComponent',
  components: {
    MCard,
    MTable,
    Graph
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      selectedCandidateMetaId: null
    }
  },
  computed: {
    newMetaSnapshot () {
      if (!this.info || !this.info.new_meta) {
        return {}
      }
      return this.info.new_meta
    },
    headers () {
      return [
        { text: '', align: 'start', value: 'title' },
        { text: '元数据（新）', align: 'start', value: 'new' },
        { text: '元数据（旧）', align: 'start', value: 'old' }
      ]
    },
    items () {
      if (!this.info || !this.info.new_meta || !this.info.old_meta) {
        return []
      }
      return [
        {
          title: '中文名',
          new: this.info.new_meta.name_zh || '-',
          old: this.info.old_meta.snapshot.name_zh || '-'
        },
        {
          title: '英文名',
          new: this.info.new_meta.name_en || '-',
          old: this.info.old_meta.snapshot.name_en || '-'
        },
        {
          title: '数据类型',
          new: this.info.new_meta.data_type || '-',
          old: this.info.old_meta.snapshot.data_type || '-'
        },
        {
          title: '数据标签',
          new: this.info.new_meta.tag_ids?.join(', ') || '-',
          old: this.info.old_meta.snapshot.tag_ids?.join(', ') || '-'
        }
      ]
    }
  },
  methods: {
    handleSelect (candidateMetaId) {
      this.selectedCandidateMetaId = candidateMetaId
      this.$emit('selectCandidateMeta', candidateMetaId)
    }
  }
}
</script>

<style lang="scss" scoped>
.snapshot-card {
  background: #f5f3f3;
  border-radius: 6px;
  padding: 16px 20px;
  box-shadow: 0 0 0 1px #eee;
}

.snapshot-title {
  font-weight: 700;
  margin-bottom: 16px;
  // font-size: 14px;
  color: #333;
}

.snapshot-wrapper {
  display: flex;
  align-items: flex-start;
}

.snapshot-labels,
.snapshot-values {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.snapshot-labels {
  // flex: 0 0 90px;
  text-align: right;
  margin-right: 12px;
  color: #403b3b;
  // font-weight: 700;
}

.snapshot-values {
  flex: 1;
  word-break: break-all;
}

.snapshot-labels li,
.snapshot-values li {
  margin: 6px 0;
}

.candidate-table thead th {
  background-color: #f5f5f5;
  font-weight: 600;
  font-size: 13px;
}

.candidate-table tbody tr:hover {
  background-color: #f9f9f9;
}

.candidate-table td {
  font-size: 13px;
}
</style>