获取屏幕信息

electron/ipc/example.js

@@ -9,7 +9,7 @@
  * @param arg 接收到的消息
  */
 
-const {app, dialog, BrowserWindow, BrowserView, Notification, powerMonitor} = require('electron');
+const {app, dialog, BrowserWindow, BrowserView, Notification, powerMonitor, screen} = require('electron');
 const path = require('path');
 const _ = require('lodash');
 
@@ -108,7 +108,7 @@ exports.removeViewContent = function () {
 /**
  * 打开新窗口
  */
- exports.createWindow = function (event, channel, arg) {
+exports.createWindow = function (event, channel, arg) {
   let content = null;
   if (arg.type == 'html') {
     content = path.join('file://', app.getAppPath(), arg.content)
@@ -130,7 +130,7 @@ exports.removeViewContent = function () {
 /**
  * 创建系统通知
  */
- exports.sendNotification = function (event, channel, arg) {
+exports.sendNotification = function (event, channel, arg) {
   if (!Notification.isSupported()) {
     return '当前系统不支持通知';
   }
@@ -213,4 +213,69 @@ exports.initPowerMonitor = function (event, channel, arg) {
   });
 
   return true
+}
+
+/**
+ * 获取屏幕信息
+ */
+exports.getScreen = function (event, channel, arg) {
+
+  let data = [];
+  let res = {};
+  if (arg == 0) {
+    let res = screen.getCursorScreenPoint();
+    data = [
+      {
+        title: '横坐标',
+        desc: res.x
+      },
+      {
+        title: '纵坐标',
+        desc: res.y
+      },
+    ]
+    
+    return data;
+  }
+  if (arg == 1) {
+    res = screen.getPrimaryDisplay();
+  }
+  if (arg == 2) {
+    let resArr = screen.getAllDisplays();
+    // 数组，只取一个吧
+    res = resArr[0];
+  }
+  // console.log('[electron] [ipc] [example] [getScreen] res:', res);
+  data = [
+    {
+      title: '分辨率',
+      desc: res.bounds.width + ' x ' + res.bounds.height
+    },
+    {
+      title: '单色显示器',
+      desc: res.monochrome ? '是' : '否'
+    },
+    {
+      title: '色深',
+      desc: res. colorDepth
+    },
+    {
+      title: '色域',
+      desc: res.colorSpace
+    },
+    {
+      title: 'scaleFactor',
+      desc: res.scaleFactor
+    },
+    {
+      title: '加速器',
+      desc: res.accelerometerSupport
+    },
+    {
+      title: '触控',
+      desc: res.touchSupport == 'unknown' ? '不支持' : '支持'
+    },
+  ]
+
+  return data;
 }

frontend/src/config/router.config.js

@@ -47,7 +47,12 @@ export const constantRouterMap = [
             path: '/demo/powermonitor/index',
             name: 'DemoPowerMonitorIndex',
             component: () => import('@/views/demo/powermonitor/Index')
-          },                 
+          },
+          {
+            path: '/demo/screen/index',
+            name: 'DemoScreenIndex',
+            component: () => import('@/views/demo/screen/Index')
+          },                       
           {
             path: '/demo/shortcut/index',
             name: 'DemoShortcutIndex',

frontend/src/layouts/DemoMenu.vue

@@ -59,7 +59,13 @@ export default {
           title: '电源监控',
           pageName: 'DemoPowerMonitorIndex',
           params: {}
-        },        
+        },
+        'menu_404' : {
+          icon: 'profile',
+          title: '屏幕信息',
+          pageName: 'DemoScreenIndex',
+          params: {}
+        },      
         'menu_500' : {
           icon: 'profile',
           title: '软件调用',

frontend/src/views/demo/notification/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app-demo-window-view">
+  <div id="app-demo-notification">
     <div class="one-block-1">
       <span>
         1. 弹出桌面通知
@@ -72,7 +72,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-#app-demo-window-view {
+#app-demo-notification {
   padding: 0px 10px;
   text-align: left;
   width: 100%;

frontend/src/views/demo/powermonitor/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app-demo-window-view">
+  <div id="app-demo-powermonitor">
     <div class="one-block-1">
       <span>
         1. 监控电源状态
@@ -42,7 +42,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-#app-demo-window-view {
+#app-demo-powermonitor {
   padding: 0px 10px;
   text-align: left;
   width: 100%;

frontend/src/views/demo/screen/Index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div id="app-demo-screen">
+    <div class="one-block-1">
+      <span>
+        1. 屏幕信息
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="getScreen(0)">获取当前鼠标位置</a-button>
+        <a-button @click="getScreen(1)">获取主屏幕</a-button>
+        <a-button @click="getScreen(2)">获取所有屏幕</a-button>
+      </a-space>
+    </div>
+    <div class="one-block-1">
+      <span>
+        结果：
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-descriptions title="">
+        <a-descriptions-item v-for="(info, index) in data" :key="index" :label="info.title" >
+          {{ info.desc }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      data: [],
+    };
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+    init () {
+      const self = this;
+      self.$ipc.on('example.getScreen', (event, result) => {
+        self.data = result;
+      })
+    },
+    getScreen (index) {
+      this.$ipc.send('example.getScreen', index);
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+#app-demo-screen {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>

frontend/src/views/demo/window/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app-demo-window-view">
+  <div id="app-demo-window">
     <div class="one-block-1">
       <span>
         1. 新窗口中加载web内容
@@ -50,7 +50,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-#app-demo-window-view {
+#app-demo-window {
   padding: 0px 10px;
   text-align: left;
   width: 100%;