<template>
|
<div class="com-page">
|
<div class="btns" @click="goBack()">
|
返回首页
|
</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>
|
<el-select v-show="curChart===3" class="selector-3" v-model="month" placeholder="Select" size="default">
|
<el-option
|
v-for="item in optionList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<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.5"></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="['#11FEEE']" style="width:100%;height:5%;" />
|
<div class="charts-des">
|
<div class="">
|
|
</div>
|
</div>
|
<dv-decoration-10 :color="['#11FEEE']" 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'
|
|
// 定义接口来定义对象的类型
|
interface stateType {
|
isScreenfull: boolean;
|
curChart: number | null;
|
month: number;
|
optionList: Array<any>
|
}
|
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 route = useRoute();
|
const state = reactive<stateType>({
|
isScreenfull: false,
|
curChart: null,
|
month: 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
|
}
|
]
|
});
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
if (route.query.num) {
|
state.curChart = Number(route.query.num)
|
}
|
});
|
|
|
// 全屏
|
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 goBack = () => {
|
window.history.go(-1);
|
};
|
|
|
return {
|
route,
|
onScreenfullClick,
|
goBack,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.com-page{
|
width: 100%;
|
height: 100%;
|
border:1px #5a5959 solid;
|
background: url('../../../../assets/warningScreen/body-bg.jpg');
|
padding: 4%;
|
.btns{
|
position: fixed;
|
right: 5%;
|
top: 20px;
|
font-size: 1.125rem;
|
padding: 10px 15px;
|
box-sizing: border-box;
|
border: 1px solid rgb(0, 208, 206);
|
border-radius: 10px;
|
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;
|
}
|
.selector-3{
|
position: absolute;
|
top: 5%;
|
right: 10%;
|
width: 20%;
|
|
::v-deep(.el-input__wrapper){
|
background: none !important;
|
box-shadow: none;
|
color: #11FEEE;
|
|
input{
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
}
|
}
|
.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%;
|
}
|
}
|
|
}
|
}
|
</style>
|
