认识交叉带

交叉带主要是帮助快递包裹能够快速分拣的一种机器，比较庞大；而合适的分拣配置对结果起到了关键的作用，分拣系统就是在格口上配置对应的包裹流向，这样当包裹在运转过程中就能落到这个格口内，操作人员再对包裹进行打包。因此如果能在一屏内看到概览图，将提高用户的配置与理解难度；

真实的交叉带图

一些数据支持

对于大型的网点，往往有个专职的人负责整体的交叉带分拣系统的调配，但大多数网点是没有专业的人进行处理，因此导致配置理解难度高，操作复杂，在生成可视化图片之前，需要先收集一些数据支持；

1、首先我找后端拿到所有现有分拣方案下所配置的格口数量，看看单个方案下的格口数量平均都是多少，然后判断每个格口的大小是否合适；

2、对于系统而言目前可以拿到的数据有：用户录入的格口数量、初始的包裹流量、流向等基础数据，这些数据将作为后续格口生成的依据；

格口基础数据

整个项目其实就做一件事，也就是将现实的格口数据按照一定的规律，在系统里面自动描绘出来，可视化出来，其实目前会有些网点专业人士会将格口数据录入到excel中，然后导出为图片，方便后续的查看；

但是格口配置会不断变化，因为他们无法手动去更新图片，因此需要一个系统来动态生成，并且在excel中看不到实时流量的变化。

他们绘制的格口分布图

为了保证生成的格口存在一定的规律，因为制定了几个前置条件；

1、拐弯的地方放不放格口数：让用户进行选择，拐弯处是否需要放置格口；如果选择需要放时，则制定下放多少个格口数的规则；

2、将拐弯地方去掉后看剩下多少直线段：然后用总格口数去除以直线段，得到每个直线段放多少个格口，这里需考虑除后不为整数的情况；

3、涉及到一些拐角的地方，不需要拐太大的弯，也就是简单示意一下即可；

供包台的格口宽度固定为260px，考虑到交叉带本身的特性，纵向高度为横向高度的1/3，此外在这里面将供件台的位置预留出来，预留的宽度为260px，整体先解决O型交叉带的格口排列问题，目前网点大部分都为O型交叉带；

基础排列规则

1、先将纵向高度设置为x，那么横向宽度为3x；整个交叉带可放置格口的宽度为8x；

2、假设格口数为300个，那么按照每个格口26px的宽度，所需长度为7800px；也就是说8x=7800px，那么x=975px；页面纵向自适应的高度为975px，横向自适应的宽度为2925px；

3、最终矩形的横向宽度为2925px + 260px(此边存在的供件区数量*260) + 2*136px = 3457px；最终矩形的纵向高度为975px + 2*136px = 1247px；

4、按照动态自适应的宽度去计算每个x能放多少个格口，那么纵向单边能放975/26=37.5个；横向单边能放112.5；

整体计算规则

1、针对已绑定流向的格口分为(按照总流量除以总格口数减去特殊格口，得出一个平均流量)：分别得到三种：流量大、流量中等、流量较少；用颜色深浅来表达这个强度；

2、除了展示供件区、供包台等，格口图形上需要表达以下几类数据：格口号、流向(段码)、流量、特殊标签格口等；

格口图例类型

按照上述的规则，最终生成的样式如下，下方展示的为只有一侧的交叉带图；

外侧格口示意图

一般真实的交叉带都会存在内外侧放置格口，因为这样可以节省空间位置，当包裹在运转过程中能落到格口数也就越多；

内外侧都存在格口

除了查看这些格口的流量分布外，也支持在页面直接调换格口流向，然后重新生成方案，相比纯表格会更加直观一点；

嵌入到页面中，为了不改变现有编辑格口配置的交互逻辑，因此设想的是在现有的页面上，增加一个tab，去展示可视化的格口分布与调整建议；原有的表格调整不变，后续对比两个页面的pv/uv，来验证方案的合理性；

在整个页面中，可结合元素进行动态展示，避免用户一次性查看过多的内容，此外，在旁边增加一些教程视频，帮助网点针对性解决问题；

嵌入至系统中的样式

其实这只是在短暂的时间中所探索的项目，还有很多细节没有想好，只是当时觉得格口的计算很有意思，便记录下来了，我很喜欢将一件无规律的事情梳理成可复用的逻辑，后续有时间再补充完善；