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

<!-- 虚端子关系表 -->
<template>
  <div class="bigBox">
    <div class="header">
      <div v-if="needFlashName">
        {{ needFlashName + " — " + needScdName + " — 虚端子关系表" }}
      </div>
      <div v-else>虚端子关系表</div>
      <span class="closeX" @click="closeX">×</span>
    </div>
    <div class="antherHeader">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="间隔" prop="area_id">
          <el-select
            ref="levelRef"
            v-model="queryParams.area_id"
            placeholder="请选择间隔"
            multiple
            collapse-tags
            @change="changeLevel"
            @visible-change="visibleChange"
            @remove-tag="removeTag"
            clearable
          >
            <el-option
              v-for="dict in areaData"
              :key="dict.area_id"
              :label="dict.area_name"
              :value="dict.area_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="装置名称">
          <el-input v-model="queryParams.ied_name" clearable @change="onSubmitIedName"></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="reset">重置</el-button> -->
          <el-button @click="exportAll" class="daochu">导出全部</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-data" v-loading="loading"
    element-loading-text="数据加载中">
      <el-table
        :data="tableList"
        stripe
        height="90%"
        ref="tables"
        style="width: 100%; overflow-y: auto"
        :cell-style="{ color: '#1A2447', border: 'none', height: '40px' }"
        :header-cell-style="{
          color: '#7484AB',
          borderBottom: '1px solid #A3ADE0',
        }"
      >
        <el-table-column width="80" label="序号">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="ied_name" label="装置名称" />
        <el-table-column
          prop="attr_desc"
          label="装置描述"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="doi_addr" label="端子地址" />
        <el-table-column prop="doi_desc" label="端子描述" />
        <el-table-column prop="gooseorsv" label="信号类型" />
        <el-table-column prop="in_doi_addr" label="输入端子地址" />
        <el-table-column prop="in_doi_desc" label="输入端子描述" />
        <el-table-column prop="in_ied_name" label="输入装置名字" />
        <el-table-column prop="in_ied_desc" label="输入装置描述" />
      </el-table>
    </div>
  </div>
</template>
  
  <script setup>
import { ref, onMounted, watch, reactive, toRefs, nextTick } from "vue";
import { utils, writeFile } from "xlsx";
import { checkArea, fcdaList } from "@/api/iedNetwork";
import { ElMessage, ElLoading } from "element-plus";
import { useRoute } from "vue-router";
const route = useRoute();
const scdIdValue = route.query.id;
const props = defineProps({});

const data = reactive({
  queryParams: {
    scd_id: scdIdValue,
  },
});
const { queryParams } = toRefs(data);
// 表单重置
const reset = () => {
  queryParams.value = {
    scd_id: scdIdValue,
    area_id: [], //间隔
    ied_name: null, //装置名称
  };
  chooseInterval.value = null;
  getData();
};
const all = [{ area_name: "全部", id: "alls" }];
const areaData = ref([]); //获取间隔
const getArea = async () => {
  const areaRes = await checkArea({ scd_id: scdIdValue });
  if (!areaRes || !areaRes.data) return;
  areaData.value = [...all, ...areaRes.data]; //搜索处的间隔
};
const emit = defineEmits(["sclBack"]);
let needScdName = ref(""); //需要的scd名称
let needFlashName = ref(""); //需要的变电站名称
let tableList = ref([]); //crc效验结果表格数据
const loading = ref(true);
const getData = async () => {
  tableList.value = [];
  // let loading = ElLoading.service({
  //   lock: true,
  //   text: "正在查询数据",
  //   background: "rgba(0, 0, 0, 0.7)",
  // });
  const data = await fcdaList({
    scd_id: scdIdValue,
    area_ids: chooseInterval.value,
    ied_name: queryParams.value.ied_name,
  });
  if (!data || !data.data) return loading.value=false;
  data.data.forEach((item) => {
    if (item.doi_addr) tableList.value.push(item);
  });
  loading.value=false;
};
const chooseInterval = ref(null); //间隔下拉框选中的数据
const changeLevel = (e) => {
  chooseInterval.value = e ? e.join() : null;
  console.log('first', chooseInterval.value)
};
const removeTag = (e)=>{
  onSubmit()
}
//间隔下拉框关闭时触发
const visibleChange = (visible) => {
  if (visible == false) {
    queryParams.value.ied_name = null;
    onSubmit()
  }
};
const tables = ref(null);
const onSubmitIedName = () =>{
  queryParams.value.area_id = [];
  chooseInterval.value = null;
  onSubmit()
}
const onSubmit = () => {
  getData();
  nextTick(() => {
    if (!tables.value) return;
    tables.value.setScrollTop(0);
  });
};
const closeX = () => {
  emit("sclBack", 2);
};

// 导出全部
const exportAll = () => {
  const array = [
    [
      "装置名称",
      "装置描述",
      "端子地址",
      "端子描述",
      "信号类型",
      "输入端子地址",
      "输入端子描述",
      "输入装置名称",
      "输入装置描述",
    ],
  ];
  tableList.value.forEach((d) => {
    array.push([
      d.ied_name,
      d.attr_desc,
      d.doi_addr,
      d.doi_desc,
      d.gooseorsv,
      d.in_doi_addr,
      d.in_doi_desc,
      d.in_ied_name,
      d.in_ied_desc,
    ]);
  });
  const sheetName = "Sheet1";
  const workbook = {
    SheetNames: [sheetName],
    Sheets: {},
  };
  const sheet = utils.aoa_to_sheet(array);
  workbook.Sheets[sheetName] = sheet;
  // 设置列宽
  sheet["!cols"] = [
    { wch: 10 },
    { wch: 30 },
    { wch: 30 },
    { wch: 30 },
    { wch: 20 },
    { wch: 30 },
    { wch: 30 },
    { wch: 10 },
    { wch: 25 },
  ];
  writeFile(workbook, "虚端子关系.xlsx");
};
onMounted(() => {
  getArea();
  getData();
  const parentData = JSON.parse(route.query.parentData);
  needFlashName.value = parentData ? parentData.station_name : null;
  needScdName.value = parentData ? parentData.scd_name : null;
});
</script>
  
  <style scoped lang="scss">
em {
  list-style: none;
  font-style: normal;
}
.bigBox {
  width: 97%;
  height: calc(100vh - 230px);
  margin-left: 32px;
  overflow: hidden;
}

.header {
  width: 100%;
  height: auto;
  text-align: center;
}

.antherHeader {
  width: 100%;
  height: auto;
  color: #1a2447;
  font-size: 16px;
  margin: 16px 0;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  width: 100%;
  height: auto;
  padding: 12px 0 20px 0;
  border-bottom: 1px solid #a3ade0;
  color: #1a2447;
}
.closeX {
  font-size: 24px;
  color: #7484ab;
  cursor: pointer;
}

.table-data {
  height: 100%;
  margin-left: 16px;
  overflow-y: auto;
}
.daochu {
  border: 1px solid #255ce7;
  color: #255ce7;
  background: #f6f9ff;
}
:deep(.el-select .el-input) {
  width: 340px;
}
</style>