From 434002b0ecf3d421b7f43ca2487fc854b924c11d Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Fri, 2 Jul 2021 09:33:09 +0800
Subject: [PATCH] =?UTF-8?q?add=E5=BA=95=E5=B1=82=E7=BD=91=E6=A0=BC?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/report/bigscreen/designer/index.vue | 27 +++++++++++++++++--
 .../bigscreen/designer/widget/widget.vue      |  1 +
 .../bigscreen/designer/widget/widgetImage.vue |  1 -
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/report-ui/src/views/report/bigscreen/designer/index.vue b/report-ui/src/views/report/bigscreen/designer/index.vue
index a5288d2f..5a5ce275 100644
--- a/report-ui/src/views/report/bigscreen/designer/index.vue
+++ b/report-ui/src/views/report/bigscreen/designer/index.vue
@@ -153,6 +153,7 @@
             }"
             @click.self="setOptionsOnClickScreen"
           >
+            <div v-if="grade" class="bg-grid"></div>
             <widget
               ref="widgets"
               v-for="(widget, index) in widgets"
@@ -164,6 +165,7 @@
               @onActivated="setOptionsOnClickWidget"
               @contextmenu.prevent.native="rightClick($event, index)"
               @mousedown.prevent.native="widgetsClick(index)"
+              @mouseup.prevent.native="widgetsMouseup"
             />
           </div>
         </vue-ruler-tool>
@@ -242,6 +244,7 @@ export default {
   },
   data() {
     return {
+      grade: false,
       layerWidget: [],
       widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
       widthLeftForTools: 200, // 左侧工具栏宽度
@@ -355,6 +358,10 @@ export default {
     // 如果是新的设计工作台
     this.initEchartData();
     this.widgets = [];
+
+    window.addEventListener("mouseup", () => {
+      this.grade = false;
+    });
   },
   methods: {
     handlerLayerWidget(val) {
@@ -378,8 +385,6 @@ export default {
       if (code != 200) return;
       const processData = this.handleInitEchartsData(data);
       const screenData = this.handleBigScreen(data.dashboard);
-      console.log(screenData);
-      console.log(processData);
       this.widgets = processData;
       this.dashboard = screenData;
     },
@@ -618,6 +623,10 @@ export default {
         }
       }
       this.setOptionsOnClickWidget(index);
+      this.grade = true;
+    },
+    widgetsMouseup(e) {
+      this.grade = false;
     },
     handleMouseDown() {
       const draggableArr = this.$refs.widgets;
@@ -888,6 +897,20 @@ export default {
         margin: 0;
         padding: 0;
       }
+      .bg-grid {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-size: 30px 30px, 30px 30px;
+        background-image: linear-gradient(
+            hsla(0, 0%, 100%, 0.1) 1px,
+            transparent 0
+          ),
+          linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);
+        // z-index: 2;
+      }
     }
   }
 
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
index 729a5044..ef4627da 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
@@ -12,6 +12,7 @@
     :top="widgetsTop"
     ref="draggable"
     :index="index"
+    :z-index="-1"
     @focus="handleFocus"
     @blur="handleBlur"
   >
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetImage.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetImage.vue
index bab0c0ce..ee257739 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetImage.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetImage.vue
@@ -57,7 +57,6 @@ export default {
   watch: {
     value: {
       handler(val) {
-        console.log(val);
         this.options = val;
       },
       deep: true