|
|
|
|
<template>
|
|
|
|
|
<!-- 电 -->
|
|
|
|
|
<div v-if="electricityState" class="electricity">
|
|
|
|
|
<!-- 各楼栋楼层切换 -->
|
|
|
|
|
<clickCp :bimModel="bimModel" sbType="电" ref="clickcp"></clickCp>
|
|
|
|
|
<backHome :bimModel="bimModel" type="电" dom=".mapDom"></backHome>
|
|
|
|
|
<div class="mapDom" style="
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 105px;
|
|
|
|
|
top: 210px;
|
|
|
|
|
width: 250px;
|
|
|
|
|
height: 180px;
|
|
|
|
|
margin: 45px 0;
|
|
|
|
|
" v-if="bimModel == 1"></div>
|
|
|
|
|
<!-- 设备概况 -->
|
|
|
|
|
<div class="box2" :class="bimModel == 2 ? 'tataigen' : ''">
|
|
|
|
|
<div class="title flex-center">
|
|
|
|
|
<img class="icon" src="../../../public/img/monitoring/electricity/sbIcon.png" />
|
|
|
|
|
<span>设备概况</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="state flex-center-center">
|
|
|
|
|
<div class="zc flex-center" style="font-family: fantasy">
|
|
|
|
|
<span style="margin-left: 72px">{{ listData.normalEquipNumber }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lx flex-center" style="font-family: fantasy">
|
|
|
|
|
<span style="margin-left: 72px">{{ listData.warnEquipEquipNumber }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stateName flex-center-center">
|
|
|
|
|
<span class="zc">正常</span>
|
|
|
|
|
<span class="lx">设备告警</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab_box">
|
|
|
|
|
<div class="tab_one" :style="{ color: isAlarm ? 'red' : '#fff' }">
|
|
|
|
|
<el-badge :is-dot="isAlarm" class="item">设备告警</el-badge><span
|
|
|
|
|
style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEquipWarnNumber }})</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-center tit" :class="bimModel == 2 ? 'tataitit' : ''">
|
|
|
|
|
<p>设备名称</p>
|
|
|
|
|
<span>|</span>
|
|
|
|
|
<p>报警信息</p>
|
|
|
|
|
<span>|</span>
|
|
|
|
|
<p>报警时间</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="
|
|
|
|
|
JSON.stringify(listData) != '{}' && listData.warnEquipList && listData.warnEquipList.length == 0
|
|
|
|
|
" class="noBjxx">
|
|
|
|
|
暂无报警信息
|
|
|
|
|
</div>
|
|
|
|
|
<vue-seamless-scroll v-else :class-option="classOption" :data="listData.warnEquipList" class="warp">
|
|
|
|
|
<div class="item flex-center" v-for="(item, index) in listData.warnEquipList" :key="index"
|
|
|
|
|
@mouseenter="showAlarmAlert(item, index)" style="position: relative"
|
|
|
|
|
@mouseleave="closeAlarmAlert(item, index)">
|
|
|
|
|
<div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alarm-alert">
|
|
|
|
|
<p @click="bjClick(item)">
|
|
|
|
|
<img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
|
|
|
|
|
<span>查看详情</span>
|
|
|
|
|
</p>
|
|
|
|
|
<span v-if="item.homepageShow == 1">|</span>
|
|
|
|
|
<p @click="doCancelWarn(item.id)" v-if="item.homepageShow == 1">
|
|
|
|
|
<img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
|
|
|
|
|
<span>关闭告警</span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box flex-center" :class="bimModel == 2 ? 'tataicon' : ''">
|
|
|
|
|
<div class="left flex-center-center">
|
|
|
|
|
<img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.status == 90001" />
|
|
|
|
|
<img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else />
|
|
|
|
|
<span class="message" :style="{ color: item.status == 90001 ? '#9D9D9D' : 'red' }"
|
|
|
|
|
v-text="item.equipName"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class=""></span>
|
|
|
|
|
<!-- <span class="data" :style="{ color: item.status == 90001 ? '#9D9D9D' : 'red' }">{{ item.status == 90001 ?
|
|
|
|
|
"离线" : "报警"
|
|
|
|
|
}}</span> -->
|
|
|
|
|
<span class="data" :style="{ color: item.status == 90001 ? '#9D9D9D' : 'red' }">{{ item.warnContent
|
|
|
|
|
}}</span>
|
|
|
|
|
<span class=""></span>
|
|
|
|
|
<span class="time" :style="{ color: item.status == 90001 ? '#9D9D9D' : 'red' }">{{
|
|
|
|
|
item.warnDate.substring(5, 16)
|
|
|
|
|
}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
|
<div
|
|
|
|
|
style="position: absolute;bottom: 10px;right: 10px;width:345px;text-align:right;color:rgb(7, 230, 237);font-size:14px;cursor:pointer;">
|
|
|
|
|
<span @click="goMoreWarnList">查看报警详情</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 本月用电 -->
|
|
|
|
|
<div class="instantElectro" v-show="bimModel == 1">
|
|
|
|
|
<!-- 顶部 -->
|
|
|
|
|
<div class="upTit flex-center-between">
|
|
|
|
|
<div class="tit-left flex-center">
|
|
|
|
|
<img class="icon" src="../../../public/img/monitoring/electricity/curIcon.png" />
|
|
|
|
|
<span class="tit1">本月用电</span>
|
|
|
|
|
<span class="use">{{ curElectro.sumBuilding }}</span>
|
|
|
|
|
<span class="unit">kw·h</span>
|
|
|
|
|
<span class="tit2">较上月</span>
|
|
|
|
|
<img v-if="curElectro.sumBuilding > curElectro.sumCompare" class="compare"
|
|
|
|
|
src="../../../public/img/monitoring/electricity/up.png" />
|
|
|
|
|
<img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" />
|
|
|
|
|
<span :style="{
|
|
|
|
|
color:
|
|
|
|
|
curElectro.sumBuilding > curElectro.sumCompare
|
|
|
|
|
? '#ff8b2e'
|
|
|
|
|
: '#2cd52c',
|
|
|
|
|
}" class="use-unit">{{
|
|
|
|
|
Math.abs(curElectro.sumBuilding - curElectro.sumCompare).toFixed(
|
|
|
|
|
2
|
|
|
|
|
)
|
|
|
|
|
}}kw·h</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tit-right flex-center">
|
|
|
|
|
<div class="box flex-center">
|
|
|
|
|
<div class="color state2"></div>
|
|
|
|
|
<span>本月用电量(kw·h)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box flex-center">
|
|
|
|
|
<div class="color state3"></div>
|
|
|
|
|
<span>上月用电量(kw·h)</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 底部 -->
|
|
|
|
|
<div class="down flex">
|
|
|
|
|
<!-- 饼图 -->
|
|
|
|
|
<div class="pie" id="electroPie"></div>
|
|
|
|
|
<!-- 楼栋用电情况 -->
|
|
|
|
|
<div class="towerUse flex-center-between">
|
|
|
|
|
<div v-for="(item, index) in electro" class="towerUseBox flex-center">
|
|
|
|
|
<img class="towerIcon" src="../../../public/img/monitoring/electricity/tower.png" />
|
|
|
|
|
<div class="center">
|
|
|
|
|
<div>{{ index + 1 }}#</div>
|
|
|
|
|
<div class="echarts">
|
|
|
|
|
<echartsTwo :ref="'echartsTwo' + index" :chartId="'echartsTwo' + index"></echartsTwo>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div>较上月</div>
|
|
|
|
|
<div class="flex-center">
|
|
|
|
|
<img v-if="item.instant > item.ultimo" class="compare"
|
|
|
|
|
src="../../../public/img/monitoring/electricity/up.png" />
|
|
|
|
|
<img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" />
|
|
|
|
|
<!-- <img src="../../../public/img/monitoring/electricity/up.png">
|
|
|
|
|
<div class="up">325.91%</div> -->
|
|
|
|
|
<div v-if="item.instant > item.ultimo" class="up">
|
|
|
|
|
{{ item.compare }}%
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="down">{{ item.compare }}%</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 塔台本月用电 -->
|
|
|
|
|
<div class="instantElectro currentEle" v-show="bimModel == 2">
|
|
|
|
|
<!-- 顶部 -->
|
|
|
|
|
<div class="upTit flex-center-between top">
|
|
|
|
|
<div class="tit-left flex-center">
|
|
|
|
|
<img class="icon" src="../../../public/img/monitoring/electricity/curIcon.png" />
|
|
|
|
|
<span class="tit1">本月用电</span>
|
|
|
|
|
<span class="use">{{ curElectro.sumBuilding }}</span>
|
|
|
|
|
<span class="unit">kw·h</span>
|
|
|
|
|
<span class="tit2">较上月</span>
|
|
|
|
|
<img v-if="curElectro.sumBuilding > curElectro.sumCompare" class="compare"
|
|
|
|
|
src="../../../public/img/monitoring/electricity/up.png" />
|
|
|
|
|
<img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" />
|
|
|
|
|
<span :style="{
|
|
|
|
|
color:
|
|
|
|
|
curElectro.sumBuilding > curElectro.sumCompare
|
|
|
|
|
? '#ff8b2e'
|
|
|
|
|
: '#2cd52c',
|
|
|
|
|
}" class="use-unit">{{ curElectro.sumBuilding }}kw·h</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 底部 -->
|
|
|
|
|
<div class="down flex">
|
|
|
|
|
<!-- 饼图 -->
|
|
|
|
|
<div class="pie" id="tataiElePie"></div>
|
|
|
|
|
<div class="towerUse tataitower">
|
|
|
|
|
<div class="floorele" v-for="(item, index) in floorArray" :key="index">
|
|
|
|
|
<div class="floor_name">{{ item.name }}</div>
|
|
|
|
|
<div class="now_ele">{{ item.nowEle }}</div>
|
|
|
|
|
<div class="com_ele">
|
|
|
|
|
<img v-if="item.nowEle >= item.lastEle" class="compare"
|
|
|
|
|
src="../../../public/img/monitoring/electricity/up.png" />
|
|
|
|
|
<img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" />
|
|
|
|
|
<span style="margin-left: 5px" :style="{
|
|
|
|
|
color:
|
|
|
|
|
curElectro.sumBuilding > curElectro.sumCompare
|
|
|
|
|
? '#ff8b2e'
|
|
|
|
|
: '#2cd52c',
|
|
|
|
|
}" class="use-unit">{{ (item.comEle + '').substring('.').length > 2 ? item.comEle.toFixed(2) : item.comEle }}kw·h</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="last_ele">
|
|
|
|
|
<span>上月：</span><span>{{ item.lastEle }}kw·h</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 历史用电 -->
|
|
|
|
|
<div class="rightBox" v-show="bimModel == 1">
|
|
|
|
|
<div class="top1 flex-center-between">
|
|
|
|
|
<div class="left flex-center">
|
|
|
|
|
<img class="icon" src="../../../public/img/monitoring/electricity/curIcon.png" />
|
|
|
|
|
<span class="tit1">历史用电统计</span>
|
|
|
|
|
<span class="tit2">单位(kw·h)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cut flex-center">
|
|
|
|
|
<div @click="selectBim(2)" :class="[type == 2 ? 'active' : '']" class="cut_select left">
|
|
|
|
|
日
|
|
|
|
|
</div>
|
|
|
|
|
<div @click="selectBim(1)" :class="[type == 1 ? 'active' : '']" class="cut_select right">
|
|
|
|
|
月
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="top2 flex-center">
|
|
|
|
|
<div class="time flex-center-center">
|
|
|
|
|
<span>选择日期：</span>
|
|
|
|
|
<el-date-picker value-format="yyyy-MM-dd" size="mini" v-model="value1" type="daterange" range-separator="至"
|
|
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
<div class="btn" @click="queryBtn">查询</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom flex-center">
|
|
|
|
|
<div class="right">
|
|
|
|
|
<echarts ref="echarts"></echarts>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 塔台历史用电 -->
|
|
|
|
|
<div class="rightBox tataihis" v-show="bimModel == 2">
|
|
|
|
|
<div class="top1 flex-center-between tatai">
|
|
|
|
|
<div class="left flex-center">
|
|
|
|
|
<img class="icon" src="../../../public/img/monitoring/electricity/curIcon.png" />
|
|
|
|
|
<span class="tit1">历史用电统计</span>
|
|
|
|
|
<span class="tit2">单位(kw·h)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cut flex-center">
|
|
|
|
|
<div @click="selectBim(2)" :class="[type == 2 ? 'active' : '']" class="cut_select left">
|
|
|
|
|
日
|
|
|
|
|
</div>
|
|
|
|
|
<div @click="selectBim(1)" :class="[type == 1 ? 'active' : '']" class="cut_select right">
|
|
|
|
|
月
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="top2 flex-center" :class="bimModel == 2 ? 'selectdata' : ''">
|
|
|
|
|
<div class="time flex-center-center">
|
|
|
|
|
<span>选择日期：</span>
|
|
|
|
|
<el-date-picker value-format="yyyy-MM-dd" size="mini" v-model="value1" type="daterange" range-separator="至"
|
|
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
<div class="btn" @click="queryBtn">查询</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bottom flex-center">
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="right_tit">
|
|
|
|
|
<span>总用电量：</span><span style="font-family: fantasy; font-size: 16px; margin-right: 3px">{{ tataiTotal
|
|
|
|
|
}}</span>
|
|
|
|
|
<span>kw·h</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="tataiecharts" class="right_echarts"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 设备列表 -->
|
|
|
|
|
<div class="tab" :class="bimModel == 2 ? 'tataigen' : ''">
|
|
|
|
|
<div class="title flex-center">
|
|
|
|
|
<img src="../../../public/img/monitoring/electricity/listIcon3.png" />
|
|
|
|
|
<span>设备列表</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tabBox">
|
|
|
|
|
<el-table @row-click="tableClick" :data="tableData" style="width: 100%"
|
|
|
|
|
:class="bimModel == 2 ? 'tataitab' : ''">
|
|
|
|
|
<el-table-column label="电表名称" width="130">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div class="flex-center dev_name">
|
|
|
|
|
<img v-if="scope.row.status == 90000" style="margin: 0 6px"
|
|
|
|
|
src="../../../public/img/monitoring/electricity/listIcon.png" />
|
|
|
|
|
<img v-else-if="scope.row.status == 90001" style="margin: 0 6px"
|
|
|
|
|
src="../../../public/img/monitoring/electricity/listIcon2.png" />
|
|
|
|
|
<img v-else style="margin: 0 6px" src="../../../public/img/monitoring/electricity/listIcon4.png" />
|
|
|
|
|
<span :style="{
|
|
|
|
|
color:
|
|
|
|
|
scope.row.status == 90000
|
|
|
|
|
? ''
|
|
|
|
|
: scope.row.status == 90001
|
|
|
|
|
? '#a5bbe5'
|
|
|
|
|
: '#ff0000',
|
|
|
|
|
}" style="cursor: pointer">{{ scope.row.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="|" width="10"> </el-table-column>
|
|
|
|
|
<el-table-column label="电箱位置">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div class="flex-center dev_name">
|
|
|
|
|
<span :style="{
|
|
|
|
|
color:
|
|
|
|
|
scope.row.status == 90000
|
|
|
|
|
? ''
|
|
|
|
|
: scope.row.status == 90001
|
|
|
|
|
? '#a5bbe5'
|
|
|
|
|
: '#ff0000',
|
|
|
|
|
}" style="padding-left: 10px; cursor: pointer">{{ scope.row.location }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="|" width="10"> </el-table-column>
|
|
|
|
|
<el-table-column label="负责模块">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div :style="{
|
|
|
|
|
color:
|
|
|
|
|
scope.row.status == 90000
|
|
|
|
|
? ''
|
|
|
|
|
: scope.row.status == 90001
|
|
|
|
|
? '#a5bbe5'
|
|
|
|
|
: '#ff0000',
|
|
|
|
|
}" class="flex-center-center dev_name" style="cursor: pointer">
|
|
|
|
|
{{ scope.row.shortName }}
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
<div class="pagination">
|
|
|
|
|
<el-pagination :pager-count="4" background @current-change="handleCurrentChange" :current-page.sync="current"
|
|
|
|
|
:page-size="5" layout="total, prev, pager, next" :total="total">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// import * as bfHelper from '../../util/bfHelper';
|
|
|
|
|
import {
|
|
|
|
|
resetStatus,
|
|
|
|
|
extObjMngClear,
|
|
|
|
|
getCameraStatus,
|
|
|
|
|
lookPipeline2,
|
|
|
|
|
equipmentCondition,
|
|
|
|
|
equipmentCopColors,
|
|
|
|
|
equipmentCondition2,
|
|
|
|
|
lookEquipmentCop,
|
|
|
|
|
setOpacityFun,
|
|
|
|
|
TtLookEquipmentCop,
|
|
|
|
|
ttLookPipeline2,
|
|
|
|
|
setOpacityFun1,
|
|
|
|
|
disposeId,
|
|
|
|
|
setColor,
|
|
|
|
|
getBoxMessage,
|
|
|
|
|
customTag,
|
|
|
|
|
onClick,
|
|
|
|
|
getObjectDataById,
|
|
|
|
|
clearDrawableContainer,
|
|
|
|
|
zoomToBoundingBox,
|
|
|
|
|
cameraPosition,
|
|
|
|
|
mapUpdate,
|
|
|
|
|
mapViewerCamera,
|
|
|
|
|
setCameraStatus,
|
|
|
|
|
} from "../../util/bfHelper";
|
|
|
|
|
import * as commonValue from "../../util/commonValue";
|
|
|
|
|
import echarts from "./echarts1";
|
|
|
|
|
import echartsTwo from "./echarts2";
|
|
|
|
|
import clickCp from "./clickCp";
|
|
|
|
|
import backHome from "./backHome";
|
|
|
|
|
import {
|
|
|
|
|
// 业务区
|
|
|
|
|
getYwqElectricityLeft, //本月用电
|
|
|
|
|
getYwqElectricityRight, //历史用电统计
|
|
|
|
|
getsbList, //设备列表
|
|
|
|
|
getEquipmentMessage, //点击设备获取设备信息
|
|
|
|
|
getEquipmentState, //获取所有设备的状态
|
|
|
|
|
// 塔台
|
|
|
|
|
getTtElectricityLeft, //本月用电
|
|
|
|
|
getTtElectricityRight, //历史用电统计
|
|
|
|
|
getElectricWarnList, //报警列表
|
|
|
|
|
getCancelWarn,//关闭报警
|
|
|
|
|
} from "@/api/garden/monitoring";
|
|
|
|
|
import bfHelperState from "../../store/modules/bfHelperState";
|
|
|
|
|
export default {
|
|
|
|
|
props: {
|
|
|
|
|
electricityState: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
},
|
|
|
|
|
bimModel: {
|
|
|
|
|
type: Number,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
echarts,
|
|
|
|
|
echartsTwo,
|
|
|
|
|
clickCp,
|
|
|
|
|
backHome,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
current: 1, //当前页
|
|
|
|
|
size: 5, //每页数量
|
|
|
|
|
total: 14, //总条目数
|
|
|
|
|
tableData: [], //设备列表
|
|
|
|
|
tower: null, //当前点击楼号
|
|
|
|
|
layer: null, //当前点击层号
|
|
|
|
|
curElectro: {}, //本月用电
|
|
|
|
|
electro: [], //每号楼用电
|
|
|
|
|
historyElectro: {}, //历史用电统计
|
|
|
|
|
type: 2, //日/月
|
|
|
|
|
value1: [], //选择日期
|
|
|
|
|
listData: { warnEquipList: [] }, //报警信息
|
|
|
|
|
classOption: {
|
|
|
|
|
step: 0.2,
|
|
|
|
|
}, //报警信息轮播速度配置
|
|
|
|
|
isAlarm: false, //是否有故障报警
|
|
|
|
|
alarmTotal: 0, //故障报警总数
|
|
|
|
|
floorArray: [],
|
|
|
|
|
// 南楼用电
|
|
|
|
|
sourthBuilding: [],
|
|
|
|
|
// 北楼用电
|
|
|
|
|
northBuilding: [],
|
|
|
|
|
// 塔楼用电
|
|
|
|
|
towerBuilding: [],
|
|
|
|
|
// 总用电
|
|
|
|
|
sumBuilding: [],
|
|
|
|
|
// 塔台历史用电x轴
|
|
|
|
|
tataiXdata: [],
|
|
|
|
|
// 塔台总用电量
|
|
|
|
|
tataiTotal: "",
|
|
|
|
|
isMapViewer: 0,
|
|
|
|
|
alarmAlert: true, //鼠标悬停在报警列表里查看详情和关闭告警是否出现
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
if (this.setInterval) {
|
|
|
|
|
clearInterval(this.setInterval);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getNavigationMap();
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
bimModel: {
|
|
|
|
|
handler(newVal, oldVal) {
|
|
|
|
|
this.current = 1; //当前页
|
|
|
|
|
this.total = 0; //总条目数
|
|
|
|
|
if (this.setInterval) {
|
|
|
|
|
clearInterval(this.setInterval);
|
|
|
|
|
}
|
|
|
|
|
this.tower = null;
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
//模型是否加载完成监听
|
|
|
|
|
"$store.state.bfHelperState.bfState": {
|
|
|
|
|
immediate: true,
|
|
|
|
|
handler(newval, olval) {
|
|
|
|
|
console.log('bfState',newval)
|
|
|
|
|
if (newval) {
|
|
|
|
|
// 模型恢复全部状态
|
|
|
|
|
resetStatus(2);
|
|
|
|
|
extObjMngClear(); //清除外部构件
|
|
|
|
|
if (newval == 1) {
|
|
|
|
|
// 滚轮设置透明度
|
|
|
|
|
if (this.bimModel == 1) {
|
|
|
|
|
// 查看管线
|
|
|
|
|
window.sessionStorage.setItem(
|
|
|
|
|
"camera",
|
|
|
|
|
JSON.stringify(getCameraStatus())
|
|
|
|
|
);
|
|
|
|
|
//build,floor 浏览器存储是否是单层加载
|
|
|
|
|
let build = sessionStorage.getItem("build");
|
|
|
|
|
let floor = sessionStorage.getItem("floor");
|
|
|
|
|
//如果点击了楼
|
|
|
|
|
if (build) {
|
|
|
|
|
if (build == 10) {
|
|
|
|
|
//如果点击的是地下室
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setTower("07");
|
|
|
|
|
this.$refs.clickcp.active = 26;
|
|
|
|
|
this.$refs.clickcp.tower = 9;
|
|
|
|
|
}, 300);
|
|
|
|
|
lookPipeline2(
|
|
|
|
|
equipmentCondition[0],
|
|
|
|
|
equipmentCopColors[0],
|
|
|
|
|
build - 1,
|
|
|
|
|
null,
|
|
|
|
|
"电",
|
|
|
|
|
equipmentCondition2[0]
|
|
|
|
|
);
|
|
|
|
|
} else if (build == 26) {
|
|
|
|
|
//如果点击的是园区
|
|
|
|
|
lookEquipmentCop("电");
|
|
|
|
|
this.$refs.clickcp.active = 26;
|
|
|
|
|
this.$refs.clickcp.tower = null;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setTower();
|
|
|
|
|
}, 300);
|
|
|
|
|
|
|
|
|
|
setOpacityFun();
|
|
|
|
|
} else {
|
|
|
|
|
if (floor.indexOf("undefined") == -1) {
|
|
|
|
|
//如果点击了层
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setTower("0" + build, "0" + floor);
|
|
|
|
|
this.$refs.clickcp.active = commonValue.activeValue(
|
|
|
|
|
Number(build),
|
|
|
|
|
Number(floor)
|
|
|
|
|
);
|
|
|
|
|
this.$refs.clickcp.tower = commonValue.towerValue(build);
|
|
|
|
|
}, 300);
|
|
|
|
|
|
|
|
|
|
lookPipeline2(
|
|
|
|
|
equipmentCondition[0],
|
|
|
|
|
equipmentCopColors[0],
|
|
|
|
|
build - 1,
|
|
|
|
|
floor,
|
|
|
|
|
"电",
|
|
|
|
|
equipmentCondition2[0]
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
//如果点击的是整栋楼
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setTower("0" + build);
|
|
|
|
|
this.$refs.clickcp.active = commonValue.activeValue(
|
|
|
|
|
Number(build),
|
|
|
|
|
null
|
|
|
|
|
);
|
|
|
|
|
this.$refs.clickcp.tower = commonValue.towerValue(build);
|
|
|
|
|
}, 300);
|
|
|
|
|
lookPipeline2(
|
|
|
|
|
equipmentCondition[0],
|
|
|
|
|
equipmentCopColors[0],
|
|
|
|
|
build - 1,
|
|
|
|
|
null,
|
|
|
|
|
"电",
|
|
|
|
|
equipmentCondition2[0]
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
lookEquipmentCop("电");
|
|
|
|
|
setOpacityFun();
|
|
|
|
|
this.getNavigationMap();
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 查看管线
|
|
|
|
|
window.sessionStorage.setItem(
|
|
|
|
|
"ttcamera",
|
|
|
|
|
JSON.stringify(getCameraStatus())
|
|
|
|
|
);
|
|
|
|
|
let ttbuild = sessionStorage.getItem("ttbuild");
|
|
|
|
|
if (ttbuild) {
|
|
|
|
|
if (ttbuild == 20) {
|
|
|
|
|
//园区
|
|
|
|
|
TtLookEquipmentCop("电");
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setTower();
|
|
|
|
|
}, 300);
|
|
|
|
|
} else if (ttbuild == 0) {
|
|
|
|
|
//塔楼
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setTower("08");
|
|
|
|
|
this.$refs.clickcp.ttActive = 0;
|
|
|
|
|
}, 300);
|
|
|
|
|
ttLookPipeline2(
|
|
|
|
|
equipmentCondition[0],
|
|
|
|
|
equipmentCopColors[0],
|
|
|
|
|
0,
|
|
|
|
|
"电",
|
|
|
|
|
equipmentCondition2[0]
|
|
|
|
|
);
|
|
|
|
|
} else if (ttbuild == 1) {
|
|
|
|
|
//辅楼1楼
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setTower("09", "01");
|
|
|
|
|
this.$refs.clickcp.ttActive = 1;
|
|
|
|
|
}, 300);
|
|
|
|
|
ttLookPipeline2(
|
|
|
|
|
equipmentCondition[0],
|
|
|
|
|
equipmentCopColors[0],
|
|
|
|
|
1,
|
|
|
|
|
"电",
|
|
|
|
|
equipmentCondition2[0]
|
|
|
|
|
);
|
|
|
|
|
} else if (ttbuild == 2) {
|
|
|
|
|
//辅楼1楼
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setTower("09", "02");
|
|
|
|
|
this.$refs.clickcp.ttActive = 2;
|
|
|
|
|
}, 300);
|
|
|
|
|
ttLookPipeline2(
|
|
|
|
|
equipmentCondition[0],
|
|
|
|
|
equipmentCopColors[0],
|
|
|
|
|
2,
|
|
|
|
|
"电",
|
|
|
|
|
equipmentCondition2[0]
|
|
|
|
|
);
|
|
|
|
|
} else if (ttbuild == 3) {
|
|
|
|
|
//辅楼整栋
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setTower("09");
|
|
|
|
|
this.$refs.clickcp.ttActive = 3;
|
|
|
|
|
}, 300);
|
|
|
|
|
ttLookPipeline2(
|
|
|
|
|
equipmentCondition[0],
|
|
|
|
|
equipmentCopColors[0],
|
|
|
|
|
3,
|
|
|
|
|
"电",
|
|
|
|
|
equipmentCondition2[0]
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
TtLookEquipmentCop("电");
|
|
|
|
|
setOpacityFun1();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//关闭告警 - 重新查询告警列表
|
|
|
|
|
doCancelWarn(id) {
|
|
|
|
|
getCancelWarn(id).then((res) => {
|
|
|
|
|
this.getElectricWarnList();
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//跳转历史告警列表
|
|
|
|
|
goMoreWarnList() {
|
|
|
|
|
// this.$router.push({ path: '/equipment/warnHistory' });
|
|
|
|
|
const routerUrl = this.$router.resolve({ path: '/equipment/warnHistory', query: { classCode: '0100', area: this.bimModel } });
|
|
|
|
|
window.open(routerUrl.href, "_blank");
|
|
|
|
|
},
|
|
|
|
|
showAlarmAlert(item, index) {
|
|
|
|
|
item.showAlert = true;
|
|
|
|
|
this.listData.warnEquipList.splice(index, 1, item);
|
|
|
|
|
},
|
|
|
|
|
closeAlarmAlert(item, index) {
|
|
|
|
|
item.showAlert = false;
|
|
|
|
|
this.listData.warnEquipList.splice(index, 1, item);
|
|
|
|
|
},
|
|
|
|
|
// 获取所有设备的状态
|
|
|
|
|
getEquipmentState() {
|
|
|
|
|
getEquipmentState(
|
|
|
|
|
this.bimModel,
|
|
|
|
|
this.tower ? this.tower : "",
|
|
|
|
|
this.layer ? this.layer : ""
|
|
|
|
|
).then((res) => {
|
|
|
|
|
let onList = []; //在线的构件数组
|
|
|
|
|
let offList = []; //离线的构件数组
|
|
|
|
|
let { onlineEquipList, offlineEquipList } = res.data.data;
|
|
|
|
|
for (let i = 0; i < onlineEquipList.length; i++) {
|
|
|
|
|
let id = disposeId(
|
|
|
|
|
onlineEquipList[i].area,
|
|
|
|
|
onlineEquipList[i].build,
|
|
|
|
|
onlineEquipList[i].modelId
|
|
|
|
|
);
|
|
|
|
|
onList.push(id);
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < offlineEquipList.length; i++) {
|
|
|
|
|
let id = disposeId(
|
|
|
|
|
offlineEquipList[i].area,
|
|
|
|
|
offlineEquipList[i].build,
|
|
|
|
|
offlineEquipList[i].modelId
|
|
|
|
|
);
|
|
|
|
|
offList.push(id);
|
|
|
|
|
}
|
|
|
|
|
setColor("#2cd52c", onList); //在线的绿色
|
|
|
|
|
setColor("#9d9d9d", offList); //离线的灰色
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 表格某行被点击
|
|
|
|
|
tableClick(row, column, event) {
|
|
|
|
|
this.bjClick(row);
|
|
|
|
|
},
|
|
|
|
|
// 添加标签
|
|
|
|
|
addLabel(objectId, name, type, location, dataNum) {
|
|
|
|
|
// 构件id/设备名称/设备状态/设备位置/累计电量
|
|
|
|
|
// 获取当前点击坐标
|
|
|
|
|
let zb = getBoxMessage(objectId, true);
|
|
|
|
|
// //引线标签的顶点
|
|
|
|
|
let position = zb.max;
|
|
|
|
|
let content = `<div class="leadTips" style="transform: translateY(-72px);">
|
|
|
|
|
<div style="display: flex;width:max-content">
|
|
|
|
|
<img src="${require(type == 90000
|
|
|
|
|
? "../../../public/img/monitoring/electricity/customTag1.png"
|
|
|
|
|
: "../../../public/img/monitoring/electricity/offline2_2.png")}" style="width:87px;height:53px;"/>
|
|
|
|
|
<div style="margin-top: -42px;">
|
|
|
|
|
<div style="width: 185px;height: 46px;background: url('${require(type == 90000
|
|
|
|
|
? "../../../public/img/monitoring/electricity/customTag1-1.png"
|
|
|
|
|
: "../../../public/img/monitoring/electricity/offline2.png")}');">
|
|
|
|
|
<span style="padding-left: 36px;line-height: 32px;font-size: 15px;color: white;">${name}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 5px;box-sizing: border-box;color: #ffffff;width: 185px;padding: 0 15px;background-color: ${type == 90000
|
|
|
|
|
? "rgba(30, 57, 102, 0.8)"
|
|
|
|
|
: "rgba(96, 96, 96, 0.8)"
|
|
|
|
|
};">
|
|
|
|
|
<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;">
|
|
|
|
|
<span style="opacity: 0.5;font-size: 12px;">设备状态:</span>
|
|
|
|
|
<span style="font-size: 15px;">${type == 90000 ? "正常" : "离线"}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;">
|
|
|
|
|
<span style="opacity: 0.5;font-size: 12px;">所在位置:</span>
|
|
|
|
|
<span style="font-size: 15px;">${location}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;">
|
|
|
|
|
<span style="opacity: 0.5;font-size: 12px;">累计电量(kw·h):</span>
|
|
|
|
|
<span style="font-size: 15px;">${dataNum}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>`;
|
|
|
|
|
customTag(position, null, content);
|
|
|
|
|
},
|
|
|
|
|
// 构件点击(暂定不用)
|
|
|
|
|
onClick() {
|
|
|
|
|
onClick((data) => {
|
|
|
|
|
// 点击构件的筛选条件
|
|
|
|
|
let condition = getObjectDataById(data.objectId);
|
|
|
|
|
let arr = equipmentCondition2[0];
|
|
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
|
|
|
if (
|
|
|
|
|
condition.categoryId == arr[i].categoryId &&
|
|
|
|
|
condition.familyType == arr[i].familyType
|
|
|
|
|
) {
|
|
|
|
|
getEquipmentMessage(this.bimModel, data.elementId).then((res) => {
|
|
|
|
|
if (res.data.code == 200) {
|
|
|
|
|
for (let i = 0; i < res.data.data.length; i++) {
|
|
|
|
|
if (data.elementId == res.data.data[i].modelId) {
|
|
|
|
|
let { name, status, location, dataNum } = res.data.data[i];
|
|
|
|
|
// 如果当前点击的是电箱 先清除所以标签
|
|
|
|
|
clearDrawableContainer();
|
|
|
|
|
this.addLabel(
|
|
|
|
|
data.objectId,
|
|
|
|
|
name,
|
|
|
|
|
status,
|
|
|
|
|
location,
|
|
|
|
|
dataNum
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 获取数据集合
|
|
|
|
|
getData() {
|
|
|
|
|
this.getCurElectro(); //本月用电
|
|
|
|
|
this.getHistoryElectro(); //历史用电统计
|
|
|
|
|
// this.getElectricityBjxx(); //报警信息
|
|
|
|
|
this.getElectricWarnList();
|
|
|
|
|
this.getsbList(); //设备列表
|
|
|
|
|
this.getEquipmentState(); //获取所有设备状态
|
|
|
|
|
|
|
|
|
|
this.setInterval = setInterval(() => {
|
|
|
|
|
this.getCurElectro(); //本月用电
|
|
|
|
|
this.getHistoryElectro(); //历史用电统计
|
|
|
|
|
// this.getElectricityBjxx(); //报警信息
|
|
|
|
|
this.getElectricWarnList();
|
|
|
|
|
this.getsbList(); //设备列表
|
|
|
|
|
this.getEquipmentState(); //获取所有设备状态
|
|
|
|
|
}, 3600000);
|
|
|
|
|
},
|
|
|
|
|
// 接收子组件当前点击楼号
|
|
|
|
|
setTower(i, j) {
|
|
|
|
|
this.current = 1; //当前页
|
|
|
|
|
this.total = 0; //总条目数
|
|
|
|
|
this.tower = i;
|
|
|
|
|
this.layer = j;
|
|
|
|
|
this.getsbList();
|
|
|
|
|
// this.getElectricityBjxx();
|
|
|
|
|
this.getElectricWarnList();
|
|
|
|
|
if (this.bimModel == 1) {
|
|
|
|
|
commonValue.getUpdateMap("electricity", i, j);
|
|
|
|
|
} else {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 页码改变时触发
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
this.current = val;
|
|
|
|
|
this.getsbList();
|
|
|
|
|
},
|
|
|
|
|
// 获取设备列表
|
|
|
|
|
getsbList() {
|
|
|
|
|
getsbList(
|
|
|
|
|
this.bimModel,
|
|
|
|
|
this.tower ? this.tower : "",
|
|
|
|
|
this.layer ? this.layer : "",
|
|
|
|
|
this.current,
|
|
|
|
|
this.size
|
|
|
|
|
).then((res) => {
|
|
|
|
|
this.total = res.data.data.total;
|
|
|
|
|
this.tableData = res.data.data.records;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 获取本月用电
|
|
|
|
|
getCurElectro() {
|
|
|
|
|
if (this.bimModel == 1) {
|
|
|
|
|
getYwqElectricityLeft().then((res) => {
|
|
|
|
|
let {
|
|
|
|
|
firstBuilding,
|
|
|
|
|
firstBuildingPre,
|
|
|
|
|
firstCompare,
|
|
|
|
|
secondBuilding,
|
|
|
|
|
secondBuildingPre,
|
|
|
|
|
secondCompare,
|
|
|
|
|
thirdBuilding,
|
|
|
|
|
thirdBuildingPre,
|
|
|
|
|
thirdCompare,
|
|
|
|
|
forthBuilding,
|
|
|
|
|
forthBuildingPre,
|
|
|
|
|
forthCompare,
|
|
|
|
|
fifthBuilding,
|
|
|
|
|
fifthBuildingPre,
|
|
|
|
|
fifthCompare,
|
|
|
|
|
sixthBuilding,
|
|
|
|
|
sixthBuildingPre,
|
|
|
|
|
sixthCompare,
|
|
|
|
|
} = res.data.data;
|
|
|
|
|
this.curElectro = res.data.data;
|
|
|
|
|
this.electro = [
|
|
|
|
|
{
|
|
|
|
|
instant: firstBuilding,
|
|
|
|
|
ultimo: firstBuildingPre,
|
|
|
|
|
compare: firstCompare,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
instant: secondBuilding,
|
|
|
|
|
ultimo: secondBuildingPre,
|
|
|
|
|
compare: secondCompare,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
instant: thirdBuilding,
|
|
|
|
|
ultimo: thirdBuildingPre,
|
|
|
|
|
compare: thirdCompare,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
instant: forthBuilding,
|
|
|
|
|
ultimo: forthBuildingPre,
|
|
|
|
|
compare: forthCompare,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
instant: fifthBuilding,
|
|
|
|
|
ultimo: fifthBuildingPre,
|
|
|
|
|
compare: fifthCompare,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
instant: sixthBuilding,
|
|
|
|
|
ultimo: sixthBuildingPre,
|
|
|
|
|
compare: sixthCompare,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
for (let i = 0; i < this.electro.length; i++) {
|
|
|
|
|
this.$refs[`echartsTwo${i}`][0].getData(this.electro[i]);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.electroPie();
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
getTtElectricityLeft().then((res) => {
|
|
|
|
|
this.curElectro = res.data.data;
|
|
|
|
|
this.floorArray = [
|
|
|
|
|
{
|
|
|
|
|
name: "辅楼",
|
|
|
|
|
nowEle: this.curElectro.sourthBuilding,
|
|
|
|
|
comEle: Math.abs(
|
|
|
|
|
this.curElectro.sourthBuilding - this.curElectro.sourthCompare
|
|
|
|
|
),
|
|
|
|
|
lastEle: this.curElectro.sourthCompare,
|
|
|
|
|
percent:
|
|
|
|
|
(
|
|
|
|
|
this.curElectro.sourthBuilding / this.curElectro.sumBuilding
|
|
|
|
|
).toFixed(2) * 100,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
name: "塔楼",
|
|
|
|
|
nowEle: this.curElectro.towerBuilding,
|
|
|
|
|
comEle: Math.abs(
|
|
|
|
|
this.curElectro.towerBuilding - this.curElectro.towerCompare
|
|
|
|
|
),
|
|
|
|
|
lastEle: this.curElectro.towerCompare,
|
|
|
|
|
percent:
|
|
|
|
|
(
|
|
|
|
|
this.curElectro.towerBuilding / this.curElectro.sumBuilding
|
|
|
|
|
).toFixed(2) * 100,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
this.tataiElePie();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 获取历史用电统计
|
|
|
|
|
getHistoryElectro() {
|
|
|
|
|
if (this.bimModel == 1) {
|
|
|
|
|
getYwqElectricityRight(this.value1[0], this.value1[1], this.type).then(
|
|
|
|
|
(res) => {
|
|
|
|
|
this.historyElectro = res.data.data;
|
|
|
|
|
for (let i = 0; i < this.historyElectro.time.length; i++) {
|
|
|
|
|
this.historyElectro.time[i] =
|
|
|
|
|
this.historyElectro.time[i].substring(5);
|
|
|
|
|
}
|
|
|
|
|
this.$refs.echarts.echartsFun(1, this.historyElectro);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
getTtElectricityRight(this.value1[0], this.value1[1], this.type).then(
|
|
|
|
|
(res) => {
|
|
|
|
|
this.historyElectro = res.data.data;
|
|
|
|
|
this.sourthBuilding = this.historyElectro.sourthBuilding;
|
|
|
|
|
this.northBuilding = this.historyElectro.northBuilding;
|
|
|
|
|
this.towerBuilding = this.historyElectro.towerBuilding;
|
|
|
|
|
this.sumBuilding = this.historyElectro.sumBuilding;
|
|
|
|
|
this.tataiXdata = this.historyElectro.time;
|
|
|
|
|
for (let i = 0; i < this.tataiXdata.length; i++) {
|
|
|
|
|
this.tataiXdata[i] = this.tataiXdata[i].substring(5);
|
|
|
|
|
}
|
|
|
|
|
this.tataiTotal = this.historyElectro.sumBuildingSum;
|
|
|
|
|
this.createTataihis();
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 报警信息
|
|
|
|
|
// getElectricityBjxx() {
|
|
|
|
|
// getBjxx(
|
|
|
|
|
// this.bimModel,
|
|
|
|
|
// this.tower ? this.tower : "",
|
|
|
|
|
// this.layer ? this.layer : ""
|
|
|
|
|
// ).then((res) => {
|
|
|
|
|
// this.listData = res.data.data;
|
|
|
|
|
// for (let i = 0; i < this.listData.offlineEquipList.length; i++) {
|
|
|
|
|
// this.listData.offlineEquipList[i].showAlert = false;
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// },
|
|
|
|
|
// 报警记录-20221031改版
|
|
|
|
|
getElectricWarnList() {
|
|
|
|
|
getElectricWarnList({
|
|
|
|
|
area: this.bimModel,
|
|
|
|
|
build: this.tower ? this.tower : "",
|
|
|
|
|
floor: this.layer ? this.layer : "",
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
this.listData = res.data.data;
|
|
|
|
|
for (let i = 0; i < this.listData.warnEquipList.length; i++) {
|
|
|
|
|
this.listData.warnEquipList[i].showAlert = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getNavigationMap() {
|
|
|
|
|
commonValue.getNavigationMap("electricity");
|
|
|
|
|
},
|
|
|
|
|
// 切换日月
|
|
|
|
|
selectBim(i) {
|
|
|
|
|
this.type = i;
|
|
|
|
|
this.getHistoryElectro();
|
|
|
|
|
},
|
|
|
|
|
// 点击查询
|
|
|
|
|
queryBtn() {
|
|
|
|
|
this.getHistoryElectro();
|
|
|
|
|
},
|
|
|
|
|
// 点击报警信息定位到指定设备
|
|
|
|
|
bjClick(item) {
|
|
|
|
|
if (this.bimModel == 2) {
|
|
|
|
|
if (item.build == 9) {
|
|
|
|
|
//辅楼
|
|
|
|
|
// this.tower = item.build;
|
|
|
|
|
// this.layer = item.floored;
|
|
|
|
|
clearDrawableContainer();
|
|
|
|
|
let id = "10000722317177.1065480";
|
|
|
|
|
// let id = bfHelper.disposeId(item.area, item.build, item.modelId);
|
|
|
|
|
this.addLabel(
|
|
|
|
|
id,
|
|
|
|
|
item.name,
|
|
|
|
|
item.status,
|
|
|
|
|
item.location,
|
|
|
|
|
item.dataNum
|
|
|
|
|
);
|
|
|
|
|
this.$refs.clickcp.ttActive = Number(item.build);
|
|
|
|
|
ttLookPipeline2(
|
|
|
|
|
equipmentCondition[0],
|
|
|
|
|
equipmentCopColors[0],
|
|
|
|
|
1,
|
|
|
|
|
"电",
|
|
|
|
|
equipmentCondition2[0]
|
|
|
|
|
);
|
|
|
|
|
setOpacityFun1(false);
|
|
|
|
|
} else {
|
|
|
|
|
clearDrawableContainer();
|
|
|
|
|
// let id = bfHelper.disposeId(item.area, item.build, item.modelId);
|
|
|
|
|
let id = "10000722320211.1253524";
|
|
|
|
|
let boundingBox = getBoxMessage(id);
|
|
|
|
|
this.addLabel(
|
|
|
|
|
id,
|
|
|
|
|
item.name,
|
|
|
|
|
item.status,
|
|
|
|
|
item.location,
|
|
|
|
|
item.dataNum,
|
|
|
|
|
item.warnMsg
|
|
|
|
|
);
|
|
|
|
|
zoomToBoundingBox(boundingBox, 40);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if (item.modelId == "") {
|
|
|
|
|
} else {
|
|
|
|
|
// 如果当前点击的是电箱 先清除所以标签
|
|
|
|
|
// this.tower = item.build;
|
|
|
|
|
// this.layer = item.floored;
|
|
|
|
|
clearDrawableContainer();
|
|
|
|
|
let id = disposeId(item.area, item.build, item.modelId);
|
|
|
|
|
this.addLabel(
|
|
|
|
|
id,
|
|
|
|
|
item.name,
|
|
|
|
|
item.status,
|
|
|
|
|
item.location,
|
|
|
|
|
item.dataNum
|
|
|
|
|
);
|
|
|
|
|
this.$refs.clickcp.active = commonValue.activeValue(
|
|
|
|
|
Number(item.build),
|
|
|
|
|
Number(item.floored)
|
|
|
|
|
);
|
|
|
|
|
this.$refs.clickcp.tower = commonValue.towerValue(item.build);
|
|
|
|
|
let camera = cameraPosition[Number(item.build) - 1];
|
|
|
|
|
window.sessionStorage.setItem("camera", JSON.stringify(camera));
|
|
|
|
|
mapUpdate(
|
|
|
|
|
require("../../../public/img/monitoring/mapviewer/electricity" +
|
|
|
|
|
Number(item.build) +
|
|
|
|
|
"b" +
|
|
|
|
|
Number(item.floored) +
|
|
|
|
|
"f.png"),
|
|
|
|
|
mapViewerCamera[Number(item.build) - 1][Number(item.floored) - 1]
|
|
|
|
|
.mapAnchors,
|
|
|
|
|
mapViewerCamera[Number(item.build) - 1][Number(item.floored) - 1]
|
|
|
|
|
.modelAnchors
|
|
|
|
|
);
|
|
|
|
|
lookPipeline2(
|
|
|
|
|
equipmentCondition[0],
|
|
|
|
|
equipmentCopColors[0],
|
|
|
|
|
Number(item.build) - 1,
|
|
|
|
|
Number(item.floored),
|
|
|
|
|
"电",
|
|
|
|
|
equipmentCondition2[0]
|
|
|
|
|
);
|
|
|
|
|
setOpacityFun(false);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 本月用电饼图
|
|
|
|
|
electroPie() {
|
|
|
|
|
var equipment = ["1#", "2#", "3#", "4#", "5#", "6#"];
|
|
|
|
|
var colorList = [
|
|
|
|
|
"#0055FF",
|
|
|
|
|
"#6369FF",
|
|
|
|
|
"#0089E6",
|
|
|
|
|
"#00A88F",
|
|
|
|
|
"#E88B41",
|
|
|
|
|
"#D2B210",
|
|
|
|
|
];
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
|
let myChart = this.$echarts.init(document.getElementById("electroPie"));
|
|
|
|
|
// 绘制图表
|
|
|
|
|
myChart.setOption(
|
|
|
|
|
{
|
|
|
|
|
title: [
|
|
|
|
|
{
|
|
|
|
|
text: this.curElectro.sumBuilding,
|
|
|
|
|
top: "35%",
|
|
|
|
|
left: "center",
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
color: "#07a7ff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: "kw·h",
|
|
|
|
|
top: "48%",
|
|
|
|
|
left: "center",
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
color: "#07a7ff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
legend: {
|
|
|
|
|
itemWidth: 11,
|
|
|
|
|
itemHeight: 11,
|
|
|
|
|
itemGap: 7,
|
|
|
|
|
bottom: "5%",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "rgba(239, 239, 239, 1.0)",
|
|
|
|
|
},
|
|
|
|
|
data: ["1#", "2#", "3#", "4#", "5#", "6#"],
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
bottom: "10%",
|
|
|
|
|
name: "用电比例",
|
|
|
|
|
type: "pie",
|
|
|
|
|
radius: ["40%", "60%"],
|
|
|
|
|
color: colorList,
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: "rgba(255, 255, 255, 1.0)",
|
|
|
|
|
formatter: "{c}%",
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
value: this.curElectro.firstBuildingPercent,
|
|
|
|
|
name: "1#",
|
|
|
|
|
type: equipment[0],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: this.curElectro.secondBuildingPercent,
|
|
|
|
|
name: "2#",
|
|
|
|
|
type: equipment[1],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: this.curElectro.thirdBuildingPercent,
|
|
|
|
|
name: "3#",
|
|
|
|
|
type: equipment[2],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: this.curElectro.forthBuildingPercent,
|
|
|
|
|
name: "4#",
|
|
|
|
|
type: equipment[3],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: this.curElectro.fifthBuildingPercent,
|
|
|
|
|
name: "5#",
|
|
|
|
|
type: equipment[4],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: this.curElectro.sixthBuildingPercent,
|
|
|
|
|
name: "6#",
|
|
|
|
|
type: equipment[5],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
true
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
// 塔台本月用电饼图
|
|
|
|
|
tataiElePie() {
|
|
|
|
|
var equipment = ["辅楼", "塔楼"];
|
|
|
|
|
var colorList = ["#6369ff", "#0089e7", "#00a88f"];
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
|
let myChart = this.$echarts.init(document.getElementById("tataiElePie"));
|
|
|
|
|
myChart.setOption(
|
|
|
|
|
{
|
|
|
|
|
title: [
|
|
|
|
|
{
|
|
|
|
|
text: this.curElectro.sumBuilding,
|
|
|
|
|
top: "35%",
|
|
|
|
|
left: "center",
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
color: "#07a7ff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: "kw·h",
|
|
|
|
|
top: "52%",
|
|
|
|
|
left: "center",
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
color: "#07a7ff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
legend: {
|
|
|
|
|
itemWidth: 11,
|
|
|
|
|
itemHeight: 11,
|
|
|
|
|
itemGap: 7,
|
|
|
|
|
bottom: "0%",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "rgba(239, 239, 239, 1.0)",
|
|
|
|
|
},
|
|
|
|
|
data: ["辅楼", "塔楼"],
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
bottom: "0",
|
|
|
|
|
name: "用电比例",
|
|
|
|
|
type: "pie",
|
|
|
|
|
radius: ["40%", "60%"],
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: function (params) {
|
|
|
|
|
return colorList[params.dataIndex];
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: "rgba(255, 255, 255, 1.0)",
|
|
|
|
|
formatter: "{c}%",
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
value: this.floorArray[0].percent,
|
|
|
|
|
name: "辅楼",
|
|
|
|
|
type: equipment[0],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: this.floorArray[1].percent,
|
|
|
|
|
name: "塔楼",
|
|
|
|
|
type: equipment[1],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
true
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 塔台历史用电
|
|
|
|
|
createTataihis() {
|
|
|
|
|
let myChart = this.$echarts.init(document.getElementById("tataiecharts"));
|
|
|
|
|
myChart.setOption(
|
|
|
|
|
{
|
|
|
|
|
color: ["#88deff", "#99bfff", "#318fee", "#01f1fc"],
|
|
|
|
|
legend: {
|
|
|
|
|
data: [
|
|
|
|
|
"南楼",
|
|
|
|
|
"北楼",
|
|
|
|
|
"塔楼",
|
|
|
|
|
{
|
|
|
|
|
icon: "circle",
|
|
|
|
|
name: "总量",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
right: "6%",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
itemWidth: 10,
|
|
|
|
|
itemHeight: 10,
|
|
|
|
|
},
|
|
|
|
|
tooltip: {},
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: this.tataiXdata,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
// interval:0
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#45617a",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#45617a",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
top: "25%",
|
|
|
|
|
bottom: "8%",
|
|
|
|
|
left: "6%",
|
|
|
|
|
right: "6%",
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: "南楼",
|
|
|
|
|
type: "bar",
|
|
|
|
|
stack: "value ",
|
|
|
|
|
data: this.sourthBuilding,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "北楼",
|
|
|
|
|
type: "bar",
|
|
|
|
|
stack: "value ",
|
|
|
|
|
data: this.northBuilding,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "塔楼",
|
|
|
|
|
type: "bar",
|
|
|
|
|
stack: "value ",
|
|
|
|
|
data: this.towerBuilding,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "总量",
|
|
|
|
|
type: "line",
|
|
|
|
|
data: this.sumBuilding,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
true
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.electricity {
|
|
|
|
|
|
|
|
|
|
// 本月用电
|
|
|
|
|
.instantElectro {
|
|
|
|
|
z-index: 99;
|
|
|
|
|
width: 878px;
|
|
|
|
|
height: 292px;
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/cur.png) no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 96px;
|
|
|
|
|
transition: all 0.5s;
|
|
|
|
|
bottom: 42px;
|
|
|
|
|
|
|
|
|
|
// 塔台本月用电
|
|
|
|
|
&.currentEle {
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/tataibac.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 730px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 顶部
|
|
|
|
|
.upTit {
|
|
|
|
|
padding: 0 30px 0 20px;
|
|
|
|
|
margin: 15px 0;
|
|
|
|
|
|
|
|
|
|
&.top {
|
|
|
|
|
margin: 25px 0 15px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tit-left {
|
|
|
|
|
.icon {
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 17px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tit1 {
|
|
|
|
|
margin: 0 5px;
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.use {
|
|
|
|
|
margin-top: -10px;
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
color: #ff8b2e;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.unit {
|
|
|
|
|
margin: 0 20px 0 5px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #ff8b2e;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tit2 {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #b6b6b6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compare {
|
|
|
|
|
margin: 0 5px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 9px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.use-unit {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tit-right {
|
|
|
|
|
color: white;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
|
|
|
|
|
.color {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.state2 {
|
|
|
|
|
background-color: #2cd52c;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.state3 {
|
|
|
|
|
background-color: #07a7ff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 底部
|
|
|
|
|
.down {
|
|
|
|
|
|
|
|
|
|
// 饼图
|
|
|
|
|
.pie {
|
|
|
|
|
width: 270px;
|
|
|
|
|
height: 210px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 楼栋用电情况
|
|
|
|
|
.towerUse {
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
&.tataitower {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
// justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.floorele {
|
|
|
|
|
width: 121px;
|
|
|
|
|
height: 179px;
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/floorbac.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
.floor_name {
|
|
|
|
|
padding: 12px 0px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #07e6ed;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.now_ele {
|
|
|
|
|
padding: 15px 0px;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.com_ele {
|
|
|
|
|
padding: 6px 0px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.last_ele {
|
|
|
|
|
padding: 8px 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #b6b6b6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.floorele:nth-of-type(2) {
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.towerUseBox {
|
|
|
|
|
width: 48%;
|
|
|
|
|
|
|
|
|
|
.towerIcon {
|
|
|
|
|
width: 44px;
|
|
|
|
|
height: 44px;
|
|
|
|
|
margin-right: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.center {
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
|
|
.echarts {
|
|
|
|
|
width: 140px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #b6b6b6;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 9px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.up {
|
|
|
|
|
color: #ff8b2e;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.down {
|
|
|
|
|
color: #2cd52c;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 设备概况
|
|
|
|
|
.box2 {
|
|
|
|
|
z-index: 99;
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/genbag.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 402px;
|
|
|
|
|
height: 450px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 150px;
|
|
|
|
|
transition: all 0.5s;
|
|
|
|
|
|
|
|
|
|
right: 40px;
|
|
|
|
|
|
|
|
|
|
&.tataigen {
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/genbac.png);
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
margin: 17px 0 0 17px;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 19px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.state {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
line-height: 17px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
|
|
.zc {
|
|
|
|
|
// padding-right: 36px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
// justify-content: flex-end;
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/normal.png) no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
width: 176px;
|
|
|
|
|
height: 78px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lx {
|
|
|
|
|
// padding-right: 36px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
// justify-content: flex-end;
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/guzhangbg.png) no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
width: 176px;
|
|
|
|
|
height: 78px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bj {
|
|
|
|
|
// padding-right: 36px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
// justify-content: flex-end;
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/beaconing.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 126px;
|
|
|
|
|
height: 78px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stateName {
|
|
|
|
|
margin: 5px 0 20px;
|
|
|
|
|
color: #2cd52c;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
|
|
|
|
.lx {
|
|
|
|
|
color: #ec9b28;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bj {
|
|
|
|
|
color: #d34951;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab_box {
|
|
|
|
|
width: 80%;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 25px;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
margin-left: 23px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
|
|
.tab_one {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab_two {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .item .is-dot {
|
|
|
|
|
background: red;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tit {
|
|
|
|
|
margin: 0 auto 6px;
|
|
|
|
|
width: 345px;
|
|
|
|
|
height: 34px;
|
|
|
|
|
line-height: 34px;
|
|
|
|
|
background-color: #07a7ff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: white;
|
|
|
|
|
|
|
|
|
|
&.tataitit {
|
|
|
|
|
background: rgb(34, 110, 196);
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
color: #1851ab;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 33.3%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.noBjxx {
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
margin: 2.5rem 0 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.warp {
|
|
|
|
|
height: 120px;
|
|
|
|
|
width: 345px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
height: 40px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #9d9d9d;
|
|
|
|
|
|
|
|
|
|
.alarm-alert {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: rgba(11, 34, 74, 0.8);
|
|
|
|
|
// display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: #07e6ed;
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 7px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 34px;
|
|
|
|
|
background-color: rgba($color: #0d318b, $alpha: 0.6);
|
|
|
|
|
|
|
|
|
|
&.tataicon {
|
|
|
|
|
background-color: rgba($color: #1f355c, $alpha: 1);
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
color: #1851ab;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
width: 33.3%;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: auto;
|
|
|
|
|
margin: 0 5px 0 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message {
|
|
|
|
|
flex: 1;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.data {
|
|
|
|
|
width: 33.3%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time {
|
|
|
|
|
width: 33.3%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item:hover {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.more {
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #07e6ed;
|
|
|
|
|
margin: 10px 27px 0 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 历史用电
|
|
|
|
|
.rightBox {
|
|
|
|
|
z-index: 99;
|
|
|
|
|
width: 471px;
|
|
|
|
|
height: 291px;
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/history.png) no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 991px;
|
|
|
|
|
transition: all 0.5s;
|
|
|
|
|
|
|
|
|
|
bottom: 42px;
|
|
|
|
|
|
|
|
|
|
&.tataihis {
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/tataihis.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 615px;
|
|
|
|
|
left: 844px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top1 {
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
|
|
|
|
|
&.tatai {
|
|
|
|
|
margin: 15px 0 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 17px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tit1 {
|
|
|
|
|
margin: 0 5px;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tit2 {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cut {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
padding-right: 30px;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
.cut_select {
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
color: #b9d6df;
|
|
|
|
|
width: 2.563rem;
|
|
|
|
|
height: 1.188rem;
|
|
|
|
|
background-color: rgba(31, 49, 99, 0.5);
|
|
|
|
|
border: 0.062rem solid #00bafe;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cut_select:hover {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
border-right: none;
|
|
|
|
|
border-top-left-radius: 5px;
|
|
|
|
|
border-bottom-left-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
border-top-right-radius: 5px;
|
|
|
|
|
border-bottom-right-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
color: white;
|
|
|
|
|
// box-shadow: rgb(7, 144, 235) 0px 0px 0.875rem inset;
|
|
|
|
|
background-color: #07a6ff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top2 {
|
|
|
|
|
margin: 20px 0 10px 0;
|
|
|
|
|
font-size: 1.125rem;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
|
|
&.selectdata {
|
|
|
|
|
/deep/ .el-date-editor--daterange.el-input__inner {
|
|
|
|
|
width: 395px !important;
|
|
|
|
|
background: #969db1;
|
|
|
|
|
border-color: #969db1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-range-input {
|
|
|
|
|
background: #969db1;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-date-editor .el-range-separator {
|
|
|
|
|
color: #506996;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time {
|
|
|
|
|
.btn {
|
|
|
|
|
color: #155eaa;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time {
|
|
|
|
|
flex: 1;
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
color: #07e6ed;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
margin-right: 0.3rem;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-date-editor--daterange.el-input__inner {
|
|
|
|
|
width: 260px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
margin-left: 1rem;
|
|
|
|
|
color: #fff;
|
|
|
|
|
width: 3.375rem;
|
|
|
|
|
height: 1.313rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-color: #07e6ed;
|
|
|
|
|
border-radius: 0.313rem;
|
|
|
|
|
border: 0.063rem solid #07e5ed;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom {
|
|
|
|
|
.right {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 170px;
|
|
|
|
|
|
|
|
|
|
.right_echarts {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_tit {
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #07e6ed;
|
|
|
|
|
padding-left: 35px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 设备列表
|
|
|
|
|
.tab {
|
|
|
|
|
z-index: 99;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 39px;
|
|
|
|
|
bottom: 41px;
|
|
|
|
|
width: 402px;
|
|
|
|
|
height: 342px;
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/newbg.png) no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
transition: all 0.8s;
|
|
|
|
|
|
|
|
|
|
.dev_name {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.tataigen {
|
|
|
|
|
background: url(../../../public/img/monitoring/electricity/genbac.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
margin: 1rem 0 2rem 1.25rem;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 16px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabBox {
|
|
|
|
|
border: 1px solid #07a7ff;
|
|
|
|
|
width: 21.563rem;
|
|
|
|
|
margin: 1rem auto 0;
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table__header-wrapper .has-gutter th {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table__header-wrapper .has-gutter th .cell {
|
|
|
|
|
line-height: 31px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-color: #07a7ff;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .tataitab .el-table__header-wrapper .has-gutter th .cell {
|
|
|
|
|
background: rgb(33, 110, 196);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .tataitab .el-table__header-wrapper .has-gutter th:nth-of-type(even) .cell {
|
|
|
|
|
color: rgb(31, 91, 180);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(odd) {
|
|
|
|
|
color: white;
|
|
|
|
|
background-color: rgba($color: #1e419d, $alpha: 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(even) {
|
|
|
|
|
background-color: rgba($color: #0d318b, $alpha: 1);
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .tataitab .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(odd) {
|
|
|
|
|
color: white;
|
|
|
|
|
background-color: rgba($color: #384c6f, $alpha: 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .tataitab .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(even) {
|
|
|
|
|
background-color: rgba($color: #1f355c, $alpha: 1);
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row td {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row td .cell {
|
|
|
|
|
display: flex;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
align-content: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__empty-block {
|
|
|
|
|
background-color: #3656ae;
|
|
|
|
|
height: 12rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table::before {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 分页
|
|
|
|
|
.pagination {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 15px;
|
|
|
|
|
bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pagination .el-pagination.is-background {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-pagination.is-background .btn-next,
|
|
|
|
|
/deep/ .el-pagination.is-background .btn-prev,
|
|
|
|
|
/deep/ .el-pagination.is-background .el-pager li {
|
|
|
|
|
min-width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-pagination__total {
|
|
|
|
|
height: 20px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
color: #07e6ed;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
