以下记录的是今年4月1日-4月15日笔者在公司进行web前端工作的每日工作内容，其中隐去了项目的具体名称、人名、公司名等。
2019.4.1
今天完成的任务：基本完成训练场页面（Training）的静态显示
遇到的问题：今天遇到的主要问题还是和之前的一样也就是使用echarts图标库出现的问题，在从网上查到一些echarts中的类似的实例之后运用到本地项目中，需要修改一些样式，一开始不知道如何修改
解决的措施：在网上搜集到了一些资料，包括echarts的API文档，在查看了文档之后有了很多就知道怎么修改了 https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-6vfb2eo3.html
明天的规划：开始进行Training页面前后台的数据对接和一些交互功能的完善
2019.4.2
今天完成的任务：提交了Training页面代码，开始研究Training中的div拖动功能
遇到的问题：今天遇到的问题主要是成哥提到的关于页面布局的问题。我在写之前的几个页面的时候在页面的子组件的外层div中设置flex布局时的宽度设置有问题，也就是都设置成了flex自适应的比例大小，这的确会导致比较严重的问题，比如页面在不断被缩放之后变形的厉害。还是需要指定一个div的具体宽度的
解决的措施：在看了bootstrap文档的一些响应式的解决方案之后发现bootstrap采用了另外一种解决方法，首选bootstrap是通过 设置默认的站屏宽度100%和栅格化系统+媒体查询实现的，这是笔者最后需要好好借鉴的思路
明天的规划：基本实现Training页面的拖拽效果
2019.4.3
今天完成的任务：初步实现了Training页面的拖拽功能
遇到的问题：今天遇到了一个比较奇怪的问题，在参考了vue-element-admin如何实现拖拽效果和在网上查询了相关资料后发现vuedraggable库 https://sortablejs.github.io/Vue.Draggable/#/simple 是解决拖拽问题的最好方法。在写完了拖拽代码之后实际测试功能时却发现控制台老是一个错误，如图：一开始还以为是vuedraggable的运用出了问题，仔细检查代码后没有发现问题
解决的措施：最终是通过删除了这一行代码之后解决了这个问题：如图 仔细考虑了一下发现应该是数组越界造成了，由于从一个组件当中拖拽数据到了另外一个组件，使得本组件中的数组长度减少，此时再访问最大数组下标，数组越界，所以报not define的错误
明天的规划：实现Training页面的拖拽效果
2019.4.4
今天完成的任务：基本实现了Training页面的拖拽功能
遇到的问题：今天在实现Training页面的拖拽功能是主要遇到了这样一个问题：有至少3个团队，每个团队成员都有一名队长和成员若干，而笔者实现拖拽功能是基于vuedraggable,默认情况下两个可拖拽区域之前是可以无限增加或者将元素全部拖走的，但是队长名额是有限制的（目前是只有1个），在这种情况下如何控制可拖拽的元素个数呢
解决的措施：在网上查询了vuedraggable的相关文档之后渐渐明晰了问题 先是两个可拖拽元素的区域之间元素可以互相拖拽，其中一个区域最多只能接受一个元素的加入。最开始笔者的想法是借助vuedraggable中的disabled属性，默认为false是整个区域内的元素是可拖拽的，监听区域中的数组，当数组元素大于1时则设置disabled为true，此时该区域便不能接受新的元素加入的，但是这样伴随而来的问题是这个区域既不能接受元素的加入，本身也失去了拖拽元素到另一个元素的功能，这样就不符合其可删除元素的要求了
之后笔者综合考虑了这样一种方案：结合vuedraggable中的@start和@end函数以及disabled，当在另一个区域开始拖拽元素时start通过vuex（因为是兄弟组件的通信）发送信号给本区域说明开始拖拽元素，本组件在接受到信号后再通过vuex将本区域数组长度发给另一个区域，若该长度大于等于1则此时将disabled设为true并再次通过vuex传回本区域，此时本区域便不能再接收元素了，在元素拖拽完毕之后会触发@end方法，在end方法中将disable再设为false传给本组件，这样就实现了在拖拽外来元素进入本组件的时候若已经有一个元素则无法加入，但是本组件的元素 可以被拖走的效果
明天的规划：彻底实现Training页面的拖拽效果
2019.4.8
今天完成的任务：今天基本上解决了限制某个区域能接收的被拖拽来的元素个数
遇到的问题：由于vuedragable插件虽然很完善的实现了拖拽div的功能，但是却没有提供限制最大接收个数的API,在训练场页面中由于一个团队中队长只能有一个，成员的个数也是固定的可以被添加和减少的，那么就必须要限制一个可接收拖拽来元素区域的最大接收元素个数。由于各个区域都必须接收来自右边成员列表的元素拖拽，因而4大可拖拽区域其实是同一个group，在这种情况下它们彼此之间都可以互相拖拽元素，在解决限制个数时笔者的思路是：在相同组件下实现startDrag和endDrag方法，在拖动元素开始时，获得当前组件3大区域各个位置已经存在的可拖动元素的个数，那些已经达到最大可拖动容量的区域的disabled属性将在拖动的时候被设为true失去拖动属性，在拖动结束后再设回false。而跨组件之间的做法类似有同组件，只是汇报各个区域已经存在的可拖动元素的个数是通过vuex传递的
之后就遇到另一个问题：来自合并代码之后，由于获取的界面用户列表来自于vuex传递进来的计算属性的数据，而拖动了元素之后意味着用户列表的数据会发生改变，但是计算属性默认只有get方法，即使加上set方法也不能反应用户列表数据的变化，要反应用户列表的变化必须从根源上改变数据，否则是无法实现从右边拖走一个用户数据，用户数据就不存在了的效果
解决的措施：尚在思考中
明天的规划：实现对动态数据进行拖拽
2019.4.9
今天完成的任务：今天完成了从带有分页的列表中拖拽元素到主力阵容中
遇到的问题：笔者在之前的页面上基础上基本解决了拖拽交易员的问题，包括限制各区域所能接收的最大交易员个数，但是却忽略了更新之后的动态页面的情况下的解决办法与之前静态页面的解决思路是不太一样的，具体来说，之前静态页面下有三个团队，每个团队都分为队长席位和队员席位，且这三个团队都是放在同一个组件当中的，因而数据交互起来很容易，这样也很好控制其彼此之间的互相拖拽元素，但是在动态页面中团队是由v-for实现的，在这种情况下其实每个团队之间都是兄弟组件关系而且团队的个数不一定是三个，可能更少或是更多，在这种情况下必须改变团队之间可接受拖拽元素最大个数判断的思路
解决的措施：昨天思考的动态数据的拖拽问题已经被解决了，由于获取到的动态数据是通过vuex传入的依赖于计算属性之中，因此直接修改其内容并不合适（或者可以使用computed的setter），因此笔者的思路是创建一个数组于本组件的data函数之中，在通过监听页数的变化动态的将当前的数据截取10条（即一个分页的大小）存放于该数组之中，此时拖拽组件中的元素会使得本数组发生改变，诸如元素顺序发生变化，元素个数发生增减等等，监听这个变化，获得这个数组的newVal和oldVal，将vuex中获取到的动态数据利用splice函数删去oldVal部分并且在删去的部分加入newVal，这样便改变了获取到的动态数组，再利用更新后的动态数组更新当前分页中显示的数组。
另一个问题便是今天遇到的控制不同组件之间可接收的最大可拖拽元素个数。在之前其实笔者已经解决了这个问题，但是是在同一组件内，非父子组件之间的处理尚在解决中
明天的规划：实现非父子组件之间限制其最大可接收拖拽元素个数
2019.4.10
今天完成的任务：在拉取了Training页面的最新代码之后合并了自己写的拖拽的代码，基本实现了拖拽功能
遇到的问题：今天在合并代码的时候发现训练场页面在主力阵容的队员中新加了edit和delete按钮用于替换队员和删除队员，实际上这两个功能已经通过拖拽来实现好了，但是为了用户的体验这两个按钮还是必要的，但是就必须解决一个问题：点击“x”符号或者edit按钮将主力阵容中的元素删除后，由于该元素是从交易员列表剪切而来，如果删除则应该将被删除的数据添加回交易员列表，笔者在实际操作这个过程的时候出现了一些棘手的bug
解决的措施：之后根据成哥的意见，将交易员列表拖拽元素到主力阵容中由剪切操作改为复制操作，那么之前的问题就不存在了，代码逻辑相对也简单了不少
明天的规划： 实现Training页面拖拽的复制效果
2019.4.11
今天完成的任务：实现了Training页面的拖拽复制效果
遇到的问题：今天在实现Training页面的复制拖拽效果时遇到的一个新的问题：由于被拖走的元素实际上是被复制了一份进入到了左边的主力阵容中，所以当主力阵容的元素要拖拽回来的时候会产生重复的元素，此事应该禁止被复制的元素拖动回到交易员列表。另一个问题是同一个交易员可以加入到不同的团队中去，但是却不能重复的拖动到同一个团队中去，因而在拖动元素进入主力阵容的时候应该进行防止重复的判断，当被拖动的元素已经存在于某个团队时，此时该团队便无法再次接受该元素，为了更好的用户体验此时还应该加上提示信息，告诉用户某个团队已经含有这个交易员了。但是这样做又会产生另外一个不太好解决的问题，一旦某个交易员已经被拖动到了某个团队中，以后每次再拖动这个交易员都会产生提示信息，除非没有团队含有该交易员，这可能会造成用户的使用疲劳
解决的措施：还有另外一个问题是点击edit按钮对团队中已经被含有的交易员进行编辑，如修改为另一个交易员后会导致右边交易员列表中的交易员也被替换为修改后的交易员信息，这会导致被修改的交易员数据消失，修改后的交易员数据重复，尚在解决该问题
明天的规划：研究一下自动回复机器人，学习React
2019.4.12
今天完成的任务：开始研究如何改变野牛期货客户端的主题背景颜色，开始入门React的一些基础知识
遇到的问题：今天遇到了一个主要的问题是来自之前写Training页面的时候，在编写vuex传递数据的时候写法还不够规范的问题，之前笔者在写vuex的store文件的时候没有用到actions属性，也没有在types.js文件中去登记vuex的操作过程函数，这样写对之后的协作开发和调试都十分不友好，是不太合适的，因此应该修改写法，如下图，这样的写法更加的简洁，也更加友好
解决的措施：通过参考之前野牛期货客户端的vuex代码解决了
明天的规划：开始准备修改野牛期货客户端的主题
2019.4.15
今天完成的任务：完成了一部分野牛期货客户端的主题切换效果
遇到的问题：今天主要遇到了一个由于对vuex使用还不够熟练而产生的问题，就是在引入了vuex获取vuex中的数据时发现没有能够正常的获取到数据。另一个问题是css中的style标签由于父子组件都使用了scoped标记而样式无法共用的问题。
解决的措施：vuex的问题在查看了之前写的对的代码之后发现其实是缺少了commit语句将改变后的状态提交出来所导致的，而scoped标记的问题实际上个人觉得如果要实现父子组件之间样式的影响的话去掉其中一个组件商店额scoped标记就可以了，去掉子组件的scoped标记更好一些，因为父组件上如果去掉scoped标记的话更有可能影响到其他的组件的样式。
明天的规划：继续完善野牛期货客户端的白天主题模式
