Переглянути джерело

解决打包后图片替换不能正确加载的问题

liuwei 4 роки тому
батько
коміт
9f279da19e

+ 1 - 1
package.json

@@ -18,7 +18,7 @@
     "packager": "electron-packager ./ VedioApp --win=x64 --out ./outApp  --overwrite --icon=./build/icons/icon.ico"
   },
   "build": {
-    "productName": "vedio_app",
+    "productName": "video",
     "appId": "com.example.app",
     "directories": {
       "output": "build"

+ 3 - 6
src/index.ejs

@@ -12,11 +12,8 @@
   </head>
   <body>
     <div id="app"></div>
-
-    <script>
-      if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
-    </script>
-    <!--<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.7.6/video.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/videojs-flash/2.2.1/videojs-flash.min.js"></script>-->
+      <script>
+        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
+      </script>
   </body>
 </html>

+ 8 - 14
src/renderer/components/Admin.vue

@@ -11,7 +11,6 @@
                 height:windowJson[0] ? windowJson[0].Height*bigScale + 'px' : '',
                 zIndex:windowJson[0] ? windowJson[0].ZIndex : '',
                 display:windowJson[0] ? (windowJson[0].IsVisibility ? 'block' : 'none') : '',
-                backgroundImage:windowJson[0] ? (windowJson[0].BackIcon ? 'url('+require(`static/Data/${windowJson[0].BackIcon}`)+')' : null) : '',
                 backgroundRepeat:'no-repeat',
                 backgroundSize:'100% 100%',
                 backgroundColor:`#${windowJson[0] ? (windowJson[0].BrackgroupStr ? windowJson[0].BrackgroupStr.slice(3) : null) : ''}`,
@@ -35,8 +34,6 @@
 
         <!--滑块-->
         <SliderComponent />
-
-        <!--<button class="logoutBtn" @click="logout">退出</button>-->
     </div>
     <!--最小化和关闭按钮-->
     <div class="mini" @click="miniWindow">-</div>
@@ -64,13 +61,14 @@
             BigShowComponent,
             SignalListComponent,
             ImageComponent,
-            SliderComponent
+            SliderComponent,
         },
 
         data() {
             return {
                 user: storageUtils.getUser(), // 本地存储的用户
                 windowJson:[], // 主窗口配置文件
+                staticUrl:this.$store.state.staticUrl
             }
         },
 
@@ -79,16 +77,12 @@
             this.windowJson = result.filter(item => item.IsVisibility === true)
         },
 
-        methods: {
-            // 退出登录
-            /*async logout() {
-                await reqLogout(this.user)
-                // 重置用户
-                this.$store.dispatch('resetUser')
-                // 去登录界面
-                this.$router.replace('/login')
-            },*/
+        updated() {
+            // 添加背景图片
+            this.$refs.mainpage.style.backgroundImage = this.windowJson[0].BackIcon ? 'url('+`${this.staticUrl}/Data/${this.windowJson[0].BackIcon}`+')' : null
+        },
 
+        methods: {
             // 最小化窗口
             miniWindow() {
                 require('electron').ipcRenderer.send('window-min')
@@ -101,7 +95,7 @@
         },
 
         computed: {
-            ...mapState(['bigScale','imgPublicPath'])
+            ...mapState(['bigScale'])
         }
     }
 </script>

+ 12 - 3
src/renderer/components/BigShow.vue

@@ -22,8 +22,8 @@
         >
             <VueDragResize
                     v-for="itemV in signalPreList" :key="itemV.Id" class="sitem"
-                    :w="item.Width*bigScale/itemV.splitScreenStatus" :h="item.Height*bigScale/itemV.splitScreenStatus"
-                    @dragstop="dragStop" @resizestop="(obj) => reSizeSignal(obj,itemV)"
+                    :w="item.Width*bigScale/itemV.splitScreenStatus" :h="item.Height*bigScale/itemV.splitScreenStatus" :parentLimitation="true"
+                    @dragging="(obj) => dragging(obj,itemV)" @dragstop="(obj) => dragStop(obj,itemV)" @resizestop="(obj) => reSizeSignal(obj,itemV)"
                     :style="{
                         position: 'fixed',
                         top:itemV.top + 'px',
@@ -55,7 +55,7 @@
     import VueDragResize from 'vue-drag-resize'
 
     import '../assets/less/splitscreen.less'
-    import {elePosition, getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
+    import {debounce, elePosition, getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
     import {reqRefreshView} from "../api"
     import VideoPlayer from "./player.vue"
 
@@ -169,6 +169,15 @@
                 })
             },
 
+            // 拖动进行中(使用函数防抖)
+            dragging(obj,item) {
+                /*const arr = this.$store.state.signalPreList.filter(a => a.Id !== item.Id)
+                item.top = item.top + obj.top
+                item.left = item.left + obj.left
+                this.$store.dispatch('updateSignalPreList',[...arr,item])
+                console.log(item)*/
+            },
+
             // 拖动结束
             dragStop() {
                 const arr = this.$store.state.signalPreList

+ 33 - 24
src/renderer/components/Button.vue

@@ -12,9 +12,9 @@
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
                     fontSize:item.FontSize*bigScale + 'px',
-                    backgroundImage:item.BackIcon ? 'url('+require(`../../../static/Data/${item.BackIcon}`)+')' : null,
                     backgroundSize:'100% 100%',
                     backgroundRepeat:'no-repeat',
+                    backgroundImage:item.BackIcon ? 'url('+require(`../../../static/Data/${item.BackIcon}`)+')' : null,
                     backgroundColor:item.BackIcon ? null : `#${item.BrackgroupStr.slice(3)}`,
                     color:`#${item.ForegroundStr.slice(3)}`,
                     textAlign:'center',
@@ -43,9 +43,10 @@
                 count3: 0, // 管理控制按钮计数器
                 count4: 0, // 3个视频按钮计数器
                 count5: 0, // 安卓分布式按钮
-                buttonJson:[],
-                labelJson:[],
-                slideJson:[]
+                buttonJson: [],
+                labelJson: [],
+                slideJson: [],
+                staticUrl:this.$store.state.staticUrl
             }
         },
 
@@ -66,6 +67,12 @@
 
             this.slideJson = await getStaticFile('EnitySlider.Data')
             this.funSliderArr = await getStaticFile('EnitySlider.Data')
+
+            // 设置按钮背景图片
+            const keyArr = Object.keys(this.$refs)
+            keyArr.forEach((item,index) => {
+                this.$refs[item][0].style.backgroundImage = this.buttonJson[index].BackIcon ? 'url('+`${this.staticUrl}/Data/${this.buttonJson[index].BackIcon}`+')' : null
+            })
         },
 
         computed: {
@@ -92,7 +99,7 @@
                     if (this.count4 === 0) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         ++this.count4
-                    } else if(e !== this.lastData4) {
+                    } else if (e !== this.lastData4) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         this.lastBtn4.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData4.BackIcon}`) + ')'
                     }
@@ -117,7 +124,7 @@
                     if (this.count2 === 0) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         ++this.count2
-                    } else if(e !== this.lastData) {
+                    } else if (e !== this.lastData) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         this.lastBtn.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData.BackIcon}`) + ')'
                     }
@@ -131,11 +138,12 @@
                 if (e.Name.includes('V0--Btn6') || e.Name.includes('V0--Btn61') || e.Name.includes('V0--Btn12') || e.Name.includes('V0--Btn58') || e.Name.includes('V0--Btn77')) {
                     // (1)背景切换
                     if (this.count3 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = e.ActionIcon ? 'url('+`${this.staticUrl}/Data/${e.ActionIcon}`+')' : null
                         ++this.count3
-                    } else if(e !== this.lastData3) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                        this.lastBtn3.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData3.BackIcon}`) + ')'
+                    } else if (e !== this.lastData3) {
+                        this.$refs[e.ID][0].style.backgroundImage = e.ActionIcon ? 'url('+`${this.staticUrl}/Data/${e.ActionIcon}`+')' : null
+
+                        this.lastBtn3.style.backgroundImage = this.lastData3.BackIcon ? 'url(' + `${this.staticUrl}/Data/${this.lastData3.BackIcon}` + ')' : null
                     }
                     // 保存点过的这个按钮和按钮数据
                     this.lastBtn3 = this.$refs[e.ID][0]
@@ -178,19 +186,19 @@
                     return
                 } else if (e.ID === '49653a62-99cb-40e1-a513-60e42893adb7' || e.ID === 'd55c81a8-54d7-4d90-aad7-4f34c3ba3950' || e.ID === '4142ab5b-ce52-4655-a28d-724bfabb24f0') {
                     // 自由屏
-                    this.$store.dispatch('splitScreen',0)
+                    this.$store.dispatch('splitScreen', 0)
                     return
                 } else if (e.ID === '52de9a2e-d171-423d-860f-3fe2750ec757' || e.ID === '0cabb1ba-bcae-45d9-b019-2b45486f98e3' || e.ID === '9bb5b3e3-9e21-4716-8059-f5b35b24e3fa') {
                     // 四分屏
-                    this.$store.dispatch('splitScreen',1)
+                    this.$store.dispatch('splitScreen', 1)
                     return
                 } else if (e.ID === 'ac0cc31c-a9b8-4bdf-88cf-928964b93ac5' || e.ID === '201e4bb0-c039-46c7-a55a-049d00de4769') {
                     // 九分屏
-                    this.$store.dispatch('splitScreen',2)
+                    this.$store.dispatch('splitScreen', 2)
                     return
                 } else if (e.ID === '2d4c49bc-905b-4f96-a65c-9b0a3e057b3f') {
                     // 16分屏
-                    this.$store.dispatch('splitScreen',3)
+                    this.$store.dispatch('splitScreen', 3)
                     return
                 }
 
@@ -199,7 +207,7 @@
                     if (this.count5 === 0) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         ++this.count5
-                    } else if(e !== this.lastData5){
+                    } else if (e !== this.lastData5) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         this.lastBtn5.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData5.BackIcon}`) + ')'
                     }
@@ -210,11 +218,11 @@
                 }
 
                 // 电源管理和电脑管理
-                if(this.powerAndCompBtns.some(item => item.ID === e.ID)){
-                    if(e.ActionType === 2){
+                if (this.powerAndCompBtns.some(item => item.ID === e.ID)) {
+                    if (e.ActionType === 2) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         e.ActionType = -2
-                    }else {
+                    } else {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                         e.ActionType = 2
                     }
@@ -226,11 +234,11 @@
             mouseDown(e) {
                 if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                }else if(e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
+                } else if (e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                }else if(e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
+                } else if (e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                }else if(e.ID === '19554440-98bc-4644-83a0-d9cefd69153e'){ // 电脑控制All按钮
+                } else if (e.ID === '19554440-98bc-4644-83a0-d9cefd69153e') { // 电脑控制All按钮
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                 }
                 return
@@ -240,11 +248,12 @@
             mouseUp(e) {
                 if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
-                }else if(e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
+                } else if (e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
-                }else if(e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
+                } else if (e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
-                }if(e.ID === '19554440-98bc-4644-83a0-d9cefd69153e'){ // 电脑控制All按钮
+                }
+                if (e.ID === '19554440-98bc-4644-83a0-d9cefd69153e') { // 电脑控制All按钮
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                 }
                 return

+ 12 - 2
src/renderer/components/Image.vue

@@ -11,10 +11,10 @@
                     height:item.Height*bigScale + 'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
-                    backgroundImage:'url('+require(`../../../static/Data/${item.BackIcon}`)+')',
                     backgroundRepeat:'no-repeat',
                     backgroundSize:'100% 100%',
                 }"
+             :ref="item.ID"
         >
         </div>
     </div>
@@ -28,7 +28,8 @@
 
         data() {
             return {
-                imageJson:[]
+                imageJson:[],
+                staticUrl:this.$store.state.staticUrl
             }
         },
 
@@ -36,6 +37,15 @@
             this.imageJson = await getStaticFile('EnityImage.Data')
         },
 
+        updated() {
+            // 设置背景图片
+            const imageArr = this.imageJson
+            const keyArr = Object.keys(this.$refs)
+            keyArr.forEach((item,index) => {
+                this.$refs[item][0].style.backgroundImage = imageArr[index].BackIcon ? 'url('+`${this.staticUrl}/Data/${imageArr[index].BackIcon}`+')' : null
+            })
+        },
+
         computed: {
             ...mapState(['bigScale'])
         }

+ 7 - 1
src/renderer/components/Login.vue

@@ -57,7 +57,8 @@
                         { validator: validatePasswrod, trigger: 'blur' }
                     ]
                 },
-                loginJson:[]
+                loginJson:[],
+                staticUrl:this.$store.state.staticUrl
             }
         },
 
@@ -65,6 +66,11 @@
             this.loginJson = await getStaticFile('EnityLogin.Data')
         },
 
+        updated() {
+            // 添加背景图片
+            this.$refs.login.style.backgroundImage = this.loginJson[0].BackIcon ? 'url('+`${this.staticUrl}/Data/${this.loginJson[0].BackIcon}`+')' : null
+        },
+
         methods: {
             async submitForm() {
                 const {username,password} = this.ruleForm

+ 12 - 2
src/renderer/components/Slider.vue

@@ -11,9 +11,9 @@
                     height:item.Height*bigScale + 'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
-                    backgroundImage:'url('+require(`../../../static/Data/${item.BackIcon}`)+')',
                     backgroundRepeat:'no-repeat',
                 }"
+             :ref="item.ID"
         >
             <div
                     :style="{
@@ -45,7 +45,8 @@
     export default {
         data() {
             return {
-                sliderJson:[]
+                sliderJson:[],
+                staticUrl:this.$store.state.staticUrl
             }
         },
 
@@ -53,6 +54,15 @@
             this.sliderJson = await getStaticFile('EnitySlider.Data')
         },
 
+        mounted() {
+            // 设置背景图片
+            const sliderArr = this.sliderJson
+            const keyArr = Object.keys(this.$refs)
+            keyArr.forEach((item,index) => {
+                this.$refs[item][0].style.backgroundImage = sliderArr[index].BackIcon ? 'url('+`${this.staticUrl}/Data/${sliderArr[index].BackIcon}`+')' : null
+            })
+        },
+
         computed: {
             ...mapState(['bigScale']),
         }

+ 4 - 4
src/renderer/store/state.js

@@ -15,9 +15,9 @@ export default {
   // 元素缩放比例
   bigScale:1,
 
-  // 图片公共路径
-  imgPublicPath:'',
-
   // 获取信号源拖到第几个栅格中
-  positionNum:1
+  positionNum:1,
+
+  // 静态资源路径
+  staticUrl:global.__static.substring(global.__static.length - 6, global.__static.length)
 }

+ 17 - 0
src/utils/tools.js

@@ -87,6 +87,22 @@ export function gridPosition(splitStatus,count) {
     }
 }
 
+// 函数防抖
+export function debounce(fn, wait) {
+    var timer = null;
+    return function () {
+        var context = this
+        var args = arguments
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+        timer = setTimeout(function () {
+            fn.apply(context, args)
+        }, wait)
+    }
+}
+
 // 获取绝对位置的横坐标和纵坐标
 export function getElementLeft(element){
     var actualLeft = element.offsetLeft;
@@ -163,3 +179,4 @@ export function elePosition(width,height,count,top,left,splitNum) {
     }
 }
 
+