feat: (dashborad) 接入数据

src/api/dashboard/analysis.ts

@@ -1,6 +1,6 @@
 import { defHttp } from '/@/utils/http/axios';
 // PageParams
-import { BasicStaticsParams } from './model';
+import { BasicStaticsParams, UserStaticsModel, BulletChatStaticsModel } from './model';
 import { Result } from '/#/axios';
 
 enum Api {
@@ -12,9 +12,7 @@ enum Api {
   companyChatExport = '/zfb-api/zfb//platform/dashboard/company/export',
 }
 
-/**
- * @description: Get sample list value
- */
+//留言列表
 
 export const bulletChatApi = (params: BasicStaticsParams) =>
   defHttp.post<Result>({
@@ -26,8 +24,10 @@ export const bulletChatApi = (params: BasicStaticsParams) =>
     },
   });
 
+//用户统计
+
 export const userStaticsApi = (params: BasicStaticsParams) =>
-  defHttp.post<Result>({
+  defHttp.post<UserStaticsModel>({
     url: Api.userStatics,
     params,
     headers: {
@@ -35,8 +35,9 @@ export const userStaticsApi = (params: BasicStaticsParams) =>
       ignoreCancelToken: true,
     },
   });
+//留言统计
 export const bulletChatStaticsApi = (params: BasicStaticsParams) =>
-  defHttp.post<Result>({
+  defHttp.post<BulletChatStaticsModel>({
     url: Api.bulletChatStatics,
     params,
     headers: {

src/api/dashboard/model.ts

@@ -8,3 +8,16 @@ export interface BasicStaticsParams extends PageParams {
   liveRoomId?: string;
   time: string[];
 }
+export type StaticItemType = {
+  date: string;
+  amount: string | number;
+};
+export interface UserStaticsModel {
+  viewStatics: StaticItemType[];
+  shareStatics: StaticItemType[];
+}
+
+export interface BulletChatStaticsModel {
+  bulletChatAmounts: StaticItemType[];
+  userAmount: StaticItemType[];
+}

src/views/dashboard/analysis/components/VisitAnalysis.vue

@@ -3,14 +3,65 @@
 </template>
 <script lang="ts">
   import { basicProps } from './props';
+  import { dateUtil } from '/@/utils/dateUtil';
 </script>
 <script lang="ts" setup>
-  import { onMounted, ref, Ref } from 'vue';
+  import { onMounted, ref, Ref, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
 
-  defineProps({
+  const props = defineProps({
     ...basicProps,
   });
+  const bulletChatAmountsData = ref<number[]>([]);
+  const userAmountData = ref<number[]>([]);
+  const yixStringData = ref<string[]>([]);
+  const maxSize = ref(0);
+  watch(
+    () => props.bulletChatAmounts,
+    (data) => {
+      console.log('viewStatics-data', data);
+      bulletChatAmountsData.value = data.reduce<number[]>(
+        (prev: number[], current) => prev.concat(Number(current.amount)),
+        [],
+      );
+
+      maxSize.value = Math.floor(Math.max(...bulletChatAmountsData.value) / 1000) * 1000 + 500;
+
+      yixStringData.value = data.reduce<string[]>(
+        (prev: string[], current) => prev.concat(`${dateUtil(current.date).format('DD')}日`),
+        [],
+      );
+
+      // viewStaticsData.value = data;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
+  watch(
+    () => props.userAmount,
+    (data) => {
+      console.log('viewStatics-data', data);
+      userAmountData.value = data.reduce<number[]>(
+        (prev: number[], current) => prev.concat(Number(current.amount)),
+        [],
+      );
+
+      yixStringData.value = data.reduce<string[]>(
+        (prev: string[], current) => prev.concat(`${dateUtil(current.date).format('DD')}日`),
+        [],
+      );
+
+      // viewStaticsData.value = data;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
@@ -26,13 +77,13 @@
         },
       },
       legend: {
-        x: 'center',
-        y: 'bottom',
+        orient: 'horizontal',
+        bottom: 0,
       },
       xAxis: {
         type: 'category',
         boundaryGap: false,
-        data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
+        data: yixStringData.value,
         splitLine: {
           show: true,
           lineStyle: {
@@ -48,7 +99,7 @@
       yAxis: [
         {
           type: 'value',
-          max: 80000,
+          max: maxSize.value,
           splitNumber: 4,
           axisTick: {
             show: false,
@@ -65,10 +116,7 @@
       series: [
         {
           smooth: true,
-          data: [
-            111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222,
-            11111, 4000, 2000, 500, 333, 222, 111,
-          ],
+          data: bulletChatAmountsData.value,
           type: 'line',
           areaStyle: {},
           name: '留言总人数',
@@ -78,10 +126,7 @@
         },
         {
           smooth: true,
-          data: [
-            33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390,
-            198, 60, 30, 22, 11,
-          ],
+          data: userAmountData.value,
           type: 'line',
           name: '留言总数',
           areaStyle: {},

src/views/dashboard/analysis/components/VisitAnalysisBar.vue

@@ -3,14 +3,57 @@
 </template>
 <script lang="ts">
   import { basicProps } from './props';
+  import { dateUtil } from '/@/utils/dateUtil';
 </script>
 <script lang="ts" setup>
-  import { onMounted, ref, Ref } from 'vue';
+  import { onMounted, ref, Ref, watch } from 'vue';
+  // import type { dataItemType } from './props';
   import { useECharts } from '/@/hooks/web/useECharts';
-  defineProps({
+  const props = defineProps({
     ...basicProps,
   });
 
+  const viewStaticsData = ref<number[]>([]);
+  const shareStaticsData = ref<number[]>([]);
+  const yixStringData = ref<string[]>([]);
+  const maxSize = ref(0);
+  // props.viewStatics,
+  watch(
+    () => props.viewStatics,
+    (data) => {
+      console.log('viewStatics-data', data);
+      viewStaticsData.value = data.reduce<number[]>(
+        (prev: number[], current) => prev.concat(Number(current.amount)),
+        [],
+      );
+      maxSize.value = Math.floor(Math.max(...viewStaticsData.value) / 1000) * 1000 + 500;
+      yixStringData.value = data.reduce<string[]>(
+        (prev: string[], current) => prev.concat(`${dateUtil(current.date).format('DD')}日`),
+        [],
+      );
+
+      // viewStaticsData.value = data;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
+  watch(
+    () => props.shareStatics,
+    (data) => {
+      shareStaticsData.value = data.reduce<number[]>(
+        (prev: number[], current) => prev.concat(Number(current.amount)),
+        [],
+      );
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   onMounted(() => {
@@ -25,31 +68,32 @@
         },
       },
       legend: {
-        x: 'center',
-        y: 'bottom',
+        orient: 'horizontal',
+        bottom: 0,
       },
       grid: { left: '1%', right: '1%', top: '2%', bottom: '10%', containLabel: true },
       xAxis: {
         type: 'category',
-        data: [...new Array(30)].map((_item, index) => `${index + 1}日`),
+        // data: [...new Array(30)].map((_item, index) => `${index + 1}日`),
+        data: yixStringData.value,
       },
       yAxis: {
         type: 'value',
-        max: 8000,
+        max: maxSize.value,
         splitNumber: 4,
       },
       series: [
         {
-          data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
+          data: viewStaticsData.value,
           type: 'bar',
-          itemStyle: { normal: { color: '#38a0ff' } },
+          itemStyle: { color: '#38a0ff' },
           barMaxWidth: 80,
           name: '用户浏览量',
         },
         {
-          data: [100, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
+          data: shareStaticsData.value,
           type: 'bar',
-          itemStyle: { normal: { color: '#4cca73' } },
+          itemStyle: { color: '#4cca73' },
           barMaxWidth: 80,
           name: '用户分享数',
         },

src/views/dashboard/analysis/components/props.ts

@@ -1,16 +1,37 @@
-import { PropType } from 'vue';
-
-export interface BasicProps {
-  width: string;
-  height: string;
-}
-export const basicProps = {
-  width: {
-    type: String as PropType<string>,
-    default: '100%',
-  },
-  height: {
-    type: String as PropType<string>,
-    default: '280px',
-  },
-};
+import { PropType } from 'vue';
+
+export interface BasicProps {
+  width: string;
+  height: string;
+}
+export type dataItemType = {
+  date: string;
+  amount: string | number;
+};
+
+export const basicProps = {
+  width: {
+    type: String as PropType<string>,
+    default: '100%',
+  },
+  height: {
+    type: String as PropType<string>,
+    default: '280px',
+  },
+  viewStatics: {
+    type: Array as PropType<Array<dataItemType>>,
+    default: [],
+  },
+  shareStatics: {
+    type: Array as PropType<Array<dataItemType>>,
+    default: [],
+  },
+  bulletChatAmounts: {
+    type: Array as PropType<Array<dataItemType>>,
+    default: [],
+  },
+  userAmount: {
+    type: Array as PropType<Array<dataItemType>>,
+    default: [],
+  },
+};

src/views/dashboard/analysis/index.vue

@@ -6,13 +6,21 @@
         <div class="md:flex enter-y">
           <div class="md:w-1/2 enter-y">
             <Card class="w-full">
-              <VisitAnalysisBar :loading="loading" />
+              <VisitAnalysisBar
+                :loading="loading"
+                :viewStatics="viewStaticsData"
+                :shareStatics="shareStaticsData"
+              />
             </Card>
           </div>
           <div class="!md:mx-2"></div>
           <Card class="md:w-1/2 enter-y">
             <!-- <VisitAnalysis :loading="loading" /> -->
-            <VisitAnalysis :loading="loading" />
+            <VisitAnalysis
+              :loading="loading"
+              :bulletChatAmounts="bulletChatAmountsData"
+              :userAmount="userAmountData"
+            />
           </Card>
         </div>
       </template>
@@ -53,11 +61,40 @@
   } from '/@/api/dashboard/analysis';
   import { listRoomsApi } from '/@/api/scene/list';
   import { dateUtil, formatToDate } from '/@/utils/dateUtil';
+  import { StaticItemType } from '/@/api/dashboard/model';
 
   const today = formatToDate(dateUtil(new Date()));
   const priorDate = formatToDate(dateUtil(new Date().setDate(new Date().getDate() - 30)));
 
   const loading = ref(true);
+  // UserStaticsModel
+
+  const viewStaticsData = ref<StaticItemType[]>([
+    // { date: '2022-08-21', amount: 1111 },
+    // { date: '2022-08-22', amount: 9000 },
+    // { date: '2022-08-23', amount: 1311 },
+    // { date: '2022-08-24', amount: 1311 },
+  ]);
+
+  const shareStaticsData = ref<StaticItemType[]>([
+    // { date: '2022-08-21', amount: 100 },
+    // { date: '2022-08-22', amount: 101 },
+    // { date: '2022-08-23', amount: 1921 },
+    // { date: '2022-08-24', amount: 1311 },
+  ]);
+
+  const bulletChatAmountsData = ref<StaticItemType[]>([
+    // { date: '2022-08-21', amount: 1020 },
+    // { date: '2022-08-22', amount: 15201 },
+    // { date: '2022-08-23', amount: 192221 },
+    // { date: '2022-08-24', amount: 1711 },
+  ]);
+  const userAmountData = ref<StaticItemType[]>([
+    // { date: '2022-08-21', amount: 222 },
+    // { date: '2022-08-22', amount: 1212 },
+    // { date: '2022-08-23', amount: 3289 },
+    // { date: '2022-08-24', amount: 20 },
+  ]);
   // const { t } = useI18n();
 
   const columns: BasicColumn[] = [
@@ -121,7 +158,7 @@
         field: 'time',
         label: '时间段',
         component: 'RangePicker',
-        // defaultValue: [priorDate, today],
+        defaultValue: [priorDate, today],
         colProps: {
           xl: 16,
           xxl: 16,
@@ -154,15 +191,17 @@
     formConfig: searchForm,
     api: bulletChatStaticsApi,
     afterFetch: function (data) {
-      console.log('data', data);
-
+      console.log('afterFetch', data);
       return data;
     },
     searchInfo: searchInfo,
   });
 
   onMounted(async () => {
-    await userStaticsApi(searchInfo);
+    const data = await userStaticsApi(searchInfo);
+    viewStaticsData.value = data.viewStatics || [];
+    viewStaticsData.value = data.shareStatics || [];
+    loading.value = false;
   });
 
   async function handleExport() {
@@ -181,7 +220,7 @@
     window.URL.revokeObjectURL(url);
   }
 
-  setTimeout(() => {
-    loading.value = false;
-  }, 1500);
+  // setTimeout(() => {
+  //   loading.value = false;
+  // }, 1500);
 </script>