performance-test/src/views/admin/cockpitManage/component/CockpitHealthTable.vue

<template>
  <div class="cockpit-health-table">
    <h3 class="cockpit-section-title">健康数据信息</h3>
    <div
      class="cockpit-scroll-table cockpit-table-block cockpit-unified-table cockpit-unified-table--health"
    >
      <p
        class="titleYC cockpit-unified-table-head cockpit-unified-table-head--health"
      >
        <span>风场名称</span>
        <span
          v-for="col in sortableCols"
          :key="col.prop"
          class="cockpit-sortable-th"
          :class="{ 'is-active': sortConfig.prop === col.prop }"
          @click="toggleSort(col.prop)"
        >
          {{ col.label }}
          <i
            class="cockpit-sort-icon"
            :class="getSortIconClass(col.prop)"
          />
        </span>
      </p>
      <Tabroll
        :table-data="displayTableData"
        :shujuloading="loading"
        :columns="columns"
        :column-widths="columnWidths"
        :max-height="bodyHeight"
        link-column="fieldName"
        @link-click="handleFieldNavigate"
      />
    </div>
  </div>
</template>

<script>
import { healthTableColumns } from "./cockpitHealthData";
import { COCKPIT_TABLE_BODY_HEIGHT } from "./cockpitTableMetrics";
import Tabroll from "./tabroll.vue";
import { navigateToHealthDashboard } from "./cockpitFieldNavigate";

export default {
  name: "CockpitHealthTable",
  components: { Tabroll },
  props: {
    tableData: { type: Array, default: () => [] },
    loading: { type: Boolean, default: false },
    bodyHeight: { type: Number, default: COCKPIT_TABLE_BODY_HEIGHT },
    datatime: { type: String, default: "" },
    sortConfig: {
      type: Object,
      default: () => ({ prop: "", order: "descending" }),
    },
  },
  data() {
    return {
      columns: healthTableColumns.map(({ prop }) => ({ prop })),
      columnWidths: {
        fieldName: "38%",
        excellent: "15%",
        good: "15%",
        medium: "16%",
        poor: "16%",
      },
      countFields: ["excellent", "good", "medium", "poor"],
      sortableCols: [
        { prop: "excellent", label: "优" },
        { prop: "good", label: "良" },
        { prop: "medium", label: "中" },
        { prop: "poor", label: "差" },
      ],
    };
  },
  computed: {
    displayTableData() {
      return (this.tableData || []).map((row) => {
        const next = { ...row };
        this.countFields.forEach((key) => {
          const value = next[key];
          if (value !== null && value !== undefined && value !== "") {
            next[key] = `${value}台`;
          }
        });
        return next;
      });
    },
  },
  methods: {
    toggleSort(prop) {
      const current = this.sortConfig || {};
      let order = "descending";
      if (current.prop === prop) {
        order = current.order === "descending" ? "ascending" : "descending";
      }
      this.$emit("sort-change", { prop, order });
    },
    getSortIconClass(prop) {
      if (this.sortConfig.prop !== prop) return "el-icon-d-caret";
      return this.sortConfig.order === "ascending"
        ? "el-icon-caret-top"
        : "el-icon-caret-bottom";
    },
    handleFieldNavigate(row) {
      navigateToHealthDashboard(this.$router, this.$store, {
        fieldCode: row?.fieldCode,
        datatime: this.datatime,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cockpit-health-table {
  width: 100%;
}

.cockpit-health-table .cockpit-section-title {
  margin: 0 0 8px;
  padding: 0;
  border-bottom: none;
  font-size: 14px;
  font-weight: 600;
}

.cockpit-sortable-th {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;

  &:hover {
    color: var(--cockpit-accent, #409eff);
  }

  &.is-active {
    color: var(--cockpit-accent, #409eff);
  }
}

.cockpit-sort-icon {
  font-size: 12px;
  opacity: 0.6;

  .is-active & {
    opacity: 1;
  }
}
</style>