InteSecurePlatform.git

			@@ -7,7 +7,7 @@
			</template>

			<script lang="ts">
			import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
			import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, watchEffect} from 'vue';
			import { storeToRefs } from 'pinia';
			import { initBackEndControlRoutes } from '/@/router/backEnd';
			import {useUserInfo} from "/@/stores/userInfo";
			@@ -18,23 +18,52 @@
			import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
			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 {
			spiData: Array<any>;
			year: string;
			monthList: Array<string>;
			valueList: Array<string>
			}
			export default defineComponent({
			name: 'accident',
			name: 'SPI',
			components: {},
			props:{
			size: Number,
			dep: Number
			theme: Boolean
			},
			setup(props) {
			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>({

			spiData: [],
			year: '',
			monthList: [],
			valueList: [],
			})

			// 获取spi数据
			const getSpiData = async () => {
			let res = await riskWarningApi().getSpiData(screenTheme.value.depId);
			if (res.data.code === '200') {
			state.spiData = JSON.parse(JSON.stringify(res.data.data))
			state.monthList = Array.from(state.spiData, ({ month }) => month + '月');
			state.valueList = Array.from(state.spiData, ({ spiVal }) => spiVal);
			state.year = res.data.data[0].year
			initSpi()
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			};
			type EChartsOption = echarts.EChartsOption
			// 隐患整改情况
			const initSpi =()=>{
			@@ -46,38 +75,42 @@
			option = {
			legend: {
			data: ['注意线', '警告线', '危险线', 'SPI预警指数值'],
			top: '0',
			left: 'center',
			top: '2%',
			right: '6%',
			textStyle:{
			color: '#fff',
			fontSize: fontSize(12)
			color: '#999',
			fontSize: fontSize(14)
			}
			},
			color: ['rgba(216,55,55)','rgba(235,194,80)','rgba(147,208,81)'],
			tooltip: {
			trigger: 'axis'
			},
			grid: {
			left: '4%',
			right: '4%',
			left: '8%',
			right: '8%',
			bottom: '5%',
			},
			xAxis: [
			{
			type: 'category',
			boundaryGap: false,
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			data: state.monthList,
			axisLine:{
			show: true,
			lineStyle:{
			color: '#fff'
			color: '#999'
			}
			},
			splitLine:{
			show: true,
			lineStyle:{
			type: 'dashed',
			color: 'rgba(255,255,255,.4)'
			color: '#999'
			}
			},
			axisLabel:{
			color: '#fff'
			color: '#999',
			}
			}
			],
			@@ -103,12 +136,106 @@
			}
			],
			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: '注意线',
			data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
			name: 'SPI预警指数值',
			data: state.valueList,
			type: 'line',
			triggerLineEvent: true,
			label:{
			show: true,
			color: '#23E5E5',
			fontSize: fontSize(12)
			},
			lineStyle:{
			width: 0
			width: 2,
			color: '#23E5E5'
			},
			areaStyle: {
			color: {
			@@ -125,83 +252,8 @@
			offset: 0.9,
			color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
			},
			]
			},
			},
			showSymbol: false,
			stack: 'Total',
			smooth: true
			},
			{
			name: '警告线',
			data: [250, 250, 250, 250, 250, 250, 250,250, 250, 250, 250, 250],
			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,.6)", // 坐标轴处的颜色
			},
			],
			}
			},
			showSymbol: false,
			stack: 'Total',
			smooth: true
			},
			{
			name: '危险线',
			data: [250, 250, 250, 250, 250, 250, 250,250, 250, 250, 250, 250],
			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,.6)", // 坐标轴处的颜色
			},
			],
			}
			},
			showSymbol: false,
			stack: 'Total',
			smooth: true
			},
			{
			name: 'SPI预警指数值',
			data: [450, 632, 501, 434, 390, 530, 520,750, 632, 401, 634, 590],
			type: 'line',
			label:{
			show: true,
			color: '#fff',
			fontSize: fontSize(12)
			},
			lineStyle:{
			width: 2,
			color: '#23E5E5'
			},
			itemStyle:{
			color: '#23E5E5',
			@@ -218,6 +270,12 @@
			myChart.resize();
			});
			}


			watchEffect(() => {
			getSpiData()
			})

			function fontSize(val){
			let nowClientWidth = document.documentElement.clientWidth;
			return val * (nowClientWidth/1920) * Number(props.size);
			@@ -225,6 +283,7 @@

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

			@@ -242,7 +301,7 @@
			.charts-cont{
			width: 100%;
			height: 100%;
			padding: 5%;
			padding: 2%;
			position: relative;

			.spi{