2025-11-22 16:39:01 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="system-dic-container">
|
|
|
|
|
<el-card shadow="hover">
|
|
|
|
|
<div class="system-user-search mb15">
|
|
|
|
|
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-form-item label="客服平台" prop="status" style="width: 200px;">
|
|
|
|
|
<el-select v-model="tableData.param.status" placeholder="小红书" clearable size="default"
|
|
|
|
|
style="width: 240px">
|
|
|
|
|
<el-option :label="'小红书'" />
|
|
|
|
|
<el-option :label="'抖音'" />
|
|
|
|
|
<el-option :label="'快手'" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-form-item label="" prop="dateRange">
|
|
|
|
|
<el-date-picker v-model="tableData.param.dateRange" size="default" style="width: 240px"
|
|
|
|
|
value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="请选择开始日期"
|
|
|
|
|
end-placeholder="请选择结束日期"></el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button size="default" type="primary" class="ml10" @click="dataList">
|
|
|
|
|
<el-icon>
|
|
|
|
|
<ele-Search />
|
|
|
|
|
</el-icon>
|
|
|
|
|
查询
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button size="default" @click="resetQuery(queryRef)">
|
|
|
|
|
<el-icon>
|
|
|
|
|
<ele-Refresh />
|
|
|
|
|
</el-icon>
|
|
|
|
|
重置
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
|
|
|
|
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
|
|
|
|
<el-table-column label="日期" align="center" prop="loginTime" width="180" />
|
|
|
|
|
<el-table-column label="客服平台" align="center" prop="platform" />
|
|
|
|
|
<el-table-column label="客服ID" align="center" prop="infoId" />
|
|
|
|
|
<el-table-column label="客服姓名" align="center" prop="loginName" />
|
|
|
|
|
<el-table-column label="进线人数" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
|
|
|
|
|
<el-table-column label="开口人数" align="center" prop="loginLocation" :s0ow-overflow-tooltip="true" />
|
|
|
|
|
<el-table-column label="留资卡发送数量" align="center" prop="browser" />
|
|
|
|
|
<el-table-column label="名片发送数" align="center" prop="os" />
|
|
|
|
|
<!-- <el-table-column label="留资人数" align="center" prop="status" :formatter="statusFormat" /> -->
|
|
|
|
|
<el-table-column label="留资人数" align="center" prop="status" />
|
|
|
|
|
<el-table-column label="接待人数" align="center" prop="msg" />
|
|
|
|
|
<el-table-column label="30秒回复率" alian="center" prop="module" />
|
|
|
|
|
<el-table-column label="60秒回复率" alian="center" prop="module" />
|
|
|
|
|
<el-table-column label="3分钟回复率" alian="center" prop="module" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-table>
|
|
|
|
|
<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
|
|
|
|
|
v-model:limit="tableData.param.pageSize" @pagination="dataList" />
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance, unref } from 'vue';
|
|
|
|
|
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
|
|
|
|
|
import { logList, deleteLog, clearLog } from '/@/api/system/monitor/loginLog';
|
|
|
|
|
import { log } from 'console';
|
|
|
|
|
|
|
|
|
|
// 定义接口来定义对象的类型
|
|
|
|
|
interface TableDataRow {
|
|
|
|
|
infoId: number;
|
|
|
|
|
loginName: string;
|
|
|
|
|
ipaddr: string;
|
|
|
|
|
loginLocation: string;
|
|
|
|
|
browser: string;
|
|
|
|
|
os: string;
|
|
|
|
|
status: number;
|
|
|
|
|
msg: string;
|
|
|
|
|
loginTime: string;
|
|
|
|
|
module: string;
|
|
|
|
|
}
|
|
|
|
|
interface TableDataState {
|
|
|
|
|
ids: number[];
|
|
|
|
|
tableData: {
|
|
|
|
|
data: Array<TableDataRow>;
|
|
|
|
|
total: number;
|
|
|
|
|
loading: boolean;
|
|
|
|
|
param: {
|
|
|
|
|
pageNum: number;
|
|
|
|
|
pageSize: number;
|
|
|
|
|
dateRange: string[];
|
|
|
|
|
status: string;
|
|
|
|
|
ipaddr: string;
|
|
|
|
|
loginLocation: any;
|
|
|
|
|
userName: string;
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
name: 'apiV1SystemLoginLogList',
|
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
|
|
//模拟数据
|
|
|
|
|
const dateList = ref([
|
|
|
|
|
{
|
|
|
|
|
"infoId": 434569527,
|
|
|
|
|
"loginName": "demo",
|
|
|
|
|
"ipaddr": "0",
|
|
|
|
|
"loginLocation": "0",
|
|
|
|
|
"browser": "0",
|
|
|
|
|
"os": "0",
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "0",
|
|
|
|
|
"loginTime": "2025-11-22",
|
|
|
|
|
"module": "0",
|
|
|
|
|
"platform": '抖音'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"infoId": 424569527,
|
|
|
|
|
"loginName": "demo",
|
|
|
|
|
"ipaddr": "0",
|
|
|
|
|
"loginLocation": "0",
|
|
|
|
|
"browser": "0",
|
|
|
|
|
"os": "0",
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "0",
|
|
|
|
|
"loginTime": "2025-11-22",
|
|
|
|
|
"module": "0",
|
|
|
|
|
"platform": '小红书'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"infoId": 414569527,
|
|
|
|
|
"loginName": "demo",
|
|
|
|
|
"ipaddr": "0",
|
|
|
|
|
"loginLocation": "0",
|
|
|
|
|
"browser": "0",
|
|
|
|
|
"os": "0",
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "0",
|
|
|
|
|
"loginTime": "2025-11-22",
|
|
|
|
|
"module": "0",
|
|
|
|
|
"platform": '快手'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"infoId": 404569527,
|
|
|
|
|
"loginName": "demo",
|
|
|
|
|
"ipaddr": "0",
|
|
|
|
|
"loginLocation": "0",
|
|
|
|
|
"browser": "0",
|
|
|
|
|
"os": "0",
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "0",
|
|
|
|
|
"loginTime": "2025-11-22",
|
|
|
|
|
"module": "0",
|
|
|
|
|
"platform": '小红书'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"infoId": 394569527,
|
|
|
|
|
"loginName": "demo",
|
|
|
|
|
"ipaddr": "0",
|
|
|
|
|
"loginLocation": "0",
|
|
|
|
|
"browser": "0",
|
|
|
|
|
"os": "0",
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "0",
|
|
|
|
|
"loginTime": "2025-11-22",
|
|
|
|
|
"module": "0",
|
|
|
|
|
"platform": '小红书'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"infoId": 384569527,
|
|
|
|
|
"loginName": "demo",
|
|
|
|
|
"ipaddr": "0",
|
|
|
|
|
"loginLocation": "0",
|
|
|
|
|
"browser": "0",
|
|
|
|
|
"os": "0",
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "0",
|
|
|
|
|
"loginTime": "2025-11-22",
|
|
|
|
|
"module": "0",
|
|
|
|
|
"platform": '快手'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"infoId": 374569527,
|
|
|
|
|
"loginName": "demo",
|
|
|
|
|
"ipaddr": "0",
|
|
|
|
|
"loginLocation": "0",
|
|
|
|
|
"browser": "0",
|
|
|
|
|
"os": "0",
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "0",
|
|
|
|
|
"loginTime": "2025-11-22",
|
|
|
|
|
"module": "0",
|
|
|
|
|
"platform": '小红书'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"infoId": 364569527,
|
|
|
|
|
"loginName": "demo",
|
|
|
|
|
"ipaddr": "0",
|
|
|
|
|
"loginLocation": "0",
|
|
|
|
|
"browser": "0",
|
|
|
|
|
"os": "0",
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "0",
|
|
|
|
|
"loginTime": "2025-11-22",
|
|
|
|
|
"module": "0",
|
|
|
|
|
"platform": '抖音'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"infoId": 354569527,
|
|
|
|
|
"loginName": "demo",
|
|
|
|
|
"ipaddr": "0",
|
|
|
|
|
"loginLocation": "0",
|
|
|
|
|
"browser": "0",
|
|
|
|
|
"os": "0",
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "0",
|
|
|
|
|
"loginTime": "2025-11-22",
|
|
|
|
|
"module": "0",
|
|
|
|
|
"platform": '小红书'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"infoId": 344569527,
|
|
|
|
|
"loginName": "demo",
|
|
|
|
|
"ipaddr": "0",
|
|
|
|
|
"loginLocation": "0",
|
|
|
|
|
"browser": "0",
|
|
|
|
|
"os": "0",
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "0",
|
|
|
|
|
"loginTime": "2025-11-22",
|
|
|
|
|
"module": "0",
|
|
|
|
|
"platform": '小红书'
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as any;
|
|
|
|
|
const queryRef = ref();
|
|
|
|
|
const { admin_login_status } = proxy.useDict('admin_login_status')
|
|
|
|
|
const state = reactive<TableDataState>({
|
|
|
|
|
ids: [],
|
|
|
|
|
tableData: {
|
|
|
|
|
data: [],
|
|
|
|
|
total: 0,
|
|
|
|
|
loading: false,
|
|
|
|
|
param: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
dateRange: [],
|
|
|
|
|
status: '',
|
|
|
|
|
ipaddr: '',
|
|
|
|
|
loginLocation: '',
|
|
|
|
|
userName: ''
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
// 初始化表格数据
|
|
|
|
|
const initTableData = () => {
|
|
|
|
|
dataList()
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const dataList = () => {
|
|
|
|
|
// logList(state.tableData.param).then((res: any) => {
|
|
|
|
|
// state.tableData.data = res.data.list;
|
|
|
|
|
// console.log(state.tableData.data, '11111');
|
|
|
|
|
// state.tableData.total = res.data.total;
|
|
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
state.tableData.data = dateList.value;
|
|
|
|
|
console.log(state.tableData.data, '11111');
|
|
|
|
|
state.tableData.total = dateList.value.length;
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
// 删除日志
|
|
|
|
|
const onRowDel = (row: TableDataRow) => {
|
|
|
|
|
let msg = '你确定要删除所选数据？';
|
|
|
|
|
let ids: number[] = [];
|
|
|
|
|
if (row) {
|
|
|
|
|
msg = `此操作将永久删除：“${row.loginName}”，是否继续?`
|
|
|
|
|
ids = [row.infoId]
|
|
|
|
|
4569527
|
|
|
|
|
} else {
|
|
|
|
|
ids = state.ids
|
|
|
|
|
}
|
|
|
|
|
if (ids.length === 0) {
|
|
|
|
|
ElMessage.error('请选择要删除的数据。');
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
ElMessageBox.confirm(msg, '提示', {
|
|
|
|
|
confirmButtonText: '确认',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
deleteLog(ids).then(() => {
|
|
|
|
|
ElMessage.success('删除成功');
|
|
|
|
|
dataList();
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.catch(() => { });
|
|
|
|
|
};
|
|
|
|
|
// 清空日志
|
|
|
|
|
const onRowClear = () => {
|
|
|
|
|
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
|
|
|
|
|
confirmButtonText: '确认',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
clearLog().then(() => {
|
|
|
|
|
ElMessage.success('清除成功');
|
|
|
|
|
dataList();
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.catch(() => { });
|
|
|
|
|
};
|
|
|
|
|
// 页面加载时
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
initTableData();
|
|
|
|
|
});
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
|
const resetQuery = (formEl: FormInstance | undefined) => {
|
|
|
|
|
if (!formEl) return
|
|
|
|
|
formEl.resetFields()
|
|
|
|
|
dataList()
|
|
|
|
|
};
|
|
|
|
|
// 多选框选中数据
|
|
|
|
|
const handleSelectionChange = (selection: TableDataRow[]) => {
|
|
|
|
|
state.ids = selection.map(item => item.infoId)
|
|
|
|
|
4569527
|
|
|
|
|
};
|
|
|
|
|
// 登录状态字典翻译
|
|
|
|
|
const statusFormat = (row: TableDataRow) => {
|
|
|
|
|
return proxy.selectDictLabel(unref(admin_login_status), row.status);
|
|
|
|
|
};
|
|
|
|
|
return {
|
|
|
|
|
queryRef,
|
|
|
|
|
onRowDel,
|
|
|
|
|
dataList,
|
|
|
|
|
resetQuery,
|
|
|
|
|
handleSelectionChange,
|
|
|
|
|
statusFormat,
|
|
|
|
|
onRowClear,
|
|
|
|
|
admin_login_status,
|
|
|
|
|
...toRefs(state),
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
</script>
|
