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

<template>
  <div>
    <div class="btnBox">
      <div @click="checkNow">
        <img :src="addPng" alt="" />
        <span>新的比对</span>
      </div>
      <div @click="reloadCheck">
        <img :src="againPng" alt="" />
        <span>重新比对</span>
      </div>
      <div @click="excelPort">
        <img :src="dervicePng" alt="" />
        <span>导出所有结果</span>
      </div>
    </div>
    <div class="tableBox">
      <el-table
        ref="multipleTableRef"
        :data="tableList"
        style="width: 100%; height: calc(100vh - 320px)"
        stripe
        @selection-change="handleSelectionChange"
        @select-all="chooseAll"
        :header-cell-style="{
          background: '#F7F8FB !important',
          color: '#7484AB',
          borderBottom: '1px solid #A3ADE0 !important',
          fontWeight: '400',
        }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          label="对比scd"
          width="190"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column
          property="CREATED_TIME"
          label="时间"
          width="auto"
          :show-overflow-tooltip="true"
        />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="searchScdCheck(scope.row)"
              ><el-icon> <View /> </el-icon>查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div>新的对比
      <LookScd
        v-if="lookScdModal"
        :lookScdModal="lookScdModal"
        :aktType="aktType"
        @lookScdBack="lookScdBack"
      >
      </LookScd>
    </div> -->
    <!-- 新的对比弹窗 -->
    <el-dialog
      @close="cancelClick"
      v-model="lookScdModal"
      width="40vw"
      style="height: 400px"
      append-to-body
      draggable
    >
      <template #header>
        <div class="my-header">
          <div class="title">请选择对比的SCD文件</div>
        </div>
      </template>
      <div class="uploda-file">
        请选择：
        <el-upload
          v-model:file-list="fileList"
          :limit="1"
          class="upload-demo"
          :http-request="uploadFile"
          :on-change="fileSuccess"
          :on-remove="handleRemove"
        >
          <template #trigger>
            <div class="upload-title">
              <img :src="dervicePng" alt="" />
              <span>上传文件</span>
            </div>
          </template>
        </el-upload>
      </div>
      <div class="sures sureUpload">确认上传</div>
      <div class="sures startContrast">开始对比</div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs, watch, nextTick, defineEmits } from "vue";
import scdCheck from "@/api/scdCheck/scdCheck";
import { uploadfile } from "@/api/scdCheck/scdCheck2";
import scd from "@/api/scd";
import systemRow from "@/api/systemRow";
import { ElMessage, ElLoading } from "element-plus";
import LookScd from "../modalCom/LookScd.vue";
import dervicePng from "@/assets/image/scdcheck/derive.png";
import againPng from "@/assets/image/scdcheck/again.png";
import addPng from "@/assets/image/scdcheck/add.png";
import { useRoute } from "vue-router";
const route = useRoute();
const emit = defineEmits(["scdTreeBack"]);
let tableList = ref([]);
let multipleTableRef = ref();
let alreadyTriggered = ref(false);
let scdid = ref([]);
const loading = ref(false);
let lookScdArr = ref([]);
let lookScdModal = ref(false);
const fileList = ref([]); //上传的文件
const handleSelectionChange = (e) => {
  //复选
};
const chooseAll = (e) => {
  //全选
};
const checkNow = (e) => {
  //scd比对
  lookScdModal.value = true;
};
const excelPort = () => {
  //导出excel
  systemRow
    .portExcel({
      code: "scd-comp-result",
    })
    .then((res) => {
      console.log(res, "port");
      if (res.data) {
        return;
      } else {
        ElMessage({
          message: res.msg,
          type: "info",
        });
      }
    });
};
const reloadCheck = () => {
  //重新比对
  checkNow();
};
const uploadFile = async (e) => {
  console.log("e", e);
  const fileRes = await uploadfile({
    file: e.file,
    station_id: route.query.stationId,
    is_checkin: 0,
    data_type: "a_scd",
  });
  if (fileRes.code == 0) {
    ElMessage({
      type: "success",
      message: "上传成功!",
    });
  }else{
    ElMessage({
      type: "error",
      message: "上传失败!",
    });
  }
};
const searchScdCheck = (row) => {
  //查看scd对比
  const loading = ElLoading.service({
    lock: true,
    text: "正在查询数据",
    background: "rgba(0, 0, 0, 0.7)",
  });
  scdCheck.scdResult({ comp_id: row.id }).then((res) => {
    console.log(res, "对比详细");
    if (res.code == 0) {
      loading.close();
    }
  });
  // scdCheck.scdAll({ comp_id: row.id }).then(res => {
  //     console.log(res, '阿拉蕾');
  // })
};
const lookScdBack = (data, row) => {
  //选择scd文件模态框返回数据
  lookScdModal.value = data;
  lookScdArr.value = row;
  emit("scdTreeBack", lookScdArr.value);
};
const aktType = () => {
  //初始化数据
  scdCheck.flashStationDui({ station_id: route.query.stationId }).then((res) => {
    //获取差异纪录列表
    tableList.value = res.data;
  });
};
onMounted(() => {
  aktType();
});
</script>

<style scoped lang="scss">
.btnBox > div,
.upload-title {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
  background: url("~@/assets/image/scdcheck/bgscd.png") no-repeat center;
  border-radius: 2px;
  font-size: 14px;
  color: #255ce7;
  img {
    width: 20px;
    height: 20px;
    margin: 0 4px 0 0;
  }
}
.upload-title {
  width: 102px;
  background-size: 102px 45px;
}
.btnBox {
  display: flex;
  margin-bottom: 12px;

  & > div:first-child,
  & > div:nth-child(2) {
    width: 102px;
    background-size: 102px 45px;
  }
  & > div:last-child {
    width: 128px;
    background-size: 128px 45px;
  }
}
.my-header {
  border-bottom: 1px solid #a3ade0;
  font-size: 16px;
  color: #1a2447;
  .title {
    padding-bottom: 15px;
  }
}
.uploda-file {
  display: flex;
  align-items: center;
}
.upload-demo {
  display: flex;
}
.sures{
  background: #a4b0cf;
    margin-left: 60px;
    color: #fff;
    width: 124px;
    height: 32px;
    margin-top: 18px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}
</style>