scd_tools_ui/src/pages/netStructPicture/components/infoTable.vue

<!-- 信息点表 -->
<template>
  <div v-loading="loading">
    <div class="cont-table">
      <el-table
        :data="dingzhiData"
        stripe
        style="width: 100%"
        :cell-style="{ color: '#000', cursor: 'pointer' }"
        @row-click="svSendRowClick3"
        :highlight-current-row="true"
        ref="myTable5"
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="accesspoint_name" label="访问点"/>
        <el-table-column label="逻辑设备(lnst)" width="160">
          <template #default="scope">
            {{ `${scope.row.ld_desc}(${scope.row.ld_inst})` }}
          </template>
        </el-table-column>
        <el-table-column prop="block_name" label="控制块名称" />
        <el-table-column prop="block_desc" label="控制块描述" />
        <el-table-column prop="block_datset" label="数据集名称" />
        <el-table-column prop="block_rptid" label="RptID" />
        <el-table-column prop="block_intgpd" label="完整性周期" />
        <el-table-column prop="block_confrev" label="配置版本" />
        <el-table-column prop="block_buffered" label="是否缓存" />
        <el-table-column prop="block_buftime" label="缓存时间" />
        <el-table-column label="信息点数量">
          <template #default="scope">
            <span v-if="scope.row.list">{{ scope.row.list.length }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="title">
        定值条目列表详情(共<span v-if="dingzhiDataChild">{{
          dingzhiDataChild.length
        }}</span
        >条)
      </div>
      <el-table
        :data="dingzhiDataChild"
        style="width: 100%"
        stripe
        :cell-style="{ color: '#000' }"
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="doi_desc" label="条目描述" />
        <el-table-column prop="da_datatype" label="数据类型" />
        <el-table-column prop="short_addr" label="内部地址" />
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { onMounted, watch, ref, nextTick, defineEmits, inject } from "vue";
import { getPointtable } from "@/api/iedNetwork";
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps({
  checkData: {
    type: Object,
    default: () => {},
  },
  isPhoto: {
    type: String,
    default: "",
  },
  delScdId:{
    type:String,
    default: '',
  }
});
const dingzhiData = ref(null);
const dingzhiDataChild = ref(null);
const myTable5 = ref(null);
const loading = ref(true);
const getDingzhisList = async () => {
  const dingRes = await getPointtable({
    scd_id: scdIdValue,
    ied_name: props.checkData.ied_name,
  });
  loading.value= false;
  if (dingRes.data.length > 0) {
    dingzhiData.value = dingRes.data;
    dingzhiDataChild.value = dingRes.data[0].list;
    myTable5.value.setCurrentRow(dingzhiData.value[0]);
  }
};
const svSendRowClick3 = (row, column) => {
  dingzhiDataChild.value = row.list;
};
watch(
  () => props.checkData,
  (newValue) => {
    dingzhiData.value = [];
    dingzhiDataChild.value = [];
    if (newValue != null) {
      getDingzhisList();
    }
  }
);
let scdIdValue = '';
onMounted(() => {
  if (props.delScdId) {
    scdIdValue = props.delScdId;
  } else {
    scdIdValue = route.query.id;
  }
  getDingzhisList();
});
</script>
<style scoped lang="scss">
.cont-table {
  height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
:deep(.el-table) {
  flex-basis: 45%;
}
.title {
  margin: 16px;
  color: #51637f;
}
</style>