已经好几个月没有更新博客了，因为最近太忙，忙得连写博客的时间都没有。上班赶项目开启996模式，下班要去连车考驾照，一边还在赶书稿，一边还接了私活。年纪大了，再也经不起那么折腾.....
刚转到前端组就接手一些一眼看上去让我一脸懵逼的工作，诸如画电表电路图界面，自定义报表界面（就是在浏览器端操作excel一样），还有下面的表计监测界面。我又开始怀疑个人IQ了，每一个界面我都想了半天才开始动手，是我不适合做前端还是界面真的很难做，我又开始怀疑自己，怀疑人生了。
需求一个交换机中心下面有N 采集器，每一个采集器下面有N个电表，电表下面有N个支路。电表和采集器有两种状态：正常和中断，用不同的颜色区分。采集器的数目是根据所选择的项目动态变化的。每一个项目下都只有一个交换机中心。
思路：交换机只有一个，找个交换机图片，将其位置固定。那么实际变化的，是根据项目变换采集器数据，有几个采集器就有几根连线。采集器用一个图片表示，这个图片的宽度，我们可以将其指定。这样一来，我们只要动态计算线的位置就可以了，而线条直接可以用css样式来渲染。难点在交换机和采集器最左边的那条连线，因为它会根据采集器数据的编号，位置会有变化，交换机下面的连线按比例来画，1根，在50%的位置，两根最左边那根线在25%的位置，以此类推。
画线，可以利用dom结构的边框，也可以通过使用伪类content，当然也可以采用H5画图，个人感觉H5画图那种方式太过复杂，对计算要求太高，所以为了项目进度我果断抛弃了。
第一种
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 }