From 0644109d7db0c3d8f1762fe60dac881b8914a314 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 13 May 2024 19:03:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/package.json               |   1 +
 .../src/assets/svg/icon-video.svg             |   1 +
 .../component-group/MediaGroup.vue            |  12 +--
 .../src/custom-component/component-list.ts    |  18 ++++
 .../src/custom-component/de-video/Attr.vue    |  13 +++
 .../custom-component/de-video/Component.vue   | 100 ++++++++++++++++++
 core/core-frontend/src/utils/components.ts    |   6 +-
 7 files changed, 142 insertions(+), 9 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/icon-video.svg
 create mode 100644 core/core-frontend/src/custom-component/de-video/Attr.vue
 create mode 100644 core/core-frontend/src/custom-component/de-video/Component.vue

diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json
index cd6505eb63..1a441e3112 100644
--- a/core/core-frontend/package.json
+++ b/core/core-frontend/package.json
@@ -50,6 +50,7 @@
     "vue-router": "4.1.3",
     "vue-types": "^5.0.2",
     "vue-uuid": "^3.0.0",
+    "vue-video-player": "^6.0.0",
     "vue3-ace-editor": "^2.2.2",
     "vuedraggable": "^4.1.0",
     "web-storage-cache": "^1.1.1",
diff --git a/core/core-frontend/src/assets/svg/icon-video.svg b/core/core-frontend/src/assets/svg/icon-video.svg
new file mode 100644
index 0000000000..55a5e6c90d
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/icon-video.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715588004536" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4704" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M221.63911147 385.93422187c103.88669653 0 188.38565973-84.48379307 188.38565866-188.3553184S325.52580693 9.20841493 221.63911147 9.20841493c-103.8563552 0-188.3553184 84.4989632-188.3553184 188.37048854 0 103.8715264 84.48379307 188.3553184 188.3553184 188.3553184z m0-316.04432534c70.42085973 0 127.70417813 57.2833184 127.70417706 127.68900694s-57.2833184 127.6738368-127.70417706 127.6738368c-70.40568853 0-127.6738368-57.26814827-127.67383787-127.6738368 0-70.42085973 57.26814827-127.68900693 127.67383787-127.68900694z" fill="" p-id="4705"></path><path d="M153.29659307 197.5940736l-0.0758528-4.05048853c-0.0606816-1.72942187-0.0606816-1.72942187 0.31857813-3.71674027a15.20071147 15.20071147 0 0 0-12.0452736-17.76450453 15.26139307 15.26139307 0 0 0-17.76450453 12.04527466 39.4429632 39.4429632 0 0 0-0.84954027 10.43721494l0.0606816 3.0340736a15.18554027 15.18554027 0 0 0 30.35591147 0.01517013zM152.2043264 166.28242987a15.14002987 15.14002987 0 0 0 12.6217472-6.7356448 68.2818368 68.2818368 0 0 1 56.81303787-30.34074027 15.17037013 15.17037013 0 1 0 0-30.34074133 98.5922368 98.5922368 0 0 0-82.02619307 43.79685973 15.18554027 15.18554027 0 0 0 12.591408 23.62026667zM646.39431147 385.93422187c103.90186667 0 188.38565973-84.48379307 188.38565866-188.3553184S750.29617813 9.20841493 646.39431147 9.20841493c-103.8563552 0-188.3553184 84.4989632-188.3553184 188.37048854 0.01517013 103.8715264 84.51413333 188.3553184 188.3553184 188.3553184z m0-316.04432534c70.43602987 0 127.70417813 57.2833184 127.70417706 127.68900694s-57.26814827 127.6738368-127.70417706 127.6738368c-70.40568853 0-127.6738368-57.26814827-127.67383787-127.6738368 0.01517013-70.42085973 57.2833184-127.68900693 127.67383787-127.68900694z" fill="" p-id="4706"></path><path d="M576.97469653 166.28242987a15.14002987 15.14002987 0 0 0 12.62174827-6.7356448 68.26666667 68.26666667 0 0 1 56.79786667-30.34074027c8.40438507 0 15.17037013-6.7811552 15.17037013-15.1703712 0-8.38921493-6.76598507-15.17037013-15.17037013-15.17037013a98.56189653 98.56189653 0 0 0-82.01102294 43.79685973 15.17037013 15.17037013 0 0 0 12.591408 23.62026667zM1010.40734827 453.16930347c-9.93659307-10.16414827-22.33078507-15.61031147-37.42530347-15.6103104-12.27282987 0-25.50139307 3.29197013-41.56681493 11.0592a19245.43525973 19245.43525973 0 0 1-160.53285974 84.6051552l0.74334827-11.37777814c0.0606816-0.74334827 0.09102187-2.97339307 0.09102187-3.7319104 0-59.02791147-47.17985173-110.13688853-105.16100694-110.1368896H103.1585184c-57.01025173 0-106.9662816 56.06968853-106.9662816 115.12794134V919.62785173c0 56.8130368 47.99905173 95.1485632 106.9662816 95.1485632h563.39721493c58.49694827 0 104.35697813-41.67300693 105.1003264-98.8956448-0.01517013 0.0606816-0.01517013 0.13653333-0.03034133 0.03034134l-1.5777184-25.24349654c40.3076736 20.20693333 102.9309632 52.6715264 161.00314027 83.254992 1.65357013 0.8798816 3.17060693 1.6384 4.9758816 2.21487467 15.7923552 4.8545184 28.36859307 8.192 40.4897184 8.26785173 21.61777813-0.1668736 34.74014827-10.74062187 41.11170453-19.55460693 7.5548448-10.4220448 10.16414827-23.90850347 10.16414827-42.15845973V512.91022187c0-12.09078507 1.54737813-40.53522987-17.3852448-59.7409184z m-41.4909632 468.8706368c-4.23253333-1.0012448-8.75330347-2.41208853-11.90874027-3.382992-204.07182187-107.4365632-211.1715552-107.61860693-220.18275627-107.618608-8.3588736 0-16.35365973 3.06441493-22.1032288 9.16290453-5.71922987 6.06814827-8.67745173 13.48645973-8.17682986 21.83016213l4.47525866 73.36391147c-0.43994027 23.49890347-19.8276736 38.69961493-44.47952533 38.69961493H103.1585184c-25.75928853 0-46.2848-10.92266667-46.2848-34.4670816V523.10471147c0-25.69860693 22.5886816-54.44645973 46.2848-54.44645974v-0.01517013h563.39721493c23.80231147 0 43.9485632 23.78714027 44.4643552 48.4996736l-4.4449184 65.52082987c-0.5916448 8.38921493 2.32106667 16.68740693 8.04029654 22.84657813 5.74957013 6.15917013 13.8050368 9.6635264 22.22459306 9.66352533 9.8910816 0 12.5307264-0.03034027 222.0487104-112.09386666 4.14151147-2.00248853 7.28177813-3.1554368 9.55733334-3.82293334 0.36408853 2.71549653 0.60681493 6.70530347 0.51579306 12.66725974l-0.04551146 410.115792z" fill="" p-id="4707"></path><path d="M771.64088853 915.89594027l0.04551147-0.925392c0 0.31857813-0.04551147 0.62198507-0.04551147 0.925392zM976.97185173 984.4508448l-0.45511146-0.03034133-0.47028054 0.03034133h0.925392zM771.6864 914.97054827l0.01517013-0.3489184-0.01517013 0.3489184zM271.06417813 498.98382187h-128.8571264c-30.44693333 0-54.99259307 37.54666667-54.992592 65.61185173v77.09582293a15.17037013 15.17037013 0 1 0 30.34074027-0.01517013v-77.09582293c0-14.12361493 13.56231147-35.24077013 24.65185173-35.24077014h128.8571264a15.17037013 15.17037013 0 1 0 0-30.35591146zM346.91602987 498.99899307h-15.17037014a15.17037013 15.17037013 0 1 0 0 30.34074026h15.17037014a15.17037013 15.17037013 0 1 0 0-30.34074026z" fill="" p-id="4708"></path></svg>
\ No newline at end of file
diff --git a/core/core-frontend/src/custom-component/component-group/MediaGroup.vue b/core/core-frontend/src/custom-component/component-group/MediaGroup.vue
index 883ada88c9..cb69eb8cc4 100644
--- a/core/core-frontend/src/custom-component/component-group/MediaGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/MediaGroup.vue
@@ -28,8 +28,8 @@ const props = defineProps({
 })
 
 const { dvModel } = toRefs(props)
-const newComponent = () => {
-  eventBus.emit('handleNew', { componentName: 'Picture', innerType: 'Picture' })
+const newComponent = params => {
+  eventBus.emit('handleNew', { componentName: params, innerType: params })
 }
 
 const handleDragStart = e => {
@@ -42,17 +42,13 @@ const handleDragEnd = e => {
 </script>
 
 <template>
-  <div
-    class="group"
-    @dragstart="handleDragStart"
-    @dragend="handleDragEnd"
-    v-on:click="newComponent"
-  >
+  <div class="group" @dragstart="handleDragStart" @dragend="handleDragEnd">
     <drag-component
       :themes="themes"
       icon="dv-picture-show"
       label="图片"
       drag-info="Picture&Picture"
+      v-on:click="newComponent('Picture')"
     ></drag-component>
   </div>
 </template>
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 0bc4240068..b68aa2ec0c 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -153,6 +153,24 @@ const list = [
     },
     matrixStyle: {}
   },
+  {
+    component: 'DeVideo',
+    name: '媒体',
+    label: '媒体',
+    innerType: 'DeVideo',
+    editing: false,
+    canvasActive: false,
+    icon: 'icon-video',
+    x: 1,
+    y: 1,
+    sizeX: 36,
+    sizeY: 14,
+    style: {
+      width: 600,
+      height: 300
+    },
+    matrixStyle: {}
+  },
   {
     component: 'DeFrame',
     name: '网页',
diff --git a/core/core-frontend/src/custom-component/de-video/Attr.vue b/core/core-frontend/src/custom-component/de-video/Attr.vue
new file mode 100644
index 0000000000..50031ca63e
--- /dev/null
+++ b/core/core-frontend/src/custom-component/de-video/Attr.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="attr-list de-collapse-style">
+    <CommonAttr :element="curComponent"></CommonAttr>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import CommonAttr from '@/custom-component/common/CommonAttr.vue'
+import { storeToRefs } from 'pinia'
+const dvMainStore = dvMainStoreWithOut()
+const { curComponent } = storeToRefs(dvMainStore)
+</script>
diff --git a/core/core-frontend/src/custom-component/de-video/Component.vue b/core/core-frontend/src/custom-component/de-video/Component.vue
new file mode 100644
index 0000000000..78ae9225f9
--- /dev/null
+++ b/core/core-frontend/src/custom-component/de-video/Component.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-row ref="mainPlayer">
+    <div v-if="element.videoLinks[element.videoLinks.videoType].sources[0].src" class="player">
+      <video-player
+        v-if="state.showVideo"
+        ref="videoPlayer"
+        class="vjs-custom-skin"
+        :options="editMode === 'preview' ? state.pOption : playerOptions"
+        :playsinline="true"
+      />
+    </div>
+    <div v-else class="info-class">
+      <span>{{ $t('panel.link_add_tips_pre') }}</span>
+      <span>{{ $t('panel.video_add_tips') }}</span>
+    </div>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import VideoPlayer from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+import { computed, nextTick, reactive, toRefs, watch } from 'vue'
+
+const props = defineProps({
+  propValue: {
+    type: String,
+    require: true
+  },
+  element: {
+    type: Object
+  },
+  editMode: {
+    type: String,
+    require: false,
+    default: 'edit'
+  },
+  active: {
+    type: Boolean,
+    require: false,
+    default: false
+  },
+  h: {
+    type: Number,
+    default: 200
+  }
+})
+const state = reactive({
+  pOption: {},
+  showVideo: true
+})
+const { element, h } = toRefs(props)
+
+const moveFlag = computed(
+  () => element.value.optStatus.dragging || element.value.optStatus.resizing
+)
+
+const playerOptions = computed(() => {
+  const videoPlayerOptions = element.value.videoLinks[element.value.videoLinks.videoType]
+  videoPlayerOptions.height = h
+  return videoPlayerOptions
+})
+
+const videoLinksChange = () => {
+  state.showVideo = false
+  nextTick(() => {
+    state.showVideo = true
+    initOption()
+  })
+}
+
+const initOption = () => {
+  state.pOption = element.value.videoLinks[element.value.videoLinks.videoType]
+  state.pOption.height = h.value
+}
+watch(
+  () => h.value,
+  () => {
+    initOption()
+  }
+)
+</script>
+
+<style lang="less" scoped>
+.info-class {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.3);
+  font-size: 12px;
+  color: #9ea6b2;
+}
+
+.move-bg {
+  height: 100%;
+  width: 100%;
+  background-color: #000000;
+}
+</style>
diff --git a/core/core-frontend/src/utils/components.ts b/core/core-frontend/src/utils/components.ts
index 5abe75b2e4..a83f1d58ee 100644
--- a/core/core-frontend/src/utils/components.ts
+++ b/core/core-frontend/src/utils/components.ts
@@ -27,6 +27,8 @@ import GroupArea from '@/custom-component/group-area/Component.vue'
 import GroupAreaAttr from '@/custom-component/group-area/Attr.vue'
 import DeFrame from '@/custom-component/de-frame/ComponentFrame.vue'
 import DeFrameAttr from '@/custom-component/de-frame/Attr.vue'
+import DeVideo from '@/custom-component/de-video/Component.vue'
+import DeVideoAttr from '@/custom-component/de-video/Attr.vue'
 export const componentsMap = {
   VText: VText,
   VQuery,
@@ -56,7 +58,9 @@ export const componentsMap = {
   GroupArea: GroupArea,
   GroupAreaAttr: GroupAreaAttr,
   DeFrame: DeFrame,
-  DeFrameAttr: DeFrameAttr
+  DeFrameAttr: DeFrameAttr,
+  DeVideo: DeVideo,
+  DeVideoAttr: DeVideoAttr
 }
 
 export default function findComponent(key) {