| | |
| | | <template> |
| | | <div id="container" class="dark"> |
| | | <div class="warn-dialog" :class="dialogShow"> |
| | | <div>预警消息:<p style="margin-top: 20px;font-size: 18px;line-height: 28px;text-align: left">企业8月份总体安全生产预警指数SPI风险值高于预警阈值,可能存在未处理隐患,请注意查阅相关风险因素,采取风险防控措施。</p></div> |
| | | <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="" /> |
| | |
| | | isScreenfull: boolean; |
| | | currentTime: string; |
| | | spiValue: number; |
| | | spiOptions: Array<any> |
| | | spiOptions: Array<any>; |
| | | dialogShow: string; |
| | | dialogHide: string |
| | | } |
| | | export default defineComponent({ |
| | | name: 'warningScreen', |
| | |
| | | isScreenfull: false, |
| | | currentTime: '', |
| | | spiValue: 0, |
| | | dialogShow: 'hide', |
| | | dialogHide: 'showup', |
| | | spiOptions: [ |
| | | { |
| | | value: 0, |
| | |
| | | }); |
| | | }; |
| | | |
| | | 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', |
| | |
| | | router, |
| | | props, |
| | | screenTheme, |
| | | openDialog, |
| | | closeInfo, |
| | | changeTheme, |
| | | onScreenfullClick, |
| | | jumpPage, |
| | |
| | | |
| | | <style scoped lang="scss"> |
| | | $homeNavLengh: 8; |
| | | |
| | | .dark { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | 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: 40px; |
| | | background: rgba(0,16,32,.8); |
| | | |
| | | span{ |
| | | position: inherit; |
| | | right: 20px; |
| | | top: 20px; |
| | | font-size: 15px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | div{ |
| | | font-size: 24px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | |
| | | .info-panel{ |
| | | position: absolute; |
| | | width: 20%; |
| | | right: 50px; |
| | | bottom: 50px; |
| | | z-index: 9999999; |
| | | font-size: 16px; |
| | | 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; |
| | | } |
| | | } |
| | | .hide{ |
| | | display: none; |
| | | } |
| | | |
| | | .showup{ |
| | | display: block; |
| | | } |
| | | .header-content { |
| | | width: 100%; |
| | | height: 7.8%; |
| | |
| | | background-size: 100% 100%; |
| | | color: #000; |
| | | |
| | | |
| | | |
| | | .header-content { |
| | | width: 100%; |
| | | height: 7.8%; |