vue實現表計監測界面

時間 2020-04-18

標籤 vue 實現監測界面简体版

原文原文鏈接

　　已經好幾個月沒有更新博客了，由於最近太忙，忙得連寫博客的時間都沒有。上班趕項目開啓996模式，下班要去練車考駕照，一邊還在趕書稿，一邊還接了私活。不禁得感嘆：年紀大了，再也經不起那麼折騰.....css

每一個人的時間都很寶貴，誰也沒有義務去分享知識，但正是因爲有那麼一羣愛分享的程序員，咱們工做中遇到許多問題時才能迎刃而解，因此我仍是願意作個樂於分享的人，無論分享的東西對他人是否有幫助，至少勇於亮劍。有些人常常看別人分享東西，去學習別人的東西，本身卻歷來不分享，這也無可厚非，可若是本身從不分享又對別人的東西一臉不屑和肆意貶低，這就感受人品就有問題了。對你沒用的東西你大能夠選擇不看嘛！只有常常寫文章的人，才知道寫一篇出來是多不的不易！不是每個人都像我臉皮這麼厚的。html

　　剛轉到前端組就接手一些一眼看上去讓我一臉懵逼的工做，諸如畫電錶電路圖界面，自定義報表界面（就是在瀏覽器端操做excel同樣），還有下面的表計監測界面。我又開始懷疑我的IQ了，每個界面我都想了半天才開始動手，是我不適合作前端仍是界面真的很難作，我又開始懷疑本身，懷疑人生了。前端

　　我發現頗有意思的一件事情，剛出來工做時，要作什麼東西，每每是作了再想，後來是邊作邊想，如今作東西倒是先想再作，有時候想問題花的時間比作花的時間更多。vue

需求和解決思路

　　需求：一個交換機中心下面有N 採集器，每個採集器下面有N個電錶，電錶下面有N個支路。電錶和採集器有兩種狀態：正常和中斷，用不一樣的顏色區分。採集器的數目是根據所選擇的項目動態變化的。每個項目下都只有一個交換機中心。node

　　其它需求：支路列表中，左側實心橢圓用不一樣顏色表示支路的在線狀態，右側空心橢圓根據邊框的顏色不一樣表示不一樣的在線率。界面文字超出部分用省略號表示，鼠標移動上去，顯示完整文字。程序員

　　思路：交換機只有一個，找個交換機圖片，將其位置固定。那麼實際變化的，是根據項目變換採集器數據，有幾個採集器就有幾根連線。採集器用一個圖片表示，這個圖片的寬度，咱們能夠將其指定。這樣一來，咱們只要動態計算線的位置就能夠了，而線條直接能夠用css樣式來渲染。難點在交換機和採集器最左邊的那條連線，由於它會根據採集器數據的編號，位置會有變化，交換機下面的連線按比例來畫，1根，在50%的位置，兩根最左邊那根線在25%的位置，以此類推。
　　畫線，能夠利用dom結構的邊框，也能夠經過使用僞類content，固然也能夠採用H5畫圖，我的感受H5畫圖那種方式太過複雜，對計算要求過高，因此爲了項目進度我果斷拋棄了。web

　　技術場景：vue組件化+element+HTML5瀏覽器

下面看一下幾種界面場景：dom

第一種ide

JSON數據：

{ "data": { "array": [{ "collectorStatus": 1, "collectorOnlineRate": "98.97", "collectorId": 1130, "coms": [{ "comId": 1, "comName": "com1", "branches": [{ "branchId": 412, "branchOrder": 1, "branchNumber": "000000000186", "branchValue": 0.0, "branchName": "電梯", "onlineRate": "0", "status": 0 }] }, { "comId": 2, "comName": "com2", "branches": [{ "branchId": 413, "branchOrder": 1, "branchNumber": "000000000197", "branchValue": 0.0, "branchName": "1-3層照明插座", "onlineRate": "0", "status": 0 }] }, { "comId": 3, "comName": "com3", "branches": [{ "branchId": 410, "branchOrder": 1, "branchNumber": "000800092259", "branchValue": 0.0, "branchName": "廚房用電", "onlineRate": "0", "status": 0 }] }, { "comId": 4, "comName": "com4", "branches": [{ "branchId": 411, "branchOrder": 1, "branchNumber": "000800092268", "branchValue": 0.0, "branchName": "照明幹線", "onlineRate": "0", "status": 0 }, { "branchId": 415, "branchOrder": 2, "branchNumber": "000000210154", "branchValue": 0.0, "branchName": "1#變壓器", "onlineRate": "0", "status": 0 }] }], "collectorName": "採集器01" }] }, "code": 200, "msg": "", "errors": null }

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>