调整报警窗口样式逻辑

This commit is contained in:
zyy 2020-11-04 10:14:54 +08:00 committed by fan
parent b59b3459ee
commit d4c4f488d9
2 changed files with 70 additions and 20 deletions

View File

@ -1,6 +1,10 @@
<template>
<div>
<el-dialog
<div v-dialogDrag>
<div
v-show="show"
class="iscs_fuzhou-01__systerm route-detail el-dialog"
>
<!-- <el-dialog
v-dialogDrag
class="iscs_fuzhou-01__systerm route-detail"
title="报警浏览"
@ -10,19 +14,28 @@
:z-index="2000"
:modal="false"
:close-on-click-modal="false"
>
<div style="height: 300px;overflow: auto; margin-bottom: 15px;">
<div v-for="(item, index) in alarmList" :key="index">
<div v-if="item.key == 'frame'">{{ item.station }} {{ item.name }}</div>
<div v-if="item.key != 'frame'">{{ item.station }} {{ item.name }} 执行了 {{ item[item.key] ? 'XX保护动作' : '' }} {{ item[item.key] ? list[item.key][0] : list[item.key][1] }}操作</div>
</div>
> -->
<div class="el-dialog__header">
<span class="el-dialog__title">报警浏览</span>
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="doClose">
<i class="el-dialog__close el-icon el-icon-close" />
</button>
</div>
<el-row justify="center" class="button-group">
<el-col :span="4" :offset="10">
<el-button type="primary" @click="commit">确定</el-button>
</el-col>
</el-row>
</el-dialog>
<div class="el-dialog__body">
<div style="height: 300px;overflow: auto; margin-bottom: 15px;">
<div v-for="(item, index) in alarmList" :key="index">
<div v-if="item.key == 'frame'">{{ item.station }} {{ item.name }}</div>
<div v-if="item.key != 'frame'">{{ item.station }} {{ item.name }} 执行了 {{ item[item.key] ? 'XX保护动作' : '' }} {{ item[item.key] ? list[item.key][0] : list[item.key][1] }}操作</div>
</div>
</div>
<el-row justify="center" class="button-group">
<el-col :span="4" :offset="10">
<el-button type="primary" @click="commit">确定</el-button>
</el-col>
</el-row>
</div>
<!-- </el-dialog> -->
</div>
</div>
</template>
@ -65,5 +78,41 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.route-detail{
position: absolute;
// top: 300px;
left: calc(50% - 250px);
margin-top: 15vh;
width: 500px;
z-index: 2000;
box-sizing: border-box;
background: rgba(100, 100, 100, 0.3);
border: 2px solid rgba(144, 144, 144, 0.8);
border-radius: 6px;
color: #000;
font-size: 14px;
.el-dialog__header{
padding: 0px 8px;
height: 26px;
.el-dialog__headerbtn{
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
border: 1px solid #fff;
border-radius: 4px;
top: 4px;
right: 12px;
line-height: 16px;
color: #fff;
.el-icon{
color: #fff;
}
}
}
.el-dialog__body{
background: #fff;
margin: 5px;
margin-top: 0;
padding: 10px;
padding-bottom: 0;
}
}
</style>

View File

@ -57,9 +57,10 @@
</div>
</div>
<div class="bottom-back" @click="back">返回</div>
<div class="bottom-back" :class="{'disable_box': alarmInfo}" @click="handleAlarmInfo">
<!-- :class="{'disable_box': alarmInfo}" -->
<div class="bottom-back" @click="handleAlarmInfo">
报警
<span v-show="!alarmInfo" class="point_box" />
<!-- <span v-show="!alarmInfo" class="point_box" /> -->
</div>
<div class="bottom-back" @click="getIncidentList">事件</div>
<div class="bottom-back" @click="handleMalfunction">故障设置</div>
@ -410,9 +411,9 @@ export default {
},
//
handleAlarmInfo() {
if (!this.alarmInfo) {
this.$refs.alarmConfig.doShow();
}
// if (!this.alarmInfo) {
this.$refs.alarmConfig.doShow();
// }
},
//
handleMalfunction() {