InteSecurePlatform.git

			@@ -1,22 +1,48 @@
			<template>
			<div class="container">
			<div id="container" class="dark">
			<div class="warn-dialog" :class="dialogShow">
			<div>预警消息</div>
			<p>企业8月份总体安全生产预警指数SPI风险值高于预警阈值，可能存在未处理隐患，请注意查阅相关风险因素，采取风险防控措施。</p>
			<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 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,40 +51,127 @@
			<div class="main-content">
			<div class="main-left">
			<div class="left-top">

			<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">-->
			<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(1)"/>
			</div>
			<div class="chart-box">
			<accident :size="1" :theme="screenTheme.isDark"></accident>
			</div>
			</div>
			<div class="left-mid">

			<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">-->
			<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(2)"/>
			</div>
			<div class="chart-box">
			<training :size="1" :theme="screenTheme.isDark"></training>
			</div>
			</div>
			<div class="left-bottom">

			<dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
			<div class="part-tit">
			<span>\| 隐患趋势</span>
			<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
			</div>
			<div class="chart-box">
			<risk :size="1" :theme="screenTheme.isDark" :dep="departList"></risk>
			</div>
			</div>
			</div>
			<div class="main-middle">
			<div class="mid-top">

			<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: 10%;padding: 0 4%;align-items: flex-start;z-index: 10001">
			<div class="spiChart">
			<!-- <el-cascader-->
			<!-- class="spiSe"-->
			<!-- :teleported="false"-->
			<!-- v-model="depValue"-->
			<!-- :options="departList"-->
			<!-- :props="depProps"-->
			<!-- :show-all-levels="false"-->
			<!-- @change="depChange"-->
			<!-- />-->
			</div>
			<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/>
			</div>
			<div class="chart-box" style="top: 60px;height: calc(100% - 70px)">
			<spi :size="1" :theme="screenTheme.isDark"></spi>
			</div>
			</div>
			<div class="mid-bottom">
			<div class="mid-bot-l">

			<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">-->
			<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="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">-->
			<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(6)"/>
			</div>
			<div class="chart-box">
			<danger :size="1" :theme="screenTheme.isDark"></danger>
			</div>
			</div>
			<div class="mid-bot-r">

			<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">-->
			<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(7)"/>
			</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="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">-->
			<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(8)"/>
			</div>
			<div class="chart-box">
			<message :size="1" :theme="screenTheme.isDark"></message>
			</div>
			</div>
			<div class="right-mid">

			<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">-->
			<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(9)"/>
			</div>
			<div class="chart-box">
			<monitor :size="1" ref="monRef" :theme="screenTheme.isDark"></monitor>
			</div>
			</div>
			<div class="right-bottom">

			<dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
			<div class="part-tit">
			<span>\| 风险应急物资储备</span>
			<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(10)"/>
			</div>
			<div class="chart-box">
			<stock :size="1"></stock>
			</div>
			</div>
			</div>
			</div>
			@@ -67,41 +180,151 @@

			<script lang="ts">
			import screenfull from 'screenfull';
			import { toRefs, reactive, ref, onMounted } from 'vue';
			import {
			toRefs,
			reactive,
			ref,
			onMounted,
			defineComponent,
			defineAsyncComponent,
			nextTick,
			onUnmounted,
			onBeforeUnmount
			} 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 * as echarts from 'echarts/core';
			import {TooltipComponent, TooltipComponentOption, LegendComponent, LegendComponentOption} from 'echarts/components';
			import {PieChart, PieSeriesOption} from 'echarts/charts';
			import {LabelLayout} from 'echarts/features';
			import {CanvasRenderer} from 'echarts/renderers';
			echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
			import '/@/theme/bigScreen.css'
			import {useScreenTheme} from "/@/stores/screenTheme"
			import {storeToRefs} from "pinia";
			import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
			import {NextLoading} from "/@/utils/loading";
			import {videoApi} from "/@/api/systemManage/video";

			// 定义接口来定义对象的类型
			interface stateType {
			boxBg: string;
			boxColor: Array<string>;
			boxBigColor: Array<string>;
			isScreenfull: boolean;
			currentTime: string
			currentTime: string;
			depValue: number;
			dialogShow: string;
			dialogHide: string;
			depProps: object;
			departList: Array<any>;
			lastTrain: number \| null;
			timer: any\|null
			}
			export default {
			export default defineComponent({
			name: 'warningScreen',
			components: {},
			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 router = useRouter();
			const props = {
			expandTrigger: 'hover',
			checkStrictly: true
			}
			const state = reactive<stateType>({
			boxBg: 'rgba(8, 109, 209, 0.2)',
			depValue: 1,
			boxColor: [],
			boxBigColor: [],
			lastTrain: null,
			isScreenfull: false,
			currentTime: ''
			currentTime: '',
			dialogShow: 'hide',
			dialogHide: 'hide',
			depProps: {
			expandTrigger: 'hover',
			checkStrictly: true,
			value: 'depId',
			label: 'depName',
			emitPath: false
			},
			departList: [],
			timer: null
			});

			const monRef = ref()
			// 页面载入时执行方法
			onMounted(() => {
			setInterval(() => {
			state.currentTime = new Date().toLocaleString();
			console.log(state.currentTime)
			}, 1000);
			NextLoading.done();
			state.depValue = screenTheme.value.depId
			getTime();
			getAllDepartment();
			state.timer = setInterval(()=>{
			getTime()
			},1000)
			getTheme()
			});

			const getTime =()=>{
			state.currentTime = new Date().toLocaleString();
			}

			// 获取部门列表
			const getAllDepartment = async () => {
			let res = await teamManageApi().getAllDepartment();
			if (res.data.code === '200') {
			state.departList = JSON.parse(JSON.stringify(res.data.data))
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			}

			const depChange = (value)=>{
			state.depValue = value
			screenThemes.setDepId(value)
			}

			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 = ['#fff','#ccc']
			state.boxBigColor = ['#999','#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 = ['#fff','#ccc']
			state.boxBigColor = ['#999','#fff']
			}
			}

			// 全屏
			const onScreenfullClick = () => {
			@@ -119,11 +342,38 @@
			});
			};

			// 返回上一页
			const goBack = () => {
			window.history.go(-1);
			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',
			query: {
			num: num
			}
			});
			}

			// 返回上一页
			const goBack = () => {
			// window.history.go(-1);
			router.push({
			path: 'newMenu'
			});
			};

			onBeforeUnmount(() =>{
			clearInterval(state.timer)
			})
			// 隐患状态列表
			// const getDeviceRecord = async () => {
			// const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
			@@ -138,104 +388,38 @@
			// }
			// };

			// 隐患整改情况
			// const initRiskFix =()=>{
			// var dom = document.getElementById('riskFix');
			// var myChart = echarts.init(dom, null, {
			// renderer: 'canvas',
			// useDirtyRect: false
			// });
			// var app = {};
			//
			// var option;
			//
			// option = {
			// tooltip: {
			// trigger: 'item'
			// },
			// legend: {
			// bottom: '5%',
			// left: 'center'
			// },
			// series: [
			// {
			// name: 'Access From',
			// type: 'pie',
			// radius: ['35%', '60%'],
			// avoidLabelOverlap: false,
			// itemStyle: {
			// borderRadius: 6,
			// borderColor: '#fff',
			// borderWidth: 2
			// },
			// label: {
			// alignTo: 'labelLine',
			// formatter: '{name\|{b}}\n{value\|{c}}',
			// minMargin: 5,
			// edgeDistance: 5,
			// lineHeight: 15,
			// rich: {
			// name: {
			// fontSize: 14,
			// color: '#666'
			// }
			// }
			// },
			// labelLine: {
			// length: 15,
			// maxSurfaceAngle: 80
			// },
			// emphasis: {
			// label: {
			// show: true,
			// fontSize: '40',
			// fontWeight: 'bold'
			// }
			// },
			// data: [
			// { value: 1048, name: '整改中' },
			// { value: 735, name: '待验收' },
			// { value: 580, name: '延期整改' },
			// { value: 484, name: '超期未整改' },
			// { value: 300, name: '已验收' }
			// ],
			// center: ['50%','40%']
			// }
			// ]
			// };
			//
			// if (option && typeof option === 'object') {
			// myChart.setOption(option);
			// }
			//
			// window.addEventListener('resize', myChart.resize);
			// }

			return {
			router,
			props,
			screenTheme,
			monRef,
			openDialog,
			closeInfo,
			changeTheme,
			onScreenfullClick,
			depChange,
			jumpPage,
			goBack,
			...toRefs(state)
			};
			}
			};
			});
			</script>

			<style scoped lang="scss">
			$homeNavLengh: 8;

			@media screen and (min-width: 1366px) {

			.hide{
			display: none;
			}
			#container{
			width: 100%;
			height: 100%;
			}
			.showup{
			display: block;
			}

			@media screen and (min-width: 1024px) and (max-width: 1366px){

			}

			@media screen and (max-width: 1024px) {

			}
			.container {
			.dark {
			width: 100%;
			height: 100%;
			display: flex;
			@@ -245,11 +429,102 @@
			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: 1.5rem;
			background: rgba(0,16,32,.8);

			div{
			font-size: 1.5rem;
			text-align: center;
			}

			p{
			margin-top: 20px;
			font-size: 1.125rem;
			line-height: 28px;
			text-align: left
			}

			span{
			position: inherit;
			right: 20px;
			top: 20px;
			font-size: 1rem;
			cursor: pointer;
			}
			}

			.info-panel{
			position: absolute;
			width: 20%;
			right: 50px;
			bottom: 50px;
			z-index: 9999999;
			font-size: 1rem;
			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;
			}
			}

			.header-content {
			width: 100%;
			height: 80px;
			height: 7.8%;
			padding: 0 20px;
			font-size: 20px;
			font-size: 1.25rem;
			display: flex;
			align-items: center;
			justify-content: space-around;
			@@ -261,15 +536,15 @@
			align-items: center;
			justify-content: center;
			img {
			height: 35px;
			width: 128px;
			width: 10rem;
			height: auto;
			}
			}
			.title {
			width: 46%;
			font-size: 26px;
			font-size: 2rem;
			font-weight: bolder;
			line-height: 80px;
			line-height: 7.8%;
			text-align: center;
			letter-spacing: 2px;
			}
			@@ -280,11 +555,12 @@
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 15px;
			font-size: 1rem;
			padding-left: 30px;

			.datetime {
			color: #11FEEE;
			font-size: 0.9rem;
			}
			.btns{
			display: flex;
			@@ -293,104 +569,574 @@
			&>div{
			display: flex;
			align-items: center;
			align-items: center;
			font-size: 15px;
			font-size: 1rem;
			margin-right: 20px;

			img{
			width: 16px;
			height: auto;
			width: 1rem;
			height: 1rem;
			}
			div{
			margin-left: 6px;
			margin-left: 0.4rem;
			font-size: 0.9rem;
			}
			}
			.themeBtn{
			img{
			width: 1.25rem;
			height: 1.25rem;
			}
			cursor: pointer;
			}
			.fullBtn{
			cursor: pointer;
			}
			.backBtn{
			cursor: pointer;
			}
			}
			}
			}
			.main-content{
			width: 100%;
			height: 100%;
			padding: 20px;
			height: calc(100vh - 7.8%);
			padding: 0.4rem 1.5rem 2rem;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.main-left{
			width: calc(25% - 10px);
			&>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;
			}

			.left-top{
			width: 100%;
			height: calc((100%/3) - (40px/3));
			.dv-border-box-11{
			::v-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;

			.spiChart{
			width: 25% !important;

			::v-deep(.el-cascader){
			width: 100% !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;
			}
			}
			}

			span{
			font-size: 1.25rem;
			font-weight: bolder;
			color: #11feee;
			}

			img{
			width: 1.2rem;
			height: 1.2rem;
			cursor: pointer;
			}
			}
			.chart-box{
			position: absolute;
			top: 40px;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: calc(100% - 50px);
			z-index: 10000;
			.train-tip{
			display: block;
			font-size: 0.8rem;
			margin-top: 2%;
			margin-left: 5%;
			color: #fff;
			height: 1rem;
			}
			}
			}
			.left-mid{
			}

			.main-left{
			width: calc(25% - 5px);
			&>div{
			width: 100%;
			height: calc((100%/3) - (40px/3));
			}
			.left-bottom{
			width: 100%;
			height: calc((100%/3) - (40px/3));
			height: calc((100%/3) - (20px/3));
			}
			}
			.main-middle{
			width: calc(50% - 20px);
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			width: calc(50% - 10px);

			.mid-top{
			width: 100%;
			height: calc((200%/3) - (80px/3) + 20px);
			height: calc((200% - 40px)/3 + 10px);
			}

			.mid-bottom{
			display: flex;
			width: 100%;
			height: calc(100% - (200%/3) + (80px/3) - 40px);
			height: calc((100%/3) - (20px/3));
			justify-content: space-between;
			padding: 0;
			background: none;
			border-radius: 0;

			&>div {
			position: relative;
			width: calc((100% - 40px)/3);
			width: calc((100% - 20px)/3);
			border-radius: 8px;
			overflow: hidden;

			.chart-tit {
			position: absolute;
			left: 20px;
			top: 20px;
			font-weight: 700;
			z-index: 3;
			}
			padding: 10px 15px;
			box-sizing: border-box;
			}
			}
			}
			.main-right{
			width: calc(25% - 10px);
			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;

			.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 #ccc;
			padding: 1.5rem;
			background: #fff;

			div{
			font-size: 1.5rem;
			text-align: center;
			}

			p{
			margin-top: 20px;
			font-size: 1.125rem;
			line-height: 28px;
			text-align: left
			}

			span{
			position: inherit;
			right: 20px;
			top: 20px;
			font-size: 1rem;
			cursor: pointer;
			}
			}

			.info-panel{
			position: absolute;
			width: 20%;
			right: 50px;
			bottom: 50px;
			z-index: 9999999;
			font-size: 1rem;
			color: #333;
			padding: 0 10px;
			border-radius: 4px;
			cursor: pointer;
			box-shadow: 0 15px 30px rgba(0,0,0,.2);
			border: 1px solid #ccc;
			background: #fff;

			.info-tit{
			display: flex;
			align-items: center;
			padding: 10px;
			border-bottom: 1px solid #ccc;
			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;
			}
			}

			.header-content {
			width: 100%;
			height: 7.8%;
			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 {
			width: 10rem;
			height: auto;
			}
			}
			.title {
			width: 46%;
			font-size: 2rem;
			font-weight: bolder;
			line-height: 7.8%;
			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;
			font-size: 0.9rem;
			}
			.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: 0.4rem;
			font-size: 0.9rem;
			}
			}
			.themeBtn{
			img{
			width: 1.25rem;
			height: 1.25rem;
			}
			cursor: pointer;
			}
			.fullBtn{
			cursor: pointer;
			}
			.backBtn{
			cursor: pointer;
			}
			}
			}
			}
			.main-content{
			width: 100%;
			height: calc(100vh - 7.8%);
			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;

			.spiChart{
			width: 25% !important;

			::v-deep(.el-cascader){
			width: 100% !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;
			}
			}
			}

			span{
			font-size: 1.25rem;
			font-weight: bolder;
			color: #000;
			}

			img{
			width: 1.20rem;
			height: 1.20rem;
			cursor: pointer;
			}
			}
			.chart-box{
			position: absolute;
			top: 40px;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: calc(100% - 50px);
			z-index: 10000;
			.train-tip{
			display: block;
			font-size: 0.8rem;
			margin-top: 2%;
			margin-left: 5%;
			color: #333;
			height: 1rem;
			}
			}
			}
			}

			.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) - (40px/3));
			height: calc((100%/3) - (20px/3));
			}
			.right-mid{
			width: 100%;
			height: calc((100%/3) - (40px/3));
			height: calc((100%/3) - (20px/3));
			}
			.right-bottom{
			width: 100%;
			height: calc((100%/3) - (40px/3));
			height: calc((100%/3) - (20px/3));
			}
			}
			}