已经好几个月没有更新博客了，因为最近太忙，忙得连写博客的时间都没有。上班赶项目开启996模式，下班要去练车考驾照，一边还在赶书稿，一边还接了私活。不由得感叹：年纪大了，再也经不起那么折腾..... 每个人的时间都很宝贵，谁也没有义务去分享知识，但正是由于有那么一群爱分享的程序员，我们工作中遇到许多问题时才能迎刃而解，所以我还是愿意做个乐于分享的人，不管分享的东西对他人是否有帮助，至少敢于亮剑。有些人经常看别人分享东西，去学习别人的东西，自己却从来不分享，这也无可厚非，可如果自己从不分享又对别人的东西一脸不屑和肆意贬低，这就感觉人品就有问题了。对你没用的东西你大可以选择不看嘛！只有经常写文章的人，才知道写一篇出来是多不的不易！不是每一个人都像我脸皮这么厚的。 　　刚转到前端组就接手一些一眼看上去让我一脸懵逼的工作，诸如画电表电路图界面，自定义报表界面（就是在浏览器端操作excel一样），还有下面的表计监测界面。我又开始怀疑个人IQ了，每一个界面我都想了半天才开始动手，是我不适合做前端还是界面真的很难做，我又开始怀疑自己，怀疑人生了。 　　我发现很有意思的一件事情，刚出来工作时，要做什么东西，往往是做了再想，后来是边做边想，现在做东西却是先想再做，有时候想问题花的时间比做花的时间更多。 需求和解决思路 　　需求：一个交换机中心下面有N 采集器，每一个采集器下面有N个电表，电表下面有N个支路。电表和采集器有两种状态：正常和中断，用不同的颜色区分。采集器的数目是根据所选择的项目动态变化的。每一个项目下都只有一个交换机中心。 　　其它需求：支路列表中，左侧实心椭圆用不同颜色表示支路的在线状态，右侧空心椭圆根据边框的颜色不同表示不同的在线率。界面文字超出部分用省略号表示，鼠标移动上去，显示完整文字。 　　思路：交换机只有一个，找个交换机图片，将其位置固定。那么实际变化的，是根据项目变换采集器数据，有几个采集器就有几根连线。采集器用一个图片表示，这个图片的宽度，我们可以将其指定。这样一来，我们只要动态计算线的位置就可以了，而线条直接可以用css样式来渲染。难点在交换机和采集器最左边的那条连线，因为它会根据采集器数据的编号，位置会有变化，交换机下面的连线按比例来画，1根，在50%的位置，两根最左边那根线在25%的位置，以此类推。 　　画线，可以利用dom结构的边框，也可以通过使用伪类content，当然也可以采用H5画图，个人感觉H5画图那种方式太过复杂，对计算要求太高，所以为了项目进度我果断抛弃了。 　　技术场景：vue组件化+element+HTML5 下面看一下几种界面场景： 第一种 JSON数据： View Code 第二种 JSON数据： View Code 第三种 JSON数据： View Code 还有其它场景我就不一一列举了。 界面完整代码： View Code 　　本以为做前端，应该比较容易吧，没想到连续接的几个页面感觉都不容易，唉！连几个界面都搞得我如此费力，看来也不太适合做前端......可是现在却已经在背离.net的路上越走越远了... 博客地址： http://www.cnblogs.com/jiekzou/ 博客版权： 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。 其它： .net-QQ群4：612347965 java-QQ群：805741535 H5-QQ群：773766020 我的拙作《ASP.NET MVC企业级实战》已经出版，希望大家多多支持！https://www.cnblogs.com/jiekzou/p/10244906.html