优化报警小图标样式及拖拽功能

src/components/alarm-badge/index.vue

@@ -1,17 +1,16 @@
 <template>
-  <div></div>
   <div
     draggable="true"
     @dragstart="startDrag"
     @dragend="stopDrag"
-    :style="{ left: x + 'px', top: y + 'px' }"
+    :style="{ right: x + 'px', bottom: y + 'px' }"
     style="cursor: pointer; position: absolute; z-index: 999"
   >
     <el-badge
       :value="warnLength"
       :class="{ active: warnLength && !displayAlarms ? false : true }"
     >
-      <div class="alarmDeligo" @click="displayAlarm" v-if="warnLength" >
+      <div class="alarmDeligo" @click="displayAlarm" v-if="warnLength">
         <img src="@assets/imgs/ygj.png" class="trans" />
         <img src="@assets/imgs/ygj1.png" />
       </div>
@@ -152,8 +151,8 @@ export default {
   },
   created() {
     this.getAlarmConfig();
-    this.x = window.innerWidth - 82;
-    this.y = window.innerHeight - 32;
+    this.x = 80;
+    this.y = 80;
     let requestResult = [];
     this.requestAlarmHistoryParams.forEach(({ alarmType, deviceType }) => {
       requestResult.push(this.getAlarmHistory(alarmType, deviceType));
@@ -506,18 +505,16 @@ export default {
     stopDrag(event) {
       let x = event.clientX - this.currentX;
       let y = event.clientY - this.currentY;
-      this.x += x;
-      //   if (this.x < 60) {
-      //     this.x = 60;
-      //   } else if (this.x > window.innerWidth - 20) {
-      //     this.x = window.innerWidth - 82;
-      //   }
-      this.y += y;
-      //   if (this.y > window.innerHeight - 20) {
-      //     this.y = window.innerHeight - 32;
-      //   } else if (this.y < 0) {
-      //     this.y = 0;
-      //   }
+      if (event.clientX <= 80 || event.clientX >= window.innerWidth - 40) {
+        this.x = this.x;
+      } else {
+        this.x -= x;
+      }
+      if (event.clientY <= 70 || event.clientY >= window.innerHeight - 60) {
+        this.y = this.y;
+      } else {
+        this.y -= y;
+      }
     },
     //开关列表
     displayAlarm(val) {