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