bigscreenWeb/src/views/SagTraceResult_WX/components/eventStatistics/dropOffTable.vue

<template>
  <!--谐波放大事件 -->
  <el-dialog
    :close-on-click-modal="false"
    draggable
    v-model="machineVisible"
    :title="title"
    width="1200px"
  >
    <div class="tableBox">
      <div style="display: flex; justify-content: flex-end">
        <el-button
          type="primary"
          :icon="Download"
          @click="exportTable"
          size="small"
          >导出
        </el-button>
      </div>
      <el-table
        :scrollbar-always-on="true"
        :data="tableData"
        height="443px"
        size="small"
        v-loading="loading"
        element-loading-background="#343849c7"
        :header-cell-style="{ textAlign: 'center' }"
        border
        style="margin-top: 13px"
      >
        <el-table-column label="序号" align="center" type="index" width="70">
          <template #default="scope">
            <span>{{
              (form.pageNum - 1) * form.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="monitorName"
          align="center"
          label="监测点名称"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="objName"
          align="center"
          label="用户"
          show-overflow-tooltip
        />
        <el-table-column
          prop="startTime"
          align="center"
          label="开始时间"
          width="140"
        />
        <el-table-column
          prop="endTime"
          align="center"
          label="结束时间"
          width="140"
        />
        <el-table-column
          prop="harmonicCount"
          align="center"
          label="次数"
          width="60"
        />
        <el-table-column prop="phase" align="center" label="相别" width="60" />
        <el-table-column
          prop="duration"
          align="center"
          label="持续时间(min)"
          width="100"
        >
          <template #default="scope">
            {{ scope.row.duration / 60 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="vavgValue"
          align="center"
          label="电压标准值"
          width="80"
        />
        <el-table-column
          prop="iavgValue"
          align="center"
          label="电流标准值"
          width="80"
        >
          <template #default="scope">
            {{ Math.floor(scope.row.iavgValue * 100) / 100 }}
          </template>
        </el-table-column>
         <el-table-column
          prop="upScheme"
          align="center"
          label="处理措施"
          show-overflow-tooltip
        />
        <el-table-column prop="address" align="center" label="操作" width="60">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              link
              @click="arendChart(scope.row)"
              >趋势图</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      size="small"
      style="margin-top: 10px"
      :currentPage="form.pageNum"
      :page-size="form.pageSize"
      :page-sizes="[10, 20, 50, 100, 200]"
      background
      :layout="'sizes,total, ->, prev, pager, next, jumper'"
      :total="total"
      @size-change="onTableSizeChange"
      @current-change="onTableCurrentChange"
    ></el-pagination>
  </el-dialog>
  <TrendChart ref="trendChartRef" @close="machineVisible = true"></TrendChart>
</template>
<script lang="ts" setup>
import { ref, reactive, inject, nextTick } from "vue";
import { getDetail } from "@/api/manage_wx";
import TrendChart from "./trendChart.vue";
import { Download } from "@element-plus/icons-vue";
import * as XLSX from "xlsx";

const machineVisible = ref(false);
const title = ref("谐波放大事件");
const form = reactive({
  searchBeginTime: "",
  lineId: "",
  pageNum: 1,
  pageSize: 20,
});
const total = ref(0); // 假设总条数为100
const tableData = ref([]);
const loading = ref(false);
const trendChartRef = ref();
//form表单校验规则
const open = (text: string, time?: any, lineId?: any) => {
  machineVisible.value = true;
  form.lineId = lineId;
  form.searchBeginTime = time;
  nextTick(() => {
    getTableData();
  });
};
const onTableSizeChange = (size: number) => {
  form.pageSize = size;
  getTableData();
};
const onTableCurrentChange = (page: number) => {
  form.pageNum = page;
  getTableData();
};

const getTableData = async () => {
  loading.value = true;
  const res: any = await getDetail(form);

  if (res.code == "A0000") {
    tableData.value = res.data.records;
    total.value = res.data.total;
  }
  loading.value = false;
};

// 趋势图
const arendChart = (row: any) => {
  trendChartRef.value.open(row);
  machineVisible.value = false;
};

// 导出
const exportTable = async () => {
  let columnExpor: any = [
    [
      "监测点名称",
      "用户",
      "开始时间",
      "结束时间",
      "次数",
      "相别",
      "持续时间(min)",
      "电压标准值",
      "电流标准值",
    ],
  ];

  let list = [];

  await getDetail({
    ...form,
    pageNum: 1,
    pageSize: total.value,
  }).then((res) => {
    let data = res.data.records.map((item) => {
      return [
        item.monitorName,
        item.objName,
        item.startTime,
        item.endTime,
        item.harmonicCount,
        item.phase,
        item.duration / 60,
        item.vavgValue,
        Math.floor(item.iavgValue * 100) / 100,
      ];
    });
    list = [...columnExpor, ...data];
    // 创建工作表
    const worksheet = XLSX.utils.aoa_to_sheet(list);

    worksheet["!cols"] = list.map((col) => ({ wch: 20 }));

    // 创建工作簿
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "谐波放大事件");

    // 写出文件
    XLSX.writeFile(workbook, "谐波放大事件" + ".xlsx");
  });
};

defineExpose({ open });
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";

.tableBox {
  padding: 0px !important;
}

.formBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.formLeft {
  display: flex;
  align-items: center;
  color: #fff;
}
</style>