feat(仪表板): 新增视频组件

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",

core/core-frontend/src/custom-component/component-group/MediaGroup.vue

@@ -28,8 +28,8 @@ const props = defineProps({
 })
 
 const { dvModel } = toRefs(props)
-const newComponent = () => {
+const newComponent = params => {
-  eventBus.emit('handleNew', { componentName: 'Picture', innerType: 'Picture' })
+  eventBus.emit('handleNew', { componentName: params, innerType: params })
 }
 
 const handleDragStart = e => {
@@ -42,17 +42,13 @@ const handleDragEnd = e => {
 </script>
 
 <template>
-  <div
+  <div class="group" @dragstart="handleDragStart" @dragend="handleDragEnd">
-    class="group"
-    @dragstart="handleDragStart"
-    @dragend="handleDragEnd"
-    v-on:click="newComponent"
-  >
     <drag-component
       :themes="themes"
       icon="dv-picture-show"
       label="图片"
       drag-info="Picture&Picture"
+      v-on:click="newComponent('Picture')"
     ></drag-component>
   </div>
 </template>

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: '网页',

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>

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>

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) {