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.
1514 lines
48 KiB
1514 lines
48 KiB
<!-- 电子围界 --> |
|
<template> |
|
<div> |
|
<!-- 返回主视角 --> |
|
<backHome :bimModel="bimModel" type="电子围界" dom=".mapDom"></backHome> |
|
<div style="position: absolute; left: 84px; top: 20px" v-if="bimModel == 1"> |
|
<div class="build-message" style=" |
|
color: white; |
|
text-align: center; |
|
border: 1px solid rgb(0, 187, 255); |
|
width: 110px; |
|
margin: 0 auto; |
|
border-radius: 5px; |
|
padding: 5px 0; |
|
"> |
|
{{ 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">{{ 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 class="bj flex-center" style="font-family:fantasy;">1</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> |
|
<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 @click="bjClick(item)" 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"> |
|
<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 ? '#ff000' : 'white', |
|
}"></span> |
|
</div> |
|
<span class=""></span> |
|
<span class="data" :title="item.warnContent" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', |
|
}">{{ item.warnContent }}</span> |
|
<span class=""></span> |
|
<span class="time" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', |
|
}">{{ item.warnDate.substring(5, 16) }}</span> |
|
</div> |
|
</div> |
|
<div @click="bjClick(item)" 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 == '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 ? '#ff000' : 'white', |
|
}"></span> |
|
</div> |
|
<span class=""></span> |
|
<span class="data" :title="item.warnContent" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', |
|
}">{{ item.warnContent }}</span> |
|
<span class=""></span> |
|
<span class="time" :style="{ |
|
color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', |
|
}">{{ item.warnDate.substring(5, 16) }}</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div style=" |
|
position: absolute; |
|
bottom: 10px; |
|
right: 10px; |
|
width: 345px; |
|
text-align: right; |
|
color: rgb(7, 230, 237); |
|
font-size: 14px; |
|
cursor: pointer; |
|
"> |
|
<span @click="goMoreWarnList">查看报警详情</span> |
|
</div> |
|
</div> |
|
<div class="switch" :class="bimModel == 2 ? 'tataigen' : ''"> |
|
<div class="title flex-center"> |
|
<img src="../../../public/img/monitoring/sblb.png" /> |
|
<span id="wall_box">设备列表</span> |
|
</div> |
|
<img src="../../../public/img/monitoring/ktline.png" style="margin-left: 1.25rem" /> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border1" /> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border2" /> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border3" /> |
|
<img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border4" /> |
|
<div class="tabBox"> |
|
<el-table :data="tableData.slice((current - 1) * size, current * size)" style="width: 100%" |
|
@row-click="tableClick" :class="bimModel == 2 ? 'tataitab' : ''" @row-contextmenu="tableContext"> |
|
<el-table-column label="设备名称" style="cursor: pointer"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center-center mon_box" style="cursor: pointer; 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' |
|
: '#ff0000', |
|
}" :title="scope.row.name" style=" |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
">{{ scope.row.name }}</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="|" width="10"> </el-table-column> |
|
<el-table-column label="位置" min-width="100px" style="cursor: pointer; overflow: hidden; white-space: nowrap"> |
|
<template slot-scope="scope"> |
|
<span :style="{ |
|
color: |
|
scope.row.status == 90000 |
|
? 'white' |
|
: scope.row.status == 90001 |
|
? '#a5bbe5' |
|
: '#ff0000', |
|
}" :title="scope.row.location" style=" |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
">{{ scope.row.location }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="|" width="10"> </el-table-column> |
|
<el-table-column label="报警信息" style="cursor: pointer"> |
|
<template slot-scope="scope"> |
|
<span style="cursor: pointer" :style="{ |
|
color: |
|
scope.row.status == 90000 |
|
? 'white' |
|
: scope.row.status == 90001 |
|
? '#a5bbe5' |
|
: '#ff0000', |
|
}"> |
|
{{ |
|
scope.row.status == 90000 |
|
? "" |
|
: scope.row.status == 90001 |
|
? "离线" |
|
: scope.row.warnMsg |
|
}} |
|
</span> |
|
</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="tableData.length"> |
|
</el-pagination> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import * as bfHelper from "../../util/bfHelper"; |
|
import * as commonValue from "../../util/commonValue"; |
|
import backHome from "./backHome"; |
|
|
|
import { |
|
getWallLists, |
|
getWallRecords, |
|
getWallGK, |
|
getFenceWarnList, //报警列表 |
|
getCancelWarn, //确认告警 |
|
recoveryWarn,//恢复告警 |
|
} from "@/api/garden/monitoring"; |
|
export default { |
|
props: { |
|
bimModel: { |
|
type: Number, |
|
}, |
|
}, |
|
components: { |
|
backHome, |
|
}, |
|
data() { |
|
return { |
|
// 业务区围墙ID |
|
ywq: [ |
|
// 一区 |
|
{ |
|
code: "11100000001", |
|
walls: [ |
|
"10000752850689.980404", |
|
"10000752850689.946632", |
|
"10000752850689.946527", |
|
"10000752850689.938096", |
|
"10000752850689.938110", |
|
"10000752850689.938118", |
|
"10000752850689.938134", |
|
"10000752850689.938144", |
|
"10000752850689.938164", |
|
"10000752850689.938181", |
|
"10000752850689.938184", |
|
"10000752850689.938187", |
|
"10000752850689.938190", |
|
"10000752850689.938193", |
|
"10000752850689.938196", |
|
"10000752850689.938199", |
|
"10000752850689.938202", |
|
"10000752850689.938205", |
|
"10000752850689.938208", |
|
"10000752850689.938211", |
|
"10000752850689.938214", |
|
"10000752850689.938217", |
|
"10000752850689.938220", |
|
"10000752850689.938223", |
|
"10000752850689.938226", |
|
], |
|
}, |
|
// 二区 |
|
{ |
|
code: "11100000002", |
|
walls: [ |
|
"10000752850689.938229", |
|
"10000752850689.938232", |
|
"10000752850689.938258", |
|
"10000752850689.938274", |
|
"10000752850689.938277", |
|
"10000752850689.938280", |
|
"10000752850689.938283", |
|
"10000752850689.938286", |
|
"10000752850689.938289", |
|
"10000752850689.938292", |
|
"10000752850689.938295", |
|
"10000752850689.938298", |
|
"10000752850689.938301", |
|
"10000752850689.938304", |
|
"10000752850689.938307", |
|
"10000752850689.938310", |
|
"10000752850689.938313", |
|
"10000752850689.938316", |
|
"10000752850689.946060", |
|
], |
|
}, |
|
// 三区 |
|
{ |
|
code: "11100000003", |
|
walls: [ |
|
"10000752850689.938375", |
|
"10000752850689.946166", |
|
"10000752850689.946286", |
|
"10000752850689.946308", |
|
"10000752850689.946332", |
|
"10000752850689.946369", |
|
"10000752850689.946410", |
|
"10000752850689.946445", |
|
], |
|
}, |
|
// 四区 |
|
{ |
|
code: "11100000004", |
|
walls: [ |
|
"10000752850689.938595", |
|
"10000752850689.938769", |
|
"10000752850689.938923", |
|
"10000752850689.939006", |
|
"10000752850689.939089", |
|
"10000752850689.939172", |
|
"10000752850689.939255", |
|
"10000752850689.939338", |
|
"10000752850689.939421", |
|
"10000752850689.939504", |
|
"10000752850689.939587", |
|
"10000752850689.939670", |
|
"10000752850689.939753", |
|
"10000752850689.939836", |
|
"10000752850689.939919", |
|
"10000752850689.940002", |
|
"10000752850689.940085", |
|
"10000752850689.940168", |
|
], |
|
}, |
|
//五区 |
|
{ |
|
code: "11100000005", |
|
walls: [ |
|
"10000752850689.940251", |
|
"10000752850689.940334", |
|
"10000752850689.940417", |
|
"10000752850689.940500", |
|
"10000752850689.940583", |
|
"10000752850689.940666", |
|
"10000752850689.940749", |
|
"10000752850689.940832", |
|
"10000752850689.940915", |
|
"10000752850689.940998", |
|
"10000752850689.941081", |
|
"10000752850689.941164", |
|
"10000752850689.941247", |
|
"10000752850689.941330", |
|
"10000752850689.941413", |
|
"10000752850689.941501", |
|
"10000752850689.941658", |
|
"10000752850689.941741", |
|
"10000752850689.941824", |
|
"10000752850689.941907", |
|
"10000752850689.941990", |
|
"10000752850689.942073", |
|
"10000752850689.942156", |
|
"10000752850689.942239", |
|
"10000752850689.942322", |
|
"10000752850689.942405", |
|
], |
|
}, |
|
//六区 |
|
{ |
|
code: "11100000006", |
|
walls: [ |
|
"10000752850689.942488", |
|
"10000752850689.942571", |
|
"10000752850689.942654", |
|
"10000752850689.942737", |
|
"10000752850689.942820", |
|
"10000752850689.942903", |
|
"10000752850689.942986", |
|
"10000752850689.943069", |
|
"10000752850689.943152", |
|
"10000752850689.943235", |
|
"10000752850689.943318", |
|
"10000752850689.943401", |
|
"10000752850689.943484", |
|
"10000752850689.943567", |
|
"10000752850689.943650", |
|
"10000752850689.943733", |
|
"10000752850689.943816", |
|
"10000752850689.943899", |
|
"10000752850689.943982", |
|
"10000752850689.944065", |
|
"10000752850689.944148", |
|
"10000752850689.944231", |
|
"10000752850689.944314", |
|
"10000752850689.944397", |
|
"10000752850689.944480", |
|
"10000752850689.944563", |
|
"10000752850689.944646", |
|
"10000752850689.944729", |
|
"10000752850689.944812", |
|
], |
|
}, |
|
//七区 |
|
{ |
|
code: "11100000007", |
|
walls: [ |
|
"10000752850689.945577", |
|
"10000752850689.945692", |
|
"10000752850689.945711", |
|
"10000752850689.945714", |
|
"10000752850689.945717", |
|
"10000752850689.945720", |
|
"10000752850689.945723", |
|
"10000752850689.945726", |
|
"10000752850689.945729", |
|
"10000752850689.945732", |
|
"10000752850689.945735", |
|
"10000752850689.945738", |
|
"10000752850689.945741", |
|
"10000752850689.945744", |
|
"10000752850689.945747", |
|
"10000752850689.945750", |
|
"10000752850689.945753", |
|
"10000752850689.945756", |
|
"10000752850689.945759", |
|
"10000752850689.945762", |
|
"10000752850689.945765", |
|
"10000752850689.945768", |
|
"10000752850689.945771", |
|
"10000752850689.945774", |
|
"10000752850689.945777", |
|
"10000752850689.945780", |
|
"10000752850689.945783", |
|
], |
|
}, |
|
//八区 |
|
{ |
|
code: "11100000008", |
|
walls: [ |
|
"10000752850689.945786", |
|
"10000752850689.945789", |
|
"10000752850689.945792", |
|
"10000752850689.945795", |
|
"10000752850689.945798", |
|
"10000752850689.945801", |
|
"10000752850689.945804", |
|
"10000752850689.945807", |
|
"10000752850689.945810", |
|
"10000752850689.945813", |
|
"10000752850689.945816", |
|
"10000752850689.945819", |
|
"10000752850689.945822", |
|
"10000752850689.945825", |
|
"10000752850689.945828", |
|
"10000752850689.945831", |
|
"10000752850689.945834", |
|
"10000752850689.945837", |
|
"10000752850689.945840", |
|
"10000752850689.945843", |
|
"10000752850689.945846", |
|
"10000752850689.945849", |
|
"10000752850689.945852", |
|
], |
|
}, |
|
//九区 |
|
{ |
|
code: "11100000009", |
|
walls: [ |
|
"10000752850689.945857", |
|
"10000752850689.945874", |
|
"10000752850689.945877", |
|
"10000752850689.945880", |
|
"10000752850689.945883", |
|
"10000752850689.945886", |
|
"10000752850689.945889", |
|
"10000752850689.945892", |
|
"10000752850689.945895", |
|
"10000752850689.945898", |
|
"10000752850689.945901", |
|
"10000752850689.945904", |
|
"10000752850689.945907", |
|
"10000752850689.945910", |
|
"10000752850689.945913", |
|
"10000752850689.945916", |
|
"10000752850689.945919", |
|
"10000752850689.945922", |
|
"10000752850689.945925", |
|
"10000752850689.945934", |
|
"10000752850689.945946", |
|
"10000752850689.945954", |
|
], |
|
}, |
|
//十区 |
|
{ |
|
code: "11100000010", |
|
walls: [ |
|
"10000752850689.945964", |
|
"10000752850689.989554", |
|
"10000752850689.989568", |
|
"10000752850689.989571", |
|
"10000752850689.989574", |
|
"10000752850689.989577", |
|
"10000752850689.989580", |
|
"10000752850689.989583", |
|
"10000752850689.989586", |
|
"10000752850689.989589", |
|
"10000752850689.989592", |
|
"10000752850689.989595", |
|
"10000752850689.989598", |
|
"10000752850689.989601", |
|
"10000752850689.989604", |
|
"10000752850689.989607", |
|
"10000752850689.989610", |
|
"10000752850689.989613", |
|
"10000752850689.989616", |
|
"10000752850689.989619", |
|
"10000752850689.989622", |
|
"10000752850689.989625", |
|
"10000752850689.989628", |
|
"10000752850689.989631", |
|
"10000752850689.989634", |
|
"10000752850689.990535", |
|
"10000752850689.989646", |
|
"10000752850689.989649", |
|
], |
|
}, |
|
//十一区 |
|
{ |
|
code: "11100000011", |
|
walls: [ |
|
"10000752850689.989652", |
|
"10000752850689.989655", |
|
"10000752850689.989658", |
|
"10000752850689.989661", |
|
"10000752850689.989664", |
|
"10000752850689.989667", |
|
"10000752850689.989670", |
|
"10000752850689.989673", |
|
"10000752850689.989676", |
|
"10000752850689.989679", |
|
"10000752850689.989682", |
|
"10000752850689.989685", |
|
"10000752850689.989688", |
|
"10000752850689.989691", |
|
"10000752850689.989694", |
|
"10000752850689.989697", |
|
"10000752850689.989700", |
|
"10000752850689.989703", |
|
"10000752850689.989706", |
|
], |
|
}, |
|
//十二区 |
|
{ |
|
code: "11100000012", |
|
walls: [ |
|
"10000752850689.989709", |
|
"10000752850689.993692", |
|
"10000752850689.993707", |
|
"10000752850689.993710", |
|
"10000752850689.993713", |
|
"10000752850689.993716", |
|
"10000752850689.993719", |
|
"10000752850689.993722", |
|
"10000752850689.993725", |
|
"10000752850689.993728", |
|
"10000752850689.993738", |
|
"10000752850689.993747", |
|
"10000752850689.993756", |
|
], |
|
}, |
|
//十三区 |
|
{ |
|
code: "11100000013", |
|
walls: [ |
|
"10000752850689.993765", |
|
"10000752850689.993788", |
|
"10000752850689.993830", |
|
"10000752850689.993856", |
|
"10000752850689.993880", |
|
"10000752850689.993906", |
|
"10000752850689.993931", |
|
], |
|
}, |
|
//十四区 |
|
{ |
|
code: "11100000014", |
|
walls: [ |
|
"10000752850689.993956", |
|
"10000752850689.994000", |
|
"10000752850689.994050", |
|
"10000752850689.994075", |
|
"10000752850689.994100", |
|
"10000752850689.994125", |
|
"10000752850689.994150", |
|
"10000752850689.994175", |
|
"10000752850689.994200", |
|
"10000752850689.994225", |
|
"10000752850689.994250", |
|
"10000752850689.994275", |
|
"10000752850689.994300", |
|
"10000752850689.994325", |
|
"10000752850689.1030655", |
|
], |
|
}, |
|
], |
|
|
|
// 塔台围墙ID |
|
tt: [ |
|
// 一区 |
|
{ |
|
code: "21100000001", |
|
walls: [ |
|
"10000750071023.883261", |
|
"10000750071023.883488", |
|
"10000750071023.883540", |
|
"10000750071023.883573", |
|
"10000750071023.883576", |
|
"10000750071023.883579", |
|
"10000750071023.883582", |
|
"10000750071023.888585", |
|
"10000750071023.1016116", |
|
], |
|
}, |
|
// 二区 |
|
{ |
|
code: "21100000002", |
|
walls: [ |
|
"10000750071023.1013558", |
|
// "10000750071023.894937", |
|
], |
|
}, |
|
// 三区 |
|
{ |
|
code: "21100000003", |
|
walls: [ |
|
"10000750071023.1010290", |
|
// "10000750071023.895163", |
|
], |
|
}, |
|
|
|
// 四区 |
|
|
|
{ |
|
code: "21100000004", |
|
walls: ["10000750071023.981489"], |
|
}, |
|
], |
|
|
|
colors: ["#a1a1a1", "#25be43", "#ff0000"], //电子围栏区域状态颜色 |
|
tableData: [], |
|
current: 1, |
|
size: 5, |
|
total: 0, |
|
isMapViewer: 0, |
|
isAlarm: false, |
|
isSafe: false, |
|
safeTotal: 0, |
|
alarmTotal: 0, |
|
listData: {}, |
|
buildMessage: "", |
|
tower: null, |
|
layer: null, |
|
activeTab: 1, |
|
classOption: { |
|
step: 0.2, |
|
}, //报警信息滚动速度 |
|
}; |
|
}, |
|
watch: { |
|
bimModel: { |
|
handler(newVal, oldVal) { |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
this.tower = null; |
|
this.getWall(); |
|
// this.getWallGK(); |
|
this.getFenceWarnList(); //告警列表 |
|
}, |
|
}, |
|
//模型是否加载完成监听 |
|
"$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"); |
|
|
|
if (build) { |
|
setTimeout(() => { |
|
this.setTowerWall(); |
|
}, 300); |
|
bfHelper.lookEquipmentCop("电子围界"); |
|
} else { |
|
bfHelper.lookEquipmentCop("电子围界"); |
|
bfHelper.setOpacityFun(); |
|
this.onClick(); |
|
setTimeout(() => { |
|
this.buildMessage = "园区"; |
|
this.getNavigationMap(); |
|
}, 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("电子围界"); |
|
|
|
// window.sessionStorage.setItem( |
|
// "ttcamera", |
|
// JSON.stringify(bfHelper.getCameraStatus()) |
|
// ); |
|
// } |
|
} |
|
} |
|
}, |
|
}, |
|
}, |
|
beforeDestroy() { |
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
}, |
|
mounted() { |
|
let dom = document.getElementById('wall_box'); |
|
dom.addEventListener('contextmenu', (event)=> { |
|
event.preventDefault(); // 阻止默认菜单 |
|
const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '1100' } }); |
|
window.open(routerUrl.href, "_blank"); |
|
}); |
|
this.getWall(); |
|
// this.getWallGK(); |
|
this.getFenceWarnList(); //告警列表 |
|
if (this.bimModel == 1) { |
|
this.getNavigationMap(); |
|
} |
|
}, |
|
methods: { |
|
//确认告警 - 重新查询告警列表 |
|
doCancelWarn(item) { |
|
getCancelWarn(item.id).then((res) => { |
|
// this.getFenceWarnList(); |
|
item.confirmStatus = 1; |
|
}); |
|
}, |
|
//恢复告警 |
|
doRecoveryWarn(item) { |
|
recoveryWarn(item.id).then((res) => { |
|
item.warnStatus = 2; |
|
}) |
|
}, |
|
//跳转历史告警列表 |
|
goMoreWarnList() { |
|
const routerUrl = this.$router.resolve({ |
|
path: "/equipment/warnHistory", |
|
query: { classCode: "1100", area: this.bimModel }, |
|
}); |
|
window.open(routerUrl.href, "_blank"); |
|
}, |
|
// 报警记录-20221031改版 |
|
getFenceWarnList() { |
|
getFenceWarnList({ |
|
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); |
|
} |
|
}, |
|
getNavigationMap() { |
|
commonValue.getNavigationMap("water"); |
|
}, |
|
clickAlarm(item) { |
|
this.activeTab = item; |
|
}, |
|
setTowerWall(i, j) { |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
this.tower = i; |
|
if (j) { |
|
this.layer = j; |
|
} |
|
this.getWall(); |
|
// this.getWallGK(); |
|
this.getFenceWarnList(); //告警列表 |
|
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 |
|
// ); |
|
// } |
|
} |
|
}, |
|
// 构件点击 |
|
onClick() { |
|
bfHelper.onClick((data) => { |
|
if (this.bimModel == 1) { |
|
for (let i = 0; i < this.ywq.length; i++) { |
|
for (let j = 0; j < this.ywq[i].walls.length; j++) { |
|
if (data.objectId == this.ywq[i].walls[j]) { |
|
getWallRecords(this.ywq[i].code, this.current, this.size).then( |
|
(res) => { |
|
this.tableClick(res.data.data); |
|
bfHelper.cancelSelected(); |
|
} |
|
); |
|
} |
|
} |
|
} |
|
} else { |
|
for (let i = 0; i < this.tt.length; i++) { |
|
for (let j = 0; j < this.tt[i].walls.length; j++) { |
|
if (data.objectId == this.tt[i].walls[j]) { |
|
getWallRecords(this.tt[i].code, this.current, this.size).then( |
|
(res) => { |
|
this.tableClick(res.data.data); |
|
bfHelper.cancelSelected(); |
|
} |
|
); |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 点击构件的筛选条件 |
|
}); |
|
}, |
|
getWall() { |
|
getWallLists(this.bimModel).then((res) => { |
|
this.tableData = res.data.data; |
|
if (this.bimModel == 1) { |
|
for (let i = 0; i < this.tableData.length; i++) { |
|
if (this.tableData[i].status == 90000) { |
|
bfHelper.setColor(this.colors[1], this.ywq[i].walls); |
|
} else if (this.tableData[i].status == 90001) { |
|
bfHelper.setColor(this.colors[0], this.ywq[i].walls); |
|
} else { |
|
bfHelper.setFlicker(this.ywq[i].walls, this.colors[2], 500); |
|
} |
|
} |
|
} else { |
|
for (let i = 0; i < this.tableData.length; i++) { |
|
if (this.tableData[i].status == 90000) { |
|
bfHelper.setColor(this.colors[1], this.tt[i].walls); |
|
} else if (this.tableData[i].status == 90001) { |
|
// bfHelper.setColor('#0000ff', this.tt[i].walls); |
|
bfHelper.setColor(this.colors[0], this.tt[i].walls); |
|
} else { |
|
bfHelper.setFlicker(this.tt[i].walls, this.colors[2], 500); |
|
} |
|
} |
|
} |
|
|
|
this.total = res.data.data.total; |
|
}); |
|
}, |
|
getWallGK() { |
|
getWallGK(this.bimModel).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; |
|
} |
|
}); |
|
}, |
|
// 页码改变时触发 |
|
handleCurrentChange(val) { |
|
this.current = val; |
|
this.getWall(); |
|
}, |
|
// 表格某行被点击 |
|
tableClick(row, column, event) { |
|
this.bjClick(row); |
|
}, |
|
tableContext(row,column, event){ |
|
event.preventDefault(); // 阻止默认菜单 |
|
const routerUrl = this.$router.resolve({ path: '/equipment/index', query: {code: row.code } }); |
|
window.open(routerUrl.href, "_blank"); |
|
// this.dialogVisible = true |
|
// console.log(row) |
|
}, |
|
bjClick(row) { |
|
bfHelper.clearTags(); |
|
if (this.bimModel == 1) { |
|
for (let i = 0; i < this.ywq.length; i++) { |
|
bfHelper.restoreColor(this.ywq[i].walls); |
|
if (this.tableData[i].status == 90000) { |
|
bfHelper.setColor(this.colors[1], this.ywq[i].walls); |
|
} else if (this.tableData[i].status == 90001) { |
|
bfHelper.setColor(this.colors[0], this.ywq[i].walls); |
|
} else { |
|
bfHelper.setFlicker(this.ywq[i].walls, this.colors[2], 500); |
|
} |
|
if (row.code == this.ywq[i].code) { |
|
let zb = bfHelper.getBoxMessage(this.ywq[i].walls[0], true); |
|
if (zb == "undefined") { |
|
return; |
|
} |
|
// 设置构色 |
|
bfHelper.setColor("#07e6ed", this.ywq[i].walls); |
|
let position = zb.max; |
|
bfHelper.customTag( |
|
position, |
|
null, |
|
this.getWallContent( |
|
row.status, |
|
row.status == 90000 ? "正常" : "离线", |
|
row.name, |
|
row.location, |
|
row.warnContent ? row.warnContent : row.warnMsg, |
|
row.warnDate ? row.warnDate : row.warnTime |
|
) |
|
); |
|
// bfHelper.zoomToBoundingBox(bfHelper.getBoxMessage(this.ywq[i].walls[0])); |
|
} |
|
} |
|
} else { |
|
for (let i = 0; i < this.tt.length; i++) { |
|
bfHelper.restoreColor(this.tt[i].walls); |
|
if (this.tableData[i].status == 90000) { |
|
bfHelper.setColor(this.colors[1], this.tt[i].walls); |
|
} else if (this.tableData[i].status == 90001) { |
|
bfHelper.setColor(this.colors[0], this.tt[i].walls); |
|
} else { |
|
bfHelper.setFlicker(this.tt[i].walls, this.colors[2], 500); |
|
} |
|
if (row.code == this.tt[i].code) { |
|
let zb = bfHelper.getBoxMessage(this.tt[i].walls[0], true); |
|
if (zb == "undefined") { |
|
return; |
|
} |
|
// 设置构色 |
|
bfHelper.setColor("#07e6ed", this.tt[i].walls); |
|
let position = zb.max; |
|
|
|
bfHelper.customTag( |
|
position, |
|
null, |
|
this.getWallContent( |
|
row.status, |
|
row.status == 90000 ? "正常" : "离线", |
|
row.name, |
|
row.location, |
|
row.warnContent ? row.warnContent : row.warnMsg, |
|
row.warnDate ? row.warnDate : row.warnTime |
|
) |
|
); |
|
// bfHelper.zoomToBoundingBox(bfHelper.getBoxMessage(this.ywq[i].walls[0])); |
|
} |
|
} |
|
} |
|
}, |
|
// 获取报警信息 |
|
getBjxx() { |
|
// 模型恢复全部状态 |
|
bfHelper.resetStatus(2); |
|
bfHelper.lookEquipmentCop("电子围界"); |
|
}, |
|
getWallContent(status, statusName, name, location, warnMsg, warnTime) { |
|
let content = `<div class="leadTips" style="transform: translateY(-72px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img src="${require(status == 90000 |
|
? "../../../public/img/monitoring/electricity/customTag1.png" |
|
: 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(status == 90000 |
|
? "../../../public/img/monitoring/electricity/customTag1-1.png" |
|
: 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;">${name}</span> |
|
</div> |
|
<div style="margin-top: 5px;box-sizing: border-box;color: #ffffff;width: 185px;padding: 0 15px;background-color: ${status == 90000 |
|
? "rgba(30, 57, 102, 0.8)" |
|
: "rgba(96, 96, 96, 0.8)" |
|
};"> |
|
<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;"> |
|
<span style="opacity: 0.5;font-size: 12px;">设备状态:</span> |
|
<span style="font-size: 13px;">${statusName}</span> |
|
</div> |
|
<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;"> |
|
<span style="opacity: 0.5;font-size: 12px;">所在位置:</span> |
|
<span style="font-size: 13px;">${location}</span> |
|
</div> |
|
<div style="padding: 5px 0;display:${status == 90000 ? "none" : "flex" |
|
} ;align-items: center;justify-content: space-between;"> |
|
<span style="opacity: 0.5;font-size: 12px;">报警信息:</span> |
|
<span style="font-size: 13px;">${warnMsg}</span> |
|
</div> |
|
<div style="padding: 5px 0;display:${status == 90000 ? "none" : "flex" |
|
} ;align-items: center;justify-content: space-between;"> |
|
<span style="opacity: 0.5;font-size: 12px;">报警时间:</span> |
|
<span style="font-size: 13px;">${warnTime ? warnTime.substring(5, 16) : "" |
|
}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div>`; |
|
return content; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.switch { |
|
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; |
|
right: 40px; |
|
|
|
&.tataigen { |
|
background: url(../../../public/img/monitoring/electricity/genbac.png) no-repeat; |
|
background-size: 100% 100%; |
|
} |
|
|
|
.title { |
|
margin: 1rem 0 0 1.25rem; |
|
color: #fff; |
|
font-size: 1rem; |
|
|
|
img { |
|
display: block; |
|
width: 1.437rem; |
|
height: 1.437rem; |
|
margin-right: 0.438rem; |
|
} |
|
} |
|
|
|
.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); |
|
} |
|
|
|
.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; |
|
} |
|
} |
|
|
|
// 设备概况 |
|
.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); |
|
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); |
|
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); |
|
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: 127px; |
|
display: inline-block; |
|
text-align: center; |
|
} |
|
|
|
.lx { |
|
// padding-left: 146px; |
|
// color: red; |
|
color: #ec9b28; |
|
} |
|
|
|
.bj { |
|
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; |
|
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: 160px; |
|
width: 345px; |
|
margin: auto; |
|
overflow-y: auto; |
|
|
|
.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; |
|
} |
|
} |
|
} |
|
|
|
.item { |
|
height: 40px; |
|
font-size: 14px; |
|
color: #9d9d9d; |
|
|
|
.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; |
|
} |
|
} |
|
</style>
|
|
|