1. 产品管理 — 头寸管理
主体功能
多个tab页组成的头寸管理功能,其中包含头寸组合的列表查询,增删改查;冻结头寸,增删改查,导入导出;虚增头寸,增删改查;头寸核对为主体功能,主要分为查询功能,整个头寸核对的流程模拟,通过分步操作,进行一个文件核对流程;最后为负头寸提醒,为发送邮件提醒业务人员的功能。
功能特点
主体以增删改查、导入导出功能为主,其中的核对流程为功能亮点,把相对繁琐的文件核对封装成了一个简易流程,从而通过点击流程中的各个按钮分布操作,既方便了业务人员操作,又把整个流程可视化,使得整个流程清晰可见,简单操作性更强。
功能难点
相对的难点为头寸核对中的核对流程,由后端返回流程的动态数据,前端进行动态的循环渲染,每次点击某个按钮会携带该按钮的渲染数据给后端,后端再次返回整个流程的状态数据,前端进行刷新处理,前端需要对整个流程中的前后顺序进行控制,掌握弹窗的时机,以及流程中断等特殊情况的处理。
2. 机构客户服务 — 业绩分析
主体功能
多个页面组成的业绩分析模块,使用了echarts + elementUI做成了几个图表,包含柱状图,饼状图,玫瑰图等形式,并可以通过下拉框等形式筛选不同条件下图表的展示内容,且图表可以点击多次下钻,进一步细分数据进行展示。
功能特点
使得业绩数据可视化,能够更直观且清晰的看到分析内容,方便业务人员进行数据的归纳总结、业绩上报。
功能难点
难点在于数据的频繁转换,以及组件的通用性问题,数据需要转换字段缓存到前端来渲染echarts,图表的各个筛选条件都为公用,且表格也为公用,这就需要大量的判断条件来确保数据的一对一准确性,需要细致整理。
3. 机构客户服务 — 客户全景
主体功能
一个页面内集成了以echarts图表、表格形式、两种形式结合的模块,以销售机构为单位,从而展示出各个销售机构的客户的多个维度的情况。
功能特点
方便销售人员对各个销售机构的客户情况做横向对比,也可以从其他页面直接带着销售机构代码查询跳转,查询方便,比较起来直观,数据更加的细分化。
功能难点
正常难度,比较繁琐。
4. 机构客户多维报表
主体功能
涵盖了机构规模、交易、管理费三个多维报表,三个报表的主体内容类似,接口和展示列不太相同,可以根据用户所需的维度定制化展示表格,展示用户所需要的表格并导出;同时可在表格中动态显示出未合并或未分类的客户,且可以进行手动合并或分类。
功能特点
可以定制化搜索表格内容,使得表格更加灵活,更能够贴切业务人员的需求,在页面上也可以动态的去维护客户的分类以及合并信息,避免了在多个页面之间对比选择的过程,维护客户的过程变得更加直观、方便。
功能难点
多维报表的展示传参需要动态循环渲染,通过key、value的形式保存起来,使用Boolean值表示渲染与否,使用v-if控制展示列;动态维护客户信息,需要处理行内后端传递来的信息,且需要前端的无感维护即不即时发送请求更新,而是前端先行展示,请求不做loading,提升了用户体验。
4. 机构客户多维报表
主体功能
涵盖了机构规模、交易、管理费三个多维报表,三个报表的主体内容类似,接口和展示列不太相同,可以根据用户所需的维度定制化展示表格,展示用户所需要的表格并导出;同时可在表格中动态显示出未合并或未分类的客户,且可以进行手动合并或分类。
功能特点
可以定制化搜索表格内容,使得表格更加灵活,更能够贴切业务人员的需求,在页面上也可以动态的去维护客户的分类以及合并信息,避免了在多个页面之间对比选择的过程,维护客户的过程变得更加直观、方便。
功能难点
多维报表的展示传参需要动态循环渲染,通过key、value的形式保存起来,使用Boolean值表示渲染与否,使用v-if控制展示列;动态维护客户信息,需要处理行内后端传递来的信息,且需要前端的无感维护即不即时发送请求更新,而是前端先行展示,请求不做loading,提升了用户体验。
5. 机构销售报表
主体功能
涵盖了机构交易、管理费、规模、收益、个性化报表,主要的功能都是查看在各个限制条件下的机构客户信息表和导出,且表格最后一行会以悬浮高亮的形式展示在表格最底部总表的总计。。
功能特点
比较常规的表格查询功能,每个表的功能都不尽相同,方便业务人员数据查看和收集
功能难点
最后一行数据的处理比较有难度,使用el-table中的API选中最后一行,再对最后一行进行操作,合并单元格,且需要给最后一行加入高亮背景以及字体变化,需要用到样式穿透。
6. 渠道多维报表
主体功能
涵盖了渠道规模、收入、和交易多维报表,把渠道分为五级,以渠道为单位去统计总结规模、收入和交易报表信息,且可展示多个维度;渠道单位支持五级分类,可以手动精准定位,也可在查询过程中通过点击当前渠道等级对应的渠道名称下钻到下一渠道。
功能特点
把渠道进行细分化,可以精准的定位到某个渠道并查询出该渠道对应的报表信息,且渠道的上下级关系非常清晰明了,配合多维报表的形式,展示出详细渠道的多维信息。
功能难点
多维报表难点同上机构多维报表;渠道多维报表的麻烦点为渠道五级分类的封装,以及通过任意渠道自动查询其上下五级的渠道信息,且更新表格;五级分类为单独封装的组件,可以通过一级一级的传参来一层一层查询下一级渠道的渠道信息,若为查询任意渠道,则需要单独发送请求判断该渠道位置,通过接口返回内容来手动补全其上下级渠道的信息,可供用户自由选择。
6. 驾驶舱
主体功能
CRM板块的通用功能,内部放置了一定数量的echarts图表,还有业务人员提出需要的表格操作内容供业务人员组成自己的个性化操作工作台,业务人员可以根据自己的需求添加删除图表或表格,且可以通过自己手动拖拽来改变模块的相对位置,保存作为自己的个性化工作台。
功能特点
高度的灵活性,可以供业务人员自行选择和使用,即用即加,随意添加拖动图例,以达到自己想要的效果,且可以后续添加想要的模块进去,把每日需要过目的任务或者数据图例呈现在该页面上,一目了然,非常方便。
功能难点
运用了多个库内的API相互之间配合,和过渡动画效果的得当添加,使得整个页面整体动了起来,使用了packery库对应每个图例都建立了一个实例,实例身上会有该图例的位置宽高信息,便于计算;使用Draggabilly、draggable等各种库灵活配合,使得页面上图例能够自由拖拽改变位置,实现一整套图标的增删改查,拖拽改变位置等操作。