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

<template>
  <div class="right-content-alert">
    <div class="el-table-wrapper fix-table">
      <TechyTable
        key="table-1"
        :showIndex="false"
        :page="1"
        :limit="8"
        :table-config="tableProps"
        :table-data="tableData"
      ></TechyTable>
    </div>
  </div>
</template>

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

const PriorityComponent = {
  name: 'PriorityComponent',
  props: {
    injectData: Object
  },
  computed: {
    bgColor() {
      const colors = ['#9c4048', '#ffbd43', '#0b58ff', '#90dd48', '#449028', '#091238']
      return colors[this.injectData.priority - 1]
    },
    priorityText() {
      return ['一级', '二级', '三级', '四级', '五级'][this.injectData.priority - 1]
    }
  },
  methods: {},
  render: function(h) {
    return h(
      'span',
      {
        style: {
          display: 'inline-block',
          borderRadius: 'calc(2px * var(--beilv))',
          padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
          color: '#fff',
          opacity: '0.6',
          fontSize: 'calc(12px * var(--beilv))',
          lineHeight: 1,
          backgroundColor: this.bgColor
        }
      },
      this.priorityText
    )
  }
}

const tableProps = [
  { prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 },
  { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
  { prop: 'priority', label: '提示等级', align: 'center', 'min-width': 90, subcomponent: PriorityComponent },
  { prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
  { prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 }
]

const tableData = [
  { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 1, duration: '30 min' },
  { eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 3, duration: '1 min' },
  { eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' },
  { eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' },
  { eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' },
  { eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' },
  { eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 2, duration: '23 min' },
  { eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
  { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 min' },
  {
    eqName: '磨边后清洗机',
    plName: 'A',
    content: '马华部地般平感为转出形就特务把提存。',
    priority: 2,
    duration: '18 min'
  },
  { eqName: '预热', plName: 'B', content: '米织类劳约相查个而美五千老。', priority: 3, duration: '24 min' },
  { eqName: '打孔后清洗机', plName: 'A', content: '历红群色务口史验话备必工少光。', priority: 1, duration: '48 min' },
  { eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 3, duration: '29 min' },
  { eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 1, duration: '47 min' },
  { eqName: '下片', plName: 'A', content: '花公建了办间话个做直志利更在于。', priority: 2, duration: '49 min' },
  { eqName: '一镀', plName: 'B', content: '术任该石代并战面广西处面住王规从他算。', priority: 3, duration: '42 min' },
  { eqName: '二镀', plName: 'A', content: '体才眼自造统六识进后历定因受国。', priority: 2, duration: '42 min' },
  {
    eqName: '钢后清洗机',
    plName: 'A',
    content: '就门务程过志率难每维原就快没省为满候。',
    priority: 2,
    duration: '33 min'
  },
  { eqName: '预热', plName: 'A', content: '金单能信较生七族接处人门例图取之。', priority: 2, duration: '34 min' },
  { eqName: '预热', plName: 'B', content: '会带给山气己进相构位节采调而音集。', priority: 3, duration: '6 min' }
]

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

<style scoped>
.fix-table >>> .el-table td .cell {
  width: 80% !important;
  margin: auto;
  text-align: left;
}

.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>