DataRoom/data-room-ui/packages/DataSetLabelManagement/src/LabelConfigDetails.vue

<template>
  <div
    v-if="dialogFormVisible"
    class="inner-container"
  >
    <el-scrollbar class="data-set-scrollbar">
      <!-- <el-page-header
        class="bs-el-page-header"
        @back="goBack"
      /> -->
      <el-page-header class="bs-el-page-header">
        <template slot="content">
          <div class="page-header">
            <div class="page-header-left">
              标签详情
            </div>
            <div class="page-header-right">
              <el-button
                class="back bs-el-button-default"
                @click="goBack"
              >
                返回
              </el-button>
            </div>
          </div>
        </template>
      </el-page-header>
      <el-divider
        class="bs-el-divider"
        content-position="left"
      >
        属性信息
      </el-divider>

      <el-row
        style="width: 100%;"
        :gutter="5"
      >
        <el-col
          :span="8"
          class="attrInfo"
        >
          <el-tooltip
            v-if="dataForm.labelName.length > 20"
            :content="dataForm.labelName"
            class="item"
            effect="dark"
            placement="bottom-start"
          >
            <span class="text-style">标签名称： {{ ellipsis(dataForm.labelName, 20) }}</span>
          </el-tooltip>
          <span
            v-else
            class="text-style"
          >
            标签名称： {{ ellipsis(dataForm.labelName, 20) }}
          </span>
        </el-col>
        <el-col
          :span="8"
          class="attrInfo"
        >
          <el-tooltip
            v-if="dataForm.labelType.length > 20"
            :content="dataForm.labelType"
            class="item"
            effect="dark"
            placement="bottom-start"
          >
            <span class="text-style">标签类型： {{ ellipsis(dataForm.labelType, 20) }}</span>
          </el-tooltip>
          <span
            v-else
            class="text-style"
          >
            标签类型： {{ ellipsis(dataForm.labelType, 20) }}
          </span>
        </el-col>
        <el-col
          :span="8"
          class="attrInfo"
        >
          <el-tooltip
            v-if="dataForm.labelDesc.length > 20"
            :content="dataForm.labelDesc"
            class="item"
            effect="dark"
            placement="bottom-start"
          >
            <span class="text-style">标签说明： {{ ellipsis(dataForm.labelDesc, 20) }}</span>
          </el-tooltip>
          <span
            v-else
            class="text-style"
          >
            标签说明： {{ ellipsis(dataForm.labelDesc, 20) }}
          </span>
        </el-col>
        <el-col
          :span="8"
          class="attrInfo"
        >
          <el-tooltip
            v-if="dataForm.createBy && dataForm.createBy.length > 20"
            :content="dataForm.createBy"
            class="item"
            effect="dark"
            placement="bottom-start"
          >
            <span class="text-style">创建人： {{ ellipsis(dataForm.createBy, 20) }}</span>
          </el-tooltip>
          <span
            v-else
            class="text-style"
          >
            创建人： {{ ellipsis(dataForm.createBy, 20) }}
          </span>
        </el-col>
        <el-col
          :span="16"
          class="attrInfo"
        >
          <el-tooltip
            v-if="dataForm.createDate.length > 20"
            :content="dataForm.createDate"
            class="item"
            effect="dark"
            placement="bottom-start"
          >
            <span class="text-style">创建时间： {{ ellipsis(dataForm.createDate, 20) }}</span>
          </el-tooltip>
          <span
            v-else
            class="text-style"
          >
            创建时间： {{ ellipsis(dataForm.createDate, 20) }}
          </span>
        </el-col>
        <el-col
          :span="8"
          class="attrInfo"
        >
          <el-tooltip
            v-if="dataForm.updateBy && dataForm.updateBy.length > 20"
            :content="dataForm.updateBy"
            class="item"
            effect="dark"
            placement="bottom-start"
          >
            <span class="text-style">
              修改人： {{ ellipsis(dataForm.updateBy, 20) }}
            </span>
          </el-tooltip>
          <span
            v-else
            class="text-style"
          >
            修改人： {{ ellipsis(dataForm.updateBy, 20) }}
          </span>
        </el-col>
        <el-col
          :span="8"
          class="attrInfo"
        >
          <el-tooltip
            v-if="dataForm.updateDate.length > 20"
            :content="dataForm.updateDate"
            class="item"
            effect="dark"
            placement="bottom-start"
          >
            <span class="text-style">修改时间： {{ ellipsis(dataForm.updateDate, 20) }}</span>
          </el-tooltip>
          <span
            v-else
            class="text-style"
          >
            修改时间： {{ ellipsis(dataForm.updateDate, 20) }}
          </span>
        </el-col>
      </el-row>

      <el-divider
        class="bs-el-divider"
        content-position="left"
      >
        关联数据集信息
      </el-divider>

      <div id="container" />
    </el-scrollbar>
  </div>
</template>

<script>
import G6 from '@antv/g6'
import { getLabelDetail } from 'packages/js/utils/LabelConfigService'

export default {
  name: 'LabelConfigDetails',
  data () {
    return {
      dialogFormVisible: false,
      dataForm: {
        createBy: '',
        createDate: '',
        updateBy: '',
        updateDate: '',
        labelDesc: '',
        labelName: '',
        labelType: ''
      },
      jsonData: {},
      chartHeight: 0,
      chartWidth: 0
    }
  },
  methods: {
    ellipsis (value, len) {
      if (!value) return ''
      if (value.length > len) {
        return value.slice(0, len) + '...'
      }
      return value
    },
    init (row) {
      this.dialogFormVisible = true
      getLabelDetail(row.id).then((r) => {
        this.jsonData = r.jsonData
        if (r.jsonData.nodes.length > 1) {
          this.chartHeight = r.jsonData.nodes.length * 100
        } else {
          this.chartHeight = 200
        }
        this.dataForm = r

        this.chartWidth = r.labelName.length * 20

        this.$nextTick(() => {
          this.initG6(r.jsonData)
        })
      })
    },
    goBack () {
      this.dialogFormVisible = false
      this.$nextTick(() => {
        this.$parent.labelVisible = true
        this.$parent.getDataList()
      })
    },
    nodeEach (nodes) {
      nodes.forEach(node => {
        if (!node.style) {
          node.style = {}
        }
        switch (node.class) {
          case 'c1': {
            node.shape = 'circle'
            node.size = 40
            break
          }
          case 'c3': {
            node.shape = 'rect'
            // node.size = [80, 50];
            node.style = {
              stroke: '#FFFFFF',
              fill: '#DFE1E3'
            }
            break
          }
          case 'c0': {
            node.shape = 'ellipse'
            node.size = [80, 40]
            break
          }
          case 'c2': {
            node.shape = 'diamond'
            node.size = [60, 60]
            break
          }
        }
      })
    },
    // 初始化G6
    initG6 (json) {
      const data = json
      const width = document.getElementById('container').scrollWidth

      this.nodeEach(data.nodes)
      const tooltip = new G6.Tooltip({
        offsetX: 10,
        offsetY: 0,
        fixToNode: [1, 0],
        itemTypes: ['node', 'edge'],
        getContent: (e) => {
          const outDiv = document.createElement('div')
          outDiv.style.width = 'fit-content'
          outDiv.innerHTML = `<div style='width: 200px;'>${e.item.getModel()._label}</div>`
          return outDiv
        },
        shouldBegin: (e) => {
          let res = true
          if (e.item.getModel()._label && e.item.getModel()._label.length > 12) {
            res = true
          } else {
            res = false
          }
          return res
        }
      })

      const graph = new G6.Graph({
        container: 'container',
        // width: '800',
        height: this.chartHeight,
        plugins: [tooltip],
        // modes: {
        //   default: ['drag-canvas', 'zoom-canvas', 'click-select']
        // },
        defaultNode: {
          type: 'rect',
          size: [150, 50],
          style: {
            fill: '#9ACAFF',
            stroke: '#FFFFFF'
          }
        },
        // 连线类型及样式
        defaultEdge: {
          type: 'line',
          style: {
            offset: 25,
            endArrow: true,
            lineWidth: 2,
            stroke: '#333'
          }
        }
      })
      data.nodes.forEach(node => {
        node._label = node.label
        if (node.label.length > 12) {
          node.label = node.label.substr(0, 9) + '...'
        }
      })
      graph.data(data)
      graph.render()
    }
  }
}
</script>

<style scoped>

@import '../../assets/style/bsTheme.scss';
.data-set-scrollbar {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: none;
}
.inner-container{
  overflow-x: hidden;
}
.el-col {
  height: 35px;
}

.attrInfo {
  padding-left: 20px !important;
}

.text-style{
  color: var(--bs-el-title);
}

.page-header {
  display: flex;
  position: relative;

  .page-header-right {
    position: absolute;
    right: 16px;
  }
}
</style>