<template>
|
<div id="pageCont" class="dark-page">
|
<div class="btns">
|
<dv-decoration-11 :color="lineColor" @click="goBack()">
|
<div color-green font-600 bg="~ dark/0">
|
返回
|
</div>
|
</dv-decoration-11>
|
</div>
|
|
<div class="tit">
|
<div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div>
|
</div>
|
<div class="chart-cont">
|
<div class="chart">
|
<div v-show="curChart===2" class="selector-2">距上次演练结束5天</div>
|
<accident v-if="curChart===1" :size="2.5"></accident>
|
<training v-else-if="curChart===2" :size="2.5"></training>
|
<risk v-else-if="curChart===3" :month="month" :size="2.5"></risk>
|
<spi v-else-if="curChart===4" :size="2"></spi>
|
<educate v-else-if="curChart===5" :size="2.5"></educate>
|
<danger v-else-if="curChart===6" :size="2.5"></danger>
|
<profession v-else-if="curChart===7" :size="2.5"></profession>
|
<message v-else-if="curChart===8" :size="2"></message>
|
<monitor v-else-if="curChart===9" :size="2.5"></monitor>
|
<stock v-else class="main-chart" :size="2"></stock>
|
</div>
|
<div class="chart-right">
|
<dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
|
<div class="charts-des">
|
<div class="des-tit">
|
<div v-if="curChart===1">2022年度事故等级分布与影响一览</div>
|
<div v-else-if="curChart===2">应急演练概况</div>
|
<div v-else-if="curChart===3">隐患影响等级分布详情</div>
|
<div v-else-if="curChart===4">2022年度事企业SPI趋势</div>
|
<div v-else-if="curChart===5">教育培训情况汇总</div>
|
<div v-else-if="curChart===6">隐患等级分布与隐患整改率</div>
|
<div v-else-if="curChart===7">人员持证上岗情况</div>
|
<div v-else-if="curChart===8">预警消息SPI报告-2022年8月</div>
|
<div v-else-if="curChart===9">监控列表</div>
|
<div v-else>当前应急物资储备情况（总）</div>
|
<dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
|
</div>
|
<div v-if="curChart===2" class="des-main">
|
<div>
|
<h4>距上次【<span>{{trainDesc.title}}</span>】应急演练结束<span>{{trainDesc.total}}</span>天</h4>
|
<h4>
|
应急演练分月情况汇总：
|
</h4>
|
<p v-for="(item,index) in trainDesc.list" :key="index">{{item.month}}应急演练次数：{{item.num}}次</p>
|
</div>
|
</div>
|
<div v-else class="des-main">
|
<div v-for="(item,index) in accidentDesc" :key="index">
|
<h4><span>{{item.title}}</span>共计：<span>{{item.total}}</span>起</h4>
|
<h4>
|
事故影响
|
</h4>
|
<p>{{item.desc}}</p>
|
</div>
|
</div>
|
</div>
|
<dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
|
</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 { useRoute } from 'vue-router';
|
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 {
|
isScreenfull: boolean;
|
curChart: number | null;
|
lineColor: Array<string>;
|
accidentDesc: Array<any>;
|
trainDesc: Object;
|
}
|
export default defineComponent({
|
name: 'warningPage',
|
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 screenThemes = useScreenTheme()
|
const { screenTheme } = storeToRefs(screenThemes);
|
const route = useRoute();
|
const state = reactive<stateType>({
|
isScreenfull: false,
|
curChart: null,
|
lineColor: ['#11FEEE'],
|
accidentDesc:[
|
{
|
title: '特别重大事故',
|
total: 10,
|
desc: '死亡人数：0人； 重伤人数：2人； 轻伤人数：3人； 直接经济损失：180.61万元'
|
},
|
{
|
title: '重大事故',
|
total: 20,
|
desc: '死亡人数：1人； 重伤人数：6人； 轻伤人数：0人； 直接经济损失：160.61万元'
|
},
|
{
|
title: '较大事故',
|
total: 100,
|
desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：3人； 直接经济损失：190.61万元'
|
},
|
{
|
title: '一般事故',
|
total: 130,
|
desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：180.61万元'
|
},
|
{
|
title: '未遂事故',
|
total: 150,
|
desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：9万元'
|
}
|
],
|
trainDesc:{
|
title: '公司级',
|
total: 5,
|
list: [
|
{
|
month: '一月份',
|
num: 23
|
},
|
{
|
month: '二月份',
|
num: 76
|
},
|
{
|
month: '三月份',
|
num: 152
|
},
|
{
|
month: '四月份',
|
num: 200
|
},
|
{
|
month: '五月份',
|
num: 49
|
},
|
{
|
month: '六月份',
|
num: 83
|
},
|
{
|
month: '七月份',
|
num: 102
|
},
|
{
|
month: '八月份',
|
num: 99
|
}
|
]
|
}
|
});
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
if (route.query.num) {
|
state.curChart = Number(route.query.num)
|
}
|
getTheme()
|
});
|
|
|
// 全屏
|
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 getTheme =()=>{
|
if(screenTheme.value.isDark){
|
window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' );
|
state.lineColor = ['#11FEEE']
|
}else{
|
window.document.getElementById('pageCont').setAttribute( "class", 'light-page' );
|
state.lineColor = ['#333','#ccc']
|
}
|
}
|
// 返回上一页
|
const goBack = () => {
|
window.history.go(-1);
|
};
|
|
|
return {
|
route,
|
onScreenfullClick,
|
goBack,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.dark-page{
|
width: 100%;
|
height: 100%;
|
border:1px #5a5959 solid;
|
background: url('../../../../assets/warningScreen/body-bg.jpg');
|
padding: 4%;
|
.btns{
|
position: fixed;
|
width: 8%;
|
height: 6%;
|
right: 5%;
|
top: 1.25rem;
|
font-size: 1.125rem;
|
color: rgb(17, 254, 238);
|
cursor: pointer;
|
}
|
.tit{
|
width: 100%;
|
height: 122px;
|
background: url("../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
|
background-size: 100% 100%;
|
|
|
.title{
|
width: 100%;
|
height: 122px;
|
line-height: 112px;
|
border-radius: 8px;
|
margin-bottom: 20px;
|
font-size: 2.8rem;
|
color: #11feee;
|
font-weight: bolder;
|
text-align: center;
|
letter-spacing: 5px;
|
}
|
}
|
|
.chart-cont{
|
width: 100%;
|
padding: 20px;
|
height: calc(100% - 122px);
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
|
.chart{
|
width: calc((100% - 20px) * 0.63);
|
height: 100%;
|
padding: 3%;
|
background: url("../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
|
background-size: 100% 100%;
|
position: relative;
|
.selector-2{
|
position: absolute;
|
top: 5%;
|
right: 10%;
|
width: 20%;
|
font-size: 1.25rem;
|
color: #fff;
|
}
|
.main-chart{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.chart-right{
|
width: calc((100% - 20px) * 0.37);
|
height: 100%;
|
.charts-des{
|
height: 90%;
|
background: url("../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 4%;
|
|
.des-tit{
|
width: 100%;
|
&>div{
|
font-size: 1.5rem;
|
height: 2.2rem;
|
line-height: 2.2rem;
|
text-align: center;
|
font-weight: bolder;
|
color: #11FEEE;
|
}
|
}
|
.des-main{
|
width: 100%;
|
height: calc(96% - 2.2rem);
|
padding: 0 2%;
|
overflow: auto;
|
color: #11FEEE;
|
|
&::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
|
&::scrollbar { width: 0; height: 0; color: transparent; }
|
|
&>div{
|
margin-bottom: 2rem;
|
&>h4{
|
font-size: 1.25rem;
|
display: flex;
|
align-items: center;
|
|
span{
|
margin-right: 10px;
|
}
|
&:first-of-type{
|
margin-bottom: 10px;
|
}
|
}
|
|
&>p{
|
font-size: 1rem;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
}
|
|
}
|
}
|
.light-page{
|
width: 100%;
|
height: 100%;
|
border:1px #5a5959 solid;
|
background: #F0F0F0;
|
padding: 4%;
|
.btns{
|
position: fixed;
|
width: 8%;
|
height: 6%;
|
right: 5%;
|
top: 1.25rem;
|
font-size: 1.125rem;
|
color: #333;
|
cursor: pointer;
|
}
|
.tit{
|
width: 100%;
|
height: 122px;
|
background: url("../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
|
background-size: 100% 100%;
|
|
|
.title{
|
width: 100%;
|
height: 122px;
|
line-height: 112px;
|
border-radius: 8px;
|
margin-bottom: 20px;
|
font-size: 2.8rem;
|
color: #333;
|
font-weight: bolder;
|
text-align: center;
|
letter-spacing: 5px;
|
}
|
}
|
|
.chart-cont{
|
width: 100%;
|
padding: 20px;
|
height: calc(100% - 122px);
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
|
.chart{
|
width: calc((100% - 20px) * 0.63);
|
height: 100%;
|
padding: 3%;
|
background: url("../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
|
background-size: 100% 100%;
|
position: relative;
|
.selector-2{
|
position: absolute;
|
top: 5%;
|
right: 10%;
|
width: 20%;
|
font-size: 1.25rem;
|
color: #fff;
|
}
|
.main-chart{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.chart-right{
|
width: calc((100% - 20px) * 0.37);
|
height: 100%;
|
.charts-des{
|
height: 90%;
|
background: url("../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 4%;
|
|
.des-tit{
|
width: 100%;
|
&>div{
|
font-size: 1.5rem;
|
height: 2.2rem;
|
line-height: 2.2rem;
|
text-align: center;
|
font-weight: bolder;
|
color: #333;
|
}
|
}
|
.des-main{
|
width: 100%;
|
height: calc(96% - 2.2rem);
|
padding: 0 2%;
|
overflow: auto;
|
color: #333;
|
|
&::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
|
|
&>div{
|
margin-bottom: 2rem;
|
&>h4{
|
font-size: 1.25rem;
|
display: flex;
|
align-items: center;
|
|
span{
|
margin-right: 10px;
|
}
|
&:first-of-type{
|
margin-bottom: 10px;
|
}
|
}
|
|
&>p{
|
font-size: 1rem;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
}
|
|
}
|
}
|
</style>
|
