vue3 可视化数据大屏 智慧警务大屏指挥中心

id

284

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智慧警务大屏指挥中心 可视化数据大屏 vue3

动态效果

效果截图

警力资源分布

柱状图展示警力资源分布

城区
郊区
工业区
商业区
住宅区
学校区

警力结构比例

饼状图展示警力结构比例

重点人员分布

饼状图展示重点人员分布

警力资源分布

折线图展示警情趋势分析

重点车辆统计

雷达图展示重点车辆统计

警情类型分布

横向柱状图展示警情类型分布

重点人员动态

列表展示重点人员动态

设备状态监测

列表展示设备状态监测

地图标注

地图标注监控位置以及辖区警情态势

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

部分代码

<template>
  <div class="home">
    <top name="智慧警务大屏指挥中心" class="wow slideInDown"></top>
    <item7></item7>
    <div class="homeMain">
      <div class="homeMainLeft">
        <LeftPanel>
          <div class="homeMainLeftInner">
            <div class="item1">
              <item name="警力资源分布" :duration="0.5" :delay="0">
                <item1></item1>
              </item>
            </div>
            <div class="item1">
              <item name="警力结构比例" :duration="0.5" :delay="0.5">
                <item2></item2>
              </item>
            </div>
            <div class="item1">
              <item name="重点人员分布" :duration="0.5" :delay="1">
                <item3></item3>
              </item>
            </div>
          </div>
        </LeftPanel>
      </div>
      <div class="homeMainCenter">
        <div class="item1"></div>
        <div class="item2">
          <BottomPanel>
            <div class="item2Inner">
              <div class="item2InnerMain">
                <item name="重点人员动态" :duration="0.5" :delay="0">
                  <item8></item8>
                </item>
              </div>
              <div class="item2InnerMain">
                <item name="设备状态监测" :duration="0.5" :delay="0">
                  <item9></item9>
                </item>
              </div>
            </div>
          </BottomPanel>
        </div>
      </div>
      <div class="homeMainRight">
        <RightPanel>
          <div class="homeMainRightInner">
            <div class="item1">
              <item name="警情趋势分析" :duration="0.5" :delay="0">
                <item4></item4>
              </item>
            </div>
            <div class="item1">
              <item name="重点车辆统计" :duration="0.5" :delay="0.5">
                <item5></item5>
              </item>
            </div>
            <div class="item1">
              <item name="警情类型分布" :duration="0.5" :delay="1">
                <item6></item6>
              </item>
            </div>
          </div>
        </RightPanel>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted} from 'vue';
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 LeftPanel from "@/components/Panel/LeftPanel.vue";
import RightPanel from "@/components/Panel/RightPanel.vue";
import BottomPanel from "@/components/Panel/BottomPanel.vue";
import WOW from "wow.js";

onMounted(() => {
  const wow = new WOW();
  wow.init();
});

</script>

项目依赖

{
  "name": "zhihuijingwu",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build-qiniu": "vite build && node ./qiniu.js",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.13",
    "disable-devtool": "^0.3.8",
    "echarts": "^5.4.3",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "jquery": "^3.6.4",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "qs": "^6.11.2",
    "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",
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

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

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

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

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

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