Default Changelist

Admin

2022-09-05 421d5510fa769b99aa41dadfc7dfa59a5939a642

 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%;