add news

src/components/blogs/HomePage.vue

@@ -29,7 +29,6 @@
                             <div class="cardtext"></div>
                         </template>
                     </a-card-meta>
-
                     <a-space wrap class="button-container">
                         <a-button shape="circle" size="large">
                             <GravatarLined />
@@ -47,8 +46,8 @@
                             <GitHubLined />
                         </a-button>
                     </a-space>
-
-                    <a-collapse class="custom-collapse" v-model:activeKey="activeKey" :bordered="false" expandIconPosition="end">
+                    <a-collapse class="custom-collapse" v-model:activeKey="activeKey" :bordered="false"
+                        expandIconPosition="end">
                         <template #expandIcon="{ isActive }">
                             <caret-right-outlined :rotate="isActive ? 90 : 0" />
                         </template>
@@ -62,18 +61,41 @@
                             <p>{{ text }}</p>
                         </a-collapse-panel>
                     </a-collapse>
-
                 </a-card>
-                <a-flex>
-
-                </a-flex>
             </a-flex>
             <a-flex style="height: 500px;width: 60%;background-color: black;border: solid 1px red;">
                 <div></div>
             </a-flex>
-            <a-flex style="height: 500px;background-color: blue;border: solid 1px red;">
-                <div id="aplayer" style="width: 100%;"></div>
+            <a-flex>
+                <a-card hoverable style="width: 400px">
+                    <template #cover>
+                        <div id="aplayer" style="width: 400px"></div>
+                        <div class="heatmap">
+                            <div ref="heat" style="height: 100%;border-right: 1px solid #e9e9e9;"></div>
+                        </div>
+                        <div class="statistic">
+                            <a-row>
+                                <a-col :span="8">
+                                    <a-statistic title="DAYS" :value="112893"  />
+                                </a-col>
+                                <a-col :span="8">
+                                    <a-statistic title="DIARYS"  :value="112893" />
+                                </a-col>
+                                <a-col :span="8">
+                                    <a-statistic title="BLOGS"  :value="112893" />
+                                </a-col>
+                            </a-row>
+                        </div>
+                    </template>
+
+                </a-card>
             </a-flex>
+            <!-- <a-flex>
+                <div id="aplayer"></div>
+                <div>
+                    <div ref="heat" style="height: 200px;width: 500px;"></div>
+                </div>
+            </a-flex> -->
         </a-flex>
     </Simplebar>
 </template>
@@ -89,8 +111,11 @@ import { onMounted } from 'vue'
 import { CaretRightOutlined } from '@ant-design/icons-vue';
 import 'APlayer/dist/APlayer.min.css';
 import APlayer from 'APlayer';
+import { createEcharts } from "@/hooks/intex"
+import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
 
-const activeKey = ref(['1']);
+const heat = ref(null);
+const activeKey = ref(['']);
 const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
 const customStyle =
     'background: #f7f7f7;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
@@ -106,7 +131,7 @@ onMounted(() => {
     });
     // 定义个人座右铭
     new Typed('.cardtext', {
-        strings: ['品瀚霖人生'],
+        strings: ['做三流测试，品瀚霖人生！'],
         typeSpeed: 200,
         backSpeed: 150,
         loop: true, // 开启循环
@@ -144,7 +169,97 @@ onMounted(() => {
                 theme: '#46718b'
             }
         ]
-});
+    });
+    function generateDates(numDays: number) {
+        const dates = [];
+        const currentDate = new Date();
+        for (let i = 0; i < numDays; i++) {
+            const date = new Date(currentDate);
+            date.setDate(currentDate.getDate() + i);
+            dates.push(
+                { date: date.toISOString().split('T')[0], blogCount: 0 }
+            ); // 包含日期和评论数
+        }
+
+        return dates;
+    }
+
+    // 初始化60天的数据
+    const data = generateDates(60);
+    data[3].blogCount = 5;
+    data[15].blogCount = 10;
+    data[25].blogCount = 3;
+
+    const formattedData = data.map((value, index) => [index % 15, Math.floor(index / 15), value.blogCount]);
+
+    const heatMapData = {
+        tooltip: {
+            position: 'top',
+            formatter: function (params) {
+                const item = data[params.dataIndex];
+                if (item.blogCount > 0) {
+                    return `${item.date}<br/>COMMENTS: ${item.blogCount}`;
+                } else {
+                    return `${item.date}`;
+                }
+            }
+        },
+        grid: {
+            left: '0',     // 左边距
+            right: '0',    // 右边距
+            top: '0',      // 上边距
+            bottom: '0',
+        },
+        xAxis: {
+            type: 'category',
+            data: Array.from({ length: 15 }, (_, i) => `Col ${i + 1}`),
+            splitArea: {
+                show: true
+            },
+            show: false
+        },
+        yAxis: {
+            type: 'category',
+            data: ['Row 1', 'Row 2', 'Row 3', 'Row 4'],
+            splitArea: {
+                show: false
+            },
+            show: false
+        },
+        visualMap: {
+            min: 0,
+            max: 10,
+            calculable: true,
+            orient: 'horizontal',
+            left: 'center',
+            bottom: '15%',
+            itemGap: 5,
+            show: false,
+            inRange: {
+                color: ['#ffffff', '#000000'] // 0评论是白色, 非0评论是黑色
+            }
+        },
+        series: [{
+            type: 'heatmap',
+            data: formattedData,
+            itemStyle: {
+                borderColor: 'rgba(0, 0, 0, 0.4)', // 设置边框颜色
+                borderWidth: 0.5, // 设置边框宽度
+            },
+            label: {
+                show: false,
+            },
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)',
+                    borderColor: '#fff', // 鼠标悬停时的边框颜色
+                    borderWidth: 2 // 鼠标悬停时的边框宽度
+                }
+            }
+        }]
+    };
+    createEcharts(heat, heatMapData)
 })
 const current = ref<string[]>(['mail']);
 const show_menu = ref(false);
@@ -311,8 +426,20 @@ const img = ref("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png")
 .button-container button {
     margin: 24px 6px;
 }
-.custom-collapse{
+
+.custom-collapse {
     margin: 24px 0px;
     background: rgb(255, 255, 255)
 }
+
+.aplayer {
+    margin: 0 0 24px 0;
+}
+
+.heatmap {
+    margin: 24px 0;
+}
+.statistic{
+    text-align: center;
+}
 </style>

src/components/blogs/ceshi.vue

@@ -1,40 +1,60 @@
 <template>
   <div class="echarts-2">
-    <div ref="own" style="height: 500px;"></div>
+    <div ref="heat" style="height: 200px;width: 500px;"></div>
   </div>
 </template>
 
 <script setup lang='ts'>
-import { onMounted, ref } from "vue"
+import { onMounted, ref } from "vue";
 import { createEcharts } from "@/hooks/intex"
-const own = ref(null);
+
+const heat = ref(null);
+
 onMounted(() => {
-  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'
-  ];
-  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 = {
+  function generateDates(numDays: number) {
+    const dates = [];
+    const currentDate = new Date();
+    for (let i = 0; i < numDays; i++) {
+      const date = new Date(currentDate);
+      date.setDate(currentDate.getDate() + i);
+      dates.push(
+        { date: date.toISOString().split('T')[0], blogCount: 0 }
+      ); // 包含日期和评论数
+    }
+
+    return dates;
+  }
+
+  // 初始化60天的数据
+  const data = generateDates(60);
+  data[3].blogCount = 5;
+  data[15].blogCount = 10;
+  data[25].blogCount = 3;
+
+  const formattedData = data.map((value, index) => [index % 15, Math.floor(index / 15), value.blogCount]);
+
+  const heatMapData = {
     tooltip: {
       position: 'top',
+      formatter: function (params) {
+        const item = data[params.dataIndex];
+        if (item.blogCount > 0) {
+          return `${item.date}<br/>COMMENTS: ${item.blogCount}`;
+        } else {
+          return `${item.date}`;
+        }
+      }
     },
     grid: {
-      height: '50%',
-      top: '10%'
+      left: '0',     // 左边距
+      right: '0',    // 右边距
+      top: '0',      // 上边距
+      bottom: '0',   // 下边距
     },
+
     xAxis: {
       type: 'category',
-      data: hours,
+      data: Array.from({ length: 15 }, (_, i) => `Col ${i + 1}`),
       splitArea: {
         show: true
       },
@@ -42,9 +62,9 @@ onMounted(() => {
     },
     yAxis: {
       type: 'category',
-      data: days,
+      data: ['Row 1', 'Row 2', 'Row 3', 'Row 4'],
       splitArea: {
-        show: true
+        show: false
       },
       show: false
     },
@@ -55,28 +75,34 @@ onMounted(() => {
       orient: 'horizontal',
       left: 'center',
       bottom: '15%',
-      show:false
+      show: false,
+      inRange: {
+        color: ['#ffffff', '#000000'] // 0评论是白色, 非0评论是黑色
+      }
     },
-    series: [
-      {
-        name: 'Punch Card',
+
+    series: [{
       type: 'heatmap',
-        data: data,
+      data: formattedData,
+      itemStyle: {
+        borderColor: '#000', // 设置边框颜色
+        borderWidth: 1 // 设置边框宽度
+      },
       label: {
-          show: true
+        show: false,
       },
       emphasis: {
         itemStyle: {
           shadowBlur: 10,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+          borderColor: '#fff', // 鼠标悬停时的边框颜色
+          borderWidth: 2 // 鼠标悬停时的边框宽度
         }
       }
-      }
-    ]
+    }]
   };
-  createEcharts(own, option)
-
-})
+  createEcharts(heat, heatMapData)
+});
 </script>
 
 <style></style>