InteSecurePlatform.git

对比新文件
			@@ -0,0 +1,341 @@
			<template>
			<div class="charts-cont">
			<div v-show="curValue===true" class="risk" :id="risk1"></div>
			<div v-show="curValue===false" class="risk" :id="risk2"></div>
			</div>
			</template>

			<script lang="ts">
			import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} from 'vue';
			import { storeToRefs } from 'pinia';
			import { initBackEndControlRoutes } from '/@/router/backEnd';
			import {useUserInfo} from "/@/stores/userInfo";
			import { Session } from '/@/utils/storage';
			import { Search } from '@element-plus/icons-vue'
			import { ElMessage } from 'element-plus'
			import type { FormInstance, FormRules } from 'element-plus'
			import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
			import * as echarts from 'echarts';
			import '/@/theme/bigScreen.css'


			interface stateType {
			curValue: boolean
			}
			export default defineComponent({
			name: 'risk',
			components: {},
			props:{
			size: Number,
			month: Number
			},
			setup(props) {
			const userInfo = useUserInfo()
			const { userInfos } = storeToRefs(userInfo);
			const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
			const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
			const state = reactive<stateType>({
			curValue: true
			})

			const swi = setInterval(()=>{
			state.curValue = !state.curValue
			if(state.curValue == true){
			nextTick(()=>{
			initRisk1()
			})
			}else{
			nextTick(()=>{
			initRisk2()
			})
			}

			},5000)

			type EChartsOption = echarts.EChartsOption
			// 隐患整改情况
			const initRisk1 =()=>{
			let dom = document.getElementById(risk1.value);
			let myChart = echarts.init(dom);

			let option: EChartsOption;

			option = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			// Use axis to trigger tooltip
			type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
			}
			},
			legend: {
			top: '1%',
			left: 'center',
			itemWidth: fontSize(10),
			itemHeight: fontSize(8),
			textStyle:{
			color: '#fff',
			fontSize: fontSize(12)
			}
			},
			grid: {
			left: '2%',
			right: '4%',
			bottom: '0',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			// data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			data: ['企业总', 'A部门', 'B部门', 'C部门', 'D部门', 'E部门'],
			axisLine:{
			show: true,
			lineStyle:{
			color: '#fff'
			}
			},
			axisLabel:{
			color: '#fff'
			}
			},
			yAxis: {
			type: 'value',
			axisLine:{
			show: true,
			lineStyle:{
			type: 'dotted'
			}
			},
			axisLabel:{
			color: '#ccc'
			},
			splitLine:{
			show: false
			}
			},
			series: [
			{
			name: '可能造成死亡的',
			type: 'bar',
			stack: 'total',
			label: {
			show: false
			},
			emphasis: {
			focus: 'series'
			},
			// data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
			data: [320, 302, 301, 334, 390, 330],
			barCategoryGap: '50%'
			},
			{
			name: '可能造成重伤的',
			type: 'bar',
			stack: 'total',
			label: {
			show: false
			},
			emphasis: {
			focus: 'series'
			},
			// data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
			data: [120, 132, 101, 134, 90, 230],
			barCategoryGap: '50%'
			},
			{
			name: '可能造成轻伤的',
			type: 'bar',
			stack: 'total',
			label: {
			show: false
			},
			emphasis: {
			focus: 'series'
			},
			// data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
			data: [220, 182, 191, 234, 290, 330],
			barCategoryGap: '50%'
			}
			]
			};

			option && myChart.setOption(option);
			window.addEventListener("resize",function (){
			myChart.resize();
			});
			echarts.init(document.getElementById(risk2.value)).dispose()
			}

			const initRisk2 =()=>{
			let dom = document.getElementById(risk2.value);
			let myChart = echarts.init(dom);

			let option: EChartsOption;

			option = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			// Use axis to trigger tooltip
			type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
			}
			},
			legend: {
			top: '1%',
			left: 'center',
			itemWidth: fontSize(10),
			itemHeight: fontSize(8),
			textStyle:{
			color: '#fff',
			fontSize: fontSize(12)
			}
			},
			grid: {
			left: '2%',
			right: '4%',
			bottom: '0',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			// data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
			axisLine:{
			show: true,
			lineStyle:{
			color: '#fff'
			}
			},
			axisLabel:{
			color: '#fff'
			}
			},
			yAxis: {
			type: 'value',
			axisLine:{
			show: true,
			lineStyle:{
			type: 'dotted'
			}
			},
			axisLabel:{
			color: '#ccc'
			},
			splitLine:{
			show: false
			}
			},
			series: [
			{
			name: '可能造成死亡的',
			type: 'bar',
			stack: 'total',
			label: {
			show: false
			},
			emphasis: {
			focus: 'series'
			},
			// data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
			data: [320, 301, 334, 390, 330, 320],
			barCategoryGap: '50%'
			},
			{
			name: '可能造成重伤的',
			type: 'bar',
			stack: 'total',
			label: {
			show: false
			},
			emphasis: {
			focus: 'series'
			},
			// data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
			data: [90, 230, 210, 132, 101, 134],
			barCategoryGap: '50%'
			},
			{
			name: '可能造成轻伤的',
			type: 'bar',
			stack: 'total',
			label: {
			show: false
			},
			emphasis: {
			focus: 'series'
			},
			// data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
			data: [290, 330, 310, 191, 234, 290],
			barCategoryGap: '50%'
			}
			]
			};

			option && myChart.setOption(option);
			window.addEventListener("resize",function (){
			myChart.resize();
			});
			echarts.init(document.getElementById(risk1.value)).dispose()
			}

			function fontSize(val){
			let nowClientWidth = document.documentElement.clientWidth;
			return val * (nowClientWidth/1920) * Number(props.size);
			}

			// 页面载入时执行方法
			onMounted(() => {
			initRisk1();
			});

			onBeforeUnmount(() =>{
			clearInterval(swi)
			})

			return {
			risk1,
			risk2,
			Search,
			fontSize,
			...toRefs(state)
			};
			},
			});
			</script>

			<style scoped lang="scss">
			.charts-cont{
			width: 100%;
			height: 100%;
			padding: 5% 5% 2%;
			position: relative;

			.risk{
			width: 100%;
			height: 100%;
			}
			}
			.home-container {
			height: 100%;
			overflow: hidden;
			position: relative;
			.el-row{
			margin-bottom: 20px;
			}
			.el-row:last-child {
			margin-bottom: 0;
			}
			.el-input{
			width: 100% !important;
			}
			.el-date-editor::v-deep{
			width: 100%;
			}
			.el-select{
			width: 100%;
			}
			.el-cascader{
			width: 100% !important;
			}
			}
			</style>