InteSecurePlatform.git

			@@ -1,15 +1,17 @@
			<template>
			<div class="charts-cont">
			<el-select :class="selector" v-model="month" placeholder="Select" :teleported="false" size="default">
			<el-option
			v-for="item in optionList"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			/>
			</el-select>
			<div v-show="curValue===true" class="risk" :id="risk1"></div>
			<div v-show="curValue===false" class="risk" :id="risk2"></div>
			<!-- <div :class="selector">-->
			<!-- <el-cascader-->
			<!-- class="timeSe"-->
			<!-- :teleported="false"-->
			<!-- v-model="timeValue"-->
			<!-- :options="optionList"-->
			<!-- :props="riskProps"-->
			<!-- @change="changeTime"-->
			<!-- />-->
			<!-- </div>-->
			<div class="risk" :id="risk1"></div>
			<!-- <div v-show="curValue===false" class="risk" :id="risk2"></div>-->
			</div>
			</template>

			@@ -25,103 +27,178 @@
			import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
			import * as echarts from 'echarts';
			import '/@/theme/bigScreen.css'
			import {useScreenTheme} from "/@/stores/screenTheme";
			import { useScreenTheme } from "/@/stores/screenTheme";
			import { riskWarningApi } from '/@/api/riskWarning';
			import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";


			interface stateType {
			curValue: boolean,
			month: number,
			timeValue: Array<any>,
			optionList: Array<any>,
			selector: string
			selector: string,
			riskData: Array<any>,
			riskProps: object,
			departmentList: Array<any>,
			departmentRecursionList: Array<DepartmentState>;
			myVar: any
			}
			interface DepartmentState {
			depId: number;
			depName: string;
			}
			export default defineComponent({
			name: 'risk',
			components: {},
			props:{
			size: Number,
			theme: Boolean
			theme: Boolean,
			dep: Array
			},
			setup(props) {
			setup(props,context) {
			const userInfo = useUserInfo()
			const { userInfos } = storeToRefs(userInfo);
			const screenThemes = useScreenTheme()
			const { screenTheme } = storeToRefs(screenThemes);
			const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
			const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
			// const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
			const state = reactive<stateType>({
			curValue: true,
			month: 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
			}
			],
			selector: 'select-dark'
			timeValue: [],
			optionList: [],
			riskProps: {
			expandTrigger: 'hover'
			},
			selector: 'select-dark',
			riskData: [],
			departmentList: [],
			departmentRecursionList: [],
			myVar: null
			})
			const timeForm = {
			hour12: false,
			year: 'numeric',
			month: 'numeric',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
			};
			const makeList = () =>{
			for(let i=0;i<=60;i++){
			const newObj = {
			label: 1990 + i + '',
			value: 1990 + i + '',
			children: [
			{
			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
			},
			{
			label: '十一月',
			value: 11
			},
			{
			label: '十二月',
			value: 12
			}
			]
			}
			state.optionList.push(newObj)
			}
			}
			// 获取部门列表
			const getAllDepartment = async () => {
			let res = await teamManageApi().getAllDepartment();
			if (res.data.code === '200') {
			state.departmentList = JSON.parse(JSON.stringify(res.data.data))
			recursion(state.departmentList);
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			};

			const swi = setInterval(()=>{
			state.curValue = !state.curValue
			if(state.curValue == true){
			nextTick(()=>{
			initRisk1()
			})
			}else{
			nextTick(()=>{
			initRisk2()
			})
			}
			const recursion = (value: any) => {
			for (let i of value) {
			if (i.children.length !== 0) {
			state.departmentRecursionList.push(i);
			recursion(i.children);
			} else {
			state.departmentRecursionList.push(i);
			}
			}
			};

			},5000)
			const getDataByYearId = async () => {
			let res = await riskWarningApi().getDpLine();
			if (res.data.code === '200') {
			state.riskData = res.data.data
			initRisk1(state.riskData)
			context.emit('getData',state.riskData)
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			}

			const changeTime = (value)=>{
			state.timeValue[0] = value[0]
			state.timeValue[1] = value[1]
			getDataByYearId()
			}


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

			let option: EChartsOption;

			option = {
			tooltip: {
			trigger: 'axis',
			@@ -130,214 +207,46 @@
			type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
			}
			},
			legend: {
			top: '1%',
			left: 'center',
			itemWidth: fontSize(10),
			itemHeight: fontSize(8),
			textStyle:{
			color: 'auto',
			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: '#999'
			}
			},
			axisLabel:{
			color: '#999'
			}
			},
			yAxis: {
			type: 'value',
			axisLine:{
			show: true,
			lineStyle:{
			type: 'dotted'
			}
			},
			axisLabel:{
			color: '#999'
			},
			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%'
			}
			]
			color: ['#91cc75','#ee6666'],
			grid: [
			{
			top: '5%',
			right: '2%',
			bottom: '10%'
			}
			],
			xAxis: {
			type: 'category',
			data: data.map(i=>i.time),
			axisLabel: {
			color: '#fff'
			}
			},
			yAxis: {
			type: 'value',
			splitLine:{
			lineStyle: {
			color: 'rgba(255,255,255,.2)'
			}
			}
			},
			series: [
			{
			name: '一般隐患',
			type: 'line',
			data: data.map(i=>i.generalDanger?i.generalDanger:0)
			},
			{
			name: '重大隐患',
			type: 'line',
			data: data.map(i=>i.majorDanger?i.majorDanger:0)
			},
			]
			};

			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: 'auto',
			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: '#999'
			}
			},
			axisLabel:{
			color: '#999'
			}
			},
			yAxis: {
			type: 'value',
			axisLine:{
			show: true,
			lineStyle:{
			type: 'dotted'
			}
			},
			axisLabel:{
			color: '#999'
			},
			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()
			})
			}

			const getTheme =()=>{
			@@ -348,12 +257,20 @@
			}
			}

			const getTime = () =>{
			const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
			const temp = curTime.split('-')
			state.timeValue[0] = temp[0]
			state.timeValue[1] = Number(temp[1])
			}

			watchEffect(() => {
			if(props.theme){
			state.selector = 'select-dark'
			}else{
			state.selector = 'select-light'
			}
			getDataByYearId()
			})

			function fontSize(val){
			@@ -363,19 +280,24 @@

			// 页面载入时执行方法
			onMounted(() => {
			initRisk1();
			// initRisk1();
			getTheme();
			getTime();
			makeList();
			getAllDepartment();
			getDataByYearId()
			});

			onBeforeUnmount(() =>{
			clearInterval(swi)
			clearInterval(state.myVar)
			state.myVar = null
			})

			return {
			risk1,
			risk2,
			Search,
			fontSize,
			changeTime,
			...toRefs(state)
			};
			},
			@@ -390,23 +312,36 @@
			position: relative;
			.select-dark{
			position: absolute;
			z-index: 999;
			z-index: 99999;
			top: -20px;
			right: 1.5rem;
			right: 3rem;
			width: 30%;
			height: 20px;
			height: 1.5rem;
			margin-right: 0.8rem;

			::v-deep(.el-cascader){
			width: 100% !important;
			line-height: 100%;
			}
			::v-deep(.el-popper){
			background-color: rgba(10,31,92,1);
			border: 1px solid rgba(17,254,238,.4);
			color: #11FEEE;
			.el-select-dropdown__item{
			z-index: 999999 !important;
			.el-cascader-node__label{
			color: #11FEEE;
			}
			.el-select-dropdown__item.hover{
			background: #0049af;
			.el-icon{
			color: #11FEEE;
			}
			.el-cascader-node{
			&:hover{
			background: #0049af;
			}
			}
			}
			::v-deep(.el-cascader-menu){
			min-width: 50px !important;
			}
			::v-deep(.el-popper__arrow){
			&::before{
			@@ -433,23 +368,36 @@

			.select-light{
			position: absolute;
			z-index: 999;
			z-index: 99999;
			top: -20px;
			right: 1.5rem;
			right: 3rem;
			width: 30%;
			height: 20px;
			margin-right: 0.8rem;

			::v-deep(.el-cascader){
			width: 100% !important;
			line-height: 100%;
			}
			::v-deep(.el-popper){
			background-color: rgba(255,255,255,1);
			border: 1px solid #ccc;
			color: #fff;
			.el-select-dropdown__item{
			z-index: 999999 !important;
			.el-cascader-node__label{
			color: #000;
			}
			.el-select-dropdown__item.hover{
			background: #ccc;
			.el-icon{
			color: #000;
			}
			.el-cascader-node{
			&:hover{
			background: #ccc;
			}
			}
			}
			::v-deep(.el-cascader-menu){
			min-width: 80px !important;
			}
			::v-deep(.el-popper__arrow){
			&::before{