zksy-website-back/src/views/index.vue

<script setup>
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts'
import {
  Award,
  Bell,
  FileText,
  Home,
  Lightbulb,
  LucideTimer,
  Newspaper,
  Package,
  Plus,
  Trophy,
  Users
} from 'lucide-vue-next'
import useUserStore from "@/store/modules/user.js";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

// 响应式数据
const currentDate = ref('')
const productChart = ref(null)
const trendChart = ref(null)

const store = useUserStore();

const router = useRouter();

// 统计数据
const stats = ref({
  productCount: 156,
  newsCount: 89,
  jobCount: 12,
  honerCount: 25
})

// 快速入口配置
const quickEntries = ref([
  {
    name: '产品发布',
    description: '发布新产品信息',
    icon: Package,
    route: '/gwnrgl/cpzx',
    bgColor: 'bg-blue-100',
    iconColor: 'text-blue-600'
  },
  {
    name: '发展历程',
    description: '管理公司历程',
    icon: LucideTimer,
    route: '/gwnrgl/fzlc',
    bgColor: 'bg-green-100',
    iconColor: 'text-green-600'
  },
  {
    name: '招聘管理',
    description: '发布招聘信息',
    icon: Users,
    route: '/gwnrgl/zpgl',
    bgColor: 'bg-purple-100',
    iconColor: 'text-purple-600'
  },
  {
    name: '新闻动态',
    description: '发布新闻资讯',
    icon: Newspaper,
    route: '/gwnrgl/xwgl',
    bgColor: 'bg-orange-100',
    iconColor: 'text-orange-600'
  },
  {
    name: '荣誉资质',
    description: '管理荣誉证书',
    icon: Trophy,
    route: '/gwnrgl/ryzz',
    bgColor: 'bg-red-100',
    iconColor: 'text-red-600'
  },
  {
    name: '解决方案',
    description: '管理解决方案',
    icon: Lightbulb,
    route: '/gwnrgl/jjfa',
    bgColor: 'bg-yellow-100',
    iconColor: 'text-yellow-600'
  },
  {
    name: '首页信息',
    description: '首页内容管理',
    icon: Home,
    route: '/gwnrgl/syxxgl',
    bgColor: 'bg-indigo-100',
    iconColor: 'text-indigo-600'
  }
])

// 最新动态
const recentActivities = ref([
  {
    id: 1,
    title: '新产品"智能解决方案V2.0"已发布',
    time: '2小时前',
    icon: Plus,
    bgColor: 'bg-blue-100',
    iconColor: 'text-blue-600'
  },
  {
    id: 2,
    title: '招聘信息已更新，新增3个职位',
    time: '4小时前',
    icon: Users,
    bgColor: 'bg-green-100',
    iconColor: 'text-green-600'
  },
  {
    id: 3,
    title: '公司荣获"年度创新企业"奖项',
    time: '1天前',
    icon: Award,
    bgColor: 'bg-yellow-100',
    iconColor: 'text-yellow-600'
  },
  {
    id: 4,
    title: '新闻"行业发展趋势分析"已发布',
    time: '2天前',
    icon: Bell,
    bgColor: 'bg-purple-100',
    iconColor: 'text-purple-600'
  }
])

// 初始化图表
const initCharts = () => {
  // 产品分类饼图
  const productChartInstance = echarts.init(productChart.value)
  const productOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '产品分类',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 45, name: '软件产品' },
          { value: 35, name: '硬件设备' },
          { value: 28, name: '解决方案' },
          { value: 25, name: '技术服务' },
          { value: 23, name: '其他产品' }
        ]
      }
    ]
  }
  productChartInstance.setOption(productOption)

  // 月度趋势图
  const trendChartInstance = echarts.init(trendChart.value)
  const trendOption = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['产品发布', '新闻发布', '招聘发布']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '产品发布',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [12, 15, 18, 22, 25, 28]
      },
      {
        name: '新闻发布',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [8, 12, 14, 16, 18, 20]
      },
      {
        name: '招聘发布',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [2, 3, 4, 3, 5, 4]
      }
    ]
  }
  trendChartInstance.setOption(trendOption)
}

// 快速入口点击处理
const handleQuickEntry = (route) => {
  // 这里可以添加路由跳转逻辑
  router.push(route)
}

// 获取当前日期
const getCurrentDate = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const weekday = weekdays[now.getDay()]
  currentDate.value = `${year}年${month}月${day}日 ${weekday}`
}

const getData = async () => {
  const res = await request.get("/home/getHomeInfo")
  if (res.code !== 200) {
    ElMessage.error(res.msg)
     return
  }
  stats.value = res.data
  console.log(stats.value);
}

onMounted(() => {
  getCurrentDate()
  getData()
  // setTimeout(() => {
  //   initCharts()
  // }, 100)
})
</script>


<template>
  <div class="min-h-screen bg-gray-50 p-6">
    <!-- 顶部欢迎区域 -->
    <div class="mb-8">
      <div class="bg-white rounded-lg shadow-sm p-6">
        <p class="text-gray-600">{{ currentDate }} | 欢迎回来，{{store.nickName}}</p>
      </div>
    </div>

    <!-- 核心数据统计 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <el-card class="stat-card">
        <div class="flex items-center">
          <div class="p-3 bg-blue-100 rounded-lg mr-4">
            <Package class="w-6 h-6 text-blue-600" />
          </div>
          <div>
            <p class="text-sm text-gray-600">产品总数</p>
            <p class="text-2xl font-bold text-gray-800">{{ stats.productCount }}</p>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="flex items-center">
          <div class="p-3 bg-green-100 rounded-lg mr-4">
            <FileText class="w-6 h-6 text-green-600" />
          </div>
          <div>
            <p class="text-sm text-gray-600">新闻文章</p>
            <p class="text-2xl font-bold text-gray-800">{{ stats.newsCount }}</p>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="flex items-center">
          <div class="p-3 bg-purple-100 rounded-lg mr-4">
            <Users class="w-6 h-6 text-purple-600" />
          </div>
          <div>
            <p class="text-sm text-gray-600">招聘职位</p>
            <p class="text-2xl font-bold text-gray-800">{{ stats.jobCount }}</p>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="flex items-center">
          <div class="p-3 bg-orange-100 rounded-lg mr-4">
            <Award class="w-6 h-6 text-orange-600" />
          </div>
          <div>
            <p class="text-sm text-gray-600">荣誉资质</p>
            <p class="text-2xl font-bold text-gray-800">{{ stats.honerCount }}</p>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 快速入口区域 -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold text-gray-800 mb-6">快速入口</h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <el-card
            v-for="item in quickEntries"
            :key="item.name"
            class="quick-entry-card cursor-pointer hover:shadow-lg transition-all duration-300"
            @click="handleQuickEntry(item.route)"
        >
          <div class="text-center p-4">
            <div class="mb-4 flex justify-center">
              <div :class="`p-4 rounded-full ${item.bgColor}`">
                <component :is="item.icon" :class="`w-8 h-8 ${item.iconColor}`" />
              </div>
            </div>
            <h3 class="font-semibold text-gray-800 mb-2">{{ item.name }}</h3>
            <p class="text-sm text-gray-600">{{ item.description }}</p>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 数据展示区域 -->
<!--    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">-->
<!--      &lt;!&ndash; 产品分类统计 &ndash;&gt;-->
<!--      <el-card>-->
<!--        <template #header>-->
<!--          <h3 class="text-lg font-semibold text-gray-800">产品分类分布</h3>-->
<!--        </template>-->
<!--        <div ref="productChart" class="h-80"></div>-->
<!--      </el-card>-->

<!--      &lt;!&ndash; 月度数据趋势 &ndash;&gt;-->
<!--      <el-card>-->
<!--        <template #header>-->
<!--          <h3 class="text-lg font-semibold text-gray-800">月度数据趋势</h3>-->
<!--        </template>-->
<!--        <div ref="trendChart" class="h-80"></div>-->
<!--      </el-card>-->
<!--    </div>-->
  </div>
</template>


<style scoped>
.stat-card {
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quick-entry-card {
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}

.quick-entry-card:hover {
  transform: translateY(-4px);
  border-color: #3b82f6;
}
</style>