sl-sfy-safety/src/api/dashboard/algoManagement/algoManagement.vue

<template>
  <PageWrapper>
    <el-card shadow="never" size="small" class="proCard tabsCard">
      <div class="background">
        <video :src="address" controls autoplay muted style="width: 100%; height: 100%"> </video>
      </div>
    </el-card>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, ref, onUnmounted } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';
  import useAlgo from './use-algoData';

  //调用后端数据
  const algoDatas = useAlgo();
  const { algoList, getAlgoDatas, algoId, pushLinkPrompt, pushStatement, modifyAlgoDatas } =
    algoDatas;
  //将后端拉到的数据存到algoListUse数组中进行使用
  const algoListUse = ref<any[]>([]);
  //刷新时从后端拉一次算法数组
  onMounted(() => {
    getAlgoDatas().then(() => {
      console.log('algoList', algoList.value);
      algoListUse.value = algoList.value;
    });
  });
  //用于存储列表中选定的算法的信息
  const currentRow = ref({
    algoCode: '',
    name: '',
    remark: '',
    url: '',
    id: 0,
    pushLinkPrompt: '',
    pushStatement: '',
  });

  interface User {
    algoCode: string;
    name: string;
    remark: string;
    url: string;
    id: number;
    pushLinkPrompt: string;
    pushStatement: string;
  }

  const handleCurrentChange = (val: User | undefined) => {
    currentRow.value = val;
    console.log('xxxxxxxxxx', currentRow.value);
  };

  const saveUpdate = () => {
    algoId.value = currentRow.value.id;
    modifyAlgoDatas();
  };

  const address = ref('https://www.w3schools.com/html/movie.mp4');
</script>
<style lang="scss" scoped>
  .background {
    position: relative;
    height: 500px;
    background-color: pink;
  }
</style>