实现1分屏4分屏功能

.idea/workspace.xml

@@ -17,34 +17,36 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="FileEditorManager">
-    <leaf>
-      <file pinned="false" current-in-tab="false">
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
+      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/renderer/components/Admin.vue">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="378">
-              <caret line="38" column="73" selection-start-line="38" selection-start-column="73" selection-end-line="38" selection-end-column="73" />
+            <state relative-caret-position="336">
+              <caret line="66" column="22" lean-forward="true" selection-start-line="66" selection-start-column="22" selection-end-line="66" selection-end-column="22" />
               <folding>
-                <element signature="n#div#0;n#div#0;n#template#0;n#!!top" />
-                <element signature="n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" />
-                <element signature="n#div#0;n#div#1;n#div#0;n#template#0;n#!!top" />
                 <element signature="n#div#0;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#draggable#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#0;n#draggable#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
                 <element signature="n#div#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
                 <element signature="n#div#0;n#div#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
                 <element signature="n#div#1;n#div#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
-                <element signature="n#div#2;n#div#1;n#div#0;n#template#0;n#!!top" />
-                <element signature="n#div#2;n#div#0;n#template#0;n#!!top" />
-                <element signature="n#script#0;n#!!top" />
-                <element signature="n#style#0;n#!!top" />
+                <element signature="n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#0;n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#draggable#0;n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#0;n#draggable#0;n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#0;n#div#0;n#draggable#0;n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#0;n#div#0;n#div#0;n#draggable#0;n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/admin.less">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="454">
-              <caret line="82" column="10" lean-forward="true" selection-start-line="82" selection-start-column="10" selection-end-line="82" selection-end-column="10" />
+            <state relative-caret-position="1239">
+              <caret line="93" column="27" selection-start-line="93" selection-start-column="27" selection-end-line="93" selection-end-column="27" />
               <folding>
                 <element signature="e#168#206#0" />
                 <element signature="e#321#580#0" />
@@ -52,20 +54,6 @@
                 <element signature="e#744#1149#0" />
                 <element signature="e#957#993#0" />
                 <element signature="e#1049#1141#0" />
-                <element signature="e#1513#2004#0" />
-                <element signature="e#1640#1844#0" />
-                <element signature="e#1887#1994#0" />
-                <element signature="e#2051#3638#0" />
-                <element signature="e#2251#2311#0" />
-                <element signature="e#2349#3629#0" />
-                <element signature="e#2439#3618#0" />
-                <element signature="e#2638#3606#0" />
-                <element signature="e#2820#2897#0" />
-                <element signature="e#2955#3592#0" />
-                <element signature="e#3140#3296#0" />
-                <element signature="e#3362#3576#0" />
-                <element signature="e#3676#3759#0" />
-                <element signature="e#3790#3828#0" />
               </folding>
             </state>
           </provider>
@@ -107,12 +95,12 @@
         <option value="$PROJECT_DIR$/src/index.ejs" />
         <option value="$PROJECT_DIR$/src/renderer/App.vue" />
         <option value="$PROJECT_DIR$/package.json" />
-        <option value="$PROJECT_DIR$/src/renderer/components/Admin.vue" />
         <option value="$PROJECT_DIR$/src/renderer/assets/less/admin.less" />
+        <option value="$PROJECT_DIR$/src/renderer/components/Admin.vue" />
       </list>
     </option>
   </component>
-  <component name="ProjectFrameBounds" extendedState="6">
+  <component name="ProjectFrameBounds" extendedState="7">
     <option name="x" value="-8" />
     <option name="y" value="-8" />
     <option name="width" value="1366" />
@@ -126,36 +114,8 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
-      <pane id="ProjectPane">
-        <subPane>
-          <expand>
-            <path>
-              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
-              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
-              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
-              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="renderer" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
-              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="renderer" type="462c0819:PsiDirectoryNode" />
-              <item name="components" type="462c0819:PsiDirectoryNode" />
-            </path>
-          </expand>
-          <select />
-        </subPane>
-      </pane>
       <pane id="Scope" />
+      <pane id="ProjectPane" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -168,14 +128,14 @@
     <property name="prettierjs.PrettierConfiguration.Package" value="C:\Users\liuwei\Desktop\桌面程序\electron-app\node_modules\prettier" />
   </component>
   <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\liuwei\Desktop\桌面程序\electron-app\src\renderer\assets\images" />
+    </key>
     <key name="CopyFile.RECENT_KEYS">
       <recent name="C:\Users\liuwei\Desktop\桌面程序\electron-app\src" />
       <recent name="C:\Users\liuwei\Desktop\桌面程序\electron-app\src\renderer\store" />
       <recent name="C:\Users\liuwei\Desktop\桌面程序\electron-app\src\renderer\assets\images" />
     </key>
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="C:\Users\liuwei\Desktop\桌面程序\electron-app\src\renderer\assets\images" />
-    </key>
   </component>
   <component name="RunDashboard">
     <option name="ruleStates">
@@ -210,12 +170,14 @@
       <workItem from="1585578436413" duration="2728000" />
       <workItem from="1585620225944" duration="16578000" />
       <workItem from="1585806030504" duration="10699000" />
-      <workItem from="1585833443100" duration="3468000" />
+      <workItem from="1585833443100" duration="3604000" />
+      <workItem from="1585894371150" duration="9717000" />
+      <workItem from="1585907669831" duration="14000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="64453000" />
+    <option name="totallyTimeSpent" value="74320000" />
   </component>
   <component name="TodoView">
     <todo-panel id="selected-file">
@@ -244,7 +206,7 @@
       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" order="8" />
       <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" weight="0.32910052" />
-      <window_info anchor="bottom" id="Terminal" order="10" weight="0.45396826" />
+      <window_info anchor="bottom" id="Terminal" order="10" weight="0.45185184" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
@@ -481,28 +443,30 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/renderer/components/Admin.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="378">
-          <caret line="38" column="73" selection-start-line="38" selection-start-column="73" selection-end-line="38" selection-end-column="73" />
+        <state relative-caret-position="336">
+          <caret line="66" column="22" lean-forward="true" selection-start-line="66" selection-start-column="22" selection-end-line="66" selection-end-column="22" />
           <folding>
-            <element signature="n#div#0;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#div#0;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#0;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#draggable#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#div#0;n#draggable#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#0;n#div#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#1;n#div#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#div#2;n#div#1;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#div#2;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#script#0;n#!!top" />
-            <element signature="n#style#0;n#!!top" />
+            <element signature="n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#div#0;n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#draggable#0;n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#div#0;n#draggable#0;n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#div#0;n#div#0;n#draggable#0;n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+            <element signature="n#div#0;n#div#0;n#div#0;n#draggable#0;n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
           </folding>
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/admin.less">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="454">
-          <caret line="82" column="10" lean-forward="true" selection-start-line="82" selection-start-column="10" selection-end-line="82" selection-end-column="10" />
+        <state relative-caret-position="1239">
+          <caret line="93" column="27" selection-start-line="93" selection-start-column="27" selection-end-line="93" selection-end-column="27" />
           <folding>
             <element signature="e#168#206#0" />
             <element signature="e#321#580#0" />
@@ -510,20 +474,6 @@
             <element signature="e#744#1149#0" />
             <element signature="e#957#993#0" />
             <element signature="e#1049#1141#0" />
-            <element signature="e#1513#2004#0" />
-            <element signature="e#1640#1844#0" />
-            <element signature="e#1887#1994#0" />
-            <element signature="e#2051#3638#0" />
-            <element signature="e#2251#2311#0" />
-            <element signature="e#2349#3629#0" />
-            <element signature="e#2439#3618#0" />
-            <element signature="e#2638#3606#0" />
-            <element signature="e#2820#2897#0" />
-            <element signature="e#2955#3592#0" />
-            <element signature="e#3140#3296#0" />
-            <element signature="e#3362#3576#0" />
-            <element signature="e#3676#3759#0" />
-            <element signature="e#3790#3828#0" />
           </folding>
         </state>
       </provider>

src/renderer/assets/less/admin.less

@@ -77,13 +77,31 @@
           background-color: #000000;
           box-sizing: border-box;
           border: 4px solid skyblue;
+          overflow: hidden;
+          color:#ffffff;
+          font-size:50px;
+
+          /*分屏项*/
+          .item {
+            border: 1px solid #fff;
+            color:#fff;
+            font-size:50px;
+            background-color: #717171;
+          }
+        }
 
-          /*1分屏*/
-
+        /*1分屏*/
+        .split_screen_one {
+          display: grid;
+          grid-template-columns: repeat(1,100%);
+          grid-template-rows: repeat(1,100%);
+        }
 
-          /*4分屏*/
-          /*9分屏*/
-          /*16分屏*/
+        /*4分屏*/
+        .split_screen_four {
+          display: grid;
+          grid-template-columns: repeat(2,50%);
+          grid-template-rows: repeat(2,50%);
         }
 
         /*控制按钮*/
@@ -179,7 +197,6 @@
         }
 
       }
-
     }
 
     /*底部功能菜单*/

src/renderer/components/Admin.vue

@@ -28,7 +28,7 @@
                 </div>
                 <div class="bigscreen_control">
                     <draggable
-                            class="split_screen"
+                            :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : 'split_screen_four']"
                             element="div"
                             v-model="signalList"
                             :options="dragOptions2"
@@ -36,9 +36,14 @@
                             @start="isDragging=true"
                             @end="isDragging=false"
                     >
-                        <div v-for="(item,key) in signalList" :key="key" >
+                        <div v-for="(item,key) in signalList" :key="key" class="item">
                             {{item.name}}
                         </div>
+
+                        <!--<div class="item">PC1</div>
+                        <div class="item">PC2</div>
+                        <div class="item">PC3</div>
+                        <div class="item">PC4</div>-->
                     </draggable>
 
                     <!--<div class="split_screen">
@@ -47,11 +52,11 @@
                     <div class="control_btns">
                         <!--分屏按钮-->
                         <div class="split_btns">
-                            <el-button type="success">自由屏</el-button>
-                            <el-button type="success">四分屏</el-button>
-                            <el-button type="success">九分屏</el-button>
-                            <el-button type="success">十六分屏</el-button>
-                            <el-button type="success">清屏</el-button>
+                            <el-button type="success" @click="spiltScreenOperation(0)">自由屏</el-button>
+                            <el-button type="success" @click="spiltScreenOperation(1)">四分屏</el-button>
+                            <el-button type="success" @click="spiltScreenOperation(2)">九分屏</el-button>
+                            <el-button type="success" @click="spiltScreenOperation(3)">十六分屏</el-button>
+                            <el-button type="success" @click="clearScreen">清屏</el-button>
                         </div>
 
                         <!--其他按钮-->
@@ -118,6 +123,7 @@
                 user:storageUtils.getUser(),
                 signalList:[],  // 被拖到大屏中的信号源列表
                 isDragging:false,
+                splitScreenStatus:0,// 分屏状态（默认0: 自由屏，1: 4分屏  2：9分屏  3: 16分屏）
             }
         },
         methods: {
@@ -132,8 +138,19 @@
                 const draggedElement = draggedContext.element;
                 return (
                     (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
-                );
+                )
+            },
+
+            // 清屏操作
+            clearScreen() {
+                this.signalList = []
             },
+
+            // 分屏操作
+            spiltScreenOperation(status) {
+                this.splitScreenStatus = status
+                this.signalList = []
+            }
         },
         computed: {
             ...mapState(['deviceList']),
@@ -153,34 +170,6 @@
                     animation: 0,
                     group: "description",
                 }
-            },
-        },
-        directives: {
-            drag: {
-                // 指令的定义
-                inserted: function (el) {
-                    el.onmousedown = function (e) {
-                        //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
-                        let divx = e.clientX - el.offsetLeft
-                        let divy = e.clientY - el.offsetTop
-                        //包含在onmousedown里，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
-                        document.onmousemove = function (e) {
-                            //获取移动后div的位置：鼠标位置-divx/divy
-                            let l = e.clientX - divx
-                            let t = e.clientY - divy
-                            el.style.left = l + 'px'
-                            el.style.top = t + 'px'
-
-                            console.log(el)
-                        }
-                        document.onmouseup = function (e) {
-                            document.onmousemove = null
-                            document.onmouseup = null
-
-                            console.log(e)
-                        }
-                    }
-                }
             }
         }
     }
@@ -208,12 +197,3 @@
 
 
 
-
-
-
-
-
-
-
-
-