Default Changelist

Admin

2022-09-05 421d5510fa769b99aa41dadfc7dfa59a5939a642

 src/views/riskWarningSys/warningBigScreen/components/accident.vue

@@ -1,6 +1,6 @@
<template>
   <div class="charts-cont">
      <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>
@@ -10,7 +10,7 @@
</template>

<script lang="ts">
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted} from 'vue';
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted, watchEffect} from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import {useUserInfo} from "/@/stores/userInfo";
@@ -21,24 +21,31 @@
   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,
      curColor: string,
      choose: string
   }
   export default defineComponent({
      name: 'accident',
      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 accidentMonth = ref("eChartFix" + Date.now() + Math.random())
         const accidentYear = ref("eChartFix" + Date.now() + Math.random())
         const state = reactive<stateType>({
            cur: 1
            cur: 1,
            curColor: '#fff',
            choose: 'choose-dark'
         })

         const changeTab =(i)=>{
@@ -65,7 +72,7 @@
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     color: 'auto',
                     fontSize: fontSize(11)
                  }
               },
@@ -73,16 +80,15 @@
                  {
                     name: '月度数据',
                     type: 'pie',
                     radius: ['45%', '70%'],
                     radius: ['50%', '80%'],
                     avoidLabelOverlap: false,
                     itemStyle: {
                        borderRadius: fontSize(4)
                        borderRadius: fontSize(2)
                     },
                     label: {
                        show: false,
                        position: 'outer',
                        fontSize: fontSize(10),
                        color: '#ffffff',
                        textBorderWidth: 0,
                        width: fontSize(40),
                        overflow: 'break'
@@ -100,11 +106,11 @@
                        }
                     },
                     data: [
                        { value: 1048, name: '特别重大事故' },
                        { value: 735, name: '重大事故' },
                        { value: 580, name: '较大事故' },
                        { value: 484, name: '一般事故' },
                        { value: 300, name: '未遂事故' }
                        { value: 1, name: '特别重大事故' },
                        { value: 10, name: '重大事故' },
                        { value: 20, name: '较大事故' },
                        { value: 33, name: '一般事故' },
                        { value: 50, name: '未遂事故' }
                     ],
                     center: ['50%','60%']
                  }
@@ -134,7 +140,7 @@
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     color: 'auto',
                     fontSize: fontSize(11)
                  }
               },
@@ -142,16 +148,15 @@
                  {
                     name: '年度数据',
                     type: 'pie',
                     radius: ['45%', '70%'],
                     radius: ['50%', '80%'],
                     avoidLabelOverlap: false,
                     itemStyle: {
                        borderRadius: fontSize(4)
                        borderRadius: fontSize(2)
                     },
                     label: {
                        show: false,
                        position: 'outer',
                        fontSize: fontSize(10),
                        color: '#ffffff',
                        textBorderWidth: 0,
                        width: fontSize(40),
                        overflow: 'break'
@@ -169,11 +174,11 @@
                        }
                     },
                     data: [
                        { value: 1048, name: '特别重大事故' },
                        { value: 735, name: '重大事故' },
                        { value: 580, name: '较大事故' },
                        { value: 484, name: '一般事故' },
                        { value: 300, name: '未遂事故' }
                        { value: 10, name: '特别重大事故' },
                        { value: 20, name: '重大事故' },
                        { value: 100, name: '较大事故' },
                        { value: 130, name: '一般事故' },
                        { value: 150, name: '未遂事故' }
                     ],
                     center: ['50%','60%']
                  }
@@ -187,15 +192,31 @@
            });
         }


         function fontSize(val){
            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(() => {
            initAccidentByMonth();
            getTheme()
            // initAccidentByYear();
         });

@@ -221,10 +242,10 @@
      padding: 5%;
      position: relative;

      .choose{
      .choose-dark{
         position: absolute;
         right: 5%;
         bottom: 20px;
         right: 4%;
         bottom: 4%;
         z-index: 999;
         display: flex;
         align-items: center;
@@ -248,6 +269,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%;