城镇污水可视化大屏可视化数据大屏 vue3

vue3 可视化数据大屏 城镇污水可视化大屏

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

id

252

运行环境

nodejs 18

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:城镇污水可视化大屏可视化数据大屏 vue3

动态效果

效果截图

实时流量

数字卡片展示进水流量和出水流量

设备运行状态

数字卡片展示泵站风机污水处理

能耗历史

折线图展示能耗历史

工艺流程图

工艺流程图展示

格栅
沉砂池
曝气池
二沉池
过滤器
消毒池

关键数据

数字卡片展示

水质合规率
系统负荷率
日处理量
能耗指标

水质参数

柱状图展示水质参数

污水处理效率分析

折线图展示污水处理效率分析

污水处理预警信息

表格展示污水处理预警信息

历史流量

弹窗展示历史流量

历史水质

历史水质展示

日期
PH （单位）
COD (mg/L)
BOD (mg/L)
SS (mg/L)
氨氮(mg/L)
总磷（mg/L）
总氮（mg/L)

项目文件目录

部分代码

<template>
  <div class="home">
    <top title="城镇污水可视化大屏" class="wow fadeInDown" data-wow-delay="0.2s"></top>
    <item9></item9>
    <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="item0">
          <item7></item7>
        </div>
        <div class="item1" ref="item8Ref">
        </div>
        <div class="item2" ref="containerRef">
          <item name="工艺流程图" type="big" :duration="0.5" :delay="1">
            <item8></item8>
          </item>
        </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 {ref, onMounted} from 'vue';
import {gsap} from 'gsap';
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 WOW from "wow.js";
import LeftPanel from "@/components/Panel2/LeftPanel.vue";
import RightPanel from "@/components/Panel2/RightPanel.vue";

const item8Ref = ref(null); // 获取 item8 的 DOM 元素
</script>

项目依赖

"dependencies": {
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "@turf/turf": "^7.2.0",
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "cesium-navigation-es6": "^3.0.9",
    "dayjs": "^1.11.9",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.2.0",
    "element-plus": "^2.9.5",
    "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",
    "relation-graph": "^2.2.10",
    "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",
    "vite-plugin-cesium": "github:yelingkong/vite-plugin-cesium"
  }

源码下载

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

vue3框架vue2写法

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

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