Browse Source

add new

master
panda 8 months ago
parent
commit
254801ec5f
  1. 41
      src/components/blogs/HomePage.vue
  2. 128
      src/components/blogs/ceshi.vue
  3. 1
      src/views/admin/ClassticManageView.vue

41
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();

128
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>

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

Loading…
Cancel
Save