gafz-hdsp/src/views/interactVideo/videoManage/videoOperation.vue

<!-- 新增编辑视频 -->
<template>
  <div class="app-container">
    <div style="display: flex">
      <el-button type="primary" @click="formSubmit">保存</el-button>
      <el-button type="primary" @click="addSource">管理素材</el-button>
      <el-button type="info" @click="videoView">视频预览</el-button>
      <el-button @click="returnList">返回</el-button>
    </div>
    <!-- 节点模块编辑 -->
    <div class="border_box">
      <InteractiveVideoEditor
        ref="editorRef"
        :graphData="graphData"
        :videoSources="videoSources"
        :imageSources="imageSources"
      />
    </div>
    <!-- 视频预览 -->
    <el-dialog
      title="视频预览"
      v-model="videoViewOpen"
      width="1200"
      destroy-on-close
    >
      <XGVideoViewer
        :question="videoDetail.data.question"
        :options="videoDetail.data.optionsList"
        :videoUrl="videoDetail.data.uri"
        :autoplay="true"
        :autoplayMuted="false"
        :poster="videoDetail.data.image"
        @onClickOption="onClickOption"
      />
    </el-dialog>

    <!-- 添加素材 -->
    <AddSouce
      :open="materialOpen"
      :baseInfo="interactionVideoInfo"
      @close="formFieldsClose"
    />
  </div>
</template>

<script setup name="VideoOperation">
import {
  interactionVideoUpdate,
  getInteractionVideoDetail,
  getMaterialInfoDetail,
} from "@/api/interactVideo/videoManage";
// 编辑器
import {
  transformGraphdata,
  transfromReturnGraphdata,
} from "@/hooks/transformGraphdata";
import InteractiveVideoEditor from "@/components/InteractiveVideoEditor";
import XGVideoViewer from "@/components/XGVideoViewer";
import AddSouce from "./addSouce.vue";
import { watchEffect } from "vue";

const { proxy } = getCurrentInstance();
const route = useRoute();
// 互动视频基本信息
const { interactionId } = route.query;
const interactionVideoInfo = ref({});
// 资源数据
const videoSources = ref([]);
const imageSources = ref([]);
// 组件实例
const editorRef = ref(null);
// 默认流程图数据
const graphData = ref({
  id: "0",
  type: "root-node",
  preNodeId: null,
  children: [],
  data: {
    name: "默认节点",
    image: "",
    url: "",
    imageId: "",
    videoId: "",
    question: "",
    optionsList: [],
  },
});
// 获取视频基本节点信息、素材信息
function getInitData() {
  // 获取互动视频基本信息以及节点
  getInteractionVideoDetail(interactionId).then((res) => {
    if (res.code == 200) {
      interactionVideoInfo.value = res.data.interactionVideoInfo;
      graphData.value = transfromReturnGraphdata(res.data.rootNode);
      videoSource.value = treeToArray(graphData.value);
      console.log("graphData", graphData.value);
    }
  });
  // 获取相关素材信息
  getMaterialInfoDetail(interactionId).then((res) => {
    // 素材类型 0 视频  1 图片
    videoSources.value = res.data.materialLibraryVOList
      .filter((i) => i.materialType == 0)
      .map((i) => {
        return {
          id: i.materialId,
          name: i.materialName,
          url: i.accessory?.url,
        };
      });
    imageSources.value = res.data.materialLibraryVOList
      .filter((i) => i.materialType == 1)
      .map((i) => {
        return {
          id: i.materialId,
          name: i.materialName,
          url: i.accessory?.url,
        };
      });
  });
}
/**
 * 视频ID变化，则获取相关素材以及节点数据
 */
watchEffect(() => {
  getInitData();
}, [interactionId]);

// 关闭当前页签
function returnList() {
  proxy.$tab.closePage();
}

function formSubmit() {
  // 剧情节点信息
  const rootNode = transformGraphdata(graphData.value);
  interactionVideoUpdate({
    interactionVideoInfo: interactionVideoInfo.value,
    rootNode,
  }).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess(res.msg);
    }
  });
}

// 视频预览
const videoViewOpen = ref(false);
const videoDetail = ref({});
const videoSource = ref([]);

function videoView() {
  videoDetail.value = graphData.value;
  console.log(videoDetail.value);
  if (!videoDetail.value.data.uri) {
    proxy.$modal.msgError("暂无可播放视频，可添加视频素材后预览");
    return;
  }
  videoViewOpen.value = true;
}
// 点击选中选项
const onClickOption = (option) => {
  // 过滤出当前选中项的nodeId和视频资源的id相同的项
  let videoData = videoSource.value.filter((i) => i.id == option.nodeId)[0];
  // 如果筛选出的数据 节点类型时跳转节点的，需要特殊处理一下：筛选出视频资源中id和跳转jumpNodeId相同的数据
  if (videoData.nodeType === "jump-node") {
    videoData = videoSource.value.filter(
      (i) => i.id == videoData.data.jumpNodeId
    )[0];
  }
  videoDetail.value = videoData;
};

// 将树形数据转化为数组
const treeToArray = (tree, arr = []) => {
  arr.push(tree);
  if (tree.children) {
    for (let child of tree.children) {
      treeToArray(child, arr);
    }
  }
  return arr;
};

const materialOpen = ref(false);
function addSource() {
  materialOpen.value = true;
}
function formFieldsClose() {
  materialOpen.value = false;
  getInitData();
}
</script>

<style>
.border_box {
  border: 1px solid #ccc;
  margin-top: 10px;
}
</style>