From c670c0d30500fb7ee3c568efc3ec48debdfbecd7 Mon Sep 17 00:00:00 2001
From: chenll <huxin@123.com>
Date: Fri, 1 Aug 2025 22:53:19 +0800
Subject: [PATCH] =?UTF-8?q?=E7=83=AD=E5=8A=9B=E4=B8=8A=E5=9B=BE=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BDBUG=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dkl-vue3-ui-DP/src/components/call.vue | 108 +++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/components/call.vue

diff --git a/Dkl-vue3-ui-DP/src/components/call.vue b/Dkl-vue3-ui-DP/src/components/call.vue
new file mode 100644
index 0000000..12fb3a7
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/components/call.vue
@@ -0,0 +1,108 @@
+<template>
+  <div id="demo">
+    <iframe
+        src="https://10.22.245.209:18889/ktCallingSystem/wholeCallPage?agentId=1029&agentPwd=cinAgt123%23"
+        id="iframe"
+        style="width: 108plx; height: 108px; right: 20px; bottom: 20px"
+        allow="microphone;camera;midi;encrypted-media"
+        >
+    </iframe>
+    <el-button @click="call">拨打</el-button>
+  </div>
+</template>
+
+
+<script setup name="call">
+const props = defineProps({
+    listRows: {
+        required: true,
+        type: Object,
+        defult: {},
+    },
+    width: {
+        type: String,
+        defult: "",
+    },
+    height: {
+        type: String,
+        defult: "",
+    }
+});
+/**
+ * 监听iframe的消息
+ */
+window.addEventListener("message", function (msg) {
+  // 接受从iframe传来的消息
+  var data = msg.data;
+  if (data && typeof data === "string" && data.startsWith("{")) {
+    var dataObj = JSON.parse(data);
+    handleMessage(dataObj);
+  } else {
+    console.log("not a valid message");
+    console.log(data);
+  }
+});
+
+/**
+ * 消息处理
+ */
+function handleMessage(obj) {
+  console.log("receive message from iframe: ", obj);
+  var op = obj.op || "";
+  var value = obj.value || "";
+  const { width, height } = props;
+  switch (op) {
+    case "big_dialog": // 拨号、通话时窗口变大
+      var iframe = document.getElementById("iframe");
+      if(width || height) {
+        iframe.style.width = width;
+        iframe.style.height = height;
+      } else {
+        iframe.style.width = "1920px";
+        iframe.style.height = "1080px";
+        iframe.style.right = "0px";
+        iframe.style.bottom = "0px";
+      }
+      break;
+    case "small_dialog": // 返回电话盘
+      var iframe = document.getElementById("iframe");
+      iframe.style.width = "400px";
+      iframe.style.height = "300px";
+      iframe.style.right = "20px";
+      iframe.style.bottom = "20px";
+      break;
+    case "call_in": // 电话呼入
+      var iframe = document.getElementById("iframe");
+      iframe.style.width = "238px";
+      iframe.style.height = "108px";
+    case "move": // 电话盘拖动
+      var iframe = document.getElementById("iframe");
+      var offsetX = value.offsetX;
+      var offsetY = value.offsetY;
+      iframe.style.right = addPixel(iframe.style.right, -offsetX);
+      iframe.style.bottom = addPixel(iframe.style.bottom, -offsetY);
+      break;
+    default:
+      break;
+  }
+}
+function addPixel(pixelStr, offset) {
+  var num = Number(pixelStr.replace("px", ""));
+  return num + offset + "px";
+}
+
+function call() {
+    const value = props.listRows.phone;
+  var iframeWindow = window.frames[0];
+  const msgObj = {
+    op: "call", // 拨号
+    value: value,
+  };
+  iframeWindow.postMessage(JSON.stringify(msgObj), "*");
+}
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+
+</style>