riku
2024-08-29 6b6eff08baa3d052b66fd2e68f1ac0d8495f6f8a
src/components/monitor/DataTable.vue
@@ -17,6 +17,7 @@
        :show-summary="false"
        :highlight-current-row="true"
        @row-click="handleRowClick"
        @sort-change="handleSort"
      >
        <el-table-column
          :fixed="true"
@@ -25,6 +26,7 @@
          :formatter="timeFormatter"
          align="center"
          width="66"
          sortable="custom"
        >
        </el-table-column>
        <template v-for="item in tableColumn" :key="item.name">
@@ -33,7 +35,8 @@
            :prop="item.name"
            :label="item.label"
            align="center"
            width="64"
            width="79"
            sortable="custom"
          />
        </template>
      </el-table>
@@ -65,6 +68,7 @@
import { FactorDatas } from '@/model/FactorDatas';
import { checkboxOptions } from '@/constant/checkbox-options';
import { TYPE0 } from '@/constant/device-type';
import { windDir } from '@/constant/wind-dir';
export default {
  props: {
@@ -112,13 +116,18 @@
        if (Object.hasOwnProperty.call(this.factorDatas.factor, key)) {
          const f = this.factorDatas.factor[key];
          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,
                [f.factorName]: v.factorData
                [name]: value
              });
            } else {
              list[i][f.factorName] = v.factorData;
              list[i][name] = value;
            }
          });
        }
@@ -156,6 +165,11 @@
      // 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);
    }
  }
};
@@ -164,7 +178,8 @@
.el-table {
  --el-table-bg-color: transparent;
  --el-table-row-hover-bg-color: #23dad0a2;
  --el-table-current-row-bg-color: #7dff5d96;
  --el-table-current-row-bg-color: #23dad0a2;
  /* --el-table-current-row-bg-color: #7dff5d96; */
  --el-table-text-color: var(--font-color);
}