hsq-pro/src/views/vent/monitorManager/hsqHome/components/CommonTable.vue

<template>
  <div class="common-table">
    <div class="table__content_label">
      <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{
        item.name }}</div>
    </div>
    <div ref="scrollRef" class="table__content_list">
      <div class="table__content_list_row" v-for="(item, index) in tableData" :key="`svvhbct-${index}`">
        <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }" class="table__content__list_item">
          <slot :name="t.prop" :scope="item">
            <span v-if="t.prop == 'syswarnLevel'" style="display: flex; align-items: center;justify-content: center;">
              <span :class="get(item, t.prop) ? 'icon-pie1' : 'icon-pie'">
                <span :class="get(item, t.prop) ? 'icon-item1' : 'icon-item'"></span>
              </span>
              <span>{{ get(item, t.prop) ? '报警' : '正常' }}</span>
            </span>
            <span v-else-if="t.prop == 'netStatus'" style="display: flex; align-items: center;justify-content: center;">
              <span :class="get(item, t.prop) ? 'icon-pie' : 'icon-pie1'">
                <span :class="get(item, t.prop) ? 'icon-item' : 'icon-item1'"></span>
              </span>
              <span>{{ get(item, t.prop) ? '在线' : '离线' }}</span>
            </span>
            <span v-else-if="t.prop == 'alarmLevelC'"
              :style="{ color: item.alarmLevelC == '低风险' ? '#00d8ff' : item.alarmLevelC == '一般风险' ? '#fcfc22' : item.alarmLevelC == '较大风险' ? '#ff7010' : item.alarmLevelC == '重大风险' ? '#df4e43' : item.alarmLevelC == '报警' ? '#ff0000' : '' }">{{
                get(item, t.prop) }}</span>
            <span v-else>{{ get(item, t.prop) }}</span>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
import _ from 'lodash';

let props = defineProps({

  columns: {
    type: Array as any
  },
  autoScroll: {
    type: Boolean,
    default: false
  },
  tableData: {
    type: Array as any
  },
  defaultValue: {
    type: String,
    default: ''
  }
})

const scrollRef = ref(null);
if (props.autoScroll) {
  useAutoScroll(scrollRef);
}

const flexBasis = computed(() => {
  return Math.fround(100 / props.columns.length) + '%';
});

/**
 * 安全获取对象属性值，当值为 null/undefined/空字符串时返回默认值
 *
 * @param o 要访问的对象
 * @param p 对象属性路径
 * @returns 属性值或默认值
 */
function get(o, p) {
  const d = _.get(o, p);
  return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
}
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.common-table {
  --image-content-label: url('/@/assets/images/home-container/configurable/hsq/1-5.png');
  --image-content-text: url('/@/assets/images/company/content-text.png');
  --image-list-head: url('/@/assets/images/home-container/configurable/firehome/list-head.png');
  --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
  --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px 0px 0px 0px;
  box-sizing: border-box;

  .gallery-content {
    position: absolute;

    &:nth-child(1) {
      left: 22px;
      top: 4px;
    }

    &:nth-child(2) {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      right: 24px;
      top: 4px;
    }

    &:nth-child(3) {
      left: 22px;
      top: 72px;
    }

    &:nth-child(4) {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      right: 24px;
      top: 72px;
    }

    &:nth-child(5) {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .gallery-content-text {
      margin-bottom: 2px;
    }

    .gallery-content-text-r {
      margin-bottom: 2px;
    }

    .gallery-content-text1 {
      font-size: 24px;
      font-family: 'douyuFont';
    }

    .gallery-content-value,
    .gallery-content-value-r {
      font-family: 'douyuFont';
      color: #fff;
    }

  }

  .table__content_label {
    width: 400px;
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: var(--image-content-label);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #3df6ff;

    .label-t {
      text-align: center;
      font-size: 14px;
    }
  }

  .table__content_list {
    height: calc(100% - 32px);
    width: 400px;
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    box-sizing: border-box;
    overflow-y: auto;

    .table__content_list_row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      margin-bottom: 5px;
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center bottom;
      background-image: var(--image-content-text);

      span {
        display: inline-block;
        text-align: center;
      }
    }
  }

  .table__content__list_item {
    text-align: center;
  }

  .icon-pie {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(79, 255, 173, .3);
    margin-right: 5px;
  }

  .icon-pie1 {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 79, 79, .3);
    margin-right: 5px;
  }

  .icon-item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(79, 255, 173);
  }

  .icon-item1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 79, 79);
  }

  ::-webkit-scrollbar {
    display: none;
  }
}
</style>