270 lines
9.4 KiB
Vue
270 lines
9.4 KiB
Vue
<template>
|
|
<div class="p-2 app-container monitor-online-page">
|
|
<Pagecrumb style="margin-top:22px"></Pagecrumb>
|
|
<div class="search-wrap">
|
|
<el-card class="search-panel" shadow="hover">
|
|
<el-form ref="queryFormRef" :inline="true" :model="queryParams" class="query-form" label-position="top">
|
|
<el-form-item label="会话ID" prop="sessionNo">
|
|
<el-input v-model="queryParams.sessionNo" clearable placeholder="请输入会话编号" size="large"
|
|
style="width: 150px" @keyup.enter="handleQuery"/>
|
|
</el-form-item>
|
|
<el-form-item label="用户手机号" prop="ipaddr">
|
|
<el-input v-model="queryParams.ipaddr" clearable placeholder="请输入用户手机号" size="large"
|
|
style="width: 150px" @keyup.enter="handleQuery"/>
|
|
</el-form-item>
|
|
<el-form-item label="会话状态" prop="status">
|
|
<el-select
|
|
v-model="queryParams.status"
|
|
:empty-values="[null, undefined]"
|
|
:value-on-clear="null"
|
|
clearable
|
|
placeholder="请选择会话状态"
|
|
size="large"
|
|
style="width: 150px"
|
|
>
|
|
<el-option v-for="(item,index) in com_session_state " :key="index" :label="item.label"
|
|
:value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="问题类型" prop="problemType">
|
|
<el-select
|
|
v-model="queryParams.problemType"
|
|
:empty-values="[null, undefined]"
|
|
:value-on-clear="null"
|
|
clearable
|
|
placeholder="请选择问题类型"
|
|
size="large"
|
|
style="width: 150px"
|
|
>
|
|
<el-option label="在线" value="0"></el-option>
|
|
<el-option label="离线" value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="关联设备" prop="deviceId">
|
|
<el-input v-model="queryParams.deviceId" clearable placeholder="请输入MAC/设备名称" size="large"
|
|
style="width: 150px" @keyup.enter="handleQuery"/>
|
|
</el-form-item>
|
|
<el-form-item label="会话创建时间" prop="startTime">
|
|
<el-date-picker
|
|
v-model="queryParams.startTime"
|
|
end-placeholder="结束日期"
|
|
range-separator="-"
|
|
single-panel
|
|
size="large"
|
|
start-placeholder="开始日期"
|
|
style="width: 220px"
|
|
type="daterange"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="接待客服" prop="agentId">
|
|
<el-select
|
|
v-model="queryParams.agentId"
|
|
:empty-values="[null, undefined]"
|
|
:value-on-clear="null"
|
|
clearable
|
|
size="large"
|
|
style="width: 150px"
|
|
>
|
|
<el-option label="在线" value="0"></el-option>
|
|
<el-option label="离线" value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button size="large" type="primary" @click="handleQuery">搜索</el-button>
|
|
<el-button size="large" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
<el-card class="table-panel" shadow="hover">
|
|
<template #header>
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<el-button type="primary">
|
|
<span style="margin:0 8px;color: #fff;">全部</span>
|
|
<span style="color: #fff;font-weight: bold">1286</span>
|
|
</el-button>
|
|
<tableTag :num="862" circle-color="#7c3aed" title="机器人接待"></tableTag>
|
|
<tableTag :num="7" circle-color="#ea580c" title="排队等待"></tableTag>
|
|
<tableTag :num="12" title="人工接待"></tableTag>
|
|
<tableTag :num="405" circle-color="#94a3b8" title="已结束"></tableTag>
|
|
</div>
|
|
<div>
|
|
<el-button plain type="info">批量导出</el-button>
|
|
<el-button plain type="info">刷新</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="onlineList"
|
|
border
|
|
class="data-table"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column align="center" type="selection"></el-table-column>
|
|
<el-table-column :show-overflow-tooltip="true" align="center" label="会话ID" prop="sessionNo"/>
|
|
<el-table-column :show-overflow-tooltip="true" align="center" label="用户信息" prop="userNickName"/>
|
|
<el-table-column :show-overflow-tooltip="true" align="center" label="关联设备" prop="deviceId"/>
|
|
<el-table-column align="center" label="会话状态" width="100">
|
|
<template #default="scope">
|
|
<dict-tag :options="com_session_state" :value="scope.row.status"></dict-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :show-overflow-tooltip="true" align="center" label="当前接待人" prop="agentName" width="160">
|
|
<template #default="scope">
|
|
<div class="name">{{ scope.row.agentName }}</div>
|
|
<div class="no"></div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :show-overflow-tooltip="true" align="center" label="用户问题摘要" prop="summary"/>
|
|
<el-table-column :show-overflow-tooltip="true" align="center" label="排队序号" prop="queueNo" width="100"/>
|
|
<el-table-column :show-overflow-tooltip="true" align="center" label="等待时长" prop="os" width="100"/>
|
|
<el-table-column :show-overflow-tooltip="true" align="center" label="最后消息时间" prop="lastMessageTime"
|
|
width="160"/>
|
|
<el-table-column align="center" class-name="small-padding fixed-width" label="操作" min-width="200">
|
|
<template #default="scope">
|
|
<div>
|
|
<el-button
|
|
v-if="scope.row.staus !== '3'"
|
|
v-hasPermi="['cs:session:query']"
|
|
type="primary"
|
|
@click="handleOpenConversation(scope.row)"
|
|
>进入会话
|
|
</el-button>
|
|
<el-button
|
|
v-hasPermi="['monitor:online:forceLogout']"
|
|
type="primary"
|
|
v-else
|
|
@click="handleMain(scope.row)"
|
|
>查看会话
|
|
</el-button>
|
|
<el-button
|
|
v-hasPermi="['monitor:online:forceLogout']"
|
|
plain
|
|
type="info"
|
|
@click="handleUserMain(scope.row)"
|
|
>用户档案
|
|
</el-button>
|
|
<el-button
|
|
v-hasPermi="['monitor:online:forceLogout']"
|
|
plain
|
|
type="danger"
|
|
v-if="scope.row.status === '2'"
|
|
@click="handleCloseConversation(scope.row)"
|
|
>关闭会话
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="total > 0"
|
|
v-model:limit="queryParams.pageSize"
|
|
v-model:page="queryParams.pageNum"
|
|
:total="total"
|
|
/>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" name="Online" setup>
|
|
import {to} from 'await-to-js';
|
|
import {closeCsSession, listCsSession as initData} from '@/api/system/conversation/index';
|
|
import {CsSessionQuery, CsSessionVO} from '@/api/system/conversation/types';
|
|
import modal from '@/plugins/modal';
|
|
import {useDict} from '@/utils/dict';
|
|
import {parseTime} from '@/utils/ruoyi';
|
|
|
|
const {com_session_state} = toRefs<any>(useDict('com_session_state'));
|
|
|
|
const router = useRouter();
|
|
|
|
const onlineList = ref<CsSessionVO[]>([]);
|
|
const loading = ref(true);
|
|
const total = ref(0);
|
|
|
|
const queryFormRef = ref<ElFormInstance>();
|
|
|
|
const queryParams = ref<CsSessionQuery>({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
ipaddr: '',
|
|
userName: ''
|
|
});
|
|
|
|
/** 查询登录日志列表 */
|
|
const getList = async () => {
|
|
loading.value = true;
|
|
const res = await initData(queryParams.value);
|
|
onlineList.value = res.data?.rows;
|
|
total.value = res.data?.total;
|
|
loading.value = false;
|
|
};
|
|
/** 搜索按钮操作 */
|
|
const handleQuery = () => {
|
|
queryParams.value.pageNum = 1;
|
|
getList();
|
|
};
|
|
/** 重置按钮操作 */
|
|
const resetQuery = () => {
|
|
queryFormRef.value?.resetFields();
|
|
handleQuery();
|
|
};
|
|
|
|
// 用户 档案
|
|
function handleUserMain(row: Partial<CsSessionVO>) {
|
|
router.push({
|
|
path: '/customer/customerMain',
|
|
query: {
|
|
id: row.userId,
|
|
}
|
|
})
|
|
}
|
|
|
|
// 进入会话
|
|
function handleOpenConversation(row: Partial<CsSessionVO>) {
|
|
router.push({
|
|
path: '/conversation/conversationMain',
|
|
query: {
|
|
id: row.sessionId,
|
|
}
|
|
})
|
|
}
|
|
|
|
// close conversation
|
|
function handleCloseConversation(row: Partial<CsSessionVO>) {
|
|
closeCsSession(row.sessionId).then(() => {
|
|
getList();
|
|
modal.msgSuccess('关闭会话成功')
|
|
})
|
|
}
|
|
|
|
function handleMain(row: Partial<CsSessionVO>) {
|
|
console.log(row);
|
|
router.push({
|
|
path: '/conversation/conversationMain'
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use '@/assets/styles/components/page-shell' as pageShell;
|
|
|
|
@include pageShell.table-crud-page;
|
|
|
|
|
|
.circle {
|
|
width: 7px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background-color: rgba(124, 58, 237, 1)
|
|
}
|
|
</style>
|