|
|
@@ -1,43 +1,30 @@
|
|
|
<template>
|
|
|
<div class="statistics-order-detail-hotspot-time-container layout-padding">
|
|
|
- <div class="layout-padding-auto layout-padding-view pd20">
|
|
|
- <div class="table-search-content">
|
|
|
- <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
|
|
|
+ <div class="layout-padding-auto layout-padding-view pd20">
|
|
|
+ <div class="table-search-content">
|
|
|
+ <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
|
|
|
<el-form-item prop="crTime">
|
|
|
- <statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
|
|
|
+ <statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="来电主体" prop="IdentityType">
|
|
|
- <el-select v-model="state.queryParams.IdentityType" placeholder="请选择来电主体" @change="handleQuery">
|
|
|
- <el-option :value="0" label="全部" />
|
|
|
- <el-option :value="1" label="市民" />
|
|
|
- <el-option :value="2" label="企业" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <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-button type="primary" @click="onDetail" :loading="state.loading"> <SvgIcon name="ele-PieChart" class="mr5" />图表 </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <ProTable
|
|
|
- ref="proTableRef"
|
|
|
- :columns="columns"
|
|
|
- :data="state.tableData"
|
|
|
- @updateTable="queryList"
|
|
|
- :loading="state.loading"
|
|
|
- border
|
|
|
- :pagination="false"
|
|
|
- :toolButton="['refresh', 'setting', 'exportAll']"
|
|
|
- :key="Math.random()"
|
|
|
- :exportMethod="orderHotTimeExport"
|
|
|
- :exportParams="requestParams"
|
|
|
- show-summary
|
|
|
- isSpecialExport
|
|
|
- >
|
|
|
- </ProTable>
|
|
|
+ <el-form-item label="来电主体" prop="IdentityType">
|
|
|
+ <el-select v-model="state.queryParams.IdentityType" placeholder="请选择来电主体" @change="handleQuery">
|
|
|
+ <el-option :value="0" label="全部" />
|
|
|
+ <el-option :value="1" label="市民" />
|
|
|
+ <el-option :value="2" label="企业" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <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-button type="primary" @click="onDetail" :loading="state.loading"> <SvgIcon name="ele-PieChart" class="mr5" />图表 </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
|
|
|
+ <vxe-grid v-bind="gridOptions"> </vxe-grid>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -48,10 +35,9 @@ import { orderHotTime, orderHotTimeExport } from '@/api/statistics/order';
|
|
|
import { defaultDate } from '@/utils/constants';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import Other from '@/utils/other';
|
|
|
+import XEUtils from 'xe-utils';
|
|
|
|
|
|
const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
|
|
|
-// 表格配置项
|
|
|
-const columns = ref<any[]>([]);
|
|
|
// 定义变量内容
|
|
|
const ruleFormRef = ref<RefType>(); // 表单ref
|
|
|
const state = reactive<any>({
|
|
|
@@ -69,26 +55,76 @@ const handleQuery = () => {
|
|
|
// state.queryParams.PageIndex = 1;
|
|
|
queryList();
|
|
|
};
|
|
|
+const requestParams = ref<EmptyObjectType>({});
|
|
|
+const gridOptions = reactive<any>({
|
|
|
+ loading: false,
|
|
|
+ border: true,
|
|
|
+ showOverflow: true,
|
|
|
+ printConfig: {},
|
|
|
+ columnConfig: {
|
|
|
+ resizable: true,
|
|
|
+ },
|
|
|
+ scrollY: {
|
|
|
+ enabled: false,
|
|
|
+ },
|
|
|
+ toolbarConfig: {
|
|
|
+ zoom: true,
|
|
|
+ custom: true,
|
|
|
+ refresh: {
|
|
|
+ queryMethod: () => {
|
|
|
+ queryList();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tools: [{ toolRender: { name: 'exportAll' } }],
|
|
|
+ },
|
|
|
+ customConfig: {
|
|
|
+ storage: true,
|
|
|
+ },
|
|
|
+ showFooter: true,
|
|
|
+ footerMethod: ({ columns, data }) => {
|
|
|
+ return [
|
|
|
+ columns.map((column: any, columnIndex: number) => {
|
|
|
+ if (columnIndex === 0) {
|
|
|
+ return '合计';
|
|
|
+ }
|
|
|
+ return XEUtils.sum(data, column.property);
|
|
|
+ }),
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ id: 'statisticsOrderDetailHotspotTime',
|
|
|
+ rowConfig: { isHover: true, height: 30, isCurrent: true, useKey: true },
|
|
|
+ height: 'auto',
|
|
|
+ columns: [],
|
|
|
+ data: [],
|
|
|
+ params: {
|
|
|
+ exportMethod: orderHotTimeExport,
|
|
|
+ exportParams: requestParams,
|
|
|
+ isSpecialExport: true,
|
|
|
+ },
|
|
|
+});
|
|
|
/** 获取列表 */
|
|
|
-const requestParams = ref({});
|
|
|
const queryList = async () => {
|
|
|
state.loading = true;
|
|
|
+ gridOptions.loading = true;
|
|
|
try {
|
|
|
requestParams.value = Other.deepClone(state.queryParams);
|
|
|
requestParams.value.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
|
|
|
requestParams.value.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
|
|
|
Reflect.deleteProperty(requestParams.value, 'crTime');
|
|
|
const res = await orderHotTime(requestParams.value);
|
|
|
- columns.value = res.result.titleData?.map((item: any) => {
|
|
|
+ let columns = res.result.titleData?.map((item: any) => {
|
|
|
return {
|
|
|
prop: item.key,
|
|
|
label: item.value,
|
|
|
+ field: item.key,
|
|
|
+ title: item.value,
|
|
|
align: 'center',
|
|
|
- minWidth: 90,
|
|
|
+ sortable: true,
|
|
|
+ minWidth: 110,
|
|
|
};
|
|
|
});
|
|
|
// 计算横轴小计
|
|
|
- state.tableData = res.result?.item.map((item: any) => {
|
|
|
+ const tableData = res.result?.item.map((item: any) => {
|
|
|
let subtotal = 0;
|
|
|
for (let i of res.result.titleData) {
|
|
|
subtotal += item[i.key];
|
|
|
@@ -98,21 +134,33 @@ const queryList = async () => {
|
|
|
subtotal,
|
|
|
};
|
|
|
});
|
|
|
- columns.value.unshift({
|
|
|
- prop: 'Hour',
|
|
|
- label: '时间段',
|
|
|
- align: 'center',
|
|
|
- minWidth: 120,
|
|
|
- fixed: 'left',
|
|
|
- });
|
|
|
- columns.value.push({
|
|
|
- prop: 'subtotal',
|
|
|
- label: '小计',
|
|
|
- align: 'center',
|
|
|
- });
|
|
|
+ columns.unshift(
|
|
|
+ {
|
|
|
+ prop: 'Hour',
|
|
|
+ label: '时间段',
|
|
|
+ field: 'Hour',
|
|
|
+ title: '时间段',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120,
|
|
|
+ fixed: 'left',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'subtotal',
|
|
|
+ label: '小计',
|
|
|
+ align: 'center',
|
|
|
+ field: 'subtotal',
|
|
|
+ title: '小计',
|
|
|
+ minWidth: 120,
|
|
|
+ sortable: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ gridOptions.data = tableData;
|
|
|
+ gridOptions.columns = columns;
|
|
|
+ gridOptions.loading = false;
|
|
|
state.loading = false;
|
|
|
} catch (e) {
|
|
|
state.loading = false;
|
|
|
+ gridOptions.loading = false;
|
|
|
console.log(e);
|
|
|
}
|
|
|
};
|
zhangchong