From e6ce09ca661049fd9a4034e4db5a7584cae5c1ec Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期二, 20 九月 2022 10:41:37 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
---
src/views/riskWarningSys/warningBigScreen/index.vue | 230 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 229 insertions(+), 1 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/index.vue b/src/views/riskWarningSys/warningBigScreen/index.vue
index d8744f2..25941cb 100644
--- a/src/views/riskWarningSys/warningBigScreen/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/index.vue
@@ -1,5 +1,25 @@
<template>
<div id="container" class="dark">
+ <div class="warn-dialog" :class="dialogShow">
+ <div>预警消息</div>
+ <p>企业8月份总体安全生产预警指数SPI风险值高于预警阈值，可能存在未处理隐患，请注意查阅相关风险因素，采取风险防控措施。</p>
+ <span @click="dialogShow = 'hide'">关闭</span>
+ </div>
+ <div class="info-panel" :class="dialogHide" @click="openDialog">
+ <div class="info-tit">
+ <div>
+ <el-icon><Bell /></el-icon>
+ <div style="margin-left: 10px">消息预警</div>
+ </div>
+ <div @click.stop="dialogHide = 'hide'">X</div>
+ </div>
+ <div class="info-desc">
+ 企业8月份总体安全生产预警指数SPI风险值高于预警阈值。
+ </div>
+ <div class="info-num">
+ 1
+ </div>
+ </div>
<div class="header-content">
<div class="logo">
<img v-if="screenTheme.isDark" src="../../../assets/warningScreen/logo_dark.png" alt="" />
@@ -170,7 +190,9 @@
isScreenfull: boolean;
currentTime: string;
spiValue: number;
- spiOptions: Array<any>
+ spiOptions: Array<any>;
+ dialogShow: string;
+ dialogHide: string
}
export default defineComponent({
name: 'warningScreen',
@@ -201,6 +223,8 @@
isScreenfull: false,
currentTime: '',
spiValue: 0,
+ dialogShow: 'hide',
+ dialogHide: 'showup',
spiOptions: [
{
value: 0,
@@ -303,6 +327,18 @@
});
};
+ const openDialog = () => {
+ if(state.dialogShow == 'hide'){
+ state.dialogShow = 'showup'
+ }else{
+ state.dialogShow = 'hide'
+ }
+ };
+
+ const closeInfo = ()=>{
+ state.dialogHide = 'hide'
+ };
+
const jumpPage = (num) =>{
router.push({
path: 'screenPage',
@@ -335,6 +371,8 @@
router,
props,
screenTheme,
+ openDialog,
+ closeInfo,
changeTheme,
onScreenfullClick,
jumpPage,
@@ -347,6 +385,13 @@
<style scoped lang="scss">
$homeNavLengh: 8;
+ .hide{
+ display: none;
+ }
+
+ .showup{
+ display: block;
+ }
.dark {
width: 100%;
height: 100%;
@@ -356,6 +401,97 @@
background: url('../../../assets/warningScreen/riskprocast.jpg') no-repeat center;
background-size: 100% 100%;
color: #11FEEE;
+
+ .warn-dialog{
+ position: absolute;
+ z-index: 999999;
+ top: 25%;
+ left: 50%;
+ width: 50%;
+ height: 50%;
+ transform: translateX(-50%);
+ border-radius: 8px;
+ transition: .3s;
+ box-shadow: 0 15px 30px rgba(0,0,0,.2);
+ border: 1px solid rgba(17,254,238,.4);
+ padding: 1.5rem;
+ background: rgba(0,16,32,.8);
+
+ div{
+ font-size: 1.5rem;
+ text-align: center;
+ }
+
+ p{
+ margin-top: 20px;
+ font-size: 1.125rem;
+ line-height: 28px;
+ text-align: left
+ }
+
+ span{
+ position: inherit;
+ right: 20px;
+ top: 20px;
+ font-size: 1rem;
+ cursor: pointer;
+ }
+ }
+
+ .info-panel{
+ position: absolute;
+ width: 20%;
+ right: 50px;
+ bottom: 50px;
+ z-index: 9999999;
+ font-size: 1rem;
+ padding: 0 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ box-shadow: 0 15px 30px rgba(0,0,0,.2);
+ border: 1px solid rgba(17,254,238,.4);
+ background: rgba(0,16,32,.8);
+
+ .info-tit{
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ border-bottom: 1px solid rgba(17,254,238,.4);
+ justify-content: space-between;
+
+ &>div{
+ display: flex;
+ align-items: center;
+
+ img{
+ width: 18px;
+ height: 18px;
+ margin-right: 10px;
+ }
+ }
+ }
+
+ .info-desc{
+ padding: 15px 10px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .info-num{
+ position: inherit;
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+ text-align: center;
+ left: -12px;
+ top: -12px;
+ color: #fff;
+ z-index: 999999999;
+ border-radius: 50%;
+ border: 1px solid #ff0000;
+ background: #ff0000;
+ }
+ }
.header-content {
width: 100%;
@@ -576,6 +712,98 @@
background-size: 100% 100%;
color: #000;
+ .warn-dialog{
+ position: absolute;
+ z-index: 999999;
+ top: 25%;
+ left: 50%;
+ width: 50%;
+ height: 50%;
+ transform: translateX(-50%);
+ border-radius: 8px;
+ transition: .3s;
+ box-shadow: 0 15px 30px rgba(0,0,0,.2);
+ border: 1px solid #ccc;
+ padding: 1.5rem;
+ background: #fff;
+
+ div{
+ font-size: 1.5rem;
+ text-align: center;
+ }
+
+ p{
+ margin-top: 20px;
+ font-size: 1.125rem;
+ line-height: 28px;
+ text-align: left
+ }
+
+ span{
+ position: inherit;
+ right: 20px;
+ top: 20px;
+ font-size: 1rem;
+ cursor: pointer;
+ }
+ }
+
+ .info-panel{
+ position: absolute;
+ width: 20%;
+ right: 50px;
+ bottom: 50px;
+ z-index: 9999999;
+ font-size: 1rem;
+ color: #333;
+ padding: 0 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ box-shadow: 0 15px 30px rgba(0,0,0,.2);
+ border: 1px solid #ccc;
+ background: #fff;
+
+ .info-tit{
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ border-bottom: 1px solid #ccc;
+ justify-content: space-between;
+
+ &>div{
+ display: flex;
+ align-items: center;
+
+ img{
+ width: 18px;
+ height: 18px;
+ margin-right: 10px;
+ }
+ }
+ }
+
+ .info-desc{
+ padding: 15px 10px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .info-num{
+ position: inherit;
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+ text-align: center;
+ left: -12px;
+ top: -12px;
+ color: #fff;
+ z-index: 999999999;
+ border-radius: 50%;
+ border: 1px solid #ff0000;
+ background: #ff0000;
+ }
+ }
+
.header-content {
width: 100%;
height: 7.8%;
--
Gitblit v1.9.2