Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

Your Name

2022-09-05 eafc031e3e6e48778d22b5455358273714944012

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

对比新文件
@@ -0,0 +1,269 @@
<template>
   <div class="charts-cont">
<!--      <el-select v-model="selected" class="choose" size="small">-->
<!--         <el-option label="月度" value="1"/>-->
<!--         <el-option label="年度" value="2"/>-->
<!--      </el-select>-->
      <div class="choose">
         <div :class="cur===1?'act':''" @click="changeTab(1)">企业</div>
         <div :class="cur===2?'act':''" @click="changeTab(2)">部门</div>
      </div>
      <div v-show="cur===1" class="month" :id="dangerMonth"></div>
      <div v-show="cur===2" class="year" :id="dangerYear"></div>
   </div>
</template>

<script lang="ts">
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick } from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import {useUserInfo} from "/@/stores/userInfo";
   import { Session } from '/@/utils/storage';
   import { Search } from '@element-plus/icons-vue'
   import { ElMessage } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
   import * as echarts from "echarts";
   import '/@/theme/bigScreen.css'


   interface stateType {
      cur: number
   }
   export default defineComponent({
      name: 'danger',
      components: {},
      props:{
         size: Number
      },
      setup(props) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const dangerMonth = ref("eChartFix" + Date.now() + Math.random())
         const dangerYear = ref("eChartFix" + Date.now() + Math.random())
         const state = reactive<stateType>({
            cur: 1
         })

         const changeTab =(i)=>{
            state.cur = i
            nextTick(()=>{
               initdangerByYear()
            })
         }
         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initdangerByMonth =()=>{
            let dom = document.getElementById(dangerMonth.value);
            let myChart = echarts.init(dom);

            let option: EChartsOption;

            option = {
               tooltip: {
                  trigger: 'item'
               },
               color: ['#FAC858','#EE6666'],
               legend: {
                  top: '8%',
                  left: 'center',
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     fontSize: fontSize(11)
                  }
               },
               series: [
                  {
                     type: 'pie',
                     radius: '65%',
                     avoidLabelOverlap: true,
                     label: {
                        show: true,
                        position: 'inside',
                        fontSize: fontSize(12),
                        color: '#ffffff',
                        textBorderWidth: 0,
                        width: 30,
                        overflow: 'break'
                     },
                     labelLine: {
                        show: true,
                        length: 10,
                        length2: 10
                     },
                     emphasis: {
                        label: {
                           show: true,
                           fontSize: fontSize(22),
                           fontWeight: 'bold'
                        }
                     },
                     data: [
                        { value: 235, name: '一般隐患' },
                        { value: 1048, name: '重大隐患' }
                     ],
                     center: ['50%','55%']
                  }
               ]
            };

            option && myChart.setOption(option);

            window.addEventListener("resize",function (){
               myChart.resize();
            });
         }
         // 隐患整改情况
         const initdangerByYear =()=>{
            let dom = document.getElementById(dangerYear.value);
            let myChart = echarts.init(dom);

            let option: EChartsOption;

            option = {
               tooltip: {
                  trigger: 'item'
               },
               color: ['#FAC858','#EE6666'],
               legend: {
                  top: '8%',
                  left: 'center',
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     fontSize: fontSize(11)
                  }
               },
               series: [
                  {
                     name: 'Access From',
                     type: 'pie',
                     radius: '65%',
                     avoidLabelOverlap: true,
                     label: {
                        show: true,
                        position: 'inside',
                        fontSize: fontSize(12),
                        color: '#ffffff',
                        textBorderWidth: 0,
                        width: 30,
                        overflow: 'break'
                     },
                     labelLine: {
                        show: true,
                        length: 10,
                        length2: 10
                     },
                     emphasis: {
                        label: {
                           show: true,
                           fontSize: fontSize(22),
                           fontWeight: 'bold'
                        }
                     },
                     data: [
                        { value: 35, name: '一般隐患' },
                        { value: 1048, name: '重大隐患' }
                     ],
                     center: ['50%','55%']
                  }
               ]
            };

            option && myChart.setOption(option);

            window.addEventListener("resize",function (){
               myChart.resize();
            });
         }
         function fontSize(val){
            let nowClientWidth = document.documentElement.clientWidth;
            return val * (nowClientWidth/1920) * Number(props.size);
         }
         // 页面载入时执行方法
         onMounted(() => {
            initdangerByMonth();
         });

         return {
            dangerMonth,
            dangerYear,
            Search,
            fontSize,
            changeTab,
            ...toRefs(state)
         };
      },
   });
</script>

<style scoped lang="scss">
   .charts-cont{
      width: 100%;
      height: 100%;
      padding: 2% 2% 0;
      position: relative;

      .choose{
         position: absolute;
         right: 5%;
         bottom: 20px;
         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: rgba(17,254,238,.4);
            border: 1px solid rgba(17,254,238,.4);
            border-radius: 2px;
            cursor: pointer;
         }
         div:hover{
            color: #11FEEE;
            border: 1px solid #11FEEE;
         }
         .act{
            color: #11FEEE;
            border: 1px solid #11FEEE;
         }
      }
      .month{
         width: 100%;
         height: 100%;
      }
      .year{
         width: 100%;
         height: 100%;
      }
   }
   .home-container {
      height: 100%;
      overflow: hidden;
      position: relative;
      .el-row{
         margin-bottom: 20px;
      }
      .el-row:last-child {
         margin-bottom: 0;
      }
      .el-input{
         width: 100% !important;
      }
      .el-date-editor::v-deep{
         width: 100%;
      }
      .el-select{
         width: 100%;
      }
      .el-cascader{
         width: 100% !important;
      }
   }
</style>