代码提交

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

@@ -0,0 +1,255 @@
+<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>