已经好几个月没有更新博客了，因为最近太忙，忙得连写博客的时间都没有。上班赶项目开启996模式，下班要去练车考驾照，一边还在赶书稿，一边还接了私活。不由得感叹：年纪大了，再也经不起那么折腾.....
每个人的时间都很宝贵，谁也没有义务去分享知识，但正是由于有那么一群爱分享的程序员，我们工作中遇到许多问题时才能迎刃而解，所以我还是愿意做个乐于分享的人，不管分享的东西对他人是否有帮助，至少敢于亮剑。有些人经常看别人分享东西，去学习别人的东西，自己却从来不分享，这也无可厚非，可如果自己从不分享又对别人的东西一脸不屑和肆意贬低，这就感觉人品就有问题了。对你没用的东西你大可以选择不看嘛！只有经常写文章的人，才知道写一篇出来是多不的不易！不是每一个人都像我脸皮这么厚的。
刚转到前端组就接手一些一眼看上去让我一脸懵逼的工作，诸如画电表电路图界面，自定义报表界面（就是在浏览器端操作excel一样），还有下面的表计监测界面。我又开始怀疑个人IQ了，每一个界面我都想了半天才开始动手，是我不适合做前端还是界面真的很难做，我又开始怀疑自己，怀疑人生了。
我发现很有意思的一件事情，刚出来工作时，要做什么东西，往往是做了再想，后来是边做边想，现在做东西却是先想再做，有时候想问题花的时间比做花的时间更多。
需求和解决思路
需求：一个交换机中心下面有N 采集器，每一个采集器下面有N个电表，电表下面有N个支路。电表和采集器有两种状态：正常和中断，用不同的颜色区分。采集器的数目是根据所选择的项目动态变化的。每一个项目下都只有一个交换机中心。
其它需求：支路列表中，左侧实心椭圆用不同颜色表示支路的在线状态，右侧空心椭圆根据边框的颜色不同表示不同的在线率。界面文字超出部分用省略号表示，鼠标移动上去，显示完整文字。
思路：交换机只有一个，找个交换机图片，将其位置固定。那么实际变化的，是根据项目变换采集器数据，有几个采集器就有几根连线。采集器用一个图片表示，这个图片的宽度，我们可以将其指定。这样一来，我们只要动态计算线的位置就可以了，而线条直接可以用css样式来渲染。难点在交换机和采集器最左边的那条连线，因为它会根据采集器数据的编号，位置会有变化，交换机下面的连线按比例来画，1根，在50%的位置，两根最左边那根线在25%的位置，以此类推。
画线，可以利用dom结构的边框，也可以通过使用伪类content，当然也可以采用H5画图，个人感觉H5画图那种方式太过复杂，对计算要求太高，所以为了项目进度我果断抛弃了。技术场景：vue组件化+element+HTML5
下面看一下几种界面场景：
第一种
JSON数据：
{ "data": { "array": [{ "collectorStatus": 1, "collectorOnlineRate": "98.97", "collectorId": 1130, "coms": [{ "comId": 1, "comName": "com1", "branches": [{ "branchId": 412, "branchOrder": 1, "branchNumber": "000000000186", "branchValue": 0.0, "branchName": "电梯", "onlineRate": "0", "status": 0 }] }, { "comId": 2, "comName": "com2", "branches": [{ "branchId": 413, "branchOrder": 1, "branchNumber": "000000000197", "branchValue": 0.0, "branchName": "1-3层照明插座", "onlineRate": "0", "status": 0 }] }, { "comId": 3, "comName": "com3", "branches": [{ "branchId": 410, "branchOrder": 1, "branchNumber": "000800092259", "branchValue": 0.0, "branchName": "厨房用电", "onlineRate": "0", "status": 0 }] }, { "comId": 4, "comName": "com4", "branches": [{ "branchId": 411, "branchOrder": 1, "branchNumber": "000800092268", "branchValue": 0.0, "branchName": "照明干线", "onlineRate": "0", "status": 0 }, { "branchId": 415, "branchOrder": 2, "branchNumber": "000000210154", "branchValue": 0.0, "branchName": "1#变压器", "onlineRate": "0", "status": 0 }] }], "collectorName": "采集器01" }] }, "code": 200, "msg": "", "errors": null} 第二种
JSON数据：
{ "data": { "array": [{ "collectorStatus": 1, "collectorOnlineRate": "100", "collectorId": 1128, "coms": [{ "comId": 1, "comName": "com1", "branches": [{ "branchId": 428, "branchOrder": 1, "branchNumber": "000007090506", "branchValue": 1381.63, "branchName": "空调主机", "onlineRate": "27.69", "status": 0 }, { "branchId": 432, "branchOrder": 2, "branchNumber": "000007090510", "branchValue": 927.61, "branchName": "生活水泵", "onlineRate": "27.69", "status": 0 }, { "branchId": 436, "branchOrder": 3, "branchNumber": "000000750068", "branchValue": 0.0, "branchName": "计算机房电源", "onlineRate": "0", "status": 0 }, { "branchId": 444, "branchOrder": 4, "branchNumber": "000000750620", "branchValue": 0.0, "branchName": "主楼2-5层热水器", "onlineRate": "0", "status": 0 }, { "branchId": 448, "branchOrder": 5, "branchNumber": "000000750624", "branchValue": 0.0, "branchName": "冷却泵", "onlineRate": "0", "status": 0 }, { "branchId": 452, "branchOrder": 6, "branchNumber": "000007091258", "branchValue": 0.0, "branchName": "2#冷水机", "onlineRate": "0", "status": 0 }] }, { "comId": 2, "comName": "com2", "branches": [{ "branchId": 429, "branchOrder": 1, "branchNumber": "000007090507", "branchValue": 458.71, "branchName": "客梯2", "onlineRate": "27.69", "status": 0 }, { "branchId": 437, "branchOrder": 2, "branchNumber": "000000750070", "branchValue": 0.0, "branchName": "厨房用电(1)", "onlineRate": "0", "status": 0 }, { "branchId": 445, "branchOrder": 3, "branchNumber": "000000750621", "branchValue": 0.0, "branchName": "附楼1-5层热水器", "onlineRate": "0", "status": 0 }, { "branchId": 449, "branchOrder": 4, "branchNumber": "000006950201", "branchValue": 0.0, "branchName": "生活水泵", "onlineRate": "0", "status": 0 }] }, { "comId": 3, "comName": "com3", "branches": [{ "branchId": 430, "branchOrder": 1, "branchNumber": "000007090508", "branchValue": 1314.01, "branchName": "冷冻水泵", "onlineRate": "27.69", "status": 0 }, { "branchId": 433, "branchOrder": 2, "branchNumber": "000000000237", "branchValue": 0.0, "branchName": "1#变压器计量柜", "onlineRate": "0", "status": 0 }, { "branchId": 438, "branchOrder": 3, "branchNumber": "000000750072", "branchValue": 0.0, "branchName": "附楼2-5层照明插座", "onlineRate": "0", "status": 0 }, { "branchId": 446, "branchOrder": 4, "branchNumber": "000000750622", "branchValue": 0.0, "branchName": "冷冻泵", "onlineRate": "0", "status": 0 }, { "branchId": 450, "branchOrder": 5, "branchNumber": "000007091256", "branchValue": 0.0, "branchName": "冷却塔", "onlineRate": "0", "status": 0 }, { "branchId": 51346, "branchOrder": 6, "branchNumber": "12", "branchValue": 0.0, "branchName": "12", "onlineRate": "0", "status": 0 }] }, { "comId": 4, "comName": "com4", "branches": [{ "branchId": 427, "branchOrder": 1, "branchNumber": "000007090505", "branchValue": 1304.22, "branchName": "冷却水泵", "onlineRate": "27.69", "status": 0 }, { "branchId": 431, "branchOrder": 2, "branchNumber": "000007090509", "branchValue": 723.75, "branchName": "消防电梯", "onlineRate": "27.69", "status": 0 }, { "branchId": 443, "branchOrder": 3, "branchNumber": "000000750619", "branchValue": 0.0, "branchName": "主楼1-5层照明插座", "onlineRate": "0", "status": 0 }, { "branchId": 447, "branchOrder": 4, "branchNumber": "000000750623", "branchValue": 0.0, "branchName": "大厦射灯", "onlineRate": "0", "status": 0 }, { "branchId": 451, "branchOrder": 5, "branchNumber": "000007091257", "branchValue": 0.0, "branchName": "1#冷水机", "onlineRate": "0", "status": 0 }, { "branchId": 611, "branchOrder": 6, "branchNumber": "000000000014", "branchValue": 24824.63, "branchName": "1#变压器", "onlineRate": "27.69", "status": 0 }] }], "collectorName": "采集器01" }, { "collectorStatus": 0, "collectorOnlineRate": "0", "collectorId": 2177, "coms": [{ "comId": 1, "comName": "COM1236", "branches": [{ "branchId": 439, "branchOrder": 1, "branchNumber": "000000750121", "branchValue": 0.0, "branchName": "2F信息中心", "onlineRate": "0", "status": 0 }, { "branchId": 442, "branchOrder": 2, "branchNumber": "000000750310", "branchValue": 0.0, "branchName": "中央空调", "onlineRate": "0", "status": 0 }] }], "collectorName": "采集器1000000" }] }, "code": 200, "msg": "", "errors": null} 第三种
JSON数据：
{ "data": { "array": [{ "collectorStatus": 1, "collectorOnlineRate": "100", "collectorId": 1129, "coms": [{ "comId": 1, "comName": "com1", "branches": [{ "branchId": 348, "branchOrder": 1, "branchNumber": "000000000054", "branchValue": 148.78, "branchName": "海鲜池、超市冷柜（主）", "onlineRate": "98.44", "status": 0 }, { "branchId": 356, "branchOrder": 2, "branchNumber": "000000000135", "branchValue": 294.57, "branchName": "地下室应急照明（副）", "onlineRate": "95.31", "status": 0 }, { "branchId": 616, "branchOrder": 3, "branchNumber": "000000000005", "branchValue": 49149.49, "branchName": "1#总柜", "onlineRate": "98.44", "status": 0 }, { "branchId": 618, "branchOrder": 4, "branchNumber": "000000000015", "branchValue": 34714.92, "branchName": "肯德基", "onlineRate": "98.44", "status": 0 }, { "branchId": 628, "branchOrder": 5, "branchNumber": "000000000136", "branchValue": 18.13, "branchName": "银行（主）", "onlineRate": "98.44", "status": 0 }, { "branchId": 648, "branchOrder": 6, "branchNumber": "000000000076", "branchValue": 17933.02, "branchName": "海鲜池、超市冷柜（副）", "onlineRate": "98.44", "status": 0 }, { "branchId": 652, "branchOrder": 7, "branchNumber": "000021870641", "branchValue": 28.4, "branchName": "消防电梯1", "onlineRate": "98.44", "status": 0 }, { "branchId": 660, "branchOrder": 8, "branchNumber": "000021870740", "branchValue": 2718.35, "branchName": "风柜、风机盘管", "onlineRate": "98.44", "status": 0 }, { "branchId": 672, "branchOrder": 9, "branchNumber": "000021870721", "branchValue": 1880.3, "branchName": "2#冷冻泵", "onlineRate": "98.44", "status": 0 }, { "branchId": 52323, "branchOrder": 10, "branchNumber": "000001", "branchValue": 0.0, "branchName": "3号支路", "onlineRate": "0", "status": 0 }] }, { "comId": 2, "comName": "com2", "branches": [{ "branchId": 629, "branchOrder": 1, "branchNumber": "000000000055", "branchValue": 12009.76, "branchName": "西竖井1~2层普通负荷", "onlineRate": "98.44", "status": 0 }, { "branchId": 661, "branchOrder": 2, "branchNumber": "000021870741", "branchValue": 1677.36, "branchName": "2#冷却塔", "onlineRate": "98.44", "status": 0 }, { "branchId": 673, "branchOrder": 3, "branchNumber": "000021870723", "branchValue": 1979.76, "branchName": "2#冷却泵", "onlineRate": "98.44", "status": 0 }] }, { "comId": 3, "comName": "com3", "branches": [{ "branchId": 350, "branchOrder": 1, "branchNumber": "000000000073", "branchValue": 7520.13, "branchName": "电脑机房、办公室", "onlineRate": "98.44", "status": 0 }, { "branchId": 626, "branchOrder": 2, "branchNumber": "000000000075", "branchValue": 5048.18, "branchName": "易天手机", "onlineRate": "98.44", "status": 0 }, { "branchId": 630, "branchOrder": 3, "branchNumber": "000000000133", "branchValue": 12135.82, "branchName": "西竖井3~6层普通负荷", "onlineRate": "98.44", "status": 0 }, { "branchId": 642, "branchOrder": 4, "branchNumber": "000000000056", "branchValue": 24504.42, "branchName": "真功夫（主）", "onlineRate": "98.44", "status": 0 }, { "branchId": 658, "branchOrder": 5, "branchNumber": "000021870737", "branchValue": 2289.83, "branchName": "生活水泵", "onlineRate": "98.44", "status": 0 }, { "branchId": 662, "branchOrder": 6, "branchNumber": "000021870742", "branchValue": 2182.22, "branchName": "观光电梯", "onlineRate": "98.44", "status": 0 }, { "branchId": 674, "branchOrder": 7, "branchNumber": "000021870725", "branchValue": 6005.46, "branchName": "3#冷冻泵", "onlineRate": "98.44", "status": 0 }] }, { "comId": 4, "comName": "com4", "branches": [{ "branchId": 347, "branchOrder": 1, "branchNumber": "000000000053", "branchValue": 11896.4, "branchName": "东竖井应急照明（主）", "onlineRate": "98.44", "status": 0 }, { "branchId": 615, "branchOrder": 2, "branchNumber": "000000000002", "branchValue": 23459.22, "branchName": "2#总柜", "onlineRate": "98.44", "status": 0 }, { "branchId": 623, "branchOrder": 3, "branchNumber": "000000000016", "branchValue": 5059.89, "branchName": "地下室应急负荷（主）", "onlineRate": "98.44", "status": 0 }, { "branchId": 631, "branchOrder": 4, "branchNumber": "000000000134", "branchValue": 18036.61, "branchName": "东竖井普通负荷", "onlineRate": "98.44", "status": 0 }, { "branchId": 651, "branchOrder": 5, "branchNumber": "000021870638", "branchValue": 0.3, "branchName": "消防电梯（副）", "onlineRate": "98.44", "status": 0 }, { "branchId": 655, "branchOrder": 6, "branchNumber": "000021870634", "branchValue": 4567.51, "branchName": "空调主机二", "onlineRate": "98.44", "status": 0 }, { "branchId": 659, "branchOrder": 7, "branchNumber": "000021870738", "branchValue": 1431.58, "branchName": "1#冷却塔", "onlineRate": "98.44", "status": 0 }, { "branchId": 663, "branchOrder": 8, "branchNumber": "000021870744", "branchValue": 1933.21, "branchName": "1-12#扶梯", "onlineRate": "98.44", "status": 0 }, { "branchId": 675, "branchOrder": 9, "branchNumber": "000021870743", "branchValue": 5540.06, "branchName": "4#冷却泵", "onlineRate": "98.44", "status": 0 }] }], "collectorName": "采集器01" }, { "collectorStatus": 0, "collectorOnlineRate": "0", "collectorId": 2170, "coms": [{ "comId": 2, "comName": "COM2", "branches": [{ "branchId": 664, "branchOrder": 1, "branchNumber": "000021870756", "branchValue": -999.0, "branchName": "消防电梯", "onlineRate": "0", "status": 0 }] }], "collectorName": "采集器2" }, { "collectorStatus": 0, "collectorOnlineRate": "0", "collectorId": 2171, "coms": [{ "comId": 1, "comName": "COM", "branches": [{ "branchId": 351, "branchOrder": 1, "branchNumber": "000000000074", "branchValue": 288.04, "branchName": "东竖井应急照明（副）", "onlineRate": "98.44", "status": 0 }] }], "collectorName": "4#" }, { "collectorStatus": 0, "collectorOnlineRate": "0", "collectorId": 2176, "coms": [], "collectorName": "12121" }] }, "code": 200, "msg": "", "errors": null} 还有其它场景我就不一一列举了。
界面完整代码：
- 正常
- 中断
- 在线率10%以下
- 在线率10%~20%
- 在线率20%~80%
- 在线率80%~90%
- 在线率90%以上
{ {item.collectorOnlineRate}}% { {item.collectorName}}
- { {ele.comName}} 电表
- { {item.time}}
日期：{ {scope.row.meterValue|zeroDefault}} { {StatusArray[scope.row.status]}} 关闭
本以为做前端，应该比较容易吧，没想到连续接的几个页面感觉都不容易，唉！连几个界面都搞得我如此费力，看来也不太适合做前端......可是现在却已经在背离.net的路上越走越远了...