vue实现表计监测界面
已经好几个月没有更新博客了，由于最近太忙，忙得连写博客的时间都没有。上班赶项目开启996模式，下班要去练车考驾照，一边还在赶书稿，一边还接了私活。不禁得感叹：年纪大了，再也经不起那么折腾.....css
每一个人的时间都很宝贵，谁也没有义务去分享知识，但正是因为有那么一群爱分享的程序员，咱们工做中遇到许多问题时才能迎刃而解，因此我仍是愿意作个乐于分享的人，无论分享的东西对他人是否有帮助，至少勇于亮剑。有些人常常看别人分享东西，去学习别人的东西，本身却历来不分享，这也无可厚非，可若是本身从不分享又对别人的东西一脸不屑和肆意贬低，这就感受人品就有问题了。对你没用的东西你大能够选择不看嘛！只有常常写文章的人，才知道写一篇出来是多不的不易！不是每个人都像我脸皮这么厚的。html
刚转到前端组就接手一些一眼看上去让我一脸懵逼的工做，诸如画电表电路图界面，自定义报表界面（就是在浏览器端操做excel同样），还有下面的表计监测界面。我又开始怀疑我的IQ了，每个界面我都想了半天才开始动手，是我不适合作前端仍是界面真的很难作，我又开始怀疑本身，怀疑人生了。前端
我发现颇有意思的一件事情，刚出来工做时，要作什么东西，每每是作了再想，后来是边作边想，如今作东西倒是先想再作，有时候想问题花的时间比作花的时间更多。vue
需求和解决思路
需求：一个交换机中心下面有N 采集器，每个采集器下面有N个电表，电表下面有N个支路。电表和采集器有两种状态：正常和中断，用不一样的颜色区分。采集器的数目是根据所选择的项目动态变化的。每个项目下都只有一个交换机中心。node
其它需求：支路列表中，左侧实心椭圆用不一样颜色表示支路的在线状态，右侧空心椭圆根据边框的颜色不一样表示不一样的在线率。界面文字超出部分用省略号表示，鼠标移动上去，显示完整文字。程序员
思路：交换机只有一个，找个交换机图片，将其位置固定。那么实际变化的，是根据项目变换采集器数据，有几个采集器就有几根连线。采集器用一个图片表示，这个图片的宽度，咱们能够将其指定。这样一来，咱们只要动态计算线的位置就能够了，而线条直接能够用css样式来渲染。难点在交换机和采集器最左边的那条连线，由于它会根据采集器数据的编号，位置会有变化，交换机下面的连线按比例来画，1根，在50%的位置，两根最左边那根线在25%的位置，以此类推。
画线，能够利用dom结构的边框，也能够经过使用伪类content，固然也能够采用H5画图，我的感受H5画图那种方式太过复杂，对计算要求过高，因此为了项目进度我果断抛弃了。web
技术场景：vue组件化+element+HTML5浏览器
下面看一下几种界面场景：dom
第一种ide
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="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"> <div v-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> <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;"> <div class="top_line" v-bind:style="{left:style.left,width:style.width}"></div> <div class="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"> <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.meters" :key="item2.meterId"> <div class="home_num home" v-bind:class="getClassByStatus(item2.status)" @click="getMeterDetails(timelist[0],4,item2)" >{{item2.meterValue}}</div> <div class="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-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="dateClass" v-if="showTime"> 日期： <el-date-picker v-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" stripe header-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;//接收参数-项目ID this.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__body tr.el-table__row--striped td { 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>
本觉得作前端，应该比较容易吧，没想到连续接的几个页面感受都不容易，唉！连几个界面都搞得我如此费力，看来也不太适合作前端......但是如今却已经在背离.net的路上越走越远了...
原文出处：https://www.cnblogs.com/jiekzou/p/10244906.html
相关文章
- 1. vue实现表计监测界面
- 2. 用Vue实现一个登陆界面
- 3. Vue实现简单聊天界面
- 4. 界面的设计及实现
- 5. 简易版WireShark实现-界面设计
- 6. MySQL监控：MySQL监控指标、MySQL监控界面实现、Python监控MySQL
- 7. Vue实现todoList（任务计划列表）
- 8. vue界面测试框架storybook
- 9. NC列表界面能监听列表界面鼠标所选数据变化
- 10. vue 实现 leaflet的测绘，测距，测面
- 更多相关文章...
- • 现实生活中的 XML - XML 教程
- • Hibernate实现增删改查 - Hibernate教程
- • ☆基于Java Instrument的Agent实现
- • Spring Cloud 微服务实战(三) - 服务注册与发现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 论文大盘点-光流篇
- 2. Photoshop教程_ps中怎么载入图案？PS图案如何导入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 导入源码包
- 6. python学习 day2——基础学习
- 7. 3D将是页游市场新赛道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 图片(pgn显示、jpg不显示)解决方案
欢迎关注本站公众号,获取更多信息
