|
|
@@ -1,212 +1,27 @@
|
|
|
<template>
|
|
|
- <div class="tels-callLog-container layout-padding">
|
|
|
- <div class="layout-padding-auto layout-padding-view pd20">
|
|
|
- <ProTable
|
|
|
- ref="proTableRef"
|
|
|
- :columns="columns"
|
|
|
- :data="state.tableData"
|
|
|
- @updateTable="queryList"
|
|
|
- :loading="state.loading"
|
|
|
- :pagination="false"
|
|
|
- row-key="telNo"
|
|
|
- >
|
|
|
- <template #tableHeader>
|
|
|
- <el-radio-group v-model="telState" class="mb10" @change="search">
|
|
|
- <el-radio value=" "
|
|
|
- >总数：
|
|
|
- <el-tag>{{ state.tableList.length }}</el-tag>
|
|
|
- </el-radio>
|
|
|
- <el-radio value="device"
|
|
|
- >注册数：
|
|
|
- <el-tag type="success">{{ registerCount }}</el-tag>
|
|
|
- </el-radio>
|
|
|
- <el-radio value="login"
|
|
|
- >签入数：
|
|
|
- <el-tag type="danger">{{ loginCount }}</el-tag>
|
|
|
- </el-radio>
|
|
|
- <el-radio value="ready"
|
|
|
- >示闲数：
|
|
|
- <el-tag type="info">{{ readyCount }}</el-tag>
|
|
|
- </el-radio>
|
|
|
- <el-radio value="unready"
|
|
|
- >小休数：
|
|
|
- <el-tag type="success">{{ unreadyCount }}</el-tag>
|
|
|
- </el-radio>
|
|
|
- <el-radio value="ring"
|
|
|
- >振铃数：
|
|
|
- <el-tag type="info">{{ busyCount }}</el-tag>
|
|
|
- </el-radio>
|
|
|
- <el-radio value="busy"
|
|
|
- >通话数：
|
|
|
- <el-tag type="danger">{{ busyCount }}</el-tag>
|
|
|
- </el-radio>
|
|
|
- <el-radio value="acw"
|
|
|
- >整理数：
|
|
|
- <el-tag type="info">{{ acwCount }}</el-tag>
|
|
|
- </el-radio>
|
|
|
- <el-radio value="held"
|
|
|
- >保持数：
|
|
|
- <el-tag type="success">{{ heldCount }}</el-tag>
|
|
|
- </el-radio>
|
|
|
- <el-radio value="threeWay"
|
|
|
- >三方会议数：
|
|
|
- <el-tag type="danger">{{ threeWayCount }}</el-tag>
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </template>
|
|
|
- <template #sipState="{ row }">
|
|
|
- <el-tag v-if="row.sipState === 'true'" type="success">已注册</el-tag>
|
|
|
- <el-tag v-else type="danger">未注册</el-tag>
|
|
|
- </template>
|
|
|
- <template #state="{ 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 === 'ring'" type="danger">振铃中</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>
|
|
|
- <template #operation="{ row }">
|
|
|
- <!-- <el-button link type="primary" @click="onListen(row)" title="监听分机" v-auth="'tels:extension:listen'" v-if="row.state === 'busy'">
|
|
|
- 监听分机
|
|
|
- </el-button>-->
|
|
|
- <el-button link type="primary" @click="onOffline(row)" title="强制下线" v-auth="'tels:extension:forceLogout'"> 强制下线 </el-button>
|
|
|
- </template>
|
|
|
- </ProTable>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <component :is="currentCity" />
|
|
|
</template>
|
|
|
|
|
|
-<script lang="tsx" setup name="telsExtension">
|
|
|
-import { computed, onMounted, reactive, ref, onBeforeUnmount } from 'vue';
|
|
|
-import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
-import signalR from '@/utils/signalR';
|
|
|
-import { extensionList, forceLogout } from '@/api/tels/extension';
|
|
|
+<script lang="tsx" setup name="callLog">
|
|
|
+import { defineAsyncComponent, computed } from 'vue';
|
|
|
+import { useThemeConfig } from '@/stores/themeConfig';
|
|
|
+import { storeToRefs } from 'pinia';
|
|
|
|
|
|
-const proTableRef = ref<RefType>(); // 表格ref
|
|
|
-// 表格配置项
|
|
|
-const columns = ref<any[]>([
|
|
|
- { prop: 'telNo', label: '分机号', width: 200 },
|
|
|
- { prop: 'sipState', label: '是否注册', width: 200 },
|
|
|
- {
|
|
|
- prop: 'device',
|
|
|
- label: '注册信息',
|
|
|
- render: (scope: any) => {
|
|
|
- return (
|
|
|
- <span>
|
|
|
- {scope.row.device}({scope.row.sipIp})
|
|
|
- </span>
|
|
|
- );
|
|
|
- },
|
|
|
- },
|
|
|
- { prop: 'state', label: '状态', width: 200 },
|
|
|
- { prop: 'operation', label: '操作', fixed: 'right', width: 90, align: 'center' },
|
|
|
-]);
|
|
|
-// 定义变量内容
|
|
|
-const state = reactive({
|
|
|
- tableList: [], // 列表数据
|
|
|
- tableData: [], // 显示的列表数据
|
|
|
- loading: false, // 加载
|
|
|
- total: 0, // 总条数
|
|
|
-});
|
|
|
-const telState = ref<string>(' ');
|
|
|
-/** 通话记录列表 */
|
|
|
-const queryList = async () => {
|
|
|
- state.loading = true;
|
|
|
- try {
|
|
|
- const { result } = await extensionList({ hasListen: true });
|
|
|
- // state.tableList = [...result,...result,...result];
|
|
|
- state.tableList = result;
|
|
|
- state.tableData = state.tableList;
|
|
|
- state.loading = false;
|
|
|
- } catch (e) {
|
|
|
- state.loading = false;
|
|
|
- }
|
|
|
-};
|
|
|
-const search = () => {
|
|
|
- state.loading = true;
|
|
|
- if (telState.value !== ' ') {
|
|
|
- if (telState.value === 'device') {
|
|
|
- state.tableData = state.tableList.filter((item: any) => item.sipState === 'true');
|
|
|
- } else {
|
|
|
- state.tableData = state.tableList.filter((item: any) => item.state === telState.value);
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- state.loading = false;
|
|
|
- }, 200);
|
|
|
- } else {
|
|
|
- state.tableData = state.tableList;
|
|
|
- setTimeout(() => {
|
|
|
- state.loading = false;
|
|
|
- }, 200);
|
|
|
- }
|
|
|
-};
|
|
|
-// 注册数
|
|
|
-const registerCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.device).length;
|
|
|
-});
|
|
|
-// 签入数
|
|
|
-const loginCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.state === 'login').length;
|
|
|
-});
|
|
|
-// 示闲数
|
|
|
-const readyCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.state === 'ready').length;
|
|
|
-});
|
|
|
-// 示忙数
|
|
|
-const unreadyCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.state === 'unready').length;
|
|
|
-});
|
|
|
-// 通话数
|
|
|
-const busyCount = computed(() => {
|
|
|
- return state.tableList.filter((item: any) => item.state === 'busy').length;
|
|
|
-});
|
|
|
-// 整理数
|
|
|
-const acwCount = computed(() => {
|
|
|
- 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 onOffline = (row: any) => {
|
|
|
- ElMessageBox.confirm(`确定要强制下线${row.telNo}？`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- forceLogout({ telNo: row.telNo })
|
|
|
- .then(() => {
|
|
|
- ElMessage.success('强制下线成功');
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- // forceLogout(row.telNo);
|
|
|
+// 引入组件
|
|
|
+const YiBin = defineAsyncComponent(() => import('@/views/tels/extension/YBExtension.vue')); // 宜宾分机列表
|
|
|
+const ZiGong = defineAsyncComponent(() => import('@/views/tels/extension/ZGExtension.vue')); // 自贡分机列表
|
|
|
+const LuZhou = defineAsyncComponent(() => import('@/views/tels/extension/ZGExtension.vue')); // 泸州分机列表
|
|
|
+
|
|
|
+const storesThemeConfig = useThemeConfig();
|
|
|
+const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
|
+
|
|
|
+const COMPONENT_LIST = {
|
|
|
+ YiBin,
|
|
|
+ ZiGong,
|
|
|
+ LuZhou
|
|
|
};
|
|
|
-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;
|
|
|
- }
|
|
|
- search();
|
|
|
- });
|
|
|
-});
|
|
|
-onBeforeUnmount(() => {
|
|
|
- signalR.SR.off('SeatState');
|
|
|
+// 当前地州市
|
|
|
+const currentCity = computed(() => {
|
|
|
+ return COMPONENT_LIST[themeConfig.value.appScope];
|
|
|
});
|
|
|
</script>
|
zhangchong