InteSecurePlatform.git

			@@ -1,15 +1,16 @@
			<template>
			<div class="charts-cont">
			<!-- <el-select v-model="selected" class="choose" size="small">-->
			<!-- <el-option label="月度" value="1"/>-->
			<!-- <el-option label="年度" value="2"/>-->
			<!-- </el-select>-->
			<div :class="choose">
			<div :class="cur===1?'act':''" @click="changeTab(1)">企业</div>
			<div :class="cur===2?'act':''" @click="changeTab(2)">部门</div>
			</div>
			<div v-show="cur===1" class="month" :id="dangerMonth"></div>
			<div v-show="cur===2" class="year" :id="dangerYear"></div>
			<div :class="selector">
			<el-cascader
			class="timeSe"
			:teleported="false"
			v-model="timeValue"
			:options="optionList"
			:props="riskProps"
			@change="changeTime"
			/>
			</div>
			<div class="month" :id="dangerMonth"></div>
			</div>
			</template>

			@@ -36,11 +37,15 @@
			import * as echarts from "echarts";
			import '/@/theme/bigScreen.css'
			import {useScreenTheme} from "/@/stores/screenTheme";
			import {riskWarningApi} from "/@/api/riskWarning";


			interface stateType {
			cur: number,
			choose: string
			selector: string,
			timeValue: Array<any>,
			optionList: Array<any>,
			riskProps: object,
			dangerData: Array<any>
			}
			export default defineComponent({
			name: 'danger',
			@@ -49,27 +54,130 @@
			size: Number,
			theme: Boolean
			},
			setup(props) {
			setup(props,context) {
			const userInfo = useUserInfo()
			const { userInfos } = storeToRefs(userInfo);
			const screenThemes = useScreenTheme()
			const { screenTheme } = storeToRefs(screenThemes);
			const dangerMonth = ref("eChartFix" + Date.now() + Math.random())
			const dangerYear = ref("eChartFix" + Date.now() + Math.random())
			const state = reactive<stateType>({
			cur: 1,
			choose: 'choose-dark'
			selector: 'select-dark',
			timeValue: [],
			dangerData: [],
			optionList: [],
			riskProps: {
			expandTrigger: 'hover'
			},
			})
			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 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])
			}

			const changeTab =(i)=>{
			state.cur = i
			nextTick(()=>{
			initdangerByYear()
			})
			}
			const changeTime = (value)=>{
			state.timeValue[0] = value[0]
			state.timeValue[1] = value[1]
			getDataByYearId()
			}

			const getDataByYearId = async () => {
			const data = {
			year: state.timeValue[0],
			month: state.timeValue[1],
			}
			if(state.timeValue[1] == 0){
			data.month = ''
			}
			let res = await riskWarningApi().getDpGrade(data);
			if (res.data.code === '200') {
			state.dangerData = res.data.data
			initdangerByMonth(state.dangerData)
			context.emit('getData',state.dangerData)
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			}

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

			@@ -79,7 +187,6 @@
			tooltip: {
			trigger: 'item'
			},
			color: ['#FAC858','#EE6666'],
			legend: {
			top: '8%',
			left: 'center',
			@@ -117,9 +224,19 @@
			}
			},
			data: [
			{ value: 235, name: '一般隐患' },
			{ value: 1048, name: '重大隐患' }
			],
			{
			name: 'A级',
			value: data.a
			},
			{
			name: 'B级',
			value: data.b
			},
			{
			name: 'C级',
			value: data.c
			}
			],
			center: ['50%','55%']
			}
			]
			@@ -131,103 +248,42 @@
			myChart.resize();
			});
			}
			// 隐患整改情况
			const initdangerByYear =()=>{
			let dom = document.getElementById(dangerYear.value);
			let myChart = echarts.init(dom);

			let option: EChartsOption;

			option = {
			tooltip: {
			trigger: 'item'
			},
			color: ['#FAC858','#EE6666'],
			legend: {
			top: '8%',
			left: 'center',
			itemWidth: fontSize(10),
			itemHeight: fontSize(8),
			textStyle:{
			color: 'auto',
			fontSize: fontSize(11)
			}
			},
			series: [
			{
			name: 'Access From',
			type: 'pie',
			radius: '65%',
			avoidLabelOverlap: true,
			label: {
			show: true,
			position: 'inside',
			fontSize: fontSize(12),
			color: '#ffffff',
			textBorderWidth: 0,
			width: 30,
			overflow: 'break'
			},
			labelLine: {
			show: true,
			length: 10,
			length2: 10
			},
			emphasis: {
			label: {
			show: true,
			fontSize: fontSize(22),
			fontWeight: 'bold'
			}
			},
			data: [
			{ value: 35, name: '一般隐患' },
			{ value: 1048, name: '重大隐患' }
			],
			center: ['50%','55%']
			}
			]
			};

			option && myChart.setOption(option);

			window.addEventListener("resize",function (){
			myChart.resize();
			});
			}
			function fontSize(val){
			let nowClientWidth = document.documentElement.clientWidth;
			return val * (nowClientWidth/1920) * Number(props.size);
			}

			const getTheme =()=>{
			if(screenTheme.value.isDark){
			state.choose = 'choose-dark'
			}else{
			state.choose = 'choose-light'
			}
			if(screenTheme.value.isDark){
			state.selector = 'select-dark'
			}else{
			state.selector = 'select-light'
			}
			}

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

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

			return {
			dangerMonth,
			dangerYear,
			Search,
			changeTime,
			fontSize,
			changeTab,
			...toRefs(state)
			};
			},
			@@ -241,60 +297,117 @@
			padding: 2% 2% 0;
			position: relative;

			.choose-dark{
			position: absolute;
			right: 4%;
			bottom: 4%;
			z-index: 999;
			display: flex;
			align-items: center;
			font-size: 0.75rem;
			justify-content: space-between;
			.select-dark{
			position: absolute;
			z-index: 99999;
			bottom: 0;
			left: 2rem;
			width: 50%;
			height: 1.5rem;
			margin-right: 0.8rem;

			div{
			padding: 2px 6px;
			box-sizing: border-box;
			color: rgba(17,254,238,.4);
			border: 1px solid rgba(17,254,238,.4);
			border-radius: 2px;
			cursor: pointer;
			}
			div:hover{
			color: #11FEEE;
			border: 1px solid #11FEEE;
			}
			.act{
			color: #11FEEE;
			border: 1px solid #11FEEE;
			}
			}
			.choose-light{
			position: absolute;
			right: 4%;
			bottom: 4%;
			z-index: 999;
			display: flex;
			align-items: center;
			font-size: 0.75rem;
			justify-content: space-between;
			::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;
			z-index: 999999 !important;
			.el-cascader-node__label{
			color: #11FEEE;
			}
			.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{
			background-color: rgba(10,31,92,.6) !important;
			border: 1px solid rgba(17,254,238,.4);
			}
			}
			::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;

			div{
			padding: 2px 6px;
			box-sizing: border-box;
			color: #ccc;
			border: 1px solid #ccc;
			border-radius: 2px;
			cursor: pointer;
			}
			div:hover{
			color: #333;
			border: 1px solid #333;
			}
			.act{
			color: #333;
			border: 1px solid #333;
			}
			}
			input{
			font-size: 0.8rem;
			color: #11FEEE;
			}
			.el-icon{
			color: #11FEEE;
			}
			}
			}

			.select-light{
			position: absolute;
			z-index: 99999;
			bottom: 0;
			left: 2rem;
			width: 50%;
			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;
			z-index: 999999 !important;
			.el-cascader-node__label{
			color: #000;
			}
			.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{
			background-color: rgba(255,255,255,.6) !important;
			border: 1px solid #ccc;
			}
			}
			::v-deep(.el-input__wrapper){
			box-shadow: none;
			border: 1px solid #ccc;
			background: #fff !important;
			height: 1.5rem;
			color: #fff;

			input{
			font-size: 0.8rem;
			color: #000;
			}
			.el-icon{
			color: #000;
			}
			}
			}
			.month{
			width: 100%;
			height: 100%;