解决满屏显示的问题，增加最小化和关闭按钮

src/main/index.js

@@ -1,4 +1,7 @@
-import { app, BrowserWindow } from 'electron'
+import { app, BrowserWindow,screen } from 'electron'
+
+const electron = require('electron')
+const ipc = electron.ipcMain
 
 /**
  * Set `__static` path to static files in production
@@ -12,16 +15,21 @@ let mainWindow
 const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html`
 
 function createWindow () {
+
+  let size = screen.getPrimaryDisplay().workAreaSize
+  let width = parseInt(size.width)
+  let height = parseInt(size.height)
+  console.log(width,height)
+
   /**
    * Initial window options
    */
   mainWindow = new BrowserWindow({
-    width: 1000,
-    height: 563,
+    width: width,
+    height: height,
     show:false,
-    /*fullscreenable: true,
-    fullscreen: true,
-    simpleFullscreen:true,*/
+    titleBarStyle:'hiddenInset',
+    autoHideMenuBar: true,
     webPreferences: {
       // 允许跨域
       webSecurity: false,
@@ -30,10 +38,15 @@ function createWindow () {
     },
   })
 
+  // 配置ESC键退出全屏
+  // globalShortcut.register('ESC', () => {
+  //   mainWindow.setFullScreen(false)
+  // })
+
   mainWindow.loadURL(winURL)
 
- /* mainWindow.setFullScreen(true);
-  mainWindow.setSimpleFullScreen(true);*/
+  //进入软件即开启全屏
+  mainWindow.setFullScreen(true)
 
   // mainWindow.webContents.openDevTools();
 
@@ -59,3 +72,13 @@ app.on('activate', () => {
     createWindow()
   }
 })
+
+// 最小化窗口
+ipc.on('window-min',function(){
+  mainWindow.minimize()
+})
+
+// 关闭窗口
+ipc.on('window-close',function() {
+  mainWindow.close()
+})

src/renderer/App.vue

@@ -39,7 +39,3 @@
 <style>
 
 </style>
-
-
-
-

src/renderer/assets/less/mainpage.less

@@ -82,4 +82,33 @@
     top: 10px;
     right: 10px;
   }
+
+  // 最小化和关闭按钮
+  .mini {
+    .miniclose(30px,20px);
+    &:hover {
+      background-color: #646464;
+    }
+  }
+  .close {
+    .miniclose(0,28px);
+    &:hover {
+      background-color: #646464;
+    }
+  }
+}
+
+// 带参数的混合
+.miniclose(@right,@fontSize) {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  top: 0;
+  right:@right;
+  text-align: center;
+  line-height: 30px;
+  font-size:@fontSize;
+  cursor:default;
+  font-weight: 600;
+  color: #d9d9d9;
 }

src/renderer/components/Admin.vue

@@ -5,10 +5,10 @@
         <div
                 :style="{
                 position: 'relative',
-                left:windowJson[0].Left+'px',
-                top:windowJson[0].Top+'px',
-                width:windowJson[0].Width + 'px',
-                height:windowJson[0].Height + 'px',
+                left:windowJson[0].Left*Scale+'px',
+                top:windowJson[0].Top*Scale+'px',
+                width:windowJson[0].Width*Scale + 'px',
+                height:windowJson[0].Height*Scale + 'px',
                 zIndex:windowJson[0].ZIndex,
                 display:windowJson[0].IsVisibility ? 'block' : 'none',
                 backgroundImage:windowJson[0].BackIcon ? 'url('+require(`../../../static/images/${windowJson[0].BackIcon}`)+')' : null,
@@ -56,12 +56,15 @@
 
             <button class="logoutBtn" @click="logout">退出</button>
         </div>
+        <!--最小化和关闭按钮-->
+        <div class="mini" @click="miniWindow">－</div>
+        <div class="close" @click="closeWindow">×</div>
     </div>
 </template>
 
 <script>
-    import {mapState} from 'vuex'
     import '../assets/less/mainpage.less'
+    import {mapState} from 'vuex'
     import storageUtils from "../../utils/storageUtils"
 
     import ButtonComponent from './Button'
@@ -82,7 +85,7 @@
             SliderComponent
         },
 
-        mounted(){
+        mounted() {
           this.fullScreen()
         },
 
@@ -112,11 +115,21 @@
                 } else if (de.webkitRequestFullScreen) {
                     de.webkitRequestFullScreen()
                 }
+            },
+
+            // 最小化窗口
+            miniWindow() {
+                require('electron').ipcRenderer.send('window-min')
+            },
+
+            // 关闭窗口
+            closeWindow() {
+                require('electron').ipcRenderer.send('window-close')
             }
         },
 
         computed: {
-            ...mapState(['windowJson'])
+            ...mapState(['windowJson','Scale'])
         }
     }
 </script>

src/renderer/components/BigShow.vue

@@ -3,9 +3,9 @@
 <template>
     <div>
         <draggable
-                :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                 v-for="item in bigScreenJson"
                 element="div"
+                :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                 v-model="signalPreList"
                 :options="dragOptions2"
                 :move="onMove"
@@ -13,10 +13,10 @@
                 @end="isDragging=false"
                 ref="bigscreen"
                 :style="{
-                    width:item.Width + 'px',
-                    height:item.Height + 'px',
-                    left:item.Left+'px',
-                    top:item.Top+'px',
+                    width:item.Width*Scale + 'px',
+                    height:item.Height*Scale + 'px',
+                    left:item.Left*Scale+'px',
+                    top:item.Top*Scale+'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'black' : 'none',
                 }"
@@ -27,10 +27,9 @@
                 <div class="doubleArrow"></div>
             </div>-->
 
-
             <VueDragResize
                     v-for="itemV in signalPreList" :key="itemV.deviceID" class="sitem" ref="signal"
-                    :w="item.Width/(splitScreenStatus+1)" :h="item.Height/(splitScreenStatus+1)"
+                    :w="item.Width*Scale/(splitScreenStatus+1)" :h="item.Height*Scale/(splitScreenStatus+1)"
             >
                 {{itemV.showName}}
             </VueDragResize >
@@ -116,7 +115,7 @@
         },
 
         computed: {
-            ...mapState(['bigScreenJson','splitScreenStatus']),
+            ...mapState(['bigScreenJson','splitScreenStatus','Scale']),
 
             signalPreList: {
                 get() {

src/renderer/components/Button.vue

@@ -5,19 +5,19 @@
         <div v-for="item in buttonJson"
              :style="{
                     position:'absolute',
-                    left:item.Left+'px',
-                    top:item.Top+'px',
-                    width:item.Width + 'px',
-                    height:item.Height + 'px',
+                    left:item.Left*Scale+'px',
+                    top:item.Top*Scale+'px',
+                    width:item.Width*Scale + 'px',
+                    height:item.Height*Scale + 'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
-                    fontSize:item.FontSize + 'px',
+                    fontSize:item.FontSize*Scale + 'px',
                     backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                     backgroundSize:'100% 100%',
                     backgroundRepeat:'no-repeat',
                     color:`#${item.ForegroundStr.slice(3)}`,
                     textAlign:'center',
-                    lineHeight:item.Height + 'px',
+                    lineHeight:item.Height*Scale + 'px',
                     cursor:'default'
                 }"
              :ref="item.ID"
@@ -63,7 +63,7 @@
         },
 
         computed: {
-            ...mapState(['buttonJson','labelJson','sliderJson']),
+            ...mapState(['buttonJson','labelJson','sliderJson','Scale']),
         },
 
         methods: {

src/renderer/components/Image.vue

@@ -5,10 +5,10 @@
         <div v-for="item in imageJson"
              :style="{
                     position:'absolute',
-                    left:item.Left+'px',
-                    top:item.Top+'px',
-                    width:item.Width + 'px',
-                    height:item.Height + 'px',
+                    left:item.Left*Scale+'px',
+                    top:item.Top*Scale+'px',
+                    width:item.Width*Scale + 'px',
+                    height:item.Height*Scale + 'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
                     backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
@@ -26,7 +26,7 @@
     export default {
 
         computed: {
-            ...mapState(['imageJson'])
+            ...mapState(['imageJson','Scale'])
         }
     }
 </script>

src/renderer/components/Label.vue

@@ -4,17 +4,17 @@
     <div>
         <label v-for="item in labelJson"
                :style="{
-                 fontSize:item.FontSize + 'px',
+                 fontSize:item.FontSize*Scale + 'px',
                  position:'absolute',
-                 left:item.Left+'px',
-                 top:item.Top+'px',
-                 width:item.Width + 'px',
-                 height:item.Height + 'px',
+                 left:item.Left*Scale+'px',
+                 top:item.Top*Scale+'px',
+                 width:item.Width*Scale + 'px',
+                 height:item.Height*Scale + 'px',
                  zIndex:item.ZIndex,
                  display:item.IsVisibility ? 'block' : 'none',
                  color:`#${item.ForegroundStr.slice(3)}`,
                  textAlign:'center',
-                 lineHeight:item.Height + 'px',
+                 lineHeight:item.Height*Scale + 'px',
             }">
             {{item.Text}}
         </label>
@@ -32,7 +32,7 @@
         },
 
         computed: {
-            ...mapState(['labelJson']),
+            ...mapState(['labelJson','Scale']),
         },
 
         methods: {

src/renderer/components/SignalList.vue

@@ -1,13 +1,13 @@
 <template>
     <draggable
             :style="{
-                left:signalBorder[0].Left+'px',
-                top:signalBorder[0].Top+'px',
-                width:signalBorder[0].Width + 'px',
-                height:signalBorder[0].Height + 'px',
+                left:signalBorder[0].Left*Scale+'px',
+                top:signalBorder[0].Top*Scale+'px',
+                width:signalBorder[0].Width*Scale + 'px',
+                height:signalBorder[0].Height*Scale + 'px',
                 zIndex:signalBorder[0].ZIndex,
                 display:signalBorder[0].IsVisibility ? 'block' : 'none',
-                fontSize:signalBorder[0].FontSize + 'px',
+                fontSize:signalBorder[0].FontSize*Scale + 'px',
                 color:`#${signalBorder[0].ForegroundStr.slice(3)}`,
                 position:'absolute',
                 overflow:'auto',
@@ -53,7 +53,7 @@
         },
 
         computed: {
-            ...mapState(['signalListJson','signalBorder']),
+            ...mapState(['signalListJson','signalBorder','Scale']),
             dragOptions1() {
                 return {
                     animation: 0,

src/renderer/components/Slider.vue

@@ -5,10 +5,10 @@
         <div v-for="item in sliderJson"
              :style="{
                     position:'absolute',
-                    left:item.Left+'px',
-                    top:item.Top+'px',
-                    width:item.Width + 'px',
-                    height:item.Height + 'px',
+                    left:item.Left*Scale+'px',
+                    top:item.Top*Scale+'px',
+                    width:item.Width*Scale + 'px',
+                    height:item.Height*Scale + 'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
                     backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
@@ -17,17 +17,17 @@
         >
             <div
                     :style="{
-                           width:item.imgBgWidth + 'px',
-                           height:item.imgBgHeight + 'px',
+                           width:item.imgBgWidth*Scale + 'px',
+                           height:item.imgBgHeight*Scale + 'px',
                         }"
             >
                 <div
                         :style="{
-                            width:item.imgSliderWidth + 'px',
-                            height:item.imgSliderHeight + 'px',
+                            width:item.imgSliderWidth*Scale + 'px',
+                            height:item.imgSliderHeight*Scale + 'px',
                             backgroundImage:'url('+require(`../../../static/images/${item.SliderIcon}`)+')',
                             backgroundRepeat:'no-repeat',
-                            marginLeft:'22px',
+                            marginLeft:'40%',
                         }"
                         @click="clickBtn(item)"
                 >
@@ -43,7 +43,7 @@
 
     export default {
         computed: {
-            ...mapState(['sliderJson']),
+            ...mapState(['sliderJson','Scale']),
         }
     }
 </script>

src/renderer/store/state.js

@@ -51,4 +51,8 @@ export default {
 
   // ip 端口
   systemJson,
+
+  // 主页宽高比例
+  // Scale:screen.getPrimaryDisplay().workAreaSize.height/windowJson[0].Height
+  Scale:window.screen.height/windowJson[0].Height
 }