《任务T日历视图方案》样式设计方案及关键应用技术介绍

        前文介绍了基于《任务T日历视图方案》的设计实现方法，介绍了实现任务T日历视图的结构设计主要包括五个关键点，即相对天数元素、相对时间点元素、任务环节/工作阶段元素、工作任务的管理和工作任务的查询。本文继续介绍任务T日历视图的样式设计方案及介绍一个应用较多的实用技术。

---

一、样式设计方案

        任务T日历视图样式设计方案主要内容如下。

1、工作任务项样式

        在任务T日历视图中，为了形象的展示工作任务的分布情况，工作任务被设计成矩形图形的方式进行展示，矩形工作任务图形中展示工作任务名称、计划执行时间、执行人等信息。

2、工作任务图形背景色

        在任务T日历视图中，为了形象的展示工作任务的分布情况，工作任务被设计成矩形图形的方式进行展示，矩形工作任务图形中展示工作任务名称、计划执行时间、执行人等信息。

3、网格收缩样式

        网格处于收缩状态时，网格中按照工作任务的执行时间顺序，最多展示两个任务，其他任务不展示。可通过网格右上角三角区域的数字，查看网格内包含的工作任务数量。网格收缩状态时，其中的工作任务图形也应进行相应的收缩，工作任务图形的长度高度固定，图形内只展示工作任务的名称，对于名称无法展示完全的情况，省略超出图形外的文字。网内的两个工作任务，按计划执行时间顺序上下摆放。

4、网格展开样式

        网格放大后，其中的所有工作任务按照计划执行时间顺序，从上而下，依次排列。工作任务图形也应适度放大，展示内容包括工作任务名称、相对天数、相对时间点、任务执行人。工作任务图形的长度固定，高度不固定，工作任务名称等信息的文字要展示完全，可换行展示。

---

二、实用技术介绍

        项目采用前后端分离模式开发，后台服务使用spring cloud技术框架，前端使用Vue进行开发。由于任务T日历视图在项目的多个功能模块中需要使用，为提高开发效率和代码复用性，使用Vue的组件技术，将任务T日历视图设计成一个Vue组件的方式。

        Vue提供Vue.Draggable可实现拖拽功能，但它主要通过数据直接驱动视图，对于复杂的应用场景实现比较困难。推荐使用jQuery UI的draggable、droppable 来实现任务T日历视图的拖拽效果。

1、jQueryUI-draggable介绍

        draggable表示一个可拖动的DOM元素，对一个DOM元素使用draggable()方法后，该DOM元素就表标记为可拖拽元素，在页面上可通过鼠标选中该元素进行拖拽操作。