kev/Drawer/drawer-htmlroot/components/WellGroupDataHandle.vue

<!--
description: 井组数据导出组件
author: RYG
date: 2025年6月25日11:31:29
-->
<template>
  <el-dialog
    v-model="visible"
    title="井组数据"
    style="width: 1180px; height: 600px; z-index: 1000"
    header-cell-class-name="custom-header"
    @close="handleClose"
  >
    <el-table
      :data="tableData"
      style="width: 100%; height: 480px; border: 1px solid #dcdfe6"
    >
      <el-table-column prop="井号" label="井号" width="60" />
      <el-table-column prop="入靶点" label="入靶点" width="80" />
      <el-table-column prop="入靶点X" label="入靶点X" width="140" />
      <el-table-column prop="入靶点Y" label="入靶点Y" width="140" />
      <el-table-column prop="出靶点" label="出靶点" width="80" />
      <el-table-column prop="出靶点X" label="出靶点X" width="140" />
      <el-table-column prop="出靶点Y" label="出靶点Y" width="140" />
      <el-table-column prop="靶前位移" label="靶前位移" width="100" />
      <el-table-column prop="垂直靶前距" label="垂直靶前距" width="100" />
      <el-table-column prop="井支长度" label="井支长度" width="80" />
      <el-table-column prop="井支角度" label="井支角度" width="80" />
    </el-table>
    <!-- <el-divider /> -->
    <div style="float: right; margin-top: 10px">
      <el-button type="primary" @click="handleExportData" style="width: 80px"
        >导出</el-button
      >
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
const { message, send } = useWebSocket();
import Papa from "papaparse";

const props = defineProps({
  showDialog: {
    type: Boolean,
    required: true,
    default: false,
  },
});

const tableData = ref([]);

const emit = defineEmits(["update:showDialog"]);

const visible = ref(props.showDialog);

// 监听父组件传递的 showDialog 变化
watch(
  () => props.showDialog,
  (newVal) => {
    visible.value = newVal;
  }
);

// 监听visible的变化，并通知父组件
watch(visible, (val) => {
  emit("update:showDialog", val);
  if (val) {
    sendCommand(); // 当对话框打开时发送命令
  }
});

const sendCommand = () => {
  let drawerToken = localStorage.getItem("drawerToken");
  if (!drawerToken) {
    return;
  }
  console.log("发送 获取井组数据[GetWellGroupData] 命令");
  send("GetWellGroupData", "");
};

// onMounted(() => {
//   let drawerToken = localStorage.getItem("drawerToken");
//   if (!drawerToken) {
//     return;
//   }
//   console.log("发送 获取井组数据[GetWellGroupData] 命令");
//   send("GetWellGroupData", "");
// });

watchEffect(() => {
  try {
    if (!message.value) return; // 如果没有新消息，直接返回
    const json = JSON.parse(message.value);
    //   console.info(json);
    const evtType = json.type;

    // if (evtType != "Pong") {
    //   //   emitter.emit("evtType", { type: evtType, data: message.value });
    //   console.log("井组数据窗口[WellGroupDataHandle]得到的数据：", json);
    // }
    // }
    switch (evtType) {
      case "WellGroupData":
        let jsonData = parseXMLWithNoAttr(json.data);
        tableData.value = jsonData.ROOT.Item;
        break;
    }
  } finally {
  }
});

const handleClose = () => {
  visible.value = false;
  emit("update:showDialog", false);
};

const handleExportData = () => {
  // 这里可以实现导出数据的逻辑
  const csvData = Papa.unparse(tableData.value);
  console.log("导出数据");
  try {
    // 添加 UTF-8 BOM
    const BOM = "\uFEFF";
    const csvContent = BOM + csvData;
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
    const link = document.createElement("a");
    const url = URL.createObjectURL(blob);
    link.href = url;
    link.download = `井组数据_${Date.now()}.csv`;
    link.click();
    URL.revokeObjectURL(url); // 释放 URL 对象
  } catch (error) {
    console.error("导出数据时发生错误:", error);
    this.$message.error("导出数据失败" + error.message);
  }
};
</script>
<style scoped>
:deep(.custom-header) {
  background-color: #f6f5fa;
  color: #606266;
  font-weight: bold;
}
</style>