Merge pull request #2207 from dataease/dev

frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue

@@ -24,10 +24,14 @@
               <el-radio :label="false">{{ $t('panel.no') }}</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive" :label="$t('panel.auto_play')">
-            <el-switch v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].autoplay" size="mini" />
-          </el-form-item>
-          <el-form-item v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive" :label="$t('panel.play_frequency')">
+          <!--This button is currently disabled and temporarily masked-->
+          <!--          <el-form-item v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive" :label="$t('panel.auto_play')">-->
+          <!--            <el-switch v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].autoplay" size="mini" />-->
+          <!--          </el-form-item>-->
+          <el-form-item
+            v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive"
+            :label="$t('panel.play_frequency')"
+          >
             <el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].loop">
               <el-radio :label="false">{{ $t('panel.play_once') }}</el-radio>
               <el-radio :label="true">{{ $t('panel.play_circle') }}</el-radio>
@@ -123,7 +127,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .slot-class{
+  .slot-class {
     color: white;
   }
 
@@ -132,13 +136,14 @@ export default {
     text-align: center;
 
   }
-  .ellip{
+
+  .ellip {
     /*width: 100%;*/
     margin-left: 10px;
     margin-right: 10px;
-    overflow: hidden;/*超出部分隐藏*/
-    white-space: nowrap;/*不换行*/
-    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    overflow: hidden; /*超出部分隐藏*/
+    white-space: nowrap; /*不换行*/
+    text-overflow: ellipsis; /*超出部分文字以...显示*/
     background-color: #f7f8fa;
     color: #3d4d66;
     font-size: 12px;
@@ -147,20 +152,21 @@ export default {
     border-radius: 3px;
   }
 
-  .select-filed{
+  .select-filed {
     /*width: 100%;*/
     margin-left: 10px;
     margin-right: 10px;
-    overflow: hidden;/*超出部分隐藏*/
-    white-space: nowrap;/*不换行*/
-    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    overflow: hidden; /*超出部分隐藏*/
+    white-space: nowrap; /*不换行*/
+    text-overflow: ellipsis; /*超出部分文字以...显示*/
     color: #3d4d66;
     font-size: 12px;
     line-height: 35px;
     height: 35px;
     border-radius: 3px;
   }
-  >>>.el-popover{
+
+  > > > .el-popover {
     height: 200px;
     overflow: auto;
   }

frontend/src/components/canvas/components/Editor/index.vue

@@ -499,6 +499,7 @@ function movePlayer(item, position) {
 }
 
 function removeItem(index) {
+  try {
     const vm = this
     const item = this.yourList[index]
     removeItemFromPositionBox(item)
@@ -510,8 +511,10 @@ function removeItem(index) {
         moveItemUp.call(vm, upItem, canGoUpRows)
       }
     })
-
     this.yourList.splice(index, 1, {})
+  } catch (e) {
+    console.log('removeItem have some ignore error')
+  }
 }
 
 // 矩阵设计初始化的时候 预占位，防止编辑仪表板页面，初始化和视图编辑返回时出现组件位置变化问题

frontend/src/components/canvas/custom-component/DeStreamMedia.vue

 <template>
   <el-row ref="mainPlayer" style="width: 100%;height: 100%">
     <div v-if="element.streamMediaLinks[element.streamMediaLinks.videoType].url" class="video-container">
-      <video ref="player" class="centered-video" name="centeredVideo" :loop="pOption.loop" controls muted />
-      <div v-if="editMode==='edit'" class="stream-mask" />
+      <video :ref="'player-'+element.id" class="centered-video" name="centeredVideo" :loop="pOption.loop" controls muted />
+      <div v-if="editMode==='edit'" class="stream-mask edit-mask" />
+      <div v-if="mobileLayoutStatus" class="stream-mask mobile-layout-mask">
+        <span style="opacity: 0.7;">
+          <span style="color: lightgray;">{{ $t('panel.stream_mobile_tips') }}</span>
+        </span>
+      </div>
     </div>
     <div v-else class="info-stream-class">
       {{ $t('panel.stream_media_add_tips') }}
@@ -14,6 +19,7 @@
 import flvjs from 'flv.js'
 import '@/custom-theme.css'
 import bus from '@/utils/bus'
+import { mapState } from 'vuex'
 
 export default {
   props: {
@@ -56,7 +62,10 @@ export default {
     },
     player() {
       return this.$refs.videoPlayer.player
-    }
+    },
+    ...mapState([
+      'mobileLayoutStatus'
+    ])
   },
   watch: {
     pOption: {
@@ -71,8 +80,8 @@ export default {
   mounted() {
     this.initOption()
     bus.$on('streamMediaLinksChange-' + this.element.id, () => {
-      this.pOption = this.element.streamMediaLinks[this.element.streamMediaLinks.videoType],
-      this.flvPlayer = null,
+      this.pOption = this.element.streamMediaLinks[this.element.streamMediaLinks.videoType]
+      this.flvPlayer = null
       this.videoShow = false
       this.$nextTick(() => {
         this.videoShow = true
@@ -80,14 +89,24 @@ export default {
       })
     })
   },
+  beforeDestroy() {
+    this.destroyPlayer()
+  },
   methods: {
     initOption() {
       if (flvjs.isSupported() && this.pOption.url) {
-        const video = this.$refs.player
+        this.destroyPlayer()
+        const video = this.$refs['player-' + this.element.id]
         if (video) {
-          this.flvPlayer = flvjs.createPlayer(this.pOption)
-          this.flvPlayer.attachMediaElement(video)
           try {
+            this.flvPlayer = flvjs.createPlayer(this.pOption,
+              {
+                enableWorker: false, // 不启用分离线程
+                enableStashBuffer: false, // 关闭IO隐藏缓冲区
+                isLive: this.pOption.isLive,
+                lazyLoad: false
+              })
+            this.flvPlayer.attachMediaElement(video)
             this.flvPlayer.load()
             this.flvPlayer.play()
           } catch (error) {
@@ -95,6 +114,14 @@ export default {
           }
         }
       }
+    },
+    destroyPlayer() {
+    // Destroy
+      if (this.flvPlayer) {
+        this.flvPlayer.pause()
+        this.flvPlayer.destroy()
+        this.flvPlayer = null
+      }
     }
   }
 }
@@ -136,8 +163,6 @@ export default {
     display: flex;
     height: calc(100% - 60px) !important;
     width: 100% !important;
-    background-color: #5c5e61;
-    opacity: 0;
     position: absolute;
     top: 0px;
     left: 0px;
@@ -146,5 +171,13 @@ export default {
     align-items: center;
     justify-content: center;
   }
+
+  .edit-mask{
+    opacity: 0;
+  }
+
+  .mobile-layout-mask{
+  }
+
 </style>
 

frontend/src/components/canvas/custom-component/component-list.js

@@ -106,7 +106,8 @@ export const STREAMMEDIALINKS = {
     type: 'flv',
     isLive: false,
     cors: true, // 允许跨域
-    loop: true
+    loop: true,
+    autoplay: false
     // url: null // 网络动画视频
   }
 }

frontend/src/components/canvas/store/copy.js

@@ -53,7 +53,7 @@ export default {
           newView.propValue.viewId = res.data
           store.commit('addComponent', { component: newView })
         })
-      } if (data.type === 'de-tabs') {
+      } else if (data.type === 'de-tabs') {
         const sourceAndTargetIds = {}
         const newCop = deepCopy(data)
         newCop.options.tabList.forEach((item) => {

frontend/src/lang/en.js

@@ -1430,6 +1430,7 @@ export default {
     no: 'No',
     live_tips: 'User Https First',
     stream_media_add_tips: 'Please Add Stream Media Info...',
+    stream_mobile_tips: 'IOS terminal may not display',
     json_params_error: 'Third Party Parameters Parsing Failed. Please Check Whether The Parameters Format Is Correct',
     inner_padding: 'Inner Padding',
     board_radio: 'Board Radio',

frontend/src/lang/tw.js

@@ -1431,6 +1431,7 @@ export default {
     no: '否',
     live_tips: '優先HTTPS鏈接',
     stream_media_add_tips: '請點擊添加配置流媒體信息...',
+    stream_mobile_tips: 'IOS终端可能无法显示',
     json_params_error: '第三方參數解析失敗，請檢查參數格式是否正確',
     inner_padding: '內邊距',
     board_radio: '邊框半徑',

frontend/src/lang/zh.js

@@ -1438,6 +1438,7 @@ export default {
     no: '否',
     live_tips: '优先HTTPS链接',
     stream_media_add_tips: '请点击添加配置流媒体信息...',
+    stream_mobile_tips: 'IOS终端可能无法显示',
     json_params_error: '第三方参数解析失败，请检查参数格式是否正确',
     inner_padding: '内边距',
     board_radio: '边框半径',

frontend/src/views/chart/view/ChartEdit.vue

@@ -2300,7 +2300,7 @@ export default {
 
     closeEditDsField() {
       this.editDsField = false
-      this.initTableField()
+      this.initTableField(this.table.id)
     },
 
     // drag