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">
            <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>

View Code

 　　本覺得作前端，應該比較容易吧，沒想到連續接的幾個頁面感受都不容易，唉！連幾個界面都搞得我如此費力，看來也不太適合作前端......但是如今卻已經在背離.net的路上越走越遠了...