|
@@ -37,6 +37,41 @@
|
|
|
alt="">
|
|
|
<img src="../../../assets/images/shape6.png" style="position:absolute;margin-top: 3%;margin-left: 3%" :width="195" :height="25" alt="">
|
|
|
<div style="position:absolute;margin-top: 2%;margin-left: 20.8%;font-weight: bold">总用电量:<span style="color: gold">6000KW</span></div>
|
|
|
+ <!-- 告警弹框 -->
|
|
|
+ <div class="dialogInfoBg" v-if="dialogShow">
|
|
|
+ <!-- 弹框头 -->
|
|
|
+ <div class="rightTitleTextBg">
|
|
|
+ <div class="rightMainTitle">
|
|
|
+ <span>告 警 信 息</span>
|
|
|
+ <div @click="dialogShow = false"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 弹框主体 -->
|
|
|
+ <div style="height: 100px">
|
|
|
+ <el-table
|
|
|
+ :cell-style="{border:0,color:'#fff'}"
|
|
|
+ :data="warningData"
|
|
|
+ :header-cell-style="{color:'#fff'}"
|
|
|
+ :row-style="{backgroundColor:'transparent'}"
|
|
|
+ size="mini"
|
|
|
+ style="background: none;margin-top: -1%;"
|
|
|
+ :show-header="false"
|
|
|
+ @row-click="handleDialogClose"
|
|
|
+ >
|
|
|
+ <el-table-column label="信息" prop="info">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="height: 25px">
|
|
|
+ <img src="../../../assets/images/warning.png" style="position:absolute;top: 8px" :width="20" :height="20"
|
|
|
+ alt="">
|
|
|
+ <img src="../../../assets/images/bg/bg-table-row-warning.png" style="position:absolute;left: 35px" :width="535"
|
|
|
+ :height="25" alt="">
|
|
|
+ <span style="position:absolute;top:8px;left: 43px">{{ scope.row.info }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -51,13 +86,17 @@ export default {
|
|
|
current: 1,
|
|
|
size: 10
|
|
|
},
|
|
|
- tableData: []
|
|
|
+ tableData: [],
|
|
|
+ dialogShow: false,
|
|
|
+ warningData:[]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
handleRowClick(row, event, column) {
|
|
|
- // 在这里处理行点击事件
|
|
|
- console.log('行点击事件:', row, event, column);
|
|
|
+ this.dialogShow = true
|
|
|
+ },
|
|
|
+ handleDialogClose(row, event, column) {
|
|
|
+ this.dialogShow = false
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -75,6 +114,28 @@ export default {
|
|
|
"state": 1
|
|
|
},
|
|
|
]
|
|
|
+ this.warningData=[
|
|
|
+ {
|
|
|
+ "info": "严重警告:联络线(高德线)严重超越正限",
|
|
|
+ "state": 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "info": "严重警告:联络线(高德线)严重超越正限",
|
|
|
+ "state": 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "info": "严重警告:联络线(高德线)严重超越正限",
|
|
|
+ "state": 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "info": "严重警告:联络线(高德线)严重超越正限",
|
|
|
+ "state": 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "info": "严重警告:联络线(高德线)严重超越正限",
|
|
|
+ "state": 2
|
|
|
+ },
|
|
|
+ ]
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -211,5 +272,36 @@ export default {
|
|
|
.el-table__row > td {
|
|
|
border: none;
|
|
|
}
|
|
|
+
|
|
|
+ .dialogInfoBg {
|
|
|
+ background: url(../../../assets/images/dialog/bg-warning.png) 100% no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 1%;
|
|
|
+ width: 30%;
|
|
|
+ height: 260px;
|
|
|
+ position: absolute;
|
|
|
+ top: 35%;
|
|
|
+ left: 34%;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightTitleTextBg {
|
|
|
+ height: 28%;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background: url(../../../assets/images/dialog/t-line-warning.png) no-repeat center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightMainTitle {
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 550;
|
|
|
+ /*font-style: italic;*/
|
|
|
+ text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
|
|
|
+ margin-left: 42%;
|
|
|
+ position: relative;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|