From ecba5f4da14545694e193b545d9ba10424bd6bf3 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Mon, 16 Sep 2024 00:48:57 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat=20:=20=E5=B7=A5=E4=BD=9C=E5=8F=B0?=
 =?UTF-8?q?=E5=AE=9E=E6=97=B6=E9=80=9A=E8=AF=9D=E8=AE=B0=E5=BD=95socket?=
 =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/liveCall/LiveCallItem.vue | 186 +++--------------------
 src/components/liveCall/index.vue        | 144 +++++++++++++++++-
 2 files changed, 166 insertions(+), 164 deletions(-)

diff --git a/src/components/liveCall/LiveCallItem.vue b/src/components/liveCall/LiveCallItem.vue
index c15e836..1084c5c 100644
--- a/src/components/liveCall/LiveCallItem.vue
+++ b/src/components/liveCall/LiveCallItem.vue
@@ -2,20 +2,20 @@
   <div class="live-call">
     <div class="header">
       <div>
-        <span style="margin-right: 20px">张三</span>
-        <span>14785295642</span>
+        <span style="margin-right: 20px">{{ headData.username }}</span>
+        <span>{{ headData.phone }}</span>
       </div>
-      <div><span>工单名称：xxxxxx工单</span></div>
+      <div><span>工单名称：{{ headData.orderName }}</span></div>
     </div>
     <el-scrollbar ref="scrollbarRef" class="scrollbar">
       <div class="chat-content" ref="innerRef">
-        <div class="time-grap"><span>6月5日 12:05</span></div>
-        <div v-for="(item,index) in recordList" :key="index">
+        <div v-for="(item,index) in recordObj.content" :key="index">
+          <div class="time-grap"><span>{{ item.conversationTimestamp || '6月5日 12:05' }}</span></div>
           <!-- 我的 -->
-          <div v-if="item.id==userId" class="word-my">
+          <div v-if="item.speaker==0" class="word-my">
             <div class="info">
-              <p class="name">{{ item.nickName }} </p>
-              <div class="info-content">{{ item.contactText }}</div>
+              <p class="name">{{ item.speaker==0?headData.username:'AI助手' }} </p>
+              <div class="info-content">{{ item.message }}</div>
             </div>
             <el-avatar text="我"/>
           </div>
@@ -23,8 +23,8 @@
           <div v-else class="word">
             <el-avatar text="对方"/>
             <div class="info">
-              <p class="name">{{ item.nickName }} </p>
-              <div class="info-content">{{ item.contactText }}</div>
+              <p class="name">{{ item.speaker==0?headData.username:'AI助手'  }} </p>
+              <div class="info-content">{{ item.message }}</div>
             </div>
           </div>
         </div>
@@ -34,162 +34,24 @@
 </template>
 
 <script setup>
-import {getToken} from '@/utils/auth'
-
-const userId = ref(1)
-const recordList = ref([{
-  id: 2,
-  nickName: 'AI助手',
-  contactText: '你好'
-},
-  {
-    id: 1,
-    nickName: '我',
-    contactText: '你好!'
+import {defineProps} from "vue";
+const scrollbarRef=ref()
+const props = defineProps({
+  recordObj: {
+    type: Object,
+    default: {}
   },
-  {
-    id: 2,
-    nickName: 'AI助手',
-    contactText: '你好'
+  headData: {
+    type: Object,
+    default: {}
   },
-  {
-    id: 1,
-    nickName: '我',
-    contactText: '你好!'
-  },
-  {
-    id: 2,
-    nickName: 'AI助手',
-    contactText: '你好'
-  },
-  {
-    id: 1,
-    nickName: '我',
-    contactText: '你好!'
-  },
-
-])
-// setInterval(() => {
-//   recordList.value.push( {
-//     id: 1,
-//     nickName: '我',
-//     contactText: '45535'
-// },
-// {
-//     id: 2,
-//     nickName: 'AI助手',
-//     contactText: '555'
-// })
-//   scrollToBottom();
-// }, 1000)
-
-//聊天消息滚动面板dom
-const scrollbarRef = ref(null);
-let socket = reactive("");
-let token = getToken();
-let send = {
-  type: "ping",
-};
-//滚动面板自动滑动到底部
-const scrollToBottom = () => {
-  if (scrollbarRef.value) {
-    const container = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
-    container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
-    container.scrollTop = container.scrollHeight;
-  }
-};
-nextTick(() => {
-  scrollToBottom();
 })
-
-const setWsUrl=(url)=>{
-  return (window.location.protocol === 'http:' ? "ws://" : "wss://")+window.location.host + import.meta.env.VITE_BASE_WSURL + url;
+const getScrollbarRef=()=>{
+  return  scrollbarRef.value
 }
-const initWebSocket = () => {
-  try {
-    // const wsUrl=setWsUrl(`/ws/text/${token}`)
-    const wsUrl=`ws://frp.feashow.cn:31800/ws/text/${token}`
-     socket = new WebSocket(wsUrl)
-    // 2. ws.send()给服务器发送信息
-    //连接发生错误的回调方法
-    socket.onerror = function () {
-      console.log("ws连接发生错误");
-    };
-    //连接成功建立的回调方法
-    socket.onopen = function () {
-      // let authInfo = {
-      //   token: getToken(),
-      //   type: "auth",
-      //   cluster: "notice"
-      // }
-      // socket.send(JSON.stringify(authInfo))
-      console.log("ws连接成功");
-    }
-    //接收到消息的回调方法
-    socket.onmessage = function (event) {
-    let data = JSON.parse(event.data)
-    if(data.type!=='pong'){
-
-      console.log("服务器返回的信息: ", data);
-    }
-    }
-    //连接关闭的回调方法
-    socket.onclose = function () {
-      // initWebSocket()
-      console.log("ws连接关闭");
-    }
-    setInterval(() => {
-      socket.send(JSON.stringify(send))
-    }, 30000)
-  } catch (e) {
-    console.log(e)
-    console.log("ws连接失败");
-  }
-}
-initWebSocket()
-
-
-
-
-
-
-
-// onMounted(() => {
-//   scrollToBottom();
-// })
-// const initWebSocket = () => {
-//   try {
-//     const wsUrl = "http://frp.feashow.cn:31800/ws"
-//     const socket = new SockJS(wsUrl)
-//     const stompClient = Stomp.over(socket);
-//     stompClient.connect(
-//         {"Authorization": getToken()},//传递token
-//         (frame) => {
-//           //测试topic
-//           stompClient.subscribe("/topic/messages", (message) => {
-//             const messagesList = document.getElementById('messagesList');
-//             let listItem = document.createElement('li');
-//             listItem.textContent = message.body;
-//             messagesList.appendChild(listItem);
-//           });
-//           //测试发送
-//           stompClient.send("/app/receive", {}, JSON.stringify({"user": "2222222"}))
-//         },
-//         (err) => {
-//           console.log("错误：");
-//           console.log(err);
-//           //10s后重新连接一次
-//           setTimeout(() => {
-//             initWebSocket();
-//           }, 10000)
-//         }
-//     );
-//   } catch (e) {
-//     console.log(e)
-//     console.log("ws连接失败");
-//   }
-// }
-// initWebSocket()
+defineExpose({
+  getScrollbarRef
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/liveCall/index.vue b/src/components/liveCall/index.vue
index e331405..bb613aa 100644
--- a/src/components/liveCall/index.vue
+++ b/src/components/liveCall/index.vue
@@ -1,11 +1,151 @@
 <template>
-
+<!--测试 张三 : 17260625724565   李四: 17260625724123-->
   <div class="live-call-block">
-    <live-call-item v-for="item in 2"/>
+    <live-call-item ref="recordLeftRef" :recordObj="recordLeftObj" :headData="leftHeadData" />
+    <live-call-item ref="recordRightRef"  :recordObj="recordRightObj"  :headData="rightHeadData" />
   </div>
 </template>
 
 <script setup>
+import {getToken} from '@/utils/auth'
+//聊天消息滚动面板dom
+const recordLeftRef = ref(null);
+const recordRightRef = ref(null);
+const leftHeadData=ref({
+  username:'张三',
+  phone:'13546812315',
+  orderName:'张三工单',
+})
+const rightHeadData=ref({
+  username:'李四',
+  phone:'18246812546',
+  orderName:'李四工单',
+})
+const recordLeftObj = ref(
+    {
+      "callIdNumber": "17260625724565",
+      "content": [{
+        "callIdNumber": "17260625724565",
+        "conversationId": 0,
+        "conversationTimestamp": "2024-09-15 12:10",
+        "createTime": "2024-09-16",
+        "message": "你好11",
+        "speaker": "1"
+      },
+        {
+          "callIdNumber": "17260625724565",
+          "conversationId": 0,
+          "conversationTimestamp": "2024-09-15 16:10",
+          "createTime": "2024-09-16",
+          "message": "你好好11!",
+          "speaker": "0"
+        }
+      ],
+      "name": "",
+      "phone": "",
+      "timestamp": "1726416597958",
+      "type": "1"
+    }
+)
+const recordRightObj = ref(
+    {
+      "callIdNumber": "17260625724123",
+      "content": [{
+        "callIdNumber": "17260625724123",
+        "conversationId": 0,
+        "conversationTimestamp": "2024-09-15 12:10",
+        "createTime": "2024-09-16",
+        "message": "你好22",
+        "speaker": "1"
+      },
+        {
+          "callIdNumber": "17260625724123",
+          "conversationId": 0,
+          "conversationTimestamp": "2024-09-15 16:10",
+          "createTime": "2024-09-16",
+          "message": "你好好222!",
+          "speaker": "0"
+        }
+      ],
+      "name": "",
+      "phone": "",
+      "timestamp": "1726416597958",
+      "type": "2"
+    }
+)
+let socket = reactive("");
+let token = getToken();
+let send = {
+  type: "ping",
+};
+//滚动面板自动滑动到底部
+const scrollToBottom = (scrollbarRef) => {
+  if (scrollbarRef) {
+    const container = scrollbarRef.$el.querySelector('.el-scrollbar__wrap');
+    container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
+    container.scrollTop = container.scrollHeight;
+  }
+};
+
+
+const setWsUrl = (url) => {
+  return (window.location.protocol === 'http:' ? "ws://" : "wss://") + window.location.host + import.meta.env.VITE_BASE_WSURL + url;
+}
+const initWebSocket = () => {
+  try {
+    // const wsUrl=setWsUrl(`/ws/text/${token}`)
+    const wsUrl = `ws://frp.feashow.cn:31800/ws/text/${token}`
+    socket = new WebSocket(wsUrl)
+    // 2. ws.send()给服务器发送信息
+    //连接发生错误的回调方法
+    socket.onerror = function () {
+      console.log("ws连接发生错误");
+    };
+    //连接成功建立的回调方法
+    socket.onopen = function () {
+      // let authInfo = {
+      //   token: getToken(),
+      //   type: "auth",
+      //   cluster: "notice"
+      // }
+      // socket.send(JSON.stringify(authInfo))
+      console.log("ws连接成功");
+    }
+    //接收到消息的回调方法
+    socket.onmessage = function (event) {
+      let data = JSON.parse(event.data)
+      if (data.type !== 'pong') {
+        console.log("服务器返回的信息: ", data);
+        if(data.type=='1'){
+            recordLeftObj.value.content.push(data.content)
+          console.info("🚀 ~method:onmessage -----", recordLeftObj.value)
+          nextTick(() => {
+            scrollToBottom(recordLeftRef.value)
+          })
+        }else {
+            recordRightObj.value.content.push(data.content)
+          console.info("🚀 ~method:onmessage -----", recordRightObj.value)
+          nextTick(() => {
+            scrollToBottom(recordRightRef.value);
+          })
+        }
+
+      }
+    }
+    //连接关闭的回调方法
+    socket.onclose = function () {
+      initWebSocket()
+      console.log("ws连接关闭");
+    }
+    setInterval(() => {
+      socket.send(JSON.stringify(send))
+    }, 10000)
+  } catch (e) {
+    console.log(e)
+    console.log("ws连接失败");
+  }
+}
+initWebSocket()
 </script>
 
 <style lang="scss" scoped>

From 2e5e3e39e0049e9c7ec8b913d0ca2ff6fae96301 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Mon, 16 Sep 2024 00:51:37 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix=20:=20=E6=B3=A8=E9=87=8Anpm=20install?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .drone.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.drone.yml b/.drone.yml
index d1c91ec..dd6eb0a 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -20,9 +20,9 @@ steps:
       - npm -v
       - mkdir -p ./node_modules
       - export NODE_MODULES_PATH=`pwd`/node_modules
-      - npm config set registry https://registry.npmmirror.com
+      # - npm config set registry https://registry.npmmirror.com
       - set NODE_OPTIONS=--openssl-legacy-provider
-      - npm install
+      # - npm install
       - npm run build
       - echo $NODE_MODULES_PATH
       - cp -r dist /app/build/$DRONE_REPO_NAME

From 8bdd31223566e2a25ec47294ee650354a1fa974f Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Mon, 16 Sep 2024 00:53:10 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix=20:=20=E6=B3=A8=E9=87=8A=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8F=B0=E6=A8=A1=E6=8B=9F=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/liveCall/index.vue | 100 ++++++++++++++++--------------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/src/components/liveCall/index.vue b/src/components/liveCall/index.vue
index bb613aa..9c49219 100644
--- a/src/components/liveCall/index.vue
+++ b/src/components/liveCall/index.vue
@@ -21,57 +21,61 @@ const rightHeadData=ref({
   phone:'18246812546',
   orderName:'李四工单',
 })
-const recordLeftObj = ref(
-    {
-      "callIdNumber": "17260625724565",
-      "content": [{
-        "callIdNumber": "17260625724565",
-        "conversationId": 0,
-        "conversationTimestamp": "2024-09-15 12:10",
-        "createTime": "2024-09-16",
-        "message": "你好11",
-        "speaker": "1"
-      },
-        {
-          "callIdNumber": "17260625724565",
-          "conversationId": 0,
-          "conversationTimestamp": "2024-09-15 16:10",
-          "createTime": "2024-09-16",
-          "message": "你好好11!",
-          "speaker": "0"
-        }
-      ],
-      "name": "",
-      "phone": "",
-      "timestamp": "1726416597958",
-      "type": "1"
+const recordLeftObj = ref({
+      content:[]
     }
+    // {
+    //   "callIdNumber": "17260625724565",
+    //   "content": [{
+    //     "callIdNumber": "17260625724565",
+    //     "conversationId": 0,
+    //     "conversationTimestamp": "2024-09-15 12:10",
+    //     "createTime": "2024-09-16",
+    //     "message": "你好11",
+    //     "speaker": "1"
+    //   },
+    //     {
+    //       "callIdNumber": "17260625724565",
+    //       "conversationId": 0,
+    //       "conversationTimestamp": "2024-09-15 16:10",
+    //       "createTime": "2024-09-16",
+    //       "message": "你好好11!",
+    //       "speaker": "0"
+    //     }
+    //   ],
+    //   "name": "",
+    //   "phone": "",
+    //   "timestamp": "1726416597958",
+    //   "type": "1"
+    // }
 )
-const recordRightObj = ref(
-    {
-      "callIdNumber": "17260625724123",
-      "content": [{
-        "callIdNumber": "17260625724123",
-        "conversationId": 0,
-        "conversationTimestamp": "2024-09-15 12:10",
-        "createTime": "2024-09-16",
-        "message": "你好22",
-        "speaker": "1"
-      },
-        {
-          "callIdNumber": "17260625724123",
-          "conversationId": 0,
-          "conversationTimestamp": "2024-09-15 16:10",
-          "createTime": "2024-09-16",
-          "message": "你好好222!",
-          "speaker": "0"
-        }
-      ],
-      "name": "",
-      "phone": "",
-      "timestamp": "1726416597958",
-      "type": "2"
+const recordRightObj = ref({
+      content:[]
     }
+    // {
+    //   "callIdNumber": "17260625724123",
+    //   "content": [{
+    //     "callIdNumber": "17260625724123",
+    //     "conversationId": 0,
+    //     "conversationTimestamp": "2024-09-15 12:10",
+    //     "createTime": "2024-09-16",
+    //     "message": "你好22",
+    //     "speaker": "1"
+    //   },
+    //     {
+    //       "callIdNumber": "17260625724123",
+    //       "conversationId": 0,
+    //       "conversationTimestamp": "2024-09-15 16:10",
+    //       "createTime": "2024-09-16",
+    //       "message": "你好好222!",
+    //       "speaker": "0"
+    //     }
+    //   ],
+    //   "name": "",
+    //   "phone": "",
+    //   "timestamp": "1726416597958",
+    //   "type": "2"
+    // }
 )
 let socket = reactive("");
 let token = getToken();