From aa1c8a13956a77a668d35ec5be7b55c46544631b Mon Sep 17 00:00:00 2001
From: tdg930622 <51816549+tdg930622@users.noreply.github.com>
Date: Mon, 6 Jan 2025 16:48:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=88=BF=E9=97=B4=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mediation-page/components/VideoRoom.vue   | 102 ++++++++++++++++++
 .../components/caseVideoReservationDialog.vue |  30 ++++--
 2 files changed, 122 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/mediation-page/components/VideoRoom.vue

diff --git a/src/pages/mediation-page/components/VideoRoom.vue b/src/pages/mediation-page/components/VideoRoom.vue
new file mode 100644
index 0000000..70ce844
--- /dev/null
+++ b/src/pages/mediation-page/components/VideoRoom.vue
@@ -0,0 +1,102 @@
+<template>
+  <div
+      :style="contentStyle"
+      class="content"
+      @mousedown="startDrag"
+      @mouseup="stopDrag"
+      @mouseleave="stopDrag">
+    <div class="drag-div" @mousedown.stop="startDrag"></div>
+    <div>Other content</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      position: { x: 0, y: 0 },
+      dragging: false,
+      offsetX: 0,
+      offsetY: 0,
+      mouseMoveHandler: null,
+      mouseUpHandler: null
+    };
+  },
+  computed: {
+    contentStyle() {
+      return {
+        left: `${this.position.x}px`,
+        top: `${this.position.y}px`,
+      };
+    }
+  },
+  methods: {
+    startDrag(event) {
+      event.preventDefault();
+
+      if (!event.target.closest('.drag-div')) return;
+
+      this.dragging = true;
+      this.offsetX = event.clientX - this.position.x;
+      this.offsetY = event.clientY - this.position.y;
+
+      this.removeEventListeners();
+
+      this.mouseMoveHandler = this.onMouseMove.bind(this);
+      this.mouseUpHandler = this.stopDrag.bind(this);
+
+      document.addEventListener('mousemove', this.mouseMoveHandler, true);
+      document.addEventListener('mouseup', this.mouseUpHandler, true);
+    },
+    onMouseMove(event) {
+      if (this.dragging) {
+        requestAnimationFrame(() => {
+          this.updatePosition(event.clientX, event.clientY);
+        });
+      }
+    },
+    updatePosition(clientX, clientY) {
+      this.position.x = clientX - this.offsetX;
+      this.position.y = clientY - this.offsetY;
+
+      this.$forceUpdate();
+    },
+    stopDrag() {
+      this.dragging = false;
+      this.removeEventListeners();
+    },
+    removeEventListeners() {
+      if (this.mouseMoveHandler) {
+        document.removeEventListener('mousemove', this.mouseMoveHandler, true);
+      }
+      if (this.mouseUpHandler) {
+        document.removeEventListener('mouseup', this.mouseUpHandler, true);
+      }
+    }
+  },
+  destroyed() {
+    this.removeEventListeners();
+  }
+};
+</script>
+
+<style scoped>
+.content {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.drag-div {
+  width: 50px;
+  height: 50px;
+  background-color: #f00;
+  text-align: center;
+  line-height: 50px;
+  color: white;
+  cursor: grab;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/mediation-page/components/caseVideoReservationDialog.vue b/src/pages/mediation-page/components/caseVideoReservationDialog.vue
index 55375d1..7748ec4 100644
--- a/src/pages/mediation-page/components/caseVideoReservationDialog.vue
+++ b/src/pages/mediation-page/components/caseVideoReservationDialog.vue
@@ -17,16 +17,19 @@
              @click="VideoDialog={caseId:visiblePopover.caseId}">新增预约</div>
       </div>
       <div class="p-16 border-radius-8 border-solid-lighter-1">
-        <el-scrollbar :style="'height: 132px'">
+        <el-scrollbar :style="'height: 130px'">
           <div class="pb-6 pt-6 bor-E5E6EB" v-for="(item, index) in videoTableData" :key="index">
             <div class="flex-row align-items-center">
-              <div class="mr-8 color-000 f-weight600 f16">{{item.pkgName}} {{item.bookingTime}}</div>
-              <el-tag size="small">待视频</el-tag>
+              <div class="mr-8 color-000 f-weight600 f16">{{item.name}} {{item.bookingTime}}</div>
+              <el-tag size="small" :type="queryCondition.type?'success':''">{{ queryCondition.type ? '已视频' : '待视频' }}</el-tag>
             </div>
             <div class="flex-row justify-content-between align-items-center">
-              <div class="f12">{{item.invitee}}</div>
+              <div class="f12">{{item.content}}</div>
               <div class="flex-row align-items-center">
-                <div class="f16 mr-8 cursor-pointer"><i class="el-icon-video-camera"></i></div>
+                <div class="f16 mr-8 cursor-pointer"
+                     @click="handleVideoCall">
+                  <i class="el-icon-video-camera"></i>
+                </div>
                 <div class="f16 mr-8 cursor-pointer"
                      @click="VideoEditDialog={id:item.id, bookingTime:item.bookingTime}">
                   <i class="el-icon-edit-outline"></i>
@@ -42,20 +45,22 @@
     </div>
 
     <!-- 视频预约 -->
-    <VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog"/>
+    <VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog" />
     <!--  视频预约修改  -->
-    <videoReservationEditDialog v-if="VideoEditDialog" :eventDialog.sync="VideoEditDialog"  />
+    <videoReservationEditDialog v-if="VideoEditDialog" :eventDialog.sync="VideoEditDialog" />
+    <!--  视频房间  -->
+    <VideoRoom v-if="VideoCallDialog" :eventDialog.sync="VideoCallDialog" />
   </div>
 </template>
 
 <script>
-import eventTracingApi from "@/services/eventTracingApi";
 import videoTelephone from "@/services/videoTelephone";
 export default {
   name: "caseVideoReservationDialog",
   components: {
     VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
     videoReservationEditDialog: () => import('../../event-tracing/components/videoReservationDialog'),//视频预约修改
+    VideoRoom: () => import('./VideoRoom'),
   },
   props: {
     visiblePopover: {
@@ -79,6 +84,7 @@ export default {
       videoTableData: [],
       VideoDialog: null,
       VideoEditDialog: null,
+      VideoCallDialog: null
     }
   },
   mounted() {
@@ -100,8 +106,7 @@ export default {
       }
       videoTelephone.getListByCaseId(dataJson).then(res => {
         if (!res.code) {
-          this.videoTableData = res.records;
-          // this.total = res.total;
+          this.videoTableData = res;
         }
       })
     },
@@ -119,6 +124,11 @@ export default {
         });
       }).catch(() => {});
     },
+    handleVideoCall(item) {
+      this.VideoCallDialog = {
+        id: item.id
+      }
+    },
   }
 }
 </script>