You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2139 lines
66 KiB
2139 lines
66 KiB
<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> |
|
<div v-else 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)" v-if="item.modelId != ''"> |
|
<img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" /> |
|
<span>查看详情</span> |
|
</p> |
|
<span v-if="item.confirmStatus == '0' && item.modelId != ''">|</span> |
|
<p @click="doCancelWarn(item)" v-if="item.confirmStatus == '0'"> |
|
<img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" /> |
|
<span>确认告警</span> |
|
</p> |
|
<span v-if="item.warnStatus == 1 && (item.modelId != '' || item.confirmStatus == '0')">|</span> |
|
<p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)"> |
|
<i class="el-icon-refresh-right" style="margin-right:10px;"></i> |
|
<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.warnStatus == 2" /> |
|
<img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else /> |
|
<span class="message" :style="{ color: item.warnStatus == 2 ? 'white' : 'red' }" |
|
v-text="item.name"></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.warnStatus == 2 ? 'white' : 'red' }">{{ item.warnContent |
|
}}</span> |
|
<span class=""></span> |
|
<span class="time" :style="{ color: item.warnStatus == 2 ? 'white' : 'red' }">{{ |
|
item.warnDate.substring(5, 16) |
|
}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
<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"> |
|
<div style="display:flex"> |
|
<img src="../../../public/img/monitoring/electricity/listIcon3.png" /> |
|
<span >设备列表</span> |
|
</div> |
|
|
|
<!-- <div class="more_btn" style="margin-right:34px;cursor: pointer;" @click="clickMore">更多</div> --> |
|
</div> |
|
<div class="tabBox" id="eletric_box"> |
|
<el-table @row-click="tableClick" :data="tableData" style="width: 100%" @row-contextmenu="tableContext" |
|
: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> |
|
<el-dialog |
|
title="设备详情" |
|
:visible.sync="dialogVisible" |
|
width="30%" |
|
:append-to-body="true" |
|
:before-close="handleClose"> |
|
<span>设备类型：电力</span> |
|
<div> |
|
<div class="title" style="font-size: 18px;padding-bottom: 10px;border-bottom: 1px dashed;margin-top: 10px;">通讯地址</div> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">IP地址：192.168.20.101</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">端口号：502</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">数据偏移量：12</span> |
|
</div> |
|
<div> |
|
<div class="title" style="font-size: 18px;padding-bottom: 10px;border-bottom: 1px dashed;margin-top: 10px;">设备编码</div> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">模型：业务区</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">楼栋：1号楼</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">楼层：01</span> |
|
</div> |
|
<div> |
|
<div class="title" style="font-size: 18px;padding-bottom: 10px;border-bottom: 1px dashed;margin-top: 10px;">基础配置</div> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">编码：10100000001</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">名称：1号楼B1</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">简称：净水器</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">使用时间：净水器</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">具体位置：WH2</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">固定资产编号：</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">维保人：</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">维保电话：</span> |
|
<span style="display: inline-block;width: 33%;margin: 10px 0;">维保时间：</span> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="dialogVisible = false">取 消</el-button> |
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</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,//关闭报警 |
|
recoveryWarn,//恢复告警 |
|
} 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 { |
|
dialogVisible:false, |
|
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(); |
|
// let dom = document.getElementById('eletric_box'); |
|
// dom.addEventListener('contextmenu', (event)=> { |
|
// console.log(event) |
|
// event.preventDefault(); // 阻止默认菜单 |
|
// // const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0100' } }); |
|
// // window.open(routerUrl.href, "_blank"); |
|
// }); |
|
}, |
|
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(false,0.3); |
|
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: { |
|
// 点击更多按钮 |
|
clickMore(){ |
|
const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0100' } }); |
|
window.open(routerUrl.href, "_blank"); |
|
}, |
|
//确认告警 - 重新查询告警列表 |
|
doCancelWarn(item) { |
|
getCancelWarn(item.id).then((res) => { |
|
// this.getElectricWarnList(); |
|
item.confirmStatus = 1; |
|
}) |
|
}, |
|
//恢复告警 |
|
doRecoveryWarn(item) { |
|
recoveryWarn(item.id).then((res) => { |
|
// this.getFiredWarnList(); |
|
item.warnStatus = 2; |
|
}) |
|
}, |
|
//跳转历史告警列表 |
|
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); |
|
}, |
|
tableContext(row,column, event){ |
|
event.preventDefault(); // 阻止默认菜单 |
|
const routerUrl = this.$router.resolve({ path: '/equipment/index', query: {code: row.code } }); |
|
window.open(routerUrl.href, "_blank"); |
|
// this.dialogVisible = true |
|
// console.log(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-y: auto; |
|
|
|
.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; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
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>
|
|
|