【前端功能设计】智能柜模型配置和渲染方案

一、案例标题：智能柜模型配置和渲染方案

二、案例剖析

1.原定的任务和目标是什么？

根据初版原型需求，完成A智能柜模型的开发，能够保证与智能柜实体对应，并且智能柜终端上各个页面展示排版正常。

2. 发生了什么情况？

在完成1.0版本后，智能柜模型设计发生了很大的变化，从柜门单列排版变成了组合排列的模式，导致原有的模型代码不兼容新的模型设计；后端对数据结构的改动也是非常大的。

3.为什么会发生这种情况？

1. 开发团队以为模型的排列方式大致是不动的，最多改动下大中小柜门的位置，所以当时前端技术选型决定采用的FLEX布局。这种方式满足不了组合排列柜门的方式。

1. 后端数据也是存的死数据，如果需要改动柜门的相关信息，比如编号，锁控板号，就需要手动去数据库更改，维护相当麻烦而且还不灵活。

4.怎么解决的？

1. 重新设计智能柜模型的渲染方式。
   	模型排版采用grid布局，它最大的优点就是能够让模型根据屏幕大小响应式去展示，不用担心模型的内部结构排版错乱。这也能让我们开发在手机上调试，不用每次都在智能柜上跑测试，大大加大开发效率。

1. 设计图形配置智能柜的功能
     将原有的设计——下拉选择‘一组二副，一组一副..’的方式改为图形编辑的功能，用户可以通过实际场景去配置智能柜模型的组合，并且能够通过拖拽的方式实现主副柜的排序，然后动态生成智能柜数据比如：智能柜编号，锁控板号等信息。这样不仅减少了数据的维护成本，还能满足现实中多种场景的使用。
   原来的设计：

优化后：

1. 组件化模型模块

2. 

   
   将不同版型的智能柜模型封装成组件使用，这样做有几点好处：
   a、这样无论针对哪种模型的变动，都不会影响到其他模型的排版。
   b、方便后期的维护；这样的方式也减少了业务代码，提高了运行的效率
   c、对其他有相同需求的项目，可以直接复用组件，增大团队开发效率

三、关键词

智能柜，grid布局，解决方案

四、经验萃取成果

输出相关经验文档：《【技术】智能柜模型渲染——GRID布局应用》

1、在未来的相关项目中，对模型相关的布局方案选型，需要思考全面，采用能够兼容所有排列方式的布局方案。

2、gird布局方案也在实例当中得到应用，并且能够保证在智能柜项目未来推进的过程当时能够满足多种模型的展示。

3、智能柜模型自主配置方案，也能适配未来多种场景应用，比如：

a、门店需要增减副柜的情况

b、由于门店实际场景或者锁控板配置顺序错误，需要交换主副柜位置的情况

五、案例适用人员、场景

场景：智能柜项目的开发

	 人员：前端开发人员