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.
1461 lines
48 KiB
1461 lines
48 KiB
<template> |
|
<!-- 消防 --> |
|
<div v-if="firefightingState" class="firefighting"> |
|
<!-- 各楼栋楼层切换 --> |
|
<clickCp :bimModel="bimModel" sbType="消防" :checkList="checkList" ref="clickcp" @storeTower="handelEmit"> |
|
<!-- 返回主视角 --> |
|
</clickCp> |
|
<backHome :bimModel="bimModel" type="消防" :condition="checkList" dom=".mapDom"></backHome> |
|
<div class="mapDom" style="position: absolute;left: 105px;top: 320px;width: 250px; height: 180px;" |
|
v-if="bimModel == 1"></div> |
|
<!-- 类型切换 --> |
|
<div class="selectBox" :style="{ top: bimModel == 1 ? '217px' : '260px' }"> |
|
<el-checkbox-group v-model="checkList" @change="chooseFire"> |
|
<el-checkbox :label="1">喷淋</el-checkbox> |
|
<el-checkbox :label="2">烟感报警</el-checkbox> |
|
<el-checkbox :label="0">排烟</el-checkbox> |
|
<el-checkbox :label="3">消防栓水管</el-checkbox> |
|
</el-checkbox-group> |
|
</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: 56px">{{ 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: 56px">{{ 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> |
|
<div class="flex-center tit" :class="bimModel == 2 ? 'tataitit' : ''"> |
|
<p>设备名称</p> |
|
<p>报警信息</p> |
|
<p>报警时间</p> |
|
</div> |
|
<div v-if=" |
|
JSON.stringify(listData) != '{}' && |
|
listData.warnEquipList && |
|
listData.warnEquipList.length == 0 && |
|
activeTab == 1 |
|
" class="noBjxx"> |
|
暂无故障报警信息 |
|
</div> |
|
<div v-else-if=" |
|
JSON.stringify(listData) != '{}' && |
|
listData.warnEventList && |
|
listData.warnEventList.length == 0 && |
|
activeTab == 2 |
|
" class="noBjxx"> |
|
暂无安全报警信息 |
|
</div> |
|
<div v-else class="warp"> |
|
<div v-if="activeTab == 1" class="item flex-center" v-for="(item, index) in listData.warnEquipList" :key="index" |
|
@mouseenter="showAlarkAlert(item, index, 0)" style="position: relative" |
|
@mouseleave="closeAlarkAlert(item, index, 0)"> |
|
<div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert"> |
|
<p @click="bjClick(item)" v-if="item.modelId != ''"> |
|
<img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" /> |
|
<span>查看详情</span> |
|
</p> |
|
<span v-if="item.confirmStatus == '0' && item.modelId != ''">|</span> |
|
<p v-if="item.confirmStatus == '0'" @click="doCancelWarn(item)"> |
|
<img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" /> |
|
<span>确认告警</span> |
|
</p> |
|
<span v-if="item.warnStatus == 1 && (item.modelId != '' || item.confirmStatus == '0')">|</span> |
|
<p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)"> |
|
<i class="el-icon-refresh-right" style="margin-right:10px;"></i> |
|
<span>告警恢复</span> |
|
</p> |
|
</div> |
|
<div class="box flex-center" :class="bimModel == 2 ? 'tataicon' : ''"> |
|
<div class="left flex-center-center"> |
|
<img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.warnStatus == 2" /> |
|
<img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else /> |
|
<span class="message" v-text="item.name" :title="item.name" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', |
|
}"></span> |
|
</div> |
|
<span class="data" title="item.warnContent" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', |
|
}">{{ item.warnContent }}</span> |
|
<span class="time" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', |
|
}">{{ item.warnDate.substring(5, 16) }}</span> |
|
</div> |
|
</div> |
|
<div v-if="activeTab == 2" class="item flex-center" v-for="(item, index) in listData.warnEventList" :key="'warnEvent' + index" |
|
@mouseenter="showAlarkAlert(item, index, 1)" style="position: relative" |
|
@mouseleave="closeAlarkAlert(item, index, 1)"> |
|
<div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert"> |
|
<p @click="bjClick(item)" v-if="item.modelId != ''"> |
|
<img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" /> |
|
<span>查看详情</span> |
|
</p> |
|
<span v-if="item.confirmStatus == '0' && item.modelId != ''">|</span> |
|
<p v-if="item.confirmStatus == '0'" @click="doCancelWarn(item)"> |
|
<img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" /> |
|
<span>确认告警</span> |
|
</p> |
|
<span v-if="item.warnStatus == 1 && (item.modelId != '' || item.confirmStatus == '0')">|</span> |
|
<p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)"> |
|
<i class="el-icon-refresh-right" style="margin-right:10px;"></i> |
|
<span>告警恢复</span> |
|
</p> |
|
</div> |
|
<div class="box flex-center"> |
|
<div class="left flex-center-center"> |
|
<img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.warnStatus == 2" /> |
|
<img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else /> |
|
<span class="message" v-text="item.name" :title="item.name" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', |
|
}"></span> |
|
</div> |
|
<span class="data" title="item.warnMsg" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', |
|
}">{{ item.warnContent }}</span> |
|
<span class="time" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', |
|
}">{{ item.warnDate.substring(5, 16) }}</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div style="position: absolute;bottom: 10px; right: 10px; width: 345px; text-align: right; color: rgb(7, 230, 237); font-size: 14px; cursor: pointer;"> |
|
<span @click="goMoreWarnList">查看报警详情</span> |
|
</div> |
|
</div> |
|
<!-- 设备列表 --> |
|
<div class="tab" :class="bimModel == 2 ? 'tataigen' : ''"> |
|
<div class="title flex-center"> |
|
<img src="../../../public/img/monitoring/electricity/listIcon3.png" /> |
|
<span id="fire_box">设备列表</span> |
|
</div> |
|
<div class="tabBox"> |
|
<el-table @row-click="tableClick" :data="tableData" style="width: 100%" @row-contextmenu="tableContext" |
|
:class="bimModel == 2 ? 'tataitab' : ''"> |
|
<el-table-column label="设备名称" width="130"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center mon_box" style=" |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
cursor: pointer; |
|
"> |
|
<img v-if="scope.row.status == 90000" style="margin: 0 6px" |
|
src="../../../public/img/monitoring/electricity/listIcon.png" /> |
|
<img v-else-if="scope.row.status == 90001" style="margin: 0 6px" |
|
src="../../../public/img/monitoring/electricity/listIcon2.png" /> |
|
<img v-else style="margin: 0 6px" src="../../../public/img/monitoring/electricity/listIcon4.png" /> |
|
<span :style="{ |
|
color: |
|
scope.row.status == 90000 |
|
? '' |
|
: 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="设备位置"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center mon_box" style=" |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
cursor: pointer; |
|
"> |
|
<span :style="{ |
|
color: |
|
scope.row.status == 90000 |
|
? '' |
|
: 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="设备状态"> |
|
<template slot-scope="scope"> |
|
<div :style="{ |
|
color: |
|
scope.row.status == 90000 |
|
? '' |
|
: scope.row.status == 90001 |
|
? '#a5bbe5' |
|
: '#ff0000', |
|
}" class="flex-center-center" style="cursor: pointer"> |
|
{{ |
|
scope.row.status == 90000 |
|
? "正常" |
|
: scope.row.status == 90001 |
|
? "离线" |
|
: "报警" |
|
}} |
|
</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> |
|
</template> |
|
|
|
<script> |
|
import * as bfHelper from "../../util/bfHelper"; |
|
import * as commonValue from "../../util/commonValue"; |
|
import clickCp from "./clickCp"; |
|
import { |
|
// 业务区 |
|
getFightSblb, |
|
getFightGK, |
|
// 塔台 |
|
getfireData, |
|
getFightWarn, |
|
getFiredWarnList, //告警列表 |
|
getCancelWarn, //确认告警 |
|
recoveryWarn,//恢复告警 |
|
} from "@/api/garden/monitoring"; |
|
import backHome from "./backHome"; |
|
export default { |
|
props: { |
|
firefightingState: { |
|
type: Boolean, |
|
}, |
|
bimModel: { |
|
type: Number, |
|
}, |
|
}, |
|
data() { |
|
return { |
|
checkList: [0, 1, 2, 3], //复选框 |
|
current: 1, //当前页 |
|
size: 5, //每页数量 |
|
total: 0, //总条目数 |
|
tableData: [], //设备列表 |
|
listData: { |
|
warnEquipList: [], |
|
warnEventList: [], |
|
}, //报警信息 |
|
|
|
classOption: { |
|
step: 0.4, |
|
}, //报警信息滚动速度 |
|
activeNum: null, |
|
towers: null, |
|
layer: null, |
|
isAlarm: false, |
|
isSafe: false, |
|
alarmTotal: 0, |
|
safeTotal: 0, |
|
alarmLists: [], |
|
activeTab: 1, |
|
}; |
|
}, |
|
components: { |
|
clickCp, |
|
backHome, |
|
}, |
|
created() { |
|
this.getFight(); //报警信息 |
|
this.getFightGk(); //报警信息 |
|
this.getFightWarnList(); //bim标注告警列表 |
|
this.getFiredWarnList(); //报警信息 |
|
this.addWaterLabel(); |
|
this.setInterval = setInterval(() => { |
|
this.getFight(); //报警信息 |
|
this.getFightGk(); //报警信息 |
|
this.getFightWarnList(); //bim标注告警列表 |
|
this.getFiredWarnList(); //报警信息 |
|
this.addWaterLabel(); |
|
}, 3600000); |
|
}, |
|
mounted() { |
|
let dom = document.getElementById('fire_box'); |
|
dom.addEventListener('contextmenu', (event)=> { |
|
event.preventDefault(); // 阻止默认菜单 |
|
const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0600' } }); |
|
window.open(routerUrl.href, "_blank"); |
|
}); |
|
this.getNavigationMap(); |
|
}, |
|
beforeDestroy() { |
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
window.removeEventListener("click", this.fireListener); |
|
}, |
|
watch: { |
|
bimModel: { |
|
handler(newVal, oldVal) { |
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
|
|
this.setInterval = setInterval(() => { |
|
this.getFight(); //报警信息 |
|
this.getFightGk(); //报警信息 |
|
this.getFightWarnList(); //bim标注告警列表 |
|
this.getFiredWarnList(); //报警信息 |
|
this.addWaterLabel(); |
|
}, 3600000); |
|
|
|
this.getFight(); //报警信息 |
|
this.getFightGk(); //报警信息 |
|
this.getFightWarnList(); //bim标注告警列表 |
|
this.getFiredWarnList(); //报警信息 |
|
this.addWaterLabel(); |
|
}, |
|
}, |
|
//模型是否加载完成监听 |
|
"$store.state.bfHelperState.bfState": { |
|
immediate: true, |
|
handler(newval, olval) { |
|
if (newval) { |
|
// 模型恢复全部状态 |
|
bfHelper.resetStatus(2); |
|
bfHelper.extObjMngClear(); //清除外部构件 |
|
this.onClick(); |
|
// this.initial(); |
|
if (newval == 1) { |
|
// 查看管线 |
|
|
|
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.setTowerFire("07"); |
|
this.$refs.clickcp.active = 26; |
|
this.$refs.clickcp.tower = 9; |
|
}, 300); |
|
// console.log(this.checkList) |
|
bfHelper.lookPipeline2( |
|
null, |
|
null, |
|
build - 1, |
|
null, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} else if (build == 26) { |
|
bfHelper.lookEquipmentCop("消防", this.checkList); |
|
setTimeout(() => { |
|
this.setTowerFire(); |
|
}, 300); |
|
|
|
bfHelper.setOpacityFun(); |
|
} else { |
|
if (floor.indexOf("undefined") == -1) { |
|
setTimeout(() => { |
|
this.setTowerFire("0" + build, "0" + floor); |
|
this.$refs.clickcp.active = commonValue.activeValue( |
|
Number(build), |
|
Number(floor) |
|
); |
|
this.$refs.clickcp.tower = commonValue.towerValue(build); |
|
}, 300); |
|
bfHelper.lookPipeline2( |
|
null, |
|
null, |
|
build - 1, |
|
floor, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} else { |
|
setTimeout(() => { |
|
this.setTowerFire("0" + build); |
|
this.$refs.clickcp.active = commonValue.activeValue( |
|
Number(build), |
|
null |
|
); |
|
this.$refs.clickcp.tower = commonValue.towerValue(build); |
|
}, 300); |
|
bfHelper.lookPipeline2( |
|
null, |
|
null, |
|
build - 1, |
|
null, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} |
|
} |
|
} else { |
|
bfHelper.lookEquipmentCop("消防", this.checkList); |
|
bfHelper.setOpacityFun(); |
|
this.getNavigationMap(); |
|
} |
|
} else { |
|
// 查看管线 |
|
window.sessionStorage.setItem( |
|
"ttcamera", |
|
JSON.stringify(bfHelper.getCameraStatus()) |
|
); |
|
let ttbuild = sessionStorage.getItem("ttbuild"); |
|
if (ttbuild) { |
|
if (ttbuild == 20) { |
|
//园区 |
|
bfHelper.TtLookEquipmentCop("消防", this.checkList); |
|
setTimeout(() => { |
|
this.setTowerFire(); |
|
}, 300); |
|
} else if (ttbuild == 0) { |
|
//塔楼 |
|
setTimeout(() => { |
|
this.setTowerFire("08"); |
|
this.$refs.clickcp.ttActive = 0; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
0, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} else if (ttbuild == 1) { |
|
//辅楼1楼 |
|
setTimeout(() => { |
|
this.setTowerFire("09", "01"); |
|
this.$refs.clickcp.ttActive = 1; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
1, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} else if (ttbuild == 2) { |
|
//辅楼1楼 |
|
setTimeout(() => { |
|
this.setTowerFire("09", "02"); |
|
this.$refs.clickcp.ttActive = 2; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
2, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} else if (ttbuild == 3) { |
|
//辅楼1楼 |
|
setTimeout(() => { |
|
this.setTowerFire("09"); |
|
this.$refs.clickcp.ttActive = 3; |
|
}, 300); |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
3, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} |
|
} else { |
|
// 查看管线 |
|
bfHelper.TtLookEquipmentCop("消防", this.checkList); |
|
bfHelper.setOpacityFun1(); |
|
} |
|
} |
|
} else { |
|
} |
|
} |
|
}, |
|
}, |
|
}, |
|
methods: { |
|
//确认告警 - 重新查询告警列表 |
|
doCancelWarn(item) { |
|
getCancelWarn(item.id).then((res) => { |
|
// this.getFiredWarnList(); |
|
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: "0600", area: this.bimModel }, |
|
}); |
|
window.open(routerUrl.href, "_blank"); |
|
}, |
|
// 报警记录-20221031改版 |
|
getFiredWarnList() { |
|
getFiredWarnList({ |
|
area: this.bimModel, |
|
build: this.tower ? this.tower : "", |
|
floor: this.layer ? this.layer : "", |
|
}).then((res) => { |
|
this.listData = res.data.data; |
|
for (let i = 0; i < this.listData.warnEquipList.length; i++) { |
|
this.listData.warnEquipList[i].showAlert = false; |
|
} |
|
for (let i = 0; i < this.listData.warnEventList.length; i++) { |
|
this.listData.warnEventList[i].showAlert = false; |
|
} |
|
}); |
|
}, |
|
showAlarkAlert(item, index, key) { |
|
//鼠标悬停在设备概况列表里出现查看详情和确认告警 |
|
item.showAlert = true; |
|
if (key == 0) { |
|
this.listData.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); |
|
} |
|
}, |
|
getFightWarnList() { |
|
getFightWarn( |
|
this.bimModel, |
|
this.towers ? this.towers : "", |
|
this.layer ? this.layer : "" |
|
).then((res) => { |
|
this.alarmLists = res.data.data; |
|
}); |
|
}, |
|
clickAlarm(item) { |
|
this.activeTab = item; |
|
}, |
|
getNavigationMap() { |
|
commonValue.getNavigationMap("water"); |
|
}, |
|
// 接收子组件当前点击楼号 |
|
setTowerFire(i, j) { |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
this.towers = i; |
|
// if (j) { |
|
this.layer = j; |
|
// } |
|
this.getFightGk(); |
|
this.getFight(); //设别列表 |
|
this.getFiredWarnList(); //报警信息 |
|
// this.getFightWarnList(); //bim标注告警列表 |
|
if (this.bimModel == 1) { |
|
commonValue.getUpdateMap("water", i, j); |
|
} |
|
}, |
|
// 页码改变时触发 |
|
handleCurrentChange(val) { |
|
this.current = val; |
|
this.getFight(); |
|
}, |
|
// 获取设备列表 |
|
getFight() { |
|
getFightSblb( |
|
this.bimModel, |
|
this.current, |
|
this.size, |
|
this.towers ? this.towers : "", |
|
this.layer ? this.layer : "" |
|
).then((res) => { |
|
this.total = res.data.data.total; |
|
this.tableData = res.data.data.records; |
|
}); |
|
}, |
|
|
|
addWaterLabel() { |
|
setTimeout(() => { |
|
this.addFireLabelContent(); |
|
}, 300); |
|
window.addEventListener("click", this.fireListener); |
|
}, |
|
fireListener(e) { |
|
if (e.target.id.indexOf("firemeter") != -1) { |
|
let position = bfHelper.getBoxMessage( |
|
e.target.id.substring(9), |
|
true |
|
).max; |
|
getfireData(this.bimModel, e.target.id.substring(24)).then((res) => { |
|
if (res.data.code == 200) { |
|
// console.log(res) |
|
let { name, status, location } = res.data.data; |
|
// 如果当前点击的是电箱 先清除所以标签 |
|
bfHelper.clearDrawableContainer(); |
|
this.addLabel( |
|
e.target.id.substring(9), |
|
name, |
|
status, |
|
location, |
|
null, |
|
"1" |
|
); |
|
// bfHelper.setCameraView('SouthWestIsometricBottom'); |
|
bfHelper.zoomToBoundingBox( |
|
bfHelper.getBoxMessage(e.target.id.substring(9)), |
|
2 |
|
); |
|
} |
|
}); |
|
} |
|
if (e.target.id.indexOf("fireclosecha") != -1) { |
|
bfHelper.clearTags(); |
|
this.addFireLabelContent(); |
|
} |
|
}, |
|
addFireLabelContent() { |
|
//初始化添加消防标签 |
|
let img1 = require("../../../public/img/monitoring/electricity/firegz.png"); |
|
let img2 = require("../../../public/img/monitoring/electricity/fire-alarm.png"); |
|
|
|
for (let i = 0; i < this.alarmLists.length; i++) { |
|
if (this.alarmLists[i].modelId != "") { |
|
let id = bfHelper.disposeId( |
|
1, |
|
this.alarmLists[i].build, |
|
this.alarmLists[i].modelId |
|
); |
|
let box = bfHelper.getBoxMessage(id, true); |
|
if (box == undefined) { |
|
return; |
|
} else { |
|
let zb = box.max; |
|
if (this.alarmLists[i].warnCode == 90001) { |
|
// bfHelper.customTag(zb, null, this.labelContent1(img1,id)); |
|
} else { |
|
bfHelper.customTag(zb, null, this.labelContent1(img2, id)); |
|
} |
|
} |
|
} |
|
} |
|
}, |
|
|
|
labelContent1(img, id) { |
|
//图标标签 |
|
let content = `<div class="leadTips" style="transform: translateY(-40px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img id='firemeter${id}' class = 'montorImg' src="${img}" style="width:35px;height:35px;"/> |
|
</div> |
|
</div>`; |
|
return content; |
|
}, |
|
getFightGk() { |
|
getFightGK( |
|
this.bimModel, |
|
this.towers ? this.towers : "", |
|
this.layer ? this.layer : "" |
|
).then((res) => { |
|
let listData = res.data.data; |
|
let arr = listData.systemWarnEquipList.concat( |
|
listData.safeWarnEquipList |
|
); |
|
if (arr.length > 0) { |
|
let arr1 = []; |
|
let arr2 = []; |
|
for (let i = 0; i < arr.length; i++) { |
|
if (arr[i].status == 90000) { |
|
} else if (arr[i].status == 90001) { |
|
arr2.push(bfHelper.disposeId(1, arr[i].build, arr[i].modelId)); |
|
} else { |
|
arr1.push(bfHelper.disposeId(1, arr[i].build, arr[i].modelId)); |
|
} |
|
} |
|
bfHelper.setFlicker(arr1, "#ff0000", 100); |
|
bfHelper.setColor("#9d9d9d", arr2); |
|
this.addWaterLabel(); |
|
} |
|
}); |
|
}, //报警信息 |
|
// 获取报警信息 |
|
// 点击报警信息定位到指定设备 |
|
bjClick(item) { |
|
// bfHelper.clearDrawableContainer(); |
|
// // console.log(item) |
|
// let id = bfHelper.disposeId(1, item.build, item.modelId); |
|
// bfHelper.customTag(bfHelper.getBoxMessage(id, true).max, null, this.getContent(item)) |
|
// bfHelper.zoomToBoundingBox(bfHelper.getBoxMessage(id),3) |
|
// bfHelper.setCameraView('SouthBottom'); |
|
|
|
if (this.bimModel == 2) { |
|
// bfHelper.clearDrawableContainer(); |
|
// let id = '10000722317177.1065480'; |
|
// // let id = bfHelper.disposeId(item.area, item.build, item.modelId); |
|
// let boundingBox = bfHelper.getBoxMessage(id); |
|
// bfHelper.zoomToBoundingBox(boundingBox, 3); |
|
// this.addLabel(id, item.name, item.status, item.location, item.dataNum); |
|
} else { |
|
if (item.modelId == "") { |
|
} else { |
|
// 如果当前点击的是电箱 先清除所以标签 |
|
// window.sessionStorage.setItem('build',tower != null? tower + 1:'26'); |
|
// window.sessionStorage.setItem('floor',layer); |
|
bfHelper.clearDrawableContainer(); |
|
let id = bfHelper.disposeId(item.area, item.build, item.modelId); |
|
let box = bfHelper.getBoxMessage(id, true); |
|
if (box == undefined) { |
|
console.log("box undefined--------"); |
|
return; |
|
} |
|
bfHelper.customTag( |
|
bfHelper.getBoxMessage(id, true).max, |
|
null, |
|
this.getContent(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); |
|
} |
|
} |
|
}, |
|
// 添加标签 |
|
addLabel(objectId, name, type, location, dataNum, type1) { |
|
// 构件id/设备名称/设备状态/设备位置/累计电量 |
|
|
|
// 获取当前点击坐标 |
|
let zb = bfHelper.getBoxMessage(objectId, true); |
|
//引线标签的顶点 |
|
let position = { |
|
x: zb.max.x, |
|
y: zb.max.y, |
|
z: zb.max.z, |
|
}; |
|
let item = { |
|
name: name, |
|
status: type, |
|
location: location, |
|
objectId: objectId, |
|
type1: type1, |
|
}; |
|
bfHelper.customTag(position, null, this.getContent(item)); |
|
}, |
|
getContent(item) { |
|
let bgImg1 = require("../../../public/img/monitoring/electricity/liftbg2.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;position:relative"> |
|
<img src="${require("../../../public/img/monitoring/closecha.png")}" style="position:absolute;top:-73px;right:0;width:27px;display:${item.type1 == "1" ? "inline-block" : "none" |
|
}" id="fireclosecha${item.objectId}"/> |
|
<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:150px;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 |
|
? "silver" |
|
: "red" |
|
}">${item.status == 90000 ? "正常" : item.status == 90001 ? "离线" : "报警" |
|
}</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:${item.status == 90000 ? "none" : "flex" |
|
} ;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:12px;color:silver">报警信息：</span> |
|
<span style="font-size:13px;color:white">${item.warnContent |
|
? item.warnContent |
|
: item.warnMsg |
|
? item.warnMsg |
|
: "" |
|
}</span> |
|
</div> |
|
<div style="display:${item.status == 90000 ? "none" : "flex" |
|
} ;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:12px;color:silver">报警时间：</span> |
|
<span style="font-size:13px;color:white">${item.warnDate |
|
? item.warnDate.substring(5, 16) |
|
: item.warnTime |
|
? item.warnTime.substring(5, 16) |
|
: "" |
|
}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div>`; |
|
return content; |
|
}, |
|
// 构件点击 |
|
onClick() { |
|
bfHelper.onClick((data) => { |
|
// console.log(data) |
|
// 点击构件的筛选条件 |
|
|
|
getfireData(this.bimModel, data.elementId).then((res) => { |
|
if (res.data.code == 200 && Object.keys(res.data.data).length>0) { |
|
// console.log(res) |
|
let { name, status, location } = res.data.data; |
|
// 如果当前点击的是电箱 先清除所以标签 |
|
bfHelper.clearDrawableContainer(); |
|
this.addLabel(data.objectId, name, status, location); |
|
} |
|
}); |
|
return; |
|
}); |
|
}, |
|
// 表格某行被点击 |
|
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) |
|
}, |
|
chooseFire() { |
|
if (this.bimModel == 1) { |
|
if (this.towers != null) { |
|
window.sessionStorage.setItem( |
|
"camera", |
|
JSON.stringify(bfHelper.getCameraStatus()) |
|
); |
|
if (this.towers == "07") { |
|
bfHelper.lookPipeline2( |
|
null, |
|
null, |
|
9, |
|
null, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} else { |
|
bfHelper.lookPipeline2( |
|
null, |
|
null, |
|
Number(this.towers) - 1, |
|
Number(this.layer), |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} |
|
} else { |
|
// console.log('cccccccc') |
|
if (this.checkList.length === 0) { |
|
bfHelper.lookEquipmentCop("消防"); |
|
} else { |
|
this.checkList.sort((a, b) => { |
|
return a - b; |
|
}); |
|
bfHelper.lookEquipmentCop("消防", this.checkList); |
|
} |
|
} |
|
} else { |
|
if (this.towers != null) { |
|
window.sessionStorage.setItem( |
|
"ttcamera", |
|
JSON.stringify(bfHelper.getCameraStatus()) |
|
); |
|
if (this.towers == "08") { |
|
//塔楼 |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
0, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} else if (this.towers == "09") { |
|
//辅楼1楼 |
|
if (this.layer) { |
|
if (this.layer == "01") { |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
1, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} else { |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
2, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} |
|
} else { |
|
bfHelper.ttLookPipeline2( |
|
null, |
|
null, |
|
3, |
|
"消防", |
|
bfHelper.equipmentCondition2[1], |
|
this.checkList |
|
); |
|
} |
|
} |
|
} else { |
|
if (this.checkList.length === 0) { |
|
bfHelper.TtLookEquipmentCop("消防"); |
|
} else { |
|
this.checkList.sort((a, b) => { |
|
return a - b; |
|
}); |
|
bfHelper.TtLookEquipmentCop("消防", this.checkList); |
|
} |
|
} |
|
} |
|
}, |
|
handelEmit(e) { |
|
// console.log(e) |
|
this.activeNum = e.activeNum; |
|
this.towers = e.tower; |
|
this.layer = e.layer; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.firefighting { |
|
|
|
// 类型切换 |
|
.selectBox { |
|
z-index: 99; |
|
background: url(../../../public/img/monitoring/electricity/selectBj.png) no-repeat; |
|
background-size: cover; |
|
width: 242px; |
|
height: 63px; |
|
position: absolute; |
|
// top: 217px; |
|
left: 105px; |
|
|
|
/deep/ .el-checkbox-group { |
|
display: flex; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
width: 77%; |
|
margin: auto; |
|
|
|
.el-checkbox { |
|
margin: 5px 10px; |
|
color: white; |
|
font-weight: 500; |
|
font-size: 14px; |
|
cursor: pointer; |
|
user-select: none; |
|
|
|
.el-checkbox__inner { |
|
background-color: transparent; |
|
} |
|
} |
|
|
|
.el-checkbox__input.is-checked+.el-checkbox__label { |
|
color: white; |
|
} |
|
|
|
.el-checkbox__input.is-checked .el-checkbox__inner { |
|
border-color: white; |
|
background-color: transparent; |
|
} |
|
|
|
.el-checkbox__inner::after { |
|
border: 1px solid #09dae7; |
|
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; |
|
|
|
.span_box { |
|
width: 126px; |
|
display: inline-block; |
|
text-align: center; |
|
} |
|
|
|
.lx { |
|
color: #a5bbe5; |
|
} |
|
|
|
.bj { |
|
color: #d34951; |
|
} |
|
} |
|
|
|
.tab_box { |
|
width: 80%; |
|
display: flex; |
|
margin-top: 25px; |
|
margin-bottom: 30px; |
|
margin-left: 23px; |
|
color: #fff; |
|
|
|
.tab_one { |
|
cursor: pointer; |
|
} |
|
|
|
.tab_two { |
|
margin-left: 20px; |
|
} |
|
|
|
/deep/ .item .is-dot { |
|
background: red; |
|
border: none; |
|
} |
|
|
|
// .circle{ |
|
// display: inline-block; |
|
// width: 8px; |
|
// height: 8px; |
|
// background: red; |
|
// border-radius: 50%; |
|
// position: relative; |
|
// top: -8px; |
|
// left: -3px; |
|
// } |
|
} |
|
|
|
.tit { |
|
margin: 0 auto 6px; |
|
width: 345px; |
|
height: 34px; |
|
line-height: 34px; |
|
background-color: #07a7ff; |
|
font-size: 14px; |
|
color: white; |
|
|
|
&.tataitit { |
|
background: rgb(34, 110, 196); |
|
|
|
span { |
|
color: #1851ab; |
|
} |
|
} |
|
|
|
p { |
|
width: 33.3%; |
|
text-align: center; |
|
} |
|
} |
|
|
|
.noBjxx { |
|
color: white; |
|
font-size: 1rem; |
|
margin: 2.5rem 0 0; |
|
text-align: center; |
|
} |
|
|
|
.warp { |
|
height: 120px; |
|
width: 345px; |
|
margin: auto; |
|
overflow-y: auto; |
|
|
|
.item { |
|
height: 40px; |
|
font-size: 14px; |
|
color: red; |
|
|
|
.alark-alert { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
background: rgba(11, 34, 74, 0.8); |
|
// display: flex; |
|
justify-content: space-around; |
|
align-items: center; |
|
color: #07e6ed; |
|
|
|
p { |
|
display: flex; |
|
align-items: center; |
|
|
|
img { |
|
margin-right: 7px; |
|
} |
|
} |
|
} |
|
|
|
.box { |
|
width: 100%; |
|
height: 34px; |
|
background-color: rgba($color: #0d318b, $alpha: 0.6); |
|
|
|
&.tataicon { |
|
background-color: rgba($color: #1f355c, $alpha: 1); |
|
|
|
span { |
|
color: #1851ab; |
|
} |
|
} |
|
|
|
.left { |
|
width: 33.3%; |
|
|
|
img { |
|
width: 16px; |
|
height: auto; |
|
margin: 0 5px 0 10px; |
|
} |
|
|
|
.message { |
|
flex: 1; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
|
|
.data { |
|
width: 33.3%; |
|
text-align: center; |
|
} |
|
|
|
.time { |
|
width: 33.3%; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
|
|
.item:hover { |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.more { |
|
justify-content: flex-end; |
|
font-size: 14px; |
|
color: #07e6ed; |
|
margin: 10px 27px 0 0; |
|
} |
|
} |
|
|
|
// 设备列表 |
|
.tab { |
|
z-index: 99; |
|
position: absolute; |
|
right: 39px; |
|
bottom: 41px; |
|
width: 402px; |
|
height: 342px; |
|
background: url(../../../public/img/monitoring/electricity/newbg.png) no-repeat; |
|
background-size: cover; |
|
|
|
&.tataigen { |
|
background: url(../../../public/img/monitoring/electricity/genbac.png) no-repeat; |
|
background-size: 100% 100%; |
|
} |
|
|
|
.title { |
|
font-weight: bold; |
|
margin: 1rem 0 2rem 1.25rem; |
|
color: #fff; |
|
font-size: 15px; |
|
|
|
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>
|
|
|