1. 完成表格模块的功能迁移； 2. 完成表格、折线图、地图标记三者点击联动

riku

2024-05-08 f16acb06ab278cdcb1d39a29680634010638326d

 src/components/monitor/DataTable.vue

@@ -1,61 +1,109 @@
<template>
  <BaseCard>
  <BaseCard size="medium" direction="right">
    <template #content>
      <el-table
        :data="tableData"
        ref="tableRef"
        :data="showData"
        v-loading="loading"
        table-layout="fixed"
        :row-class-name="tableRowClassName"
        :height="tableHeight"
        table-layout="auto"
        height="calc(94vh - var(--bevel-length-2))"
        size="small"
        :show-overflow-tooltip="true"
        border
        row-class-name="t-row"
        cell-class-name="t-cell"
        header-row-class-name="t-header-row"
        header-cell-class-name="t-header-cell"
        :show-summary="false"
        :highlight-current-row="true"
        @row-click="handleRowClick"
      >
        <el-table-column prop="TIME" label="时间" />
        <el-table-column
          v-for="(item, index) in tableColumn"
          :key="index"
          :prop="item.name"
          :label="item.label"
        />
          :fixed="true"
          prop="TIME"
          label="时间"
          :formatter="timeFormatter"
          align="center"
          width="66"
        >
        </el-table-column>
        <template v-for="item in tableColumn" :key="item.name">
          <el-table-column
            v-if="selectFactorType.includes(item.value)"
            :prop="item.name"
            :label="item.label"
            align="center"
            width="64"
          />
        </template>
      </el-table>
      <el-pagination
        v-if="pagination"
        ref="paginationRef"
        class="el-pagination"
        small
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[200, 500]"
        :hide-on-single-page="false"
        layout="prev, pager, next"
        :total="tableData.length"
      />
    </template>

    <template #footer> </template>
    <template #footer>
      <el-row justify="end">
        <el-text size="small" type="warning"
          >共 {{ tableData.length }} 条，{{ pageSize }}条/页</el-text
        >
      </el-row>
    </template>
  </BaseCard>
</template>

<script>
import moment from 'moment';
import { FactorDatas } from '@/model/FactorDatas';
import { checkboxOptions } from '@/constant/checkbox-options';
import { TYPE0 } from '@/constant/device-type';

export default {
  props: {
    loading: Boolean,
    factorDatas: FactorDatas,
    deviceType: {
      type: String,
      // type0: 车载或无人机; type1:无人船
      default: TYPE0
    }
    },
    selectFactorType: {
      type: Array,
      default: () => ['1', '2', '3']
    },
    // 当前选中高亮的数据点索引
    locateIndex: Number
  },
  data() {
    return {
      tableHeight: '500',
      total: 0,
      currentPage: 1,
      pageSize: 20,
      loading: false
      pageSize: 200,
      rowHeight: undefined
    };
  },
  emits: ['tableClick'],
  watch: {
    locateIndex(nV, oV) {
      if (nV == oV) return;
      this.$refs.tableRef.setCurrentRow(this.tableData[nV]);
      // 计算分页
      this.currentPage = parseInt(nV / this.pageSize) + 1;
      // 计算对应分页中的索引
      const index = nV % this.pageSize;

      const h = this.getRowHeight();
      this.$refs.tableRef.setScrollTop(h * index - 350);
    }
  },
  computed: {
    tableData() {
@@ -65,18 +113,87 @@
          const f = this.factorDatas.factor[key];
          f.datas.forEach((v, i) => {
            if (list.length <= i) {
              list.push({ [f.factorName]: v });
              list.push({
                index: i,
                [f.factorName]: v.factorData
              });
            } else {
              list[i][f.factorName] = v;
              list[i][f.factorName] = v.factorData;
            }
          });
        }
      }
      return list;
    },
    showData() {
      const sIndex = (this.currentPage - 1) * this.pageSize;
      const eIndex = sIndex + this.pageSize;
      return this.tableData.slice(sIndex, eIndex);
    },
    tableColumn() {
      return checkboxOptions(this.deviceType);
    }
  },
  methods: {
    // 获取表格第一行高度
    getRowHeight() {
      if (!this.rowHeight) {
        const rowList = document.getElementsByClassName('t-row');
        if (rowList.length != 0) {
          const row = rowList[0];
          this.rowHeight = row.getBoundingClientRect().height;
        } else {
          this.rowHeight = 0;
        }
      }
      return this.rowHeight;
    },
    timeFormatter(row, col, cellValue, index) {
      return moment(cellValue).format('HH:mm:ss');
    },
    handleRowClick(row, col, event) {
      this.$emit('tableClick', row.index);
      // console.log(row);
      // console.log(col);
      // console.log(event.target.getBoundingClientRect().height);
    }
  }
};
</script>
<style>
.el-table {
  --el-table-bg-color: transparent;
  --el-table-row-hover-bg-color: #23dad0a2;
  --el-table-current-row-bg-color: #7dff5d96;
  --el-table-text-color: var(--font-color);
}

.t-row {
  cursor: pointer;
  background-color: transparent !important;
}

.t-cell {
  /* background: red !important; */
  /* height: 40px;
  border: 1px solid black; */
}

.t-header-row {
}

.t-header-cell {
  background-color: var(--bg-color-2) !important;
  text-align: center !important;
  color: white !important;
}
.el-pagination {
  --el-pagination-bg-color: transparent;
  --el-pagination-button-bg-color: transparent;
  --el-pagination-button-color: transparent;
  --el-pagination-button-disabled-color: white;
  --el-pagination-button-disabled-bg-color: transparent;
  --el-pagination-text-color: white;
  --el-pagination-button-color: white;
}
</style>