Default Changelist

Admin

2022-11-16 f59373dccb4afb37e63f4fe655061d067244860c

 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)=>{
@@ -65,10 +81,12 @@
               },
               color: ['#FAC858','#EE6666'],
               legend: {
                  top: '0',
                  top: '8%',
                  left: 'center',
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     color: 'auto',
                     fontSize: fontSize(11)
                  }
               },
@@ -126,10 +144,12 @@
               },
               color: ['#FAC858','#EE6666'],
               legend: {
                  top: '10%',
                  top: '8%',
                  left: 'center',
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     color: 'auto',
                     fontSize: fontSize(11)
                  }
               },
@@ -164,7 +184,7 @@
                        { value: 35, name: '一般隐患' },
                        { value: 1048, name: '重大隐患' }
                     ],
                     center: ['50%','60%']
                     center: ['50%','55%']
                  }
               ]
            };
@@ -179,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 {
@@ -200,13 +238,13 @@
   .charts-cont{
      width: 100%;
      height: 100%;
      padding: 5% 2% 0;
      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;
@@ -230,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%;