vue实现表计监测界面
程序员文章站
2022-07-01 20:46:11
已经好几个月没有更新博客了，因为最近太忙，忙得连写博客的时间都没有。上班赶项目开启996模式，下班要去练车考驾照，一边还在赶书稿，一边还接了私活。不由得感叹：年纪大了，再也经不起那么折腾..... 每个人的时间都很宝贵，谁也没有义务去分享知识，但正是由于有那么一群爱分享的程序员，我们工作中遇到许多问 ......
已经好几个月没有更新博客了，因为最近太忙，忙得连写博客的时间都没有。上班赶项目开启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="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>
本以为做前端，应该比较容易吧，没想到连续接的几个页面感觉都不容易，唉！连几个界面都搞得我如此费力，看来也不太适合做前端......可是现在却已经在背离.net的路上越走越远了...