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" :close-on-click-modal="false">
    <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>
    <LoadingDialog v-model="loading" ref="loadingRef" :timeout="3000" message="正在加载井组数据……" @timeout="onTimeout" />
  </el-dialog>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { useWebSocket } from '@/composables/useWebSocket'
const { messages, onMessage, send } = useWebSocket();
const { exportToCSV } = useCSVExport();
const { $toastMessage } = useNuxtApp();
import { STORAGE_KEYS } from "~/utils/storageKeys"
import { COMMAND } from '~/utils/commandTypes'
// 当前页图件token的 key
const currentTokenKey = STORAGE_KEYS.WELL_RECOMMAND_TOKEN;

const loading = ref(false);
const loadingRef = ref(null);

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) {
    loading.value = true;
    sendCommand(); // 当对话框打开时发送命令
  }
});

const sendCommand = () => {
  let drawerToken = localStorage.getItem(currentTokenKey);
  if (!drawerToken) {
    return;
  }
  send(COMMAND.GET_WELL_GROUP_DATA, "", drawerToken);
};

const onTimeout = () => {
  $toastMessage.error("获取井组数据超时，请稍后重试！");
}

const unsubscribe = onMessage((data) => {
  try {
    if (!data) return; // 如果没有新消息，直接返回
    // console.log("WellGroupDataHandle Data：", data);
    const json = JSON.parse(data);
    const evtType = json.type;
    switch (evtType) {
      case COMMAND.WELL_GROUP_DATA:
        let jsonData = parseXMLWithNoAttr(json.data);
        tableData.value = jsonData.ROOT.Item;
        loadingRef.value.close();
        break;
    }
  } finally {
  }
});

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

const handleExportData = () => {
  try {
    const csvName = `井组数据_${Date.now()}.csv`;

    const columns = [
      { key: "井号", label: "井号" },
      { key: "入靶点", label: "入靶点" },
      { key: "入靶点X", label: "入靶点X" },
      { key: "入靶点Y", label: "入靶点Y" },
      { key: "出靶点", label: "出靶点" },
      { key: "出靶点X", label: "出靶点X" },
      { key: "出靶点Y", label: "出靶点Y" },
      { key: "靶前位移", label: "靶前位移" },
      { key: "垂直靶前距", label: "垂直靶前距" },
      { key: "井支长度", label: "井支长度" },
      { key: "井支角度", label: "井支角度" }
    ];

    exportToCSV(tableData.value, columns, csvName);
  } catch (error) {
    console.error("导出数据时发生错误:", error);
    this.$message.error("导出数据失败" + error.message);
  }
};

onUnmounted(() => {
  unsubscribe();
});
</script>
<style scoped>
:deep(.custom-header) {
  background-color: #f6f5fa;
  color: #606266;
  font-weight: bold;
}
</style>