From 421d5510fa769b99aa41dadfc7dfa59a5939a642 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期一, 05 九月 2022 17:09:36 +0800
Subject: [PATCH] Default Changelist

---
 src/views/riskWarningSys/warningBigScreen/components/danger.vue |   81 +++++++++++++++++++++++++++++++++++-----
 1 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/src/views/riskWarningSys/warningBigScreen/components/danger.vue b/src/views/riskWarningSys/warningBigScreen/components/danger.vue
index 96bdd13..ccf8a14 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/danger.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/danger.vue
@@ -4,7 +4,7 @@
 <!--			<el-option label="月度" value="1"/>-->
 <!--			<el-option label="年度" value="2"/>-->
 <!--		</el-select>-->
-		<div class="choose">
+		<div :class="choose">
 			<div :class="cur===1?'act':''" @click="changeTab(1)">企业</div>
 			<div :class="cur===2?'act':''" @click="changeTab(2)">部门</div>
 		</div>
@@ -14,7 +14,17 @@
 </template>
 
 <script lang="ts">
-	import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick } from 'vue';
+	import {
+		toRefs,
+		reactive,
+		defineComponent,
+		ref,
+		computed,
+		defineAsyncComponent,
+		onMounted,
+		nextTick,
+		watchEffect
+	} from 'vue';
 	import { storeToRefs } from 'pinia';
 	import { initBackEndControlRoutes } from '/@/router/backEnd';
 	import {useUserInfo} from "/@/stores/userInfo";
@@ -25,24 +35,30 @@
 	import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
 	import * as echarts from "echarts";
 	import '/@/theme/bigScreen.css'
+	import {useScreenTheme} from "/@/stores/screenTheme";
 
 
 	interface stateType {
-		cur: number
+		cur: number,
+		choose: string
 	}
 	export default defineComponent({
 		name: 'danger',
 		components: {},
 		props:{
-			size: Number
+			size: Number,
+			theme: Boolean
 		},
 		setup(props) {
 			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
+				cur: 1,
+				choose: 'choose-dark'
 			})
 
 			const changeTab =(i)=>{
@@ -70,7 +86,7 @@
 						itemWidth: fontSize(10),
 						itemHeight: fontSize(8),
 						textStyle:{
-							color: '#fff',
+							color: 'auto',
 							fontSize: fontSize(11)
 						}
 					},
@@ -133,7 +149,7 @@
 						itemWidth: fontSize(10),
 						itemHeight: fontSize(8),
 						textStyle:{
-							color: '#fff',
+							color: 'auto',
 							fontSize: fontSize(11)
 						}
 					},
@@ -183,9 +199,27 @@
 				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'
+				}
+			}
+
+			watchEffect(() => {
+				if(props.theme){
+					state.choose =  'choose-dark'
+				}else{
+					state.choose =  'choose-light'
+				}
+			})
+
 			// 页面载入时执行方法
 			onMounted(() => {
 				initdangerByMonth();
+				getTheme()
 			});
 
 			return {
@@ -207,10 +241,10 @@
 		padding: 2% 2% 0;
 		position: relative;
 
-		.choose{
+		.choose-dark{
 			position: absolute;
-			right: 5%;
-			bottom: 20px;
+			right: 4%;
+			bottom: 4%;
 			z-index: 999;
 			display: flex;
 			align-items: center;
@@ -234,6 +268,33 @@
 				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;
+
+			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;
+			}
+		}
 		.month{
 			width: 100%;
 			height: 100%;

--
Gitblit v1.9.2