emsfront/src/views/ems/dzjk/sbjk/dtdc/Table.vue

<template>
  <div>
    <el-table
      class="common-table"
      :data="tableData"
      stripe
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="deviceId" label="单体编号"> </el-table-column>
      <el-table-column prop="clusterDeviceId" label="簇号"> </el-table-column>
      <el-table-column prop="voltage" label="电压 (V)">
        <template slot-scope="scope">
          <el-button
            @click="chartDetail(scope.row, '电压 (V)')"
            type="text"
            size="small"
          >
            {{ scope.row.voltage }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="temperature" label="温度 (℃)">
        <template slot-scope="scope">
          <el-button
            @click="chartDetail(scope.row, '温度 (℃)')"
            type="text"
            size="small"
          >
            {{ scope.row.temperature }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="soc" label="SOC (%)">
        <template slot-scope="scope">
          <el-button
            @click="chartDetail(scope.row, 'SOC (%)')"
            type="text"
            size="small"
          >
            {{ scope.row.soc }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="soh" label="SOH (%)">
        <template slot-scope="scope">
          <el-button
            @click="chartDetail(scope.row, 'SOH (%)')"
            type="text"
            size="small"
          >
            {{ scope.row.soh }}
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="曲线图">
        <template slot-scope="scope">
          <el-button @click="chartDetail(scope.row)" type="text" size="small">
            展示
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- <el-pagination
      v-show="tableData.length > 0"
      background
      @size-change="(val) => $emit('handleSizeChange', val)"
      @current-change="(val) => $emit('handleCurrentChange', val)"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      style="margin-top: 15px; text-align: center"
    >
    </el-pagination> -->
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      require: true,
      type: Array,
      default: () => {
        return [];
      },
    },
    pointIdList: {
      require: true,
      type: Object,
      default: () => {
        return {};
      },
    },
    totalSize: {
      require: true,
      type: Number,
      default: 0,
    },
    // pageNum: {
    //   require: true,
    //   type: Number,
    //   default: 1,
    // },
    // pageSize: {
    //   require: true,
    //   type: Number,
    //   default: 10,
    // },
  },
  data() {
    return {};
  },
  methods: {
    //查看表格行图表
    chartDetail(row, dataType = "") {
      const { clusterDeviceId, deviceId } = row;
      this.$emit("chart", { ...row, dataType });
    },
  },
};
</script>

<style></style>