add new

src/components/blogs/HomePage.vue

@@ -332,7 +332,7 @@ const comLinkClick = (url: string) => {
         router.push(url);  // 否则使用 Vue Router 的 push 方法导航
     }
 }
-const comlinklist=ref<comLinkInterface[]>([])
+const comlinklist = ref<comLinkInterface[]>([])
 const comLinkList = async () => {
     try {
         await get("/comlinks/list").then(response => {
@@ -432,7 +432,6 @@ const heat = ref(null);
 const newData = <any>[];
 // 初始化60天的数据
 const data = generateDates(60);
-console.log(data)
 // 重新排列数据
 for (let i = 0; i < 60; i += 15) {
     // 取出每个15天的数据，并反转顺序
@@ -452,11 +451,14 @@ function generateDates(numDays: number) {
     }
     return dates;
 }
-const writList = [10,9, 8, 7, 6, 5, 4]
-writList.forEach((item, index) => {
-    data[index].writCount = item;
-})
-const formattedData = newData.map((value: any, index: number) => [index % 15, Math.floor(index / 15), value.writCount]);
+
+const rawData = ref<any[]>([]);
+console.log(`output->newData`,newData)
+
+const formattedData = newData.map(( item:any,index: number) => {
+    return [index % 15, Math.floor(index / 15),item.writCount]
+});
+console.log(`output->formattedData`,formattedData)
 const heatMapData = {
     tooltip: {
         position: 'top',
@@ -493,7 +495,7 @@ const heatMapData = {
     },
     visualMap: {
         min: 0,
-        max: 10,
+        max: 20,
         calculable: true,
         orient: 'horizontal',
         left: 'center',
@@ -523,6 +525,18 @@ const heatMapData = {
         }
     }]
 };
+const statisticList = async () => {
+    await get("/statistics/list").then(response => {
+        rawData.value = response.data.data
+        rawData.value.forEach(newData => {
+            const item = data.find(d => d.date === newData.date);
+            if (item) {
+                item.writCount = newData.writCount;
+            }
+        });
+    })
+
+}
 // 音乐组件
 const random = ref();
 
@@ -533,6 +547,7 @@ onMounted(() => {
     blogList()
     diaryList()
     comLinkList()
+    statisticList()
     updateCurrentDate();
     setInterval(updateCurrentDate, 24 * 60 * 60 * 1000);
     nextTick(() => {

src/components/blogs/ceshi.vue

@@ -1,67 +1,63 @@
 <template>
-  <a-menu
-    v-model:openKeys="openKeys"
-    v-model:selectedKeys="selectedKeys"
-    style="width: 256px"
-    mode="inline"
-    :items="items"
-    @click="handleClick"
-  ></a-menu>
+  <div>
+    <ul>
+      <li v-for="item in processedData" :key="item.date">
+        {{ item.date }}: {{ item.total_count }}
+      </li>
+    </ul>
+  </div>
 </template>
-<script lang="ts" setup>
-import { reactive, ref, watch, VueElement, h } from 'vue';
-import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
-import type { MenuProps, ItemType } from 'ant-design-vue';
- 
-const selectedKeys = ref<string[]>(['1']);
-const openKeys = ref<string[]>(['sub1']);
 
-function getItem(
-  label: VueElement | string,
-  key: string,
-  icon?: any,
-  children?: ItemType[],
-  type?: 'group',
-): ItemType {
-  return {
-    key,
-    icon,
-    children,
-    label,
-    type,
-  } as ItemType;
-}
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const generateDateSequence = (days: number) => {
+  const dates = [];
+  const today = new Date();
+  for (let i = 0; i < days; i++) {
+    const date = new Date(today);
+    date.setDate(today.getDate() - i);
+    dates.push(date.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
+  }
+  return dates.reverse(); // 反转顺序，从最早的日期到今天
+};
 
-const items: ItemType[] = reactive([
-  getItem('Navigation One', 'sub1', () => h(MailOutlined), [
-    getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
-    getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
-  ]),
+const processQueryResults = (dateSequence: string[], queryResults: any[]) => {
+  const resultMap = new Map();
+  queryResults.forEach((item: any) => {
+    resultMap.set(item.date, item.total_count);
+  });
 
-  getItem('Navigation Two', 'sub2', () => h(AppstoreOutlined), [
-    getItem('Option 5', '5'),
-    getItem('Option 6', '6'),
-    getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
-  ]),
+  return dateSequence.map(date => ({
+    date,
+    total_count: resultMap.get(date) || 0
+  }));
+};
 
-  { type: 'divider' },
+const rawData = ref<any[]>([]); // 从API获取的原始数据
+const processedData = ref<any[]>([]); // 处理后的数据
 
-  getItem('Navigation Three', 'sub4', () => h(SettingOutlined), [
-    getItem('Option 9', '9'),
-    getItem('Option 10', '10'),
-    getItem('Option 11', '11'),
-    getItem('Option 12', '12'),
-  ]),
+const fetchData = () => {
+  // 模拟从API获取数据
+  const apiData = [
+    { date: '2024-07-12', total_count: 3 },
+    { date: '2024-07-08', total_count: 1 },
+    { date: '2024-07-05', total_count: 18 },
+    { date: '2024-07-04', total_count: 1 }
+  ];
 
-  getItem('Group', 'grp', null, [getItem('Option 13', '13'), getItem('Option 14', '14')], 'group'),
-]);
+  rawData.value = apiData;
 
-const handleClick: MenuProps['onClick'] = e => {
-  console.log('click', e);
+  const dateSequence = generateDateSequence(60);
+  processedData.value = processQueryResults(dateSequence, rawData.value);
+  console.log(`output->`,processedData.value)
 };
 
-watch(openKeys, val => {
-  console.log('openKeys', val);
+onMounted(() => {
+  fetchData();
 });
 </script>
 
+<style>
+/* 在这里添加你的样式 */
+</style>