动态溯源功能初步完成

feiyu02

2025-05-15 026f17ebafb85250d9ae9b71b80ae5f07341c172

 src/components/monitor/DataTable.vue

@@ -1,3 +1,4 @@
<!-- eslint-disable no-unused-vars -->
<template>
  <BaseCard size="medium" direction="right">
    <template #content>
@@ -17,6 +18,7 @@
        :show-summary="false"
        :highlight-current-row="true"
        @row-click="handleRowClick"
        @sort-change="handleSort"
      >
        <el-table-column
          :fixed="true"
@@ -25,6 +27,7 @@
          :formatter="timeFormatter"
          align="center"
          width="66"
          sortable="custom"
        >
        </el-table-column>
        <template v-for="item in tableColumn" :key="item.name">
@@ -32,8 +35,10 @@
            v-if="selectFactorType.includes(item.value)"
            :prop="item.name"
            :label="item.label"
            :formatter="factorFormatter"
            align="center"
            width="64"
            width="79"
            sortable="custom"
          />
        </template>
      </el-table>
@@ -51,7 +56,18 @@
    </template>

    <template #footer>
      <el-row justify="end">
      <el-row justify="space-between" class="p-b-2 one-row">
        <el-button
          :loading="downloadLoading"
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleDownload"
          :disabled="downloadLoading"
          :icon="downloadLoading ? '' : 'download'"
        >
          导出数据
        </el-button>
        <el-text size="small" type="warning"
          >共 {{ tableData.length }} 条，{{ pageSize }}条/页</el-text
        >
@@ -66,6 +82,7 @@
import { checkboxOptions } from '@/constant/checkbox-options';
import { TYPE0 } from '@/constant/device-type';
import { windDir } from '@/constant/wind-dir';
import fileUtil from '@/utils/file';

export default {
  props: {
@@ -76,6 +93,7 @@
      // type0: 车载或无人机; type1:无人船
      default: TYPE0
    },
    deviceCode: String,
    selectFactorType: {
      type: Array,
      default: () => []
@@ -89,21 +107,39 @@
      total: 0,
      currentPage: 1,
      pageSize: 200,
      rowHeight: undefined
      rowHeight: undefined,
      // tableData:[],
      showData: [],
      downloadLoading: false
    };
  },
  emits: ['tableClick'],
  watch: {
    locateIndex(nV, oV) {
      if (nV == oV) return;
      this.$refs.tableRef.setCurrentRow(this.tableData[nV]);
      const _index = this.tableData.findIndex((v) => v.index == nV);
      this.$refs.tableRef.setCurrentRow(this.tableData[_index]);
      // 计算分页
      this.currentPage = parseInt(nV / this.pageSize) + 1;
      this.currentPage = parseInt(_index / this.pageSize) + 1;
      // 计算对应分页中的索引
      const index = nV % this.pageSize;
      const index = _index % this.pageSize;

      const h = this.getRowHeight();
      this.$refs.tableRef.setScrollTop(h * index - 350);
      setTimeout(() => {
        this.$refs.tableRef.setScrollTop(h * index - 350);
      }, 200);
    },
    currentPage(nV, oV) {
      if (nV == oV) return;
      this.getShowData();
    },
    pageSize(nV, oV) {
      if (nV == oV) return;
      this.getShowData();
    },
    tableData(nV, oV) {
      if (nV == oV) return;
      this.getShowData();
    }
  },
  computed: {
@@ -115,9 +151,6 @@
          f.datas.forEach((v, i) => {
            const name = f.factorName;
            let value = v.factorData;
            if (name == 'WIND_DIRECTION') {
              value = windDir(value);
            }
            if (list.length <= i) {
              list.push({
                index: i,
@@ -131,16 +164,28 @@
      }
      return list;
    },
    showData() {
      const sIndex = (this.currentPage - 1) * this.pageSize;
      const eIndex = sIndex + this.pageSize;
      return this.tableData.slice(sIndex, eIndex);
    },
    // showData: {
    //   get() {
    //     // const sIndex = (this.currentPage - 1) * this.pageSize;
    //     // const eIndex = sIndex + this.pageSize;
    //     // return this.tableData.slice(sIndex, eIndex);
    //     this.pageData = this.getShowData();
    //     return this.pageData
    //   },
    //   set(newValue) {
    //     this.pageData = newValue
    //   }
    // },
    tableColumn() {
      return checkboxOptions(this.deviceType);
      return checkboxOptions(this.deviceType, true);
    }
  },
  methods: {
    getShowData() {
      const sIndex = (this.currentPage - 1) * this.pageSize;
      const eIndex = sIndex + this.pageSize;
      this.showData = this.tableData.slice(sIndex, eIndex);
    },
    // 获取表格第一行高度
    getRowHeight() {
      if (!this.rowHeight) {
@@ -157,20 +202,75 @@
    timeFormatter(row, col, cellValue, index) {
      return moment(cellValue).format('HH:mm:ss');
    },
    factorFormatter(row, col, cellValue, index) {
      if (col.property == 'WIND_DIRECTION') {
        return windDir(cellValue);
      } else {
        return cellValue;
      }
    },
    handleRowClick(row, col, event) {
      this.$emit('tableClick', row.index);
      // console.log(row);
      // console.log(col);
      // console.log(event.target.getBoundingClientRect().height);
    },
    handleSort({ column, prop, order }) {
      // console.log(column);
      // console.log(prop);
      // console.log(order);
      this.tableData.sort((a, b) => {
        if (order == 'ascending') {
          if (a[prop] != b[prop]) {
            return a[prop] - b[prop];
          } else {
            return a.TIME - b.TIME;
          }
        } else if (order == 'descending') {
          if (a[prop] != b[prop]) {
            return b[prop] - a[prop];
          } else {
            return a.TIME - b.TIME;
          }
        } else {
          return a.TIME - b.TIME;
        }
      });
      this.getShowData();
    },
    handleDownload() {
      this.downloadLoading = true;
      setTimeout(() => {
        this.downloadLoading = false;
      }, 2000);
      const excelData = this.tableData.map((v) => {
        const res = {
          编号: ++v.index,
          时间: moment(v.TIME).format('YYYY-MM-DD HH:mm:ss')
        };
        this.tableColumn.forEach((c) => {
          res[c.label] = v[c.name];
        });
        return res;
      });
      fileUtil.exportToExcel(excelData, this.deviceCode, '走航监测数据.xlsx');
      this.downloadLoading = false;
    }
  }
};
</script>
<style scoped>
.one-row {
  /* background-color: red; */
  flex-wrap: nowrap;
}
</style>
<style>
.el-table {
  --el-table-bg-color: transparent;
  --el-table-row-hover-bg-color: #23dad0a2;
  --el-table-current-row-bg-color: #23dad0a2;
  --el-table-row-hover-bg-color: #bffff454;
  /* --el-table-row-hover-bg-color: transparent; */
  --el-table-current-row-bg-color: var(--select_color);
  /* --el-table-current-row-bg-color: #7dff5d96; */
  --el-table-text-color: var(--font-color);
}
@@ -191,7 +291,7 @@

.t-header-cell {
  background-color: var(--bg-color-2) !important;
  text-align: center !important;
  /* text-align: center !important; */
  color: white !important;
}
.el-pagination {