fengdu_0405的博客

本文介绍了实现ECharts柱状图Y轴文字颜色渐变效果的方法。关键点在于：1)将ECharts渲染模式设置为SVG而非默认的Canvas；2)在模板中定义SVG渐变元素；3)在图表配置中通过axisLabel的color函数引用对应渐变ID。文章提供了完整的Vue组件代码示例，展示了如何定义多种颜色渐变方案并应用到Y轴标签上，实现了从白色到指定颜色的垂直渐变效果。

大屏可视化项目中自定义下拉框样式的需求比较普遍，但是element组件自定义样式需要样式穿透，然后有时候还各种不生效。

摘要：本文介绍如何实现模型动画的列表展示与控制功能。通过遍历模型中的AnimationClip对象生成动画列表，并设计播放控制逻辑：首次点击播放动画，再次点击切换暂停/继续状态。核心代码使用animationMixer.clipAction控制动画状态，通过paused属性记录当前状态。最终实现可单独控制每个动画播放/暂停的交互界面。

摘要：在大屏可视化项目中，ThreeJS加载gltf模型时，https版本出现模型缺失问题。经排查发现是模型文件名大小写错误（KBKfoot.gltf应改为kbkfoot.gltf）。http版本能正常加载，而https部署的Docker前端因Linux系统严格区分大小写导致加载失败。修正文件名并清除缓存后问题解决。该问题与路径无关，而是由于https环境下系统对大小写的严格校验所致。

本文介绍了在Vue前端项目中解析和展示DXF文件的方法。首先通过npm安装dxf-viewer插件（v1.0.43），然后在展示页面中引入并使用。核心实现包括：1）创建canvas容器；2）在nextTick中初始化DxfViewer实例，设置画布样式（白底黑线）和尺寸；3）通过Load方法加载后端接口返回的DXF文件URL。需要注意给canvas容器设置固定宽高（示例为750×200px），并将viewer实例存入数组便于管理。该方法实现了DXF文件的Web端可视化展示。

文章摘要：展厅远程展示3D孪生项目时，通过GrandShow播控软件加载3D网页出现严重卡顿。排查发现虽使用RTX4000显卡，但软件内置浏览器默认禁用GPU加速。在与供应商沟通后，获得官方优化版本，成功启用GPU加速并解决了卡顿问题。

弹框外层蒙板默认覆盖了框外的光标事件导致框外元素不可操作，因此核心思路是在打开弹框后，在弹框Dom最外层的Div上动态屏蔽弹框外层div的光标事件，让框外元素的事件正常生效。同时，为了保证弹框内元素能够正常操作，在dialog本身的div上也要加上光标事件。close-on-click-modal 点击弹框外区域是否关闭弹框。需求：弹框可拖拽，点击框外不关闭弹框，且可正常操作其他区域内容。技术栈：Vue3+element-plus-2.3.9。draggable-弹框可拖拽。

在移动端向PC大屏发送控制指令时，插入一个当前网络的ip地址信息。在PC端接收指令时也获取一下当前网络的ip地址。然后将两个ip地址进行对比，如果相同，则表明移动端设备和大屏设备在同一网络环境，此时允许执行控制逻辑。否则，不执行控制指令。问题概述：现有一个信息化大屏项目，为了方便客户参观时切换菜单、讲解系统，做了一个远程控制功能。但由于MQTT协议的消息群发特性，当移动端Pad向大屏发送控制指令时，其所有访问大屏项目的PC端都会受到控制指令的影响。

将主机的 80 端口映射到容器的 80 端口。为容器指定一个名称。

（2）在项目根目录中设置开发和生产环境的配置文件，并在npm打包时用命令作区分，当本地加载时，项目的公共目录默认为"/"，而打包部署时会给路径前加上配置的公共路径"/wuye/"。至此，成功完成Nginx端口-项目的一对多请求转发。

平时部署项目的服务器突然不能上传文件，怀疑是服务器内存满了，于是找到对应的目录，删除冗余的文件后，恢复正常。5.文件可以正常上传了。

最近碰到一个需求，要求移动端远程控制大屏的真实与模拟数据之间的自由切换。于是想到可以设置一个变量用于标识数据是否为真实数据或模拟数据，并且将变量储存在localstorage中。移动端按钮修改大屏浏览器本地缓存中的变量值，在需要切换数据的vue页面中通过事件监听变量值的变化。以此来做真实数据与模拟数据之间的逻辑切换。1.在utils中新建一个文件watchLocalStorage.ts。2. 在main.js中引入并挂载。3.在需要监听的地方使用如下代码。

实在没想到几个字符之差，引发了这个奇怪的bug，耗费了将近一天时间在上面。echart也并不是无懈可击的呀，多多少少会存在些细节问题，进而引发不可预料的bug。最近做大屏，有很多echart图表，都是类似的配置和加载方式。于是想到从错误信息本身入手，但错误信息又指向echart插件的zrender底层模块，与项目代码完全不挂钩。发现正常图表的颜色值用的是rgba表示法，而该问题图表的color值用的是rgb表示法，于是将rgb修改成rgba后，图表tooltip正常运作，问题解决！

注意：responseType的值为“blob”1.定义一个方法，用于调用后端下载接口，

【代码】Three.js基础几何体贴图替换功能。

需求：正在做一款3D编辑器，类似于Three.js官方的editor工具。具备点击一侧列表动态生成模型，编辑属性等功能。2.借助dom元素的mousedown事件获取鼠标点击时的二维屏幕坐标（x,y）;1.初始化默认生成一张50000*50000的水平网格；

1.color设置的光效颜色与实际展示出来的颜色会有明显色差；2.开启物体发光通道后，会极大影响性能，页面会明显卡顿一下。

但是，使用v-if的元素会在`isLoggedIn`为假时从DOM中移除，而使用v-show的元素会通过修改CSS的`display`属性来隐藏。- 在需要频繁切换显示状态的情况下，使用v-if可能会导致性能问题，因此在需要频繁切换显示状态的情况下，建议使用v-show。- v-if适用于在条件性渲染整个元素的情况，而v-show适用于在条件性显示或隐藏元素，但不会影响其他元素的布局。- v-show：通过修改CSS的`display`属性来显示或隐藏元素，不会从DOM中移除元素，因此性能更好。

当遇到场景漫游需求时，如果需要控制相机移动，则需要指定相机的方向。