调整报警窗口样式逻辑

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> <template>
<div> <div v-dialogDrag>
<el-dialog <div
v-show="show"
class="iscs_fuzhou-01__systerm route-detail el-dialog"
>
<!-- <el-dialog
v-dialogDrag v-dialogDrag
class="iscs_fuzhou-01__systerm route-detail" class="iscs_fuzhou-01__systerm route-detail"
title="报警浏览" title="报警浏览"
@ -10,19 +14,28 @@
:z-index="2000" :z-index="2000"
:modal="false" :modal="false"
:close-on-click-modal="false" :close-on-click-modal="false"
> > -->
<div style="height: 300px;overflow: auto; margin-bottom: 15px;"> <div class="el-dialog__header">
<div v-for="(item, index) in alarmList" :key="index"> <span class="el-dialog__title">报警浏览</span>
<div v-if="item.key == 'frame'">{{ item.station }} {{ item.name }}</div> <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="doClose">
<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> <i class="el-dialog__close el-icon el-icon-close" />
</div> </button>
</div> </div>
<el-row justify="center" class="button-group"> <div class="el-dialog__body">
<el-col :span="4" :offset="10"> <div style="height: 300px;overflow: auto; margin-bottom: 15px;">
<el-button type="primary" @click="commit">确定</el-button> <div v-for="(item, index) in alarmList" :key="index">
</el-col> <div v-if="item.key == 'frame'">{{ item.station }} {{ item.name }}</div>
</el-row> <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>
</el-dialog> </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> </div>
</template> </template>
@ -65,5 +78,41 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <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> </style>

View File

@ -57,9 +57,10 @@
</div> </div>
</div> </div>
<div class="bottom-back" @click="back">返回</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>
<div class="bottom-back" @click="getIncidentList">事件</div> <div class="bottom-back" @click="getIncidentList">事件</div>
<div class="bottom-back" @click="handleMalfunction">故障设置</div> <div class="bottom-back" @click="handleMalfunction">故障设置</div>
@ -410,9 +411,9 @@ export default {
}, },
// //
handleAlarmInfo() { handleAlarmInfo() {
if (!this.alarmInfo) { // if (!this.alarmInfo) {
this.$refs.alarmConfig.doShow(); this.$refs.alarmConfig.doShow();
} // }
}, },
// //
handleMalfunction() { handleMalfunction() {