已经好几个月没有更新博客了，因为最近太忙，忙得连写博客的时间都没有。上班赶项目开启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 }
第二种
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 }
还有其它场景我就不一一列举了。
界面完整代码：
<template> <div class="metermon_content"> <h2>表计读数</h2> <div class="metermon_info"> <div class="metermon_list_img"> <div class="info_list_warp"> <ul class="left"> <li>正常</li> <li>中断</li> </ul> <ul class="right"> <li>在线率10%以下</li> <li>在线率10%~20%</li> <li>在线率20%~80%</li> <li>在线率80%~90%</li> <li>在线率90%以上</li> </ul> </div> <div class="top_img" :style="{'left':containerStyle.topImgLeft,'margin-left':containerStyle.centerLeft}"> <img src="../../assets/meter2.png" alt=""> <!-- <div class="line" v-if="meterMonitor.length==1" :class="'line'+(index+1)" :style="{left:'50%'}" ></div> --> <div class="line" :class="'line'+(index+1)" :style="{left:((2*index+1)/(2*meterMonitor.length))*248+'px'}" v-for='(item , index) in meterMonitor' :key = 'index'></div> </div> <div class="metermon_warp"> <div style="position: absolute;" :style="{'left':containerStyle.left,'margin-left':containerStyle.marginLeft}"> <div class="top_line" style="margin-left:-124px" v-bind:style="{left:style.left,width:style.width}"></div> <div class="metermon_left" :class="'metermon_left'+index" :style="{left:item.left}" v-for='(item,index) in meterMonitor' :key='item.collectorId'> <div class="left_top"> <img src="../../assets/meter1.png" alt="" class="fl"> <div class="line" :class="'line_'+(index1+1)" :style="{left:((2*index1+1)/(2*item.coms.length))*100+'%'}" v-for="(ele,index1) in item.coms" :key='ele.comId'></div> </div> <div class="collection_msg fl"> <span class="cicle fl" v-bind:class="getClassByStatus(item.collectorStatus)"></span> <span class="home_percent home c90 fl">{{item.collectorOnlineRate}}%</span> <span class="collection_name fl" :title="item.collectorName">{{item.collectorName}}</span> </div> <div class="left_list_warp" :style="{width:item.coms.length*274+'px'}"> <dl :class="'list'+(index1+1)" class="left_list" v-for="(ele,index1) in item.coms" :key='ele.comId' > <dt>{{ele.comName}}<br/>电表</dt> <dd v-for="(item2) in ele.branches" :key='item2.branchId'> <div class="home_num home" v-bind:class="getClassByStatus(item2.status)" @click="getMeterDetails(timelist[0],1,item2)">{{item2.branchValue}}</div> <div class="home_percent home" v-bind:class="getClassByRate(item2.onlineRate)">{{item2.onlineRate}}%</div> <div class="home_info" :title="item2.branchName">{{item2.branchName}}</div> </dd> </dl> </div> </div> </div> </div> </div> </div> <el-dialog v-dialogDrag :visible.sync="dialogTableVisible" :title="curTitle" class="metermon_dialog"> <div class="dialog_info_list"> <ul class="left"> <li :class="{acdate:item.active}" @click = 'getMeterDetails(item,index+1)' v-for = "(item,index) in timelist" :key = "index">{{item.time}}</li> </ul> <div class="right"><span>优化建议：</span>{{meterstatu}}</div> </div> <el-table :data="meterDetail" stripe header-row-class-name='metermon_table_header' height="360"> <el-table-column prop="branchValue" label="表计读数(kWh)" > <template slot-scope="scope"> {{scope.row.branchValue.toFixed(2)}} </template> </el-table-column> <el-table-column prop="status" label="表计状态"> <template slot-scope="scope"> {{getStatusTxt(scope.row.status)}} <!-- <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" disable-transitions>{{getStatusTxt(scope.row.status)}}</el-tag>--> </template> </el-table-column> <el-table-column prop="reportTime" label="报告生成时间"></el-table-column> </el-table> <div class="dialog_info_close"> <el-button size="mini" round @click="dialogTableVisible=false">关闭</el-button> </div> </el-dialog> </div> </template> <script> /*待封装函数*/ /*前天/昨天/今天*/ function getTime(time){ let day1 = new Date(); let date =null; day1.setTime(day1.getTime()-time); date = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate(); return date } import ajax from '../../axios/axios' import {meterMonitor,hisrMonitor} from '../../axios/datalist' import {EquMonitoring} from "../../services/equMonitoringService.js"; import GlobalUtil from "../../utils/globalUtil"; import Storages from "../../utils/storages"; export default { //todo 顶部项目列表配置 inject: ["topProjectSelectSlot"], name: 'meterMonitoring', data(){ return{ timelist:[{time:'今天',active:true,date:getTime(0)},{time:'两天内',active:false,date:getTime(24*60*60*1000)},{time:'三天内',active:false,date:getTime(24*60*60*1000*2)}], meterDetail: [], meterMonitor:[], meterstatu:'', metersTag:'',//在线率标签 gridData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], dialogTableVisible: false, curBranchNumber:'', //当前选中分支ID // 顶部项目回调对象 topProjectSelectSlotCbFun: { nodeFunction: this.topFunction }, curProjectId:'',//当前项目ID curProjectNumber:'',//当前项目编号 curSelectItem:{} ,//当前选择支路对象 style:{width:'0px',left:'',marginLeft:0}, containerStyle:{ left:'',marginLeft:'', centerLeft:'', topImgLeft:'380px' }, meterLeft:0 ,//临时累加存值 brunchsNums:0, curTitle:'' //弹窗标题 } }, created(){ GlobalUtil.tj(this, 'F002') this.queryType = this.$route.query.pmid;//接收参数-项目ID //let uid = Storages.getLocalStorage("user_id") || 0; //Storages.setLocalStorage("CHECKED_PROJECT_"+ uid) }, mounted(){ this.ctrlCheckbox(false); }, methods:{ //采集器left metermonLeft(index,meterMonitor){ if(index==0){ this.meterLeft=0; }else{ this.meterLeft+=(meterMonitor[index-1].coms.length==0?1:meterMonitor[index-1].coms.length)*274+30; } console.log(meterMonitor.length) let pre=meterMonitor.length==0?0:1/(2*meterMonitor.length)*248; return 85+this.meterLeft+pre+'px'; }, getStatusTxt(status){ return status==1?'正常':'中断'; }, //控制项目是否显示复选框 ctrlCheckbox(show){ this.topProjectSelectSlot.show = true; // this.$store.commit('ctrlShowCheckbox',show); this.topProjectSelectSlot.closeCb = this.topProjectSelectSlotCbFun; }, topFunction(checkedProjectNodes) { this.curProjectId=checkedProjectNodes[0].id; this.curProjectNumber=checkedProjectNodes[0].number; console.log("this.curProjectId", this.curProjectId) //根据项目ID获取 this.getMeterMonitor(); }, /*获取表计数据*/ getMeterMonitor(){ let This = this; EquMonitoring.instance().getMeterParameter({pmId:This.curProjectId}). then(res => { if(res.code==200){ let arrays= res.data.array; if(arrays.length>0){ for (let i=0;i<arrays.length;i++){ arrays[i].left=This.metermonLeft(i, res.data.array); } } This.meterMonitor =arrays; }else{ This.$message.error(res.msg); } This.calculateWidth(); }); }, //宽度计算 calculateWidth(){ var collectors=this.meterMonitor.length; //采集器数量 if(collectors>0){ let brunchsNums=0; //总的电表数 for(var i=0;i<this.meterMonitor.length;i++){ brunchsNums+=(this.meterMonitor[i].coms.length==0?1:this.meterMonitor[i].coms.length); } this.brunchsNums=brunchsNums; console.log('brunchsNums:'+brunchsNums) var lastSums=this.meterMonitor[collectors-1].coms.length; lastSums=lastSums==0?1:lastSums; let _rwidth=1/2*276+276*(lastSums-1)+88+60; //线右边宽度 let pre=collectors==0?0:1/(2*collectors)*248; let _lwidth=380+pre; //线左边宽度 let _lwidthStr=_lwidth+'px'; //!important; var _totalWidth=210+276* brunchsNums+(collectors-1)*30; //线的总宽度 var _lineWidth=_totalWidth-210-_rwidth+'px'; //线的宽度 console.log(_lwidthStr) //顶部线的布局 this.style.width=collectors<=1?0:_lineWidth; this.style.left=_lwidthStr; //交换机位置布局 let _topImgLeft=380; this.containerStyle.topImgLeft=_topImgLeft+'px'; }else{ this.style.width='0px'; } }, //根据支路状态获取样式-颜色 getClassByStatus(status){ return status==1?"normal":"abnormal"; }, //根据在线率获取样式-颜色 getClassByRate(val){ let _class=""; if(val<10){ _class='c1'; }else if(val>=10&&val<20){ _class='c10'; } else if(val>=20&&val<80){ _class='c20'; }else if(val>=80&&val<90){ _class='c80'; }else{ _class='c90'; } return _class; }, /*打开历史详情页面获取历史数据*/ getMeterDetails(item,index,selectItem){ let This = this; if(selectItem){ This.curTitle=selectItem.branchName+'历史数据'; This.curSelectItem=selectItem; This.curBranchNumber=selectItem.branchNumber; } This.dialogTableVisible=true; This.timelist.forEach((ele,index)=>{ ele.active =false; }) item.active =true; let statusTxt=This.curSelectItem.status==1?'正常':'异常'; let tag=item.time||''; if(This.curSelectItem.onlineRate<20){ This.metersTag='建议更换'; }else if(This.curSelectItem.onlineRate>=20&&This.curSelectItem.onlineRate<=80){ This.metersTag='建议及时关注'; }else if(This.curSelectItem.onlineRate>80){ This.metersTag='处于正常状态' } This.meterstatu = '设备'+tag+'在线率'+This.curSelectItem.onlineRate+'%，'+This.metersTag;//处于'+statusTxt+'状态'; EquMonitoring.instance().getMeterDetails({type:1,dayType:index,pmNumber:This.curProjectNumber,branchNumber:This.curBranchNumber}). then(res => { if(res.code==200){ This.meterDetail = res.data.dataList; }else{ This.$message.error(res.msg); } }); } } } </script> <style scoped> .collection_msg{ left: 50%; position: absolute; margin-left: 50px; width: 210px; } /*弹框*/ .metermon_dialog .dialog_info_close{ padding-top: 25px; text-align: center; } .metermon_dialog .dialog_info_list{ width: 100%; display: box; display: -webkit-box; display: flex; margin-bottom: 22px; } .dialog_info_list .left{ width:185px; height:28px; line-height: 28px; background:#fff; border:1px solid #C3C9D5; border-radius:14px; display: box; display: -webkit-box; display: flex; overflow: hidden; } .dialog_info_list .left li{ -webkit-box-flex: 1; flex:1; text-align: center; cursor: pointer; font-size: 14px; } .dialog_info_list .left .acdate{ color:#fff; background: #188FBF; } .dialog_info_list .left li:nth-of-type(1), .dialog_info_list .left li:nth-of-type(2){ border-right:1px solid #C3C9D5; } .dialog_info_list .right{ -webkit-box-flex: 1; flex:1; text-align: right; color:#3a3a3a; } .metermon_content { background: #fff; height: 100%; } .metermon_content h2{ height: 36px; line-height: 36px; background:rgba(245,249,249,1); border:1px solid #E5EEF3; font-size:16px; color:rgba(34,116,164,1); padding-left: 27px; } .metermon_info{ margin: 0px 0px 0px 0px; min-height:680px; max-height: 800px; height: 800px; position: relative; overflow-y: auto; } .metermon_info .info_list_warp{ font-size:14px; color:rgba(58,58,58,1); display: box; display: -webkit-box; display: flex; } .metermon_info .left { margin-right: 20px; margin-left: 25px; } .metermon_info .left li, .metermon_info .right li, .collection_msg .cicle{ position: relative; padding-left: 20px; height: 28px; line-height: 28px; } .metermon_info .right li{ padding-left: 34px; } .metermon_info .left li:after,.collection_msg .cicle:after{ content: ''; display: block; width:14px; height:14px; background:rgba(75,196,132,1); border-radius: 50%; position: absolute; left:0; top:50%; margin-top: -7px; } .collection_msg .cicle.abnormal:after{ background:#F57272; } .collection_msg .cicle.normal:after{ background:rgba(75,196,132,1); } .metermon_info .right li:after{ content: ''; display: block; width:23px; height:9px; border:2px solid #F71C1C; border-radius: 7px; position: absolute; left:0; top:50%; margin-top: -7px; } .metermon_info .left li:last-child:after{ background:#F57272; } .metermon_info .right li:nth-of-type(2):after{ border-color: #DE7E0D; } .metermon_info .right li:nth-of-type(3):after{ border-color: #5E47E4; } .metermon_info .right li:nth-of-type(4):after{ border-color: #1780D9; } .metermon_info .right li:nth-of-type(5):after{ border-color: #3FBC7A; } /*关系列表图*/ .metermon_info .metermon_list_img{ width: 100%; position: absolute; top:27px; height: 100%; } .metermon_list_img .top_img{ width: 248px; position: absolute; left:50%; transform: translateX(-50%); top: 0px; } .metermon_list_img .top_img .line{ width: 2px; height: 80px; background: #2274A4; position: absolute; top: 39px; } .metermon_list_img .metermon_warp{ width: 100%; position: absolute; top: 118px; } .top_line{ display: block; width: 100%; height: 2px; background: #2274A4; position: absolute; top: 0px; } /*左侧模块*/ .metermon_left{ position: absolute; top:60px; width: 274px; } .metermon_left .left_top{ position: absolute; left: 50%; transform: translate(-50%); } .metermon_left .left_top span{ position: absolute; left:50%; top:-16px; transform: translateX(-50%); color:#DE5959; font-size: 14px; width: 100%; } .metermon_left .left_top:after{ content:''; display: block; width: 2px; height: 62px; background: #2274A4; position: absolute; right: 12px; top: -60px; } .metermon_left .left_top .line{ width: 2px; background: #3FBC7A; position: absolute; top: 29px; height: 30px; } /*列表样式*/ .metermon_left .left_list_warp{ display: -webkit-box; display: -webkit-flex; margin-top: 58px; } .metermon_left .left_list{ width: 274px; font-size: 12px; border-left:2px solid #3FBC7A; padding-top: 30px; border-top:2px solid #3FBC7A; } .metermon_left .left_list dt{ color:#2274A4; font-size: 14px; padding-left: 12px; margin-bottom: 6px; } .metermon_left .left_list dd{ display: box; display: -webkit-box; display: flex; margin-bottom: 12px; } .metermon_left .left_list .home,.collection_msg .home{ width: 90px; height: 24px; line-height: 24px; text-align: center; border-radius: 12px; } .metermon_left .left_list .home_num{ background: #3FBC7A; border:1px solid #3FBC7A; color: #fff; cursor: pointer; } .metermon_left .left_list .home_percent,.collection_msg .home_percent{ border:1px solid #3FBC7A; color: #3FBC7A; background: #fff; } .metermon_left .left_list .home_info{ height: 24px; line-height: 24px; color:#3A3A3A; font-size: 14px; margin-left: 10px; width: 90px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .metermon_right .left_top:after{ left: 30px } .metermon_right .left_top:before{ width: 567px; left: -535px; } </style> <style> .metermon_content .el-table th > .cell { width: 100%; } .metermon_dialog .el-dialog__header{ padding:0; height:40px; line-height:40px; background:rgba(24,129,191,1); padding-left:29px; position: relative; } .metermon_dialog .el-dialog__header .el-dialog__title{ color:#fff; font-size: 16px; } .metermon_dialog .el-dialog__header .el-dialog__headerbtn{ top:50%; transform: translateY(-50%); } .metermon_dialog .el-dialog__headerbtn .el-dialog__close{ font-size: 12px; color:#fff; cursor: pointer; padding:2px; border:1px solid #fff; border-radius:50%; } .metermon_dialog .metermon_table_header th{ background:rgba(241,241,241,1); font-size: 14px; color:#3a3a3a; } .metermon_dialog .el-table--striped .el-table__body tr.el-table__row--striped td{ background: #F7FBFC; } .metermon_dialog .el-button--mini{ width:90px; font-size: 14px; } /*边框颜色*/ .metermon_left .left_list .home_percent.c1{ border: 1px solid #F71C1C; color: #F71C1C; } .metermon_left .left_list .home_percent.c10{ border: 1px solid #DE7E0D; color: #DE7E0D; } .metermon_left .left_list .home_percent.c20{ border: 1px solid #5E47E4; color: #5E47E4; } .metermon_left .left_list .home_percent.c80{ border: 1px solid #1780D9; color: #1780D9; } .metermon_left .left_list .home_percent.c90,.collection_msg .home_percent.c90{ border: 1px solid #3FBC7A; color: #3FBC7A; } .metermon_left .left_list .home_num.abnormal{ background: #F57272; border: 1px solid #F57272; } .metermon_left .left_list .home_num.normal{ background: rgba(75,196,132,1); border: 1px solid rgba(75,196,132,1); } .collection_msg .collection_name{ height: 26px; line-height: 26px; margin-left: 4px; width: 85px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style>
本以为做前端，应该比较容易吧，没想到连续接的几个页面感觉都不容易，唉！连几个界面都搞得我如此费力，看来也不太适合做前端......