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.
1325 lines
46 KiB
1325 lines
46 KiB
<template> |
|
<!-- 电梯信息 --> |
|
<div class="liftBox" v-if="dtState"> |
|
<!-- 返回主视角 --> |
|
<backHome :bimModel="bimModel" type="电梯" dom=".mapDom"></backHome> |
|
<!-- <p>1111</p> --> |
|
<!-- 设备概况 --> |
|
<div style="position: absolute;left: 84px;top: 20px;" v-if="bimModel == 1"> |
|
<div class="build-message" |
|
style="color: white;text-align: center;border: 1px solid rgb(0, 187, 255);width: 110px;margin: 0 auto;border-radius: 5px;padding: 5px 0;"> |
|
{{ buildMessage }} |
|
</div> |
|
<div class="mapDom" style="width: 250px;height: 180px;margin-top: 20px;"></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;">{{ |
|
normalEquipNumber |
|
}}</span></div> |
|
<div class="lx flex-center" style="font-family:fantasy;"><span style="margin-left: 72px;">{{ |
|
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" @click="clickAlarm(1)" :style="{ color: isAlarm ? 'red' : '#fff' }"> |
|
<el-badge :is-dot='isAlarm' class="item">设备报警</el-badge><span |
|
style="margin-left:5px;vertical-align: bottom;">({{ 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="listData.length == 0" class="noBjxx">暂无故障报警信息 |
|
</div> |
|
<div v-else class="warp"> |
|
<div class="item flex-center" v-for="(item, index) in listData" :key="index" style="position: relative;" |
|
@mouseenter="showAlarkAlert(item, index)" @mouseleave="closeAlarkAlert(item, index)"> |
|
<div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert"> |
|
<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">|</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" style="justify-content: space-around;" |
|
: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" |
|
:style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }" |
|
:title="item.name"></span> |
|
</div> |
|
<span></span> |
|
<span class="data" |
|
:style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }" |
|
:title="item.warnContent">{{ 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="lift_box">设备列表</span> |
|
</div> |
|
<div class="tabBox"> |
|
<el-table @row-click="tableClick" :data="arr" style="width: 100%;max-height: 220px;" @row-contextmenu="tableContext" |
|
:class="bimModel == 2 ? 'tataitab' : ''"> |
|
<el-table-column label="设备名称" width="160"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center mon_box"> |
|
<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', cursor: 'pointer' }" |
|
:title="scope.row.name">{{ scope.row.name }}</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="|" width="10"> |
|
</el-table-column> |
|
<el-table-column label="设备位置"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center mon_box"> |
|
<span |
|
:style="{ color: scope.row.status == 90000 ? 'white' : scope.row.status == 90001 ? '#a5bbe5' : '#ff0000' }" |
|
style="width: 80px;" :title="scope.row.location"> |
|
{{ scope.row.location }}</span> |
|
|
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="|" width="10"> |
|
</el-table-column> |
|
<el-table-column label="运行方向" style="width: 80px;"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center"> |
|
<!-- <span :style="{color:scope.row.status == 'NORMAL工作正常'?'':'red'}" |
|
style="padding-left: 10px;">{{scope.row.status == 'NORMAL工作正常'?'正常':'异常'}}</span> --> |
|
<span |
|
:style="{ color: scope.row.status == 90000 ? 'white' : scope.row.status == 90001 ? '#a5bbe5' : '#ff0000' }">{{ |
|
scope.row.direction |
|
}}</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="7" layout="total, prev, pager, next" :total="arr.length"> |
|
</el-pagination> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</template> |
|
|
|
<script> |
|
import * as bfHelper from '../../util/bfHelper'; |
|
import * as commonValue from '../../util/commonValue'; |
|
import { |
|
// 业务区 |
|
getYwqLiftData, // 获取所以电梯运行状态数据 |
|
getLifList, |
|
getLiftWarnList,//告警列表 |
|
getCancelWarn,//确认告警 |
|
recoveryWarn,//恢复告警 |
|
} from '@/api/garden/monitoring'; |
|
import backHome from './backHome'; |
|
import { dateFormat } from "@/util/date"; |
|
export default { |
|
props: { |
|
dtState: { |
|
type: Boolean, |
|
}, |
|
bimModel: { |
|
type: Number |
|
} |
|
}, |
|
components: { |
|
backHome |
|
}, |
|
data() { |
|
return { |
|
pos: 0, |
|
height: 5350, |
|
offsetZ: 250, |
|
path: "ws://192.168.1.3/blade-websocket/ws?lift", |
|
// path: "ws://10.90.100.204/blade-websocket/ws?lift", |
|
socket: "", |
|
arr: [], //电梯信息 |
|
listData: [], |
|
labels: [{ //1号楼 |
|
id: 2, |
|
location: '1号楼', |
|
objectId: "37f3262a-504a-4233-87b2-7ce32a042fe4", |
|
worldPosition: { |
|
x: 93607.94228431502, |
|
y: -6640.460729435042, |
|
z: -500 |
|
}, |
|
index: "10000753440674.2772097", |
|
name: '升降电梯(1)' |
|
}, { //2 |
|
id: 1, |
|
location: '2号楼', |
|
objectId: "da579e23-603a-43ed-98cc-034e90799983", |
|
worldPosition: { |
|
x: 70389.96145101362, |
|
y: 21111.28165847061, |
|
z: 7879.99999809265 |
|
}, |
|
index: "10000752822816.1066785", |
|
name: '升降电梯(2)' |
|
}, { //4 |
|
id: 0, |
|
location: '4号楼', |
|
objectId: "e6f8820b-5536-4bb4-82b2-506f887a638b", |
|
worldPosition: { |
|
x: 149168.9375, |
|
y: 74527.67355197835, |
|
z: 289.9493728786847, |
|
}, |
|
index: "10000752830259.2306329", |
|
name: '升降电梯(4)' |
|
}, |
|
|
|
|
|
|
|
{ //6号楼 |
|
id: 3, |
|
location: '6号楼', |
|
objectId: "8ec550b9-6539-4da9-8aa5-9113cef7816c", |
|
worldPosition: { |
|
x: 151204.97680521014, |
|
y: -17898.693359375, |
|
z: 7412.6652844985865 |
|
}, |
|
index: "10000752830313.1884001", |
|
name: '升降电梯(6)' |
|
}, |
|
], |
|
isAlarm: false, |
|
isSafe: false, |
|
normalEquipNumber: 0,//正常设备数量 |
|
warnEquipEquipNumber: 0,//告警设备数量 |
|
warnEquipWarnNumber: 0,//告警数量 |
|
buildMessage: '', |
|
tower: null, |
|
layer: null, |
|
liftArr: [], |
|
} |
|
}, |
|
watch: { |
|
bimModel: { |
|
handler(newVal, oldVal) { |
|
this.getLiftWarnList();//设备告警列表 |
|
window.removeEventListener('click', this.windowClick); |
|
} |
|
}, |
|
//模型是否加载完成监听 |
|
"$store.state.bfHelperState.bfState": { |
|
immediate: true, |
|
handler(newval, olval) { |
|
if (newval) { |
|
// 清除外部构件 |
|
// bfHelper.clearComponent(); |
|
bfHelper.extObjMngClear(); //清除外部构件 |
|
// 模型恢复全部状态 |
|
bfHelper.resetStatus(2); |
|
if (this.bimModel == 1) { |
|
bfHelper.lookEquipmentCop('电梯');; |
|
bfHelper.setOpacityFun(); |
|
setTimeout(() => { |
|
this.setTowerLift(); |
|
}, 300); |
|
bfHelper.setCameraStatus({ |
|
aspect: 1.889763779527559, |
|
coordinateSystem: "world", |
|
far: 960464.7787185954, |
|
fov: 45, |
|
name: "persp", |
|
near: 105041.57557288553, |
|
position: { |
|
x: 114923.08877241895, |
|
y: -391542.9803033385, |
|
z: 219845.7809478254 |
|
}, |
|
target: { |
|
x: -8729.420142852026, |
|
y: 863922.0428858905, |
|
z: -496665.6824418152 |
|
}, |
|
up: { |
|
x: -0.048407478040169157, |
|
y: 0.4914893345691443, |
|
z: 0.8695372045373162 |
|
}, |
|
version: 1, |
|
zoom: 1 |
|
}); |
|
// } |
|
|
|
} else { |
|
// 查看管线 |
|
bfHelper.TtLookEquipmentCop('电梯'); |
|
bfHelper.setOpacityFun1(); |
|
this.setTowerLift(); |
|
setTimeout(() => { |
|
this.liftCustom1() |
|
}, 500); |
|
} |
|
} |
|
}, |
|
} |
|
}, |
|
created() { |
|
this.getLiftWarnList();//设备告警列表 |
|
}, |
|
mounted() { |
|
let dom = document.getElementById('lift_box'); |
|
dom.addEventListener('contextmenu', (event)=> { |
|
event.preventDefault(); // 阻止默认菜单 |
|
const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0700' } }); |
|
window.open(routerUrl.href, "_blank"); |
|
}); |
|
if (this.bimModel == 1) { |
|
this.getNavigationMap() |
|
} |
|
}, |
|
beforeDestroy() { |
|
if (this.socket) { |
|
console.log('close scoket'); |
|
this.socket.close(); |
|
this.socket = ""; |
|
} |
|
window.removeEventListener('click', this.windowClick); |
|
}, |
|
destroyed() { |
|
// 销毁监听 |
|
if (this.socket) { |
|
console.log('close scoket'); |
|
this.socket.close(); |
|
this.socket = ""; |
|
} |
|
if (this.animationId) { |
|
cancelAnimationFrame(this.animationId); |
|
} |
|
if (this.animationId1) { |
|
cancelAnimationFrame(this.animationId1); |
|
} |
|
bfHelper.clearComponent(); |
|
}, |
|
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.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: '0700', area: this.bimModel } }); |
|
window.open(routerUrl.href, "_blank"); |
|
}, |
|
// 报警记录-20221031改版 |
|
getLiftWarnList() { |
|
getLiftWarnList({ |
|
area: this.bimModel, |
|
build: this.tower ? this.tower : "", |
|
floor: this.layer ? this.layer : "", |
|
}).then((res) => { |
|
this.listData = res.data.data.warnEquipList; |
|
this.normalEquipNumber = res.data.data.normalEquipNumber; |
|
this.warnEquipEquipNumber = res.data.data.warnEquipEquipNumber; |
|
this.warnEquipWarnNumber = res.data.data.warnEquipWarnNumber; |
|
for (let i = 0; i < this.listData.length; i++) { |
|
this.listData[i].showAlert = false; |
|
} |
|
}); |
|
}, |
|
showAlarkAlert(item, index) { |
|
item.showAlert = true; |
|
this.listData.splice(index, 1, item) |
|
}, |
|
closeAlarkAlert(item, index) { |
|
item.showAlert = false; |
|
this.listData.splice(index, 1, item) |
|
}, |
|
getLifLists() { |
|
getLifList(this.bimModel).then(res => { |
|
if (res.data.code == 200) { |
|
this.arr = res.data.data; |
|
this.setLiftColor(this.arr); |
|
setTimeout(() => { |
|
if (this.bimModel == 1) { |
|
this.liftCustom(); |
|
} else { |
|
this.liftCustom1(); |
|
} |
|
}, 300); |
|
} |
|
}) |
|
}, |
|
getNavigationMap() { |
|
commonValue.getNavigationMap('water') |
|
|
|
}, |
|
setTowerLift(i, j) { |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
this.tower = i; |
|
// if(j){ |
|
this.layer = j |
|
// } |
|
this.getLifLists(); |
|
if (this.bimModel == 1) { |
|
this.buildMessage = '园区'; |
|
commonValue.getUpdateMap("water", i, j); |
|
// bfHelper.mapUpdate( |
|
// require("../../../public/img/monitoring/mapviewer/total.png"), |
|
// bfHelper.mapViewerCamera[0][0].mapAnchors, |
|
// bfHelper.mapViewerCamera[0][0].modelAnchors |
|
// ); |
|
|
|
} |
|
}, |
|
liftCustom1() { //塔台电梯 |
|
// 取消电梯的半透明 |
|
bfHelper.restoreComponentsOpacityByObjectData([{ |
|
"fileId": bfHelper.ttTowerFileId[0], |
|
"family": "升降电梯" |
|
}, { |
|
"fileId": bfHelper.ttTowerFileId[0], |
|
"family": "升降电梯", |
|
'familyType': "DT 1000*1100*2500" |
|
}]) |
|
// 指定构件转化为外部构件 |
|
bfHelper.transitionExternalComponent('塔楼南电梯', bfHelper.ttTowerFileId[0] + ".1256693"); |
|
bfHelper.transitionExternalComponent('塔楼北电梯', bfHelper.ttTowerFileId[0] + ".1256694"); |
|
getLifList(this.bimModel).then(res => { |
|
this.arr = res.data.data; |
|
this.arr = res.data.data; |
|
// console.log(this.arr) |
|
for (let i = 0; i < this.arr.length; i++) { |
|
let name = ''; |
|
if (this.arr[i].code == '20700000001') { |
|
name = '塔楼南电梯'; |
|
this.arr[i].height = this.height * (this.arr[i].floor * 1 - 1); |
|
} else if (this.arr[i].code == '20700000002') { |
|
name = '塔楼北电梯'; |
|
this.arr[i].height = this.height * (this.arr[i].floor * 1 - 1); |
|
} |
|
this.arr[i].floor = this.arr[i].floor ? this.arr[i].floor : '1' |
|
bfHelper.setExternalComponentZ(name, this.height * (this.arr[i].floor * 1 - |
|
1)); |
|
} |
|
// this.animate1() |
|
if (!this.socket) { |
|
this.init(); |
|
} |
|
for (let j = 0; j < this.arr.length; j++) { |
|
let content = this.getContent(j, this.arr[j]); |
|
|
|
let objectId = bfHelper.getExternalComponentId(this.arr[j].name) |
|
bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭 |
|
bfHelper.customTag(bfHelper.getBoxMessage(objectId, true).max, null, |
|
content, objectId) |
|
|
|
} |
|
|
|
window.addEventListener('click', this.windowClick) |
|
}) |
|
}, |
|
liftCustom() { //业务区电梯 |
|
// 取消电梯的半透明 |
|
bfHelper.restoreComponentsOpacityByObjectData([{ |
|
"fileId": bfHelper.ywqTowerFileId[0], |
|
"family": "升降电梯(1)" |
|
}, { |
|
"fileId": bfHelper.ywqTowerFileId[1], |
|
"family": "升降电梯", |
|
'familyType': "DT 2400*3000*2500" |
|
}, { |
|
"fileId": bfHelper.ywqTowerFileId[3], |
|
"family": "升降电梯(1)" |
|
}, { |
|
"fileId": bfHelper.ywqTowerFileId[5], |
|
"family": "升降电梯(1)" |
|
}]) |
|
|
|
// 指定构件转化为外部构件 |
|
bfHelper.transitionExternalComponent('升降电梯(1)', bfHelper.ywqTowerFileId[0] + ".2772097"); |
|
bfHelper.transitionExternalComponent('升降电梯(2)', bfHelper.ywqTowerFileId[1] + ".1066785"); |
|
bfHelper.transitionExternalComponent('升降电梯(4)', bfHelper.ywqTowerFileId[3] + ".2306329"); |
|
bfHelper.transitionExternalComponent('升降电梯(6)', bfHelper.ywqTowerFileId[5] + ".1884001"); |
|
|
|
this.arr.reverse() |
|
for (let i = 0; i < this.arr.length; i++) { |
|
this.arr[i].height = this.height * (this.arr[i].floor * 1 - 1); |
|
this.arr[i].floor = this.arr[i].floor ? this.arr[i].floor : '1' |
|
bfHelper.setExternalComponentZ(this.arr[i].modelId, this.height * (this.arr[i].floor * 1 - 1)); |
|
} |
|
// console.log(this.arr) |
|
// this.animate(); |
|
if (!this.socket) { |
|
this.init() |
|
} |
|
|
|
for (let j = 0; j < this.labels.length; j++) { |
|
let content = this.getContent(j, this.arr[j]); |
|
|
|
let objectId = bfHelper.getExternalComponentId(this.arr[j].modelId) |
|
bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭 |
|
bfHelper.customTag(bfHelper.getBoxMessage(objectId, true).max, null, |
|
content, objectId) |
|
|
|
} |
|
window.addEventListener('click', this.windowClick) |
|
}, |
|
setLiftColor(arr) { |
|
let arrs = [] |
|
for (let i = 0; i < arr.length; i++) { |
|
if (arr[i].status != 90000) { |
|
arrs.push(arr[i]) |
|
} |
|
} |
|
|
|
let offList = []; |
|
let bjList = []; |
|
let normalList = [] |
|
for (let i = 0; i < arr.length; i++) { |
|
let objectId = bfHelper.getExternalComponentId(arr[i].modelId) |
|
if (arr[i].status == 90000) { |
|
normalList.push(objectId) |
|
} else if (arr[i].status == 90001) { |
|
offList.push(objectId) |
|
} else { |
|
bjList.push(objectId) |
|
} |
|
|
|
} |
|
bfHelper.restoreColor(normalList) |
|
bfHelper.setFlicker(bjList, '#ff0000', 100); |
|
bfHelper.cancelFlicker(normalList); |
|
bfHelper.setColor('#a5bbe5', offList); |
|
}, |
|
init: function () { |
|
if (typeof (WebSocket) === "undefined") { |
|
alert("您的浏览器不支持socket"); |
|
} else { |
|
this.socket = new WebSocket(this.path); |
|
// 监听socket连接 |
|
this.socket.onopen = this.open; |
|
// 监听socket错误信息 |
|
this.socket.onerror = this.error; |
|
// 监听socket消息 |
|
this.socket.onmessage = this.getMessage; |
|
} |
|
}, |
|
windowClick(e) { |
|
if (e.target.id.indexOf('lift') > -1) { |
|
this.arr.map((item, index) => { |
|
document.getElementById('lift-block' + index).style.display = 'none'; |
|
}) |
|
let id = 'lift-block' + e.target.id.replace('lift-name', ''); |
|
document.getElementById(id).style.display = 'block'; |
|
} |
|
else { |
|
this.arr.map((item, index) => { |
|
if (document.getElementById('lift-block' + index)) { |
|
document.getElementById('lift-block' + index).style.display = 'none'; |
|
} |
|
}) |
|
} |
|
}, |
|
open: function () { |
|
console.log("socket连接成功") |
|
}, |
|
error: function () { |
|
console.log("连接错误"); |
|
// setTimeout(() => { |
|
// console.log('ws重连'); |
|
// this.init(); |
|
// },10000); |
|
}, |
|
getMessage(msg) { |
|
let obj = JSON.parse(msg.data) |
|
// obj.createTime = dateFormat(new Date(obj.createTime), 'yyyy-MM-dd hh:mm'); |
|
// obj.tendingTime = dateFormat(new Date(obj.tendingTime), 'yyyy-MM-dd hh:mm'); |
|
// if(obj.status != 90000){ |
|
let idx = this.arr.findIndex(item => { return item.id == obj.id }); |
|
if (idx > -1) { |
|
// this.arr[idx].modelId = obj.modelId; |
|
// this.arr[idx].status = obj.status; |
|
// this.arr[idx].createTime = obj.createTime; |
|
// this.arr[idx].tendingTime = obj.tendingTime; |
|
// this.arr[idx].factory = obj.factory; |
|
// this.arr[idx].floor = obj.floor; |
|
// this.arr[idx].statusMsg = obj.statusMsg; |
|
this.arr[idx].direction = obj.direction; |
|
|
|
let _obj = JSON.parse(JSON.stringify(this.arr[idx])); |
|
_obj.floor = obj.floor; |
|
|
|
this.setLiftColor(this.arr) |
|
if (this.bimModel == 1) { |
|
let content = this.getContent(idx, _obj); |
|
let objectId = bfHelper.getExternalComponentId(obj.modelId); |
|
|
|
// console.log(obj.modelId, obj.floor, this.height * ((obj.floor * 1) - (this.arr[idx].floor * 1))) |
|
if (this.arr[idx].floor != obj.floor) { |
|
bfHelper.setExternalComponentZ(obj.modelId, this.height * ((obj.floor * 1) - (this.arr[idx].floor * 1))); |
|
} |
|
bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭 |
|
bfHelper.clearDrawableContainerById(objectId); |
|
bfHelper.customTag(bfHelper.getBoxMessage(objectId, true).max, null, |
|
content, objectId); |
|
setTimeout(() => { |
|
this.arr[idx].floor = obj.floor; |
|
}, 150); |
|
} else { |
|
let content = this.getContent(idx, _obj); |
|
|
|
if (this.arr[idx].floor != obj.floor) { |
|
bfHelper.setExternalComponentZ(obj.modelId, this.height * ((obj.floor * 1) - (this.arr[idx].floor * 1))); |
|
} |
|
bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭 |
|
bfHelper.clearDrawableContainerById(objectId); |
|
bfHelper.customTag(bfHelper.getBoxMessage(objectId, true).max, null, |
|
content, objectId); |
|
setTimeout(() => { |
|
this.arr[idx].floor = obj.floor; |
|
}, 150); |
|
} |
|
} |
|
// } |
|
|
|
}, |
|
//动态标签 |
|
getContent(idx, obj) { |
|
let content; |
|
if (this.bimModel == 1) { |
|
if (obj.location == '1号楼' || obj.location == '2号楼') { |
|
content = |
|
`<div class="leadTips" style="transform: translateY(-72px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img src="${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1-reverse.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2-reverse.png' : '../../../public/img/monitoring/electricity/customTag3-reverse.png')}" style="width:87px;height:53px;margin-left:-87px"/> |
|
<div style="margin-top: -41px;margin-left:-270px"> |
|
<div id="lift-name1${idx}" style="width: 185px;height: 46px;background: url('${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag4.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2-1reverse.png' : '../../../public/img/monitoring/electricity/customTag3-1.png')}');"> |
|
<span style="padding-left: 36px;line-height: 32px;font-size: 15px;color: white;cursor:pointer" id="lift-name${idx}">${obj.name}</span> |
|
</div> |
|
<div id="lift-block${idx}" style="background-color:rgb(53,72,108);width:150px;position:absolute; |
|
left:-260px;top:15px;padding:10px;display:none;z-index:999"> |
|
<div style="display:flex;justify-content: space-between;"> |
|
<span style="font-size:13px;color:silver">生产厂家：</span> |
|
<span style="font-size:14px;color:white">${obj.factory}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">投入时间：</span> |
|
<span style="font-size:14px;color:white">${obj.createTime.substring(0, 10)}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">设备状态：</span> |
|
<span style="font-size:14px;color:white">${obj.status == 90000 ? '正常' : obj.status == 90001 ? '离线' : obj.statusMsg}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">所在楼层：</span> |
|
<span style="font-size:14px;color:white">${obj.floor}F</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保时间：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingTime.substring(0, 10)}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保人：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingUser}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保电话：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingPhone}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">运行方向：</span> |
|
<img src="${require(obj.direction == '向上' ? '../../../public/img/monitoring/electricity/liftup.png' : obj.direction == '向下' ? '../../../public/img/monitoring/electricity/liftdown.png' : '../../../public/img/monitoring/electricity/liftstop.png')}" |
|
style="width:50px;height:50px;"/> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div>` |
|
} else { |
|
content = |
|
`<div class="leadTips" style="transform: translateY(-72px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img src="${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1.png' : obj.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 id="lift-name1${idx}" style="width: 185px;height: 46px;background: url('${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1-1.png' : obj.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;cursor:pointer" id="lift-name${idx}">${obj.name}</span> |
|
</div> |
|
<div id="lift-block${idx}" style="background-color:rgb(53,72,108);width:150px;position:absolute; |
|
left:90px;top:15px;padding:10px;display:none;z-index:999"> |
|
<div style="display:flex;justify-content: space-between;"> |
|
<span style="font-size:13px;color:silver">生产厂家：</span> |
|
<span style="font-size:14px;color:white">${obj.factory}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">投入时间：</span> |
|
<span style="font-size:14px;color:white">${obj.createTime.substring(0, 10)}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">设备状态：</span> |
|
<span style="font-size:14px;color:white">${obj.status == 90000 ? '正常' : obj.status == '90001' ? '离线' : obj.statusMsg}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">所在楼层：</span> |
|
<span style="font-size:14px;color:white">${obj.floor}F</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保时间：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingTime.substring(0, 10)}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保人：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingUser}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保电话：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingPhone}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">运行方向：</span> |
|
<img src="${require(obj.direction == '向上' ? '../../../public/img/monitoring/electricity/liftup.png' : obj.direction == '向下' ? '../../../public/img/monitoring/electricity/liftdown.png' : '../../../public/img/monitoring/electricity/liftstop.png')}" |
|
style="width:50px;height:50px;"/> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div>` |
|
} |
|
} else { |
|
if (this.arr[idx].location == '塔楼南侧') { |
|
content = |
|
`<div class="leadTips" style="transform: translateY(-72px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img src="${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1-reverse.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2-reverse.png' : '../../../public/img/monitoring/electricity/customTag3-reverse.png')}" style="width:87px;height:53px;margin-left:-87px"/> |
|
<div style="margin-top: -41px;margin-left:-270px"> |
|
<div id="lift-name1${idx}" style="width: 185px;height: 46px;background: url('${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag4.png' : obj.status == 90001 ? '../../../public/img/monitoring/electricity/customTag2-1reverse.png' : '../../../public/img/monitoring/electricity/customTag3-1.png')}');"> |
|
<span style="padding-left: 36px;line-height: 32px;font-size: 15px;color: white;cursor:pointer" id="lift-name${idx}">${obj.name}</span> |
|
</div> |
|
<div id="lift-block${idx}" style="background-color:rgb(53,72,108);width:150px;position:absolute; |
|
left:-260px;top:15px;padding:10px;display:none;z-index:999"> |
|
<div style="display:flex;justify-content: space-between;"> |
|
<span style="font-size:13px;color:silver">生产厂家：</span> |
|
<span style="font-size:14px;color:white">${obj.factory}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">投入时间：</span> |
|
<span style="font-size:14px;color:white">${obj.createTime.substring(0, 10)}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">设备状态：</span> |
|
<span style="font-size:14px;color:white">${obj.status == 90000 ? '正常' : obj.status == 90001 ? '离线' : obj.statusMsg}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">所在楼层：</span> |
|
<span style="font-size:14px;color:white">${obj.floor}F</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保时间：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingTime.substring(0, 10)}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保人：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingUser}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保电话：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingPhone}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">运行方向：</span> |
|
<img src="${require(obj.direction == '向上' ? '../../../public/img/monitoring/electricity/liftup.png' : obj.direction == '向下' ? '../../../public/img/monitoring/electricity/liftdown.png' : '../../../public/img/monitoring/electricity/liftstop.png')}" |
|
style="width:50px;height:50px;"/> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div>` |
|
} else { |
|
content = |
|
`<div class="leadTips" style="transform: translateY(-72px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img src="${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1.png' : obj.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 id="lift-name1${idx}" style="width: 185px;height: 46px;background: url('${require(obj.status == 90000 ? '../../../public/img/monitoring/electricity/customTag1-1.png' : obj.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;cursor:pointer" id="lift-name${idx}">${obj.name}</span> |
|
</div> |
|
<div id="lift-block${idx}" style="background-color:rgb(53,72,108);width:150px;position:absolute; |
|
left:90px;top:15px;padding:10px;display:none;z-index:999"> |
|
<div style="display:flex;justify-content: space-between;"> |
|
<span style="font-size:13px;color:silver">生产厂家：</span> |
|
<span style="font-size:14px;color:white">${obj.factory}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">投入时间：</span> |
|
<span style="font-size:14px;color:white">${obj.createTime.substring(0, 10)}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">设备状态：</span> |
|
<span style="font-size:14px;color:white">${obj.status == 90000 ? '正常' : obj.status == '90001' ? '离线' : obj.statusMsg}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">所在楼层：</span> |
|
<span style="font-size:14px;color:white">${obj.floor}F</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保时间：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingTime.substring(0, 10)}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保人：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingUser}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">维保电话：</span> |
|
<span style="font-size:14px;color:white">${obj.tendingPhone}</span> |
|
</div> |
|
<div style="display:flex;justify-content: space-between;margin-top:5px"> |
|
<span style="font-size:13px;color:silver">运行方向：</span> |
|
<img src="${require(obj.direction == '向上' ? '../../../public/img/monitoring/electricity/liftup.png' : obj.direction == '向下' ? '../../../public/img/monitoring/electricity/liftdown.png' : '../../../public/img/monitoring/electricity/liftstop.png')}" |
|
style="width:50px;height:50px;"/> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div>` |
|
} |
|
} |
|
return content; |
|
}, |
|
// 计算电梯所在楼层高度 |
|
calcHeight(liftObj) { |
|
return this.height * (liftObj.floor * 1 - 1); |
|
}, |
|
send: function () { |
|
this.socket.send() |
|
}, |
|
close: function () { |
|
console.log("socket已经关闭") |
|
}, |
|
animate() { |
|
this.animationId = requestAnimationFrame(this.animate); |
|
for (let i = 0; i < this.arr.length; i++) { |
|
// console.log(this.arr[i].status,this.arr[i].direction) |
|
if (this.arr[i].status == 90000 && this.arr[i].direction != "停止") { |
|
// console.log(i) |
|
let name = ''; |
|
// console.log(this.arr[i].code) |
|
if (this.arr[i].code == '10700000001') { |
|
name = '升降电梯(1)'; |
|
this.playFun(i, name) |
|
} else if (this.arr[i].code == '10700000002') { |
|
name = '升降电梯(2)'; |
|
this.playFun(i, name) |
|
} else if (this.arr[i].code == '10700000003') { |
|
name = '升降电梯(4)'; |
|
this.playFun(i, name) |
|
} else if (this.arr[i].code == '10700000004') { |
|
name = '升降电梯(6)'; |
|
this.playFun(i, name) |
|
} |
|
} |
|
} |
|
}, |
|
animate1() { |
|
this.animationId1 = requestAnimationFrame(this.animate1); |
|
|
|
for (let i = 0; i < this.arr.length; i++) { |
|
// console.log(this.arr[i].status,this.arr[i].direction) |
|
if (this.arr[i].status == 90000 && this.arr[i].direction != "停止") { |
|
let name = ''; |
|
if (this.arr[i].code == '20700000001') { |
|
name = '塔楼南电梯'; |
|
this.playFun(i, name) |
|
} else if (this.arr[i].code == '20700000002') { |
|
name = '塔楼北电梯'; |
|
this.playFun(i, name) |
|
} |
|
} |
|
} |
|
}, |
|
playFun(i, name) { |
|
// console.log('jjjjjj') |
|
// console.log(i,name) |
|
if (this.arr[i].direction == '向上' && this.arr[i].height <= this.height * this.arr[i].floor) { |
|
// console.log(1111111) |
|
this.arr[i].height += this.offsetZ; |
|
bfHelper.setExternalComponentZ(name, this.offsetZ); |
|
} |
|
if (this.arr[i].direction == '向上' && this.arr[i].height >= this.height * this.arr[i].floor) { |
|
this.arr[i].direction = '停止'; |
|
// console.log(2222222) |
|
this.arr[i].floor = this.arr[i].floor * 1 + 1; |
|
cancelAnimationFrame(this.animationId); |
|
console.log('向上停止', this.arr[i].floor); |
|
} |
|
if (this.arr[i].direction == '向下' && this.arr[i].height >= this.height * (this.arr[i].floor * 1 - 2)) { |
|
this.arr[i].height -= this.offsetZ; |
|
bfHelper.setExternalComponentZ(name, -this.offsetZ); |
|
} |
|
if (this.arr[i].direction == '向下' && this.arr[i].height <= this.height * (this.arr[i].floor * 1 - 2)) { |
|
this.arr[i].direction = '停止'; |
|
// console.log(4444444) |
|
this.arr[i].floor = this.arr[i].floor * 1 - 1; |
|
cancelAnimationFrame(this.animationId); |
|
console.log('向下停止', this.arr[i].floor); |
|
} |
|
let objectId = bfHelper.getExternalComponentId(this.arr[i].modelId); |
|
bfHelper.clearDrawableContainerById(objectId); |
|
bfHelper.customTag(bfHelper.getBoxMessage(objectId, true).max, null, |
|
this.getContent(i, this.arr[i]), objectId); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
// 设备概况 |
|
.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: cover; |
|
width: 176px; |
|
height: 78px; |
|
} |
|
|
|
.lx { |
|
// padding-right: 36px; |
|
box-sizing: border-box; |
|
// justify-content: flex-end; |
|
background: url(../../../public/img/monitoring/electricity/guzhangbg.png) no-repeat; |
|
background-size: cover; |
|
width: 176px; |
|
height: 78px; |
|
} |
|
} |
|
|
|
.stateName { |
|
margin: 5px 0 20px; |
|
color: #2cd52c; |
|
font-size: 14px; |
|
display: flex; |
|
justify-content: space-around; |
|
|
|
.lx { |
|
// padding-left: 146px; |
|
// color: red; |
|
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; |
|
} |
|
|
|
// .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; |
|
justify-content: space-around; |
|
|
|
&.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, .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; |
|
|
|
.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; |
|
} |
|
} |
|
|
|
.lift-block { |
|
position: relative; |
|
width: 300px; |
|
|
|
.lift-block-top { |
|
width: 300px; |
|
height: 100px; |
|
background-size: 100% 100%; |
|
} |
|
|
|
.lift-block-top1 { |
|
background-image: url(../../../public/img/monitoring/electricity/liftbg1.png) |
|
} |
|
|
|
.lift-block-top2 { |
|
background-image: url(../../../public/img/monitoring/electricity/liftbg2.png) |
|
} |
|
|
|
|
|
} |
|
</style> |
|
<style scoped lang="scss"> |
|
/deep/.bf-drawable-context .bf-drawable-text:nth-of-type(3) { |
|
z-index: 2000 !important; |
|
} |
|
</style>
|
|
|