no message

src/api/clue/index.ts

@@ -141,4 +141,8 @@ export const getClueContractList = (params: any) => defHttp.get<any>({ url: '/da
 
 export const getInvitationStatic = (params: any) => defHttp.get<any>({ url: '/dating-clue-service/user/count/telephone-invitation-data/by-team', params})
 
-export const getInvitationData = (params: any) => defHttp.get<any>({ url: '/dating-clue-service/user/count/telephone-invitation-data-item/by-team', params})
+export const getInvitationData = (params: any) => defHttp.get<any>({ url: '/dating-clue-service/user/count/telephone-invitation-data-item/by-team', params})
+
+export const getFlowStatic = (params: any) => defHttp.get<any>({ url: '/dating-clue-service/user/count/dating-clue-data/by-team', params})
+
+export const getFlowData = (params: any) => defHttp.get<any>({ url: '/dating-clue-service/user/count/dating-clue-data-item/by-team', params})

src/views/sys/workbench/components/GrowCard.vue

@@ -5,8 +5,7 @@
         size="small"
         :loading="loading"
         :title="item.title"
-        class="md:w-1/5 w-full !md:mt-0"
-        :class="{ '!md:mr-5': index + 1 < 5, '!mt-5': index > 0 }"
+        :style="{flex: 1, marginRight: index < dataList.length - 1 ? '5px' : '0px', marginLeft: index > 0 ? '5px' : '0px'}"
       >
         <template #extra>
           <Tag :color="item.color">{{ item.action }}</Tag>
@@ -14,7 +13,7 @@
 
         <div class="py-3 px-5 flex justify-between items-center">
           <CountTo :startVal="1" :endVal="item.value" class="text-3xl" />
-          <Icon :icon="item.icon" :size="40" />
+          <!-- <Icon :icon="item.icon" :size="40" /> -->
         </div>
 
         <!-- <div class="p-2 px-4 flex justify-between">
@@ -35,6 +34,9 @@
     loading: {
       type: Boolean,
     },
-    dataList: Array as () => GrowCardItem[]
+    dataList: {
+      type: Array as () => GrowCardItem[],
+      default: []
+    },
   })
 </script>

src/views/sys/workbench/data.ts

@@ -52,4 +52,44 @@ export const tableColumns: BasicColumn[] = [
   { title: '预约数量', dataIndex: 'appointmentQuantity' },
   { title: '接通数量', dataIndex: 'connectionQuantity' },
   { title: '跟进数量', dataIndex: 'followUpQuantity' },
+]
+
+export const flowCardList: GrowCardItem[] = [
+  {
+    title: '新增数量',
+    icon: 'visit-count|svg',
+    value: 0,
+    color: 'green',
+    action: '天',
+  },
+  {
+    title: '预约数量',
+    icon: 'total-sales|svg',
+    value: 0,
+    color: 'blue',
+    action: '天',
+  },
+  {
+    title: '接通数量',
+    icon: 'download-count|svg',
+    value: 0,
+    color: 'orange',
+    action: '天',
+  },
+  {
+    title: '签约数量',
+    icon: 'transaction|svg',
+    value: 0,
+    color: 'purple',
+    action: '天',
+  },
+];
+
+
+export const tableFlowColumns: BasicColumn[] = [
+  { title: '员工姓名', dataIndex: 'operatorName' },
+  { title: '新增数量', dataIndex: 'newQuantity' },
+  { title: '预约数量', dataIndex: 'appointmentQuantity' },
+  { title: '接通数量', dataIndex: 'connectionQuantity' },
+  { title: '签约数量', dataIndex: 'signQuantity' },
 ]

src/views/sys/workbench/index.vue

@@ -1,15 +1,31 @@
 <template>
   <div>
     <WorkbenchHeader />
-    <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 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>
@@ -21,15 +37,18 @@
   import GrowCard from './components/GrowCard.vue';
   import { RangePicker } from 'ant-design-vue'
   import { BasicTable, useTable } from '/@/components/Table'
-  import { tableColumns, growCardList } from './data'
-  import { getInvitationStatic, getInvitationData } from '/@/api/clue'
+  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()
   })
 
@@ -49,6 +68,17 @@
     loading.value = false;
   }
 
+  async function fetchFlowData(){
+    loading1.value = true;
+    const result = await getFlowStatic({startTime: formatToDate(value4.value[0]), endTime: formatToDate(value4.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,
@@ -65,4 +95,20 @@
     },
   })
 
+  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(value4.value[0])
+      arg.endTime = formatToDate(value4.value[1])
+    },
+  })
+
 </script>