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.
1883 lines
62 KiB
1883 lines
62 KiB
<template> |
|
<!-- 门禁 --> |
|
<div v-if="doorState" class="door"> |
|
<!-- 各楼栋楼层切换 --> |
|
<clickCp :bimModel="bimModel" sbType="电子门禁" ref="clickcp" :conditions="condition"></clickCp> |
|
<!-- 返回主视角 --> |
|
<backHome :bimModel="bimModel" type="电子门禁" :condition="condition" dom=".mapDom"></backHome> |
|
<div class="mapDom" style=" |
|
position: absolute; |
|
left: 105px; |
|
top: 370px; |
|
width: 250px; |
|
height: 180px; |
|
" v-if="bimModel == 1"></div> |
|
<div class="searchDoors" style="padding: 15px; background-repeat: no-repeat" |
|
:style="{ top: bimModel == 1 ? '250px' : '260px' }"> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border1" |
|
style="width: 15px; height: 15px" /> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border2" |
|
style="width: 15px; height: 15px" /> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border3" |
|
style="width: 15px; height: 15px" /> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border4" |
|
style="width: 15px; height: 15px" /> |
|
<div> |
|
<span style="font-size: 13px; color: rgb(1, 238, 255)">设备名称：</span> |
|
<el-select v-model="doorName" placeholder="请选择" style=" |
|
background-color: rgb(19, 63, 160); |
|
width: 150px; |
|
max-height: 200px; |
|
" size="mini" v-loadmore="loadMore" popper-class="pull" :popper-append-to-body="false"> |
|
<el-option v-for="(item, key) in sbLists1" :key="key" :label="item.name" :value="item.name"> |
|
</el-option> |
|
</el-select> |
|
</div> |
|
<div style="margin-top: 15px; display: flex; justify-content: space-around"> |
|
<el-button style=" |
|
background-color: rgb(1, 238, 255); |
|
color: rgb(23, 72, 167); |
|
border: 0; |
|
width: 80px; |
|
" size="small" @click="searchDoor">查询</el-button> |
|
<el-button style=" |
|
background-color: white; |
|
color: rgb(23, 72, 167); |
|
border: 0; |
|
width: 80px; |
|
" size="small" @click="searchDetail">详细查询</el-button> |
|
</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' }"> |
|
<!-- <span>系统报警 <span class="circle"></span> <span>(4)</span></span> --> |
|
<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 class="tab_one tab_two" @click="clickAlarm(2)" :style="{color: isSafe ? 'red' :'#fff'}"><el-badge :is-dot='isSafe' class="item">安全报警</el-badge><span style="margin-left:5px;vertical-align: bottom;">({{safeTotal}})</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 && |
|
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 class="item flex-center" @mouseenter="showAlarkAlert(item, index, 0)" style="position: relative" |
|
@mouseleave="closeAlarkAlert(item, index, 0)" v-for="(item, index) in listData.warnEquipList" :key="index" |
|
v-if="activeTab == 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" :class="bimModel == 2 ? 'tataicon' : ''"> |
|
<div class="left flex-center-center"> |
|
<img class="icon" :src=" |
|
require(item.warnStatus == 2 |
|
? '../../../public/img/monitoring/electricity/lx.png' |
|
: '../../../public/img/monitoring/electricity/bj.png') |
|
" /> |
|
<span class="message" v-text="item.name" :title="item.name" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white', |
|
}"></span> |
|
</div> |
|
<span class=""></span> |
|
<span class="data" :title="item.warnContent" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white', |
|
}">{{ item.warnContent }}</span> |
|
<span class=""></span> |
|
<span class="time" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white', |
|
}">{{ item.warnDate.substring(5, 16) }}</span> |
|
</div> |
|
</div> |
|
<div class="item flex-center" v-for="(item, index) in listData.warnEventList" :key="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 == 1 && item.modelId != ''">|</span> |
|
<p v-if="item.confirmStatus == 1" @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=" |
|
require(item.warnStatuss == 2 |
|
? '../../../public/img/monitoring/electricity/lx.png' |
|
: '../../../public/img/monitoring/electricity/bj.png') |
|
" /> |
|
<span class="message" v-text="item.name" :title="item.name" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white', |
|
}"></span> |
|
</div> |
|
<span class=""></span> |
|
<span class="data" :title="item.warnContent" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white', |
|
}">{{ item.warnContent }}</span> |
|
<span class=""></span> |
|
<span class="time" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : '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="door_box">设备列表</span> |
|
</div> |
|
<div class="tabBox"> |
|
<el-table @row-click="tableClick" :data="tableData" style=" |
|
width: 100%; |
|
cursor: pointer; |
|
background-color: transparent; |
|
max-height: 220px; |
|
" :class="bimModel == 2 ? 'tataitab' : ''" @row-contextmenu="tableContext"> |
|
<el-table-column label="设备名称" min-width="110px" align="left"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center dev_name" style="overflow: hidden; white-space: nowrap"> |
|
<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' |
|
: 'red', |
|
}" style=" |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
" :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="80"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center"> |
|
<span style="padding-left: 10px" :style="{ |
|
color: |
|
scope.row.status == 90000 |
|
? 'white' |
|
: scope.row.status == 90001 |
|
? '#a5bbe5' |
|
: 'red', |
|
}">{{ scope.row.dataInNum }}/{{ scope.row.dataOutNum }}</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="|" width="5"> </el-table-column> |
|
<el-table-column label="状态" width="80"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center"> |
|
<span style="padding-left: 10px" :style="{ |
|
color: |
|
scope.row.status == 90000 |
|
? 'white' |
|
: scope.row.status == 90001 |
|
? '#a5bbe5' |
|
: 'red', |
|
}">{{ |
|
scope.row.status == 90000 |
|
? "正常" |
|
: scope.row.status == 90001 |
|
? "离线" |
|
: "报警" |
|
}}</span> |
|
</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 class="search-list" style="left: 480px; top: 150px; padding: 15px; width: 800px" v-if="isSearch"> |
|
<div class="search-list-top" style=" |
|
display: flex; |
|
width: 100%; |
|
justify-content: space-between; |
|
align-items: flex-end; |
|
"> |
|
<div> |
|
<p style="font-size: 13px; color: rgb(1, 238, 255); margin-bottom: 7px"> |
|
设备名称 |
|
</p> |
|
<el-select v-model="doorName1" placeholder="请选择" style="width: 120px" size="mini"> |
|
<el-option v-for="(item, key) in sbLists" :key="key" :label="item.name" :value="item.name"> |
|
</el-option> |
|
</el-select> |
|
</div> |
|
<div> |
|
<p style="font-size: 13px; color: rgb(1, 238, 255); margin-bottom: 7px"> |
|
通过人员 |
|
</p> |
|
<el-input placeholder="请输入人员名称" v-model="userName" size="mini" /> |
|
</div> |
|
<div> |
|
<p style="font-size: 13px; color: rgb(1, 238, 255); margin-bottom: 7px"> |
|
通过时间 |
|
</p> |
|
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="" end-placeholder="" size="mini" |
|
style="width: 300px" format="MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"> |
|
</el-date-picker> |
|
</div> |
|
<!-- <div> |
|
<p style="font-size: 13px;color: rgb(1,238,255);margin-bottom: 7px;">通过时间</p> |
|
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="" end-placeholder="" |
|
size="mini" style="width: 300px;" format="MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"> |
|
</el-date-picker> |
|
</div> --> |
|
<el-button style=" |
|
background-color: rgb(1, 238, 255); |
|
color: rgb(23, 72, 167); |
|
border: 0; |
|
width: 80px; |
|
height: 35px; |
|
" size="mini" @click="searchDevice">查询</el-button> |
|
</div> |
|
|
|
<div class="search-list-table" style="overflow: hidden; margin-top: 20px"> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border1" |
|
style="width: 15px; height: 15px" /> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border2" |
|
style="width: 15px; height: 15px" /> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border3" |
|
style="width: 15px; height: 15px" /> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border4" |
|
style="width: 15px; height: 15px" /> |
|
<img src="../../../public/img/monitoring/electricity/close-cha.png" |
|
style="position: absolute; right: 3px; top: 3px" @click="closeSearch" /> |
|
<!-- <p style="margin: 15px 0 10px 15px">详细信息</p> --> |
|
<el-table :data="searchLists" stripe style="background-color: transparent; width: 100%; color: white" |
|
:show-header="false" :row-style="rowStyle"> |
|
<el-table-column prop="name" label="设备名称"> </el-table-column> |
|
<el-table-column prop="cardName" label="通过人员"> </el-table-column> |
|
<el-table-column prop="inOutFlag" label="进出标志"> |
|
<template slot-scope="scope">{{scope.row.inOutFlag == 1 ? "出" : "进"}}</template> |
|
</el-table-column> |
|
<el-table-column prop="accessTime" label="通过时间"> |
|
</el-table-column> |
|
</el-table> |
|
<!-- 分页 --> |
|
<div class="pagination"> |
|
<el-pagination background @current-change="handleCurrentChange1" :current-page.sync="current1" :page-size="10" |
|
layout="total, prev, pager, next" :total="total1"> |
|
</el-pagination> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import * as bfHelper from "../../util/bfHelper"; |
|
import * as commonValue from "../../util/commonValue"; |
|
import clickCp from "./clickCp"; |
|
import { |
|
getDoorSb, //门禁设备 1业务区/2塔台 |
|
getDoorJcjl, //设备列表 |
|
// getDoorGK, //报警信息 |
|
getdoorData, |
|
getDoorWarn, |
|
getDoorSbList, |
|
getDoorWarnList, //报警列表 |
|
getCancelWarn, //确认告警 |
|
recoveryWarn,//恢复告警 |
|
} from "@/api/garden/monitoring"; |
|
import backHome from "./backHome"; |
|
export default { |
|
props: { |
|
doorState: { |
|
type: Boolean, |
|
}, |
|
bimModel: { |
|
type: Number, |
|
}, |
|
}, |
|
components: { |
|
clickCp, |
|
backHome, |
|
}, |
|
|
|
data() { |
|
return { |
|
rowStyle: { |
|
backgroundColor: "transparent", |
|
height: "35px", |
|
}, |
|
listData: { |
|
warnEquipList: [], |
|
warnEventList: [], |
|
}, //报警信息 |
|
classOption: { |
|
step: 0.2, |
|
}, //报警信息滚动速度 |
|
current: 1, //当前页 |
|
current1: 1, //当前页 |
|
current2: 1, //当前页 |
|
size: 5, //每页数量 |
|
total: 0, //总条目数 |
|
total1: 0, //总条目数 |
|
tableData: [], //设备列表 |
|
// 业务区 1-6号楼+园区+运动场+室外地坪+地下室的文件id 地下室最后一个 |
|
tower: bfHelper.ywqTowerFileId, |
|
// 业务区 1-6号楼楼层标签点位（按123层） |
|
position: bfHelper.ywqFloorPt, |
|
// 业务区 每号楼的视角 |
|
cameraPosition: bfHelper.ywqCameraPosition, |
|
// 摄像头的筛选条件 |
|
condition: bfHelper.equipmentCondition2[6], |
|
|
|
// 塔台 主塔+辅楼+室外整体 |
|
fileId: bfHelper.ttTowerFileId, |
|
doorName: null, //页面上select选择器查询的设备名称 |
|
doorName1: null, //查询弹窗select选择器查询的设备名称 |
|
timeValue: null, //查询列表中选择时间 |
|
isSearch: false, //详情查询弹窗是否出现 |
|
userName: null, |
|
sbLists: [], |
|
build: null, |
|
floor: null, |
|
searshLists: [], |
|
doorId: "", |
|
isAlarm: false, |
|
isSafe: false, |
|
pages: 0, |
|
doorWarnList: [], //门禁报警列表 |
|
activeTab: 1, |
|
}; |
|
}, |
|
watch: { |
|
bimModel: { |
|
handler(newVal, oldVal) { |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
this.getData(); |
|
}, |
|
}, |
|
//模型是否加载完成监听 |
|
"$store.state.bfHelperState.bfState": { |
|
immediate: true, |
|
handler(newval, olval) { |
|
if (newval) { |
|
// 模型恢复全部状态 |
|
bfHelper.resetStatus(2); |
|
if (this.bimModel == 1) { |
|
window.sessionStorage.setItem( |
|
"camera", |
|
JSON.stringify(bfHelper.getCameraStatus()) |
|
); |
|
let build = sessionStorage.getItem("build"); |
|
let floor = sessionStorage.getItem("floor"); |
|
if (build) { |
|
if (build == 10) { |
|
setTimeout(() => { |
|
this.setTowerDoor("07"); |
|
this.$refs.clickcp.active = 26; |
|
this.$refs.clickcp.tower = 9; |
|
}, 300); |
|
bfHelper.lookPipeline2( |
|
this.condition, |
|
bfHelper.equipmentCopColors[8], |
|
build - 1, |
|
null, |
|
"电子门禁" |
|
); |
|
} else if (build == 26) { |
|
bfHelper.lookPipeline(null, null, this.condition, "电子门禁"); |
|
bfHelper.setOpacityFun(); |
|
setTimeout(() => { |
|
this.setTowerDoor(); |
|
}, 300); |
|
} else { |
|
if (floor.indexOf("undefined") == -1) { |
|
setTimeout(() => { |
|
this.setTowerDoor("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[8], |
|
build - 1, |
|
floor, |
|
"电子门禁" |
|
); |
|
} else { |
|
setTimeout(() => { |
|
this.setTowerDoor("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[8], |
|
build - 1, |
|
null, |
|
"电子门禁" |
|
); |
|
} |
|
} |
|
} else { |
|
// 查看管线 |
|
bfHelper.lookPipeline(null, null, this.condition, "电子门禁"); |
|
bfHelper.setOpacityFun(); |
|
this.getNavigationMap(); |
|
// this.initial() |
|
} |
|
} else { |
|
// 查看管线 |
|
window.sessionStorage.setItem( |
|
"ttcamera", |
|
JSON.stringify(bfHelper.getCameraStatus()) |
|
); |
|
let ttbuild = sessionStorage.getItem("ttbuild"); |
|
if (ttbuild) { |
|
if (ttbuild == 20) { |
|
//园区 |
|
bfHelper.TtLookEquipmentCop("电子门禁"); |
|
setTimeout(() => { |
|
this.setTowerDoor(); |
|
}, 300); |
|
} else if (ttbuild == 0) { |
|
//塔楼 |
|
setTimeout(() => { |
|
this.setTowerDoor("08"); |
|
this.$refs.clickcp.ttActive = 0; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
0, |
|
"电子门禁", |
|
this.condition |
|
); |
|
} else if (ttbuild == 1) { |
|
//辅楼1楼 |
|
setTimeout(() => { |
|
this.setTowerDoor("09", "01"); |
|
this.$refs.clickcp.ttActive = 1; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
1, |
|
"电子门禁", |
|
this.condition |
|
); |
|
} else if (ttbuild == 2) { |
|
//辅楼1楼 |
|
setTimeout(() => { |
|
this.setTowerDoor("09", "02"); |
|
this.$refs.clickcp.ttActive = 2; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
2, |
|
"电子门禁", |
|
this.condition |
|
); |
|
} else if (ttbuild == 3) { |
|
//辅楼1楼 |
|
setTimeout(() => { |
|
this.setTowerDoor("09"); |
|
this.$refs.clickcp.ttActive = 3; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
3, |
|
"电子门禁", |
|
this.condition |
|
); |
|
} |
|
} else { |
|
// 查看管线 |
|
bfHelper.TtLookEquipmentCop("电子门禁"); |
|
bfHelper.setOpacityFun1(); |
|
} |
|
} |
|
} |
|
}, |
|
}, |
|
doorId: { |
|
handler(newVal, oldVal) { |
|
for (var i = 0; i < this.doorList.length; i++) { |
|
if (newVal == this.doorList[i].id.substring(4)) { |
|
// this.doorList[i].src = '' |
|
this.doorList[i].style.display = "none"; |
|
getdoorData(this.bimModel, newVal.substring(15)).then((res) => { |
|
const item = res.data.data; |
|
let id = bfHelper.disposeId(1, item.build, item.modelId); |
|
bfHelper.customTag( |
|
bfHelper.getBoxMessage(id, true).max, |
|
null, |
|
this.doorContent(item) |
|
); |
|
this.doorCustom(item); |
|
this.addRecordData( |
|
this.bimModel, |
|
null, |
|
null, |
|
this.current1, |
|
this.size, |
|
null, |
|
item.name, |
|
null |
|
); |
|
}); |
|
|
|
// this.doorList[i].src = `${require('../../../public/img/monitoring/electricity/door22.png')}` |
|
} |
|
if (oldVal && oldVal == this.doorList[i].id.substring(4)) { |
|
this.doorList[i].style.display = "inline-block"; |
|
bfHelper.hideCustom(); |
|
if (this.doorList[i].alt == 90000) { |
|
this.doorList[ |
|
i |
|
].src = `${require("../../../public/img/monitoring/electricity/door11.png")}`; |
|
} else if (this.doorList[i].alt == 90001) { |
|
this.doorList[ |
|
i |
|
].src = `${require("../../../public/img/monitoring/electricity/door-offline.png")}`; |
|
} else { |
|
this.doorList[ |
|
i |
|
].src = `${require("../../../public/img/monitoring/electricity/door-alarm.png")}`; |
|
} |
|
} |
|
} |
|
}, |
|
}, |
|
}, |
|
created() { |
|
this.getData(); |
|
}, |
|
mounted() { |
|
let dom = document.getElementById('door_box'); |
|
dom.addEventListener('contextmenu', (event)=> { |
|
event.preventDefault(); // 阻止默认菜单 |
|
const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '1000' } }); |
|
window.open(routerUrl.href, "_blank"); |
|
}); |
|
this.getNavigationMap(); |
|
}, |
|
methods: { |
|
//确认告警 - 重新查询告警列表 |
|
doCancelWarn(item) { |
|
getCancelWarn(item.id).then((res) => { |
|
// this.getDoorWarnList2(); |
|
item.confirmStatus = 1; |
|
}); |
|
}, |
|
//恢复告警 |
|
doRecoveryWarn(item) { |
|
recoveryWarn(item.id).then((res) => { |
|
// this.getFiredWarnList(); |
|
item.warnStatus = 2; |
|
}) |
|
}, |
|
//跳转历史告警列表 |
|
goMoreWarnList() { |
|
const routerUrl = this.$router.resolve({ |
|
path: "/equipment/warnHistory", |
|
query: { classCode: "1000", area: this.bimModel }, |
|
}); |
|
window.open(routerUrl.href, "_blank"); |
|
}, |
|
// 报警记录-20221031改版 |
|
getDoorWarnList2() { |
|
getDoorWarnList({ |
|
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; |
|
} |
|
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.warnEquipList.splice(index, 1, item); |
|
} else { |
|
this.listData.warnEventList.splice(index, 1, item); |
|
} |
|
}, |
|
closeAlarkAlert(item, index, key) { |
|
item.showAlert = false; |
|
if (key == 0) { |
|
this.listData.warnEquipList.splice(index, 1, item); |
|
} else { |
|
this.listData.warnEventList.splice(index, 1, item); |
|
} |
|
}, |
|
getData() { |
|
this.getDoorWarnList2(); //this.getBjxx(); //报警信息 |
|
this.getSbwz(); //设备列表 |
|
this.getDoorWarnList(); |
|
}, |
|
|
|
clickAlarm(item) { |
|
this.activeTab = item; |
|
}, |
|
getNavigationMap() { |
|
commonValue.getNavigationMap("door"); |
|
}, |
|
// 接收子组件当前点击楼号 |
|
setTowerDoor(i, j) { |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
this.build = i; |
|
// if (j) { |
|
this.floor = j; |
|
// } |
|
this.getData(); |
|
if (i == undefined && j == undefined) { |
|
} else { |
|
this.setDoorLabel(); |
|
} |
|
|
|
if (this.bimModel == 1) { |
|
commonValue.getUpdateMap("door", i, j); |
|
} |
|
}, |
|
setDoorLabel() { |
|
//电子门禁标签 |
|
getDoorSbList( |
|
this.bimModel, |
|
this.build ? this.build : "", |
|
this.floor ? this.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 == "") { |
|
} else { |
|
let id = bfHelper.disposeId( |
|
data[d].area, |
|
data[d].build, |
|
data[d].modelId |
|
); |
|
let status = data[d].status; |
|
idArr.push(id); |
|
statusArr.push(status); |
|
} |
|
} |
|
let condition = JSON.parse(JSON.stringify(this.condition)); |
|
if (this.build == "07") { |
|
for (let c = 0; c < condition.length; c++) { |
|
let obj = { |
|
levelName: "B1", |
|
fileId: this.tower[this.tower.length - 1], |
|
}; |
|
Object.assign(condition[c], obj); |
|
} |
|
} else { |
|
if (this.build && this.floor) { |
|
for (let c = 0; c < condition.length; c++) { |
|
let obj = { |
|
levelName: `${Number(this.floor)}F`, |
|
fileId: this.tower[Number(this.build) - 1], |
|
}; |
|
Object.assign(condition[c], obj); |
|
} |
|
} else { |
|
for (let c = 0; c < condition.length; c++) { |
|
let obj = { |
|
fileId: this.tower[Number(this.build) - 1], |
|
}; |
|
Object.assign(condition[c], obj); |
|
} |
|
} |
|
} |
|
// console.log(condition) |
|
this.addBq(statusArr, idArr, condition); |
|
}); |
|
}, |
|
getDoorWarnList() { |
|
if (this.build == undefined) { |
|
this.build = null; |
|
} |
|
if (this.floor == undefined) { |
|
this.floor = null; |
|
} |
|
getDoorWarn( |
|
this.bimModel, |
|
this.build ? this.build : "", |
|
this.floor ? this.floor : "" |
|
).then((res) => { |
|
let offList = []; //离线的构件数组 |
|
let bjList = []; //报警的构件数组 |
|
const data = res.data.data; |
|
for (let i = 0; i < data.length; i++) { |
|
let id = bfHelper.disposeId( |
|
data[i].area, |
|
data[i].build, |
|
data[i].modelId |
|
); |
|
if (data[i].status == 90001) { |
|
offList.push(id); |
|
} else { |
|
bjList.push(id); |
|
} |
|
} |
|
bfHelper.setFlicker(bjList, "#ff0000", 100); |
|
bfHelper.setColor("#9d9d9d", offList); |
|
}); |
|
}, |
|
// 获取报警信息 |
|
// getBjxx() { |
|
// if (this.build == undefined) { |
|
// this.build = null; |
|
// } |
|
// if (this.floor == undefined) { |
|
// this.floor = null; |
|
// } |
|
// getDoorGK(this.bimModel, this.build ? this.build : '', this.floor ? this.floor : '').then(res => { |
|
// this.listData = res.data.data; |
|
// for (let i = 0; i < this.listData.systemWarnEquipList.length; i++) { |
|
// this.listData.systemWarnEquipList[i].showAlert = false |
|
// } |
|
// for (let i = 0; i < this.listData.safeWarnEquipList.length; i++) { |
|
// this.listData.safeWarnEquipList[i].showAlert = false |
|
// } |
|
// }) |
|
// }, |
|
// 获取门禁设备列表 |
|
getSbwz() { |
|
if (this.build == undefined) { |
|
this.build = null; |
|
} |
|
if (this.floor == undefined) { |
|
this.floor = null; |
|
} |
|
getDoorSb( |
|
this.current, |
|
this.size, |
|
this.bimModel, |
|
this.build ? this.build : "", |
|
this.floor ? this.floor : "", |
|
"" |
|
).then((res) => { |
|
this.sbLists = res.data.data.records; |
|
this.tableData = res.data.data.records; |
|
this.sbLists1 = res.data.data.records; |
|
this.total = res.data.data.total; //总条目数 |
|
let condition = JSON.parse(JSON.stringify(this.condition)); |
|
bfHelper.clearDrawableContainer(); |
|
}); |
|
}, |
|
|
|
searchDoor() { |
|
if (this.doorName) { |
|
this.isSearch = true; |
|
bfHelper.clearTags(); |
|
getDoorJcjl( |
|
this.bimModel, |
|
null, |
|
null, |
|
this.current1, |
|
this.size, |
|
null, |
|
this.doorName, |
|
null |
|
).then((res) => { |
|
this.searchLists = res.data.data.records; |
|
this.total1 = res.data.data.total; //总条目数 |
|
}); |
|
} else { |
|
this.$message({ |
|
type: "warning", |
|
message: "请选择设备名称", |
|
duration: 1500, |
|
}); |
|
} |
|
}, |
|
searchDetail() { |
|
this.isSearch = true; |
|
}, |
|
searchDevice() { |
|
let startTime = null; |
|
let endTime = null; |
|
if (this.timeValue) { |
|
startTime = this.timeValue[0]; |
|
endTime = this.timeValue[1]; |
|
} |
|
getDoorJcjl( |
|
this.bimModel, |
|
startTime ? startTime : "", |
|
endTime ? endTime : "", |
|
this.current1, |
|
this.size, |
|
this.userName, |
|
this.doorName, |
|
null |
|
).then((res) => { |
|
this.searchLists = res.data.data.records; |
|
this.total1 = res.data.data.total; //总条目数 |
|
}); |
|
}, |
|
closeSearch() { |
|
this.isSearch = false; |
|
(this.doorName1 = null), //查询弹窗select选择器查询的设备名称 |
|
(this.timeValue = null), //查询列表中选择时间 |
|
(this.userName = null); |
|
}, |
|
// 点击报警信息定位到指定设备 |
|
bjClick(item) { |
|
// |
|
bfHelper.clearDrawableContainer(); |
|
let id = bfHelper.disposeId(item.area, item.build, item.modelId); |
|
let box = bfHelper.getBoxMessage(id, true); |
|
if (box == "undefined") { |
|
return; |
|
} |
|
console.log("定位", box); |
|
bfHelper.customTag(box.max, null, this.doorContent(item)); |
|
this.doorCustom(item); |
|
this.addRecordData( |
|
this.bimModel, |
|
null, |
|
null, |
|
this.current1, |
|
this.size, |
|
null, |
|
item.name, |
|
null |
|
); |
|
if (item.build == "00") { |
|
this.$refs.clickcp.active = 25; |
|
this.$refs.clickcp.tower = null; |
|
bfHelper.mapUpdate( |
|
require("../../../public/img/monitoring/mapviewer/electricity7b.png"), |
|
bfHelper.mapViewerCamera[0][0].mapAnchors, |
|
bfHelper.mapViewerCamera[0][0].modelAnchors |
|
); |
|
bfHelper.lookPipeline(null, null, this.condition, "电子门禁"); |
|
let boundingBox = bfHelper.getBoxMessage(id); |
|
bfHelper.zoomToBoundingBox(boundingBox, 20); |
|
} else { |
|
this.$refs.clickcp.active = commonValue.activeValue( |
|
Number(item.build), |
|
Number(item.floored) |
|
); |
|
this.$refs.clickcp.tower = commonValue.towerValue(Number(item.build)); |
|
bfHelper.mapUpdate( |
|
require("../../../public/img/monitoring/mapviewer/door" + |
|
Number(item.build) + |
|
"b" + |
|
Number(item.floored) + |
|
"f.png"), |
|
bfHelper.mapViewerCamera[Number(item.build) - 1][ |
|
Number(item.floored) - 1 |
|
].mapAnchors, |
|
bfHelper.mapViewerCamera[Number(item.build) - 1][ |
|
Number(item.floored) - 1 |
|
].modelAnchors |
|
); |
|
let camera = bfHelper.cameraPosition[Number(item.build) - 1]; |
|
window.sessionStorage.setItem("camera", JSON.stringify(camera)); |
|
bfHelper.lookPipeline2( |
|
this.condition, |
|
bfHelper.equipmentCopColors[8], |
|
Number(item.build) - 1, |
|
Number(item.floored), |
|
"电子门禁" |
|
); |
|
} |
|
|
|
// bfHelper.customTag(bfHelper.getBoxMessage(id, true).max, null, this.doorContent(item)) |
|
// if(item.build == '07'){ |
|
// this.$refs.clickcp.active = 26; |
|
// this.$refs.clickcp.tower = 9; |
|
// bfHelper.mapUpdate(require('../../../public/img/monitoring/mapviewer/electricity7b.png'), bfHelper.mapViewerCamera[0][0].mapAnchors, |
|
// bfHelper.mapViewerCamera[0][0].modelAnchors); |
|
// bfHelper.lookPipeline2(null, null, 9, null, '消防', bfHelper.equipmentCondition2[1],this.checkList) |
|
// }else{ |
|
// this.$refs.clickcp.active = commonValue.activeValue(Number(item.build),Number(item.floored)); |
|
// this.$refs.clickcp.tower = commonValue.towerValue(item.build); |
|
// bfHelper.mapUpdate(require('../../../public/img/monitoring/mapviewer/water' + Number(item.build) + |
|
// 'b' + Number(item.floored) + 'f.png'), bfHelper.mapViewerCamera[Number(item.build) - 1][Number(item.floored) - 1] |
|
// .mapAnchors, bfHelper.mapViewerCamera[Number(item.build) - 1][Number(item.floored) - 1].modelAnchors); |
|
// bfHelper.lookPipeline2(null, null, (item.build) - 1, Number(item.floored) , '消防', bfHelper.equipmentCondition2[1],this.checkList) |
|
// } |
|
|
|
let camera = bfHelper.cameraPosition[Number(item.build) - 1]; |
|
window.sessionStorage.setItem("camera", JSON.stringify(camera)); |
|
|
|
bfHelper.setOpacityFun(false); |
|
}, |
|
doorContent(item) { |
|
let bgImg1 = require("../../../public/img/monitoring/electricity/liftbg2.png"); |
|
let bgImg2 = require("../../../public/img/monitoring/electricity/ktoffline.png"); |
|
let bgImg3 = require("../../../public/img/monitoring/electricity/liftbg1.png"); |
|
let content = `<div class="leadTips" style="transform: translateY(-72px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img src="${require(item.status == 90000 |
|
? "../../../public/img/monitoring/electricity/customTag1.png" |
|
: item.status == 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(item.status == |
|
90000 |
|
? "../../../public/img/monitoring/electricity/customTag1-1.png" |
|
: item.status == 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;">${item.name |
|
}</span> |
|
</div> |
|
<div id="door-block0" style="background-color:rgb(53,72,108);width:160px;position:absolute; |
|
left:90px;top:15px;padding:10px"> |
|
<div style="display:flex;justify-content: space-between;"> |
|
<span style="font-size:12px;color:silver">设备状态：</span> |
|
<span style="font-size:13px;color:${item.status == 90000 |
|
? "white" |
|
: item.status == 90001 |
|
? "#a5bbe5" |
|
: "red" |
|
}">${item.status == 90000 |
|
? "正常" |
|
: item.status == 90001 |
|
? "离线" |
|
: item.warnMsg |
|
? item.warnMsg |
|
: item.warnContent |
|
? item.warnContent |
|
: "" |
|
}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:12px;color:silver">所在位置：</span> |
|
<span style="font-size:13px;color:white">${item.location}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:12px;color:silver">固定资产编号：</span> |
|
<span style="font-size:13px;color:white">${item.inventarNummer ? item.inventarNummer : ''}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:12px;color:silver">维保人：</span> |
|
<span style="font-size:13px;color:white">${item.maintainUser ? item.maintainUser : ''}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:12px;color:silver">维保人电话：</span> |
|
<span style="font-size:13px;color:white">${item.maintainPhone ? item.maintainPhone : ''}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:12px;color:silver">维保时间：</span> |
|
<span style="font-size:13px;color:white">${item.maintainTime ? item.maintainTime.substring(0, 10) : ''}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:12px;color:silver">维保内容：</span> |
|
<span style="font-size:13px;color:white">${item.maintainDesc ? item.maintainDesc : ''}</span> |
|
</div> |
|
<div style="width:100%;height:1px;background:silver;margin:10px 0"></div> |
|
<div id="pass-user" style="max-height:125px;padding-right:5px;overflow-y:auto"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div>`; |
|
return content; |
|
}, |
|
doorCustom(item) { |
|
setTimeout(() => { |
|
document.getElementById("pass-user").addEventListener("scroll", (e) => { |
|
if (this.current1 < this.pages) { |
|
if ( |
|
e.target.scrollTop + e.target.clientHeight == |
|
e.target.scrollHeight |
|
) { |
|
this.current1++; |
|
this.addRecordData( |
|
this.bimModel, |
|
null, |
|
null, |
|
this.current1, |
|
this.size, |
|
null, |
|
item.name, |
|
null |
|
); |
|
} |
|
} |
|
}); |
|
}, 500); |
|
}, |
|
addRecordData( |
|
area, |
|
startTime, |
|
endTime, |
|
current, |
|
size, |
|
cardName, |
|
equipName, |
|
modelId |
|
) { |
|
getDoorJcjl( |
|
area, |
|
startTime, |
|
endTime, |
|
current, |
|
size, |
|
cardName, |
|
equipName, |
|
modelId |
|
).then((res) => { |
|
this.pages = res.data.data.pages; |
|
for (let j = 0; j < res.data.data.records.length; j++) { |
|
let div = document.createElement("div"); |
|
div.style.display = "flex"; |
|
div.style.justifyContent = "space-between"; |
|
div.style.marginTop = "10px"; |
|
let span = document.createElement("span"); |
|
span.style.color = "white"; |
|
span.style.fontSize = "13px"; |
|
span.innerText = res.data.data.records[j].cardName; |
|
let span1 = document.createElement("span"); |
|
span1.style.color = "white"; |
|
span1.style.fontSize = "13px"; |
|
span1.innerText = res.data.data.records[j].accessTime; |
|
div.appendChild(span); |
|
div.appendChild(span1); |
|
|
|
document.getElementById("pass-user").appendChild(div); |
|
} |
|
}); |
|
}, |
|
// 表格某行被点击 |
|
tableClick(row, column, event) { |
|
// console.log(row) |
|
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) |
|
}, |
|
// 点击查询 |
|
inquireHandle() { |
|
this.getSblb(); |
|
}, |
|
// 页码改变时触发 |
|
handleCurrentChange(val) { |
|
this.current = val; |
|
this.getSbwz(); |
|
}, |
|
// 页码改变时触发 |
|
handleCurrentChange1(val) { |
|
this.current1 = val; |
|
getDoorJcjl( |
|
this.bimModel, |
|
null, |
|
null, |
|
this.current1, |
|
this.size, |
|
null, |
|
this.doorName, |
|
null |
|
).then((res) => { |
|
this.searchLists = res.data.data.records; |
|
this.total1 = res.data.data.total; //总条目数 |
|
}); |
|
}, |
|
// 定义表格的头部样式 |
|
tableHeaderColor({ row, rowIndex }) { |
|
if (rowIndex === 0) { |
|
return "line-height:1rem;height:1.5rem;padding: 0;border:none;background-color: #2083ec;color:#fff;font-size:0.875rem;text-align: center;"; |
|
} |
|
}, |
|
// 设置单元格的样式 |
|
cellstyle({ row, column, rowIndex, columnIndex }) { |
|
if (columnIndex == 3) { |
|
return "text-align: center;padding:0;border-right:1px solid #2083ec;border-left:1px solid #2083ec;border-bottom:1px solid #2083ec;font-size: 0.75rem;color: #ffffff;height: 1.938rem;linh-height: 1.938rem;background-color: transparent;"; |
|
} else { |
|
return "text-align: center;padding:0;border-left:1px solid #2083ec;border-bottom:1px solid #2083ec;font-size: 0.75rem;color: #ffffff;height: 1.938rem;linh-height: 1.938rem;background-color: transparent;"; |
|
} |
|
}, |
|
loadMore() { |
|
//滚动分页 |
|
this.current2 += 1; |
|
// this.current += 1; |
|
getDoorSb( |
|
this.current2, |
|
this.size, |
|
this.bimModel, |
|
this.build ? this.build : "", |
|
this.floor ? this.floor : "", |
|
"" |
|
).then((res) => { |
|
if (this.current2 <= res.data.data.pages) { |
|
const results = res.data.data.records; |
|
this.tableData = results; |
|
results.forEach((item) => { |
|
this.sbLists1.push(item); |
|
}); |
|
} |
|
}); |
|
getDoorSb( |
|
1, |
|
this.size, |
|
this.bimModel, |
|
this.build ? this.build : "", |
|
this.floor ? this.floor : "", |
|
"" |
|
).then((res) => { |
|
// console.log(results) |
|
const results = res.data.data.records; |
|
this.tableData = results; |
|
}); |
|
}, |
|
|
|
// 添加标签 |
|
addBq(status, arr, condition, num, location, index) { |
|
// console.log(arr.length) |
|
// if (arr.length == 0) { |
|
// bfHelper.setCameraStatus(JSON.parse(window.sessionStorage.getItem('camera'))) |
|
// } else { |
|
bfHelper.showComponentsByObjectData(condition); |
|
// // 根据筛选条件加入选中集合 |
|
bfHelper.setSelectedById(arr); |
|
if (this.bimModel == 2) { |
|
} else { |
|
// if (bfHelper.getselectGather().length < 2) { |
|
// bfHelper.setCameraStatus( |
|
// JSON.parse(window.sessionStorage.getItem("camera")) |
|
// ); |
|
// } else { |
|
// bfHelper.setCameraView(location ? location : "Top"); |
|
// // 缩放到加入选中集合的构件 |
|
// bfHelper.zoomToSelectedComponents(); |
|
// } |
|
} |
|
//清除所有标签 |
|
bfHelper.clearDrawableContainer(); |
|
// console.log(arr) |
|
// 选中的集合构件id（也就是所有摄像的Id） |
|
let selectComponentId = bfHelper.getselectGather(); |
|
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='door${selectComponentId[b]}' class = 'doorImg' alt='${status[b]}' |
|
class = 'montorImg' src="${require(status[b] == 90000 |
|
? "../../../public/img/monitoring/electricity/door11.png" |
|
: status[b] == 90001 |
|
? "../../../public/img/monitoring/electricity/door-offline.png" |
|
: "../../../public/img/monitoring/electricity/door-alarm.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.doorId = item.layerId; |
|
this.doorList = document.getElementsByClassName("doorImg"); |
|
}); |
|
} |
|
} |
|
|
|
// } |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.door { |
|
.checkbox { |
|
position: absolute; |
|
left: 4rem; |
|
top: 0; |
|
width: 7rem; |
|
background-color: rgba(21, 59, 161, 0.48); |
|
box-shadow: 0px 0px 1.25rem #69c6ff inset; |
|
background-image: url(../../../public/img/monitoring/monitorbg.png); |
|
background-size: 100% 100%; |
|
|
|
.el-checkbox-group { |
|
width: 100%; |
|
height: 100%; |
|
|
|
.el-checkbox { |
|
font-size: 1.125rem; |
|
color: #d9f9ff; |
|
display: block; |
|
margin: 1.5rem 0 1.5rem 29%; |
|
|
|
/deep/ .el-checkbox__inner { |
|
border: 1px solid #2bf2f8; |
|
background-color: transparent; |
|
} |
|
|
|
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label { |
|
color: #d9f9ff; |
|
} |
|
|
|
/deep/ .el-checkbox__inner::after { |
|
border: 1px solid #2bf2f8; |
|
border-left: 0; |
|
border-top: 0; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 设备概况 |
|
.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; |
|
|
|
.zc { |
|
display: inline-block; |
|
width: 125px; |
|
text-align: center; |
|
} |
|
|
|
.lx { |
|
display: inline-block; |
|
width: 125px; |
|
text-align: center; |
|
color: #ec9b28; |
|
} |
|
|
|
.bj { |
|
display: inline-block; |
|
width: 125px; |
|
text-align: center; |
|
color: red; |
|
} |
|
} |
|
|
|
.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; |
|
} |
|
|
|
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; |
|
|
|
.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%; |
|
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; |
|
} |
|
} |
|
|
|
// 设备列表 |
|
.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--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; |
|
} |
|
} |
|
} |
|
|
|
.searchDoors { |
|
position: absolute; |
|
// top: 250px; |
|
left: 105px; |
|
background-image: url(../../../public/img/monitoring/ktbg.png); |
|
background-size: 100% 100%; |
|
|
|
.kt-border { |
|
position: absolute; |
|
} |
|
|
|
.kt-border1 { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
} |
|
|
|
.kt-border2 { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
transform: rotateZ(270deg); |
|
} |
|
|
|
.kt-border3 { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
transform: rotateZ(180deg); |
|
} |
|
|
|
.kt-border4 { |
|
position: absolute; |
|
bottom: 0; |
|
right: 0; |
|
transform: rotateZ(90deg); |
|
} |
|
} |
|
|
|
/deep/ .el-input__inner { |
|
background-color: transparent; |
|
color: white; |
|
} |
|
|
|
.search-list { |
|
background-image: url(../../../public/img/monitoring/ktbg.png); |
|
background-size: 100% 100%; |
|
position: absolute; |
|
left: 480px; |
|
top: 200px; |
|
|
|
.kt-border { |
|
position: absolute; |
|
} |
|
|
|
.kt-border1 { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
} |
|
|
|
.kt-border2 { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
transform: rotateZ(270deg); |
|
} |
|
|
|
.kt-border3 { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
transform: rotateZ(180deg); |
|
} |
|
|
|
.kt-border4 { |
|
position: absolute; |
|
bottom: 0; |
|
right: 0; |
|
transform: rotateZ(90deg); |
|
} |
|
} |
|
|
|
/deep/ .el-range-input { |
|
background-color: transparent; |
|
color: white; |
|
} |
|
|
|
/deep/ .el-range-separator { |
|
color: white; |
|
font-size: 20px; |
|
} |
|
|
|
.search-list-table { |
|
background-color: rgba(51, 93, 169, 0.7); |
|
color: white; |
|
font-size: 13px; |
|
|
|
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td { |
|
background-color: rgba(19, 63, 160, 0.7); |
|
} |
|
|
|
/deep/ .el-table--enable-row-transition .el-table__body td { |
|
border-bottom: 0; |
|
padding: 5px; |
|
} |
|
|
|
/deep/ .el-table::before { |
|
background-color: transparent; |
|
} |
|
|
|
// 分页 |
|
.pagination { |
|
margin-top: 20px; |
|
} |
|
|
|
.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; |
|
} |
|
|
|
/deep/ .el-table tbody tr:hover>td { |
|
background-color: transparent !important; |
|
} |
|
|
|
/deep/ .el-table__row--striped:hover>td { |
|
background-color: rgba(19, 63, 160, 0.7) !important; |
|
} |
|
} |
|
|
|
/deep/ .el-select-dropdown__wrap.el-scrollbar__wrap { |
|
width: 150px !important; |
|
height: 200px !important; |
|
} |
|
</style> |
|
<style scoped lang="scss"> |
|
/deep/ .pull { |
|
.el-scrollbar { |
|
height: 200px; |
|
} |
|
} |
|
</style>
|
|
|