|
|
@@ -45,6 +45,7 @@
|
|
45
|
45
|
<div class="ml-3 flex-1">
|
|
46
|
46
|
<div class="font-medium">{{ agent.name }}</div>
|
|
47
|
47
|
<div class="text-sm text-gray-500">工号: {{ agent.workId }}</div>
|
|
|
48
|
+ <div class="text-sm text-gray-500">姓名: {{ agent.nickName }}</div>
|
|
48
|
49
|
<div class="text-sm text-gray-500">分机: {{ agent.extension }}</div>
|
|
49
|
50
|
</div>
|
|
50
|
51
|
<div :class="`status-dot ${agent.status}`" />
|
|
|
@@ -88,7 +89,7 @@
|
|
88
|
89
|
</div>
|
|
89
|
90
|
</template>
|
|
90
|
91
|
|
|
91
|
|
-<script lang="ts" setup>
|
|
|
92
|
+<script lang="ts" setup name="SeatMonitor">
|
|
92
|
93
|
import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
|
|
93
|
94
|
import { Monitor, Search, Mute, VideoPlay } from '@element-plus/icons-vue';
|
|
94
|
95
|
import { getPageListData } from '@/api/main/system/system';
|
|
|
@@ -109,18 +110,18 @@ const lineState = computed(() => {
|
|
109
|
110
|
})
|
|
110
|
111
|
|
|
111
|
112
|
watch(lineState, (newValue, oldValue) => {
|
|
112
|
|
- console.log(newValue);
|
|
|
113
|
+ // console.log(newValue);
|
|
113
|
114
|
scoketState.value = newValue
|
|
114
|
115
|
})
|
|
115
|
116
|
|
|
116
|
|
-const statistics = [
|
|
|
117
|
+const statistics = ref([
|
|
117
|
118
|
{ key: 'online', label: '空闲', count: 0, bgColor: 'bg-green-50' },
|
|
118
|
119
|
{ key: 'idle', label: '小休', count: 0, bgColor: 'bg-yellow-50' },
|
|
119
|
120
|
{ key: 'ringing', label: '振铃', count: 0, bgColor: 'bg-blue-50' },
|
|
120
|
121
|
{ key: 'calling', label: '通话中', count: 0, bgColor: 'bg-blue-100' },
|
|
121
|
122
|
{ key: 'afterCall', label: '话后处理', count: 0, bgColor: 'bg-purple-50' },
|
|
122
|
123
|
{ key: 'offline', label: '离线', count: 0, bgColor: 'bg-red-50' },
|
|
123
|
|
-];
|
|
|
124
|
+]);
|
|
124
|
125
|
|
|
125
|
126
|
const statusOptions = [
|
|
126
|
127
|
{ label: '全部', value: '' },
|
|
|
@@ -139,7 +140,7 @@ const agents: any = ref([]);
|
|
139
|
140
|
const getAgents = () => {
|
|
140
|
141
|
getPageListData('/UserExtension/userextension').then((res) => {
|
|
141
|
142
|
if (res.data.length > 0) {
|
|
142
|
|
- const info = statistics.find((item) => item.key === 'offline');
|
|
|
143
|
+ const info = statistics.value.find((item) => item.key === 'offline');
|
|
143
|
144
|
if (info) info.count = res.data.length;
|
|
144
|
145
|
res.data.forEach((ele) => {
|
|
145
|
146
|
agents.value.push({
|
|
|
@@ -147,6 +148,7 @@ const getAgents = () => {
|
|
147
|
148
|
name: ele.username,
|
|
148
|
149
|
workId: ele.usercode,
|
|
149
|
150
|
extension: ele.extension, // 分机号
|
|
|
151
|
+ nickName:ele.nickName,
|
|
150
|
152
|
status: 'unknown', // 线路状态
|
|
151
|
153
|
duration: '',
|
|
152
|
154
|
time: '',
|
|
|
@@ -257,7 +259,7 @@ const stateMap = {
|
|
257
|
259
|
|
|
258
|
260
|
|
|
259
|
261
|
const monitorBack = (data) => {
|
|
260
|
|
- console.log(data, 'monitorBack')
|
|
|
262
|
+ // console.log(data, 'monitorBack')
|
|
261
|
263
|
|
|
262
|
264
|
const status = stateMap[data.State]
|
|
263
|
265
|
if (data.AgentId && status) {
|
|
|
@@ -266,7 +268,7 @@ const monitorBack = (data) => {
|
|
266
|
268
|
if (status === 'calling') info.time = new Date().getTime()
|
|
267
|
269
|
else if (info.time) info.time = ''
|
|
268
|
270
|
const oldStatus = info.status
|
|
269
|
|
- console.log(info.time, status, 'info.time')
|
|
|
271
|
+ // console.log(info.time, status, 'info.time')
|
|
270
|
272
|
info.status = status
|
|
271
|
273
|
|
|
272
|
274
|
calculatCount(oldStatus, status)
|
|
|
@@ -290,7 +292,7 @@ const monitorBack = (data) => {
|
|
290
|
292
|
const isStartMonitor = ref(false) // 是否开始监控
|
|
291
|
293
|
|
|
292
|
294
|
const startMonitor = () => {
|
|
293
|
|
- console.log(scoketState.value, 'scoketState.value')
|
|
|
295
|
+ // console.log(scoketState.value, 'scoketState.value')
|
|
294
|
296
|
if (scoketState.value !== '签出') {
|
|
295
|
297
|
isStartMonitor.value = true
|
|
296
|
298
|
if (!timer.value) {
|
|
|
@@ -337,15 +339,16 @@ const cancelMonitor = () => {
|
|
337
|
339
|
agents.value.forEach(ele => {
|
|
338
|
340
|
ele.status = 'unknown'
|
|
339
|
341
|
})
|
|
340
|
|
- statistics.forEach(ele => {
|
|
|
342
|
+ statistics.value.forEach(ele => {
|
|
341
|
343
|
calculatCount('', ele.key, true)
|
|
342
|
344
|
})
|
|
343
|
345
|
}
|
|
344
|
346
|
|
|
345
|
347
|
const calculatCount = (oldStata, stateCode, isInit = false) => {
|
|
346
|
|
- console.log(oldStata, stateCode, 'stateCode')
|
|
|
348
|
+ // console.log(oldStata, stateCode, 'stateCode')
|
|
347
|
349
|
if (oldStata === stateCode) return;
|
|
348
|
|
- const info = statistics.find(item => item.key === stateCode);
|
|
|
350
|
+ const info = statistics.value.find(item => item.key === stateCode);
|
|
|
351
|
+
|
|
349
|
352
|
if (!info) return;
|
|
350
|
353
|
if (isInit) {
|
|
351
|
354
|
if (stateCode !== 'offline') info.count = 0
|
|
|
@@ -353,7 +356,7 @@ const calculatCount = (oldStata, stateCode, isInit = false) => {
|
|
353
|
356
|
return;
|
|
354
|
357
|
}
|
|
355
|
358
|
info.count++;
|
|
356
|
|
- const oldInfo = statistics.find(item => item.key === oldStata);
|
|
|
359
|
+ const oldInfo = statistics.value.find(item => item.key === oldStata);
|
|
357
|
360
|
if (oldInfo) oldInfo.count--;
|
|
358
|
361
|
|
|
359
|
362
|
}
|