autocde2.0_vue/src/views/modelView/modules/Effect/VideoFusion.vue

<template>
  <div class="side-frame" @contextmenu.prevent="">
    <a-card size="small" :bordered="false" class="card-custom-style">
      <a-tabs v-model="tab" size="small" :animated="false" centered>
        <a-tab-pane :key="1" :tab="$t('model.VideoFusion-Setting')" class="roam-list scroll-box">
          <a-form
            ref="formRef"
            :model="form"
            v-bind="formItemLayout"
            @finishFailed="onFinishFailed"
            :label-col="{ span: 12 }" :wrapper-col="{ span: 10 }"
          >
            <a-form-item :label="$t('model.VideoFusion-Position')">
              <a-button ghost @click="AddPoint" class="submit-btn"
                >{{$t('model.VideoFusion-ClickPosition')}}</a-button
              >
            </a-form-item>
            <div>
              <a-list
                size="small"
                :data-source="track"
                bordered
                class="viewpoint-list scroll-box"
                :locale="{
                  emptyText: $t('model.VideoFusion-Position-EmptyText'),
                }"
              >
                <a-list-item :key="index" v-for="(item, index) in track">
                  {{  $t('model.Position') + (index + 1) }}
                  <template #actions>
                    <a-tooltip :title="$t('model.Delete')">
                      <a-icon type="delete" @click="DelPoint(index)" :style="{ fontSize: '16px', color: '#05a081' }"></a-icon>
                    </a-tooltip>
                  </template>
                </a-list-item>
              </a-list>
            </div>
            <a-form-item :label="$t('model.VideoFusion-rotate')" name="rotate">
              <a-slider
                v-model="form.rotate"
                @blur="rotateChange"
                :min="0"
                :max="360"
                :step="1"
              />
            </a-form-item>
            <a-form-item :label="$t('model.VideoFusion-alpha')" name="alpha">
              <a-slider
                v-model="form.alpha"
                @blur="alphaChange"
                :min="0"
                :max="1"
                :step="0.01"
              />
            </a-form-item>
            <a-form-item :label="$t('model.VideoFusion-mixDepth')" name="mixDepth">
              <a-slider
                v-model="form.mixDepth"
                @blur="mixDepthChange"
                :min="0"
                :max="1"
                :step="0.01"
              />
            </a-form-item>
            <a-form-item :label="$t('model.VideoFusion-isFlipX')" name="isFlipX">
              <a-switch
                v-model="form.isFlipX"
                @change="isFlipXChange"
              />
            </a-form-item>
            <a-form-item :label="$t('model.VideoFusion-isFlipY')" name="isFlipY">
              <a-switch
                v-model="form.isFlipY"
                @change="isFlipYChange"
              />
            </a-form-item>
            <a-form-item :label="$t('model.VideoFusion-offextX')" name="offextX">
              <a-input-number
                v-model="form.offextX"
                @change="offextXChange"
              />
            </a-form-item>
            <a-form-item :label="$t('model.VideoFusion-offextY')" name="offextY">
              <a-input-number
                v-model="form.offextY"
                @change="offextYChange"
              />
            </a-form-item>
            <a-form-item :label="$t('model.VideoFusion-offextZ')" name="offextZ">
              <a-input-number
                v-model="form.offextZ"
                @change="offextZChange"
              />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 24 }">
              <a-space class="options-btn">
                <a-button ghost @click="StartVideoFusion2D">{{$t('model.VideoFusion-Save')}}</a-button>
                <a-button ghost @click="StopVideoFusion2D">{{$t('model.VideoFusion-Delete')}}</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane :key="2" :tab="$t('model.HistoryData')">
          <a-list
            size="small"
            :data-source="historysList"
            :locale="{ emptyText: $t('model.EmptyData') }"
            class="roam-list scroll-box"
          >
            <a-list-item :key="index" v-for="(item, index) in historysList">
              {{ $t('model.VideoFusion') + (index + 1) }}
              <template #actions>
                <a-tooltip :title="$t('model.Delete')">
                  <a-icon type="delete" @click="delList(index, index)" :style="{ fontSize: '16px', color: '#05a081' }"></a-icon>
                </a-tooltip>
              </template>
            </a-list-item>
          </a-list>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>
<script>
import { message } from "ant-design-vue";
import { buildShortID } from "@/utils/util";
export default {
  name: "VideoFusion",
  props:{
    store: {
      type: Object,
      default: {},
    },
    $t: {
      type: Function,
    },
    $i18n: {
      type: Object,
    },
  },
  data() {
    return {
      tab: 1,
      formRef: null,
      form: {
        title: "",
        rotate: 90,
        alpha: 1,
        mixDepth: 0.25,
        isFlipX: false,
        isFlipY: false,
        offextX: 0,
        offextY: 0,
        offextZ: 0,
        url: "/static/img/DisplayVideo.mp4",
      },

      track: [],
      formItemLayout: {
        labelCol: {
          span: 9,
        },
        wrapperCol: {
          span: 15,
        },
      },
      historysList: [], //历史列表，如需要可自行存储

      currentId: null,
      videoPlugin: null,
    };
  },
  mounted() {
    this.videoPlugin = window.api.Plugin.initVideo();
    window.api.Public.setSceneRenderState(false);
  },
  beforeDestroy() {
    window.api.Public.setSceneRenderState(true);
    this.historysList.forEach((item) => {
      this.videoPlugin.delete(item.ID);
    });
  },
  methods: {
    StartVideoFusion2D(values) {
      //开始漫游
      if (this.currentId) {
        message.warning(this.$t('model.VideoFusion-Exist'));
        return;
      }
      if (this.track.length != 4) {
        message.warning(this.$t('model.VideoFusion-Waring'));
        return;
      }
      var position = [];
      for (let i = 0; i < this.track.length; i++) {
        position = position.concat(this.track[i]);
      }
      const params = {
        ID: "video" + buildShortID(6), //唯一标识id
        videoElement: this.form.url, // 视频地址
        positions: position, // 承載視頻的多邊形頂點坐標
        positionOffset: {
          //偏移
          x: values.offextX,
          y: values.offextY,
          z: values.offextZ,
        },
        isFlipX: values.isFlipX, // 水平方向翻转材质法向
        isFlipY: values.isFlipY, // 水平方向翻转材质法向
        rotate: values.rotate, // 视频旋转角度, 纹理旋转角度
        alpha: values.alpha, // [0.0,1.0] 全局透明度
        mixDepth: values.mixDepth, // 融合深度 0:不融合 [0,1]
        videoAutoPlay: true, // 是否自动播放视频
        videoLoop: true, // 是否循环播放视频
      };
      console.log("视频融合参数", params);
      this.currentId = params.ID;
      this.videoPlugin.addByPlane(params.ID, params);
      window.api.Public.removePoint(0);
      this.historysList.push(params);
    },

    onFinishFailed(errorInfo) {
      message.error(this.$t('model.Input-tip'));
    },

    StopVideoFusion2D() {
      this.formRef ? this.formRef.resetFields() : null; //清空表单
      window.api.Public.removePoint(0); //清除点
      message.success(this.$t('model.End'));
      this.videoPlugin.delete(this.currentId);
      let index = this.historysList.findIndex(
        (item) => item.ID == this.currentId
      );
      index != -1 ? this.historysList.splice(index, 1) : null;
      this.currentId = "";
      this.track = [];
    },

    delList(data, index) {
      this.historysList.splice(index, 1);
      this.videoPlugin.delete(data.ID); //删除视频融合
      if (data.ID == this.currentId) {
        this.currentId = "";
        this.track = [];
        this.formRef ? this.formRef.resetFields() : null; //清空表单
      }
   message.success(this.$t('model.Delete-Success'));
    },

    AddPoint() {
      let that = this
      if (this.track.length == 4) {
        this.formRef ? this.formRef.resetFields() : null; //清空表单
        this.track = [];
        this.currentId = "";
      }
      message.info(this.$t('model.VideoFusion-Position-Tip'));
      window.api.Public.event("LEFT_CLICK", function (click) {
        window.api.Public.pickupCoordinate(click.position, function (data) {
          that.track.push(data);
          window.api.Public.drawPoint(data, {
            axisType: 1,
          });
        });
      });
    },

    DelPoint(index) {
      this.track.splice(index, 1);
    },

    rotateChange() {
      if (
        this.currentId == this.historysList[this.historysList.length - 1].ID
      ) {
        var defaultConfigSimgle2D = {
          url: this.form.url,
          rotate: this.form.rotate, // 视频旋转角度, 纹理旋转角度
        };

        this.videoPlugin.updateByPlane(this.currentId, defaultConfigSimgle2D);
      }
    },

    alphaChange() {
      if (
        this.currentId == this.historysList[this.historysList.length - 1].ID
      ) {
        var defaultConfigSimgle2D = {
          url: this.form.url,
          alpha: this.form.alpha, // 视频旋转角度, 纹理旋转角度
        };

        this.videoPlugin.updateByPlane(this.currentId, defaultConfigSimgle2D);
      }
    },

    mixDepthChange() {
      if (
        this.currentId == this.historysList[this.historysList.length - 1].ID
      ) {
        var defaultConfigSimgle2D = {
          url: this.form.url,
          mixDepth: this.form.mixDepth, // 视频旋转角度, 纹理旋转角度
        };

        this.videoPlugin.updateByPlane(this.currentId, defaultConfigSimgle2D);
      }
    },

    isFlipXChange() {
      if (
        this.currentId == this.historysList[this.historysList.length - 1].ID
      ) {
        var defaultConfigSimgle2D = {
          url: this.form.url,
          isFlipX: this.form.isFlipX, // 视频旋转角度, 纹理旋转角度
        };

        this.videoPlugin.updateByPlane(this.currentId, defaultConfigSimgle2D);
      }
    },

    isFlipYChange() {
      if (
        this.currentId == this.historysList[this.historysList.length - 1].ID
      ) {
        var defaultConfigSimgle2D = {
          url: this.form.url,
          isFlipY: this.form.isFlipY, // 视频旋转角度, 纹理旋转角度
        };

        this.videoPlugin.updateByPlane(this.currentId, defaultConfigSimgle2D);
      }
    },

    offextXChange() {
      if (
        this.currentId == this.historysList[this.historysList.length - 1].ID
      ) {
        var defaultConfigSimgle2D = {
          url: this.form.url,
          positionOffset: {
            x: this.form.offextX, // 向y轴负方向偏移1m
          },
        };

        this.videoPlugin.updateByPlane(this.currentId, defaultConfigSimgle2D);
      }
    },

    offextYChange() {
      if (
        this.currentId == this.historysList[this.historysList.length - 1].ID
      ) {
        var defaultConfigSimgle2D = {
          url: this.form.url,
          positionOffset: {
            y: this.form.offextY, // 向y轴负方向偏移1m
          },
        };

        this.videoPlugin.updateByPlane(this.currentId, defaultConfigSimgle2D);
      }
    },

    offextZChange() {
      if (
        this.currentId == this.historysList[this.historysList.length - 1].ID
      ) {
        var defaultConfigSimgle2D = {
          url: this.form.url,
          positionOffset: {
            z: this.form.offextZ, // 向y轴负方向偏移1m
          },
        };

        this.videoPlugin.updateByPlane(this.currentId, defaultConfigSimgle2D);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.viewpoint-list {
  height: 12vh;
  overflow-y: auto;
  margin: 8px 10px 15px;

  /deep/.ant-list-item {
    padding: 5px 10px;
    margin: 0 10px;
  }
}

.ant-slider {
  width: 100%;
}

.roam-list {
  max-height: 55vh;
  overflow-x: hidden;
}
</style>