InteSecurePlatform.git

			@@ -25,40 +25,129 @@
			<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" 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"
			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>
			@@ -67,42 +156,148 @@

			<script lang="ts">
			import screenfull from 'screenfull';
			import { toRefs, reactive, ref, onMounted } from 'vue';
			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 * 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'

			// 定义接口来定义对象的类型
			interface stateType {
			isScreenfull: boolean;
			currentTime: string
			currentTime: string;
			month: number;
			spiValue: number;
			optionList: Array<any>;
			spiOptions: Array<any>
			}
			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 router = useRouter();
			const props = {
			expandTrigger: 'hover',
			}
			const state = reactive<stateType>({
			isScreenfull: false,
			currentTime: ''
			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(() => {
			setInterval(() => {
			state.currentTime = new Date().toLocaleString();
			console.log(state.currentTime)
			}, 1000);
			getTime()
			});

			const getTime =()=>{
			setInterval(() => {
			state.currentTime = new Date().toLocaleString();
			}, 1000);
			}
			// 全屏
			const onScreenfullClick = () => {
			if (!screenfull.isEnabled) {
			@@ -118,6 +313,15 @@
			}
			});
			};

			const jumpPage = (num) =>{
			router.push({
			path: 'screenPage',
			query: {
			num: num
			}
			});
			}

			// 返回上一页
			const goBack = () => {
			@@ -138,102 +342,25 @@
			// }
			// };

			// 隐患整改情况
			// 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,
			onScreenfullClick,
			jumpPage,
			goBack,
			...toRefs(state)
			};
			}
			};
			});
			</script>

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

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

			::v-deep(.el-select-dropdown) {
			background-color: transparent !important;
			}

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

			}

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

			::v-deep(.el-select-dropdown__item){
			background-color: transparent !important;
			}
			.container {
			width: 100%;
			@@ -247,9 +374,9 @@

			.header-content {
			width: 100%;
			height: 80px;
			height: 72px;
			padding: 0 20px;
			font-size: 20px;
			font-size: 1.25rem;
			display: flex;
			align-items: center;
			justify-content: space-around;
			@@ -267,9 +394,9 @@
			}
			.title {
			width: 46%;
			font-size: 26px;
			font-size: 2rem;
			font-weight: bolder;
			line-height: 80px;
			line-height: 72px;
			text-align: center;
			letter-spacing: 2px;
			}
			@@ -280,7 +407,7 @@
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 15px;
			font-size: 1rem;
			padding-left: 30px;

			.datetime {
			@@ -293,8 +420,7 @@
			&>div{
			display: flex;
			align-items: center;
			align-items: center;
			font-size: 15px;
			font-size: 1rem;
			margin-right: 20px;

			img{
			@@ -305,92 +431,203 @@
			margin-left: 6px;
			}
			}
			.fullbtn{
			cursor: pointer;
			}
			.backBtn{
			cursor: pointer;
			}
			}
			}
			}
			.main-content{
			width: 100%;
			height: 100%;
			padding: 20px;
			padding: 0 25px 25px;
			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;
			}

			.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-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-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) - (40px/3));
			height: calc((100%/3) - (20px/3));

			}
			.left-mid{
			width: 100%;
			height: calc((100%/3) - (40px/3));
			height: calc((100%/3) - (20px/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);
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			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));
			}
			}
			}