|
|
<template> <div class="content"> <div class="card"> <a-row :gutter="16" style="justify-content: space-between;"> <a-col :span="4"> <a-card> <a-statistic title="博客数量" :value="count.blogCount" suffix="篇" :value-style="{ color: '#3f8600' }" style="margin-right: 50px"> <template #prefix> <BlogOutLined /> </template> </a-statistic> </a-card> </a-col> <a-col :span="4"> <a-card> <a-statistic title="照片数量" :value="count.photoCount" suffix="张" :value-style="{ color: '#3f8600' }" style="margin-right: 50px"> <template #prefix> <PhotoOutLined /> </template> </a-statistic> </a-card> </a-col> <a-col :span="4"> <a-card> <a-statistic title="文件总数" :value="count.fileCount" suffix="个" :value-style="{ color: '#3f8600' }" style="margin-right: 50px"> <template #prefix> <FileOutLined /> </template> </a-statistic> </a-card> </a-col> <a-col :span="4"> <a-card> <a-statistic title="日记发表" :value="count.diaryCount" suffix="篇" :value-style="{ color: '#3f8600' }" style="margin-right: 50px"> <template #prefix> <DiaryOutLined /> </template> </a-statistic> </a-card> </a-col> <a-col :span="4"> <a-card> <a-statistic title="评论数量" :value="count.commentCount" suffix="条" :value-style="{ color: '#3f8600' }" style="margin-right: 50px"> <template #prefix> <CommentOutLined /> </template> </a-statistic> </a-card> </a-col> </a-row> </div> <div class="echarts-1"> <div ref="blog"></div> <div ref="diary"></div> <div ref="photo"></div> </div> <div class="echarts-2"> <div ref="own"></div> </div> <div class="comment"> <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false"> <template #bodyCell="{ column, text, record }"> <template v-if="column.dataIndex === 'name'"> <div class="editable-cell"> <div class="editable-cell-text-wrapper"> {{ text || ' ' }} </div> </div> </template> <template v-else-if="column.dataIndex === 'operation'"> <a-popconfirm v-if="dataSource.length" title="确认删除么?" @confirm="onDelete(record.key)"> <a>删除</a> </a-popconfirm> </template> </template> </a-table> </div> </div> </template> <script setup lang='ts'> import { reactive, ref, onMounted } from 'vue'; import type { Ref } from 'vue'; import { createEcharts } from '@/hooks/intex' const count = reactive({ blogCount: '12', photoCount: '13', fileCount: '14', diaryCount: '15', commentCount: '16' }) const blog = ref(null); const diary = ref(null); const photo = ref(null); const own = ref(null); onMounted(() => { const blogData = { title: { text: '周博客统计', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '数量', type: 'pie', radius: '50%', data: [ { value: 1048, name: '星期一' }, { value: 735, name: '星期二' }, { value: 580, name: '星期三' }, { value: 484, name: '星期四' }, { value: 300, name: '星期五' }, { value: 300, name: '星期六' }, { value: 300, name: '星期日' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; const diaryData = { title: { text: '周日记统计', left: 'center' }, xAxis: { type: 'category', data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'] }, yAxis: { type: 'value' }, series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true } ] }; const photoData = { title: { text: '周照片统计', left: 'center' }, xAxis: { type: 'category', data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' } ] }; const ownData = { title: { text: '完全统计', left: 'center', }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['月日记量', '月博客量', '月照片量', '月评论量', '月文件量'], top: '10%', }, toolbox: { show: true, orient: 'vertical', left: 'right', bottom: '10%', feature: { mark: { show: true }, magicType: { show: true, type: ['line', 'bar', 'stack'] }, restore: { show: true }, saveAsImage: { show: true } } }, xAxis: [ { type: 'category', axisTick: { show: false }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], } ], yAxis: [ { type: 'value' } ], series: [ { name: '月日记量', type: 'bar', barGap: 0, emphasis: { focus: 'series' }, data: [320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332] }, { name: '月博客量', type: 'bar', emphasis: { focus: 'series' }, data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 220, 182] }, { name: '月照片量', type: 'bar', emphasis: { focus: 'series' }, data: [150, 232, 201, 154, 190, 220, 182, 191, 234, 290, 220, 182] }, { name: '月评论量', type: 'bar', emphasis: { focus: 'series' }, data: [98, 77, 101, 99, 40, 201, 154, 190, 220, 182, 191, 201, 154] }, { name: '月文件量', type: 'bar', emphasis: { focus: 'series' }, data: [98, 77, 101, 99, 40, 40, 201, 154, 190, 220, 182, 154, 190] } ], grid: [ { bottom: '10%' } ] }; createEcharts(blog, blogData) createEcharts(diary, diaryData) createEcharts(photo, photoData) createEcharts(own, ownData) }); interface DataItem { key: string; name: string; blog: string; content: string; time: String } const columns = [ { title: '评论人', dataIndex: 'name', width: '10%', }, { title: '评论博客', dataIndex: 'blog', width: '15%', }, { title: '评论内容', dataIndex: 'content', }, { title: '评论时间', dataIndex: 'time', width: '10%', }, { title: '操作', dataIndex: 'operation', }, ]; const dataSource: Ref<DataItem[]> = ref<DataItem[]>([ { key: '0', name: 'wupeng', blog: "linux系统安装", content: '教程比较详细', time: '2014' }, { key: '1', name: 'wulei', blog: "linux命令", content: '写的很好,值得借鉴!', time: '2014' }, ]); const onDelete = (key: string) => { dataSource.value = dataSource.value.filter(item => item.key !== key); };
</script> <style scoped> .content{ margin: 24px; } .card, .comment, .echarts-1, .echarts-2 { background-color: #ececec; padding: 24px; } .echarts-1 { display: flex; justify-content: space-between; } .echarts-1 div{ width: calc(85vw/3); height: calc((85vw/3)/(5/3)); } .echarts-2 div{ width: calc(85vw); height: calc((85vw/3)/2); } </style>
|