InteSecurePlatform.git

对比新文件
			@@ -0,0 +1,484 @@
			<template>
			<div class="home-container">
			<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-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>
			<el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
			</el-table>
			</div>
			<div class="table-item table-item2">
			<div class="item-head">
			<span>隐患状态详情</span>
			<div @click="toRiskStatus">查看更多>></div>
			</div>
			<el-table :data="riskStatusData" style="width: 100%" :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>
			<el-table-column prop="dangerLevel" label="隐患等级" show-overflow-tooltip>
			<template #default="scope">
			<div :style="{color: scope.row.dangerLevel==1?'#409eff':'#ff0000'}">
			{{scope.row.dangerLevel==1?'一般隐患':'重大隐患'}}
			</div>
			</template>
			</el-table-column>
			<el-table-column prop="reportTime" label="上报时间" show-overflow-tooltip></el-table-column>
			<el-table-column prop="dangerStatus" label="隐患状态" show-overflow-tooltip>
			<template #default="scope">
			<div :style="{color: scope.row.dangerStatus==0 \|\| scope.row.dangerStatus==1 ?'#67C23A':(scope.row.dangerStatus==2 \|\| scope.row.dangerStatus==3?'#F56C6C':'#409EFF')}">
			{{scope.row.dangerStatus==0?'整改中':(scope.row.dangerStatus==1?'待验收':(scope.row.dangerStatus==2?'延期整改':(scope.row.dangerStatus==3?'超期未整改':'已验收')))}}
			</div>
			</template>
			</el-table-column>
			</el-table>
			</div>
			<div class="table-item">
			<div class="item-head">
			<span>隐患整改情况</span>
			</div>
			<div id="riskFix"></div>
			</div>
			<div class="table-item">
			<div class="item-head">
			<span>风险装置列表</span>
			<div @click="toRevice">查看更多>></div>
			</div>
			<el-table class="deviceTable" :data="deviceData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
			<el-table-column prop="produceDeviceName" label="装置名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip>
			<template #default="scope">
			<div :style="{color: scope.row.riskLevel==1?'#409EFF':(scope.row.riskLevel==2?'#67C23A':(scope.row.riskLevel==3?'#E6A23C':'#F56C6C'))}">
			{{scope.row.riskLevel==1?'低风险':(scope.row.riskLevel==2?'一般风险':(scope.row.riskLevel==3?'较大风险':'重大风险'))}}
			</div>
			</template>
			</el-table-column>
			</el-table>
			<div class="deviceLevel">
			<div class="levelItem red">
			<span>0</span>
			<div>重大风险</div>
			</div>
			<div class="levelItem orange">
			<span>2</span>
			<div>较大风险</div>
			</div>
			<div class="levelItem green">
			<span>8</span>
			<div>一般风险</div>
			</div>
			<div class="levelItem blue">
			<span>10</span>
			<div>低风险</div>
			</div>
			</div>
			</div>
			<div class="table-item">
			<div class="item-head">
			<span>隐患等级分布</span>
			</div>
			<div id="riskLevel"></div>
			</div>
			</div>
			</div>
			</template>

			<script lang="ts">
			import { toRefs, reactive, ref, onMounted } from 'vue';
			import { storeToRefs } from 'pinia';
			import { initBackEndControlRoutes } from '/@/router/backEnd';
			import { useUserInfo } from '/@/stores/userInfo';
			import { Session } from '/@/utils/storage';
			import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-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]);
			// 定义接口来定义对象的类型
			interface stateType {
			eventData: Array<any>;
			riskStatusData: Array<any>;
			deviceData: Array<any>;
			pageIndex: number;
			pageSize: number;
			totalSize: number;
			departmentList: [];
			classGroupList: Array<classGroup>;
			inspectPointAllList: [];
			}
			interface type {
			id: number;
			name: string;
			}
			interface classGroup {
			id: number;
			groupName: string;
			}
			export default {
			name: 'workingHours',
			components: {},
			setup() {
			const router = useRouter();
			const state = reactive<stateType>({
			pageIndex: 1,
			pageSize: 5,
			totalSize: 0,
			eventData: [],
			riskStatusData: [],
			deviceData: [],
			departmentList: [],
			classGroupList: [],
			inspectPointAllList: []
			});

			// 页面载入时执行方法
			onMounted(() => {
			getEventRecord();
			getRiskStatusRecord();
			getDeviceRecord();
			initRiskFix();
			initRiskLevel()
			});

			// 告警列表
			const getEventRecord = async () => {
			const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
			let res = await safetyRiskEventApi().getSafetyRiskEventList(data)
			if (res.data.code === '200'){
			state.eventData = res.data.data
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			};

			// 隐患状态列表
			const getRiskStatusRecord = async () => {
			const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
			let res = await hiddenReportApi().getHiddenReportList(data)
			if (res.data.code === '200'){
			state.riskStatusData = res.data.data
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			};

			// 隐患状态列表
			const getDeviceRecord = async () => {
			const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
			let res = await productionDeviceApi().getProductionDeviceList(data)
			if (res.data.code === '200'){
			state.deviceData = res.data.data
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			};

			// 隐患整改情况
			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: '10%',
			left: 'center'
			},
			series: [
			{
			name: 'Access From',
			type: 'pie',
			radius: ['35%', '60%'],
			avoidLabelOverlap: false,
			itemStyle: {
			borderRadius: 6,
			borderColor: '#fff',
			borderWidth: 2
			},
			label: {
			show: false,
			position: 'center'
			},
			emphasis: {
			label: {
			show: true,
			fontSize: '40',
			fontWeight: 'bold'
			}
			},
			labelLine: {
			show: false
			},
			data: [
			{ value: 1048, name: '整改中' },
			{ value: 735, name: '待验收' },
			{ value: 580, name: '延期整改' },
			{ value: 484, name: '超期未整改' },
			{ value: 300, name: '已验收' }
			],
			center: ['50%','35%']
			}
			]
			};

			if (option && typeof option === 'object') {
			myChart.setOption(option);
			}

			window.addEventListener('resize', myChart.resize);
			}

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

			var option;

			option = {
			tooltip: {
			trigger: 'item'
			},
			legend: {
			bottom: '10%',
			left: 'center'
			},
			series: [
			{
			name: 'Access From',
			type: 'pie',
			radius: ['35%', '60%'],
			avoidLabelOverlap: false,
			itemStyle: {
			borderRadius: 6,
			borderColor: '#fff',
			borderWidth: 2
			},
			label: {
			show: false,
			position: 'center'
			},
			emphasis: {
			label: {
			show: true,
			fontSize: '40',
			fontWeight: 'bold'
			}
			},
			labelLine: {
			show: false
			},
			data: [
			{ value: 1048, name: '一般隐患' },
			{ value: 235, name: '重大隐患' }
			],
			center: ['50%','35%']
			}
			]
			};

			if (option && typeof option === 'object') {
			myChart.setOption(option);
			}

			window.addEventListener('resize', myChart.resize);
			}

			const toRiskEve = ()=>{
			router.push({
			path: 'event',
			});
			}

			const toRiskStatus = ()=>{
			router.push({
			path: 'hiddenReport',
			});
			}

			const toRevice = ()=>{
			router.push({
			path: 'device',
			});
			}

			return {
			View,
			Edit,
			Delete,
			Refresh,
			Plus,
			router,
			toRiskEve,
			toRiskStatus,
			toRevice,
			...toRefs(state)
			};
			}
			};
			</script>

			<style scoped lang="scss">
			$homeNavLengh: 8;
			.home-container {
			/height: calc(100vh - 144px);/
			height: 100%;
			padding: 20px;
			box-sizing: border-box;
			overflow: hidden;
			.main-cont {
			width: 100%;
			height: 100%;
			display: grid;
			grid-gap: 20px;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(2, 1fr);
			grid-auto-flow: row;
			justify-content: center;
			.table-item{
			border-radius: 8px;
			background: #fff;
			padding: 20px;

			.item-head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 30px;
			margin-bottom: 20px;
			span{
			font-size: 20px;
			color: #333;
			font-weight: bolder;
			}
			div{
			cursor: pointer;

			&:hover{
			color: #409eff;
			}
			}
			}
			#riskFix{
			height: calc(50vh - 80px);
			}
			#riskLevel{
			height: calc(50vh - 80px);
			}
			.deviceTable{
			height: calc((50vh - 100px) / 3 * 2);
			}
			.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;
			align-items: center;
			padding: 15px;
			box-sizing: border-box;
			border-radius: 8px;
			color: #fff;
			font-size: 16px;

			span{
			margin-bottom: 10px;
			font-size: 24px;
			font-weight: bolder;
			}
			}
			.red{
			background: #F56C6C;
			}
			.orange{
			background: #E6A23C;
			}
			.green{
			background: #67C23A;
			}
			.blue{
			background: #409EFF;
			}
			}
			}
			.table-item2{
			grid-column-start: 2;
			grid-column-end: 4;
			}
			}
			.el-row {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			&:last-child {
			margin-bottom: 0;
			}
			.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;
			}
			}
			}
			}
			.el-input {
			width: 100% !important;
			}
			.el-date-editor::v-deep {
			width: 100%;
			}
			.el-select {
			width: 100%;
			}
			</style>