DataOps-web/src/views/dataBook/businessDomain/components/businessDomainInfo.vue

<template>
  <m-card title="基本信息" class="mb-3">
    <v-row>
      <v-col class="d-flex" cols="12">
        <ul style="color: #403b3b;font-weight:700;text-align:right;">
          <li>中文名称 ：</li>
          <li>英文名称 ： </li>
          <li>分类 ： </li>
          <li>所属机构 ： </li>
          <li>负责人 ： </li>
          <li>更新频率 ： </li>
          <li>数据敏感度 ： </li>
          <li>使用数据源 ： </li>
          <li>存储位置 ： </li>
          <li>状态 ： </li>
          <li>创建时间 ： </li>
          <li>数据标签 ： </li>
          <li>描述/备注 ： </li>
        </ul>
        <ul>
          <li>{{ info.name_zh ?? '-' }}</li>
          <li>{{ info.name_en ?? '-' }}</li>
          <li>{{ info.category ?? '-' }}</li>
          <li>{{ info.organization ?? '-' }}</li>
          <li>{{ info.leader ?? '-' }}</li>
          <li>{{ info.frequency ?? '-' }}</li>
          <li>{{ info.data_sensitivity ?? '-' }}</li>
          <li>{{ info.data_source ? '是' : '否' ?? '-' }}</li>
          <li>{{ info.storage_location ?? '-' }}</li>
          <li>
            <v-chip :color="info.status ? 'success' : 'error'" small>
              {{ info.status ? '已启用' : '已禁用'}}
            </v-chip>
          </li>
          <li>{{ info.create_time ?? '-' }}</li>
          <li>
            <v-chip v-for="item in info.tag" :key="item.id" color="primary" small class="mr-2">
              {{ item.name_zh }}
            </v-chip>
          </li>
          <li>{{ info.describe ?? '-' }}</li>
        </ul>
      </v-col>
    </v-row>
  </m-card>
</template>

<script>
// 业务域-基本信息
import MCard from '@/components/MCard'
import { api } from '@/api/dataGovernance'
export default {
  name: 'businessDomainInfo',
  components: { MCard },
  data () {
    return {
      info: {}
    }
  },
  created () {
    this.getBusinessDomainDetailInfo()
  },
  methods: {
    async getBusinessDomainDetailInfo () {
      try {
        const { data } = await api.getBusinessDomainDetail({ id: +this.$route.params.id })
        if (!data || !Object.keys(data).length) {
          return
        }
        this.info = data
      } catch (error) {
        this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
ul{
  list-style: none;
}
ul li{
  margin: 10px 0;
}
.ladder{
    color:white;
    font-weight: bold;
    width:140px;
    height: 30px;
    line-height: 30px;
    background-color: #7495ca;
    position: relative;
    text-align: center;
  }
.ladder::after {
  content: '';
  height: 0px;
  width: 0px;
  position: absolute;
  right: -30px;
  top: -30px;
  border-top: 30px solid rgba(0, 0, 0, 0);
  border-left: 30px solid rgba(0, 0, 0, 0);
  border-right: 30px solid rgba(0, 0, 0, 0);
  border-bottom: 30px solid #7495ca;
}
</style>