InteSecurePlatform.git

			@@ -1,17 +1,5 @@
			<template>
			<div class="charts-cont">
			<div :class="spiChart">
			<el-cascader
			class="spiSe"
			:teleported="false"
			v-model="spiValue"
			:options="spiOptions"
			:props="spiProps"
			:show-all-levels="false"
			@change="handleChange"
			/>
			</div>

			<div class="spi" :id="spi">

			</div>
			@@ -31,11 +19,14 @@
			import * as echarts from 'echarts';
			import '/@/theme/bigScreen.css'
			import {useScreenTheme} from "/@/stores/screenTheme";
			import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
			import {riskWarningApi} from "/@/api/riskWarning";

			interface stateType {
			spiValue: number;
			spiOptions: Array<any>;
			spiChart: string
			spiData: Array<any>;
			year: string;
			monthList: Array<string>;
			valueList: Array<string>
			}
			export default defineComponent({
			name: 'SPI',
			@@ -44,244 +35,83 @@
			size: Number,
			theme: Boolean
			},
			setup(props) {
			setup(props,context) {
			const userInfo = useUserInfo()
			const { userInfos } = storeToRefs(userInfo);
			const screenThemes = useScreenTheme()
			const { screenTheme } = storeToRefs(screenThemes);
			const spi = ref("eChartSpi" + Date.now() + Math.random())
			const state = reactive<stateType>({
			spiValue: 0,
			spiOptions: [
			{
			value: 0,
			label: '公司级别SPI'
			},
			{
			value: 1,
			label: 'A事业部SPI',
			children: [
			{
			value: 11,
			label: 'A车间SPI'
			},
			{
			value: 12,
			label: 'B车间SPI'
			},
			{
			value: 13,
			label: 'C车间SPI'
			}
			]
			},
			{
			value: 2,
			label: 'B事业部SPI',
			children: [
			{
			value: 21,
			label: 'D车间SPI'
			},
			{
			value: 22,
			label: 'E车间SPI'
			},
			{
			value: 23,
			label: 'F车间SPI'
			}
			]
			}
			],
			spiChart: 'spi-dark'
			spiData: [],
			year: '',
			monthList: [],
			valueList: [],
			})
			const spiProps = {
			expandTrigger: 'hover',
			checkStrictly: true
			}

			// 获取spi数据
			const getSpiData = async () => {
			let res = await riskWarningApi().getSpiPage({
			pageIndex: 1,
			pageSize: 12
			})
			if (res.data.code === '200') {
			state.spiData = res.data.data;
			initSpi(state.spiData.reverse())
			context.emit('getData',state.spiData.reverse())
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			};
			type EChartsOption = echarts.EChartsOption
			// 隐患整改情况
			const initSpi =()=>{
			const initSpi =(data)=>{
			let dom = document.getElementById(spi.value);
			let myChart = echarts.init(dom);

			let option: EChartsOption;

			option = {
			legend: {
			data: ['注意线', '警告线', '危险线', 'SPI预警指数值'],
			top: '2%',
			right: '6%',
			textStyle:{
			color: '#999',
			fontSize: fontSize(14)
			}
			},
			color: ['rgba(216,55,55)','rgba(235,194,80)','rgba(147,208,81)'],
			tooltip: {
			trigger: 'axis'
			},
			grid: {
			left: '8%',
			right: '8%',
			bottom: '4%',
			},
			xAxis: [
			{
			type: 'category',
			boundaryGap: false,
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			axisLine:{
			show: true,
			lineStyle:{
			color: '#999'
			}
			},
			splitLine:{
			show: true,
			lineStyle:{
			type: 'dashed',
			color: '#999'
			}
			},
			axisLabel:{
			color: '#999',
			}
			}
			],
			yAxis: [
			{
			type: 'value',
			axisLine:{
			show: true,
			lineStyle:{
			type: 'dotted'
			}
			},
			axisLabel:{
			color: '#ccc'
			},
			splitLine:{
			show: true,
			lineStyle:{
			type: 'dashed',
			color: 'rgba(255,255,255,.4)'
			}
			}
			}
			],
			series: [
			{
			name: '危险线',
			data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000],
			type: 'line',
			lineStyle:{
			width: 0
			},
			areaStyle: {
			color: {
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [
			{
			offset: 0.1,
			color: "rgba(216,55,55)", // 线处的颜色
			},
			{
			offset: 0.9,
			color: "rgba(216,55,55,.1)", // 坐标轴处的颜色
			},
			],
			}
			},
			showSymbol: false,
			// stack: 'Total',
			smooth: true
			},
			{
			name: '警告线',
			data: [750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750],
			type: 'line',
			lineStyle:{
			width: 0
			},
			areaStyle: {
			color: {
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [
			{
			offset: 0.1,
			color: "rgba(235,194,80)", // 线处的颜色
			},
			{
			offset: 0.9,
			color: "rgba(235,194,80,.1)", // 坐标轴处的颜色
			},
			],
			}
			},
			showSymbol: false,
			// stack: 'Total',
			smooth: true
			},
			{
			name: '注意线',
			data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
			type: 'line',
			lineStyle:{
			width: 0
			},
			areaStyle: {
			color: {
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [
			{
			offset: 0.1,
			color: "rgba(147,208,81)", // 线处的颜色
			},
			{
			offset: 0.9,
			color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
			},
			]
			},
			},
			showSymbol: false,
			// stack: 'Total',
			smooth: true
			},
			{
			name: 'SPI预警指数值',
			data: [450, 632, 501, 434, 390, 530, 520,750, 632, 401, 634, 590],
			type: 'line',
			triggerLineEvent: true,
			label:{
			show: true,
			color: '#23E5E5',
			fontSize: fontSize(12)
			},
			lineStyle:{
			width: 2,
			color: '#23E5E5'
			},
			itemStyle:{
			color: '#23E5E5',
			borderColor: '#fff',
			borderWidth: 4
			},
			smooth: true
			}
			]
			};
			option = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			// Use axis to trigger tooltip
			type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
			}
			},
			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: 'spi数值',
			type: 'line',
			data: data.map(i=>i.value?i.value:0)
			}
			]
			}

			option && myChart.setOption(option);
			window.addEventListener("resize",function (){
			@@ -289,20 +119,9 @@
			});
			}

			const getTheme =()=>{
			if(screenTheme.value.isDark){
			state.spiChart = 'spi-dark'
			}else{
			state.spiChart = 'spi-light'
			}
			}

			watchEffect(() => {
			if(props.theme){
			state.spiChart = 'spi-dark'
			}else{
			state.spiChart = 'spi-light'
			}
			getSpiData()
			})

			function fontSize(val){
			@@ -312,14 +131,12 @@

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

			return {
			spi,
			Search,
			spiProps,
			fontSize,
			...toRefs(state)
			};
			@@ -334,105 +151,6 @@
			padding: 2%;
			position: relative;

			.spi-dark{
			position: absolute;
			width: 25% !important;
			top: 0;
			left: 2rem;
			z-index: 99999;

			::v-deep(.el-cascader){
			width: 100% !important;
			}
			::v-deep(.el-popper){
			background-color: rgba(10,31,92,1);
			border: 1px solid rgba(17,254,238,.4);
			color: #11FEEE;
			.el-cascader-node__label{
			color: #11FEEE;
			}
			.el-icon{
			color: #11FEEE;
			}
			.el-cascader-node{
			&:hover{
			background: #0049af;
			}
			}
			}
			::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){
			width: 20%;
			box-shadow: none;
			border: 1px solid rgba(17,254,238,.2);
			background: rgba(10,31,92,.6) !important;
			height: 2.5rem;
			color: #11FEEE;

			input{
			font-size: 1.25rem;
			color: #11FEEE;
			}
			.el-icon{
			color: #11FEEE;
			}
			}
			}

			.spi-light{
			position: absolute;
			width: 25% !important;
			top: 0;
			left: 2rem;
			z-index: 99999;

			::v-deep(.el-cascader){
			width: 100% !important;
			}
			::v-deep(.el-popper){
			background-color: #fff;
			border: 1px solid #ccc;
			color: #000;
			.el-cascader-node__label{
			color: #000;
			}
			.el-icon{
			color: #000;
			}
			.el-cascader-node{
			&:hover{
			background: #ccc;
			}
			}
			}
			::v-deep(.el-popper__arrow){
			&::before{
			background-color: #fff !important;
			border: 1px solid #ccc;
			}
			}
			::v-deep(.el-input__wrapper){
			width: 20%;
			box-shadow: none;
			border: 1px solid #ccc;
			background: #fff !important;
			height: 2.5rem;
			color: #000;

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