blog_front/src/views/admin/DashBoardView.vue

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