yesPmp

A. 本任务为正式任务单（TASK902_播放组件框架）。 

没有参与过TASK901任务的开发者不要投此标！

要求：

1. 使用VUE2 + GoldenLayout组件的基础上（TASK901已完成）进行组件订制。

2. 播放组件

组件名：visual-play

组件结构及命名：

- play-ctrl-left

- - play-ctrl-info (时间-区间值)

- - play-ctrl-btn（+添加、播放/暂停、隐藏/显示 3个按钮）

- play-ctrl-right

- - play-ctrl-phase 右-上，划分的区间

- - play-ctrl-track 右-下，时间导轨

- - play-ctrl-cursor 悬浮的游标块

3. 功能选择组件

组件名：visual-option-select

组件功能：提供一个下拉框【功能选择】组件，用户选择某个功能时，返回对应的组件给调用者初始化

4. 数据加载组件

组件名：visual-data-loader

组件用途：

统加载、缓存请求的参数数据

功能描述：

可显示部分为一个隐藏的loading图标，其他组件调用此方法/组件向后台请求数据的过程中显示动态的loading图标，参数加载完毕，图标隐藏，将数据key返回给调用者。

传参： 使用者调用本方法/组件时，传入2个参数：Name 和 Rate（Rate不传则默认为1）。

缓存策略： 拿到key=> Name+Rate之后，先查本地是否有缓存该key的数据，如果有就直接返回key给调用者，否则向后台发起真实请求，如果后台返回数据成功，则将数据缓存数据到字典(内存)/IndexedDB中，否则返回空给调用者，宣告请求数据失败。

获取值： 

a.提供一个获取某时间点下某参数值的方法，getValueByTimeIndex(timeIndex，name)，返回当前时间点某参数值给调用者。

b.提供一个获取某参数所有值的方法，getValue(name)，返回某参数所有值给调用者。

5. 双向绑定（所有与时间有关的组件均涉及）

time_index：当前时间

它变化时，使播放组件（visual-play）实例下的游标（play-ctrl-cursor）**到对应位置，并且更新play-ctrl-info (时间-区间值)。

当鼠标拖动游标（play-ctrl-cursor）时，获取对应的时间值，赋值给time_index。

lang：语言

它变化时，使当前visual-play、visual-option-select、visual-data-loader实例中所有固定显示的字符都使用对应的语言显示。

6. 加载时

整体加载时，从url中提取几个param（语言：lang=cn/fr/en，文件编号fileID=xxxx，参数名params=XXX,XXX，数据版本version=xxxx）并更新到localstorage中。

B. 另外还有5个任务基于本项目做更深层次的订制，价格可议。

所有任务，技术要求如下： 

1. 开发响应式组件，适应分辨率/组件外围框架尺寸的变化。

2. 【中、英、法，多语言支持】。将页面的字段写到配置文件中，页面带参数?lang=cn/fr/en切换语言时加载不同的语言配置。

3. 适合接单老手，具备主动沟通的习惯、做事有闭环思维，为最终项目交付负责。

4. 工时：完成本单不超4天，时间每缩短1天，额外奖励50元/天

5. 支付：本平台有担保支付功能就用本平台。

C. 其它

1. 本项目是为了选择长期合作伙伴（未来项目需要用的技术有：Vue2、Canvas）。

2. 成功合作一个测试单，自动进入项目组，后续所有任务都在本平台托管发布，新任务由项目组成员在本平台选单接任务。

1. 尽量100%还原参考稿，有困难跟我沟通。

2. 有数据需求的任务需要接入接口。若甲方接口提供不及时，延后对接，可选先验收

3.需提供所有源码。