123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- <template>
- <div class="statistics-call-detail-talk-time-container layout-pd">
- <!-- 搜索 -->
- <el-card shadow="never" v-if="showSearch">
- <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
- <el-form-item label="状态" prop="type">
- <el-select v-model="state.queryParams.type" placeholder="请选择状态" clearable @change="handleQuery">
- <el-option v-for="item in state.callForwardingType" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
- </el-select>
- </el-form-item>
- <el-form-item label="来源" prop="source">
- <el-select v-model="state.queryParams.source" placeholder="请选择来源" clearable @change="handleQuery">
- <el-option v-for="item in state.callForwardingSource" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
- </el-select>
- </el-form-item>
- <el-form-item label="时间段" prop="crTime">
- <el-date-picker
- v-model="state.queryParams.crTime"
- type="daterange"
- unlink-panels
- range-separator="至"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- :shortcuts="shortcuts"
- @change="handleQuery"
- value-format="YYYY-MM-DD"
- :clearable="false"
- />
- </el-form-item>
- <el-form-item label-width="0">
- <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
- <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
- <SvgIcon name="ele-Refresh" class="mr5" />重置
- </el-button>
- </el-form-item>
- </el-form>
- </el-card>
- <el-card shadow="never">
- <ProTable
- ref="proTableRef"
- :columns="columns"
- :data="state.tableData"
- @updateTable="queryList"
- :loading="state.loading"
- :total="state.total"
- v-model:page-index="state.queryParams.PageIndex"
- v-model:page-size="state.queryParams.PageSize"
- show-summary
- border
- :summary-method="getSummaries"
- >
- </ProTable>
- </el-card>
- </div>
- </template>
- <script setup lang="tsx" name="statisticsCallDetailTalkTime">
- import { computed, onMounted, reactive, ref } from 'vue';
- import { FormInstance } from 'element-plus';
- import { callPeriodBase, callPeriodDetail } from '@/api/statistics/call';
- import { defaultDate, shortcuts } from '@/utils/constants';
- import { formatDate } from '@/utils/formatTime';
- import { useRoute } from 'vue-router';
- const proTableRef = ref<RefType>(); // 表格ref
- // 表格配置项
- const columns = ref<any[]>([
- { type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
- { prop: 'cpn', label: '主叫号码', align: 'center' },
- {
- prop: 'cdpn',
- label: '被叫号码',
- align: 'center',
- },
- {
- prop: 'createdTime',
- label: '来电时间',
- align: 'center',
- render: (scope) => {
- return <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
- },
- },
- ]);
- // 定义变量内容
- const ruleFormRef = ref<RefType>(); // 表单ref
- const state = reactive({
- queryParams: {
- // 查询条件
- type: null,
- source: null,
- crTime: defaultDate,
- PageIndex: 1,
- PageSize: 10,
- },
- tableData: [], //表单
- loading: false, // 加载
- total: 0, // 总数
- callForwardingSource: [],
- callForwardingType: [],
- });
- /** 搜索按钮操作 */
- const handleQuery = () => {
- state.queryParams.PageIndex = 1;
- queryList();
- };
- /** 获取列表 */
- const queryList = () => {
- state.loading = true;
- if (historyParams.type) {
- state.queryParams.type = historyParams.type;
- }
- let beginDate = null;
- let endDate = null;
- if (historyParams.beginDate) {
- state.queryParams.crTime = [historyParams.beginDate, historyParams.endDate];
- }
- if (state.queryParams?.crTime) {
- beginDate = state.queryParams?.crTime[0];
- endDate = state.queryParams?.crTime[1];
- }
- state.loading = true;
- const request = {
- beginDate,
- endDate,
- PageIndex: state.queryParams.PageIndex,
- PageSize: state.queryParams.PageSize,
- type: state.queryParams.type,
- source: state.queryParams.source,
- };
- callPeriodDetail(request)
- .then((res: any) => {
- state.tableData = res.result?.data ?? [];
- state.total = res.result?.total ?? 0;
- state.loading = false;
- })
- .catch(() => {
- state.loading = false;
- });
- };
- /** 重置按钮操作 */
- const resetQuery = (formEl: FormInstance | undefined) => {
- if (!formEl) return;
- formEl.resetFields();
- queryList();
- };
- // 合计
- const getSummaries = (param: any) => {
- const { columns, data } = param;
- const sums: string[] = [];
- columns.forEach((column: { property: string }, index: number) => {
- if (index === 0) {
- sums[index] = '合计';
- return;
- }
- const values = data.map((item: { [x: string]: any }) => Number(item[column.property]));
- if (['callInConnectRate', 'effectiveRate', 'gateWay'].includes(column.property)) {
- //百分比不能计算
- sums[index] = '';
- return '';
- } else if (!values.every((value: unknown) => Number.isNaN(value))) {
- sums[index] = `${values.reduce((prev: any, curr: any) => {
- const value = Number(curr);
- if (!Number.isNaN(value)) {
- return prev + curr;
- } else {
- return prev;
- }
- }, 0)}`;
- } else {
- sums[index] = ' ';
- }
- });
- return sums;
- };
- // 获取基础信息
- const getBaseInfo = async () => {
- try {
- const { result } = await callPeriodBase();
- state.callForwardingSource = result.callForwardingSource ?? [];
- state.callForwardingType = result.callForwardingType ?? [];
- } catch (e) {
- console.log(e);
- }
- };
- // 是否展示查询条件
- const historyParams = history.state;
- const route = useRoute();
- const showSearch = computed(() => {
- return historyParams.showSearch;
- });
- onMounted(() => {
- getBaseInfo();
- queryList();
- });
- </script>
|