exhibit-admin/admin-hanhai-vue/src/views/dashboard/Analysis.vue

<template>
  <div class="analysis-page">
    <!-- 展品数据统计看板 -->
    <ExhibitDataBoard />
    
    <!-- 原有的统计功能（保留但注释，可根据需要启用） -->
    <!--
    <div class="background-card">
      <a-input v-model="sql" @blur="enter" :readonly="true" placeholder="考虑到统计过于耗费性能，您可以通过点击指定块实时刷新数据！"></a-input>
      
      <div class="grid-line">
        <a-card style="width: 560px; min-height: 400px; height: auto; margin: 20px;" title="兼职发布情况" :bordered="false" @click="clickCard3">
          <a-table :dataSource="clickDataSource3" :columns="clickDolumns3" :pagination="false" />
        </a-card>
        
        <div style="width: 1080px; display: flex; flex-wrap: wrap;">
          <a-card class="mini-div" title="兼职点击统计" :bordered="false" @click="clickCard1">
            <a-table :dataSource="clickDataSource" :columns="clickDolumns" :pagination="false" />
          </a-card>
          
          <a-card class="mini-div" title="联系方式点击统计" :bordered="false" @click="clickCard2">
            <a-table :dataSource="clickDataSource2" :columns="clickDolumns2" :pagination="false" />
          </a-card>
          
          <a-card class="mini-div" title="用户统计" :bordered="false" @click="clickCard0">
            <a-row>
              <a-col :span="8">
                <a-statistic title="总用户/实名" :value="cmap.zs" >
                  <template #suffix>
                    <span>/ {{cmap.ps}}</span>
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="8">
                <a-statistic title="今日" :value="cmap.za" >
                  <template #suffix>
                    <span>/ {{cmap.pa}}</span>
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="8">
                <a-statistic title="昨日" :value="cmap.zd" >
                  <template #suffix>
                    <span>/ {{cmap.pd}}</span>
                  </template>
                </a-statistic>
              </a-col>
            </a-row>
            
            <a-row style="margin-top: 40px;">
              <a-col :span="8">
                <a-statistic title="本周" :value="cmap.zb" >
                  <template #suffix>
                    <span>/ {{cmap.pb}}</span>
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="8">
                <a-statistic title="本月" :value="cmap.zc" >
                  <template #suffix>
                    <span>/ {{cmap.pc}}</span>
                  </template>
                </a-statistic>
              </a-col>
            </a-row>
          </a-card>
          
          <a-card class="mini-div" title="公众号概要" :bordered="false" @click="clickCard9">
            <a-row>
              <a-col :span="8">
                <a-statistic title="双端总用户" :value="cmbp.a" />
              </a-col>
              <a-col :span="8">
                <a-statistic title="平台用户" :value="cmbp.b" />
              </a-col>
              <a-col :span="8">
                <a-statistic title="关注公众号" :value="cmbp.c" />
              </a-col>
            </a-row>
            
            <a-row style="margin-top: 40px;">
              <a-col :span="8">
                <a-statistic title="未转公众号" :value="cmbp.d" />
              </a-col>
              <a-col :span="8">
                <a-statistic title="未转小程序" :value="cmbp.e" />
              </a-col>
            </a-row>
          </a-card>
        </div>
      </div>
    </div>
    -->
  </div>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import CryptoJS from 'crypto-js'
import ExhibitDataBoard from '@/components/ExhibitDataBoard.vue'

export default {
  name: "Analysis",
  components: {
    ExhibitDataBoard
  },
  data() {
    return {
      sql: '',
      cmap: {
        zs: 2500,
        ps: 300,
        za: 40,
        pa: 6,
        zb: 300,
        pb: 20,
        zc: 900,
        pc: 90,
        zd: 9999,
        pd: 9999
      },
      cmbp: {
        a: 9999,
        b: 9999,
        c: 9999,
        d: 9999,
        e: 9999,
      },

      clickDataSource: [
        {
          key: '1',
          name: '今日',
          a: 0,
          b: 0
        },
        {
          key: '2',
          name: '本周',
          a: 0,
          b: 0
        },
        {
          key: '3',
          name: '本月',
          a: 0,
          b: 0
        },
        {
          key: '4',
          name: '总计',
          a: 0,
          b: 0
        },
      ],
      clickDolumns: [
        {
          title: '区域',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '点击次数',
          dataIndex: 'a',
          key: 'a',
        },
        {
          title: '点击人数',
          dataIndex: 'b',
          key: 'b',
        },
      ],

      clickDataSource2: [
        {
          key: '1',
          name: '今日',
          a: 0,
          b: 0
        },
        {
          key: '2',
          name: '本周',
          a: 0,
          b: 0
        },
        {
          key: '3',
          name: '本月',
          a: 0,
          b: 0
        },
        {
          key: '4',
          name: '总计',
          a: 0,
          b: 0
        },
      ],
      clickDolumns2: [
        {
          title: '区域',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '点击次数',
          dataIndex: 'a',
          key: 'a',
        },
        {
          title: '点击人数',
          dataIndex: 'b',
          key: 'b',
        },
      ],

      clickDataSource3: [
        {
          key: '4',
          name: '统计',
          a: 0,
          b: 0,
          c: 0
        },
      ],
      clickDolumns3: [
        {
          title: '区域',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '今日',
          dataIndex: 'a',
          key: 'a',
        },
        {
          title: '本周',
          dataIndex: 'b',
          key: 'b',
        },
        {
          title: '本月',
          dataIndex: 'c',
          key: 'c',
        },
      ],
    }
  },
  created() {
    // 注释掉原有的统计功能调用，因为现在使用ExhibitDataBoard组件
    // this.clickCard0()
    // this.clickCard1()
    // this.clickCard2()
    // this.clickCard3()
    // this.clickCard9()
  },
  methods: {
    // 保留原有方法以备后用
    clickCard0() {
      // 原有的用户统计逻辑
    },
    clickCard1() {
      // 原有的兼职点击统计逻辑
    },
    clickCard2() {
      // 原有的联系方式点击统计逻辑
    },
    clickCard3() {
      // 原有的兼职发布情况逻辑
    },
    clickCard9() {
      // 原有的公众号概要逻辑
    },
    enter() {
      // 原有的输入处理逻辑
    }
  }
}
</script>

<style scoped>
.analysis-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 24px;
}

/* 保留原有样式以备后用 */
.background-card {
  width: 100%; 
  min-height: 780px; 
  height: auto; 
  text-align: right; 
  margin-top: 20px;
  background-color: #FFF;
}

.grid-line {
  width: 100%;
  min-height: 780px;
  height: auto;
  text-align: center;
  color: blue;
  box-sizing: border-box;
  background: -webkit-linear-gradient(top, transparent 15px, #eee 0), -webkit-linear-gradient(left, transparent 15px, #eee 0);
  background-size: 16px 16px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.mini-div {
  width: 480px;
  min-height: 400px;
  height: auto;
  margin: 20px;
}
</style>