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="操作" width="160">
        <template slot-scope="scope">
          <el-button @click="$emit('pointDetail',scope.row,'point')" type="text" size="small">
            详细
          </el-button>
          <el-button @click="$emit('pointDetail',scope.row,'alarmPoint')" 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 = "") {
      this.$emit("chart", {...row, dataType});
    },
  },
};
</script>

<style></style>