From 421d5510fa769b99aa41dadfc7dfa59a5939a642 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期一, 05 九月 2022 17:09:36 +0800
Subject: [PATCH] Default Changelist
---
src/views/riskWarningSys/warningBigScreen/index.vue | 446 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 406 insertions(+), 40 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/index.vue b/src/views/riskWarningSys/warningBigScreen/index.vue
index 7eb9d5f..164931e 100644
--- a/src/views/riskWarningSys/warningBigScreen/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/index.vue
@@ -1,22 +1,28 @@
<template>
- <div class="container">
+ <div id="container" class="dark">
<div class="header-content">
<div class="logo">
- <img src="../../../assets/warningScreen/logo_dark.png" alt="" />
+ <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/logo_dark.png" alt="" />
+ <img v-else="!screenTheme.isDark" src="../../../assets/warningScreen/logo_light.png" alt="" />
</div>
<div class="title">风险预警预报平台</div>
<div class="title-right">
<!-- <img src="themeStyle.skinIcon" class="qiehuan" @click="changeTheme" />-->
<span class="datetime">{{currentTime}}</span>
<div class="btns">
- <div class="fullbtn" @click="onScreenfullClick">
+ <div class="themeBtn" @click="changeTheme()">
+ <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/skin.png"/>
+ <img v-else src="../../../assets/warningScreen/skin-light.png"/>
+ </div>
+ <div class="fullBtn" @click="onScreenfullClick">
<div class="toFull">
<i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
</div>
<div>全屏</div>
</div>
<div class="backBtn" @click="goBack()">
- <img src="../../../assets/loginPage/back-icon.png"/>
+<!-- <img src="../../../assets/loginPage/back-icon.png"/>-->
+ <el-icon><SwitchButton /></el-icon>
<div>退出</div>
</div>
</div>
@@ -25,20 +31,22 @@
<div class="main-content">
<div class="main-left">
<div class="left-top">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 事故等级分布</span>
- <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(1)"/>
</div>
<div class="chart-box">
- <accident :size="1"></accident>
+ <accident :size="1" :theme="screenTheme.isDark"></accident>
</div>
</div>
<div class="left-mid">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 应急演练次数</span>
- <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(2)"/>
</div>
<div class="chart-box">
<span class="train-tip">距上次演练结束 5 天</span>
@@ -46,7 +54,7 @@
</div>
</div>
<div class="left-bottom">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 隐患等级数量分布</span>
<div>
@@ -58,7 +66,8 @@
:value="item.value"
/>
</el-select>
- <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
</div>
</div>
@@ -69,7 +78,7 @@
</div>
<div class="main-middle">
<div class="mid-top">
- <dv-border-box-11 title="SPI数据分析" backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-11>
+ <dv-border-box-11 title="SPI数据分析" :backgroundColor="boxBg" :color="boxBigColor" class="box-bg"></dv-border-box-11>
<div class="part-tit" style="position: absolute;top: 12%;padding: 0 4%">
<el-cascader
class="spiSe"
@@ -77,41 +86,46 @@
v-model="spiValue"
:options="spiOptions"
:props="props"
+ :show-all-levels="false"
@change="handleChange"
/>
<!-- <span>SPI数据分析</span>-->
- <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/>
</div>
<div class="chart-box">
- <spi :size="1" :dep="spiValue"></spi>
+ <spi :size="1"></spi>
</div>
</div>
<div class="mid-bottom">
<div class="mid-bot-l">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 教育培训分析</span>
- <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(5)"/>
</div>
<div class="chart-box">
<educate :size="1"></educate>
</div>
</div>
<div class="mid-bot-m">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 隐患等级</span>
- <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(6)"/>
</div>
<div class="chart-box">
- <danger :size="1"></danger>
+ <danger :size="1" :theme="screenTheme.isDark"></danger>
</div>
</div>
<div class="mid-bot-r">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 人员专业度分布</span>
- <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(7)"/>
</div>
<div class="chart-box">
<profession :size="1"></profession>
@@ -121,30 +135,32 @@
</div>
<div class="main-right">
<div class="right-top">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 预警消息报告</span>
- <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(8)"/>
</div>
<div class="chart-box">
- <message :size="1"></message>
+ <message :size="1" :theme="screenTheme.isDark"></message>
</div>
</div>
<div class="right-mid">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 特殊作业实时监控</span>
- <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(9)"/>
</div>
<div class="chart-box">
<monitor></monitor>
</div>
</div>
<div class="right-bottom">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 风险应急物资储备</span>
- <img @click="jumpPage(10)" src="../../../assets/warningScreen/small-full.png">
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(10)"/>
</div>
<div class="chart-box">
<stock :size="1"></stock>
@@ -165,9 +181,14 @@
import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
// 定义接口来定义对象的类型
interface stateType {
+ boxBg: string;
+ boxColor: Array<string>;
+ boxBigColor: Array<string>;
isScreenfull: boolean;
currentTime: string;
month: number;
@@ -190,11 +211,17 @@
stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
},
setup() {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
const router = useRouter();
const props = {
expandTrigger: 'hover',
+ checkStrictly: true
}
const state = reactive<stateType>({
+ boxBg: 'rgba(8, 109, 209, 0.2)',
+ boxColor: [],
+ boxBigColor: [],
isScreenfull: false,
currentTime: '',
month: 0,
@@ -292,6 +319,7 @@
// 页面载入时执行方法
onMounted(() => {
getTime()
+ getTheme()
});
const getTime =()=>{
@@ -299,6 +327,37 @@
state.currentTime = new Date().toLocaleString();
}, 1000);
}
+
+ const changeTheme = () =>{
+ screenTheme.value.isDark = !screenTheme.value.isDark
+ screenThemes.setScreenTheme(screenTheme.value.isDark)
+ if(screenTheme.value.isDark){
+ document.getElementById('container').setAttribute( "class", 'dark' )
+ state.boxBg = 'rgba(8, 109, 209, 0.2)'
+ state.boxColor = []
+ state.boxBigColor = []
+ }else{
+ document.getElementById('container').setAttribute( "class", 'light' )
+ state.boxBg = '#fff'
+ state.boxColor = ['#ccc','#333']
+ state.boxBigColor = ['#666','#fff']
+ }
+ }
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('container').setAttribute( "class", 'dark' );
+ state.boxBg = 'rgba(8, 109, 209, 0.2)'
+ state.boxColor = []
+ state.boxBigColor = []
+ }else{
+ window.document.getElementById('container').setAttribute( "class", 'light' );
+ state.boxBg = '#fff'
+ state.boxColor = ['#ccc','#333']
+ state.boxBigColor = ['#666','#fff']
+ }
+ }
+
// 全屏
const onScreenfullClick = () => {
if (!screenfull.isEnabled) {
@@ -346,6 +405,8 @@
return {
router,
props,
+ screenTheme,
+ changeTheme,
onScreenfullClick,
jumpPage,
goBack,
@@ -357,8 +418,7 @@
<style scoped lang="scss">
$homeNavLengh: 8;
-
- .container {
+ .dark {
width: 100%;
height: 100%;
display: flex;
@@ -420,14 +480,21 @@
margin-right: 20px;
img{
- width: 16px;
- height: auto;
+ width: 1rem;
+ height: 1rem;
}
div{
margin-left: 6px;
}
}
- .fullbtn{
+ .themeBtn{
+ img{
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ cursor: pointer;
+ }
+ .fullBtn{
cursor: pointer;
}
.backBtn{
@@ -438,8 +505,8 @@
}
.main-content{
width: 100%;
- height: 100%;
- padding: 0 25px 25px;
+ height: calc(100vh - 72px);
+ padding: 0.4rem 1.5rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
@@ -468,11 +535,11 @@
}
.dv-border-box-11{
- :deep(.dv-border-svg-container){
- .dv-border-box-11-title{
- font-size: 1.5rem;
- fill: #11feee !important;
- }
+ ::v-deep(.dv-border-svg-container){
+ .dv-border-box-11-title{
+ font-size: 1.5rem;
+ fill: #11feee !important;
+ }
}
}
.part-tit{
@@ -577,6 +644,304 @@
}
img{
+ width: 1.2rem;
+ height: 1.2rem;
+ cursor: pointer;
+ }
+ }
+ .chart-box{
+ width: 100%;
+ height: calc(100% - 20px);
+ margin-top: 20px;
+ .train-tip{
+ display: block;
+ font-size: 0.8rem;
+ margin-top: 5%;
+ margin-left: 2%;
+ color: #fff;
+ }
+ accident{
+ width: 100%;
+ height: 100%;
+ }
+
+ training{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ }
+
+ .main-left{
+ width: calc(25% - 5px);
+ &>div{
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ }
+ }
+ .main-middle{
+ width: calc(50% - 10px);
+
+ .mid-top{
+ width: 100%;
+ height: calc((200% - 40px)/3 + 10px);
+ }
+
+ .mid-bottom{
+ display: flex;
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ justify-content: space-between;
+ padding: 0;
+ background: none;
+ border-radius: 0;
+
+ &>div {
+ position: relative;
+ width: calc((100% - 20px)/3);
+ border-radius: 8px;
+ overflow: hidden;
+ padding: 10px 15px;
+ box-sizing: border-box;
+ }
+ }
+ }
+ .main-right{
+ width: calc(25% - 5px);
+ &>div{
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ }
+ }
+ }
+ }
+ .light {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: url('../../../assets/warningScreen/riskprocast-light.jpg') no-repeat center;
+ background-size: 100% 100%;
+ color: #000;
+
+ .header-content {
+ width: 100%;
+ height: 72px;
+ padding: 0 20px;
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ z-index: 9;
+
+ .logo {
+ width: 27%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ height: 35px;
+ width: 128px;
+ }
+ }
+ .title {
+ width: 46%;
+ font-size: 2rem;
+ font-weight: bolder;
+ line-height: 72px;
+ text-align: center;
+ letter-spacing: 2px;
+ }
+
+ .title-right {
+ width: 27%;
+ height: 90px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ font-size: 1rem;
+ padding-left: 30px;
+
+ .datetime {
+ color: #000;
+ }
+ .btns{
+ display: flex;
+ align-items: center;
+
+ &>div{
+ display: flex;
+ align-items: center;
+ font-size: 1rem;
+ margin-right: 20px;
+
+ img{
+ width: 1rem;
+ height: 1rem;
+ }
+ div{
+ margin-left: 6px;
+ }
+ }
+ .themeBtn{
+ img{
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ cursor: pointer;
+ }
+ .fullBtn{
+ cursor: pointer;
+ }
+ .backBtn{
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ .main-content{
+ width: 100%;
+ height: calc(100vh - 72px);
+ padding: 0.4rem 1.5rem 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ &>div{
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ &>div{
+ padding: 20px 15px 10px;
+ box-sizing: border-box;
+ position: relative;
+ .box-bg{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ color: #000;
+ font-weight: bolder;
+ }
+
+ .dv-border-box-11{
+ :deep(.dv-border-svg-container){
+ .dv-border-box-11-title{
+ font-size: 1.5rem;
+ fill: #000 !important;
+ }
+ }
+ }
+ .part-tit{
+ position: absolute;
+ top: 20px;
+ left: 0;
+ height: 20px;
+ width: 100%;
+ padding: 0 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 9999;
+ div{
+ width: 40%;
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ }
+ span{
+ font-size: 1.25rem;
+ font-weight: bolder;
+ color: #000;
+ }
+ ::v-deep(.el-cascader){
+ width: 25% !important;
+ }
+ ::v-deep(.el-popper){
+ background-color: #fff;
+ border: 1px solid #ccc;
+ color: #000;
+ .el-cascader-node__label{
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #ccc;
+ }
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: #fff !important;
+ border: 1px solid #ccc;
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ width: 20%;
+ box-shadow: none;
+ border: 1px solid #ccc;
+ background: #fff !important;
+ height: 2.5rem;
+ color: #000;
+
+ input{
+ font-size: 1.25rem;
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ }
+ .selector{
+ width: calc(100% - 1.25rem);
+ margin-right: 0.8rem;
+
+ ::v-deep(.el-popper){
+ background-color: rgba(255,255,255,1);
+ border: 1px solid #ccc;
+ color: #fff;
+ .el-select-dropdown__item{
+ color: #000;
+ }
+ .el-select-dropdown__item.hover{
+ background: #ccc;
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(255,255,255,.6) !important;
+ border: 1px solid #ccc;
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid #ccc;
+ background: #fff !important;
+ height: 1.5rem;
+ color: #fff;
+
+ input{
+ font-size: 0.8rem;
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ }
+ }
+
+ img{
width: 1.20rem;
height: 1.20rem;
cursor: pointer;
@@ -591,6 +956,7 @@
font-size: 0.8rem;
margin-top: 5%;
margin-left: 2%;
+ color: #333;
}
accident{
width: 100%;
--
Gitblit v1.9.2