From 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 04 三月 2025 08:39:55 +0800
Subject: [PATCH] 修改作业等级名称

---
 src/views/riskWarningSys/warningBigScreen/components/SPI.vue |  260 ++++++++++++++++-----------------------------------
 1 files changed, 83 insertions(+), 177 deletions(-)

diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
index b897098..32f95af 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
@@ -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,206 +18,112 @@
 	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) {
+		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>({
-
+				spiData: [],
+				year: '',
+				monthList: [],
+				valueList: [],
 			})
+
+			// 获取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: '0',
-						left: 'center',
-						textStyle:{
-							color: '#fff',
-							fontSize: fontSize(12)
-						}
-					},
-					grid: {
-						left: '4%',
-						right: '4%',
-						bottom: '5%',
-					},
-					xAxis: [
-						{
-							type: 'category',
-							boundaryGap: false,
-							data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-							axisLine:{
-								show: true,
-								lineStyle:{
-									color: '#fff'
-								}
-							},
-							splitLine:{
-								show: true,
-								lineStyle:{
-									type: 'dashed',
-									color: 'rgba(255,255,255,.4)'
-								}
-							},
-							axisLabel:{
-								color: '#fff'
-							}
-						}
-					],
-					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: [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: [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',
-								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 (){
 					myChart.resize();
 				});
 			}
+
+
+			watchEffect(() => {
+				getSpiData()
+			})
+
 			function fontSize(val){
 				let nowClientWidth = document.documentElement.clientWidth;
 				return val * (nowClientWidth/1920) * Number(props.size);
@@ -225,7 +131,7 @@
 
 			// 页面载入时执行方法
 			onMounted(() => {
-				initSpi();
+				getSpiData();
 			});
 
 			return {
@@ -242,7 +148,7 @@
 	.charts-cont{
 		width: 100%;
 		height: 100%;
-		padding: 5%;
+		padding: 2%;
 		position: relative;
 
 		.spi{

--
Gitblit v1.9.2