表单设计器中注册扩展自定义组件
一体化服务平台项目表单设计器中注册扩展自定义组件基于 Element Plus 的 el-upload 组件进行的二次封装,打造了一个适配实际业务场景的通用文件上传组件 rule.js = 设计器中的配置界面和规则 index.vue = 实际运行的组件代码 通过 name: “LwUpload” 将它们关联起来 rule.js - FormCreate 规则配置文件sfc(rule) { … } // 组件类型转换和配置 rule({ t }) { … } // 生成默认规则 props(_, { t }) { … } // 定义可配置属性 配置项类型: ① Switch 开关类型123456789{ type: "switch", *// 设计器中显示为开关* field: "disabled", *// 对应 props 中的属性名*}*// 生成:<el-switch...
源代码安全检测及修复
源代码安全检测严重安全缺陷Command Injection(命令注入)执行不可信赖资源中的命令,或在不可信赖的环境中执行命令,都会导致程序以攻击者的名义执行恶意命令。 Command Injection 漏洞主要表现为以下两种形式: - 攻击者能够篡改程序执行的命令:攻击者直接控制了所执行的命令。 - 攻击者能够篡改命令的执行环境:攻击者间接地控制了所执行的命令。 修复建议 可以通过修改程序运行命令的环境来间接控制这些命令的执行。我们不应当 完全信赖环境,还需采取预防措施,防止攻击者利用某些控制环境的手段进行攻击。无 论何时,只要有可能,都应由应用程序来控制命令,并使用绝对路径执行命令。如果编 译时尚不了解路径(如在跨平台应用程序中),应该在执行过程中利用可信赖的值构建 一个绝对路径。应对照一系列定义有效值的常量,仔细地检查从配置文件或者环境中读 取的命令值和路径 Cross-Site Scripting: DOM(DOM 型跨站脚本攻击)向一个Web浏览器发送未经验证的数据会导致该浏览器执行恶意代码。 措施 自动 URL 编码:使用 URLSearchParams...
无标题
vue的响应式 数据劫持 依赖追踪 实现视图数据实时联动 vue2 1.数据劫持 vue Object.defineProperty 定义每个属性的 get 和 set get 读取数据实现收集依赖 wacther set 修改数据通知依赖更新 依赖收集 dep 存储依赖该属性所有1wacth 属性被访问,把wacth添加到dep中 通知更新 属性变化是,触达set,dep通知所有wacth执行更新逻辑 vue3 1 改用 ES6 的 Proxy 实现数据劫持 不仅可以实现数据劫持,监听动态的属性添加和删除 还能支持数组,map,set等复制数据结构的监控 2 reactive ref 3 依赖追踪和触发更新 effect 函数收集依赖
数据大屏:封装大屏自适应容器组件
数据大屏:封装大屏自适应容器组件在大屏数据可视化项目中,封装大屏自适应容器组件是解决 “1920*1080 设计稿在不同尺寸屏幕上像素级还原、多设备显示一致”的核心方案。我对比了rem、vw/vh、transform: scale()三种适配方案后,最终选择了**transform: scale()等比缩放方案 **—— 因为大屏的核心需求是保持布局和元素比例的绝对统一,rem/vw是按比例缩放元素尺寸,会导致复杂的可视化布局(比如多个图表的位置、间距)变形;而transform: scale()能让整个大屏内容像 “一张图片” 一样等比放大 / 缩小,完美还原设计稿,这是大屏适配的最优解。 第一部分:组件的核心实现步骤(从配置到逻辑,结合代码)我把组件封装分为基础配置、核心计算、事件监听、插槽设计四个步骤,每个步骤配合代码说明: 1. 步骤 1:定义组件 Props(兼顾通用性和个性化) 组件的 Props 设计遵循 “默认配置 + 个性化扩展” 原则,让组件能适配不同的大屏场景,核心 Props...
数据大屏:封装带装饰性边框的内容容器(ItemWrap)
数据大屏:封装带装饰性边框的内容容器(ItemWrap)在大屏数据可视化项目中,每个数据模块(比如设备总览、报警统计、区域分布)都需要装饰性边框、统一的标题栏、标准化的内间距和布局,如果每个模块都重复写这些代码,不仅开发效率低,还会导致样式不统一、后期维护困难。因此我封装了 ItemWrap 带装饰性边框的内容容器组件,它是项目中使用频率最高的通用 UI 组件(占所有组件使用次数的 80%),也是支撑组件复用率 80%、开发效率提升 40% 的核心。这个组件的核心思路是 “抽离重复的 UI 逻辑,保留个性化扩展入口”,让业务开发只需要关注模块的核心内容,无需关心布局和装饰样式。 第一部分:组件的核心实现(从 Props 到插槽,结合代码)我把组件封装分为基础依赖引入、Props 设计、插槽设计、模板与样式封装四个步骤,每个步骤配合代码说明(基于 Vue3 + TS + SCSS): 1. 步骤 1:引入基础依赖(DataV 装饰边框 + Vue 核心 API) 大屏项目的装饰性边框使用了 DataV 的可视化边框组件(如 borderBox13、borderBox8...
数据大屏:封装多类型 ECharts 图表组件(折线图、柱状图、地图等)
数据大屏:封装多类型 ECharts 图表组件(折线图、柱状图、地图等)在大屏数据可视化项目中,我们要用到折线图、柱状图、饼图、地图等十几种 ECharts 图表,但一开始直接写原生 ECharts 会遇到三个致命问题: 重复代码多:每个图表都要写「创建实例、绑定事件、监听窗口 resize、销毁实例」的代码,一个项目里重复写几十次,既费时间又容易出错; 样式不统一:不同开发人员写的图表,坐标轴颜色、tooltip 样式、边距都不一样,大屏视觉效果乱糟糟; 大数据卡顿:大屏经常加载上千条数据,原生 ECharts 默认的动画、高亮效果会让页面帧率暴跌,用户体验差。 所以我封装了统一的多类型 ECharts 组件,核心目标就三个:减少重复代码、统一图表样式、优化大屏性能。整体思路是 “做一个通用的 ECharts 基础壳子,再给不同图表(折线 / 柱状 / 地图)做预设样式和数据适配”,业务开发时只需要传数据,不用关心底层逻辑。 第一部分:先做通用基础组件(BaseEchart)—— 解决所有图表的共性问题 这是封装的核心,相当于给所有图表做一个...
数据大屏:路由懒加载
数据大屏:路由懒加载1. 路由懒加载减小初始打包体积你在开发单页应用(SPA,比如 Vue 项目、React 项目)时,默认情况下会把所有页面的代码打包成一个 js 文件(比如app.js)。这会带来两个严重问题: 首屏加载慢:如果项目有 100 个页面,首屏加载时要下载这一个超大的 js 文件,网络差的情况下页面会白屏很久,用户体验极差; 资源浪费:用户可能只访问首页和列表页,却下载了详情页、个人中心等所有页面的代码,完全没必要。 而路由懒加载就是为了解决这两个问题而生的 —— 它的核心思想是:把不同路由对应的组件分割成不同的代码块,只有当用户访问该路由时,才加载对应的代码块。简单说就是 “按需加载”,用的时候再加载,不用不加载。 项目通过路由懒加载机制优化首屏加载速度,在src/router/index.js中可以看到: 1component: () => import(/* webpackChunkName: "LSD.bighome" */...
数据大屏:ECharts 图表采用局部刷新策略
数据大屏:ECharts 图表采用局部刷新策略组件封装与局部刷新:src/components/echart/index.vue中实现了优化的图表组件 - watch: { options: { handler (options) { // 设置true清空echart缓存,只更新变化的数据 this.chart.setOption(options, true) }, deep: true } } 12345- 通过**深度监听 options 变化,仅更新修改的数据部分**,**避免全量重绘**- **事件交互优化**:在图表组件中(如right-top.vue)处理鼠标交互时暂停轮询 myChart.on("mouseover", (params) => { this.clearData(); // 鼠标悬停时清除定时器 }); ...
数据大屏:vite是怎么用的
数据大屏:vite是怎么用的项目中使用 Vite 的性能优化实操 利用 Vite 的预构建特性:Vite 会自动对项目的依赖进行预构建(比如将 CommonJS 模块转为 ES 模块),在大屏项目中,我发现引入 ECharts 这种大依赖时,首次启动后后续热更新速度更快,不需要额外配置,Vite 会自动处理。 依赖缓存:Vite 会将预构建的依赖缓存到node_modules/.vite目录,我在项目中会注意如果依赖版本更新,会手动删除这个缓存目录,确保预构建的依赖是最新的。 静态资源处理:在大屏项目中,有很多图片、图标资源,Vite 会自动处理小于 4kb 的资源为 base64 格式(可通过build.assetsInlineLimit配置),减少了 HTTP 请求;对于大的图片资源,我会放在public目录下,通过绝对路径访问,避免 Vite 处理。 热模块替换(HMR):开发时修改组件代码,Vite 只会更新修改的模块,不会刷新整个页面。比如在电商项目中修改商品列表组件,购物车组件的状态不会丢失,大大提升了开发效率。 项目中遇到的 Vite...
数据大屏:VueUse 的组合式 API
数据大屏:VueUse 的组合式 API大屏适配场景:useWindowSize + useDebounce(核心)这是最核心的组合,用于大屏自适应容器组件的窗口尺寸监听和防抖处理: **useWindowSize**:替代了原生的window.addEventListener('resize', fn),它能直接返回当前窗口的width和height响应式数据,不用自己手动维护状态。比如在自适应组件中,我直接通过const { width: windowWidth, height: windowHeight } = useWindowSize()就能获取实时窗口尺寸,省去了手动绑定 / 解绑事件的代码。 **useDebounce**:用于包装窗口 resize 的处理逻辑,实现防抖。比如把计算缩放比例的函数传入useDebounce,得到防抖后的函数,避免高频触发计算。 实时数据场景:useIntervalFn + useThrottle 大屏需要实时轮询获取数据(比如设备状态、报警信息),我用到了这两个...



