vue实现表计监测界面

　　已经好几个月没有更新博客了，因为最近太忙，忙得连写博客的时间都没有。上班赶项目开启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
}

View Code

第二种

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
}

View Code

第三种

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
}

View Code

还有其它场景我就不一一列举了。

界面完整代码：

<template><div class="p-container"><div class="sub-nav single"><el-tabs v-model="activeName"><el-tab-pane label="示意图" name="default"><div class="u-layout-container metermon_content"><divv-if="meterMonitor!=null"class="metermon_info"ref="meter":style="{height:containHeight}"><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}"><img src="../../../assets/images/meter/meter2.png" alt><divclass="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;"><div class="top_line" v-bind:style="{left:style.left,width:style.width}"></div><divclass="metermon_left":class="'metermon_left'+index":style="{left:item.left+'px'}"v-for="(item,index) in meterMonitor":key="item.collectorId"><div class="left_top"><img src="../../../assets/images/meter/meter1.png" alt class="fl"><divclass="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"><spanclass="cicle fl"v-bind:class="getClassByStatus(item.collectorStatus)"></span><span class="home_percent home c90 fl">{{item.collectorOnlineRate}}%</span><spanclass="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.meters" :key="item2.meterId"><divclass="home_num home"v-bind:class="getClassByStatus(item2.status)"@click="getMeterDetails(timelist[0],4,item2)">{{item2.meterValue}}</div><divclass="home_percent home"v-bind:class="getClassByRate(item2.onlineRate)">{{item2.onlineRate}}%</div><div class="home_info" :title="item2.meterName">{{item2.meterName}}</div></dd></dl></div></div></div></div></div></div><empty-data v-else msg="暂无监测数据" height="480px"></empty-data><el-dialogv-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="dateClass" v-if="showTime">日期：<el-date-pickerv-model="queryHistoryDate"value-format="yyyy-MM-dd"@change="timeChange"type="date"placeholder="请选择时间"size="mini"></el-date-picker><div class="fontClass"><span style="color: red;">*</span><span>只显示3天内的数据</span></div></div><div class="right"><span>优化建议：</span>{{meterstatu}}</div></div><el-table:data="meterDetail"stripeheader-row-class-name="metermon_table_header"height="360"><el-table-column prop="branchValue" label="表计读数(kWh)"><template slot-scope="scope">{{scope.row.meterValue|zeroDefault}}</template></el-table-column><el-table-column prop="status" label="表计状态"><template slot-scope="scope">{{StatusArray[scope.row.status]}}</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></el-tab-pane></el-tabs></div></div>
</template><script>
import datetimeUtils from "../../../utils/datetime-utils";
import { StatusArrays, getClassByRateFun } from './index.js';
import { getMeterMonitorData, getMeterMonitorHistoryData } from '../../../services/safety.js';
import EmptyData from '../../../components/form/EmptyData';export default {name: 'meterMonitoring',components: {EmptyData},data () {return {StatusArray: StatusArrays,activeName: 'default',containHeight: '780px',timelist: [{ time: '今天', active: true, date: datetimeUtils.getPreDate(0) }, { time: '两天内', active: false, date: datetimeUtils.getPreDate(1) }, { time: '三天内', active: false, date: datetimeUtils.getPreDate(2) }, { time: '自定义', active: false, date: datetimeUtils.getPreDate(3) }],meterDetail: [],meterMonitor: [],meterstatu: '',gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],dialogTableVisible: false,curMeterNumber: '', //当前选中分支编号// 顶部项目回调对象
      topProjectSelectSlotCbFun: {nodeFunction: this.topFunction},curSelectItem: {},//当前选择支路对象
      style: { width: '0px', left: '', marginLeft: 0 },containerStyle: {topImgLeft: '380px'},meterLeft: 0,//临时累加存值
      curTitle: '', //弹窗标题
      queryHistoryDate: datetimeUtils.getPreDate(3),//查询历史时间,默认前3天
      showTime: false,//显示查询历史数据时间
    }},created () {this.queryType = this.$route.query.pmid;//接收参数-项目IDthis.getMeterMonitor();},mounted () {var that = this;that.$nextTick(() => {let tableHeight = window.innerHeight - 200;that.containHeight = tableHeight + 'px';console.log('tableHeight:' + window.innerHeight + ':' + tableHeight)})},watch: {shopNumber (val) {console.log('shopNumber', val)this.getMeterMonitor();}},computed: {shopNumber () {return this.$store.getters.shopNumber;},//根据在线率返回建议信息
    metersTag: function () {var _metersTag = '';if (this.curSelectItem.onlineRate < 20) {_metersTag = '建议更换';} else if (this.curSelectItem.onlineRate >= 20 && this.curSelectItem.onlineRate <= 80) {_metersTag = '建议及时关注';} else if (this.curSelectItem.onlineRate > 80) {_metersTag = '处于正常状态'}return _metersTag;}},methods: {//时间改变
    timeChange (time) {if (!time) {this.$message.error("时间不能为空！")return;}this.meterstatu = '设备三天内在线率' + this.curSelectItem.onlineRate + '%，' + this.metersTag;this.getMeterDetailsFun(4);},//采集器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) * 276 + 26;}console.log(meterMonitor.length)// 85是采集器图片的左侧宽度 ，248是交换机图片的宽度
      let pre = ((2 * index + 1) / (2 * meterMonitor.length)) * 248;return 85 + this.meterLeft + pre;},/*获取表计数据*/getMeterMonitor () {this.common.updateLoadingStatus(true);getMeterMonitorData(this.shopNumber).then(res => {console.log('res', res)if (res.code == 200) {if (res.data.length > 0) {for (let i = 0; i < res.data.length; i++) {res.data[i].left = this.metermonLeft(i, res.data);}this.meterMonitor = res.data;} else {this.meterMonitor = null;}} else {this.$message.error(res.msg);}this.common.updateLoadingStatus(false);this.calculateWidth();}).catch(() => {this.common.updateLoadingStatus(false);});},//宽度计算
    calculateWidth () {var collectors = this.meterMonitor.length; //采集器数量if (collectors > 0) {let pre = collectors == 0 ? 0 : 1 / (2 * collectors) * 248;let leftMartgin = 85 + pre;let _lwidth = 174 + leftMartgin;     //线左边宽度
        let _lwidthStr = _lwidth - 1 + 'px'; //!important;var startLeft = this.meterMonitor[0].left;var endLeft = this.meterMonitor[this.meterMonitor.length - 1].left;var _lineWidth = endLeft - startLeft + 'px'; //线的宽度：最后一个的left-最前面一个的left//顶部线的布局this.style.width = collectors <= 1 ? 0 : _lineWidth;this.style.left = _lwidthStr;//交换机位置布局
        let _topImgLeft = 380;this.containerStyle.topImgLeft = _topImgLeft + 'px';} else {this.style.width = '0px';}},//根据在线率获取样式-颜色
    getClassByRate (val) {return getClassByRateFun(val);},//根据支路状态获取样式-颜色
    getClassByStatus (status) {return status == 1 ? "normal" : "abnormal";},getMeterDetailsFun (index) {getMeterMonitorHistoryData({ dayType: index, shopNumber: this.shopNumber, meterNumber: this.curMeterNumber, queryTime: this.queryHistoryDate }).then(res => {if (res.code == 200) {this.meterDetail = res.data.dataList;} else {this.$message.error(res.msg);}});},/*打开历史详情页面获取历史数据*/getMeterDetails (item, index, selectItem) {console.log("item:", item, "index:", index, "selectItem:", selectItem)this.queryHistoryDate = datetimeUtils.getPreDate(3);this.showTime = index == 4 ? true : false; //显示/隐藏 查询历史时间if (selectItem) {this.curTitle = selectItem.meterName + '历史数据';this.curSelectItem = selectItem;this.curMeterNumber = selectItem.meterNumber;}this.dialogTableVisible = true;this.timelist.forEach((ele, index) => {ele.active = false;})item.active = true;let tag = (index != 4 ? item.time : '三天内') || '';this.meterstatu = '设备' + tag + '在线率' + this.curSelectItem.onlineRate + '%，' + this.metersTag;this.getMeterDetailsFun(index);}}
}
</script>
<style lang="scss" scoped>
.dateClass {font-size: 14px;height: 28px;line-height: 28px;margin-left: 30px;.fontClass {display: inline-block;font-size: 10px;color: gray;}.el-date-editor.el-input {width: 150px;border-radius: 14px;font-size: 14px;}
}.collection_msg {left: 50%;position: absolute;margin-left: 50px;width: 210px;
}
/*弹框*/
.metermon_dialog {}
.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),
.dialog_info_list .left li:nth-of-type(3) {border-right: 1px solid #c3c9d5;
}.dialog_info_list .right {-webkit-box-flex: 1;flex: 1;text-align: right;color: #3a3a3a;
}
.dialog_info_list .right span {/*color:#188FBF*/
}
.metermon_content {background: #fff;height: 100%;
}
.metermon_info {margin: 0px 0px 0px 0px;min-height: 500px;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,.right {margin-top: 15px;}
}
.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: relative;// margin-top: 27px;height: 100%;
}
.metermon_list_img .top_img {width: 248px;/* margin: 0 auto; */position: absolute;left: 50%;transform: translateX(-50%);top: 15px;
}
.metermon_list_img .top_img .line {/* content:'';display: block; */width: 2px;height: 80px;background: #2274a4;position: absolute;/* left: 97px; */top: 24px;
}
.metermon_list_img .metermon_warp {width: 100%;position: absolute;top: 118px;/*border-top:2px solid #2274A4;*/
}
.top_line {display: block;width: 100%;height: 2px;background: #2274a4;position: absolute;top: 0px;
}
/*左侧模块*/
.metermon_left {position: absolute;/* left: 50%;transform: translateX(-50%); */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;/* position: absolute; */
}
.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__bodytr.el-table__row--stripedtd {background: #f7fbfc;/* border:none; */
}
.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>

View Code

　　本以为做前端，应该比较容易吧，没想到连续接的几个页面感觉都不容易，唉！连几个界面都搞得我如此费力，看来也不太适合做前端......可是现在却已经在背离.net的路上越走越远了...

转载于:https://www.cnblogs.com/jiekzou/p/10244906.html

vue实现表计监测界面相关推荐

[vue] 说说你对vue的表单修饰符.lazy的理解
[vue] 说说你对vue的表单修饰符.lazy的理解 input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input ...
Vue之表单数据收集
简介此文主要介绍使用Vue进行表单数据的收集,不同的表单元素会有一定小小的技巧. v-model有三个常用的修饰符: number:输入字符串转化为有效的数字,常用语文本输入. lazy:失去焦点后 ...
【vue系列-04】vue的表单数据收集，基本指令和自定义指令
vue的表单数据收集.指令一,vue的核心属性 1,收集表单数据 1.1,收集数据案例 1.1.1,type类型的输入框 1.1.2,radio类型的单选框 1.1.3,checkbox类型的复选框 ...
vue框架搭建前端登录界面
使用vue框架搭建前端登录界面,用v-bind引入类,v-model实现数据绑定,v-on实现事件处理机制的处理. <!DOCTYPE html> <html lang=" ...
vue+antd搭建后台管理界面模版（PC端），适配中文、英文、日文 mock数据，开箱即用
vue+antd搭建后台管理界面模版(PC端) 完整代码下载地址:vue+antd搭建后台管理界面模版(PC端) 技术栈 vue2 + vuex + vue-router + webpack + ES ...
电气仪表、电表检测、表计检测图像数据集（含VOC标签，3000多张图像，网盘下载链接）
数据集图像示例: 下载地址:电气仪表.电表检测.表计检测图像数据集(含VOC标签,3000多张图像)
现场审计实施系统_生态环境部通报表扬！我省利用分表计电系统实施非现场执法成效显著...
为统筹做好疫情防控和经济社会发展生态环保工作,今年3月,生态环境部指导各地建立和实施生态环境监督执法正面清单制度,要求各地科学合理配置执法资源,实现对守法企业无事不扰,对违法企业严惩重罚. 截至7月底 ...
工业表计图像读数解决方案流程
工业表计读数本案例基于PaddleX实现对传统机械式指针表计的检测与自动读数功能,开放表计数据和预训练模型,并提供在windows系统的服务器端以及linux系统部署指南. 读数流程表计读数共分为 ...
vue监控表单输入事件，正则验证手机号，邮箱
vue监控表单输入事件,正则验证手机号,邮箱 <div class="input-name"><inputclass="input-type" ...

vue实现表计监测界面

需求和解决思路

vue实现表计监测界面相关推荐

最新文章

热门文章