可视化平台 该项目主要是为公司数据分析人员用于数据成果可视化展示，例如：季度公司各版块投资回报率展示、公司各部门业绩评估等使用场景。 主要运用的技术栈是，VUE3、ts、pinia、less等来实现的。总结起来的核心亮点就是：1.拥有可视化拖拽界面，强大的编辑功能：使用简单拖拽的方式即可完成多种样式和数据配置。2.拥有丰富的组件库与模板库，同时支持持续的扩展。3.可以对布局元素进行自定义的样式调节。 SketchRule Vue3DraggableResizable 在页面左侧会有一个图表模块列表：包括Echarts上的各种类型图表以及文字、视频等，通过鼠标可以拖拽到中间画布中生成实际的组件。编辑区域支持等比例缩放；在画布中可以自由调节各组件大小，位置，角度，以及图层层级，在左侧还有一个图层列表，会与画布中组件的层级一一对应，两边都可以进行图层操作。在页面右侧会有一个管理面板，当我们在画布中选中一个组件，管理面板就会出现该组件的一些基本参数，比如位置，大小，角度，颜色、echarts字体设置、配置项设置等，可以进行微调操作。同时画布还支持右击菜单，可实现批量化功能操作：复制、删除、置顶、置底、锁定、聚焦、上移一层、下移一层等；这些功能都是支持批量化操作的，除此以外，画布还支持鼠标框选多个元素，实现批量移动功能、支持键盘快捷键(多选/上下左右微操/复制粘贴/撤回反撤回/保存)、画布下方提供缩略图功能：显示画布中各组件的相对位置且提供可调节比例尺等； 这个项目的功能是非常多的，还有例如：预览功能，历史记录功能、快照功能等；这个项目我是小组组长，组员加上我一共4个人，共同实现；我主要负责的就是其中的编辑区域中的所有功能；项目开发中，遇到的几个难点：最开始的实现思路，以及大量的坐标计算比如：1. 拖拽放置时的坐标计算，以及不同情况判断。2. 实现鼠标批量框选，要实现任意角度，都可以自由框选。判断元素是否被选中的逻辑；//3. 中间画布和编辑区域，在缩放过程中的大小逻辑；4. 编辑元素在页面缩放时，要保持等比例缩放，且要保持在画布中的相对位置是不变的。// 5.缩略图与编辑区域的比例问题，要求画布在缩放时，缩率图中的各个元素保持正确的比例。这个项目其实做下来，整体感觉还是很有意思的，后端占的比重不大，大多数功能都是依靠前端独立实现，让我有一种真的在敲代码的感觉，因为之前做的一些其他项目，说实话有点像重复机械性的动作，无非就是增删改查那点事，而这个项目运用到了大量的坐标计算以及功能实现的思考，让我有很大的收获。难点1：1.开始拖拽时，记录鼠标点击位置到模块卡片的坐标。 2. 拖拽放置时，要判断三种情况：1.放置位置在画板外， 在画板上， 在其余元素上。 根据不同的情况，都要计算得到，放置位置相对于整个编辑区域的坐标，然后要减去开始拖拽的坐标，得到正确位置。难点2的解决思路： 鼠标按下的时候：记录下，按下的位置坐标鼠标移动事件：1.记录下当前的鼠标位置，计算当前框选div的宽高，取绝对值。给盒子宽高赋值，判断鼠标移动的方向，盒子是向右下画还是其他位置画，根据不同的情况，计算盒子的左上角正确的x，y。 判断元素是否在框选框内，封装一个函数，排除盒子不在框内的几种情况，其余的情况都是属于框选到的，1.元素的y，大于盒子的y+h; 2. 元素的元素的x，大于盒子的x+w; 3 .盒子的y，大于元素的y+h; 4. 盒子的x，大于元素的x+w难点3:画布缩放和编辑区域不应该都是等比例放大的，编辑区域应该比画布大固定的宽高，保持画布始终居中，因为如果编辑区域也同样按比例放大，那缩率图也得更着等比例放大，才能保证其余比例正确，难点4：每一个元素对象都记录，当前元素所在位置距离画布的x,y占画布宽高的比例，缩放比例时，通过计算画布最新的宽高，在乘以对应的比例，得到元素在当前比例下的正确位置，然后给元素设置正确的x,y。难点5： 缩率图的宽高是固定的，编辑区域的实际宽高由画板的宽高决定，所以先通过计算属性得到编辑区域宽高，然后再计算属性得到最新的小地图和编辑区域的比例， 缩略图宽度 / 编辑区域宽度。 在通过计算属性，比例 * 画布宽高，得到缩略图中画布的宽高。