Merge pull request 'master' (#50) from master into test

Reviewed-on: http://git.feashow.cn/feashow/SmartOpsWeb/pulls/50

package.json

@@ -17,8 +17,6 @@
     "pinia": "^2.0.35",
     "sass": "^1.62.1",
     "scss": "^0.2.4",
-    "sockjs-client": "^1.6.1",
-    "stompjs": "^2.3.3",
     "unplugin-icons": "^0.16.1",
     "vite-plugin-inspect": "^0.7.26",
     "vue": "^3.2.47",

src/components/infoLiveCall/index.vue

@@ -11,11 +11,10 @@ defineExpose({
 </script>
 
 <template>
-    <el-dialog v-model="dialogVisible" title="语音详情" width="1500"  :before-close="handleClose" class="box">
+    <el-dialog v-model="dialogVisible" title="历史通话记录" width="1000"  :before-close="handleClose" class="box">
         <LiveCall />
         <template #footer>
             <div class="dialog-footer">
-
                 <el-button type="primary" @click="dialogVisible = false">
                     关闭
                 </el-button>
@@ -28,4 +27,4 @@ defineExpose({
 .box{
     height: 65vh;
 }
-</style>
+</style>

src/components/liveCall/LiveCallItem.vue

@@ -34,8 +34,6 @@
 </template>
 
 <script setup>
-import Stomp from 'stompjs'
-import SockJS from 'sockjs-client/dist/sockjs.min.js'
 import {getToken} from '@/utils/auth'
 
 const userId = ref(1)
@@ -85,10 +83,13 @@ const recordList = ref([{
 //   scrollToBottom();
 // }, 1000)
 
-
 //聊天消息滚动面板dom
 const scrollbarRef = ref(null);
-
+let socket = reactive("");
+let token = getToken();
+let send = {
+  type: "ping",
+};
 //滚动面板自动滑动到底部
 const scrollToBottom = () => {
   if (scrollbarRef.value) {
@@ -100,42 +101,92 @@ const scrollToBottom = () => {
 nextTick(() => {
   scrollToBottom();
 })
-// onMounted(() => {
-//   scrollToBottom();
-// })
+
+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 = "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)
-        }
-    );
+    // 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)
+      console.log("服务器返回的信息: ", JSON.parse(event.data));
+    }
+    //连接关闭的回调方法
+    socket.onclose = function () {
+      // initWebSocket()
+      console.log("ws连接关闭");
+    }
+    setInterval(() => {
+      socket.send(JSON.stringify(send))
+    }, 3000)
   } 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()
 </script>
 
 <style lang="scss" scoped>
@@ -157,7 +208,7 @@ const initWebSocket = () => {
 
   .scrollbar {
     padding: 10px 10px 0 10px;
-    height: 380px;
+    height: 42vh;
 
     .el-scrollbar__wrap {
       height: 100%;

src/components/liveCall/index.vue

@@ -1,5 +1,5 @@
 <template>
-  
+
   <div class="live-call-block">
     <live-call-item v-for="item in 2"/>
   </div>
@@ -14,7 +14,7 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-around;
-  height: 470px;
+  height: 50vh;
   overflow-y: auto;
 
   &::-webkit-scrollbar {

src/views/home/index.vue

@@ -4,10 +4,7 @@
     <div class="real-time-call">
       <LiveCall />
     </div>
-
-     <hr><br>
     <div class="call-history"><h3 >历史通话记录</h3>
-
       <fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
       <Voice ref="voiceRef" />
       <infoLiveCall ref="infoLiveCallRef"/>
@@ -27,12 +24,12 @@ const mockData = ref([
     workOrderNumber: 1211,
     workOrderTime: '2022-02-09 00 : 12',
     state: 0,
-    callState: 0
+    callState: '01'
   },
   {
     workOrderNumber: 232,
     state: 1,
-    callState: 1
+    callState: '02'
   }
 ])
 const auths = reactive({
@@ -77,7 +74,6 @@ const tableConfig = reactive({
       label: '号码',
       align: 'center'
     },
-
     {
       prop: 'callState',
       label: '电话拨打状态',
@@ -85,7 +81,7 @@ const tableConfig = reactive({
       showOverflowTooltip: false,
       currentRender: ({ row, index }) => {
         if (row.callState !== null) {
-          return (<PointTag dictType={'call_state'} value={row.callState} />)
+          return (<PointTag dictType={'call_status'} value={row.callState} />)
         } else {
           return '--'
         }
@@ -101,13 +97,13 @@ const tableConfig = reactive({
       label: '操作',
       align: 'center',
       fixed: 'right',
-      width: 150,
+      // width: 150,
       showOverflowTooltip: false,
       currentRender: ({ row, index }) => {
         // console.log(row);
         let btn = []
-        btn.push({ label: '语音', prem: auths.detail, func: () => handleVoice(row), type: 'primary' })
-        btn.push({ label: '信息', prem: auths.detail, func: () => handleInfo(row), type: 'primary' })
+        btn.push({ label: '播放语音', prem: auths.detail, func: () => handleVoice(row), type: 'primary' })
+        btn.push({ label: '通话记录', prem: auths.detail, func: () => handleInfo(row), type: 'primary' })
         return (
           <div style={{ width: '100%' }}>
             {
@@ -152,7 +148,7 @@ const handleInfo = (row) => {
 
   .call-history {
     width: 100%;
-    height: 50vh;
+    //height: 50vh;
     // background-color: blue;
   }
 }