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 }
第二种
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; //采集器数量<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">if</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> (collectors </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">></span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">0</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">) { let pre </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> collectors </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">==</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">0</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">?</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">0</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> : </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">1</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">/</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> (</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">2</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">*</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> collectors) </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">*</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">248</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">; let leftMartgin </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">85</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">+</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> pre; let _lwidth </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">174</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">+</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> leftMartgin; </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">线左边宽度</span>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 的路上越走越远了...