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

Your Name

2022-09-05 eafc031e3e6e48778d22b5455358273714944012

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

对比新文件
@@ -0,0 +1,180 @@
<template>
   <div class="charts-cont">
      <div class="educate" :id="educate">

      </div>
   </div>
</template>

<script lang="ts">
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} 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 {
   }
   export default defineComponent({
      name: 'educate',
      components: {},
      props:{
         size: Number
      },
      setup(props) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const educate = ref("eChartEdu" + Date.now() + Math.random())
         const state = reactive<stateType>({

         })
         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initEducate =()=>{
            let dom = document.getElementById(educate.value);
            let myChart = echarts.init(dom);

            let option: EChartsOption;

            option = {
               color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
               legend: {
                  top: '8%',
                  left: 'center',
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     fontSize: fontSize(11)
                  }
               },
               radar: [
                  {
                     indicator: [
                        { name: '设计培训次数' },
                        { name: '培训时间（小时）' },
                        { name: '完成比例（%）' }
                     ],
                     center: ['50%', '60%'],
                     radius: fontSize(65),
                     startAngle: 90,
                     splitNumber: 4,
                     shape: 'circle',
                     axisName: {
                        formatter: '{value}',
                        color: '#428BD4',
                        fontSize: fontSize(10),
                        width: 20,
                        overflow: 'break'
                     },
                     splitArea: {
                        areaStyle: {
                           color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                           shadowColor: 'rgba(0, 0, 0, 0.1)',
                           shadowBlur: 10
                        }
                     },
                     axisLine: {
                        lineStyle: {
                           color: 'rgba(211, 253, 250, 0.8)'
                        }
                     },
                     splitLine: {
                        lineStyle: {
                           color: 'rgba(211, 253, 250, 0.8)'
                        }
                     }
                  }
               ],
               series: [
                  {
                     type: 'radar',
                     emphasis: {
                        lineStyle: {
                           width: 4
                        }
                     },
                     data: [
                        {
                           value: [100, 8, 0.4, -80, 2000],
                           name: '企业汇总'
                        },
                        {
                           value: [60, 5, 0.3, -100, 1500],
                           name: '事业部A',
                           areaStyle: {
                              color: 'rgba(255, 228, 52, 0.6)'
                           }
                        }
                     ]
                  },
               ]
            };

            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(() => {
            initEducate();
         });

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

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

      .educate{
         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>