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.
1810 lines
58 KiB
1810 lines
58 KiB
<template> |
|
<!-- 水 --> |
|
<div v-if="waterState" class="water"> |
|
<!-- 各楼栋楼层切换 --> |
|
<!-- <clickCp :bimModel="bimModel" sbType="水" ref="clickcp"></clickCp> --> |
|
<!-- 返回主视角 --> |
|
<backHome :bimModel="bimModel" type="水" :waterModelOn="onList" :waterModelOff="offList" :waterModelAlarm="bjList" |
|
dom=".mapDom"></backHome> |
|
<div style="position: absolute; left: 84px; top: 20px" v-if="bimModel == 1"> |
|
<div class="build-message" style=" |
|
color: white; |
|
text-align: center; |
|
border: 1px solid rgb(0, 187, 255); |
|
width: 110px; |
|
margin: 0 auto; |
|
border-radius: 5px; |
|
padding: 5px 0; |
|
"> |
|
园区 |
|
</div> |
|
<div class="mapDom" style="width: 250px; height: 180px; margin-top: 20px"></div> |
|
</div> |
|
<!-- 本月用水 --> |
|
<div class="instantElectro" :style="{ |
|
backgroundImage: |
|
'url(' + |
|
require(bimModel == 1 |
|
? '../../../public/img/monitoring/electricity/cur.png' |
|
: '../../../public/img/monitoring/electricity/tataibac.png') + |
|
')', |
|
}"> |
|
<!-- 顶部 --> |
|
<div class="upTit flex-center-between"> |
|
<div class="tit-left flex-center"> |
|
<img class="icon" src="../../../public/img/monitoring/water/waterIcon.png" /> |
|
<span class="tit1">本月用水</span> |
|
<span class="use">{{ curWater.dataNum }}</span> |
|
<span class="unit">m³</span> |
|
<span class="tit2">较上月</span> |
|
<img v-if="curWater.dataNum - curWater.dataNumPre >= 0" class="compare" |
|
src="../../../public/img/monitoring/electricity/up.png" /> |
|
<img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" /> |
|
<span :style="{ |
|
color: |
|
curWater.dataNum - curWater.dataNumPre >= 0 |
|
? '#ff8b2e' |
|
: '#2cd52c', |
|
}" class="use-unit">{{ Math.abs(curWater.dataNum - curWater.dataNumPre) }}m³</span> |
|
</div> |
|
</div> |
|
<!-- 底部 --> |
|
<div class="down flex"> |
|
<!-- 饼图 --> |
|
<div class="pie" id="waterElectroPie"></div> |
|
<div class="rightMessage flex-center-between" style="justify-content: flex-start"> |
|
<div v-for="(item, index) in curWater.dataList" :key="index" class="messageBox"> |
|
<div class="title">{{ item.name }}</div> |
|
<div class="num" style="color: white">{{ item.dataNum }}</div> |
|
<div class="lastMonthNum">上月:{{ item.dataNumPre }}m³</div> |
|
<div class="lastMonth">较上月</div> |
|
<div class="flex-center compareLastMonth"> |
|
<img v-if="item.dataNum - item.dataNumPre >= 0" class="compare" |
|
src="../../../public/img/monitoring/electricity/up.png" /> |
|
<img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" /> |
|
<span :style="{ |
|
color: |
|
item.dataNum - item.dataNumPre >= 0 ? '#ff8b2e' : '#2cd52c', |
|
}" class="use-unit">{{ Math.abs(item.dataNum - item.dataNumPre) }}m³</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 历史用水 --> |
|
<div class="rightBox" :style="{ |
|
backgroundImage: |
|
'url(' + |
|
require(bimModel == 1 |
|
? '../../../public/img/monitoring/water/accumulated.png' |
|
: '../../../public/img/monitoring/electricity/tataihis.png') + |
|
')', |
|
}"> |
|
<div class="top flex-center-between"> |
|
<div class="title flex-center"> |
|
<img class="icon" src="../../../public/img/monitoring/water/waterIcon.png" /> |
|
<span>历史用水统计</span> |
|
<span class="dw">单位 (m³)</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="bottom flex-center"> |
|
<div v-if="bimModel == 1" class="left"> |
|
<div class="item flex-center" v-for="(item, index) in historyWater"> |
|
<div class="tit" style="font-size: 12px; margin-right: 8px"> |
|
{{ item.name }} |
|
</div> |
|
<div class="number">{{ item.dataNum }}m³</div> |
|
</div> |
|
</div> |
|
<div v-else class="left2"> |
|
<div class="item flex-center" v-for="(item, index) in historyWater"> |
|
<div class="tit">{{ item.name }}</div> |
|
<div class="number">{{ item.dataNum }}m³</div> |
|
</div> |
|
</div> |
|
<div class="rightBox2"> |
|
<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 class="right"> |
|
<echarts ref="echarts"></echarts> |
|
</div> |
|
</div> |
|
</div> |
|
</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 class="bj flex-center" style="font-family: fantasy"> |
|
<span style="margin-left: 72px">{{ listData.warnEventEquipNumber }}</span> |
|
</div> |
|
</div> |
|
<div class="stateName flex-center-center"> |
|
<span class="zc span_box">正常</span> |
|
<span class="lx span_box">设备告警</span> |
|
<span class="bj span_box">告警事件</span> |
|
</div> |
|
<div class="tab_box"> |
|
<div class="tab_one" @click="clickAlarm(1)" :style="{ color: activeTab == 1 ? '#07E6ED' : '#fff' }"> |
|
<el-badge :is-dot="isAlarm" class="item">设备告警</el-badge><span |
|
style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEquipWarnNumber }})</span> |
|
</div> |
|
<div class="tab_one tab_two" @click="clickAlarm(2)" :style="{ color: activeTab == 2 ? '#07E6ED' : '#fff' }"> |
|
<el-badge :is-dot="isSafe" class="item">告警事件</el-badge><span |
|
style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEventWarnMumber }})</span> |
|
</div> |
|
</div> |
|
<div class="flex-center tit" :class="bimModel == 2 ? 'tataitit' : ''"> |
|
<p>设备名称</p> |
|
<p>报警信息</p> |
|
<p>报警时间</p> |
|
</div> |
|
<div v-if=" |
|
JSON.stringify(listData) != '{}' && |
|
listData.warnEquipList && |
|
listData.warnEquipList.length == 0 && |
|
activeTab == 1 |
|
" class="noBjxx"> |
|
暂无设备告警信息 |
|
</div> |
|
<div v-else-if=" |
|
JSON.stringify(listData) != '{}' && |
|
listData.warnEventList && |
|
listData.warnEventList.length == 0 && |
|
activeTab == 2 |
|
" class="noBjxx"> |
|
暂无告警事件信息 |
|
</div> |
|
<div v-else class="warp"> |
|
<div v-if="activeTab == 1" class="item flex-center" v-for="(item, index) in listData.warnEquipList" |
|
:key="'warnEquip_' + index" @mouseenter="showAlarkAlert(item, index, 0)" style="position: relative" |
|
@mouseleave="closeAlarkAlert(item, index, 0)"> |
|
<div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-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 v-if="item.confirmStatus == '0'" @click="doCancelWarn(item)"> |
|
<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' : item.warnStatus == 1 ? '#ff000' : 'white', }" |
|
v-text="item.name"></span> |
|
</div> |
|
<span class="data" :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{ item.warnContent |
|
}}</span> |
|
<span class="time" :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{ |
|
item.warnDate.substring(5, 16) |
|
}}</span> |
|
</div> |
|
</div> |
|
<div v-else class="item flex-center" v-for="(item, index) in listData.warnEventList" :key="'warnEvent+' + index" |
|
@mouseenter="showAlarkAlert(item, index, 1)" style="position: relative" |
|
@mouseleave="closeAlarkAlert(item, index, 1)"> |
|
<div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-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 v-if="item.confirmStatus == '0'" @click="doCancelWarn(item)"> |
|
<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"> |
|
<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" v-text="item.name" |
|
:style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }"></span> |
|
</div> |
|
<span class="data" :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{ item.warnContent |
|
}}</span> |
|
<span class="time" :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{ |
|
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="tab" :class="bimModel == 2 ? 'tataigen' : ''" > |
|
<div class="title flex-center"> |
|
<img src="../../../public/img/monitoring/electricity/listIcon3.png" /> |
|
<span id="water_box">设备列表</span> |
|
</div> |
|
<div class="tabBox"> |
|
<el-table @row-click="tableClick" :data="tableData" style="width: 100%" height="230px" @row-contextmenu="tableContext" |
|
:class="bimModel == 2 ? 'tataitab' : ''"> |
|
<el-table-column label="设备名称" width="130"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center dev_name" style="font-size: 13px; cursor: pointer"> |
|
<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 |
|
? 'white' |
|
: scope.row.status == 90001 |
|
? '#a5bbe5' |
|
: '#ff0000', |
|
}">{{ scope.row.name }}</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="设备位置" style="max-width: 180px"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center dev_name" style=" |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
cursor: pointer; |
|
"> |
|
<span style=" |
|
padding-left: 10px; |
|
font-size: 13px; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
" :style="{ |
|
color: |
|
scope.row.status == 90000 |
|
? 'white' |
|
: scope.row.status == 90001 |
|
? '#a5bbe5' |
|
: '#ff0000', |
|
}" :title="scope.row.location">{{ scope.row.location }}</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="设备状态"> |
|
<template slot-scope="scope"> |
|
<div :style="{ |
|
color: |
|
scope.row.status == 90000 |
|
? 'white' |
|
: scope.row.status == 90001 |
|
? '#a5bbe5' |
|
: '#ff0000', |
|
}" class="flex-center-center" style="font-size: 13px; cursor: pointer"> |
|
{{ scope.row.statusName }} |
|
</div> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<!-- 分页 --> |
|
<div class="pagination"> |
|
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="current" :page-size="5" |
|
layout="total, prev, pager, next" :total="tableData.length"> |
|
</el-pagination> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import * as bfHelper from "../../util/bfHelper"; |
|
import * as commonValue from "../../util/commonValue"; |
|
import echarts from "./echarts1"; |
|
import clickCp from "./clickCp"; |
|
import { |
|
// 业务区 |
|
getYwqWaterLeft, //本月用水情况 |
|
getYwqWaterRight, //历史用水统计 |
|
getWaterList, |
|
getWaterMeterData, |
|
getWaterWarnList, //报警列表 |
|
getCancelWarn, //关闭报警 |
|
recoveryWarn,//恢复告警 |
|
} from "@/api/garden/monitoring"; |
|
import backHome from "./backHome"; |
|
export default { |
|
props: { |
|
waterState: { |
|
type: Boolean, |
|
}, |
|
bimModel: { |
|
type: Number, |
|
}, |
|
}, |
|
components: { |
|
echarts, |
|
clickCp, |
|
backHome, |
|
}, |
|
data() { |
|
return { |
|
current: 1, //当前页 |
|
size: 5, //每页数量 |
|
total: 14, //总条目数 |
|
tableData: [], //设备列表 |
|
listData: {}, //报警信息 |
|
curWater: {}, //本月用水 |
|
historyWater: {}, //历史用水统计 |
|
type: 2, //日/月 |
|
onLineEquip: null, |
|
offLineEquip: null, |
|
value1: [], //选择日期 |
|
tower: null, |
|
layer: null, |
|
isAlarm: false, //是否有故障报警 |
|
isSafe: false, //是否有故障报警 |
|
alarmTotal: 0, //故障报警个数 |
|
onList: [], //在线的设备 |
|
offList: [], //离线的设备 |
|
bjList: [], //报警的设备 |
|
activeTab: 1, |
|
}; |
|
}, |
|
created() { |
|
this.getData(); |
|
}, |
|
beforeDestroy() { |
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
}, |
|
mounted() { |
|
let dom = document.getElementById('water_box'); |
|
dom.addEventListener('contextmenu', (event)=> { |
|
event.preventDefault(); // 阻止默认菜单 |
|
const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0200' } }); |
|
window.open(routerUrl.href, "_blank"); |
|
}); |
|
this.getNavigationMap(); |
|
}, |
|
watch: { |
|
bimModel: { |
|
handler(newVal, oldVal) { |
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
this.getData(); |
|
}, |
|
}, |
|
//模型是否加载完成监听 |
|
"$store.state.bfHelperState.bfState": { |
|
immediate: true, |
|
handler(newval, olval) { |
|
// 模型恢复全部状态 |
|
bfHelper.resetStatus(2); |
|
if (newval) { |
|
if (newval == 1) { |
|
// 查看管线 |
|
if (this.bimModel == 1) { |
|
setTimeout(() => { |
|
this.setTowerWater(); |
|
}, 300) |
|
bfHelper.lookEquipmentCop("水"); |
|
bfHelper.setOpacityFun(); |
|
this.getNavigationMap(); |
|
bfHelper.setCameraStatus({ |
|
aspect: 1.889763779527559, |
|
coordinateSystem: "world", |
|
far: 960464.7787185954, |
|
fov: 45, |
|
name: "persp", |
|
near: 105041.57557288553, |
|
position: { |
|
x: 114923.08877241895, |
|
y: -391542.9803033385, |
|
z: 219845.7809478254 |
|
}, |
|
target: { |
|
x: -8729.420142852026, |
|
y: 863922.0428858905, |
|
z: -496665.6824418152 |
|
}, |
|
up: { |
|
x: -0.048407478040169157, |
|
y: 0.4914893345691443, |
|
z: 0.8695372045373162 |
|
}, |
|
version: 1, |
|
zoom: 1 |
|
}); |
|
} else { |
|
setTimeout(() => { |
|
this.setTowerWater(); |
|
}, 300) |
|
bfHelper.TtLookEquipmentCop("水"); |
|
bfHelper.setOpacityFun1(); |
|
this.getNavigationMap(); |
|
bfHelper.setCameraStatus({ |
|
aspect: 1.889763779527559, |
|
coordinateSystem: "world", |
|
far: 454282.4723672335, |
|
fov: 45, |
|
name: "persp", |
|
near: 58.40582500438439, |
|
position: { |
|
x: -49489.96254567479, |
|
y: -573828.9828452667, |
|
z: 24494.430089748876 |
|
}, |
|
target: { |
|
x: -30486.414787489626, |
|
y: 324405.89707957854, |
|
z: 10522.870646587355 |
|
}, |
|
up: { |
|
x: 0.0003288926028793064, |
|
y: 0.015545622356942871, |
|
z: 0.9998791054198458 |
|
}, |
|
version: 1, |
|
zoom: 1 |
|
}); |
|
// 查看管线 |
|
// window.sessionStorage.setItem( |
|
// "ttcamera", |
|
// JSON.stringify(bfHelper.getCameraStatus()) |
|
// ); |
|
// let ttbuild = sessionStorage.getItem("ttbuild"); |
|
// if (ttbuild) { |
|
// if (ttbuild == 20) { |
|
// //园区 |
|
// bfHelper.TtLookEquipmentCop("水"); |
|
// setTimeout(() => { |
|
// this.setTowerWater(); |
|
// }, 300); |
|
// } else if (ttbuild == 0) { |
|
// //塔楼 |
|
// setTimeout(() => { |
|
// this.setTowerWater("08"); |
|
// this.$refs.clickcp.ttActive = 0; |
|
// }, 300); |
|
// bfHelper.ttLookPipeline2( |
|
// bfHelper.equipmentCondition[1], |
|
// bfHelper.equipmentCopColors[1], |
|
// 0, |
|
// "水", |
|
// bfHelper.equipmentCondition2[3] |
|
// ); |
|
// } else if (ttbuild == 1) { |
|
// //辅楼1楼 |
|
// setTimeout(() => { |
|
// this.setTowerWater("09", "01"); |
|
// this.$refs.clickcp.ttActive = 1; |
|
// }, 300); |
|
// bfHelper.ttLookPipeline2( |
|
// bfHelper.equipmentCondition[1], |
|
// bfHelper.equipmentCopColors[1], |
|
// 1, |
|
// "水", |
|
// bfHelper.equipmentCondition2[3] |
|
// ); |
|
// } else if (ttbuild == 2) { |
|
// //辅楼1楼 |
|
// setTimeout(() => { |
|
// this.setTowerWater("09", "02"); |
|
// this.$refs.clickcp.ttActive = 2; |
|
// }, 300); |
|
// bfHelper.ttLookPipeline2( |
|
// bfHelper.equipmentCondition[1], |
|
// bfHelper.equipmentCopColors[1], |
|
// 2, |
|
// "水", |
|
// bfHelper.equipmentCondition2[3] |
|
// ); |
|
// } else if (ttbuild == 3) { |
|
// //辅楼1楼 |
|
// setTimeout(() => { |
|
// this.setTowerWater("09"); |
|
// this.$refs.clickcp.ttActive = 3; |
|
// }, 300); |
|
// bfHelper.ttLookPipeline2( |
|
// bfHelper.equipmentCondition[1], |
|
// bfHelper.equipmentCopColors[1], |
|
// 3, |
|
// "水", |
|
// bfHelper.equipmentCondition2[3] |
|
// ); |
|
// } |
|
// } else { |
|
// // 查看管线 |
|
// bfHelper.TtLookEquipmentCop("水"); |
|
// bfHelper.setOpacityFun1(); |
|
// } |
|
} |
|
} |
|
} |
|
}, |
|
}, |
|
}, |
|
beforeDestroy() { }, |
|
methods: { |
|
//确认告警 - 重新查询告警列表 |
|
doCancelWarn(item) { |
|
getCancelWarn(item.id).then((res) => { |
|
// this.getWaterWarnList(); |
|
item.confirmStatus = 1; |
|
}); |
|
}, |
|
//恢复告警 |
|
doRecoveryWarn(item) { |
|
recoveryWarn(item.id).then((res) => { |
|
item.warnStatus = 2; |
|
}) |
|
}, |
|
//跳转历史告警列表 |
|
goMoreWarnList() { |
|
// this.$router.push({ path: '/equipment/warnHistory' }); |
|
const routerUrl = this.$router.resolve({ |
|
path: "/equipment/warnHistory", |
|
query: { classCode: "0200", area: this.bimModel }, |
|
}); |
|
window.open(routerUrl.href, "_blank"); |
|
}, |
|
// 报警记录-20221031改版 |
|
getWaterWarnList() { |
|
getWaterWarnList({ |
|
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; |
|
} |
|
for (let i = 0; i < this.listData.warnEventList.length; i++) { |
|
this.listData.warnEventList[i].showAlert = false; |
|
} |
|
}); |
|
}, |
|
showAlarkAlert(item, index, key) { |
|
//鼠标悬停在设备概况列表里出现查看详情和确认告警 |
|
item.showAlert = true; |
|
if (key == 0) { |
|
this.listData.warnEventList.splice(index, 1, item); |
|
} else { |
|
this.listData.warnEquipList.splice(index, 1, item); |
|
} |
|
}, |
|
closeAlarkAlert(item, index, key) { |
|
item.showAlert = false; |
|
if (key == 0) { |
|
this.listData.warnEventList.splice(index, 1, item); |
|
} else { |
|
this.listData.warnEquipList.splice(index, 1, item); |
|
} |
|
}, |
|
clickAlarm(item) { |
|
this.activeTab = item; |
|
}, |
|
getNavigationMap() { |
|
commonValue.getNavigationMap("water"); |
|
}, |
|
// 获取数据集合 |
|
getData() { |
|
this.getCurWater(); //本月用水 |
|
this.getHistoryWater(); //历史用水统计 |
|
this.getEquipList(); |
|
this.getWaterWarnList(); //告警列表 |
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
this.setInterval = setInterval(() => { |
|
this.getCurWater(); //本月用水 |
|
this.getHistoryWater(); //历史用水统计 |
|
this.getEquipList(); |
|
this.getWaterWarnList(); //告警列表 |
|
}, 3600000); |
|
}, |
|
// 接收子组件当前点击楼号 |
|
setTowerWater(i, j) { |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
this.tower = i; //楼 |
|
this.layer = j; //层 |
|
this.getEquipList(); //设备列表和设备状况 |
|
this.getWaterWarnList(); //告警列表 |
|
if (this.bimModel == 1) { |
|
commonValue.getUpdateMap("water", i, j); |
|
} |
|
}, |
|
onClick() { |
|
bfHelper.onClick((data) => { |
|
for (let i = 0; i < this.tableData.length; i++) { |
|
if (data.elementId == this.tableData[i].modelId) { |
|
let id = bfHelper.disposeId( |
|
this.bimModel, |
|
this.tableData[i].build, |
|
this.tableData[i].modelId |
|
); |
|
this.addLabel( |
|
id, |
|
this.tableData[i].name, |
|
this.tableData[i].status, |
|
this.tableData[i].location, |
|
this.tableData[i].dataNum, |
|
this.tableData[i].status == 90001 ? "离线" : "正常" |
|
); |
|
} |
|
} |
|
}); |
|
}, |
|
|
|
// 表格某行被点击 |
|
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) |
|
}, |
|
addWaterLabel() { |
|
//添加水表标签 |
|
setTimeout(() => { |
|
this.addWaterLabelContent(); |
|
}, 300); |
|
let bgImg1 = require("../../../public/img/monitoring/electricity/customTag1-1.png"); |
|
let bgImg2 = require("../../../public/img/monitoring/electricity/offline2.png"); |
|
let bgImg3 = require("../../../public/img/monitoring/electricity/customTag3-1.png"); |
|
let lineImg1 = require("../../../public/img/monitoring/electricity/customTag1.png"); |
|
let lineImg2 = require("../../../public/img/monitoring/electricity/offline2_2.png"); |
|
let lineImg3 = require("../../../public/img/monitoring/electricity/customTag3.png"); |
|
window.addEventListener("click", (e) => { |
|
if (e.target.id.indexOf("watermeter") != -1) { |
|
let position = bfHelper.getBoxMessage( |
|
e.target.id.substring(10), |
|
true |
|
).max; |
|
getWaterMeterData(this.bimModel, e.target.id.substring(25)).then( |
|
(res) => { |
|
const data = res.data.data; |
|
let content; |
|
if (data.status == 90000) { |
|
//正常状态 |
|
content = this.labelContent( |
|
bgImg1, |
|
lineImg1, |
|
e.target.id.substring(10), |
|
data.status, |
|
data.name, |
|
data.location, |
|
"正常", |
|
data.dataNum |
|
); |
|
} else if (data.status == 90001) { |
|
//离线状态 |
|
content = this.labelContent( |
|
bgImg2, |
|
lineImg2, |
|
e.target.id.substring(10), |
|
data.status, |
|
data.name, |
|
data.location, |
|
"离线", |
|
data.dataNum |
|
); |
|
} else { |
|
//离线状态 |
|
content = this.labelContent( |
|
bgImg3, |
|
lineImg3, |
|
e.target.id.substring(10), |
|
data.status, |
|
data.name, |
|
data.location, |
|
"离线", |
|
data.dataNum |
|
); |
|
} |
|
bfHelper.clearTags(); |
|
bfHelper.customTag(position, null, content); |
|
let boundingBox = bfHelper.getBoxMessage( |
|
e.target.id.substring(10) |
|
); |
|
bfHelper.zoomToBoundingBox(boundingBox, 20); |
|
// bfHelper.zoomToBoundingBox(boundingBox,2); |
|
} |
|
); |
|
} |
|
if (e.target.id.indexOf("waterclosecha") != -1) { |
|
bfHelper.clearTags(); |
|
this.addWaterLabelContent(); |
|
} |
|
}); |
|
}, |
|
addWaterLabelContent() { |
|
let img1 = require("../../../public/img/monitoring/electricity/water-normal.png"); |
|
let img2 = require("../../../public/img/monitoring/electricity/water-off.png"); |
|
let img3 = require("../../../public/img/monitoring/electricity/water-alarm.png"); |
|
for (let i = 0; i < this.onList.length; i++) { |
|
let zb = bfHelper.getBoxMessage(this.onList[i], true).max; |
|
bfHelper.customTag(zb, null, this.labelContent1(img1, this.onList[i])); |
|
} |
|
for (let j = 0; j < this.offList.length; j++) { |
|
let zb = bfHelper.getBoxMessage(this.offList[j], true).max; |
|
if (this.offList[j]) |
|
bfHelper.customTag( |
|
zb, |
|
null, |
|
this.labelContent1(img2, this.offList[j]) |
|
); |
|
} |
|
for (let k = 0; k < this.bjList.length; k++) { |
|
let zb = bfHelper.getBoxMessage(this.bjList[k], true).max; |
|
if (this.bjList[k]) |
|
bfHelper.customTag( |
|
zb, |
|
null, |
|
this.labelContent1(img3, this.bjList[k]) |
|
); |
|
} |
|
}, |
|
labelContent(img, img1, id, type, name, location, msg, dataNum) { |
|
//图标标签 |
|
// console.log(msg) |
|
let content = `<div class="leadTips" style="transform: translateY(-72px);"> |
|
<div style="display: flex;width:max-content;position:relative"> |
|
<img src="${require("../../../public/img/monitoring/closecha.png")}" style="position:absolute;top:-73px;right:0;width:27px;" id="waterclosecha${id}"/> |
|
<img src="${img1}" style="width:87px;height:53px;"/> |
|
<div style="margin-top: -42px;"> |
|
<div style="width: 185px;height: 46px;background: url('${img}');"> |
|
<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: 13px;color:${type == 90000 ? "white" : type == 90001 ? "silver" : "red" |
|
}">${msg}</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: 13px;">${location}</span> |
|
</div> |
|
<div style="display:${type == 90000 ? "flex" : "none" |
|
};justify-content: space-between;" > |
|
<div style="padding: 5px 0;display: flex;align-items: center;justify-content: center;"> |
|
<span style="opacity: 0.5;font-size: 12px;">累计流量:</span> |
|
</div> |
|
<div style="padding: 5px 0;display: flex;align-items: center;justify-content: center;"> |
|
<div style="position:relative;width: 52px;height: 63px;background: url('${require("../../../public/img/monitoring/water/bpBg.png")}');"> |
|
<div style="position:absolute;left: 50%;top: 50%;transform: translate(-50%, -40%);"> |
|
<div style="width:100%;text-align: center;color: #e48a1f;font-size: 18px;">${dataNum == "" ? "0" : dataNum |
|
}</div> |
|
<div style="opacity: 0.6;color: #ffffff;font-size: 12px;text-align:center">m³</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div>`; |
|
return content; |
|
}, |
|
labelContent1(img, id) { |
|
//图标标签 |
|
let content = `<div class="leadTips" style="transform: translateY(-40px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img id='watermeter${id}' class = 'montorImg' src="${img}" style="width:35px;height:35px;"/> |
|
</div> |
|
</div>`; |
|
return content; |
|
}, |
|
// 添加标签 |
|
addLabel(objectId, name, type, location, statusName, dataNum, msg) { |
|
// 构件id/设备名称/设备状态/设备位置/累计电量 |
|
// bfHelper.setColor('#ff761a',[objectId]) |
|
// 获取当前点击坐标 |
|
let zb = bfHelper.getBoxMessage(objectId, true); |
|
// console.log(bfHelper.getBoxMessage('10000730045680.1088835', true)) |
|
//引线标签的顶点 |
|
let position = { |
|
x: zb.max.x, |
|
y: zb.max.y, |
|
z: zb.max.z, |
|
}; |
|
|
|
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" |
|
: type == 90001 |
|
? "../../../public/img/monitoring/electricity/customTag2.png" |
|
: "../../../public/img/monitoring/electricity/customTag3.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" |
|
: type == 90001 |
|
? "../../../public/img/monitoring/electricity/customTag2-1.png" |
|
: "../../../public/img/monitoring/electricity/customTag3-1.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: 13px;color:${type == 90000 ? "white" : type == 90001 ? "silver" : "red" |
|
}">${statusName ? statusName : msg}</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: 13px;">${location}</span> |
|
</div> |
|
<div style="display:${type == 90000 ? "flex" : "none" |
|
};justify-content: space-between;"> |
|
<div style="padding: 5px 0;display: flex;align-items: center;justify-content: center;"> |
|
<span style="opacity: 0.5;font-size: 12px;">累计流量:</span> |
|
</div> |
|
<div style="padding: 5px 0;display: flex;align-items: center;justify-content: center;"> |
|
<div style="position:relative;width: 52px;height: 63px;background: url('${require("../../../public/img/monitoring/water/bpBg.png")}');"> |
|
<div style="position:absolute;left: 50%;top: 50%;transform: translate(-50%, -40%);"> |
|
<div style="width:100%;text-align: center;color: #e48a1f;font-size: 18px;">${dataNum == "" ? "0" : dataNum |
|
}</div> |
|
<div style="opacity: 0.6;color: #ffffff;font-size: 12px;text-align:center">m³</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div>`; |
|
bfHelper.customTag(position, null, content); |
|
}, |
|
// 点击报警信息定位到指定设备 |
|
bjClick(item) { |
|
// console.log(item) |
|
// 如果当前点击的是电箱 先清除所以标签 |
|
bfHelper.clearDrawableContainer(); |
|
let id = bfHelper.disposeId(item.area, item.build, item.modelId); |
|
let boundingBox = bfHelper.getBoxMessage(id); |
|
this.addLabel( |
|
id, |
|
item.name, |
|
item.status, |
|
item.location, |
|
item.status == 90000 ? "正常" : "离线", |
|
item.dataNum, |
|
item.warnContent |
|
); |
|
bfHelper.zoomToBoundingBox(boundingBox, 20); |
|
}, |
|
// 本月用电饼图 |
|
electroPie() { |
|
// var equipment = ['水表1', '水表2', '水表3']; |
|
var colorList = ["#00A88F", "#E88B41", "#D2B210"]; |
|
// 基于准备好的dom，初始化echarts实例 |
|
let myChart = this.$echarts.init( |
|
document.getElementById("waterElectroPie") |
|
); |
|
let valueList = []; |
|
let lengendList = []; |
|
for (let i = 0; i < this.curWater.dataList.length; i++) { |
|
valueList.push({ |
|
value: this.curWater.dataList[i].percent, |
|
name: this.curWater.dataList[i].name, |
|
color: colorList[i], |
|
// type:equipment[index] |
|
}); |
|
lengendList.push(this.curWater.dataList[i].name); |
|
} |
|
// 绘制图表 |
|
myChart.setOption( |
|
{ |
|
title: [ |
|
{ |
|
text: this.curWater.dataNum, |
|
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: 15, |
|
bottom: "0%", |
|
textStyle: { |
|
color: "rgba(239, 239, 239, 1.0)", |
|
}, |
|
data: lengendList, |
|
}, |
|
series: [ |
|
{ |
|
// bottom: "25%", |
|
name: "用水比例", |
|
type: "pie", |
|
radius: ["40%", "60%"], |
|
color: colorList, |
|
label: { |
|
normal: { |
|
color: "rgba(255, 255, 255, 1.0)", |
|
formatter: "{c}%", |
|
show: true, |
|
}, |
|
}, |
|
|
|
data: valueList, |
|
}, |
|
], |
|
}, |
|
true |
|
); |
|
}, |
|
// 添加水表外部构件 |
|
addSb() { |
|
if (this.bimModel == 1) { |
|
// 添加水表外部构件 |
|
bfHelper.addExternalComponent("东给水", "static/db.fbx").then(() => { |
|
// 设置外部构件的位置 |
|
bfHelper.setExternalComponentPosition( |
|
"东给水", |
|
227756.72450015348, |
|
101732.21079541274, |
|
-3611.907097377562 |
|
); |
|
// 设置外部构件的缩放 |
|
bfHelper.setExternalComponentScale("东给水", 5, 5, 5); |
|
|
|
bfHelper.render(); |
|
}); |
|
} |
|
}, |
|
// 获取本月用水 |
|
getCurWater() { |
|
getYwqWaterLeft(this.bimModel).then((res) => { |
|
this.curWater = res.data.data; |
|
this.electroPie(); |
|
}); |
|
}, |
|
getEquipList() { |
|
//设备列表和设备概况 |
|
getWaterList(this.bimModel).then((res) => { |
|
this.tableData = res.data.data.normalEquipList |
|
.concat(res.data.data.safeWarnEquipList) |
|
.concat(res.data.data.systemWarnEquipList); |
|
let onlineEquipList = res.data.data.normalEquipList; |
|
let offlineEquipList = res.data.data.safeWarnEquipList.concat( |
|
res.data.data.systemWarnEquipList |
|
); |
|
let onList = []; //在线的构件数组 |
|
let offList = []; //离线的构件数组 |
|
let bjList = []; //离线的构件数组 |
|
for (let i = 0; i < onlineEquipList.length; i++) { |
|
if (onlineEquipList[i].modelId) { |
|
let id = bfHelper.disposeId( |
|
onlineEquipList[i].area, |
|
onlineEquipList[i].build, |
|
onlineEquipList[i].modelId |
|
); |
|
onList.push(id); |
|
} |
|
} |
|
for (let j = 0; j < offlineEquipList.length; j++) { |
|
if (offlineEquipList[j].modelId) { |
|
let id = bfHelper.disposeId( |
|
offlineEquipList[j].area, |
|
offlineEquipList[j].build, |
|
offlineEquipList[j].modelId |
|
); |
|
if (offlineEquipList[j].status == 90001) { |
|
offList.push(id); |
|
} else { |
|
bjList.push(id); |
|
} |
|
} |
|
} |
|
this.onList = onList; |
|
this.offList = offList; |
|
this.bjList = bjList; |
|
bfHelper.setColor("#2cd52c", onList); |
|
bfHelper.setColor("#9d9d9d", offList); |
|
bfHelper.setFlicker(bjList, "#ff0000", 100); |
|
this.addWaterLabel(); |
|
}); |
|
}, |
|
// 获取历史用水统计 |
|
getHistoryWater() { |
|
let startTime = ""; |
|
let endTime = ""; |
|
if (this.value1.length != 0) { |
|
startTime = this.value1[0]; |
|
endTime = this.value1[1]; |
|
} |
|
getYwqWaterRight(this.bimModel, startTime, endTime, this.type).then( |
|
(res) => { |
|
this.historyWater = res.data.data.dataList; |
|
for (let i = 0; i < this.historyWater.length; i++) { |
|
for (let j = 0; j < this.historyWater[i].xaxis.length; j++) { |
|
this.historyWater[i].xaxis[j] = |
|
this.historyWater[i].xaxis[j].substring(5); |
|
} |
|
} |
|
this.$refs.echarts.echartsFun2(this.bimModel, this.historyWater); |
|
} |
|
); |
|
}, |
|
// 切换日月 |
|
selectBim(i) { |
|
this.type = i; |
|
this.getHistoryWater(); |
|
}, |
|
// 点击查询 |
|
queryBtn() { |
|
this.getHistoryWater(); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.color1 { |
|
color: #d81e06; |
|
} |
|
|
|
.color2 { |
|
color: #22ee65; |
|
} |
|
|
|
.water { |
|
|
|
// 本月用电 |
|
.instantElectro { |
|
z-index: 99; |
|
width: 677px; |
|
height: 291px; |
|
// background: url() no-repeat; |
|
background-size: 100% 100%; |
|
position: absolute; |
|
bottom: 42px; |
|
left: 96px; |
|
|
|
// 顶部 |
|
.upTit { |
|
padding: 0 30px 0 20px; |
|
margin: 22px 0; |
|
|
|
.tit-left { |
|
.icon { |
|
width: 12px; |
|
height: 16px; |
|
} |
|
|
|
.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: #2cd52c; |
|
} |
|
|
|
.unit { |
|
margin: 0 20px 0 5px; |
|
font-size: 14px; |
|
color: #2cd52c; |
|
} |
|
|
|
.tit2 { |
|
font-size: 14px; |
|
color: #b6b6b6; |
|
} |
|
|
|
.compare { |
|
margin: 0 5px; |
|
width: 16px; |
|
height: 9px; |
|
} |
|
|
|
.use-unit { |
|
font-size: 14px; |
|
} |
|
} |
|
} |
|
|
|
// 底部 |
|
.down { |
|
|
|
// 饼图 |
|
.pie { |
|
width: 270px; |
|
height: 210px; |
|
} |
|
|
|
.rightMessage { |
|
flex: 1; |
|
padding-right: 20px; |
|
|
|
.messageBox { |
|
width: 119px; |
|
height: 186px; |
|
background-image: url(../../../public/img/monitoring/water/waterBg1.png); |
|
background-size: 100% 100%; |
|
|
|
div { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.title { |
|
margin: 16px 0 13px; |
|
font-size: 14px; |
|
color: #00eeff; |
|
} |
|
|
|
.num { |
|
font-weight: bold; |
|
font-size: 32px; |
|
} |
|
|
|
.lastMonthNum { |
|
margin: 4px 0 20px; |
|
font-size: 12px; |
|
color: #b6b6b6; |
|
} |
|
|
|
.lastMonth { |
|
font-size: 14px; |
|
color: #b6b6b6; |
|
} |
|
|
|
.compareLastMonth { |
|
font-size: 14px; |
|
color: #2cd52c; |
|
|
|
.compare { |
|
margin: 0 5px; |
|
width: 16px; |
|
height: 9px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 历史用电 |
|
.rightBox { |
|
z-index: 99; |
|
width: 661px; |
|
height: 291px; |
|
// background: url(../../../public/img/monitoring/water/accumulated.png) no-repeat; |
|
background-size: 100% 100%; |
|
position: absolute; |
|
left: 800px; |
|
bottom: 42px; |
|
|
|
.top { |
|
padding: 0 36px 0 20px; |
|
margin-top: 5px; |
|
font-size: 1.125rem; |
|
color: #ffffff; |
|
|
|
.title { |
|
.icon { |
|
width: 12px; |
|
height: 16px; |
|
} |
|
|
|
span { |
|
margin: 0 5px; |
|
color: white; |
|
font-size: 15px; |
|
font-weight: bold; |
|
} |
|
|
|
.dw { |
|
font-size: 12px; |
|
margin-left: 3px; |
|
} |
|
} |
|
|
|
.cut { |
|
margin-top: 30px; |
|
justify-content: flex-end; |
|
text-align: center; |
|
|
|
.cut_select { |
|
font-size: 0.875rem; |
|
width: 2.563rem; |
|
height: 1.188rem; |
|
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; |
|
background-color: #07a6ff; |
|
} |
|
} |
|
} |
|
|
|
.bottom { |
|
margin-top: 15px; |
|
|
|
.left { |
|
margin: 0 0 0 25px; |
|
|
|
.item { |
|
margin-bottom: 1rem; |
|
background-color: rgba(7, 230, 237, 0.1); |
|
position: relative; |
|
width: 150px; |
|
height: 35px; |
|
|
|
.tit { |
|
text-align: center; |
|
width: 60%; |
|
font-size: 0.875rem; |
|
color: #07e6ed; |
|
} |
|
|
|
.number { |
|
text-align: left; |
|
width: 40%; |
|
font-size: 0.75rem; |
|
color: #eafeff; |
|
} |
|
} |
|
|
|
.item:first-child .number { |
|
font-size: 0.875rem; |
|
} |
|
|
|
.item::before { |
|
content: ""; |
|
position: absolute; |
|
width: 0.188rem; |
|
height: 100%; |
|
background-color: #1af3fd; |
|
left: -0.438rem; |
|
top: 0; |
|
} |
|
} |
|
|
|
.left2 { |
|
margin: 0 0 0 25px; |
|
|
|
.item { |
|
margin-bottom: 2rem; |
|
background-color: rgba(7, 230, 237, 0.1); |
|
position: relative; |
|
width: 10.938rem; |
|
height: 2.188rem; |
|
|
|
.tit { |
|
text-align: center; |
|
width: 60%; |
|
font-size: 0.875rem; |
|
color: #07e6ed; |
|
} |
|
|
|
.number { |
|
text-align: left; |
|
width: 40%; |
|
font-size: 0.75rem; |
|
color: #eafeff; |
|
} |
|
} |
|
|
|
.item:first-child .number { |
|
font-size: 0.875rem; |
|
} |
|
|
|
.item::before { |
|
content: ""; |
|
position: absolute; |
|
width: 0.188rem; |
|
height: 100%; |
|
background-color: #1af3fd; |
|
left: -0.438rem; |
|
top: 0; |
|
} |
|
} |
|
|
|
.rightBox2 { |
|
.time { |
|
flex: 1; |
|
font-size: 0.875rem; |
|
color: #07e6ed; |
|
margin-bottom: 10px; |
|
|
|
span { |
|
margin-right: 0.3rem; |
|
display: block; |
|
} |
|
|
|
/deep/ .el-date-editor--daterange.el-input__inner { |
|
width: 250px; |
|
} |
|
|
|
.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; |
|
} |
|
} |
|
|
|
.right { |
|
width: 510px; |
|
height: 170px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 设备概况 |
|
.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; |
|
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: 100% 100%; |
|
width: 127px; |
|
height: 65px; |
|
} |
|
|
|
.lx { |
|
// padding-right: 36px; |
|
box-sizing: border-box; |
|
// justify-content: flex-end; |
|
background: url(../../../public/img/monitoring/electricity/guzhang.png) no-repeat; |
|
background-size: 100% 100%; |
|
width: 127px; |
|
height: 65px; |
|
} |
|
|
|
.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: 127px; |
|
height: 65px; |
|
} |
|
} |
|
|
|
.stateName { |
|
margin: 5px 0 20px; |
|
color: #2cd52c; |
|
font-size: 14px; |
|
display: flex; |
|
justify-content: space-around; |
|
|
|
.lx { |
|
color: #ec9b28; |
|
} |
|
|
|
.bj { |
|
// padding-left: 146px; |
|
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; |
|
} |
|
|
|
// .circle{ |
|
// display: inline-block; |
|
// width: 8px; |
|
// height: 8px; |
|
// background: red; |
|
// border-radius: 50%; |
|
// position: relative; |
|
// top: -8px; |
|
// left: -3px; |
|
// } |
|
} |
|
|
|
.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; |
|
|
|
.alark-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; |
|
} |
|
} |
|
|
|
// 设备列表 |
|
.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; |
|
|
|
&.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; |
|
|
|
.dev_name { |
|
width: 100%; |
|
} |
|
|
|
/deep/ .el-table { |
|
background: transparent; |
|
} |
|
|
|
/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; |
|
// color: #9d9d9d; |
|
} |
|
|
|
/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: 252px !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>
|
|
|