智慧水务驾驶舱可视化数据大屏 vue3

vue3 可视化数据大屏 智慧水务驾驶舱

id

128

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

动态效果

演示地址

演示demo:智慧水务驾驶舱可视化数据大屏 vue3

供水总览

供水数据概览

展示供水的总体数据和关键指标，帮助用户快速了解当前供水状况。

水厂生产情况

监控水厂的生产运行状态，包括产水量、运行效率等信息。

水质监测

实时监测水质参数，确保供水安全和符合标准。

顶部展示

该区域可能用于展示重要公告、统计摘要或大屏展示内容。

供水趋势分析

通过图表等形式分析供水的历史趋势和变化，支持决策参考。

管网统计

展示供水管网的统计数据，如管网长度、覆盖范围等。

设备状态

监控水务设备的运行状态和健康状况，及时发现故障隐患。

告警信息

实时显示系统告警和异常信息，便于快速响应和处理。

管网统计

管网资产总览

展示管网资产的整体情况，包括资产数量、分布和价值，帮助管理人员全面了解管网资源。

实时数据监测

实时采集和展示管网运行数据，如压力、流量等，确保管网运行状态透明可控。

管网口径统计

统计不同口径管网的数量和比例，便于分析管网结构和优化维护策略。

顶部展示

用于展示重要信息或综合数据概览，提供一目了然的管网运行状态。

巡查养护情况

展示管网巡查和养护的执行情况，包括巡查次数、养护进度等，保障管网安全运行。

任务目标完成率

统计各项管网管理任务的完成情况，帮助评估工作效率和目标达成度。

告警事件趋势

分析管网告警事件的变化趋势，及时发现异常，支持预防和快速响应。

管线材质构成

展示管线材质的构成比例，辅助管网维护和更新决策。

DMA总览

DMA核心指标

展示DMA（分区计量区）的关键性能指标，帮助用户全面了解各分区的运行状态和效率。

漏损率占比

分析各DMA区域的漏损率占比情况，辅助识别漏损重点区域，提升管理效果。

供水量分析

对DMA区域的供水量进行统计和分析，支持供水调度和资源优化。

顶部展示

用于展示重要信息或综合数据概览，提供直观的DMA整体运行情况。

分区评价指标

评估各DMA分区的综合表现，包含多项指标，支持科学管理和绩效考核。

DMA区域压力监测

实时监测DMA区域内的水压变化，保障供水压力稳定，防止管网破裂或供水不足。

DMA区域压力监测

（同上）持续监控不同DMA区域的压力状态，确保系统安全可靠运行。

DMA分布占比

展示各DMA区域的分布比例和规模，帮助规划和优化管网布局。

水厂总览

实时监测

实时采集和展示各类水务数据，确保系统运行状态透明，便于及时发现异常。

水质监测数据

监测水质各项指标，保障供水安全，满足相关水质标准和规范。

设备运行状态

实时监控水务设备的运行情况，及时发现设备异常，保障系统稳定运行。

顶部展示

用于展示重要信息、统计摘要或关键数据，提升整体数据的可视化效果。

中部展示

展示补充的核心数据或功能模块，增强页面信息的丰富性和实用性。

供水趋势分析

通过图表等形式分析供水量的历史变化趋势，支持科学调度和决策。

告警事件

实时显示系统告警和异常事件，帮助快速响应和处理潜在风险。

能耗分析

分析水务系统的能源消耗情况，支持节能降耗和绿色管理。

视频监控

集成视频监控画面，实时监控现场情况，提升安全管理水平。

营业总览

营业收入统计

统计和展示企业的营业收入情况，帮助管理层了解收入来源和变化趋势。

用户统计

分析用户数量及其分布情况，支持用户结构优化和市场策略制定。

用水量分析

对用户用水量进行统计和分析，辅助供水调度和资源管理。

顶部展示

用于展示重要公告、统计摘要或关键数据，提升整体信息的可视化效果。

月度收入趋势

通过图表展示每月收入的变化趋势，帮助企业把握经营状况和发展方向。

缴费方式占比

统计不同缴费方式的使用比例，支持优化支付渠道和提升用户体验。

欠费排行

展示欠费用户的排名情况，便于催缴管理和风险控制。

客服工单统计

统计客服工单的数量和处理情况，提升服务质量和客户满意度。

二供总览

二供泵房概览

展示二次供水泵房的整体情况，包括设备数量、运行状态及关键指标，帮助用户全面掌握泵房运行状况。

设备运行状态

实时监控二供泵房内设备的运行状态，及时发现异常，保障设备稳定运行。

二供供水量统计

统计二次供水的供水量数据，分析供水趋势，支持供水调度和管理优化。

顶部展示

该区域用于展示重要公告、统计摘要或综合数据，提升信息的可视化效果。

二供泵房运行数据

详细展示二次供水泵房的运行参数和数据，便于深入分析和优化运行效率。

二供告警事件

实时显示二供系统的告警和异常事件，帮助快速响应和处理潜在风险。

能耗分析

分析二供泵房的能耗情况，支持节能降耗和绿色管理。

二供水质监测

监测二次供水的水质指标，确保供水安全和符合相关标准。

巡检养护

巡检关键指标

展示巡检工作的核心指标，帮助管理人员全面掌握巡检效率和质量。

巡检工单统计

统计巡检工单的数量及处理情况，支持巡检任务的管理和跟踪。

近7日巡检趋势

分析最近7天的巡检活动趋势，反映巡检工作的频率和覆盖情况。

顶部展示

该区域用于展示重要公告、统计摘要或综合数据，提升信息的可视化效果。

养护趋势分析

通过图表分析设备养护的历史趋势，支持养护计划的优化和调整。

巡检任务完成率

统计巡检任务的完成情况，评估巡检工作的执行效果。

设备养护状态

展示设备当前的养护状态，帮助及时安排维护和保养工作。

实时巡检动态

实时展示巡检现场动态和最新信息，提升巡检工作的透明度和响应速度。

工单总览

工单总量统计

统计所有工单的总数量，帮助管理人员全面了解工单处理的整体工作量。

工单类型分布

展示不同类型工单的分布情况，便于分析工单类别及其占比，优化资源配置。

工单处理效率

评估工单的处理速度和效率，帮助提升工单响应和解决的及时性。

顶部展示

该区域用于展示重要公告、统计摘要或综合数据，提升信息的可视化效果。

中部展示

展示补充的核心数据或功能模块，增强页面信息的丰富性和实用性。

工单区域分布

统计工单在不同区域的分布情况，支持区域管理和资源调配。

工单响应时间排行

展示响应时间最快或最慢的工单排名，帮助发现服务瓶颈和改进点。

工单处理趋势

分析工单处理的历史趋势，支持工作计划调整和绩效评估。

原水总览

原水监测数据概览

展示原水的整体监测数据和关键指标，帮助用户全面了解水源的基本情况。

原水水质指标

实时监测原水的水质参数，确保水源符合相关水质标准和安全要求。

水源地水位趋势

分析水源地水位的变化趋势，反映水源状况的动态变化，支持科学管理。

顶部展示

该区域用于展示重要公告、统计摘要或综合数据，提升信息的可视化效果。

水源地告警信息

实时显示水源地的告警和异常信息，便于及时响应和处理潜在风险。

原水供水量趋势

统计和分析原水的供水量变化趋势，支持供水调度和资源优化。

原水取水量分析

对原水取水量进行详细分析，帮助合理规划取水策略和管理。

水源地水质达标率

展示水源地水质达标的比例情况，确保水质安全和合规。

部分代码

<template>
  <div class="homeMain">
    <div class="homeMainLeft">
      <div class="item1">
        <item name="供水数据概览" :delay="0">
          <item1></item1>
        </item>
      </div>
      <div class="item1">
        <item name="水厂生产情况" :delay="0.5">
          <item2></item2>
        </item>
      </div>
      <div class="item1">
        <item name="水质监测" :delay="1">
          <item3></item3>
        </item>
      </div>
    </div>
    <div class="homeMainCenter">
      <div class="homeMainCenterTop">
        <item8></item8>
      </div>
      <div class="homeMainCenterBottom">
        <item type="1" name="供水趋势分析" :delay="0">
          <item7></item7>
        </item>
      </div>
    </div>
    <div class="homeMainRight">
      <div class="item1">
        <item name="管网统计" :delay="0">
          <item4></item4>
        </item>
      </div>
      <div class="item1">
        <item name="设备状态" :delay="0.5">
          <item5></item5>
        </item>
      </div>
      <div class="item1">
        <item name="告警信息" :delay="1">
          <item6></item6>
        </item>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import WOW from 'wow.js';
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';

onMounted(() => {
  const wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true,
    callback: (box) => {},
    scrollContainer: null,
    resetAnimation: true,
  });
  wow.init();
});
</script>

项目依赖

{
  "name": "zhihuishuiwu",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build && node ./qiniu.js",
    "preview": "vite preview"
  },
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@better-scroll/core": "^2.5.1",
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "@vue/shared": "^3.2.47",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "dayjs": "^1.11.7",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.2.0",
    "echarts-extension-amap": "^1.12.0",
    "echarts-liquidfill": "^3.1.0",
    "element-plus": "2.2.28",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "jquery": "^3.6.4",
    "lottie-web": "^5.12.2",
    "mockjs": "^1.1.0",
    "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",
    "video.js": "^8.12.0",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-mock": "^2.9.8",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vue3-number-roll-plus": "^0.1.3",
    "vue3-seamless-scroll": "^2.0.1",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

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

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

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

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

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

id

运行环境

开发框架

分辨率

动态效果

演示地址

供水总览

供水数据概览

水厂生产情况

水质监测

顶部展示

供水趋势分析

管网统计

设备状态

告警信息

管网统计

管网资产总览

实时数据监测

管网口径统计

顶部展示

巡查养护情况

任务目标完成率

告警事件趋势

管线材质构成

DMA总览

DMA核心指标

漏损率占比

供水量分析

顶部展示

分区评价指标

DMA区域压力监测

DMA区域压力监测

DMA分布占比

水厂总览

实时监测

水质监测数据

设备运行状态

顶部展示

中部展示

供水趋势分析

告警事件

能耗分析

视频监控

营业总览

营业收入统计

用户统计

用水量分析

顶部展示

月度收入趋势

缴费方式占比

欠费排行

客服工单统计

二供总览

二供泵房概览

设备运行状态

二供供水量统计

顶部展示

二供泵房运行数据

二供告警事件

能耗分析

二供水质监测

巡检养护

巡检关键指标

巡检工单统计

近7日巡检趋势

顶部展示

养护趋势分析

巡检任务完成率

设备养护状态

实时巡检动态

工单总览

工单总量统计

工单类型分布

工单处理效率

顶部展示

中部展示

最新工单列表

工单区域分布

工单响应时间排行

工单处理趋势