最近公司做了一个个性化程度很高的需求，总结一下如下：页面分为两个区域。上面要审核的区域是要审核的区域，下面是冲突区域。点击Review时，上层数据全部通过（请求中包含当前数据放置的通道数），下层数据全部拒绝。每天都需要在通道中安排未量化的应用程序。一个频道代表一天24小时。通道数是可配置的。不同的应用程序在同一个通道中不会在时间上重叠。进入页面时自动排序，当天审核通过的请求优先。上层待审核通道依次填满后，剩余应用落入下层冲突区，冲突区内的每个应用独占一个通道。所有应用程序都可以手动拖动（只能上下拖动）来切换频道和区域。当在被拖拽的位置检测到数据时，将被替换，原应用程序将落入冲突区。数据结构合适的数据结构在做需求的时候很重要，应该放在首位。下面是我在搭建数据结构时的想法：数据结构：每个格子应该有一个对象来记录自己的时间属性，是否被占用，可以是一个二维数组，一维代表通道数.进入页面获取数据后，需要在js中做一个计算（划重点），根据给出的通道数和应用信息进行计算，区分等待区的应用数组和等待区的应用数组冲突地区。在这个计算过程中，还需要对通道中被占用的cell进行标记，以方便后续的人工排序。要实现思路，做更复杂的需求，首先要理清思路。该功能有两个主要部分：自动排序和手动排序。自动排序要点：根据获取的通道数，每个通道初始化48个带有时间信息和占用状态的小格子。遍历每个应用，从第一个通道开始，比较每个半小时格是否在应用需要的时间段内可用。当都可用时，将其压入顶部数组（也必须记录可以丢弃的通道的索引）。装不下时，推入最下面的阵列。全部计算完成后，根据两个数组分别渲染两组refs，下层通道数根据下层数组长度动态变化。第二步，根据这两个数组动态渲染位于两个区域的应用div。手动排序实现要点：拖动鼠标时div的位置跟随——每次请求生成的div需要绑定一个ref（div的宽度根据请求时间段的长度决定），并且只改变y轴位置，x轴不变（onmousemove事件，mousedown事件，mouseup事件）位置吸附函数，哪个通道更近（不用考虑哪个半小时更接近Grid，所求timeperiodcannotchange)divreplacementfunction,divreplacementfunction,divreplacementfunction,driverreplacementrequestatthedropposition(withthecontactonthewidth),channel上会显示原来的请求，取消是否可以替换的判断，而pendingreview区域会显示已通过的一个request，这个状态request不能再被替换，也就是鼠标向上的时候，两个区域的动态渲染都放不下，该区域的通道数待审核是由后台决定的，冲突公司的行数是无限往下的，但是一个公司将要拖到一个完整的行时需要一个临时数组。被拖拽的div代表的应用不属于上述任何一个数组。在它被丢弃之前不会被判断。推入哪个拖动点？注意：边界的判断和计算，当前通道，上面的总通道，下面的总通道都是已知的。可以计算出来。样式转换不能用数据判断直接替换css类方法，因为切换时位置信息设置会失效。css信息应该直接在js中改。拖拽结束判断：只拖到最下方，回到原位再拖拽到最上方，判断是哪个频道，判断频道是否有应用（应用的信息和状态要记录下来）单元格上），且已审核，不能替换，返回原位√是，初始排序后同级（1~多个）应用，替换。否（第一次拖动所有通道的位置没有空位，这种情况只有在第二次及以上之后才会出现，即原来的自动排序顺序被打乱），将应用移动到上层数组，并标注通道数拖动吸收时如何判断替换操作是哪个通道：通过高度计算判断通道上是否有应用：找到通道，根据通道索引找到cell，判断是否有如果cell中有状态信息可以丢弃：遍历拖拽application中本通道需要占用的cell信息，根据cell这一段记录的信息（是否被占用，状态被占用的应用），同级别应用的替换思路：在运行数据控制页显示——不知道ref有没有异常（ref无响应）遍历当前频道：查找并记录当前应用所需时间段内的所有冲突应用，并处理冲突应用：清空冲突应用的pipeindex，删除top数组中的item，将item添加到底部阵列。绘制新增底部并申请更换时，也需要更改单元格上的记录；实现效果：项目地址，可以查看详细代码和注释。并预览动作
