新开发

src/pages/mediation-management/index.vue

@@ -504,9 +504,10 @@ import { values } from "lodash";
                     this.$message.warning(`请至少选中一个调解案件！`)
                     return
                 }
-                api.calling_batchcall({caseIdList: this.selectionData}).then(res => {
+                api.callingBatchcall({caseIdList: this.selectionData}).then(res => {
                     this.$message.success("智能外呼成功");
                     // this.getCaseInfoList(1)
+                    this.jumpUrl(`/mediation-page?sourcePage=sourcePage&caseId=${this.selectionData[0]}&queue=1`)
                 })
 
             },

src/pages/mediation-page/components/MediationRoom.vue

@@ -30,22 +30,59 @@
           </el-popover>
 
           <div class="wrap-btn-left-dial pl-22 pr-24 f14 flex-row justify-content-between ml-16">
-            <div class="mr-24 flex-row justify-content-between align-items-center">
+            <div class="flex-row justify-content-between align-items-center">
-              <div class="mr-8 f16 color-F53F3F"><i class="el-icon-video-pause"></i></div>
+              <div v-if="calling" class="mr-8 f16 color-F53F3F cursor-p" @click="pauseTimer()"><i class="el-icon-video-pause"></i></div>
-              <div class="mr-8">暂停拨打</div>
+              <div v-else class="mr-8 f16 color-F53F3F cursor-p" @cilck="startCall()"><i class="el-icon-video-play"></i></div>
-              <div class="mr-8 f12 color-000">01:00</div>
+              <div class="mr-8 cursor-p" v-if="calling" @click="pauseTimer()">暂停拨打</div>
-              <div class="mr-8 f20"><i class="el-icon-phone-outline"></i></div>
+              <div class="mr-8 cursor-p" v-else @cilck="startCall()">开始拨打</div>
-              <div class="mr-8 f20"><i class="el-icon-microphone"></i></div>
+              <div class="mr-8 f12 color-000" v-if="calling">{{formattedTime || '00:00'}}</div>
-              <div class="mr-8 ai-logo-img"></div>
+              <div class="mr-8 f20 cursor-p" v-if="calling" @click="hungUp()"><i class="el-icon-phone-outline"></i></div>
+              <div class="mr-8 f20 cursor-p" v-if="calling && !isMute" @click="muteMic()"><i class="el-icon-microphone"></i></div>
+              <div class="mr-8 f20 cursor-p" v-if="calling && isMute" @click="unmuteMic()"><i class="el-icon-turn-off-microphone"></i></div>
+              <div class="mr-8 ai-logo-img" v-if="calling"></div>
             </div>
             <div class="flex-row justify-content-between align-items-center f14">
-              <div class="flex-row justify-content-between align-items-center mr-24">
+              <el-popover
-                <div class="mr-8 f16"><i class="el-icon-s-operation"></i></div>
+                placement="bottom"
-                <div>队列 <span class="color-000">200</span></div>
+                width="1000"
+                trigger="click">
+                <div>
+                  <div class="f16 p-16 border-b-solid-lighter-1">{{queue ? '智能外呼案件列表' : '案件列表'}}</div>
+                  <div class="p-16">
+                    <el-table  ref="queueTable" :data="queueList" style="width: 100%" highlight-current-row>
+                      <el-table-column type="index" label="序号" width="50"></el-table-column>
+                      <el-table-column prop="contact" label="被申请人姓名" width="150"></el-table-column>
+                      <el-table-column prop="caseNo" label="案件编号"></el-table-column>
+                      <el-table-column prop="phone" label="电话号码" width="150"></el-table-column>
+                      <el-table-column prop="moneyAmount" label="逾期金额" width="150"></el-table-column>
+                      <el-table-column label="操作" width="150" v-if="queue">
+                          <template slot-scope="scope">
+                            {{scope.row.index}}
+                              <div v-if="scope.row.index === index" style="color:#4080FF">正在调解中...</div>
+                              <div v-else-if="scope.row.status.code === 1" style="color:#BC6F60">未拨打<i class="el-icon-phone-outline el-icon--right"></i></div>
+                              <div v-else style="color:#E5E6EB">已拨打</div>
+                            </template>
+                      </el-table-column>
+                  </el-table>
+                  </div>
+                </div>
+                <div slot="reference" class="flex-row justify-content-between align-items-center mr-24 cursor-p">
+                  <div class="mr-8 f16"><i class="el-icon-s-operation"></i></div>
+                  <div>{{queue ? '队列' : '列表'}} <span class="color-000">
+                    {{queue ? callingInfoData.countInit : ''}}
+                  </span></div>
+                </div>
+              </el-popover>
+              <div v-if="queue" class="flex-row justify-content-between align-items-center f14">
+                <div class="mr-24">已拨打 <span class="color-000">{{callingInfoData.countCall}}</span></div>
+                <div class="mr-24">已接通 <span class="color-000">{{callingInfoData.countOk}}</span></div>
+                <div>未接通 <span class="color-000">{{callingInfoData.countFail}}</span></div>
+              </div>
+              <div v-else class="flex-row justify-content-between align-items-center f14">
+                <div class="mr-24">今日已拨打 <span class="color-000">{{todayCountData.countCall}}</span></div>
+                <div class="mr-24">今日已接通 <span class="color-000">{{todayCountData.countOk}}</span></div>
+                <div>今日未接通 <span class="color-000">{{todayCountData.countFail}}</span></div>
               </div>
-              <div class="mr-24">已拨打 <span class="color-000">200</span></div>
-              <div class="mr-24">已接通 <span class="color-000">200</span></div>
-              <div>未接通 <span class="color-000">200</span></div>
             </div>
           </div>
         </div>
@@ -261,6 +298,33 @@ export default {
         {label:'适诉案件',value:'9'},{label:'可联账户',value:'10'},{label:'投诉倾向客户',value:'11'},{label:'分期客户',value:'12'},
         {label:'其他/无标签',value:'13'}
       ],
+
+      queue: false,
+      queueList: [],
+      phoneNumber: '13982024318',
+      sessionId: '',
+      index: 0, //当前通话的索引
+      calling: false, // 是否在通话
+      isMute: false, //是否静音
+      isPause: false, //是否暂停
+
+
+      callingInfoData: {
+        countInit: 0,
+        countOk: 0,
+        countFail: 0,
+        countCall: 0,
+      },
+      todayCountData: {
+        countInit: 0,
+        countOk: 0,
+        countFail: 0,
+        countCall: 0,
+      },
+      startTime: 0,
+      elapsedTime: 0,
+      timerInterval: null,
+      isRunning: false,
     };
   },
   computed: {
@@ -287,11 +351,31 @@ export default {
       let oh = document.documentElement.clientHeight;
       return oh - 57 - 128
     },
+    formattedTime() {
+      const totalSeconds = Math.floor(this.elapsedTime / 1000);
+      const minutes = Math.floor(totalSeconds / 60);
+      const seconds = totalSeconds % 60;
+      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    },
   },
   async created() {
-    this.caseId = this.$route.query.caseId
+    this.caseId = this.$route.query.caseId || null
+    this.queue = this.$route.query.queue || null
     this.getCaseInfoById();//获取详情
     this.getmediate_record()
+    this.callingTodayCount() //今日通话次数
+
+    if (this.queue) {
+      await this.callingQueue() //呼叫队列
+      await this.callingInfo() //呼叫统计
+    }
+    const that = this
+    window.tccc.on('sessionEnded', (options) => {
+        console.log('监听挂断事件', options)
+        that.calling = false
+        that.resetTimer()
+        const that = this.nextCall()
+    })
   },
   beforeDestroy() {
     // if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
@@ -365,6 +449,151 @@ export default {
         }
       })
     },
+    async callingInfo() {
+      try {
+        let res = await api.callingInfo({})
+        this.callingInfoData = res
+      } catch (err) {}
+    },
+    async callingTodayCount() {
+      try {
+        let res = await api.callingTodayCount({})
+        this.todayCountData = res
+      } catch (err) {}
+    },
+    // 当前呼叫队列
+    callingQueue() {
+      api.callingQueue({}).then(res => {
+        this.queueList = res.queue || []
+        this.caseId = String(res.queue[0].caseId) || ''
+        this.getCaseInfoById()
+        this.getmediate_record()
+      })
+    },
+    startCall () {
+      console.log('queueList==================',this.queueList)
+      for (let i=0; i < this.queueList.length; i++) {
+        if (this.queueList[i].status.code === 1) {
+          console.log('定位到可拨打的案件',i)
+          this.index = i
+          this.startOutboundCall()
+          return
+        }
+      }
+    },
+    // 电话呼出
+    async startOutboundCall() {
+        // this.phoneNumber = this.queueList[this.index].phone
+        this.calling = true
+        console.log('进入呼叫电话：', this.phoneNumber)
+        try {
+            let data = await window.tccc.Call.startOutboundCall({phoneNumber: this.phoneNumber})
+            this.sessionId = data.sessionId
+            console.log('呼叫成功', data)
+            this.callingSuccess()
+            this.startTimer()
+        } catch (err) {
+            this.$message.error('呼叫失败' + err.message)
+            console.log('呼叫失败',err.message)
+            this.callingFail()
+            // 呼叫失败
+        } finally {}
+    },
+    // 呼叫成功
+    async callingSuccess () {
+      try { 
+        let res = await api.callingSuccess({caseId: this.caseId})
+      } catch (err) { }
+    },
+    // 呼叫失败
+    async callingFail () {
+      try { 
+        let res = await api.callingSuccess({caseId: this.caseId})
+      } catch (err) { }
+    },
+    // 挂断会话
+    async hungUp() {
+        try {
+            let res = await window.tccc.Call.hungUp({sessionId: this.sessionId})
+            this.calling = false
+            this.resetTimer()
+            this.nextCall()
+        } catch (err) {
+            // 挂断失败
+        } finally {}
+    },
+    // 自动拨打下一个会话
+    nextCall() {
+      if (!this.queue) return
+      if (this.isPause) {
+        this.isPause = false
+        this.calling = false
+        return
+      }
+      const that = this
+      that.index ++
+      setTimeout(() => {
+          if (that.index <= that.queueList.length - 1) {
+            that.caseId = String(that.queueList[that.index].caseId) || ''
+            that.getCaseInfoById()
+            that.getmediate_record()
+            that.startOutboundCall()
+          }
+      }, 5000)
+    },
+    // 删除会话
+    async deleteCall() {
+        try {
+            let data = await window.tccc.Call.deleteCall({sessionId: this.sessionId})
+        } catch (err) {
+            // 删除失败
+        } finally {
+
+        }
+    },
+    // 静音会话
+    async muteMic() {
+        try {
+            let data = await window.tccc.Call.muteMic({sessionId: this.sessionId})
+            this.isMute = true
+            this.$message.success('已静音')
+        } catch (err) {
+            // 静音失败
+            this.$message.error('静音失败')
+        }
+    },
+    // 取消静音
+    async unmuteMic() {
+        try {
+            let data = await window.tccc.Call.unmuteMic({sessionId: this.sessionId})
+            this.isMute = false
+            this.$message.success('已取消静音')
+        } catch (err) {
+            // 取消静音失败
+            this.$message.error('取消静音失败')
+        }
+    },
+    startTimer() {
+      if (!this.isRunning) {
+        this.startTime = Date.now() - this.elapsedTime;
+        this.timerInterval = setInterval(() => {
+          this.elapsedTime = Date.now() - this.startTime;
+        }, 1000);
+        this.isRunning = true;
+      }
+    },
+    pauseTimer() {
+      if (this.isRunning) {
+        this.isPause=true
+        clearInterval(this.timerInterval);
+        this.isRunning = false;
+      }
+    },
+    resetTimer() {
+      clearInterval(this.timerInterval);
+      this.elapsedTime = 0;
+      this.isRunning = false;
+    },
   }
 };
 </script>
@@ -734,4 +963,7 @@ export default {
   }
 
 }
+.cursor-p {
+  cursor: pointer;
+}
 </style>

src/services/caseManagement.js

@@ -299,10 +299,29 @@ const caseManagementApi = {
     },
 
     // 呼叫-发起批量智能外呼
-    calling_batchcall: data => {
+    callingBatchcall: data => {
         return service.service.post(`${apiAdmin}api/trace/calling/batch-call`, data)
     },
-    
+    // 呼叫-当前呼叫队列
+    callingQueue: data => {
+        return service.service.post(`${apiAdmin}api/trace/calling/queue`, data)
+    },
+    // 呼叫-呼叫成功
+    callingSuccess: data => {
+        return service.service.post(`${apiAdmin}api/trace/calling/success`, data)
+    },
+    // 呼叫-呼叫失败
+    callingFail: data => {
+        return service.service.post(`${apiAdmin}api/trace/calling/fail`, data)
+    },
+    // 当前呼叫详情统计
+    callingInfo: data => {
+        return service.service.post(`${apiAdmin}api/trace/calling/info`, data)
+    },
+    // 今日呼叫统计
+    callingTodayCount: data => {
+        return service.service.post(`${apiAdmin}api/trace/calling/todayCount`, data)
+    },