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