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/risk.vue | 172 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 168 insertions(+), 4 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/risk.vue b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
index 9423bda..471d8dd 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/risk.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
@@ -1,12 +1,20 @@
<template>
<div class="charts-cont">
+ <el-select :class="selector" v-model="month" placeholder="Select" :teleported="false" size="default">
+ <el-option
+ v-for="item in optionList"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
<div v-show="curValue===true" class="risk" :id="risk1"></div>
<div v-show="curValue===false" class="risk" :id="risk2"></div>
</div>
</template>
<script lang="ts">
- import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} from 'vue';
+ import { toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount, watchEffect } from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import {useUserInfo} from "/@/stores/userInfo";
@@ -17,25 +25,79 @@
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import * as echarts from 'echarts';
import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme";
interface stateType {
- curValue: boolean
+ curValue: boolean,
+ month: number,
+ optionList: Array<any>,
+ selector: string
}
export default defineComponent({
name: 'risk',
components: {},
props:{
size: Number,
- month: Number
+ theme: Boolean
},
setup(props) {
const userInfo = useUserInfo()
const { userInfos } = storeToRefs(userInfo);
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
const state = reactive<stateType>({
- curValue: true
+ curValue: true,
+ month: 0,
+ optionList: [
+ {
+ label: '年度',
+ value: 0
+ },
+ {
+ label: '一月',
+ value: 1
+ },
+ {
+ label: '二月',
+ value: 2
+ },
+ {
+ label: '三月',
+ value: 3
+ },
+ {
+ label: '四月',
+ value: 4
+ },
+ {
+ label: '五月',
+ value: 5
+ },
+ {
+ label: '六月',
+ value: 6
+ },
+ {
+ label: '七月',
+ value: 7
+ },
+ {
+ label: '八月',
+ value: 8
+ },
+ {
+ label: '九月',
+ value: 9
+ },
+ {
+ label: '十月',
+ value: 10
+ }
+ ],
+ selector: 'select-dark'
})
const swi = setInterval(()=>{
@@ -278,6 +340,22 @@
echarts.init(document.getElementById(risk1.value)).dispose()
}
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ state.selector = 'select-dark'
+ }else{
+ state.selector = 'select-light'
+ }
+ }
+
+ watchEffect(() => {
+ if(props.theme){
+ state.selector = 'select-dark'
+ }else{
+ state.selector = 'select-light'
+ }
+ })
+
function fontSize(val){
let nowClientWidth = document.documentElement.clientWidth;
return val * (nowClientWidth/1920) * Number(props.size);
@@ -286,6 +364,7 @@
// 页面载入时执行方法
onMounted(() => {
initRisk1();
+ getTheme();
});
onBeforeUnmount(() =>{
@@ -309,6 +388,91 @@
height: 100%;
padding: 5% 5% 2%;
position: relative;
+ .select-dark{
+ position: absolute;
+ z-index: 999;
+ top: -20px;
+ right: 1.5rem;
+ width: 30%;
+ height: 20px;
+ margin-right: 0.8rem;
+
+ ::v-deep(.el-popper){
+ background-color: rgba(10,31,92,1);
+ border: 1px solid rgba(17,254,238,.4);
+ color: #11FEEE;
+ .el-select-dropdown__item{
+ color: #11FEEE;
+ }
+ .el-select-dropdown__item.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){
+ box-shadow: none;
+ border: 1px solid rgba(17,254,238,.2);
+ background: rgba(10,31,92,.6) !important;
+ height: 1.5rem;
+ color: #11FEEE;
+
+ input{
+ font-size: 0.8rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ }
+ }
+
+ .select-light{
+ position: absolute;
+ z-index: 999;
+ top: -20px;
+ right: 1.5rem;
+ width: 30%;
+ height: 20px;
+ margin-right: 0.8rem;
+
+ ::v-deep(.el-popper){
+ background-color: rgba(255,255,255,1);
+ border: 1px solid #ccc;
+ color: #fff;
+ .el-select-dropdown__item{
+ color: #000;
+ }
+ .el-select-dropdown__item.hover{
+ background: #ccc;
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(255,255,255,.6) !important;
+ border: 1px solid #ccc;
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid #ccc;
+ background: #fff !important;
+ height: 1.5rem;
+ color: #fff;
+
+ input{
+ font-size: 0.8rem;
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ }
+ }
.risk{
width: 100%;
--
Gitblit v1.9.2