smart_storage_web/src/views/new-screen-zz/components/SwiperTableAlarm.vue

<template>
  <div
    class="table-wrapper"
    :style="{
      width: 'calc(' + widths.reduce((i, j) => `${i} + ${j}`) + ` + ${(widths.length - 1) * 6}px)`,

    }"
  >
    <div v-if="showHeader" class="table-header">
      <span v-show="isSort" :style="{ width: '60px' }">序号</span>
      <span v-for="(it, i) in titles" :key="i" :style="{ width: widths[i] === 'auto' ? 'auto' : widths[i] + 'px' }" :class="{'span-auto': widths[i] === 'auto'}">{{ titles[i] }}</span>
    </div>
    <div
      class="table-content"
      :style="{height:contentHeight+'px'}"
    >
      <swiper v-if="data.length > 0" ref="myBotSwiper" class="swiper" :options="swiperOption">
        <swiper-slide v-for="(row, rowIndex) in data" :key="rowIndex">
          <div
            class="table-row "
            :style="{ height: tabelHeight,'border-color':alarmList.find(i=>i.level === row.eventLevel)?alarmList.find(i=>i.level === row.eventLevel).color :'#fff'}"
            @click="handleRowClick(row, rowIndex)"
          >
            <div class="tip-box" :style="{color:alarmList.find(i=>i.level === row.eventLevel) ? alarmList.find(i=>i.level === row.eventLevel).color :'#fff'}">{{ alarmList.find(i=>i.level === row.eventLevel)? alarmList.find(i=>i.level === row.eventLevel).label :'' }}</div>
            <div
              v-for="(column, columnIndex) in columns"
              :key="columnIndex"
              :title="row[columnIndex]"
              :style="{ width: widths[columnIndex] === 'auto' ? 'auto' : widths[columnIndex] + 'px', height: tabelHeight }"
              :class="{'span-auto': widths[columnIndex] === 'auto'}"
            >{{ column === 'timeStamp' ?parseTime( row[column]) : row[column] }}</div>
          </div>
        </swiper-slide>
      </swiper>
      <div v-if="data.length === 0" style="height:100%;text-align:center; margin-top:40px;font-size:14px;color:#999">
        暂无数据
      </div>
    </div>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { parseTime } from '@/utils/index'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'SwiperTable',
  components: {
    swiper,
    swiperSlide
  },
  props: {
    // 传入的表格数据
    data: {
      type: Array,
      default: () => []
    },
    // 传入的表格头
    titles: {
      type: Array,
      default: () => ['事件标题', '创建时间', '信息来源', '分类', '状态', '上报人']
    },
    // 表格的列宽
    widths: {
      type: Array,
      default: () => ['246px', '348px', '224px', '214px', '214px', '214px']
    },
    // 表格的高度
    contentHeight: {
      type: Number,
      default: 200
    },
    // 是否展示表格头
    showHeader: {
      type: Boolean,
      default: true
    },
    isSort: {
      type: Boolean,
      default: true
    },
    // 表格的行高
    tabelHeight: {
      type: String,
      default: '40px'
    },
    // 字段
    columns: {
      type: Array,
      default: () => ['title', 'createTime', 'info', 'type', 'status', 'upper']
    }
  },
  data() {
    return {
      alarmList: [{
        level: 1,
        label: '事故',
        color: '#CF0000'
      },
      {
        level: 2,
        label: '故障',
        color: '#FDA934'

      },
      {
        level: 3,
        label: '告警',
        color: '#0089FB'
      },
      {
        level: 4,
        label: '提示',
        color: '#0089FB'

      },
      {
        level: 5,
        label: '告知',
        color: '#0089FB'

      }
      ],
      currentActiveRow: 0,
      swiperOption: {
        autoHeight: true,
        direction: 'vertical',
        spaceBetween: 0,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
          autoplayDisableOnInteraction: false
        },
        slidesPerView: 'auto',
        grabCursor: true,
        autoplayDisableOnInteraction: false,
        mousewheelControl: true
      }
    }
  },
  computed: {
    myBotSwiper() {
      return this.$refs.myBotSwiper.$swiper
    }
  },
  watch: {
    data: {
      handler(val) {
        this.currentActiveRow = 0
        // if (val && val.length > 0) {
        //   this.columns = []
        //   for (const key in val[0]) {
        //     this.columns.push(key)
        //   }
        //   // this.swiperStart()
        // }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    parseTime,
    handleRowClick(it, i) {
      this.currentActiveRow = i
      const currentIt = this.data[i]
      this.$emit('change', currentIt)
    },
    // 控制表格停止滚动
    swiperStop() {
      this.myBotSwiper.autoplay.stop()
    },
    // 控制表格开始滚动
    swiperStart() {
      this.myBotSwiper.autoplay.start()
    }
  }
}
</script>

<style lang="scss" scoped>
.table-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  span {
    box-sizing: border-box;
  }
  .table-header {
    $height: 32px;
    width: 100%;
    height: $height;
    display: flex;
    align-items: center;
    background: transparent;
    span {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #9AD1FD;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      line-height: $height;
      &:nth-child(2) {
        text-align: center;
      }

    }
    .span-auto {
      flex: 1;
    }
    span + span {
      margin-left: 2px;
    }
  }
  .table-content {
    width: 100%;
    margin-top: 2px;
    .swiper {
      width: 100%;
      height: 100%;
      .table-row {
        width: calc(100% - 2px);
        height: 40px;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;
        padding: 0 10px;
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
        div {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #E6F4FE;
          line-height: 36px;
          white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
        }
        .span-auto {
          flex: 1;
        }
        div + div {
          margin-left: 2px;
        }
      }
    }
  }
  span {
    height: 100%;
    line-height: 100%;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
    &:nth-child(1) {
      width: 246px;
    }
    &:nth-child(2) {
      width: 348px;
      padding-left: 13px;
    }
    &:nth-child(3) {
      width: 214px;
    }
    &:nth-child(4) {
      width: 214px;
    }
    &:nth-child(5) {
      width: 214px;
    }
  }
}
.tip-box{
font-size: 12px !important;
font-style: normal;
font-weight: 400;
line-height: 16px  !important; /* 133.333% */
letter-spacing: 0.6px;
writing-mode: tb-rl !important;
margin-right: 10px;

}

</style>