You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
4.1 KiB
114 lines
4.1 KiB
<template>
|
|
<div>
|
|
<WorkbenchHeader />
|
|
<div class="flex-row">
|
|
<div class="flex-col" style="flex: 1;padding-right:0px;">
|
|
<div class="flex-row-center-space" style="padding: 12px 16px 0px 16px;">
|
|
<span style="color: #333;text-align: center;font-size: 22px;">流量数据统计</span>
|
|
<RangePicker v-model:value="value3" :format="dateFormat" :disabled-date="disabledDate" @change="fetchFlowData"/>
|
|
</div>
|
|
<div class="p-4">
|
|
<GrowCard :loading="loading1" :data-list="flowCardList" class="enter-y" />
|
|
</div>
|
|
<div style="padding: 0px 16px;">
|
|
<BasicTable @register="registerFlowTable" />
|
|
</div>
|
|
</div>
|
|
<div class="flex-col" style="flex: 1;padding-left:0px;">
|
|
<div class="flex-row-center-space" style="padding: 12px 16px 0px 16px;">
|
|
<span style="color: #333;text-align: center;font-size: 22px;">电邀数据统计</span>
|
|
<RangePicker v-model:value="value4" :format="dateFormat" :disabled-date="disabledDate" @change="fetchData"/>
|
|
</div>
|
|
<div class="p-4">
|
|
<GrowCard :loading="loading" :data-list="growCardList" class="enter-y" />
|
|
</div>
|
|
<div style="padding: 0px 16px;">
|
|
<BasicTable @register="registerTable" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import moment, {Moment} from 'moment';
|
|
import { formatToDate } from '/@/utils/dateUtil'
|
|
import WorkbenchHeader from './components/WorkbenchHeader.vue';
|
|
import GrowCard from './components/GrowCard.vue';
|
|
import { RangePicker } from 'ant-design-vue'
|
|
import { BasicTable, useTable } from '/@/components/Table'
|
|
import { tableFlowColumns, tableColumns, growCardList, flowCardList } from './data'
|
|
import { getInvitationStatic, getInvitationData, getFlowStatic, getFlowData } from '/@/api/clue'
|
|
|
|
const dateFormat = 'YYYY-MM-DD';
|
|
const value3 = ref<any[]>([])
|
|
const value4 = ref<any[]>([])
|
|
const loading = ref(true);
|
|
const loading1 = ref(true);
|
|
onMounted(() => {
|
|
value3.value = [moment().format(dateFormat), moment().format(dateFormat)]
|
|
value4.value = [moment().format(dateFormat), moment().format(dateFormat)]
|
|
fetchFlowData()
|
|
fetchData()
|
|
})
|
|
|
|
function disabledDate (current: Moment) {
|
|
return current && current >= moment().endOf('day');
|
|
}
|
|
|
|
async function fetchData(){
|
|
loading.value = true;
|
|
const result = await getInvitationStatic({startTime: formatToDate(value4.value[0]), endTime: formatToDate(value4.value[1])})
|
|
growCardList[0].value = result.obtainedQuantity
|
|
growCardList[1].value = result.allocationQuantity
|
|
growCardList[2].value = result.connectionQuantity
|
|
growCardList[3].value = result.appointmentQuantity
|
|
growCardList[4].value = result.followUpQuantity
|
|
await reload()
|
|
loading.value = false;
|
|
}
|
|
|
|
async function fetchFlowData(){
|
|
loading1.value = true;
|
|
const result = await getFlowStatic({startTime: formatToDate(value3.value[0]), endTime: formatToDate(value3.value[1])})
|
|
flowCardList[0].value = result.newQuantity
|
|
flowCardList[1].value = result.appointmentQuantity
|
|
flowCardList[2].value = result.connectionQuantity
|
|
flowCardList[3].value = result.signQuantity
|
|
await flowReload()
|
|
loading1.value = false;
|
|
}
|
|
|
|
const [registerTable, { reload }] = useTable({
|
|
bordered: true,
|
|
immediate: false,
|
|
canResize: true,
|
|
useSearchForm: false,
|
|
showIndexColumn: true,
|
|
showTableSetting: false,
|
|
pagination: false,
|
|
columns: tableColumns,
|
|
api: getInvitationData,
|
|
beforeFetch: (arg) => {
|
|
arg.startTime = formatToDate(value4.value[0])
|
|
arg.endTime = formatToDate(value4.value[1])
|
|
},
|
|
})
|
|
|
|
const [registerFlowTable, { reload: flowReload }] = useTable({
|
|
bordered: true,
|
|
immediate: false,
|
|
canResize: true,
|
|
useSearchForm: false,
|
|
showIndexColumn: true,
|
|
showTableSetting: false,
|
|
pagination: false,
|
|
columns: tableFlowColumns,
|
|
api: getFlowData,
|
|
beforeFetch: (arg) => {
|
|
arg.startTime = formatToDate(value3.value[0])
|
|
arg.endTime = formatToDate(value3.value[1])
|
|
},
|
|
})
|
|
|
|
</script>
|