Default Changelist

Admin

2022-11-16 f59373dccb4afb37e63f4fe655061d067244860c

 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(()=>{
@@ -74,7 +136,7 @@
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     color: 'auto',
                     fontSize: fontSize(12)
                  }
               },
@@ -91,11 +153,11 @@
                  axisLine:{
                     show: true,
                     lineStyle:{
                        color: '#fff'
                        color: '#999'
                     }
                  },
                  axisLabel:{
                     color: '#fff'
                     color: '#999'
                  }
               },
               yAxis: {
@@ -107,7 +169,7 @@
                     }
                  },
                  axisLabel:{
                     color: '#ccc'
                     color: '#999'
                  },
                  splitLine:{
                     show: false
@@ -186,7 +248,7 @@
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     color: 'auto',
                     fontSize: fontSize(12)
                  }
               },
@@ -203,11 +265,11 @@
                  axisLine:{
                     show: true,
                     lineStyle:{
                        color: '#fff'
                        color: '#999'
                     }
                  },
                  axisLabel:{
                     color: '#fff'
                     color: '#999'
                  }
               },
               yAxis: {
@@ -219,7 +281,7 @@
                     }
                  },
                  axisLabel:{
                     color: '#ccc'
                     color: '#999'
                  },
                  splitLine:{
                     show: false
@@ -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.6rem;
         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.6rem;
         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%;