<template>
|
<div class="container">
|
<div class="header-content">
|
<div class="logo">
|
<img src="../../../assets/warningScreen/logo_dark.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="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"/>
|
<div>退出</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<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>
|
<div class="part-tit">
|
<span>| 事故等级分布</span>
|
<img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">
|
</div>
|
<div class="chart-box">
|
<accident :size="1"></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>
|
<div class="part-tit">
|
<span>| 应急演练次数</span>
|
<img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">
|
</div>
|
<div class="chart-box">
|
<span class="train-tip">距上次演练结束 5 天</span>
|
<training :size="1"></training>
|
</div>
|
</div>
|
<div class="left-bottom">
|
<dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
|
<div class="part-tit">
|
<span>| 隐患等级数量分布</span>
|
<div>
|
<el-select class="selector" v-model="month" placeholder="Select" :teleported="false" size="default">
|
<el-option
|
v-for="item in optionList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">
|
</div>
|
|
</div>
|
<div class="chart-box">
|
<risk :size="1" :month="month"></risk>
|
</div>
|
</div>
|
</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>
|
<div class="part-tit" style="position: absolute;top: 12%;padding: 0 4%">
|
<el-cascader
|
class="spiSe"
|
:teleported="false"
|
v-model="spiValue"
|
:options="spiOptions"
|
:props="props"
|
@change="handleChange"
|
/>
|
<!-- <span>SPI数据分析</span>-->
|
<img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">
|
</div>
|
<div class="chart-box">
|
<spi :size="1" :dep="spiValue"></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>
|
<div class="part-tit">
|
<span>| 教育培训分析</span>
|
<img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">
|
</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>
|
<div class="part-tit">
|
<span>| 隐患等级</span>
|
<img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">
|
</div>
|
<div class="chart-box">
|
<danger :size="1"></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>
|
<div class="part-tit">
|
<span>| 人员专业度分布</span>
|
<img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">
|
</div>
|
<div class="chart-box">
|
<profession :size="1"></profession>
|
</div>
|
</div>
|
</div>
|
</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>
|
<div class="part-tit">
|
<span>| 预警消息报告</span>
|
<img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">
|
</div>
|
<div class="chart-box">
|
<message :size="1"></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>
|
<div class="part-tit">
|
<span>| 特殊作业实时监控</span>
|
<img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">
|
</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>
|
<div class="part-tit">
|
<span>| 风险应急物资储备</span>
|
<img @click="jumpPage(10)" src="../../../assets/warningScreen/small-full.png">
|
</div>
|
<div class="chart-box">
|
<stock :size="1"></stock>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import screenfull from 'screenfull';
|
import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
|
import { ElTable } from 'element-plus';
|
import { FormInstance, FormRules, ElMessage } from 'element-plus';
|
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
|
import { useRouter } from 'vue-router';
|
import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
|
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
|
import '/@/theme/bigScreen.css'
|
|
// 定义接口来定义对象的类型
|
interface stateType {
|
isScreenfull: boolean;
|
currentTime: string;
|
month: number;
|
spiValue: number;
|
optionList: Array<any>;
|
spiOptions: Array<any>
|
}
|
export default defineComponent({
|
name: 'warningScreen',
|
components: {
|
accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue')),
|
training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
|
spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')),
|
risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
|
educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
|
danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
|
profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
|
message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
|
monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
|
stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
|
},
|
setup() {
|
const router = useRouter();
|
const props = {
|
expandTrigger: 'hover',
|
}
|
const state = reactive<stateType>({
|
isScreenfull: false,
|
currentTime: '',
|
month: 0,
|
spiValue: 0,
|
optionList: [
|
{
|
label: '年度',
|
value: 0
|
},
|
{
|
label: '一月',
|
value: 1
|
},
|
{
|
label: '二月',
|
value: 2
|
},
|
{
|
label: '三月',
|
value: 3
|
},
|
{
|
label: '四月',
|
value: 4
|
},
|
{
|
label: '五月',
|
value: 5
|
},
|
{
|
label: '六月',
|
value: 6
|
},
|
{
|
label: '七月',
|
value: 7
|
},
|
{
|
label: '八月',
|
value: 8
|
},
|
{
|
label: '九月',
|
value: 9
|
},
|
{
|
label: '十月',
|
value: 10
|
}
|
],
|
spiOptions: [
|
{
|
value: 0,
|
label: '公司级别SPI'
|
},
|
{
|
value: 1,
|
label: 'A事业部SPI',
|
children: [
|
{
|
value: 11,
|
label: 'A车间SPI'
|
},
|
{
|
value: 12,
|
label: 'B车间SPI'
|
},
|
{
|
value: 13,
|
label: 'C车间SPI'
|
}
|
]
|
},
|
{
|
value: 2,
|
label: 'B事业部SPI',
|
children: [
|
{
|
value: 21,
|
label: 'D车间SPI'
|
},
|
{
|
value: 22,
|
label: 'E车间SPI'
|
},
|
{
|
value: 23,
|
label: 'F车间SPI'
|
}
|
]
|
}
|
]
|
});
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
getTime()
|
});
|
|
const getTime =()=>{
|
setInterval(() => {
|
state.currentTime = new Date().toLocaleString();
|
}, 1000);
|
}
|
// 全屏
|
const onScreenfullClick = () => {
|
if (!screenfull.isEnabled) {
|
ElMessage.warning('暂不不支持全屏');
|
return false;
|
}
|
screenfull.toggle();
|
screenfull.on('change', () => {
|
if (screenfull.isFullscreen) {
|
state.isScreenfull = true;
|
} else {
|
state.isScreenfull = false;
|
}
|
});
|
};
|
|
const jumpPage = (num) =>{
|
router.push({
|
path: 'screenPage',
|
query: {
|
num: num
|
}
|
});
|
}
|
|
// 返回上一页
|
const goBack = () => {
|
window.history.go(-1);
|
};
|
|
// 隐患状态列表
|
// const getDeviceRecord = async () => {
|
// const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
|
// let res = await productionDeviceApi().getProductionDeviceList(data)
|
// if (res.data.code === '200'){
|
// state.deviceData = res.data.data
|
// } else {
|
// ElMessage({
|
// type: 'warning',
|
// message: res.data.msg
|
// });
|
// }
|
// };
|
|
return {
|
router,
|
props,
|
onScreenfullClick,
|
jumpPage,
|
goBack,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
|
.container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
background: url('../../../assets/warningScreen/riskprocast.jpg') no-repeat center;
|
background-size: 100% 100%;
|
color: #11FEEE;
|
|
.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: #11FEEE;
|
}
|
.btns{
|
display: flex;
|
align-items: center;
|
|
&>div{
|
display: flex;
|
align-items: center;
|
font-size: 1rem;
|
margin-right: 20px;
|
|
img{
|
width: 16px;
|
height: auto;
|
}
|
div{
|
margin-left: 6px;
|
}
|
}
|
.fullbtn{
|
cursor: pointer;
|
}
|
.backBtn{
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
.main-content{
|
width: 100%;
|
height: 100%;
|
padding: 0 25px 25px;
|
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: #11feee;
|
font-weight: bolder;
|
}
|
|
.dv-border-box-11{
|
:deep(.dv-border-svg-container){
|
.dv-border-box-11-title{
|
font-size: 1.5rem;
|
fill: #11feee !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: #11feee;
|
}
|
::v-deep(.el-cascader){
|
width: 25% !important;
|
}
|
::v-deep(.el-popper){
|
background-color: rgba(10,31,92,1);
|
border: 1px solid rgba(17,254,238,.4);
|
color: #11FEEE;
|
.el-cascader-node__label{
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
.el-cascader-node{
|
&:hover{
|
background: #0049af;
|
}
|
}
|
}
|
::v-deep(.el-popper__arrow){
|
&::before{
|
background-color: rgba(10,31,92,.6) !important;
|
border: 1px solid rgba(17,254,238,.4);
|
}
|
}
|
::v-deep(.el-input__wrapper){
|
width: 20%;
|
box-shadow: none;
|
border: 1px solid rgba(17,254,238,.2);
|
background: rgba(10,31,92,.6) !important;
|
height: 2.5rem;
|
color: #11FEEE;
|
|
input{
|
font-size: 1.25rem;
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
}
|
.selector{
|
width: calc(100% - 1.25rem);
|
margin-right: 0.8rem;
|
|
::v-deep(.el-popper){
|
background-color: rgba(10,31,92,1);
|
border: 1px solid rgba(17,254,238,.4);
|
color: #11FEEE;
|
.el-select-dropdown__item{
|
color: #11FEEE;
|
}
|
.el-select-dropdown__item.hover{
|
background: #0049af;
|
}
|
}
|
::v-deep(.el-popper__arrow){
|
&::before{
|
background-color: rgba(10,31,92,.6) !important;
|
border: 1px solid rgba(17,254,238,.4);
|
}
|
}
|
::v-deep(.el-input__wrapper){
|
box-shadow: none;
|
border: 1px solid rgba(17,254,238,.2);
|
background: rgba(10,31,92,.6) !important;
|
height: 1.5rem;
|
color: #11FEEE;
|
|
input{
|
font-size: 0.8rem;
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
}
|
}
|
|
img{
|
width: 1.20rem;
|
height: 1.20rem;
|
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%;
|
}
|
accident{
|
width: 100%;
|
height: 100%;
|
}
|
|
training{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
|
.main-left{
|
width: calc(25% - 5px);
|
|
.left-top{
|
width: 100%;
|
height: calc((100%/3) - (20px/3));
|
|
}
|
.left-mid{
|
width: 100%;
|
height: calc((100%/3) - (20px/3));
|
}
|
.left-bottom{
|
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);
|
|
.right-top{
|
width: 100%;
|
height: calc((100%/3) - (20px/3));
|
}
|
.right-mid{
|
width: 100%;
|
height: calc((100%/3) - (20px/3));
|
}
|
.right-bottom{
|
width: 100%;
|
height: calc((100%/3) - (20px/3));
|
}
|
}
|
}
|
}
|
.el-input {
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep {
|
width: 100%;
|
}
|
.el-select {
|
width: 100%;
|
}
|
</style>
|
