智慧普法数据可视化大屏可视化数据大屏 vue3

vue3 可视化数据大屏 智慧普法数据可视化大屏

id

242

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智慧普法数据可视化大屏可视化数据大屏 vue3

动态效果

效果截图

普法队伍建设

采用饼状图展示不同类型普法人员的比例分布：
专职法律工作者
律师
法学教师
法官检察官
其他普法人员

普法宣传方式分析

使用柱状图直观展示各种普法宣传方式的数量或效果对比：
模拟法庭
案例宣讲
实地咨询
新媒体推送
线上直播
讲座培训

法律六进情况

通过进度条可视化展示"法律六进"工作的完成情况：
进机关
进乡村
进社区
进学校
进企业
进网络

关键数据

以数据卡片形式展示核心指标：
普法课程数量
普法活动总数
覆盖人群规模
普法志愿者数量

普法覆盖热力图

利用热力图，直观展示不同地区普法工作的覆盖密度和分布情况，帮助决策者了解普法资源分配的合理性。

实时普法动态

采用滚动列表形式展示最新的普法活动和事件，保持信息的实时更新。

普法活动趋势

使用折线图展示一段时间内普法活动的数量变化趋势，便于分析普法工作的周期性特点。

各地市普法次数排名

通过排行榜展示不同地区普法工作的开展情况，促进区域间的良性竞争。

媒体宣传情况

采用雷达图展示不同媒体渠道的普法宣传效果，全面评估宣传策略的有效性。

项目文件目录

部分代码

<template>
  <div class="home">
    <particles></particles>
    <top title="智慧普法数据可视化大屏" class="wow fadeInDown" data-wow-delay="0.2s"></top>
    <div class="homeMain">
      <div class="homeMainLeft">
        <div class="homeMainLeftInner">
          <div class="item1">
            <item :icon="icon1" name="普法队伍建设" :duration="0.5" :delay="0">
              <item1></item1>
            </item>
          </div>
          <div class="item1">
            <item :icon="icon2" name="普法宣传方式分析" :duration="0.5" :delay="0.5">
              <item2></item2>
            </item>
          </div>
          <div class="item1">
            <item :icon="icon3" name="法律六进情况" :duration="0.5" :delay="1">
              <item3></item3>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainCenter">
        <div class="item0">
          <item7></item7>
        </div>
        <div class="item1">
          <item10></item10>
        </div>
        <div class="item2">
          <div class="item2Inner">
            <item :icon="icon7" name="实时普法动态" :duration="0.5" :delay="1">
              <item8></item8>
            </item>
          </div>
          <div class="item2Inner">
            <item :icon="icon8" name="热门普法内容排行" :duration="0.5" :delay="1">
              <item9></item9>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainRight">
        <div class="homeMainRightInner">
          <div class="item1">
            <item :icon="icon4" name="普法活动趋势" :duration="0.5" :delay="0">
              <item4></item4>
            </item>
          </div>
          <div class="item1">
            <item :icon="icon5" name="各地市普法次数排名" :duration="0.5" :delay="0.5">
              <item5></item5>
            </item>
          </div>
          <div class="item1">
            <item :icon="icon6" name="媒体宣传情况" :duration="0.5" :delay="1">
              <item6></item6>
            </item>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import { useAnimationStore } from '@/stores/animationStore'; // 引入 Pinia 动画存储

import top from "@/components/top/index.vue";
import item from "@/components/item/index.vue";
import item1 from "./components/item1/index.vue";
import item2 from "./components/item2/index.vue";
import item3 from "./components/item3/index.vue";
import item4 from "./components/item4/index.vue";
import item5 from "./components/item5/index.vue";
import item6 from "./components/item6/index.vue";
import item7 from "./components/item7/index.vue";
import item8 from "./components/item8/index.vue";
import item9 from "./components/item9/index.vue";
import item10 from "./components/item10/index.vue";
import WOW from "wow.js";
import particles from "@/components/particles/index.vue";
import icon1 from '../assets/icon1.png';
import icon2 from '../assets/icon2.png';
import icon3 from '../assets/icon3.png';
import icon4 from '../assets/icon4.png';
import icon5 from '../assets/icon5.png';
import icon6 from '../assets/icon6.png';
import icon7 from '../assets/icon7.png';
import icon8 from '../assets/icon8.png';
onMounted(() => {
  const wow = new WOW();
  wow.init();
  // 获取动画存储实例
  const animationStore = useAnimationStore();
  setTimeout(() => {
    animationStore.triggerAnimation(); // 统一触发所有组件动画
  }, 2000); // 延迟 1.5 秒后触发
});
</script>

项目依赖

{
  "name": "zhihuipufa",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build-qiniu": "vite build && node ./qiniu.js",
    "preview": "vite preview"
  },
  "dependencies": {
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "@tsparticles/slim": "^3.8.1",
    "@tsparticles/vue3": "^3.0.1",
    "pinia": "^3.0.2",
    "@turf/turf": "^7.2.0",
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "dayjs": "^1.11.9",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.2.0",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "vite-plugin-compression": "^0.5.1",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

项目基于vue3+vite+js开发 nodejs 18

购买代码前请确保具备相关开发基础

本项目为纯前端大屏，无后端支持

默认数据为模拟数据，实际使用时需接入真实数据源

虚拟产品一经售出概不退款请谅解

完竣世界 -关注前端分享心得