停车场监控看板大屏数据可视化大屏 vue3

停车场监控看板大屏 数据可视化大屏 vue3

如果您需要设计属于自己的数据可视化大屏请联系我们微信:17331886870

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

停车场监控看板大屏演示地址

停车场监控看板大屏数据可视化大屏 vue3

停车场监控看板大屏项目截图

动态效果

车场压力

滚动表格展示车场车位空闲进场压力值周转

停车时间

停车时间展示今天 7天 30天可以进行tab切换

饼状图展示数据数据类型包含免费、折扣、异常、欠费、实收

停车异常

滚动表格展示停车异常

车场值班异常进出场时间

停车数据

展示今日收入

以及各个类型数据应收实收欠费优惠交易正常等类型数据。

时段监测

柱状图展示各个时段的订单数量

周期监测

折线图展示最近最近7天的车位和订单情况。

车场收入

滚动表格展示车场收入

车场、车位、应收、优惠、欠费、实收

订单金额

饼状图展示订单金额饼状图类型为免费、折扣、异常、欠费、实收

设备异常

滚动表格展示设备异常表头为车场、维修员、状态、时间

项目文件目录

部分代码

<template>
  <div class="home">
    <top title="停车场监控数据大屏" class="wow fadeInDown" data-wow-delay="0.2s"></top>
    <div class="homeMain">
      <div class="homeMainl">
        <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>
      <div class="homeMainc">
        <div class="itemTop">
          <div class="item0 wow fadeInDown">
            <item7></item7>
          </div>
          <div class="item1">
            <item8></item8>
          </div>
        </div>
        <div class="item2">
          <item name="时段监测" :duration="0.5" :delay="1">
            <item9></item9>
          </item>
        </div>
        <div class="item2">
          <item name="周期监测" :duration="0.5" :delay="1.5">
            <item10></item10>
          </item>
        </div>
      </div>
      <div class="homeMainr">
        <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>
    </div>
  </div>
</template>

<script>
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";

export default {
  data() {
    return {
      list: [],
    }
  },
  components: {
    top,
    item,
    item1,
    item2,
    item3,
    item7,
    item4,
    item5,
    item6,
    item8,
    item9,
    item10
  },
  mounted() {
    var wow = new WOW({});
    wow.init();
  },
  methods: {},
}
</script>

示例效果

vue3实现3d遮罩刻度依次加载底座效果实例

源码下载

项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础

当前为vue3版本，如果需要vue2版本请访问：停车场监控数据大屏数据可视化大屏 vue2

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