- 综合排序
- 最热优先
- 最新优先
智慧光伏储能园区数字孪生大屏
支持从园区级到设备级（如单个光伏组串、电池模组）的多层级钻取浏览，直观展示各区域实时状态（发电、储能、告警）通过统一看板集成总发电功率、当日发电量、储能充放电状态、园区负载率、等效减碳量等核心指标，实现园区运行效能一屏感知 关联巡检报告与设备历史数据支持交互操作：点击设备：调取该设备实时监控视频、技术参数与历史运行曲线点击光伏区：以热力图层展示该区域组件温度分布、疑似故障热斑，辅助精准排查模拟推演：设置未来天气变化，模拟推演发电功率与储能调度策略3. 设备监控建立关键设备（逆变器、储能变流器PCS、电池簇）的数字孪生体，实时监测核心参数：光伏逆变器：展示直流侧电压/电流、交流侧功率因数、内部温度、故障代码储能系统：展示电池簇电压/电流/温度均衡度、PCS
30110编辑于 2026-03-02- 来自专栏杨龙飞前端
大屏数据展示之数字滑动动态显示
接到一个大屏数据的需求，要是实时展示用户数，并且动画效果是翻转显示，折腾了半个多小时，写了一个demo出来，上代码 <html> <head> <script src=". margin-top:'+-numarr[i]*40+'px">0
123< instance-endarr[i])*40+'px">0123<3.4K20发布于 2019-03-29 - 来自专栏科控自动化
可视化大屏数字孪生涉及到哪些硬件？
数据大屏和数字孪生项目通常需要使用以下设备： 1. 显示设备： 用于显示数据大屏或数字孪生的交互界面。常见的显示设备包括大屏幕、投影仪、显示器等。 2. 3. 传感器： 用于采集实时数据，如温度、湿度、压力、流量等。传感器的种类和数量需要根据项目的需求进行选择。 4. 控制设备： 用于控制系统中的各种设备，如灯光、电机、阀门等。 交互设备： 用于用户与数据大屏或数字孪生系统进行交互，如触摸屏、鼠标、键盘、手势识别设备等。 9. 数据存储设备： 用于长期存储数据，如硬盘阵列、云存储等。 10. 这些设备在数据大屏和数字孪生项目中可能会根据具体的应用场景和需求而有所不同。在实际项目中，需要根据项目的具体要求和技术架构来选择合适的设备。
1.1K21编辑于 2023-11-17 - 来自专栏XC's Blog 日常笔记
前端大屏方案
abbrlink: ‘0’ 方案 一句话总结 适合场景 不适合场景 scale 整体等比缩放，简单粗暴 比例固定的展示型大屏 超宽屏/非标比例/有交互 vw/vh 视口单位，真正的流式适配 需要铺满全屏的响应式大屏 如果大屏上有 tooltip、弹窗、拖拽等交互，鼠标位置会对不上。这个问题在 ECharts 的 tooltip 上尤为明显。 坑 3：超宽屏留白。 就像我朋友遇到的情况，16:9 的设计稿放到 32:9 的拼接屏上，两边各空一大块。你可以选择拉伸（Math.max），但内容会变形。 适用场景 固定比例的纯展示大屏，没有复杂交互，交付时间紧。 3. Q：大屏需要适配移动端吗？ A：一般不需要。大屏就是大屏，手机打开看的场景极少。如果甲方非要，建议做两套页面，用媒体查询切换，而不是一套代码适配所有。 总结 大屏适配没有银弹。
6010编辑于 2026-05-08 - 来自专栏前端Q
基于vue3+threejs实现可视化大屏
前言 Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。 官方文档地址：threejs.org/ 中文文档地址：www.webgl3d.cn/pages/aac9a… 本文主要主要讲述对 threejs 的一些 api 进行基本的封装，在 vue3 项目中来实现一个可视化的 3d项目。 (25, window.innerWidth / window.innerHeight, 1, 2000); //设置相机位置 this.camera.position.set(4, 2, -3) threejs里面的鼠标事件主要通过把屏幕坐标转换成 3D 坐标。通过raycaster.intersectObjects方法转换。
2K21编辑于 2023-09-14 - 来自专栏商业智能方案
只靠可视化大屏，做不了数字化，数据总监总结3点，你做到了几个
也不是所有企业都能成功数字化。企业数字化，需要3样东西，缺一不可。 1.有钱 2.有管理能力（含远见） 3.有人才 1.有钱 数据化升级也罢，数字中台也罢，都是花钱的事，而且不立竿见影，项目实施周期半年，甚至1-2年也是常见。 曾经接触过一家年销售额8000万的企业，鉴于他们自身的经营和系统情况（大部分系统采购，另招了2-3名外包做开发，2-3名外包做BI分析），我没有推荐他们上复杂的数据项目，建议他们买一年5万左右的saas 3.有人才 企业如果要实施数字化项目，需要的人才需要这4项能力。 1) 业务能力，数据只有在业务中产生价值，数据才有价值，所以负责人必须懂业务，要能对公司各层面的业务都懂。 3）架构能力，有产品架构和系统架构能力，避免把原来的100个烟囱拆了，重新建100个烟囱，这种问题不易被感知，对企业效率却是致命的。
58660发布于 2020-11-02 - 来自专栏樯橹代码
公司大屏开发心得
大屏开发心得 布局篇 因为大屏不是对外开放的，所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。 因为大屏屏幕很大，设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大，也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。 所以在布局之前需要首先设置的是外框尺寸 html, body { height: 100%; } 大屏首先要把要把这种尺寸的差异解决，这就体现出来flexbox的优势了。 大屏模糊的问题 大屏一般都是多块屏幕拼凑起来的一整块屏。设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了，因为放的很大，锯齿很严重。 所以后来还是把大屏分开了，设计稿的每个部分拆成一个页面，每个小屏幕显示一个页面。这样子锯齿情况就减轻很多。 还解决了一个问题，就是整个屏幕的时候，字体太大。
1.7K20发布于 2019-09-02 - 来自专栏XC's Blog 日常笔记
大屏自适应方案
abbrlink: ‘0’ 引言：大屏适配的痛点与破局之道 在数据可视化大屏项目中，开发者常常面临这样的困境：同样的设计稿，在1920×1080屏幕上完美显示，到了3840×2160或1366×768的屏幕上却面目全非 今天，我将分享一种JS+CSS协同作战的大屏自适应方案，它不仅解决了适配问题，还保持了代码的优雅与可维护性。 一、方案核心思想：视窗单位+动态计算 1.1 为什么选择vw/vh？ 但在大屏场景下，这些方案各有局限： rem：依赖根字体大小，复杂场景计算繁琐 百分比：依赖父元素，多层嵌套时难以维护 媒体查询：断点固定，无法实现连续自适应 vw/vh单位基于视窗尺寸，天生适合大屏适配 在开发大屏项目时，我的建议是： 基础布局使用CSS：利用SCSS函数保持代码简洁 动态内容使用JS：利用工具类保持灵活性 关键组件混合使用：结合两者优势实现最佳效果 记住：没有最好的方案，只有最适合的方案 根据项目需求和团队习惯，灵活选择组合策略，才能打造出既美观又实用的大屏应用。
6210编辑于 2026-05-08 - 来自专栏樯橹代码
大屏数据显示优化
大屏数据显示优化 大屏数据的页面里面包含了一些3D地图和世界航班趋势图，反应上来有个问题，就是动画比较卡顿。 这些是有必要去除的，所以把这些动画全部换成了css3动画。 图片压缩 有些风景图片需要展示，这些照片都是高清的。清晰度太高的图片，浏览器处理起来也是有很明显的卡顿，尤其是图片切换到时候。 而大屏像素很低，高清的图片也显示的像素点很大，看起来非常模糊，所以并没有必要使用高清的。把图片质量降低一些，切换卡顿就不见了，显示却并没有特别的变化。
5K20发布于 2019-09-02 - 来自专栏工业数字孪生
图扑智慧交通：数字化地铁大屏管控运维平台
车控室内工作人员正全神贯注盯着一块硕大的高清数字显示屏，娴熟地触控着屏幕，车站内的各项数据、各类设备运行状况等信息在屏幕上一览无余。 该大屏是图扑软件应用自研 HT 产品，结合 3D 建模技术为南瑞集团构建的一套轻量化西安地铁数字化综合运维解决方案。 HT 视频融合解决方案将 2D 图像融合到场景的 3D 模型中，为操作员提供直观的视频图像和简单的视图控制。 通过图扑软件可视化系统将各巡查点整合至系统，利用大屏显示漫游电子巡更系统，图扑能无缝融合 HTML5 各项多媒体功能，将巡查点监控情况进行实时展示，便于巡查人员的查看与记录。 消防层级火警警示当站内发生火警时，由边缘侧火警传感器触发火警告警，虚拟场景接收边缘侧火警信号，同时解析信号内容定位告警位置，同时进行场景联动，通过图扑可视化大屏展示该区域的联动效果，并且做了烟分区效果展示
1.6K10编辑于 2022-09-13 - 来自专栏HT
图扑智慧交通：数字化地铁大屏管控运维平台
效果展示 车控室内工作人员正全神贯注盯着一块硕大的高清数字显示屏，娴熟地触控着屏幕，车站内的各项数据、各类设备运行状况等信息在屏幕上一览无余。 该大屏是图扑软件应用自研 HT 产品，结合 3D 建模技术为南瑞集团构建的一套轻量化西安地铁数字化综合运维解决方案。 HT 视频融合解决方案将 2D 图像融合到场景的 3D 模型中，为操作员提供直观的视频图像和简单的视图控制。 通过图扑软件可视化系统将各巡查点整合至系统，利用大屏显示漫游电子巡更系统，图扑能无缝融合 HTML5 各项多媒体功能，将巡查点监控情况进行实时展示，便于巡查人员的查看与记录。 消防层级 火警警示 当站内发生火警时，由边缘侧火警传感器触发火警告警，虚拟场景接收边缘侧火警信号，同时解析信号内容定位告警位置，同时进行场景联动，通过图扑可视化大屏展示该区域的联动效果，并且做了烟分区效果展示
1.4K20编辑于 2022-09-29 AI辅助开发大屏案例详解：基于smardaten开发港口作业分析大屏
三、搭建步骤通过smardaten构建港口作业分析大屏，仅需以下四个核心步骤：大屏框架生成：利用AI指令快速生成大屏布局、图表与样式；样式优化：根据业务需求删减非必要指标，补充缺失模块并美化样式；组件配置与绑定 四、大屏设计4.1、AI生成大屏进入应用设计界面，唤起右下角的AI助手，输入大屏生成指令：“生成一个管理港口作业的大屏，包含货物吞吐量、船舶调度、泊位利用率等多个模块指标”输入大屏生成指令后，系统便会根据业务场景 ，我们设置了特殊样式规则：当"吨数"字段值大于200时，该数字自动显示为醒目的红色并加粗经过这一系列配置，一个数据清晰、视觉直观、重点突出的船舶状态监测表格便已完成，实现了对在港船舶作业情况的实时监控与重点船舶的快速识别 ，并置于柱状图上方显示为突出表现优秀单位，我们为TOP3数据设置了特别样式规则：柱状图与文字整体使用渐变金色主题，并设置合适的滚动速度，确保所有数据都能得到充分展示通过以上配置，港口作业效率排行榜成功实现了对各作业单位效率值的直观对比与动态展示 六、体验总结通过对港口作业分析大屏的完整搭建，我们充分体验到smardaten平台在数据可视化大屏开发中的显著优势：AI助力，高效起步：通过自然语言指令快速生成专业大屏框架，大幅降低初始设计成本，实现分钟级原型搭建
76010编辑于 2025-11-14- 来自专栏前端Q
原生 canvas 如何实现大屏?
前言 可视化大屏该如何做？有可能一天完成吗？废话不多说，直接看效果，线上 Demo 地址 lxfu1.github.io/large-scree…。 如何用 canvas 绘制各种图表，如何实现 canvas 动画 如何自动化部署自己的大屏网站 实现 项目基于 Create React App --template typescript搭建，包管理工具使用的 缺点：兼容性，基于 proxy 开发，对低版本浏览器不友好，当然，大屏应该也不会考虑 IE 这类浏览器。 当然，在这个项目中函数缓存比较鸡肋，为了用而用，试想，如果有一个函数计算量非常大，组件内又有多个 state 频繁更新，怎么确保函数不被重复调用呢？ ; it("primitive", () => { const cacheFn = cache(primitivefn); const res1 = cacheFn(1, 2, 3)
66020编辑于 2023-08-23 - 来自专栏Python可视化
【可视化大屏】用Python开发智慧城市数据分析大屏！
这是我独立开发的Python可视化大屏，看下演示效果： ，时长01:15 这个大屏，是通过pyecharts可视化开发框架实现。 下面详细介绍，这个大屏的实现过程。 _临时.html') print('生成完毕:大屏_临时.html') 至此，临时大屏文件已经生成。 下面就开始手动拖拽，拖拽的过程，就不文字阐述了，可点击这个视频，观看拖拽过程： ，时长01:21 2.9 生成最终大屏 很关键！！ 除了常规的拖拽组合大屏操作外，还记得2.7章节留下的疑问吗？ (text2) print('已写入：大屏_临时2.html') 最后，再执行常规生成最终大屏的代码： Page.save_resize_html( source="大屏_临时2.html", # 源html文件 cfg_file="chart_config.json", # 配置文件 dest="大屏_最终.html" # 目标html文件 ) 这样，就完成了把视频布局到大屏里的最终目的
43410编辑于 2025-07-14 - 来自专栏编程学习
输入3个数字，从大到小输出
要求： 写代码，输入三个整数，使整数按从大到小的顺序输出。 例如： 输入：2 3 1 输出：3 2 1 （1）问题分析（难点所在）： 我们在输出时，如：printf("%d,%d,%d",a,b,c); 时，我们总按规定的顺序将“a，b，c”的结果输出，如果要从大到小 ，则需要我们无论输入什么时，都让a最大，b第二大，c最小。
34910编辑于 2024-03-19 数据大屏交互设计案例详解 | 基于smardaten实现智慧交通监测大屏
而现代智慧交通大屏，利用可视化的方式整合多源数据，一屏即可实现全域感知和综合监测，又利用各类交互设计，提升数据大屏的联动能力，加快决策过程。 点击跳转：大屏中各组件支持点击事件，例如针对指标卡可以实现点击跳转的功能，实现从宏观指标到微观详情的快速穿透。 三、配置过程进入平台后，选择交通监测系统，进入数据大屏的配置页。在数据大屏中支持多种交互动作，其中交互组件作为与用户直接交互的核心元素，包含按钮、导航、输入框等多种类型。3.1. 回到数据大屏的配置页，将地址填入并绑定“车牌号” 作为跳转参数，确保查询结果与输入的车牌号精准匹配。完成后，我们预览测试一下。 交互能力多，支撑多维度分析：覆盖页面导航、图表联动、下钻分析、过滤筛选等能力，使大屏从静态展示升级为“宏观到微观” 的数据探索工具，助力用户深入洞察，提升决策质量与效率。
58810编辑于 2025-10-29- 来自专栏IIoT可视化
数字可视化大屏+组态软件，你说智慧地铁凭啥这么强？
防火分区展示 正常状态，分区图形隐藏；报警状态：分区红色显示+火苗闪烁； 3. 单兵巡检 有3个单兵定位，分别是单兵1，单兵2，单兵3，单兵位置用二维坐标轴显示，单兵定位不需要进行路径的规划，瞬移，只需要显示实时的定位位置。 水务 1)水表数字展示 2)固定点位二维面板弹框显示数据 8.分层/隐藏 1) 客流密度层（passengerMonitor）——热力图 2) 设备层（devMonitor）——虚拟设备/重点设备（虚拟 6) 环境监视层（envAffairs ）——温湿传感器/烟感/异味传感器 7) 单独3D建筑物层 ， 两层分开 展示以上层级时候3D场景淡化，显示层级上的设备，点击设备弹出2D面板显示相关信息，图扑负责版面的弹出及面板样式展示 9.弹出面板 1) 在3D场景内的弹框，当设备图元被墙体遮挡，且该图元有报警时（无论确认与否），都能提供穿透显示，保证车站工作人员能够看到。没有报警图元由图扑决定是否穿透显示。
3.9K30发布于 2020-11-12 - 来自专栏前端开发
Vue3 大屏自适应组件使用指南与封装方法
Vue3 大屏自适应组件使用指南与封装方法组件使用方法详解（一）基础集成步骤安装依赖 npm install screenfull chart.js # 可选，用于全屏和图表 # 或使用yarn app.mount('#app');在组件中使用 <template>
数据监控大屏 /HeavyComponent.vue'), loadingComponent: LoadingSpinner, delay: 200});// 在大屏中使用<HeavyComponent v-if performance.mark('render-end'); performance.measure('render', 'render-start', 'render-end');};总结通过本文提供的方法，你可以在Vue3项目中高效地实现和封装大屏自适应组件 关键要点包括：基础使用：通过简单配置即可实现大屏自适应组件封装：创建可复用的自适应卡片、图表和布局组件性能优化：实现虚拟列表、按需加载和懒加载高级特性：添加全屏功能、地图组件适配测试与监控：使用工具测试不同分辨率下的显示效果这个方案适用于各类大屏展示系统 1.1K10编辑于 2025-05-25来自专栏低代码平台【免费大屏版】JeecgBoot v3.7.2 大屏版发布，开源低代码平台
当前版本：v3.7.2 | 2024-12-12源码下载https://github.com/jeecgboot/JeecgBoot升级日志重要的事情说三遍，三遍，三遍，本次重点提供了免费大屏设计器！！ issue处理jeecgboot支持作为乾坤子应用集成积木BI，提供免费大屏升级积木报表到最新版本邮件推送支持配置采用定时推送还是直接发送支持自定义阿里大鱼短信的模板code支持新版钉钉登录逻辑redis vue3版本的子项目 进行微前端qiankun集成？ 精细化数据权限控制，控制到行级，列表级，表单字段级，实现不同人看不同数据，不同人对同一个页面操作不同字段在线配置报表（无需编码，通过在线配置方式，实现曲线图，柱状图，数据等报表）页面校验自动生成(必须输入、数字校验 浏览器等各种浏览器示例代码丰富，提供很多案例参考采用maven分模块开发方式支持菜单动态路由权限控制采用 RBAC（Role-Based Access Control，基于角色的访问控制）系统效果预览积木BI大屏
90720编辑于 2024-12-12零代码如何搭建3D可视化大屏？
搞数字孪生的，谁没为那个酷炫的3D可视化大屏掉过几根头发？想用Three.js手搓一个，WebGL门槛高、开发周期长、联调BUG多……最后项目交付，全组人都得熬成“熊猫眼”。 难道想快速搞出一个专业的3D可视化大屏，就必须跪求前端图形学大佬吗？未必。今天，我们就来聊聊如何用 “零代码” 的思路，像搭积木一样，快速构建你的第一张3D可视化大屏。一、什么是“零代码”3D大屏？ 二、四步搭建法：从0到1构建你的3D大屏一套标准的零代码搭建流程，通常包含以下四个关键步骤：第1步：工具选型 —— 选择合适的“武器库”工欲善其事，必先利其器。选择一款强大的零代码平台是成功的起点。 性能依赖： 大屏的最终性能在很大程度上依赖于平台本身的优化水平。零代码搭建3D可视化大屏，本质上是一场生产关系的变革。 对于大多数数字孪生项目而言，零代码方案已经能够覆盖80%的展示与监控需求。下次当我们再接到一个紧急的 3D可视化大屏 任务时，不妨先问问自己：“这个需求，真的需要我从零开始写代码吗？”
44010编辑于 2025-09-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号