|
@@ -1,151 +1,196 @@
|
|
|
<template>
|
|
|
- <div class="tels-callLog-container layout-pd">
|
|
|
- <el-card shadow="never">
|
|
|
- <el-radio-group v-model="telState" class="mb10" @change="queryList">
|
|
|
- <el-radio label=" "
|
|
|
- >总数:<el-tag type="">{{ state.tableList.length }}</el-tag></el-radio
|
|
|
- >
|
|
|
- <el-radio label=""
|
|
|
- >注册数:<el-tag type="success">{{ registerCount }}</el-tag></el-radio
|
|
|
- >
|
|
|
- <el-radio label="login"
|
|
|
- >签入数:<el-tag type="danger">{{ loginCount }}</el-tag></el-radio
|
|
|
- >
|
|
|
- <el-radio label="ready"
|
|
|
- >示闲数:<el-tag type="info">{{ readyCount }}</el-tag></el-radio
|
|
|
- >
|
|
|
- <el-radio label="unready"
|
|
|
- >示忙数:<el-tag type="success">{{ unreadyCount }}</el-tag></el-radio
|
|
|
- >
|
|
|
- <el-radio label="busy"
|
|
|
- >通话数:<el-tag type="danger">{{ busyCount }}</el-tag></el-radio
|
|
|
- >
|
|
|
- <el-radio label="acw"
|
|
|
- >整理数:<el-tag type="info">{{ acwCount }}</el-tag></el-radio
|
|
|
- >
|
|
|
- </el-radio-group>
|
|
|
- <!-- 表格 -->
|
|
|
- <el-table :data="state.showTableList" v-loading="state.loading">
|
|
|
- <el-table-column prop="telNo" label="分机号" show-overflow-tooltip width="200"></el-table-column>
|
|
|
- <el-table-column label="是否注册" show-overflow-tooltip width="200">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-tag v-if="row.sipState === 'true'" type="success">已注册</el-tag>
|
|
|
- <el-tag v-else type="danger">未注册</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="device" label="注册信息" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column label="状态" show-overflow-tooltip width="200">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-tag v-if="row.state === 'login'" type="success">签入</el-tag>
|
|
|
- <el-tag v-else-if="row.state === 'ready'" type="info">示闲</el-tag>
|
|
|
- <el-tag v-else-if="row.state === 'unready'" type="warning">示忙</el-tag>
|
|
|
- <el-tag v-else-if="row.state === 'busy'">通话</el-tag>
|
|
|
- <el-tag v-else-if="row.state === 'acw'" type="info">整理</el-tag>
|
|
|
- <el-tag v-else-if="row.state === 'logout'" type="danger">签出</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" width="100" fixed="right" align="center">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button link type="primary" @click="onListen(row)" title="监听分机" v-auth="'tels:extension:listen'" v-if="row.state === 'busy'">
|
|
|
- 监听分机
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <template #empty>
|
|
|
- <Empty />
|
|
|
- </template>
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
+ <div class="tels-callLog-container layout-pd">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <el-radio-group v-model="telState" class="mb10" @change="search">
|
|
|
+ <el-radio label=" "
|
|
|
+ >总数:
|
|
|
+ <el-tag type="">{{ state.tableList.length }}</el-tag>
|
|
|
+ </el-radio
|
|
|
+ >
|
|
|
+ <el-radio label="device"
|
|
|
+ >注册数:
|
|
|
+ <el-tag type="success">{{ registerCount }}</el-tag>
|
|
|
+ </el-radio
|
|
|
+ >
|
|
|
+ <el-radio label="login"
|
|
|
+ >签入数:
|
|
|
+ <el-tag type="danger">{{ loginCount }}</el-tag>
|
|
|
+ </el-radio
|
|
|
+ >
|
|
|
+ <el-radio label="ready"
|
|
|
+ >示闲数:
|
|
|
+ <el-tag type="info">{{ readyCount }}</el-tag>
|
|
|
+ </el-radio
|
|
|
+ >
|
|
|
+ <el-radio label="unready"
|
|
|
+ >小休数:
|
|
|
+ <el-tag type="success">{{ unreadyCount }}</el-tag>
|
|
|
+ </el-radio
|
|
|
+ >
|
|
|
+ <el-radio label="busy"
|
|
|
+ >通话数:
|
|
|
+ <el-tag type="danger">{{ busyCount }}</el-tag>
|
|
|
+ </el-radio
|
|
|
+ >
|
|
|
+ <el-radio label="acw"
|
|
|
+ >整理数:
|
|
|
+ <el-tag type="info">{{ acwCount }}</el-tag>
|
|
|
+ </el-radio
|
|
|
+ >
|
|
|
+ <el-radio label="held"
|
|
|
+ >保持数:
|
|
|
+ <el-tag type="success">{{ heldCount }}</el-tag>
|
|
|
+ </el-radio
|
|
|
+ >
|
|
|
+ <el-radio label="threeWay"
|
|
|
+ >三方会议数:
|
|
|
+ <el-tag type="danger">{{ threeWayCount }}</el-tag>
|
|
|
+ </el-radio
|
|
|
+ >
|
|
|
+ </el-radio-group>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table :data="state.showTableList" v-loading="state.loading">
|
|
|
+ <el-table-column prop="telNo" label="分机号" show-overflow-tooltip width="200"></el-table-column>
|
|
|
+ <el-table-column label="是否注册" show-overflow-tooltip width="200">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag v-if="row.sipState === 'true'" type="success">已注册</el-tag>
|
|
|
+ <el-tag v-else type="danger">未注册</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="device" label="注册信息" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column label="状态" show-overflow-tooltip width="200">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag v-if="row.state === 'login'" type="success">签入</el-tag>
|
|
|
+ <el-tag v-else-if="row.state === 'ready'" type="info">示闲</el-tag>
|
|
|
+ <el-tag v-else-if="row.state === 'unready'" type="warning">小休</el-tag>
|
|
|
+ <el-tag v-else-if="row.state === 'busy'">通话</el-tag>
|
|
|
+ <el-tag v-else-if="row.state === 'acw'" type="info">整理</el-tag>
|
|
|
+ <el-tag v-else-if="row.state === 'logout'" type="danger">签出</el-tag>
|
|
|
+ <el-tag v-else-if="row.state === 'held'" type="danger">保持</el-tag>
|
|
|
+ <el-tag v-else-if="row.state === 'threeWay'" type="danger">三方会议</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="100" fixed="right" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button link type="primary" @click="onListen(row)" title="监听分机" v-auth="'tels:extension:listen'" v-if="row.state === 'busy'">
|
|
|
+ 监听分机
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <Empty/>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup name="telsExtension">
|
|
|
-import { computed, onMounted, reactive, ref } from 'vue';
|
|
|
-import type { FormInstance } from 'element-plus';
|
|
|
-import { ElButton } from 'element-plus';
|
|
|
+import {computed, onMounted, reactive, ref} from 'vue';
|
|
|
+import type {FormInstance} from 'element-plus';
|
|
|
+import {ElButton} from 'element-plus';
|
|
|
import signalR from '@/utils/signalR';
|
|
|
-import { ola } from '@/utils/ola_api';
|
|
|
-import { storeToRefs } from 'pinia';
|
|
|
-import { useTelStatus } from '@/stores/telStatus';
|
|
|
-import { extensionPaged } from '@/api/tels/extension';
|
|
|
+import {ola} from '@/utils/ola_api';
|
|
|
+import {storeToRefs} from 'pinia';
|
|
|
+import {useTelStatus} from '@/stores/telStatus';
|
|
|
+import {extensionPaged} from '@/api/tels/extension';
|
|
|
|
|
|
// 定义变量内容
|
|
|
const state = reactive(<any>{
|
|
|
- tableList: [], // 列表数据
|
|
|
- showTableList: [], // 显示的列表数据
|
|
|
- loading: false, // 加载
|
|
|
- total: 0, // 总条数
|
|
|
+ tableList: [], // 列表数据
|
|
|
+ showTableList: [], // 显示的列表数据
|
|
|
+ loading: false, // 加载
|
|
|
+ total: 0, // 总条数
|
|
|
});
|
|
|
const telState = ref<string>(' ');
|
|
|
const useTelStatusStore = useTelStatus();
|
|
|
-const { telStatusInfo } = storeToRefs(useTelStatusStore); // 电话状态
|
|
|
+const {telStatusInfo} = storeToRefs(useTelStatusStore); // 电话状态
|
|
|
const ruleFormRef = ref<FormInstance>(); // 表单ref
|
|
|
/** 通话记录列表 */
|
|
|
const queryList = async () => {
|
|
|
- state.loading = true;
|
|
|
- try {
|
|
|
- const response = await extensionPaged();
|
|
|
- state.tableList = response.result;
|
|
|
- state.showTableList = state.tableList;
|
|
|
- if (telState.value !== ' ') {
|
|
|
- state.showTableList = state.tableList.filter((item: any) => item.state === telState.value);
|
|
|
- }
|
|
|
- state.loading = false;
|
|
|
- } catch (e) {
|
|
|
- state.loading = false;
|
|
|
- }
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+ const response = await extensionPaged();
|
|
|
+ state.tableList = response.result;
|
|
|
+ state.showTableList = state.tableList;
|
|
|
+ state.loading = false;
|
|
|
+ } catch (e) {
|
|
|
+ state.loading = false;
|
|
|
+ }
|
|
|
};
|
|
|
-/** 重置按钮操作 */
|
|
|
-const resetQuery = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
- formEl.resetFields();
|
|
|
- queryList();
|
|
|
+const search = () => {
|
|
|
+ state.loading = true;
|
|
|
+ if (telState.value !== ' ') {
|
|
|
+ if (telState.value === 'device') {
|
|
|
+ state.showTableList = state.tableList.filter((item: any) => item.sipState === 'true');
|
|
|
+ } else {
|
|
|
+ state.showTableList = state.tableList.filter((item: any) => item.state === telState.value);
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ state.loading = false;
|
|
|
+ }, 200);
|
|
|
+ } else {
|
|
|
+ state.showTableList = state.tableList;
|
|
|
+ setTimeout(() => {
|
|
|
+ state.loading = false;
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
};
|
|
|
// 注册数
|
|
|
const registerCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.cdpn).length;
|
|
|
+ return state.tableList.filter((item: any) => item.device).length;
|
|
|
});
|
|
|
// 签入数
|
|
|
const loginCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.state === 'login').length;
|
|
|
+ return state.tableList.filter((item: any) => item.state === 'login').length;
|
|
|
});
|
|
|
// 示闲数
|
|
|
const readyCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.state === 'ready').length;
|
|
|
+ return state.tableList.filter((item: any) => item.state === 'ready').length;
|
|
|
});
|
|
|
// 示忙数
|
|
|
const unreadyCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.state === 'unready').length;
|
|
|
+ return state.tableList.filter((item: any) => item.state === 'unready').length;
|
|
|
});
|
|
|
// 通话数
|
|
|
const busyCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.state === 'busy').length;
|
|
|
+ return state.tableList.filter((item: any) => item.state === 'busy').length;
|
|
|
});
|
|
|
// 整理数
|
|
|
const acwCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.state === 'acw').length;
|
|
|
+ return state.tableList.filter((item: any) => item.state === 'acw').length;
|
|
|
+});
|
|
|
+// 保持数
|
|
|
+const heldCount = computed(() => {
|
|
|
+ return state.tableList.filter((item: any) => item.state === 'held').length;
|
|
|
+});
|
|
|
+// 三方会议数
|
|
|
+const threeWayCount = computed(() => {
|
|
|
+ return state.tableList.filter((item: any) => item.state === 'threeWay').length;
|
|
|
});
|
|
|
// 监听分机
|
|
|
const onListen = (row: any) => {
|
|
|
- ola.monitor(row.telNo, telStatusInfo.value.telsNo);
|
|
|
+ ola.monitor(row.telNo, telStatusInfo.value.telsNo);
|
|
|
};
|
|
|
onMounted(() => {
|
|
|
- queryList();
|
|
|
- signalR.joinGroup('BigScreen-SeatState');
|
|
|
- signalR.SR.on('SeatState', (data: any) => {
|
|
|
- const item = state.tableList.find((item: any) => item.telNo === data.telNo);
|
|
|
- if (item) {
|
|
|
- item.state = data.state;
|
|
|
- }
|
|
|
- });
|
|
|
+ queryList();
|
|
|
+ signalR.joinGroup('BigScreen-SeatState');
|
|
|
+ signalR.SR.on('SeatState', (data: any) => {
|
|
|
+ const item = state.tableList.find((item: any) => item.telNo === data.telNo);
|
|
|
+ if (item) {
|
|
|
+ item.state = data.state;
|
|
|
+ }
|
|
|
+ search();
|
|
|
+ });
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.arrow {
|
|
|
- transition: transform var(--el-transition-duration);
|
|
|
- cursor: pointer;
|
|
|
+ transition: transform var(--el-transition-duration);
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.arrow.is-reverse {
|
|
|
- transform: rotateZ(-180deg);
|
|
|
+ transform: rotateZ(-180deg);
|
|
|
}
|
|
|
</style>
|