InteSecurePlatform.git

			@@ -1,12 +1,13 @@
			<template>
			<div class="home-container">
			<el-scrollbar height="100%">
			<div class="main-cont">
			<div class="table-item">
			<div class="item-head">
			<span>告警风险事件概括</span>
			<div @click="toRiskEve">查看更多>></div>
			</div>
			<el-table :data="eventData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
			<el-table :data="eventData" style="width: 100%;height: 90%" :header-cell-style="{ background: '#fafafa' }">
			<el-table-column prop="riskEventName" label="风险事件名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="riskUnitName" label="风险分析单元名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
			@@ -18,7 +19,7 @@
			<span>隐患状态详情</span>
			<div @click="toRiskStatus">查看更多>></div>
			</div>
			<el-table :data="riskStatusData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
			<el-table :data="riskStatusData" style="width: 100%;height: 90%" :header-cell-style="{ background: '#fafafa' }">
			<el-table-column type="index" label="序号" width="60" />
			<!-- <el-table-column prop="reportTime" label="上报时间" show-overflow-tooltip width="170px"></el-table-column>-->
			<el-table-column prop="dangerCode" label="隐患名称" show-overflow-tooltip></el-table-column>
			@@ -43,7 +44,7 @@
			<div class="item-head">
			<span>隐患整改情况</span>
			</div>
			<div id="riskFix"></div>
			<div class="riskFix" :id="riskFixId"></div>
			</div>
			<div class="table-item">
			<div class="item-head">
			@@ -83,9 +84,10 @@
			<div class="item-head">
			<span>隐患等级分布</span>
			</div>
			<div id="riskLevel"></div>
			<div class="riskLevel" :id="riskLevelId"></div>
			</div>
			</div>
			</el-scrollbar>
			</div>
			</template>

			@@ -144,6 +146,8 @@
			classGroupList: [],
			inspectPointAllList: []
			});
			const riskFixId = ref("eChartFix" + Date.now() + Math.random())
			const riskLevelId = ref("eChartLe" + Date.now() + Math.random())

			// 页面载入时执行方法
			onMounted(() => {
			@@ -198,26 +202,25 @@

			// 隐患整改情况
			const initRiskFix =()=>{
			var dom = document.getElementById('riskFix');
			var myChart = echarts.init(dom, null, {
			const dom = document.getElementById(riskFixId.value);
			let myChart = echarts.init(dom, null, {
			renderer: 'canvas',
			useDirtyRect: false
			});
			var app = {};
			let app = {};

			var option;
			let option;

			option = {
			tooltip: {
			trigger: 'item'
			},
			legend: {
			bottom: '10%',
			bottom: '5%',
			left: 'center'
			},
			series: [
			{
			name: 'Access From',
			type: 'pie',
			radius: ['35%', '60%'],
			avoidLabelOverlap: false,
			@@ -227,8 +230,21 @@
			borderWidth: 2
			},
			label: {
			show: false,
			position: 'center'
			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: {
			@@ -237,9 +253,6 @@
			fontWeight: 'bold'
			}
			},
			labelLine: {
			show: false
			},
			data: [
			{ value: 1048, name: '整改中' },
			{ value: 735, name: '待验收' },
			@@ -247,7 +260,7 @@
			{ value: 484, name: '超期未整改' },
			{ value: 300, name: '已验收' }
			],
			center: ['50%','35%']
			center: ['50%','40%']
			}
			]
			};
			@@ -261,26 +274,26 @@

			// 隐患整改情况
			const initRiskLevel =()=>{
			var dom = document.getElementById('riskLevel');
			var myChart = echarts.init(dom, null, {
			const dom = document.getElementById(riskLevelId.value);
			let myChart = echarts.init(dom, null, {
			renderer: 'canvas',
			useDirtyRect: false
			});
			var app = {};
			let app = {};

			var option;
			let option;

			option = {
			tooltip: {
			trigger: 'item'
			trigger: 'item',
			formatter: '已完成整改：75%' + '\n\r' + '整改中：19%' + '\n\r' + '暂未整改：6%'
			},
			legend: {
			bottom: '10%',
			bottom: '5%',
			left: 'center'
			},
			series: [
			{
			name: 'Access From',
			type: 'pie',
			radius: ['35%', '60%'],
			avoidLabelOverlap: false,
			@@ -290,8 +303,21 @@
			borderWidth: 2
			},
			label: {
			show: false,
			position: 'center'
			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: {
			@@ -300,14 +326,11 @@
			fontWeight: 'bold'
			}
			},
			labelLine: {
			show: false
			},
			data: [
			{ value: 1048, name: '一般隐患' },
			{ value: 235, name: '重大隐患' }
			],
			center: ['50%','35%']
			center: ['50%','40%']
			}
			]
			};
			@@ -317,6 +340,9 @@
			}

			window.addEventListener('resize', myChart.resize);
			setTimeout(()=>{
			myChart.resize
			},500)
			}

			const toRiskEve = ()=>{
			@@ -344,6 +370,8 @@
			Refresh,
			Plus,
			router,
			riskFixId,
			riskLevelId,
			toRiskEve,
			toRiskStatus,
			toRevice,
			@@ -355,34 +383,130 @@

			<style scoped lang="scss">
			$homeNavLengh: 8;
			.home-container {
			/height: calc(100vh - 144px);/
			height: 100%;
			padding: 20px;
			box-sizing: border-box;
			overflow: hidden;

			@media screen and (min-width: 1366px) {
			.main-cont {
			width: 100%;
			height: 100%;
			display: grid;
			margin-bottom: 40px;
			box-sizing: border-box;
			grid-gap: 20px;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(2, 1fr);
			grid-auto-flow: row;
			justify-content: center;
			}
			.item-head{
			height: 25px;
			line-height: 25px;
			span{
			font-size: 20px;
			}
			div{
			font-size: 16px;
			}
			}

			.levelItem{
			font-size: 16px;

			span{
			margin-bottom: 10px;
			font-size: 24px;
			font-weight: bolder;
			}
			}
			}

			@media screen and (min-width: 1024px) and (max-width: 1366px){
			.main-cont {
			width: 100%;
			height: 100%;
			display: grid;
			margin-bottom: 40px;
			box-sizing: border-box;
			grid-gap: 15px;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(2, 1fr);
			grid-auto-flow: row;
			justify-content: center;
			}
			.item-head{
			height: 20px;
			line-height: 20px;
			span{
			font-size: 16px;
			}
			div{
			font-size: 14px;
			}
			}
			.levelItem{
			font-size: 14px;

			span{
			margin-bottom: 10px;
			font-size: 20px;
			font-weight: bolder;
			}
			}
			}

			@media screen and (max-width: 1024px) {
			.main-cont {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			margin-bottom: 40px;
			box-sizing: border-box;
			justify-content: center;
			}
			.item-head{
			height: 20px;
			line-height: 20px;
			span{
			font-size: 16px;
			}
			div{
			font-size: 14px;
			}
			}
			.levelItem{
			font-size: 12px;

			span{
			margin-bottom: 10px;
			font-size: 16px;
			font-weight: bolder;
			}
			}
			}
			.home-container {
			height: 100%;
			box-sizing: border-box;
			overflow: hidden;

			.main-cont {

			.table-item{
			border-radius: 8px;
			background: #fff;
			padding: 20px;
			padding: 15px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;

			.item-head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 30px;
			margin-bottom: 20px;
			border-left: 4px solid #409eff;
			padding-left: 10px;
			span{
			font-size: 20px;
			color: #333;
			font-weight: bolder;
			}
			@@ -394,53 +518,53 @@
			}
			}
			}
			#riskFix{
			height: calc(50vh - 80px);
			.riskFix{
			height: 300px;
			}
			#riskLevel{
			height: calc(50vh - 80px);
			.riskLevel{
			height: 300px
			}
			.deviceTable{
			height: calc((50vh - 100px) / 3 * 2);
			height: 200px;
			}
			.deviceLevel{
			height: calc((50vh - 100px) / 3);
			display: grid;
			grid-gap: 10px;
			grid-template-columns: repeat(4, 1fr);
			align-items: center;
			justify-content: space-between;

			.levelItem{
			display: flex;
			margin-top: 20px;
			flex-direction: column;
			.deviceLevel{
			width: 100%;
			height: 100px;
			display: grid;
			grid-gap: 10px;
			grid-template-columns: repeat(4, 1fr);
			align-items: center;
			padding: 15px;
			box-sizing: border-box;
			border-radius: 8px;
			color: #fff;
			font-size: 16px;
			justify-content: space-between;

			span{
			margin-bottom: 10px;
			font-size: 24px;
			font-weight: bolder;
			.levelItem{
			display: flex;
			height: 100%;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			padding: 15px;
			box-sizing: border-box;
			border-radius: 8px;
			color: #fff;

			span{
			margin-bottom: 10px;
			font-weight: bolder;
			}
			}
			.red{
			background: #F56C6C;
			}
			.orange{
			background: #E6A23C;
			}
			.green{
			background: #67C23A;
			}
			.blue{
			background: #409EFF;
			}
			}
			.red{
			background: #F56C6C;
			}
			.orange{
			background: #E6A23C;
			}
			.green{
			background: #67C23A;
			}
			.blue{
			background: #409EFF;
			}
			}
			}
			.table-item2{
			grid-column-start: 2;
			@@ -457,18 +581,6 @@
			.grid-content {
			align-items: center;
			min-height: 36px;
			}

			.topInfo {
			display: flex;
			align-items: center;
			font-size: 16px;
			font-weight: bold;

			& > div {
			white-space: nowrap;
			margin-right: 20px;
			}
			}
			}
			}