no message

src/api/clue/index.ts

@@ -137,4 +137,8 @@ export const getDemandInfo = (params: any) => defHttp.get<any>({ url: '/dating-c
 
 export const editDemandInfo = (params: any) => defHttp.post({ url: '/dating-clue-service/user/edit/dating-store-customer-demand', params })
 
-export const getClueContractList = (params: any) => defHttp.get<any>({ url: '/dating-clue-service/user/list/contract/by-dating-clue', params})
+export const getClueContractList = (params: any) => defHttp.get<any>({ url: '/dating-clue-service/user/list/contract/by-dating-clue', params})
+
+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})

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

@@ -1,26 +1,26 @@
 <template>
   <div class="md:flex">
-    <template v-for="(item, index) in growCardList" :key="item.title">
+    <template v-for="(item, index) in dataList" :key="item.title">
       <Card
         size="small"
         :loading="loading"
         :title="item.title"
-        class="md:w-1/4 w-full !md:mt-0"
-        :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }"
+        class="md:w-1/5 w-full !md:mt-0"
+        :class="{ '!md:mr-5': index + 1 < 5, '!mt-5': index > 0 }"
       >
         <template #extra>
           <Tag :color="item.color">{{ item.action }}</Tag>
         </template>
 
-        <div class="py-4 px-4 flex justify-between items-center">
-          <CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" />
+        <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" />
         </div>
 
-        <div class="p-2 px-4 flex justify-between">
+        <!-- <div class="p-2 px-4 flex justify-between">
           <span>总{{ item.title }}</span>
           <CountTo prefix="$" :startVal="1" :endVal="item.total" />
-        </div>
+        </div> -->
       </Card>
     </template>
   </div>
@@ -29,11 +29,12 @@
   import { CountTo } from '/@/components/CountTo'
   import Icon from '/@/components/Icon/Icon.vue'
   import { Tag, Card } from 'ant-design-vue'
-  import { growCardList } from '../data'
+  import { GrowCardItem } from '../data'
 
   defineProps({
     loading: {
       type: Boolean,
     },
+    dataList: Array as () => GrowCardItem[]
   })
 </script>

src/views/sys/workbench/data.ts

@@ -2,42 +2,54 @@ export interface GrowCardItem {
   icon: string;
   title: string;
   value: number;
-  total: number;
   color: string;
   action: string;
 }
 
 export const growCardList: GrowCardItem[] = [
   {
-    title: '访问数',
+    title: '获得数量',
     icon: 'visit-count|svg',
-    value: 2000,
-    total: 120000,
+    value: 0,
     color: 'green',
-    action: '月',
+    action: '天',
   },
   {
-    title: '成交额',
+    title: '分配数量',
     icon: 'total-sales|svg',
-    value: 20000,
-    total: 500000,
+    value: 0,
     color: 'blue',
-    action: '月',
+    action: '天',
   },
   {
-    title: '下载数',
+    title: '接通次数',
     icon: 'download-count|svg',
-    value: 8000,
-    total: 120000,
+    value: 0,
     color: 'orange',
-    action: '周',
+    action: '天',
   },
   {
-    title: '成交数',
+    title: '预约次数',
     icon: 'transaction|svg',
-    value: 5000,
-    total: 50000,
+    value: 0,
     color: 'purple',
-    action: '年',
+    action: '天',
+  },
+  {
+    title: '跟进次数',
+    icon: 'test|svg',
+    value: 0,
+    color: 'purple',
+    action: '天',
   },
 ];
+
+import { BasicColumn } from '/@/components/Table'
+
+export const tableColumns: BasicColumn[] = [
+  { title: '员工姓名', dataIndex: 'operatorName' },
+  { title: '分配数量', dataIndex: 'allocationQuantity' },
+  { title: '预约数量', dataIndex: 'appointmentQuantity' },
+  { title: '接通数量', dataIndex: 'connectionQuantity' },
+  { title: '跟进数量', dataIndex: 'followUpQuantity' },
+]

src/views/sys/workbench/index.vue

@@ -1,18 +1,68 @@
 <template>
   <div>
     <WorkbenchHeader />
-    <!-- <div class="p-4">
-      <GrowCard :loading="loading" class="enter-y" />
-    </div> -->
+    <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>
 </template>
 <script lang="ts" setup>
-  import { nextTick, ref } from 'vue';
+  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 { tableColumns, growCardList } from './data'
+  import { getInvitationStatic, getInvitationData } from '/@/api/clue'
 
+  const dateFormat = 'YYYY-MM-DD';
+  const value4 = ref<any[]>([])
   const loading = ref(true);
-  setTimeout(() => {
+
+  onMounted(() => {
+    value4.value = [moment().format(dateFormat), moment().format(dateFormat)]
+    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;
-  }, 1000);
+  }
+
+  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])
+    },
+  })
+
 </script>