From 324eed59a668758755219d5cd4e68463a9cc427d Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期三, 14 九月 2022 15:22:36 +0800
Subject: [PATCH] Default Changelist

---
 src/views/riskWarningSys/warningBigScreen/components/SPI.vue |  190 ++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 187 insertions(+), 3 deletions(-)

diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
index 7568be8..cb42132 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
@@ -1,5 +1,17 @@
 <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>
@@ -7,7 +19,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,22 +30,76 @@
 	import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
 	import * as echarts from 'echarts';
 	import '/@/theme/bigScreen.css'
+	import {useScreenTheme} from "/@/stores/screenTheme";
 
 	interface stateType {
+		spiValue: number;
+		spiOptions: Array<any>;
+		spiChart: string
 	}
 	export default defineComponent({
-		name: 'accident',
+		name: 'SPI',
 		components: {},
 		props:{
 			size: 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>({
-
+				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'
 			})
+			const spiProps = {
+				expandTrigger: 'hover',
+				checkStrictly: true
+			}
 			type EChartsOption = echarts.EChartsOption
 			// 隐患整改情况
 			const initSpi =()=>{
@@ -222,6 +288,23 @@
 					myChart.resize();
 				});
 			}
+
+			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'
+				}
+			})
+
 			function fontSize(val){
 				let nowClientWidth = document.documentElement.clientWidth;
 				return val * (nowClientWidth/1920) * Number(props.size);
@@ -230,11 +313,13 @@
 			// 页面载入时执行方法
 			onMounted(() => {
 				initSpi();
+				getTheme();
 			});
 
 			return {
 				spi,
 				Search,
+				spiProps,
 				fontSize,
 				...toRefs(state)
 			};
@@ -249,6 +334,105 @@
 		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%;

--
Gitblit v1.9.2