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: ""
})