From 254801ec5f955c2e43d026fcffa081eea3e4b188 Mon Sep 17 00:00:00 2001
From: panda <7934952@qq.com>
Date: Mon, 15 Jul 2024 17:08:50 +0800
Subject: [PATCH] add new

---
 src/components/blogs/HomePage.vue      |  41 +++++---
 src/components/blogs/ceshi.vue         | 128 ++++++++++++++-----------
 src/views/admin/ClassticManageView.vue |   1 +
 3 files changed, 99 insertions(+), 71 deletions(-)

diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index 3818bba..ac75f61 100644
--- a/src/components/blogs/HomePage.vue
+++ b/src/components/blogs/HomePage.vue
@@ -429,7 +429,6 @@ const statistics = reactive([
 ])
 // 日历热力图
 const heat = ref(null);
-const newData = <any>[];
 
 function generateDates(numDays: number) {
     const dates = [];
@@ -446,17 +445,42 @@ function generateDates(numDays: number) {
 // 初始化60天的数据
 const data = generateDates(60);
 // 重新排列数据
+const rawData = ref<any[]>([]);
+const statisticList = async () => {
+    await get("/statistics/list").then(response => {
+        rawData.value = response.data.data
+        // let value = response.data.data;
+        // let handleValue = formattedData(value);
+        // rawData.value = handleValue;
+        rawData.value.forEach(newDataItem => {
+            const item = newData.find((d: any) => d.date === newDataItem.date);
+            if (item) {
+                item.writCount = newDataItem.writCount;
+            }
+        });
+    })
+}
+const newData = <any>[];
 for (let i = 0; i < 60; i += 15) {
     // 取出每个15天的数据，并反转顺序
     const chunk = data.slice(i, i + 15).reverse();
     newData.push(...chunk);
 }
+console.log(`output->rawData`,rawData)
+console.log(`output->newData`,newData)
 
-const rawData = ref<any[]>([]);
+const getWritCountValues = () => {
+    const writCounts = rawData.value.map(item => item.writCount);
+    return writCounts;
+};
+
+// 在适当的地方调用 getWritCountValues 来获取 writCount 值数组
+const writCounts = getWritCountValues();
+console.log(`output->writCounts`,writCounts)
 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',
@@ -523,18 +547,7 @@ const heatMapData = {
         }
     }]
 };
-const statisticList = async () => {
-    await get("/statistics/list").then(response => {
-        rawData.value = response.data.data
-        rawData.value.forEach(newDataItem => {
-            const item = newData.find((d: any) => d.date === newDataItem.date);
-            if (item) {
-                item.writCount = newDataItem.writCount;
-            }
-        });
-    })
 
-}
 // 音乐组件
 const random = ref();
 
diff --git a/src/components/blogs/ceshi.vue b/src/components/blogs/ceshi.vue
index bb04ccf..ffc7afd 100644
--- a/src/components/blogs/ceshi.vue
+++ b/src/components/blogs/ceshi.vue
@@ -1,63 +1,77 @@
 <template>
-  <div>
-    <ul>
-      <li v-for="item in processedData" :key="item.date">
-        {{ item.date }}: {{ item.total_count }}
-      </li>
-    </ul>
-  </div>
+  <div ref="heat" style="height: 100%;"></div>
 </template>
 
-<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 processQueryResults = (dateSequence: string[], queryResults: any[]) => {
-  const resultMap = new Map();
-  queryResults.forEach((item: any) => {
-    resultMap.set(item.date, item.total_count);
-  });
-
-  return dateSequence.map(date => ({
-    date,
-    total_count: resultMap.get(date) || 0
-  }));
-};
-
-const rawData = ref<any[]>([]); // 从API获取的原始数据
-const processedData = ref<any[]>([]); // 处理后的数据
-
-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 }
-  ];
-
-  rawData.value = apiData;
-
-  const dateSequence = generateDateSequence(60);
-  processedData.value = processQueryResults(dateSequence, rawData.value);
-  console.log(`output->`,processedData.value)
-};
-
+<script setup lang='ts'>
+import { createEcharts } from "@/hooks/intex"
+import { onMounted,ref } from "vue";
+const heat = ref(null);
 onMounted(() => {
-  fetchData();
-});
+  const hours = [
+    '12a', '1a', '2a', '3a', '4a', '5a', '6a',
+    '7a', '8a', '9a', '10a', '11a',
+    '12p', '1p', '2p', '3p', '4p', '5p',
+    '6p', '7p', '8p', '9p', '10p', '11p'
+  ];
+  // prettier-ignore
+  const days = [
+    'Saturday', 'Friday', 'Thursday',
+    'Wednesday', 'Tuesday', 'Monday', 'Sunday'
+  ];
+  // prettier-ignore
+  const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
+    .map(function (item) {
+      return [item[1], item[0], item[2] || '-'];
+    });
+  const option = {
+    tooltip: {
+      position: 'top'
+    },
+    grid: {
+      height: '50%',
+      top: '10%'
+    },
+    xAxis: {
+      type: 'category',
+      data: hours,
+      splitArea: {
+        show: true
+      }
+    },
+    yAxis: {
+      type: 'category',
+      data: days,
+      splitArea: {
+        show: true
+      }
+    },
+    visualMap: {
+      min: 0,
+      max: 10,
+      calculable: true,
+      orient: 'horizontal',
+      left: 'center',
+      bottom: '15%'
+    },
+    series: [
+      {
+        name: 'Punch Card',
+        type: 'heatmap',
+        data: data,
+        label: {
+          show: true
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  };
+  createEcharts(heat,option)
+})
 </script>
 
-<style>
-/* 在这里添加你的样式 */
-</style>
+<style></style>
\ No newline at end of file
diff --git a/src/views/admin/ClassticManageView.vue b/src/views/admin/ClassticManageView.vue
index f931099..2157623 100644
--- a/src/views/admin/ClassticManageView.vue
+++ b/src/views/admin/ClassticManageView.vue
@@ -64,6 +64,7 @@ import type { classticInterface } from "@/api/admin/index"
 import { get, post, remove, put } from '@/tools/request';
 const { delControl, addControl, editControl } = classticStore()
 const classticlist = ref<classticInterface[]>([])
+console.log(`output->classticlist.value`,classticlist.value)
 const searchlist = reactive({
     title: ""
 })