feat: 实现历史通话记录功能

src/fvcomponents/fvTable/index.vue

@@ -101,8 +101,8 @@
 </template>
 
 <script setup>
-import { ElMessage,ElNotification } from 'element-plus';
-import { requestList } from '../../api/common';
+import {ElMessage, ElNotification} from 'element-plus';
+import {requestList} from '@/api/common';
 // import {exportExcel} from "@/utils/export-excel";
 
 const props = defineProps({
@@ -130,6 +130,11 @@ const props = defineProps({
   isLoading: {
     type: Boolean,
     default: true
+  },
+  //总数
+  total: {
+    type: String,
+    default: ''
   }
 })
 
@@ -219,12 +224,12 @@ const changeColShow = (val) => {
 filterColumns()
 
 const getList = async () => {
-  const { api, params } = props.tableConfig
+  const {api, params} = props.tableConfig
   const queryParmas = {...localData.query, ...params}
-  if(api) {
+  if (api) {
     localData.loading = props.isLoading
     try {
-      const {code, data, msg} = await requestList(api, queryParmas).then(res=>{
+      const {code, data, msg} = await requestList(api, queryParmas).then(res => {
         // console.log(res)
         return res
       })
@@ -247,8 +252,8 @@ const getList = async () => {
         localData.loading = false
       }
     } catch (error) {
-      console.log("error",error)
-      if (!error){
+      console.log("error", error)
+      if (!error) {
         return
       }
       ElNotification({
@@ -291,14 +296,26 @@ const handleCurrentChange = (val) => {
   emits('getBaseQuery', localData.query)
   getList()
 }
-
+watch(() => props.data, (newVal) => {
+  console.log(newVal)
+  localData.list = newVal
+}, {
+  deep: true
+})
+watch(() => props.total, (newVal) => {
+  console.log(newVal)
+  localData.total = newVal
+}, {
+  deep: true
+})
 watchEffect(() => {
   if (localData.allColShow) {
     localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
   }
 })
+
 //刷新
-const refresh = ({resetPage=false}={}) => {
+const refresh = ({resetPage = false} = {}) => {
   resetPage ? localData.query.pageNum = 1 : null
   getList()
 }
@@ -311,7 +328,7 @@ const getQuery = () => {
   return localData.query
 }
 
-defineExpose({ refresh, updateLoading, getQuery, tableInstance })
+defineExpose({refresh, updateLoading, getQuery, tableInstance})
 
 onMounted(() => {
   getList()

src/views/home/index.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="call-history">
       <h3>历史通话记录</h3>
-      <fvTable ref="tableIns" :tableConfig="tableConfig" :isLoading="isLoading"></fvTable>
+      <fvTable ref="tableIns" :tableConfig="tableConfig" :data="currentHistoryData" :total="currentHistoryTotal" :isLoading="isLoading"></fvTable>
       <voice ref="voiceRef" title="语音详情" :rowUrl="rowUrl" />
       <infoLiveCall ref="infoLiveCallRef" v-model:value="historyData" />
     </div>
@@ -14,16 +14,29 @@
 </template>
 
 <script setup lang="jsx">
+import {useAuthStore} from '@/stores/userstore.js'
+import {getToken} from '@/utils/auth'
+import {usePermisstionStroe} from '@/stores/permisstion'
 import LiveCall from '@/components/liveCall/index.vue'
 import Voice from '@/components/voice/index.vue'
 import InfoLiveCall from '@/components/infoLiveCall/index.vue'
+import {orderGetList} from "@/api/order/order";
+const permisstionStore = usePermisstionStroe()
+const authStore = useAuthStore()
+const currentHistoryData = ref([])
 const historyData = ref({})
 const orderNumber = ref('')
+const currentHistoryTotal = ref('')
 const rowUrl = ref()
 const infoLiveCallRef = ref()
-const isLoading = ref(false)
+const isLoading = ref(true)
 const voiceRef = ref()
 const tableIns = ref()
+let socket = reactive("");
+let token = getToken();
+let send = {
+  type: "ping",
+};
 const auths = reactive({
   record: ['order:dialogue:list'],
 })
@@ -131,10 +144,22 @@ const tableConfig = reactive({
       }
     }
   ],
-  api: '/order/list',
+  // api: '/order/list',
   params: {
   }
 })
+const getOrder=()=>{
+  // isLoading.value=true
+  orderGetList({
+    pageNum: 1,
+    pageSize: 10
+  }).then(res=>{
+    currentHistoryData.value=res.data.rows
+    currentHistoryTotal.value=res.data.total
+    // isLoading.value=false
+  })
+}
+getOrder()
 const handleVoice = (row) => {
   if (row.recordUrl !== null) {
     voiceRef.value.open(true)
@@ -155,6 +180,64 @@ const handleInfo = (row) => {
 // window.setInterval(() => {
 //   setTimeout(tableIns.value.refresh(), 0)
 // }, 2000)
+
+const handleLogout = () => {
+  authStore.userLogout()
+  permisstionStore.removeMenu()
+  router.push('/login')
+}
+const initWebSocket = () => {
+  try {
+    // const wsUrl=setWsUrl(`/ws/text/${token}`)
+    const wsUrl = `ws://frp.feashow.cn:31800/ws/history/${token}`
+    // const wsUrl = `ws://112.19.165.99:20002/api/ws/text/${token}`
+    socket = new WebSocket(wsUrl)
+    // 2. ws.send()给服务器发送信息
+    //连接发生错误的回调方法
+    socket.onerror = function () {
+      console.log("ws连接发生错误");
+    };
+    //连接成功建立的回调方法
+    socket.onopen = function () {
+      console.log("ws连接成功");
+    }
+    //接收到消息的回调方法
+    socket.onmessage = function (event) {
+      let data = JSON.parse(event.data)
+      if (data.type !== 'pong') {
+        if (data.type === 'error') {
+          handleLogout()
+          return;
+        } else if (data.type === 'failed') {
+          initWebSocket()
+          return;
+        }
+        console.log("服务器返回的信息: ", data);
+        let historyDataObj=JSON.parse(data)
+        console.log("historyDataObj: ", historyDataObj);
+        currentHistoryData.value=historyDataObj.rows
+        currentHistoryTotal.value=historyDataObj.total
+        // historyDataObj.rows?.forEach(item=>{
+        //   currentHistoryData.value.push(item)
+        // })
+      }
+    }
+    //连接关闭的回调方法
+    socket.onclose = function () {
+      // initWebSocket()
+      console.log("ws连接关闭");
+    }
+    setInterval(() => {
+      socket.send(JSON.stringify(send))
+    }, 5000)
+  } catch (e) {
+    console.log(e)
+    console.log("ws连接失败");
+  }
+}
+initWebSocket()
+
+
 </script>
 
 <style lang="scss" scoped>