增加视频变形功能

src/renderer/components/BigShow.vue

@@ -24,13 +24,15 @@
                     :x="itemV.left" :y="itemV.top"
                     @dragstop="(position) => dragStop(position,itemV,bigScreenObj,curOpeBigscreenId)"
                     @resizestop="(size) => resizeSignal(size,itemV,bigScreenObj,curOpeBigscreenId)"
+                    style="overflow:hidden;!important;"
             >
-                <div ref="signal" :id="itemV.ID">
+                <div ref="signal" :id="itemV.ID" style="width:100%;height:100%;overflow: hidden!important;">
                     <!--{{itemV.deviceID}}-->
                     <VideoPlayer
                         ref="videoPlayer"
-                        :options="playerOptions"
+                        :options="videoPlayObj[itemV.sourceId]"
                         :playsinline="true"
+                        :style="scaleFun(itemV)"
                     />
                     <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
                 </div>
@@ -50,7 +52,7 @@
 
     import '../assets/less/splitscreen.less'
     import {elePosition, getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
-    import {reqRefreshView} from "../api"
+    import {reqPreviewSourceList, reqRefreshView} from "../api"
     import VideoPlayer from "./player.vue"
 
     export default {
@@ -63,7 +65,10 @@
                         {
                             "src": "rtmp://58.200.131.2:1935/livetv/hunantv",
                             "type": "rtmp/flv"
-                        }
+                        },/*{
+                            "src": "rtmp://58.200.131.2:1935/livetv/cctv1",
+                            "type": "rtmp/flv"
+                        }*/,
                     ],
                     aspectRatio: '482:224',
                     techOrder: ['flash'],
@@ -74,6 +79,8 @@
                     notSupportedMessage: '此视频暂无法播放，请稍后再试',
                 },
                 screenPosition:{}, // 大屏在视口中的位置
+                videoPlayObj:{}, // 视频播放配置对象
+                savePreWh:{}, // 保存旧的开窗宽高
             }
         },
 
@@ -108,6 +115,42 @@
                 obj[item.ID].splitStatus = Math.floor(Math.sqrt(num)-1)
             })
             this.$store.dispatch('updateBigscreenObj',obj)
+            
+            // 获取视频播放的配置对象
+            // const signalListJson = await reqPreviewSourceList()
+            const videoPlayObj = {
+                2:{
+                    sources: [
+                        {
+                            "src": "rtmp://58.200.131.2:1935/livetv/hunantv",
+                            "type": "rtmp/flv"
+                        }
+                    ],
+                    aspectRatio: '482:224',
+                    techOrder: ['flash'],
+                    autoplay: true,
+                    controls: false,
+                    fluid:true,
+                    preload: 'auto',
+                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
+                },
+                3:{
+                    sources: [
+                        {
+                            "src": "rtmp://58.200.131.2:1935/livetv/hunantv",
+                            "type": "rtmp/flv"
+                        }
+                    ],
+                    aspectRatio: '1:3',
+                    techOrder: ['flash'],
+                    autoplay: true,
+                    controls: false,
+                    fluid:true,
+                    preload: 'auto',
+                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
+                }
+            }
+            this.videoPlayObj = videoPlayObj
         },
 
         updated() {
@@ -181,10 +224,39 @@
                 bigScreenObj[bigscreenId].signalArr = newSignalPreList
                 this.refreshBigScreen(bigScreenObj,bigscreenId)
             },
+
+            // 设置视频变形
+            scaleFun:function (itemV) {
+                const value = (itemV.width/itemV.height)/(16/9)
+                const value2 = itemV.height/(itemV.width/16*9)
+                console.log(value,value2)
+                if(value<1){
+                    return `transform:scale(${1/value},${value2+1})`
+                }else {
+                    return `transform:scale(${value},1)`
+                }
+
+                /*const preWh = this.savePreWh
+                if(preWh[itemV.Id]){
+                    return `transform:scale(${itemV.width/preWh[itemV.Id].width},${itemV.height/preWh[itemV.Id].height})`
+                }*/
+                
+                /*const value = (itemV.width/itemV.height)/(16/9)
+                // 1.宽大于高，并且宽高比值大于16/9
+                if(itemV.width>itemV.height && value>1){
+                    // 先保存旧的宽高
+                    /!*preWh[itemV.Id] = {width:itemV.width,height:itemV.height}
+                    this.savePreWh = preWh*!/
+                    return `transform:scale(${value},1)`
+                }else if(itemV.width<itemV.height && value<1) {
+                    console.log(1/value)
+                    return `transform:scale(1,4)`
+                }*/
+            },
         },
 
         computed: {
-            ...mapState(['splitScreenStatus', 'bigScale','positionNum','curOpeBigscreenId','bigScreenObj']),
+            ...mapState(['splitScreenStatus', 'bigScale','positionNum','curOpeBigscreenId','bigScreenObj','signalListJson']),
             
             // 当前变动的信号源数组监控
             signalPreList: {

src/renderer/components/player.vue

@@ -5,7 +5,7 @@
             ref="video"
             width="100%"
             height="100%"
-            style="object-fit: fill"
+            style="object-fit: fill!important;"
     ></video>
   </div>
 </template>

src/renderer/main.js

@@ -1,13 +1,13 @@
 import Vue from 'vue'
 import axios from 'axios'
 import VueVideoPlayer from 'vue-video-player'
+import ElementUI from 'element-ui'
 import 'video.js/dist/video-js.css'
+import 'element-ui/lib/theme-chalk/index.css'
 
 import App from './App'
 import router from './router'
 import store from './store'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
 
 Vue.use(VueVideoPlayer)
 Vue.use(ElementUI)

static/Data/EnityLogin.Data

@@ -1,35 +1 @@
-[
-    {
-        "IsBorder":true,
-        "BorderStr":"#FFFFFFFF",
-        "ForegroundStr":"#FFD6D6D6",
-        "BTNForegroundStr":"#FF000000",
-        "BrackgroupStr":"#FF03A9F4",
-        "BackIconObjID":"",
-        "BackIcon":null,
-        "ActionIconObjID":"",
-        "ActionIcon":null,
-        "FontSize":16,
-        "IsPanel":false,
-        "ValidatType":1,
-        "EnityName":"Login",
-        "VerifyPassActionList":[
-
-        ],
-        "ID":"cb3c80b1-f1e4-459d-88ae-e2979666b5e3",
-        "Name":"V1--Login0",
-        "Left":294,
-        "Top":194,
-        "Width":411,
-        "Height":266,
-        "ZIndex":20100,
-        "GroupNumber":"",
-        "IsRunVisiable":true,
-        "IsVisibility":false,
-        "isSyn":false,
-        "WindowID":"b7872c9a-45ec-46c6-a388-f8d364a9f2d7",
-        "PanelID":null,
-        "IsLock":false,
-        "IsWindow":false
-    }
-]
+[]

static/Data/EnityMemory.Data

@@ -1,24 +1 @@
-[
-  {
-    "ID":"01",
-    "Code":"01",
-    "Name":"LoginUser",
-    "isInt":false,
-    "Value":null,
-    "IsSyn":false,
-    "IsSystem":false,
-    "Mark":null,
-    "ActionType":4
-  },
-  {
-    "ID":"02",
-    "Code":"02",
-    "Name":"LoginRole",
-    "isInt":false,
-    "Value":null,
-    "IsSyn":false,
-    "IsSystem":false,
-    "Mark":null,
-    "ActionType":4
-  }
-]
+[{"ID":"01","Code":"01","Name":"LoginUser","isInt":false,"Value":null,"IsSyn":false,"IsSystem":true,"Mark":null,"ActionType":4},{"ID":"02","Code":"02","Name":"LoginRole","isInt":false,"Value":null,"IsSyn":false,"IsSystem":true,"Mark":null,"ActionType":4}]

static/Data/EnitySlider.Data

@@ -1,230 +1 @@
-[
-  {
-    "BackIcon":"77.png",
-    "SliderIcon":"76.png",
-    "Orientation":0,
-    "InitValue":0,
-    "SliderFrequency":10,
-    "MinValue":1,
-    "MaxValue":100,
-    "DevCode":null,
-    "Channel":0,
-    "VolMargin":"5",
-    "SliderMargin":"0",
-    "ShowVol":true,
-    "imgBgWidth":67,
-    "imgBgHeight":215,
-    "imgSliderWidth":33,
-    "imgSliderHeight":54,
-    "Cmd":null,
-    "BindVar":null,
-    "DeviceID":null,
-    "IsPanel":false,
-    "EnityName":"Slider",
-    "ID":"b3539067-d6ea-4dbf-9e43-fd6d043f8684",
-    "Name":"Slider0",
-    "Left":244,
-    "Top":472,
-    "Width":54,
-    "Height":226,
-    "ZIndex":10600,
-    "GroupNumber":"",
-    "IsRunVisiable":true,
-    "IsVisibility":false,
-    "isSyn":true,
-    "WindowID":"cb2687fd-931a-4b38-a76d-9c3ea171b8d8",
-    "PanelID":null,
-    "IsLock":false,
-    "IsWindow":false
-  },
-  {
-    "BackIcon":"77.png",
-    "SliderIcon":"76.png",
-    "Orientation":0,
-    "InitValue":0,
-    "SliderFrequency":10,
-    "MinValue":1,
-    "MaxValue":100,
-    "DevCode":null,
-    "Channel":0,
-    "VolMargin":"6",
-    "SliderMargin":"0",
-    "ShowVol":true,
-    "imgBgWidth":67,
-    "imgBgHeight":215,
-    "imgSliderWidth":33,
-    "imgSliderHeight":54,
-    "Cmd":null,
-    "BindVar":null,
-    "DeviceID":null,
-    "IsPanel":false,
-    "EnityName":"Slider",
-    "ID":"228f105d-ebe4-45ba-a072-a1196bf6030e",
-    "Name":"Slider1",
-    "Left":307,
-    "Top":471,
-    "Width":56,
-    "Height":226,
-    "ZIndex":10900,
-    "GroupNumber":"",
-    "IsRunVisiable":true,
-    "IsVisibility":false,
-    "isSyn":true,
-    "WindowID":"cb2687fd-931a-4b38-a76d-9c3ea171b8d8",
-    "PanelID":null,
-    "IsLock":false,
-    "IsWindow":false
-  },
-  {
-    "BackIcon":"77.png",
-    "SliderIcon":"76.png",
-    "Orientation":0,
-    "InitValue":0,
-    "SliderFrequency":10,
-    "MinValue":1,
-    "MaxValue":100,
-    "DevCode":null,
-    "Channel":0,
-    "VolMargin":"6",
-    "SliderMargin":"0",
-    "ShowVol":true,
-    "imgBgWidth":67,
-    "imgBgHeight":215,
-    "imgSliderWidth":33,
-    "imgSliderHeight":54,
-    "Cmd":null,
-    "BindVar":null,
-    "DeviceID":null,
-    "IsPanel":false,
-    "EnityName":"Slider",
-    "ID":"a4ada37c-c564-45fe-a049-48650cf7d66e",
-    "Name":"Slider2",
-    "Left":374,
-    "Top":472,
-    "Width":61,
-    "Height":226,
-    "ZIndex":11000,
-    "GroupNumber":"",
-    "IsRunVisiable":true,
-    "IsVisibility":false,
-    "isSyn":true,
-    "WindowID":"cb2687fd-931a-4b38-a76d-9c3ea171b8d8",
-    "PanelID":null,
-    "IsLock":false,
-    "IsWindow":false
-  },
-  {
-    "BackIcon":"77.png",
-    "SliderIcon":"76.png",
-    "Orientation":0,
-    "InitValue":0,
-    "SliderFrequency":10,
-    "MinValue":1,
-    "MaxValue":100,
-    "DevCode":null,
-    "Channel":0,
-    "VolMargin":"6",
-    "SliderMargin":"0",
-    "ShowVol":true,
-    "imgBgWidth":67,
-    "imgBgHeight":215,
-    "imgSliderWidth":33,
-    "imgSliderHeight":54,
-    "Cmd":null,
-    "BindVar":null,
-    "DeviceID":null,
-    "IsPanel":false,
-    "EnityName":"Slider",
-    "ID":"42cf859e-bcd1-43b2-8eb0-63964eeab067",
-    "Name":"Slider3",
-    "Left":449,
-    "Top":472,
-    "Width":61,
-    "Height":227,
-    "ZIndex":11200,
-    "GroupNumber":"",
-    "IsRunVisiable":true,
-    "IsVisibility":false,
-    "isSyn":true,
-    "WindowID":"cb2687fd-931a-4b38-a76d-9c3ea171b8d8",
-    "PanelID":null,
-    "IsLock":false,
-    "IsWindow":false
-  },
-  {
-    "BackIcon":"77.png",
-    "SliderIcon":"76.png",
-    "Orientation":0,
-    "InitValue":0,
-    "SliderFrequency":10,
-    "MinValue":1,
-    "MaxValue":100,
-    "DevCode":null,
-    "Channel":0,
-    "VolMargin":"6",
-    "SliderMargin":"0",
-    "ShowVol":true,
-    "imgBgWidth":67,
-    "imgBgHeight":215,
-    "imgSliderWidth":33,
-    "imgSliderHeight":54,
-    "Cmd":null,
-    "BindVar":null,
-    "DeviceID":null,
-    "IsPanel":false,
-    "EnityName":"Slider",
-    "ID":"87f9e83f-38a5-4db6-82ca-76edc5a32e05",
-    "Name":"Slider4",
-    "Left":520,
-    "Top":472,
-    "Width":62,
-    "Height":230,
-    "ZIndex":11600,
-    "GroupNumber":"",
-    "IsRunVisiable":true,
-    "IsVisibility":false,
-    "isSyn":true,
-    "WindowID":"cb2687fd-931a-4b38-a76d-9c3ea171b8d8",
-    "PanelID":null,
-    "IsLock":false,
-    "IsWindow":false
-  },
-  {
-    "BackIcon":"77.png",
-    "SliderIcon":"76.png",
-    "Orientation":0,
-    "InitValue":0,
-    "SliderFrequency":10,
-    "MinValue":1,
-    "MaxValue":100,
-    "DevCode":null,
-    "Channel":0,
-    "VolMargin":"6",
-    "SliderMargin":"0",
-    "ShowVol":true,
-    "imgBgWidth":67,
-    "imgBgHeight":215,
-    "imgSliderWidth":33,
-    "imgSliderHeight":54,
-    "Cmd":null,
-    "BindVar":null,
-    "DeviceID":null,
-    "IsPanel":false,
-    "EnityName":"Slider",
-    "ID":"96b74f03-87ce-48cf-80d8-718d21059530",
-    "Name":"Slider5",
-    "Left":593,
-    "Top":472,
-    "Width":59,
-    "Height":225,
-    "ZIndex":11700,
-    "GroupNumber":"",
-    "IsRunVisiable":true,
-    "IsVisibility":false,
-    "isSyn":true,
-    "WindowID":"cb2687fd-931a-4b38-a76d-9c3ea171b8d8",
-    "PanelID":null,
-    "IsLock":false,
-    "IsWindow":false
-  }
-]
+[]

static/Data/EnityTimer.Data

@@ -1,16 +1 @@
-[
-  {
-    "ID":"f5f1217e-f606-4372-8650-4363931fa8e1",
-    "Code":"f5f1217e-f606-4372-8650-4363931fa8e1",
-    "Name":"500ms",
-    "ActionType":0,
-    "Milliseconds":500
-  },
-  {
-    "ID":"08be426e-f9ae-469c-8ea3-ab41403c9f47",
-    "Code":"08be426e-f9ae-469c-8ea3-ab41403c9f47",
-    "Name":"1s",
-    "ActionType":0,
-    "Milliseconds":1000
-  }
-]
+[]

static/Data/EnityView.Data

@@ -1 +1 @@
-[]
+[]