270 lines
7.0 KiB
Vue
270 lines
7.0 KiB
Vue
<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="customerServicePlatform" style="width: 200px">
|
|
<el-select v-model="tableData.param.customerServicePlatform" placeholder="小红书" clearable size="default" style="width: 240px">
|
|
<el-option label="小红书" value="小红书" />
|
|
<el-option label="抖音" value="抖音" />
|
|
<el-option label="快手" value="快手" />
|
|
</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="querydate">
|
|
<el-icon>
|
|
<ele-Search />
|
|
</el-icon>
|
|
查询
|
|
</el-button>
|
|
<el-button size="default" @click="resetQuery(queryRef)">
|
|
<el-icon>
|
|
<ele-Refresh />
|
|
</el-icon>
|
|
重置
|
|
</el-button>
|
|
<el-button size="default" type="info" class="ml10" @click="handleExport" style="background-color: deeppink; border: 0">
|
|
<el-icon>
|
|
<ele-Download />
|
|
</el-icon>
|
|
导出
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<el-table :data="tableData.data" style="width: 100%">
|
|
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
|
<el-table-column label="日期" align="center" prop="date" width="180">
|
|
<template #default="{ row }">
|
|
{{ formatTime(row.date) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="客服平台" align="center" prop="customerServicePlatform" />
|
|
<el-table-column label="客服账号" align="center" prop="accountName" />
|
|
<el-table-column label="客服姓名" align="center" prop="customerServiceName" />
|
|
<el-table-column label="进线人数" align="center" prop="inboundCount" width="130" :show-overflow-tooltip="true" />
|
|
<el-table-column label="开口人数" align="center" prop="activeCount" :show-overflow-tooltip="true" />
|
|
<el-table-column label="留资卡发送数量" align="center" prop="contactCardSentCount" />
|
|
<el-table-column label="名片发送数" align="center" prop="nameCardSentCount" />
|
|
<el-table-column label="留资人数" align="center" prop="leftContactInfoCount" />
|
|
<el-table-column label="接待人数" align="center" prop="servedCount" />
|
|
<el-table-column label="30秒回复率" align="center" prop="responseRate30s" />
|
|
<el-table-column label="60秒回复率" align="center" prop="responseRate60s" />
|
|
<el-table-column label="3分钟回复率" align="center" prop="responseRate360s" />
|
|
</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>
|
|
<expotDialog ref="expotDialogRef"></expotDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, onMounted, nextTick } from 'vue';
|
|
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
|
|
import { getDataList } from '/@/api/customerService/report';
|
|
import expotDialog from '/@/views/customerService/report/component/exportDialog.vue';
|
|
|
|
// 定义接口
|
|
interface TableDataRow {
|
|
infoId: number;
|
|
loginName: string;
|
|
ipaddr: string;
|
|
loginLocation: string;
|
|
browser: string;
|
|
os: string;
|
|
status: number;
|
|
msg: string;
|
|
loginTime: string;
|
|
module: string;
|
|
platform: string;
|
|
}
|
|
interface TableDataParam {
|
|
pageNum: number;
|
|
pageSize: number;
|
|
dateRange: string[];
|
|
status: string;
|
|
ipaddr: string;
|
|
loginLocation: any;
|
|
userName: string;
|
|
customerServicePlatform: string;
|
|
startDate: string;
|
|
endDate: string;
|
|
}
|
|
|
|
interface TableData {
|
|
data: Array<TableDataRow>;
|
|
total: number;
|
|
loading: boolean;
|
|
param: TableDataParam;
|
|
}
|
|
|
|
// ==================== 时间处理函数 ====================
|
|
/**
|
|
* 格式化时间显示
|
|
*/
|
|
const formatTime = (time: string | number | Date): string => {
|
|
if (!time) return '-';
|
|
|
|
try {
|
|
let date: Date;
|
|
|
|
if (time instanceof Date) {
|
|
date = time;
|
|
} else if (typeof time === 'string') {
|
|
date = new Date(time);
|
|
} else {
|
|
let timestamp = time;
|
|
if (timestamp > 1000000000000) {
|
|
// 已经是毫秒时间戳
|
|
} else if (timestamp > 1000000000) {
|
|
// 秒时间戳，转换为毫秒
|
|
timestamp = timestamp * 1000;
|
|
}
|
|
date = new Date(timestamp);
|
|
}
|
|
|
|
if (isNaN(date.getTime())) {
|
|
return String(time);
|
|
}
|
|
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
|
|
return `${year}-${month}-${day}`;
|
|
} catch (error) {
|
|
console.error('时间格式化错误:', error);
|
|
return String(time);
|
|
}
|
|
};
|
|
//查询
|
|
const querydate = () => {
|
|
tableData.param.pageNum = 1;
|
|
tableData.param.startDate = tableData.param.dateRange[0];
|
|
tableData.param.endDate = tableData.param.dateRange[1];
|
|
console.log(tableData.param.customerServicePlatform);
|
|
|
|
dataList();
|
|
};
|
|
|
|
// 响应式数据
|
|
const queryRef = ref<FormInstance>();
|
|
const tableData = reactive<TableData>({
|
|
data: [],
|
|
total: 0,
|
|
loading: false,
|
|
param: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
dateRange: [],
|
|
customerServicePlatform: '',
|
|
status: '',
|
|
ipaddr: '',
|
|
loginLocation: '',
|
|
userName: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
},
|
|
});
|
|
|
|
// 方法定义
|
|
// 获取数据列表
|
|
const dataList = async () => {
|
|
try {
|
|
tableData.loading = true;
|
|
|
|
const res = await getDataList(tableData.param);
|
|
console.log(res);
|
|
|
|
console.log(tableData.param.dateRange, '日期');
|
|
|
|
tableData.data = res.data.list;
|
|
tableData.total = res.data.total;
|
|
} catch (error) {
|
|
console.error('获取数据失败:', error);
|
|
// 错误已由请求拦截器统一处理
|
|
} finally {
|
|
tableData.loading = false;
|
|
}
|
|
};
|
|
|
|
// 重置查询
|
|
const resetQuery = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return;
|
|
|
|
formEl.resetFields();
|
|
tableData.param = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
dateRange: [],
|
|
status: '',
|
|
ipaddr: '',
|
|
loginLocation: '',
|
|
userName: '',
|
|
customerServicePlatform: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
};
|
|
|
|
nextTick(() => {
|
|
dataList();
|
|
});
|
|
};
|
|
const expotDialogRef = ref();
|
|
// 导出数据
|
|
const handleExport = () => {
|
|
// ElMessage.info('导出功能开发中');
|
|
expotDialogRef.value?.openDialog(tableData.param);
|
|
};
|
|
|
|
// 初始化表格数据
|
|
const initTableData = () => {
|
|
dataList();
|
|
};
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
// 使用 nextTick 确保DOM已渲染完成
|
|
nextTick(() => {
|
|
initTableData();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.system-dic-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.system-user-search {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.mb15 {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.ml10 {
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|