vue/video解析flv视频流+表格滚动+动态时间

安装flv
pnpm install flv.js -S|--save
import flvjs from 'flv.js'
<video id="videoElement" muted controls autoplay preload="auto"></video>
if (flvjs.isSupported()) {
        var videoElement = <any>document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv', 
            cors: true,  // 开启跨域访问,不然通不了
            isLive: true, 
            hasAudio: false,
            url:'flv视频流地址'
        },
		    {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
            autoCleanupSourceBuffer: true //自动清除缓存
          }
		);
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play(); //开始播放
        // flvPlayer.stop(); //停止播放时打开
    }



表格滚动
第一种方式：
vue + ts + element-plus
interface Model {
  date: string
  name: string
  type: number
  level: number
  state: number
  address: string
}
const data: Model[] = [
  {
    date: '2016-05-03 23:12:00',
    name: 'CO告警',
    type: 1,
    level: 3,
    state: 1,
    address: '运巷01',
  },
  {
    date: '2016-05-02 23:12:00',
    name: '低压告警',
    type: 2,
    level: 2,
    state: 1,
    address: '运巷01',
  },
  {
    date: '2016-05-04 23:12:00',
    name: '透水告警',
    type: 3,
    level: 4,
    state: 2,
    address: '运巷01',
  },
  {
    date: '2016-05-01 23:12:00',
    name: '流水告警',
    type: 4,
    level: 1,
    state: 0,
    address: '运巷01',
  },
  {
    date: '2016-05-08 23:12:00',
    name: '电量告警',
    type: 5,
    level: 5,
    state: 1,
    address: '运巷01',
  },
  {
    date: '2016-05-06 23:12:00',
    name: '网络告警',
    type: 6,
    level: 3,
    state: 2,
    address: '运巷01',
  },
  {
    date: '2016-05-07 23:12:00',
    name: '低压告警',
    type: 2,
    level: 4,
    state: 0,
    address: '运巷01',
  },
  {
    date: '2016-05-06 23:12:00',
    name: '网络告警',
    type: 6,
    level: 3,
    state: 2,
    address: '运巷01',
  },
]
let timer: null | ReturnType<typeof setInterval> = null

const TableRef = ref<HTMLElement>()

function scrollAnimation() {
  const dom = TableRef.value!
  if (dom.scrollTop + dom.clientHeight < dom.scrollHeight) {
    dom.scrollTop += 1
  } else {
    dom.scrollTop = 0
  }
}

function startAnimation() {
  timer = setInterval(scrollAnimation, 50)
}

function clearAnimation() {
  if (timer === null) {
    return
  }
  clearInterval(timer)
}

onMounted(() => {
  const dom = TableRef.value
  if (dom === undefined) {
    return
  }
  startAnimation()
})

 <div
    ref="TableRef"
    class="h-full overflow-hidden"
    @mouseenter="clearAnimation"
    @mouseleave="startAnimation"
  >
    <div class="row head">
      <div class="col">
        告警名称
      </div>
      <div class="col">
        巡检点位
      </div>
      <div class="col">
        告警类别
      </div>
      <div class="col">
        告警时间
      </div>
      <div class="col">
        告警状态
      </div>
    </div>
    <div v-for="v in data" :key="v.name" class="row">
      <div class="col">
        {{ v.name }}
      </div>
      <div class="col">
        {{ v.address }}
      </div>
      <div class="col">
        {{ v.type }}
      </div>
      <div class="col">
        {{ v.date }}
      </div>
      <div class="col">
        {{ v.state }}
      </div>
    </div>
  </div>
<style lang="scss" scoped>
.row {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 3fr 2fr;
  height: 3vh;
  padding-left: 2vh;
}

.row + .row {
  margin-top: 0.5vh;
}

.row.head {
  position: sticky;
  top: 0;
  background-color: #063a79;
  color: #fff;
}

.row:not(.head) {
  background-color: #063a79;
  color: #758fac;

  & > :first-child {
    color: #fff;
  }
}
</style>


第二种方式,无缝滚动：
思路，使用两个表格，第一个表格内容隐藏，留下表头，第二个表格，隐藏表头，留下内容，使用滚动组件包裹
Vue3+element-plus+vue3-marquee
import { Vue3Marquee } from 'vue3-marquee'
<el-table class="right_table top-table" border style="width: 100%">
      <el-table-column prop="name" label="预警名称" />
      <el-table-column
        prop="level"
        label="预警层级"
      />
      <el-table-column prop="time" label="预警时间" />
    </el-table>
    <Vue3Marquee
      :pauseOnHover="true"
      :vertical="true"
      :clone="true"
      style="width: 100%"
    >
      <!-- :height="tableData1.length * 28 ?? 140" -->
      <el-table class="right_table bottom-table" border :data="tableData1">
        <el-table-column prop="name" label="预警名称" />
        <el-table-column prop="level" label="预警层级" />
        <el-table-column prop="time" label="预警时间" />
      </el-table>
    </Vue3Marquee>

<style lang="scss" scoped>
:deep(.bottom-table) {
  .el-table__header-wrapper {
    display: none;
    width: 100%;
  }
}
:deep(.top-table) {
  .el-table__body-wrapper {
    display: none;
  }
}
</style>

时间
vue 
import dayjs from 'dayjs'
const timeNow = ref(dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))
onMounted(() => {
  timer.value = null
  timer.value = setInterval(() => {
    timeNow.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
})
onUnmounted(() => {
  // 组件卸载前执行的清理操作
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
})