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.
2468 lines
81 KiB
2468 lines
81 KiB
<template> |
|
<!-- 监控 --> |
|
<div v-if="monitoringState" class="door"> |
|
<!-- 各楼栋楼层切换 --> |
|
<clickCp :bimModel="bimModel" sbType="监控" ref="clickcp" :conditions="conditions"> |
|
</clickCp> |
|
<!-- 返回主视角 --> |
|
<backHome ref="backHome" :bimModel="bimModel" type="监控" :condition="condition" dom=".mapDom"></backHome> |
|
<div style="position: absolute; left: 84px; top: 210px" 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; |
|
"> |
|
{{ buildMessage }} |
|
</div> --> |
|
<div class="mapDom" style="width: 250px; height: 180px; margin-top: 20px"></div> |
|
</div> |
|
<div v-if="!monitoring"> |
|
<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 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=""></span> |
|
<span class="data" :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{ item.warnContent |
|
}}</span> |
|
<span class=""></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="monit_box">设备列表</span> |
|
</div> |
|
<div class="tabBox"> |
|
<el-table @row-click="tableClick" :data="tableData" style="width: 100%; max-height: 210px" @row-contextmenu="tableContext" |
|
:class="bimModel == 2 ? 'tataitab' : ''"> |
|
<el-table-column label="设备名称" min-width="150"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center mon_box" style=" |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
cursor: pointer; |
|
" @click="bjClick(scope.row)"> |
|
<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', |
|
}" style=" |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
" :title="scope.row.name">{{ scope.row.name }}</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="|" width="5"> </el-table-column> |
|
<el-table-column label="设备位置" width="120"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center mon_box" style=" |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
cursor: pointer; |
|
" @click="bjClick(scope.row)"> |
|
<span :style="{ |
|
color: |
|
scope.row.status == 90000 |
|
? 'white' |
|
: scope.row.status == 90001 |
|
? '#a5bbe5' |
|
: '#ff0000', |
|
}" style=" |
|
padding-left: 10px; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
" :title="scope.row.location">{{ scope.row.location }}</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="|" width="5"> </el-table-column> |
|
<el-table-column label="操作" width="50"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center-center"> |
|
<img @click="goMonitoring(scope.row)" v-if="scope.row.status != 90001" |
|
src="../../../public/img/monitoring/caozuo2.png" /> |
|
<img v-else src="../../../public/img/monitoring/caozuo1.png" /> |
|
</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="size" layout="total, prev, pager, next" :total="total"> |
|
</el-pagination> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div v-if="monitoring" class="monitoring2"> |
|
<div class="title flex-center"> |
|
<img src="../../../public/img/monitoring/sblb.png" /> |
|
<span>实时监控</span> |
|
</div> |
|
<div class="btn_box"> |
|
<div class="btn" @click="playBack">回放</div> |
|
<div class="btn" @click="closeView">关闭</div> |
|
</div> |
|
<!-- 海康监控 --> |
|
<hk-monitoring :codeId="codeId" ref="hkmonitoring1" id="hkmonitoring1"></hk-monitoring> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import * as bfHelper from "../../util/bfHelper"; |
|
import * as commonValue from "../../util/commonValue"; |
|
import hkMonitoring from "@/components/monitoring/hkMonitoring"; |
|
import { |
|
// 业务区 |
|
getMonitoringSblb, //设备列表 |
|
// getMonitoringGK, |
|
// 塔台 |
|
getmonData, //根据modelid获取摄像头信息 |
|
getMonitoringList, //设备列表无分页 |
|
getCameraWarnList, //报警列表 |
|
getCancelWarn, //关闭报警 |
|
recoveryWarn,//恢复告警 |
|
} from "@/api/garden/monitoring"; |
|
import clickCp from "./clickCp"; |
|
import backHome from "./backHome"; |
|
import { monitorPosition, monitorCamera } from "@/option/monitoring/monitors"; |
|
export default { |
|
props: { |
|
monitoringState: { |
|
type: Boolean, |
|
}, |
|
bimModel: { |
|
type: Number, |
|
}, |
|
}, |
|
components: { |
|
hkMonitoring, |
|
backHome, |
|
clickCp, |
|
}, |
|
data() { |
|
return { |
|
codeId: null, //监控点位编号 |
|
monitoring: false, //是否显示监控 |
|
list: ["1#", "2#", "3#", "4#", "5#", "6#", "室外"], //选项列表 |
|
checkList: [], //勾选结果 |
|
listData: {}, //报警信息 |
|
classOption: { |
|
step: 0.2, |
|
}, //报警信息滚动速度 |
|
options: [], //设备位置 |
|
ywqSbwz: [], //业务区设备位置 |
|
ttSbwz: [], //塔台设备位置 |
|
build: null, //当前选择的设备位置 |
|
floor: null, //当前选择的设备位置 |
|
current: 1, //当前页 |
|
size: 5, //每页数量 |
|
total: 0, //总条目数 |
|
tableData: [], //设备列表 |
|
// 标签配置区 |
|
reload: 100, //是否再次执行添加标签 防止相机一直触发一直销毁添加标签导致卡顿 |
|
floorBqShow: false, //查看设备回滚视角时是否允许添加每一楼层的标签 |
|
|
|
// 业务区 1-6号楼+园区+运动场+室外地坪+地下室的文件id 地下室最后一个 |
|
tower: bfHelper.ywqTowerFileId, |
|
// 业务区 1-6号楼楼层标签点位（按123层） |
|
position: bfHelper.ywqFloorPt, |
|
// 业务区 1-6号楼每层的摄像头数量（按123层） |
|
floorNum: [ |
|
[4, 4, 3], |
|
[22, 3, 7], |
|
[7, 2], |
|
[5, 6, 7], |
|
[22, 4, 8], |
|
[9, 4, 5], |
|
], |
|
// 业务区 每号楼的视角 |
|
cameraPosition: bfHelper.ywqCameraPosition, |
|
// 摄像头的筛选条件 |
|
condition: bfHelper.equipmentCondition2[5], |
|
|
|
// 塔台 主塔+辅楼+室外整体 |
|
fileId: bfHelper.ttTowerFileId, |
|
// 单击自定义二维标签的item |
|
currentItem: "", |
|
classList: {}, |
|
monitor: false, |
|
// 是否拥有权限 |
|
isMon: "", |
|
isAlarm: false, |
|
isSafe: false, |
|
alarmTotal: 0, |
|
safeTotal: 0, |
|
buildMessage: "", |
|
monitorPosition: monitorPosition, //每个摄像机的包围盒坐标 |
|
monitorCamera: monitorCamera, //每层的视角 |
|
startCamera: { |
|
aspect: 1.889763779527559, |
|
coordinateSystem: "world", |
|
far: 224492.99849073135, |
|
fov: 45, |
|
name: "persp", |
|
near: 139057.56912454384, |
|
position: { |
|
x: -48909.56879122951, |
|
y: -554729.997803423, |
|
z: 35608.88916657928, |
|
}, |
|
target: { |
|
x: -29906.02103304434, |
|
y: 343504.8821214207, |
|
z: 21637.329723417766, |
|
}, |
|
up: { |
|
x: 0.00032889260193379297, |
|
y: 0.015545622434416368, |
|
z: 0.9998791054186414, |
|
}, |
|
version: 1, |
|
zoom: 1, |
|
}, |
|
isShowAll: true, //显示所有的摄像头 |
|
}; |
|
}, |
|
created() { |
|
// this.getBjxx(); //报警信息 |
|
// this.getSbgk(); //设备概况 |
|
this.getCameraWarnList(); //告警列表 |
|
this.getSblb(); //设备列表 |
|
|
|
this.setInterval = setInterval(() => { |
|
// this.getSbgk(); //设备位置 |
|
this.getCameraWarnList(); //告警列表 |
|
this.getSblb(); //设备列表 |
|
}, 3600000); |
|
}, |
|
beforeDestroy() { |
|
console.log('销毁interval') |
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
}, |
|
watch: { |
|
bimModel: { |
|
handler(newVal, oldVal) { |
|
this.checkList = []; |
|
this.build = ""; |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
|
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
|
|
this.setInterval = setInterval(() => { |
|
// this.getSbgk(); //设备位置 |
|
this.getSblb(); //设备列表 |
|
this.getCameraWarnList(); //告警列表 |
|
}, 3600000); |
|
|
|
// this.getSbgk(); //设备位置 |
|
this.getSblb(); //设备列表 |
|
this.getCameraWarnList(); //告警列表 |
|
|
|
this.reload = null; //是否再次执行添加标签 防止相机一直触发一直销毁添加标签导致卡顿 |
|
this.floorBqShow = false; //查看设备回滚视角时是否允许添加每一楼层的标签 |
|
|
|
this.codeId = null; |
|
this.monitoring = false; |
|
|
|
if (newVal == 1) { |
|
this.list = ["1#", "2#", "3#", "4#", "5#", "6#", "室外"]; |
|
this.options = this.ywqSbwz; |
|
} else { |
|
this.list = ["辅楼", "塔楼"]; |
|
this.options = this.ttSbwz; |
|
} |
|
}, |
|
}, |
|
//模型是否加载完成监听 |
|
"$store.state.bfHelperState.bfState": { |
|
immediate: true, |
|
handler(newval, olval) { |
|
if (newval) { |
|
// 模型恢复全部状态 |
|
bfHelper.resetStatus(2); |
|
this.onClick(); |
|
if (this.bimModel == 1) { |
|
window.sessionStorage.setItem( |
|
"camera", |
|
JSON.stringify(bfHelper.getCameraStatus()) |
|
); |
|
let build = sessionStorage.getItem("build"); |
|
let floor = sessionStorage.getItem("floor"); |
|
this.getCameraPosi(); |
|
if (build) { |
|
if (build == 10) { |
|
setTimeout(() => { |
|
this.setTowerMonitor("07"); |
|
this.$refs.clickcp.active = 26; |
|
this.$refs.clickcp.tower = 9; |
|
}, 300); |
|
bfHelper.lookPipeline2( |
|
this.condition, |
|
bfHelper.equipmentCopColors[0], |
|
build - 1, |
|
null, |
|
"监控" |
|
); |
|
} else if (build == 26) { |
|
bfHelper.lookPipeline(null, null, this.condition, "监控"); |
|
bfHelper.setOpacityFun(); |
|
setTimeout(() => { |
|
this.setTowerMonitor(); |
|
}, 300); |
|
this.initial(); |
|
} else { |
|
if (floor.indexOf("undefined") == -1) { |
|
setTimeout(() => { |
|
this.setTowerMonitor("0" + build, "0" + floor); |
|
this.$refs.clickcp.active = commonValue.activeValue( |
|
Number(build), |
|
Number(floor) |
|
); |
|
this.$refs.clickcp.tower = commonValue.towerValue(build); |
|
}, 300); |
|
bfHelper.lookPipeline2( |
|
this.condition, |
|
bfHelper.equipmentCopColors[0], |
|
build - 1, |
|
floor, |
|
"监控" |
|
); |
|
} else { |
|
setTimeout(() => { |
|
this.setTowerMonitor("0" + build); |
|
this.$refs.clickcp.active = commonValue.activeValue( |
|
Number(build), |
|
null |
|
); |
|
this.$refs.clickcp.tower = commonValue.towerValue(build); |
|
}, 300); |
|
bfHelper.lookPipeline2( |
|
this.condition, |
|
bfHelper.equipmentCopColors[0], |
|
build - 1, |
|
null, |
|
"监控" |
|
); |
|
} |
|
} |
|
} else { |
|
// 查看管线 |
|
bfHelper.lookPipeline(null, null, this.condition, "监控"); |
|
bfHelper.setOpacityFun(); |
|
setTimeout(() => { |
|
this.getNavigationMap(); |
|
this.buildMessage = "园区"; |
|
this.$refs.clickcp.active = 25; |
|
this.$refs.clickcp.tower = null; |
|
}, 300); |
|
this.initial(); |
|
} |
|
} else { |
|
// 查看管线 |
|
window.sessionStorage.setItem( |
|
"ttcamera", |
|
JSON.stringify(bfHelper.getCameraStatus()) |
|
); |
|
let ttbuild = sessionStorage.getItem("ttbuild"); |
|
if (ttbuild) { |
|
if (ttbuild == 20) { |
|
//园区 |
|
bfHelper.TtLookEquipmentCop("监控"); |
|
// bfHelper.setCameraStatus(this.startCamera) |
|
setTimeout(() => { |
|
this.setTowerMonitor(); |
|
}, 300); |
|
} else if (ttbuild == 0) { |
|
//塔楼 |
|
setTimeout(() => { |
|
this.setTowerMonitor("08"); |
|
this.$refs.clickcp.ttActive = 0; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
0, |
|
"监控", |
|
bfHelper.equipmentCondition2[5] |
|
); |
|
} else if (ttbuild == 1) { |
|
//辅楼1楼 |
|
setTimeout(() => { |
|
this.setTowerMonitor("09", "01"); |
|
this.$refs.clickcp.ttActive = 1; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
1, |
|
"监控", |
|
bfHelper.equipmentCondition2[5] |
|
); |
|
} else if (ttbuild == 2) { |
|
//辅楼1楼 |
|
setTimeout(() => { |
|
this.setTowerMonitor("09", "02"); |
|
this.$refs.clickcp.ttActive = 2; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
2, |
|
"监控", |
|
bfHelper.equipmentCondition2[5] |
|
); |
|
} else if (ttbuild == 3) { |
|
//辅楼1楼 |
|
setTimeout(() => { |
|
this.setTowerMonitor("09"); |
|
this.$refs.clickcp.ttActive = 3; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
3, |
|
"监控", |
|
bfHelper.equipmentCondition2[5] |
|
); |
|
} |
|
} else { |
|
// 查看管线 |
|
bfHelper.TtLookEquipmentCop("监控", null, this.condition); |
|
// bfHelper.setCameraStatus(this.startCamera) |
|
bfHelper.setOpacityFun1(); |
|
this.initial(); |
|
} |
|
} |
|
} |
|
}, |
|
}, |
|
|
|
currentItem: { |
|
//点击图标 |
|
handler(newVal, oldVal) { |
|
for (var i = 0; i < this.classList.length; i++) { |
|
if (newVal == this.classList[i].id.substring(7)) { |
|
//点击当前图标变色 |
|
this.classList[ |
|
i |
|
].src = `${require("../../../public/img/monitoring/electricity/camera22.png")}`; |
|
} |
|
if (oldVal && oldVal == this.classList[i].id.substring(7)) { |
|
//其它的图标显示相应的颜色 |
|
if (this.classList[i].alt == 90000) { |
|
this.classList[ |
|
i |
|
].src = `${require("../../../public/img/monitoring/electricity/camera11.png")}`; |
|
} else if (this.classList[i].alt == 90001) { |
|
this.classList[ |
|
i |
|
].src = `${require("../../../public/img/monitoring/electricity/camera-off.png")}`; |
|
} else { |
|
this.classList[ |
|
i |
|
].src = `${require("../../../public/img/monitoring/electricity/camera-bj.png")}`; |
|
} |
|
} |
|
} |
|
}, |
|
}, |
|
}, |
|
mounted() { |
|
let dom = document.getElementById('monit_box'); |
|
dom.addEventListener('contextmenu', (event)=> { |
|
event.preventDefault(); // 阻止默认菜单 |
|
const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0400' } }); |
|
window.open(routerUrl.href, "_blank"); |
|
}); |
|
if (this.bimModel == 1) { |
|
this.getNavigationMap(); |
|
} |
|
}, |
|
methods: { |
|
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) |
|
}, |
|
//确认告警 - 重新查询告警列表 |
|
doCancelWarn(item) { |
|
getCancelWarn(item.id).then((res) => { |
|
this.getCameraWarnList(); |
|
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: "0400", area: this.bimModel }, |
|
}); |
|
window.open(routerUrl.href, "_blank"); |
|
}, |
|
// 报警记录-20221031改版 |
|
getCameraWarnList() { |
|
getCameraWarnList({ |
|
area: this.bimModel, |
|
build: this.build ? this.build : "", |
|
floor: this.floor ? this.floor : "", |
|
}).then((res) => { |
|
this.listData = res.data.data; |
|
for (let i = 0; i < this.listData.warnEquipList.length; i++) { |
|
this.listData.warnEquipList[i].showAlert = false; |
|
} |
|
}); |
|
}, |
|
showAlarmAlert(item, index) { |
|
item.showAlert = true; |
|
this.listData.warnEquip.splice(index, 1, item); |
|
}, |
|
closeAlarmAlert(item, index) { |
|
item.showAlert = false; |
|
this.listData.warnEquip.splice(index, 1, item); |
|
}, |
|
getNavigationMap() { |
|
commonValue.getNavigationMap("monitor"); |
|
}, |
|
getCameraPosi() { |
|
let cameraPosi = bfHelper.getCameraStatus().position; |
|
let tower = null; |
|
let layer = null; |
|
for (let i = 0; i < bfHelper.buildBoxbounding.length; i++) { |
|
if ( |
|
cameraPosi.x > bfHelper.buildBoxbounding[i].build.min.x && |
|
cameraPosi.x <= bfHelper.buildBoxbounding[i].build.max.x && |
|
cameraPosi.y > bfHelper.buildBoxbounding[i].build.min.y && |
|
cameraPosi.y <= bfHelper.buildBoxbounding[i].build.max.y && |
|
cameraPosi.z > bfHelper.buildBoxbounding[i].build.min.z && |
|
cameraPosi.z <= bfHelper.buildBoxbounding[i].build.max.z |
|
) { |
|
tower = i; |
|
for (let j = 0; j < bfHelper.buildBoxbounding[i].floor.length; j++) { |
|
if ( |
|
cameraPosi.x > bfHelper.buildBoxbounding[i].floor[j].min.x && |
|
cameraPosi.x <= bfHelper.buildBoxbounding[i].floor[j].max.x && |
|
cameraPosi.y > bfHelper.buildBoxbounding[i].floor[j].min.y && |
|
cameraPosi.y <= bfHelper.buildBoxbounding[i].floor[j].max.y && |
|
cameraPosi.z > bfHelper.buildBoxbounding[i].floor[j].min.z && |
|
cameraPosi.z <= bfHelper.buildBoxbounding[i].floor[j].max.z |
|
) { |
|
// console.log(j) |
|
layer = j; |
|
// this.getMonitorIds('0' + (i + 1), '0' + (j + 1)) |
|
} |
|
} |
|
} |
|
} |
|
// console.log(tower,layer) |
|
if (tower != null && layer != null) { |
|
// console.log('888888') |
|
this.getMonitorIds("0" + (tower + 1), "0" + (layer + 1), "22"); |
|
this.isShowAll = false; |
|
} else { |
|
this.isShowAll = true; |
|
} |
|
}, |
|
setTowerMonitor(i, j) { |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
this.build = i; |
|
this.floor = j; |
|
// this.getSbgk(); |
|
this.getCameraWarnList(); //告警列表 |
|
this.getSblb(); |
|
if (this.bimModel == 1) { |
|
if (this.build != undefined) { |
|
if (j == undefined) { |
|
if (i == "07") { |
|
this.buildMessage = "地下室"; |
|
// 筛选条件 |
|
bfHelper.clearDrawableContainer(); //清除外部标签 |
|
this.getMonitorIds("07", ""); |
|
commonValue.getUpdateMap("monitor", i, j); |
|
return; |
|
} |
|
this.buildMessage = Number(i) + "号楼"; |
|
} else { |
|
this.buildMessage = Number(i) + "号楼" + Number(j) + "层"; |
|
// 筛选条件 |
|
bfHelper.clearDrawableContainer(); //清除外部标签 |
|
this.getMonitorIds(i, j); |
|
} |
|
} else { |
|
this.buildMessage = "园区"; |
|
} |
|
|
|
commonValue.getUpdateMap("monitor", i, j); |
|
} else { |
|
if (this.build != undefined) { |
|
bfHelper.clearDrawableContainer(); //清除外部标签 |
|
this.getMonitorIds(i, j ? j : ""); |
|
} else { |
|
this.buildMessage = "园区"; |
|
} |
|
} |
|
}, |
|
|
|
// 获取设备概况 |
|
// getSbgk() { |
|
// getMonitoringGK(this.bimModel, this.build ? this.build : '', this.floor ? this.floor : '').then(res => { |
|
|
|
// this.listData = res.data.data; |
|
|
|
// for (let i = 0; i < this.listData.systemWarmNum.length; i++) { |
|
// this.listData.systemWarmNum[i].showAlert = false |
|
// } |
|
// }) |
|
|
|
// }, |
|
// 获取设备列表 |
|
getSblb() { |
|
getMonitoringSblb( |
|
this.current, |
|
this.size, |
|
this.bimModel, |
|
this.build ? this.build : "", |
|
this.floor ? this.floor : "" |
|
).then((res) => { |
|
this.tableData = res.data.data.records; |
|
this.total = res.data.data.total; //总条目数 |
|
}); |
|
}, |
|
// 页码改变时触发 |
|
handleCurrentChange(val) { |
|
this.current = val; |
|
this.getSblb(); |
|
}, |
|
monitorImgContent(num) { |
|
let content = `<div class="leadTips" style="transform: translateY(-40px);"> |
|
<div style="display: flex;width:max-content"> |
|
<div style="display: flex;align-items: center;justify-content: center;color:#fff;font-size:18px;width:71px;height:40px;background-color: rgba(7, 67, 151, 0.8);box-shadow: #009cff 0px 0px 15px inset;border: 1px solid #00BAFE;border-radius: 12px;"> |
|
<img src="${require("../../../public/img/monitoring/monitoring.png")}" style="margin-right: 5px;width:30px;height:30px;"/> |
|
<span>${num}</span> |
|
</div> |
|
</div> |
|
</div>`; |
|
return content; |
|
}, |
|
bjClick(item) { |
|
let id = ""; |
|
if (this.bimModel == 2) { |
|
if (item.modelId == "") { |
|
} else { |
|
// bfHelper.resetStatus(2); |
|
bfHelper.clearDrawableContainer(); |
|
id = bfHelper.disposeId(item.area, item.build, item.modelId); |
|
if (item.build == "00") { |
|
//室外 |
|
id = bfHelper.disposeId(item.area, "10", item.modelId); |
|
bfHelper.zoomToBoundingBox(bfHelper.getBoxMessage(id), 20); |
|
} else if (item.build == "08") { |
|
//塔楼 |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
0, |
|
"监控", |
|
bfHelper.equipmentCondition2[5] |
|
); |
|
} else if (item.build == "09") { |
|
//辅楼 |
|
|
|
// window.sessionStorage.setItem('ttcamera',JSON.stringify(camera)); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
Number(item.floored), |
|
"监控", |
|
bfHelper.equipmentCondition2[5], |
|
null, |
|
"single" |
|
); |
|
bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭 |
|
bfHelper.setCameraView("Top"); |
|
bfHelper.zoomToBoundingBox(bfHelper.getBoxMessage(id), 120); |
|
} |
|
} |
|
} else { |
|
bfHelper.mapDestroy(); |
|
if (item.modelId == "") { |
|
} else { |
|
// bfHelper.mapDestroy(); |
|
bfHelper.clearDrawableContainer(); |
|
id = bfHelper.disposeId(item.area, item.build, item.modelId); |
|
|
|
if (item.build == "00") { |
|
bfHelper.navigationMap( |
|
".mapDom", |
|
require("../../../public/img/monitoring/mapviewer/total.png"), |
|
8, |
|
1 |
|
); |
|
this.buildMessage = "园区"; |
|
bfHelper.lookPipeline(null, null, this.condition, "监控"); |
|
} else if (item.build == "07") { |
|
bfHelper.navigationMap( |
|
".mapDom", |
|
require("../../../public/img/monitoring/mapviewer/electricity7b.png"), |
|
7, |
|
1 |
|
); |
|
this.buildMessage = "地下室"; |
|
let camera = bfHelper.cameraPosition[9]; |
|
window.sessionStorage.setItem("camera", JSON.stringify(camera)); |
|
bfHelper.lookPipeline2( |
|
this.condition, |
|
bfHelper.equipmentCopColors[0], |
|
9, |
|
null, |
|
"监控", |
|
null, |
|
null, |
|
true |
|
); |
|
} else { |
|
bfHelper.navigationMap( |
|
".mapDom", |
|
require("../../../public/img/monitoring/mapviewer/monitor" + |
|
Number(item.build) + |
|
"b" + |
|
Number(item.floored) + |
|
"f.png"), |
|
Number(item.build), |
|
Number(item.floored) |
|
); |
|
this.buildMessage = |
|
Number(item.build) + "号楼" + Number(item.floored) + "层"; |
|
let camera = bfHelper.cameraPosition[Number(item.build) - 1]; |
|
window.sessionStorage.setItem("camera", JSON.stringify(camera)); |
|
bfHelper.lookPipeline2( |
|
this.condition, |
|
bfHelper.equipmentCopColors[0], |
|
item.build - 1, |
|
Number(item.floored), |
|
"监控", |
|
null, |
|
null, |
|
true |
|
); |
|
} |
|
|
|
bfHelper.setOpacityFun(false); |
|
} |
|
} |
|
let content = `<div class="leadTips" style="transform: translateY(-40px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img id='monitor${id}' alt='${item.status}' |
|
class = 'montorImg' src="${require(item.status == 90000 |
|
? "../../../public/img/monitoring/electricity/camera11.png" |
|
: item.status == 90001 |
|
? "../../../public/img/monitoring/electricity/camera-off.png" |
|
: "../../../public/img/monitoring/electricity/camera-bj.png")}" style="width:40px;height:40px;"/> |
|
</div> |
|
</div>`; |
|
// console.log(id) |
|
// console.log(bfHelper.getBoxMessage(id, true)) |
|
if (item.name == '1#2F阶级会议室') { |
|
bfHelper.customTag( |
|
{ x: '99783.95158224391', y: '-21212.222455260806', z: '6847.543165934141' }, |
|
null, |
|
content |
|
); |
|
} |
|
else { |
|
bfHelper.customTag( |
|
bfHelper.getBoxMessage(id, true).max, |
|
null, |
|
content, |
|
id |
|
); |
|
} |
|
bfHelper.customItemFun().onClick((item) => { |
|
this.classList = document.getElementsByClassName("montorImg"); |
|
bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭 |
|
// 设置视角为俯视 |
|
let id = item.layerId; |
|
let index = id.lastIndexOf("."); |
|
id = id.substring(index + 1, id.length); |
|
getmonData(this.bimModel, id).then((res) => { |
|
// console.log(res) |
|
if (res.data.data.status != 90001) { |
|
this.codeId = res.data.data.thirdId; |
|
this.currentItem = item.layerId; |
|
this.monitoring = true; |
|
this.monitor = false; |
|
this.isMon = res.data.data.agentViewHis; |
|
} else { |
|
this.$message.warning("设备离线，不可查看"); |
|
} |
|
}); |
|
}); |
|
}, |
|
setBuildColor() { |
|
bfHelper.setConditionsColor( |
|
[ |
|
{ |
|
categoryId: -2000011, //墙 |
|
}, |
|
], |
|
"#09aef2" |
|
); |
|
|
|
// 设置1-6楼板颜色 |
|
bfHelper.setConditionsColor( |
|
[ |
|
{ |
|
categoryId: -2000032, //楼板 |
|
fileId: this.tower[0], |
|
}, |
|
{ |
|
categoryId: -2000032, //楼板 |
|
fileId: this.tower[1], |
|
}, |
|
{ |
|
categoryId: -2000032, //楼板 |
|
fileId: this.tower[2], |
|
}, |
|
{ |
|
categoryId: -2000032, //楼板 |
|
fileId: this.tower[3], |
|
}, |
|
{ |
|
categoryId: -2000032, //楼板 |
|
fileId: this.tower[4], |
|
}, |
|
{ |
|
categoryId: -2000032, //楼板 |
|
fileId: this.tower[5], |
|
}, |
|
{ |
|
categoryId: -2000032, //楼板 |
|
fileId: this.tower[9], |
|
}, |
|
], |
|
"#066fab" |
|
); |
|
}, |
|
restoreBuildColor() { |
|
let conditionArr = []; |
|
for (let i = 0; i < 6; i++) { |
|
let obj = { |
|
categoryId: -2000011, //墙 |
|
fileId: this.tower[i], |
|
}; |
|
let obj1 = { |
|
categoryId: -2000032, //墙 |
|
fileId: this.tower[i], |
|
}; |
|
let obj2 = { |
|
categoryId: -2001330, //墙 |
|
fileId: this.tower[i], |
|
}; |
|
conditionArr.push(obj, obj1, obj2); |
|
} |
|
bfHelper.restoreComponentsColorByObjectData(conditionArr); |
|
}, |
|
setOpacity() { |
|
// 设置运动场+室外道路透明度 |
|
bfHelper.overrideComponentsOpacityByObjectData( |
|
[ |
|
{ |
|
fileId: this.tower[7], |
|
}, |
|
{ |
|
fileId: this.tower[6], |
|
familyType: "沥青道路", |
|
}, |
|
{ |
|
fileId: this.tower[6], |
|
familyType: "石板路", |
|
}, |
|
], |
|
0.1 |
|
); |
|
|
|
bfHelper.overrideComponentsOpacityByObjectData( |
|
[ |
|
{ |
|
categoryId: "-2000032", |
|
family: "楼板", |
|
familyType: "楼板", |
|
fileId: this.tower[6], |
|
}, |
|
], |
|
1 |
|
); |
|
}, |
|
setFloorOpacity() { |
|
let conditionArr = [ |
|
{ |
|
family: "基本墙", |
|
}, |
|
{ |
|
family: "幕墙", |
|
}, |
|
{ |
|
family: "楼板", |
|
familyType: "楼板", |
|
fileId: this.tower[6], |
|
}, |
|
]; |
|
for (let i = 0; i < 6; i++) { |
|
let obj1 = { |
|
categoryId: -2000032, //楼板 |
|
fileId: this.tower[i], |
|
}; |
|
conditionArr.push(obj1); |
|
} |
|
return conditionArr; |
|
}, |
|
// 初始标签 |
|
initial() { |
|
if (this.bimModel == 1) { |
|
let origin = bfHelper.ywqOrigin; |
|
let height = null; //相机与原点的两点距离 |
|
// 业务区 |
|
// console.log(this.reload) |
|
bfHelper.CameraPositionChanged((data) => { |
|
// console.log(data) |
|
height = Math.sqrt( |
|
Math.pow(origin[0] - data.position.x, 2) + |
|
Math.pow(origin[1] - data.position.y, 2) + |
|
Math.pow(origin[2] - data.position.z, 2) |
|
); |
|
// console.log(height) |
|
if (700000 <= height && this.reload != 1) { |
|
// 显示一级标签 总的 |
|
this.monitoring = false; |
|
bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭 |
|
bfHelper.cancelSelected(); // 清除选中状态 |
|
bfHelper.clearDrawableContainer(); //清除外部标签 |
|
let position = bfHelper.ywqStairPt; |
|
bfHelper.customTag(position, null, this.monitorImgContent(181)); |
|
this.setBuildColor(); |
|
this.setOpacity(); |
|
bfHelper.overrideComponentsOpacityByObjectData( |
|
[ |
|
{ |
|
family: "基本墙", |
|
}, |
|
{ |
|
family: "幕墙", |
|
}, |
|
{ |
|
categoryId: -2000032, //楼板 |
|
}, |
|
], |
|
0.1 |
|
); |
|
this.reload = 1; |
|
return; |
|
} else if (400000 <= height && height < 700000 && this.reload != 2) { |
|
// 显示二级标签 室外和室内 |
|
this.monitoring = false; |
|
bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭 |
|
bfHelper.cancelSelected(); // 清除选中状态 |
|
bfHelper.clearDrawableContainer(); //清除外部标签 |
|
let position = bfHelper.ywqSecondLevelPt; |
|
let num = [122, 37]; |
|
for (let i = 0; i < num.length; i++) { |
|
bfHelper.customTag( |
|
position[i], |
|
null, |
|
this.monitorImgContent(num[i]) |
|
); |
|
} |
|
this.setBuildColor(); |
|
this.setOpacity(); |
|
bfHelper.overrideComponentsOpacityByObjectData( |
|
[ |
|
{ |
|
family: "基本墙", |
|
}, |
|
{ |
|
family: "幕墙", |
|
}, |
|
{ |
|
categoryId: -2000032, //楼板 |
|
}, |
|
], |
|
0.1 |
|
); |
|
this.reload = 2; |
|
return; |
|
} else if (height >= 300000 && height < 400000 && this.reload != 3) { |
|
bfHelper.showComponentsByObjectData([ |
|
{ |
|
family: "楼板", |
|
}, |
|
{ |
|
family: "基本墙", |
|
}, |
|
]); |
|
// // 隐藏多余墙体 |
|
bfHelper.hideComponentsByObjectData([ |
|
{ |
|
fileId: this.tower[6], |
|
familyType: "楼板", |
|
}, |
|
]); |
|
bfHelper.mapDestroy(); |
|
bfHelper.navigationMap( |
|
".mapDom", |
|
require("../../../public/img/monitoring/mapviewer/total.png"), |
|
8, |
|
1 |
|
); |
|
this.buildMessage = "园区"; |
|
// 显示三级标签 每号楼 |
|
this.monitoring = false; |
|
bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭 |
|
bfHelper.cancelSelected(); // 清除选中状态 |
|
bfHelper.clearDrawableContainer(); //清除外部标签 |
|
this.getMonitorIds("00", ""); |
|
this.build = ""; |
|
this.floor = ""; |
|
// this.getSbgk(); |
|
this.getCameraWarnList(); //告警列表 |
|
this.getSblb(); |
|
this.setBuildColor(); |
|
this.setOpacity(); |
|
bfHelper.overrideComponentsOpacityByObjectData( |
|
this.setFloorOpacity(), |
|
0.2 |
|
); |
|
let position = bfHelper.ywqThreeLevelPt; |
|
let num = [11, 32, 9, 18, 34, 18, 21]; |
|
for (let i = 0; i < num.length; i++) { |
|
bfHelper.customTag( |
|
position[i], |
|
null, |
|
this.monitorImgContent(num[i]) |
|
); |
|
bfHelper.customItemFun().onClick((item) => { |
|
for (let a = 0; a < position.length; a++) { |
|
if ( |
|
item.worldPosition.x == position[a].x && |
|
item.worldPosition.y == position[a].y && |
|
item.worldPosition.z == position[a].z |
|
) { |
|
// 处理点击1-6号楼 |
|
this.towerIndex = a; |
|
if (a != 6) { |
|
this.threeBtn(a); |
|
} else { |
|
// 点击地下室 |
|
this.basementBtn(a); |
|
} |
|
return; |
|
} |
|
} |
|
}); |
|
} |
|
this.reload = 3; |
|
return; |
|
} |
|
// else if (height >= 200000 && height < 300000 && this.reload != 3) { |
|
// this.restoreBuildColor(); |
|
// this.setOpacity(); |
|
// bfHelper.overrideComponentsOpacityByObjectData(this.setFloorOpacity(), 0.4) |
|
// this.reload = 3; |
|
// return |
|
// } |
|
else if ( |
|
height >= 200000 && |
|
height < 300000 && |
|
this.reload != 3 && |
|
this.floorBqShow |
|
) { |
|
this.monitoring = false; |
|
bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭 |
|
bfHelper.cancelSelected(); // 清除选中状态 |
|
bfHelper.clearDrawableContainer(); //清除外部标签 |
|
this.threeBtn(this.towerIndex); |
|
this.reload = 3; |
|
this.floorBqShow = false; |
|
this.restoreBuildColor(); |
|
this.setOpacity(); |
|
bfHelper.overrideComponentsOpacityByObjectData( |
|
this.setFloorOpacity(), |
|
0.5 |
|
); |
|
this.reload = 4; |
|
return; |
|
} else if (height < 300000 && height > 80000 && this.reload != 4) { |
|
// 显示三级标签 每号楼 |
|
this.restoreBuildColor(); |
|
this.setOpacity(); |
|
bfHelper.overrideComponentsOpacityByObjectData( |
|
this.setFloorOpacity(), |
|
0.7 |
|
); |
|
this.reload = 4; |
|
return; |
|
} else if ( |
|
height < 300000 && |
|
height > 80000 && |
|
this.reload == 100 && |
|
this.isShowAll |
|
) { |
|
// 显示三级标签 每号楼 |
|
this.isMapViewer = 0; |
|
this.monitoring = false; |
|
bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭 |
|
bfHelper.cancelSelected(); // 清除选中状态 |
|
bfHelper.clearDrawableContainer(); //清除外部标签 |
|
this.getMonitorIds("00", ""); |
|
this.build = ""; |
|
this.floor = ""; |
|
// this.getSbgk(); |
|
this.getCameraWarnList(); //告警列表 |
|
this.getSblb(); |
|
this.restoreBuildColor(); |
|
this.setOpacity(); |
|
bfHelper.overrideComponentsOpacityByObjectData( |
|
this.setFloorOpacity(), |
|
0.7 |
|
); |
|
// bfHelper.showAllComponents(); // 显示全部构件 |
|
let position = bfHelper.ywqThreeLevelPt; |
|
let num = [11, 32, 9, 18, 34, 18, 21]; |
|
for (let i = 0; i < num.length; i++) { |
|
bfHelper.customTag( |
|
position[i], |
|
null, |
|
this.monitorImgContent(num[i]) |
|
); |
|
bfHelper.customItemFun().onClick((item) => { |
|
for (let a = 0; a < position.length; a++) { |
|
if ( |
|
item.worldPosition.x == position[a].x && |
|
item.worldPosition.y == position[a].y && |
|
item.worldPosition.z == position[a].z |
|
) { |
|
// 处理点击1-6号楼 |
|
this.towerIndex = a; |
|
if (a != 6) { |
|
this.threeBtn(a); |
|
} else { |
|
// 点击地下室 |
|
this.basementBtn(a); |
|
} |
|
return; |
|
} |
|
} |
|
}); |
|
} |
|
this.reload = 4; |
|
return; |
|
} |
|
// else if (height <= 80000 && this.reload == 100 && this.isShowAll) { //别的页面放大到模型附近切换监控页面显示全部的监控图标标签 |
|
// bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭 |
|
// bfHelper.cancelSelected(); // 清除选中状态 |
|
// bfHelper.clearDrawableContainer(); //清除外部标签 |
|
// this.getMonitorIds('', '') |
|
// this.isShowAll = false |
|
// return |
|
// } |
|
}); |
|
} else { |
|
// 塔台 |
|
let origin = bfHelper.ttOrigin; //原点 |
|
let height = null; //相机与原点的两点距离 |
|
// 业务区 |
|
// console.log(this.reload) |
|
bfHelper.CameraPositionChanged((data) => { |
|
height = Math.sqrt( |
|
Math.pow(origin[0] - data.position.x, 2) + |
|
Math.pow(origin[1] - data.position.y, 2) + |
|
Math.pow(origin[2] - data.position.z, 2) |
|
); |
|
// console.log(height) |
|
|
|
if (300000 <= height && this.reload != 1) { |
|
// 显示一级标签 |
|
this.monitoring = false; |
|
bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭 |
|
bfHelper.cancelSelected(); // 清除选中状态 |
|
bfHelper.clearDrawableContainer(); //清除外部标签 |
|
// bfHelper.showAllComponents(); // 显示全部构件 |
|
let position = bfHelper.ttStairPt; |
|
bfHelper.customTag(position, null, this.monitorImgContent(69)); |
|
this.reload = 1; |
|
return; |
|
} else if (height < 300000 && height >= 200000 && this.reload != 2) { |
|
// 显示二级标签 |
|
this.monitoring = false; |
|
bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭 |
|
bfHelper.cancelSelected(); // 清除选中状态 |
|
bfHelper.clearDrawableContainer(); //清除外部标签 |
|
// 塔台+室外整体+辅楼(1层+2层) |
|
// 根据筛选条件显示构件 |
|
bfHelper.showComponentsByObjectData([ |
|
{ |
|
fileId: this.fileId[1], |
|
family: "楼板", |
|
}, |
|
{ |
|
fileId: this.fileId[1], |
|
family: "基本墙", |
|
}, |
|
{ |
|
fileId: this.fileId[0], |
|
family: "楼板", |
|
}, |
|
{ |
|
fileId: this.fileId[0], |
|
family: "基本墙", |
|
}, |
|
{ |
|
categoryId: "-2003400", //外墙 甜甜筒 |
|
fileId: this.fileId[0], |
|
}, |
|
]); |
|
let position = bfHelper.ttSecondLevelPt; |
|
let num = [35, 21, 9, 4]; |
|
for (let i = 0; i < num.length; i++) { |
|
bfHelper.customTag( |
|
position[i], |
|
null, |
|
this.monitorImgContent(num[i]) |
|
); |
|
bfHelper.customItemFun().onClick((item) => { |
|
// 不显示三级标签 |
|
this.reload = null; //滑动滚轮开启重新加载标签 |
|
bfHelper.clearDrawableContainer(); //清除所有标签 |
|
bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭 |
|
|
|
if ( |
|
item.worldPosition.x == position[0].x && |
|
item.worldPosition.y == position[0].y && |
|
item.worldPosition.z == position[0].z |
|
) { |
|
// 点击塔台 |
|
// 添加标签 |
|
this.getMonitorIds("08", ""); |
|
this.floorBqShow = true; |
|
return; |
|
} else if ( |
|
item.worldPosition.x == position[1].x && |
|
item.worldPosition.y == position[1].y && |
|
item.worldPosition.z == position[1].z |
|
) { |
|
// 点击室外整体 |
|
// 添加标签 |
|
this.getMonitorIds("00", ""); |
|
this.floorBqShow = true; |
|
return; |
|
} else if ( |
|
item.worldPosition.x == position[2].x && |
|
item.worldPosition.y == position[2].y && |
|
item.worldPosition.z == position[2].z |
|
) { |
|
// 点击辅楼第一层 |
|
// 根据筛选条件隐藏构件/隐藏当前楼全部构件 |
|
bfHelper.hideComponentsByObjectData([ |
|
{ |
|
fileId: this.fileId[0], |
|
}, |
|
{ |
|
fileId: this.fileId[1], |
|
}, |
|
]); |
|
// 根据筛选条件显示构件 |
|
bfHelper.showComponentsByObjectData([ |
|
{ |
|
fileId: this.fileId[1], |
|
levelName: "L1", |
|
family: "楼板", |
|
}, |
|
{ |
|
fileId: this.fileId[1], |
|
levelName: "L1", |
|
family: "基本墙", |
|
}, |
|
]); |
|
this.getMonitorIds("09", "01"); |
|
this.floorBqShow = true; |
|
return; |
|
} else { |
|
// 点击辅楼第二层 |
|
|
|
// 根据筛选条件隐藏构件/隐藏当前楼全部构件 |
|
bfHelper.hideComponentsByObjectData([ |
|
{ |
|
fileId: this.fileId[0], |
|
}, |
|
{ |
|
fileId: this.fileId[1], |
|
}, |
|
]); |
|
// 根据筛选条件显示构件 |
|
bfHelper.showComponentsByObjectData([ |
|
{ |
|
fileId: this.fileId[1], |
|
levelName: "L1", |
|
family: "楼板", |
|
}, |
|
{ |
|
fileId: this.fileId[1], |
|
levelName: "L1", |
|
family: "基本墙", |
|
}, |
|
{ |
|
fileId: this.fileId[1], |
|
levelName: "L2", |
|
family: "楼板", |
|
}, |
|
{ |
|
fileId: this.fileId[1], |
|
levelName: "L2", |
|
family: "基本墙", |
|
}, |
|
]); |
|
|
|
this.getMonitorIds("09", "02"); |
|
|
|
this.floorBqShow = true; |
|
} |
|
}); |
|
} |
|
this.reload = 2; |
|
} |
|
}); |
|
} |
|
}, |
|
// 点击1-6楼三级标签 |
|
threeBtn(index) { |
|
// console.log(index) |
|
this.build = "0" + (index + 1); |
|
this.floor = ""; |
|
// this.getSbgk(); |
|
this.getCameraWarnList(); //告警列表 |
|
this.getSblb(); |
|
bfHelper.setCameraAnimation(false); |
|
// 根据筛选条件隐藏构件 |
|
bfHelper.showComponentsByObjectData([ |
|
{ |
|
fileId: this.tower[index], |
|
// 'levelName': `${b+1}F`, |
|
family: "楼板", |
|
}, |
|
{ |
|
fileId: this.tower[index], |
|
// 'levelName': `${b+1}F`, |
|
family: "基本墙", |
|
}, |
|
]); |
|
bfHelper.mapDestroy(); |
|
bfHelper.navigationMap( |
|
".mapDom", |
|
require("../../../public/img/monitoring/mapviewer/electricity" + |
|
(index + 1) + |
|
"b.png"), |
|
1, |
|
1 |
|
); |
|
|
|
this.buildMessage = index + 1 + "号楼"; |
|
bfHelper.setCameraStatus(this.cameraPosition[index]).then(() => { |
|
// console.log('kkkkk') |
|
this.reload = null; |
|
bfHelper.clearDrawableContainer(); //清除所有标签 |
|
// return |
|
|
|
for (let n = 0; n < this.floorNum.length; n++) { |
|
let position = this.position[n]; //1-6号楼每层标签点位 |
|
for (let i = 0; i < this.floorNum[n].length; i++) { |
|
if (this.floorNum[n][i] != 0) { |
|
bfHelper.customTag( |
|
position[i], |
|
null, |
|
this.monitorImgContent(this.floorNum[n][i]) |
|
); |
|
} |
|
|
|
bfHelper.customItemFun().onClick((item) => { |
|
// console.log(bfHelper.getBoxMessage('10000753466346.2674262', true).max) |
|
for (let a = 0; a < position.length; a++) { |
|
this.floorBqShow = true; //允许添加楼层标签 |
|
if ( |
|
item.worldPosition.x == position[a].x && |
|
item.worldPosition.y == position[a].y && |
|
item.worldPosition.z == position[a].z |
|
) { |
|
// console.log(n,a) |
|
bfHelper.mapDestroy(); |
|
bfHelper.navigationMap( |
|
".mapDom", |
|
require("../../../public/img/monitoring/mapviewer/monitor" + |
|
(n + 1) + |
|
"b" + |
|
(a + 1) + |
|
"f.png"), |
|
n + 1, |
|
a + 1 |
|
); |
|
|
|
this.buildMessage = n + 1 + "号楼" + (a + 1) + "层"; |
|
this.build = "0" + (n + 1); |
|
this.floor = "0" + (a + 1); |
|
// this.getSbgk(); |
|
this.getCameraWarnList(); //告警列表 |
|
this.getSblb(); |
|
// 根据筛选条件隐藏构件/隐藏当前楼全部构件 |
|
bfHelper.hideComponentsByObjectData([ |
|
{ |
|
fileId: this.tower[n], |
|
}, |
|
]); |
|
// 根据筛选条件隐藏构件 |
|
for (let b = 0; b < position.length; b++) { |
|
if (b <= a) { |
|
// 根据筛选条件显示构件 |
|
bfHelper.showComponentsByObjectData([ |
|
{ |
|
fileId: this.tower[n], |
|
levelName: `${b + 1}F`, |
|
family: "楼板", |
|
}, |
|
{ |
|
fileId: this.tower[n], |
|
levelName: `${b + 1}F`, |
|
family: "基本墙", |
|
}, |
|
]); |
|
// 根据筛选条件隐藏构件 |
|
bfHelper.hideComponentsByObjectData([ |
|
{ |
|
fileId: this.tower[n], |
|
levelName: "1F", |
|
familyType: "建筑-50mm", |
|
}, |
|
{ |
|
fileId: this.tower[n], |
|
levelName: "1F", |
|
familyType: "建筑-400mm", |
|
}, |
|
{ |
|
fileId: this.tower[n], |
|
levelName: "1F", |
|
familyType: "常规 - 300mm", |
|
}, |
|
]); |
|
} |
|
} |
|
this.getMonitorIds("0" + (n + 1), "0" + (a + 1)); |
|
} |
|
} |
|
}); |
|
} |
|
} |
|
}); |
|
}, |
|
// 点击地下室 |
|
basementBtn(index) { |
|
this.reload = null; |
|
this.build = "07"; |
|
this.floor = ""; |
|
// this.getSbgk(); |
|
this.getCameraWarnList(); //告警列表 |
|
this.getSblb(); |
|
bfHelper.setCameraAnimation(false); |
|
bfHelper.setCameraStatus(this.cameraPosition[index]).then(() => { |
|
// 隐藏1-6+地下室 |
|
for (let i = 0; i < this.tower.length; i++) { |
|
bfHelper.hideComponentsByObjectData([ |
|
{ |
|
fileId: this.tower[i], |
|
}, |
|
]); |
|
} |
|
|
|
bfHelper.clearDrawableContainer(); //清除所有标签 |
|
bfHelper.mapDestroy(); |
|
bfHelper.navigationMap( |
|
".mapDom", |
|
require("../../../public/img/monitoring/mapviewer/electricity7b.png"), |
|
7, |
|
1 |
|
); |
|
|
|
this.buildMessage = "地下室"; |
|
bfHelper.showComponentsByObjectData([ |
|
{ |
|
fileId: this.tower[this.tower.length - 1], |
|
family: "基本墙", |
|
}, |
|
{ |
|
fileId: this.tower[this.tower.length - 1], |
|
familyType: "人防底板400mm", |
|
}, |
|
]); |
|
this.getMonitorIds("07", ""); |
|
}); |
|
}, |
|
// 添加标签 |
|
addBq( |
|
positions, |
|
camera, |
|
status, |
|
arr, |
|
condition, |
|
num, |
|
location, |
|
name, |
|
code |
|
) { |
|
// 根据筛选条件显示构件 |
|
bfHelper.showComponentsByObjectData(condition); |
|
// // 根据筛选条件加入选中集合 |
|
bfHelper.setSelectedById(arr); |
|
// // // // 设置视角为俯视 |
|
if (this.bimModel == 2) { |
|
bfHelper.setCameraStatus(camera[0]); |
|
} else { |
|
if ( |
|
(this.bimModel == 1 && name == "园区") || |
|
(this.bimModel == 1 && name == "整体") |
|
) { |
|
} else { |
|
if (camera && JSON.stringify(camera[0]) != "{}") { |
|
bfHelper.setCameraStatus(camera[0]); |
|
} else { |
|
if (code == "22") { |
|
} else { |
|
bfHelper.setCameraView(location ? location : "Top"); |
|
// 缩放到加入选中集合的构件 |
|
bfHelper.zoomToSelectedComponents(); |
|
} |
|
} |
|
} |
|
} |
|
if (this.bimModel == 1 && name == "园区") { |
|
} else { |
|
//清除所有标签 |
|
bfHelper.clearDrawableContainer(); |
|
} |
|
|
|
// // 选中的集合构件id（也就是所有摄像的Id） |
|
let selectComponentId = bfHelper.getselectGather(); |
|
if (this.bimModel == 1 && name != "整体") { |
|
for (let b = 0; b < selectComponentId.length; b++) { |
|
for (let r = 0; r < positions.length; r++) { |
|
if (selectComponentId[b] == positions[r].id) { |
|
let content = `<div class="leadTips" style="transform: translateY(-40px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img id='monitor${selectComponentId[b]}' alt='${status[b]}' |
|
class = 'montorImg' src="${require(status[b] == 90000 |
|
? "../../../public/img/monitoring/electricity/camera11.png" |
|
: status[b] == 90001 |
|
? "../../../public/img/monitoring/electricity/camera-off.png" |
|
: "../../../public/img/monitoring/electricity/camera-bj.png")}" style="width:40px;height:40px;"/> |
|
</div> |
|
</div>`; |
|
// console.log(positions[r].bounding.max) |
|
bfHelper.customTag( |
|
positions[r].bounding.max, |
|
null, |
|
content, |
|
selectComponentId[b] |
|
); |
|
bfHelper.customItemFun().onClick((item) => { |
|
this.classList = document.getElementsByClassName("montorImg"); |
|
bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭 |
|
// 设置视角为俯视 |
|
let id = item.layerId; |
|
let index = id.lastIndexOf("."); |
|
id = id.substring(index + 1, id.length); |
|
getmonData(this.bimModel, id).then((res) => { |
|
// console.log(res) |
|
if (res.data.data.status != 90001) { |
|
this.codeId = res.data.data.thirdId; |
|
this.currentItem = item.layerId; |
|
this.monitoring = true; |
|
this.monitor = false; |
|
this.isMon = res.data.data.agentViewHis; |
|
} else { |
|
this.$message.warning("设备离线，不可查看"); |
|
} |
|
}); |
|
}); |
|
} |
|
} |
|
} |
|
} else { |
|
for (let b = 0; b < selectComponentId.length; b++) { |
|
let content = `<div class="leadTips" style="transform: translateY(-40px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img id='monitor${selectComponentId[b]}' alt='${status[b]}' |
|
class = 'montorImg' src="${require(status[b] == 90000 |
|
? "../../../public/img/monitoring/electricity/camera11.png" |
|
: status[b] == 90001 |
|
? "../../../public/img/monitoring/electricity/camera-off.png" |
|
: "../../../public/img/monitoring/electricity/camera-bj.png")}" style="width:40px;height:40px;"/> |
|
</div> |
|
</div>`; |
|
|
|
if ( |
|
JSON.stringify( |
|
bfHelper.getBoxMessage(selectComponentId[b], true).max.x |
|
) != "null" |
|
) { |
|
bfHelper.customTag( |
|
bfHelper.getBoxMessage(selectComponentId[b], true).max, |
|
null, |
|
content, |
|
selectComponentId[b] |
|
); |
|
bfHelper.customItemFun().onClick((item) => { |
|
this.classList = document.getElementsByClassName("montorImg"); |
|
bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭 |
|
// 设置视角为俯视 |
|
let id = item.layerId; |
|
let index = id.lastIndexOf("."); |
|
id = id.substring(index + 1, id.length); |
|
getmonData(this.bimModel, id).then((res) => { |
|
// console.log(res) |
|
if (res.data.data.status != 90001) { |
|
this.codeId = res.data.data.thirdId; |
|
this.currentItem = item.layerId; |
|
this.monitoring = true; |
|
this.monitor = false; |
|
this.isMon = res.data.data.agentViewHis; |
|
} else { |
|
this.$message.warning("设备离线，不可查看"); |
|
} |
|
}); |
|
}); |
|
} |
|
} |
|
} |
|
}, |
|
// 点击操作跳转监控页 |
|
getMonitorIds(build, floor, code) { |
|
getMonitoringList(this.bimModel, build, floor).then((res) => { |
|
// bfHelper.clearDrawableContainer(); |
|
const data = res.data.data; |
|
let idArr = []; |
|
let statusArr = []; |
|
for (let d = 0; d < data.length; d++) { |
|
if (data[d].modelId == "" || data[d].modelId == "模型无") { |
|
} else { |
|
if (this.bimModel == 2 && build == "00") { |
|
let id = bfHelper.disposeId(data[d].area, "10", data[d].modelId); |
|
idArr.push(id); |
|
} else { |
|
let id = bfHelper.disposeId( |
|
data[d].area, |
|
data[d].build, |
|
data[d].modelId |
|
); |
|
idArr.push(id); |
|
} |
|
let status = data[d].status; |
|
|
|
statusArr.push(status); |
|
} |
|
} |
|
let condition = JSON.parse(JSON.stringify(this.condition)); |
|
for (let c = 0; c < condition.length; c++) { |
|
if (this.bimModel == 1) { |
|
if (build == "07") { |
|
let obj = { |
|
levelName: "B1", |
|
fileId: this.tower[this.tower.length - 1], |
|
}; |
|
Object.assign(condition[c], obj); |
|
} else if (build == "00") { |
|
let obj = { |
|
fileId: this.tower[6], |
|
}; |
|
Object.assign(condition[c], obj); |
|
} else { |
|
let obj = { |
|
levelName: `${Number(floor)}F`, |
|
fileId: this.tower[Number(build)], |
|
}; |
|
Object.assign(condition[c], obj); |
|
} |
|
} else { |
|
if (build == "08") { |
|
let obj = { |
|
fileId: this.fileId[0], |
|
}; |
|
Object.assign(condition[c], obj); |
|
} else if (build == "00") { |
|
let obj = { |
|
fileId: this.fileId[2], |
|
}; |
|
Object.assign(condition[c], obj); |
|
} else if (build == "09" && floor == "01") { |
|
let obj = { |
|
levelName: "L1", |
|
fileId: this.fileId[1], |
|
}; |
|
Object.assign(condition[c], obj); |
|
} else if (build == "09" && floor == "02") { |
|
let obj = { |
|
levelName: "L2", |
|
fileId: this.fileId[1], |
|
}; |
|
Object.assign(condition[c], obj); |
|
} |
|
} |
|
} |
|
|
|
if (this.bimModel == 1) { |
|
if (build == "07") { |
|
this.addBq( |
|
this.monitorPosition[6][0], |
|
null, |
|
statusArr, |
|
idArr, |
|
condition |
|
); |
|
} else if (build == "00") { |
|
this.addBq( |
|
this.monitorPosition[7][0], |
|
null, |
|
statusArr, |
|
idArr, |
|
condition, |
|
null, |
|
null, |
|
"园区" |
|
); |
|
} else if (build == "") { |
|
this.addBq(null, null, statusArr, idArr, null, null, null, "整体"); |
|
} else { |
|
// if(code == '22'){ |
|
// this.addBq(null,null, statusArr,idArr, condition); |
|
// }else{ |
|
this.addBq( |
|
this.monitorPosition[Number(build) - 1][Number(floor) - 1], |
|
null, |
|
statusArr, |
|
idArr, |
|
condition, |
|
null, |
|
null, |
|
null, |
|
code |
|
); |
|
// } |
|
} |
|
} else { |
|
if (build == "08") { |
|
const cameraTower = [ |
|
{ |
|
aspect: 1.889763779527559, |
|
coordinateSystem: "world", |
|
far: 195615.69644792317, |
|
fov: 45, |
|
name: "persp", |
|
near: 110180.26708172823, |
|
position: { |
|
x: -39548.89957187824, |
|
y: -525993.6238512459, |
|
z: 38640.62510066625, |
|
}, |
|
target: { |
|
x: -20545.351813693076, |
|
y: 372241.2560735995, |
|
z: 24669.065657504725, |
|
}, |
|
up: { |
|
x: 0.00032889260186363527, |
|
y: 0.015545622433294026, |
|
z: 0.9998791054186591, |
|
}, |
|
version: 1, |
|
zoom: 1, |
|
}, |
|
]; |
|
this.addBq( |
|
null, |
|
cameraTower, |
|
statusArr, |
|
idArr, |
|
condition, |
|
1, |
|
"SouthTop", |
|
"塔台" |
|
); |
|
} else if (build == "00") { |
|
const cameraTower = [ |
|
{ |
|
aspect: 1.889763779527559, |
|
coordinateSystem: "world", |
|
far: 157731.7844962148, |
|
fov: 45, |
|
name: "persp", |
|
near: 23980.735698856108, |
|
position: { |
|
x: -43387.090990135286, |
|
y: -444311.8364162102, |
|
z: 102427.03554761136, |
|
}, |
|
target: { |
|
x: -34968.59598398651, |
|
y: 77332.86680249915, |
|
z: -629145.3609791917, |
|
}, |
|
up: { |
|
x: 0.013137746075591192, |
|
y: 0.8140689058752524, |
|
z: 0.5806196828519705, |
|
}, |
|
version: 1, |
|
zoom: 1, |
|
}, |
|
]; |
|
this.addBq( |
|
null, |
|
cameraTower, |
|
statusArr, |
|
idArr, |
|
condition, |
|
null, |
|
null, |
|
"塔台" |
|
); |
|
} else { |
|
const cameraTower = [ |
|
{ |
|
aspect: 1.889763779527559, |
|
coordinateSystem: "world", |
|
far: 97604.44561389177, |
|
fov: 45, |
|
name: "persp", |
|
near: 10.369999998297162, |
|
position: { |
|
x: -56007.33936157323, |
|
y: -389985.3790084629, |
|
z: 74901.75652403604, |
|
}, |
|
target: { |
|
x: -52864.50486469997, |
|
y: -170453.7668408688, |
|
z: -796406.5888191625, |
|
}, |
|
up: { |
|
x: 0.013880729883673048, |
|
y: 0.9695892196104088, |
|
z: 0.24434416414797946, |
|
}, |
|
version: 1, |
|
zoom: 1, |
|
}, |
|
]; |
|
this.addBq( |
|
null, |
|
cameraTower, |
|
statusArr, |
|
idArr, |
|
condition, |
|
null, |
|
null, |
|
"塔台" |
|
); |
|
// bfHelper.setCameraStatus(cameraTower) |
|
} |
|
} |
|
}); |
|
}, |
|
goMonitoring(row) { |
|
const { href } = this.$router.resolve({ |
|
path: "/garden/monitoring", |
|
query: { |
|
id: row.thirdId, |
|
name: row.name, |
|
jurisdiction: row.agentViewHis, |
|
}, |
|
}); |
|
window.open(href, "_blank"); |
|
}, |
|
// 点击回放按钮 |
|
playBack() { |
|
let currentId = this.currentItem; |
|
let currentIndex = currentId.lastIndexOf("."); |
|
currentId = currentId.substring(currentIndex + 1, currentId.length); |
|
if (this.isMon == 1) { |
|
getmonData(this.bimModel, currentId).then((res) => { |
|
const { href } = this.$router.resolve({ |
|
path: "/garden/monitoring", |
|
query: { |
|
id: res.data.data.thirdId, |
|
name: res.data.data.name, |
|
}, |
|
}); |
|
window.open(href, "_blank"); |
|
}); |
|
} else { |
|
this.$message.error("没有回放权限！"); |
|
} |
|
}, |
|
|
|
// 点击关闭按钮 |
|
closeView() { |
|
this.monitoring = false; |
|
}, |
|
|
|
// 构件点击 |
|
onClick() { |
|
bfHelper.onClick((data) => { |
|
let colorArr = []; |
|
let modelId = data.objectId; |
|
colorArr.push(modelId); |
|
let index = modelId.lastIndexOf("."); |
|
modelId = modelId.substring(index + 1, modelId.length); |
|
getmonData(this.bimModel, modelId).then((res) => { |
|
let tmp = JSON.stringify(res.data.data); |
|
if (tmp === "{}") { |
|
} else { |
|
if (res.data.data.status == 90001) { |
|
this.$message.warning("设备离线，不可查看"); |
|
} else { |
|
bfHelper.restoreComponentsColorByObjectData(this.condition); |
|
bfHelper.setColor("#07e6ed", colorArr); |
|
this.codeId = res.data.data.thirdId; |
|
this.monitoring = true; |
|
this.isMon = res.data.data.agentViewHis; |
|
this.currentItem = data.objectId; |
|
} |
|
} |
|
}); |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.door { |
|
|
|
// 设备概况 |
|
.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 { |
|
box-sizing: border-box; |
|
background: url(../../../public/img/monitoring/electricity/normal.png) no-repeat; |
|
background-size: cover; |
|
width: 176px; |
|
height: 78px; |
|
} |
|
|
|
.lx { |
|
box-sizing: border-box; |
|
background: url(../../../public/img/monitoring/electricity/guzhangbg.png) no-repeat; |
|
background-size: cover; |
|
width: 176px; |
|
height: 78px; |
|
} |
|
} |
|
|
|
.stateName { |
|
margin: 5px 0 20px; |
|
color: #2cd52c; |
|
font-size: 14px; |
|
display: flex; |
|
justify-content: space-around; |
|
|
|
.lx { |
|
color: #ec9b28; |
|
} |
|
} |
|
|
|
.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; |
|
} |
|
|
|
span { |
|
color: silver; |
|
} |
|
} |
|
|
|
.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%; |
|
text-align: center; |
|
|
|
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; |
|
} |
|
} |
|
|
|
.monitoring2 { |
|
z-index: 99; |
|
position: absolute; |
|
right: 2.5rem; |
|
top: 5.875rem; |
|
width: 404px; |
|
height: 340px; |
|
background-image: url(../../../public/img/monitoring/doorBg3.png); |
|
background-size: 100% 100%; |
|
|
|
.title { |
|
margin: 1rem 0 1.5rem 1.25rem; |
|
color: #fff; |
|
font-size: 1rem; |
|
|
|
img { |
|
display: block; |
|
width: 1.437rem; |
|
height: 1.437rem; |
|
margin-right: 0.438rem; |
|
} |
|
} |
|
|
|
.btn_box { |
|
display: flex; |
|
float: right; |
|
margin-right: 35px; |
|
margin-top: 10px; |
|
|
|
.btn { |
|
width: 60px; |
|
height: 30px; |
|
border: 1px solid rgb(0, 187, 255); |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
color: #c3e1ea; |
|
margin-left: 20px; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
|
|
.tab2 { |
|
position: absolute; |
|
right: 2.5rem; |
|
top: 30rem; |
|
width: 404px; |
|
height: 309px; |
|
background-image: url(../../../public/img/monitoring/doorBg3.png); |
|
background-size: 100% 100%; |
|
|
|
.title { |
|
margin: 1rem 0 2rem 1.25rem; |
|
color: #fff; |
|
font-size: 1rem; |
|
|
|
img { |
|
display: block; |
|
width: 1.375rem; |
|
margin-right: 0.438rem; |
|
} |
|
} |
|
|
|
.mapDom { |
|
width: 370px; |
|
height: 200px; |
|
margin: 45px auto 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; |
|
|
|
.mon_box { |
|
width: 100%; |
|
} |
|
|
|
/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: 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>
|
|
|