11-mes-new/src/views/3DOverview/components/RightContentAlert.vue

<template>
  <div class="right-content-alert">
    <div class="el-table-wrapper">
      <el-table
        key="RightContentAlertTable"
        border
        :data="tableData"
        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
      >
        <el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" />
        <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" />
        <el-table-column label="故障等级" prop="level" :resizable="true" />
        <el-table-column label="故障内容" prop="content" :resizable="true" />
        <el-table-column label="累计时间(min)" prop="duration" :resizable="true" />
      </el-table>
    </div>
  </div>
</template>

<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'

const tableData = [
  { eqName: 'A1下片机', plName: 'A', content: '123456', level: 3, duration: 10 },
  { eqName: '磨片机', plName: 'A', content: '123456', level: 2, duration: 20 },
  { eqName: 'B2钢化', plName: 'B', content: 'JQKA', level: 1, duration: 30 },
  { eqName: '上片机', plName: 'C', content: 'xxx', level: 3, duration: 1 },
  { eqName: '清洗机', plName: 'B', content: 'wowowowo', level: 2, duration: 2 }
]

export default {
  name: 'RightContentAlert',
  components: {},
  data() {
    return { tableData }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.right-content-alert {
  height: calc(100% - 32px);
  display: flex;
  gap: calc(100vw / 1920 * 16);
  overflow: hidden;
}

.el-table-wrapper {
  flex: 1;
}

.right-content-alert > div {
  overflow: hidden;
  /* overflow-x: scroll; */
}

.el-table-wrapper >>> * {
  background: transparent;
}
.el-table-wrapper >>> .el-table::before,
.el-table-wrapper >>> .el-table--group::after,
.el-table-wrapper >>> .el-table--border::after {
  background: transparent;
}

.el-table-wrapper >>> .el-table {
  font-size: 8px;
  background-color: transparent;
  color: #fff9;
  border: 0;
  height: 100%;
  overflow-y: auto;
}

.el-table-wrapper >>> .el-table th.is-leaf,
.el-table-wrapper >>> .el-table td {
  border-color: #0d1728;
  padding: 0;
}

.el-table__row--striped:hover > td,
.el-table-wrapper >>> .el-table__row:hover > td {
  background-color: rgba(79, 114, 136, 0.29) !important;
}

.el-table-wrapper >>> table {
  border: unset;
}

.el-table-wrapper >>> thead {
  color: #fff;
}
.el-table-wrapper >>> tr {
  background: unset;
}
.el-table-wrapper >>> tbody td > div,
.el-table-wrapper >>> thead th > div {
  white-space: nowrap;
}
.el-table-wrapper >>> th,
.el-table-wrapper >>> td {
  padding: 0;
}

.el-table-wrapper >>> tbody > tr:nth-child(even) {
  background: rgba(76, 97, 123, 0.2);
}
</style>