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

Your Name

2022-09-05 eafc031e3e6e48778d22b5455358273714944012

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

对比新文件
@@ -0,0 +1,279 @@
<template>
   <div class="charts-cont">
      <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="accidentMonth"></div>
      <div v-show="cur===2" class="month" :id="accidentYear"></div>
   </div>
</template>

<script lang="ts">
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted} 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: 'accident',
      components: {},
      props:{
         size: Number
      },
      setup(props) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const accidentMonth = ref("eChartFix" + Date.now() + Math.random())
         const accidentYear = ref("eChartFix" + Date.now() + Math.random())
         const state = reactive<stateType>({
            cur: 1
         })

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

            let option: EChartsOption;

            option = {
               tooltip: {
                  trigger: 'item'
               },
               legend: {
                  top: '0',
                  left: 'center',
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     fontSize: fontSize(11)
                  }
               },
               series: [
                  {
                     name: '月度数据',
                     type: 'pie',
                     radius: ['45%', '70%'],
                     avoidLabelOverlap: false,
                     itemStyle: {
                        borderRadius: fontSize(4)
                     },
                     label: {
                        show: false,
                        position: 'outer',
                        fontSize: fontSize(10),
                        color: '#ffffff',
                        textBorderWidth: 0,
                        width: fontSize(40),
                        overflow: 'break'
                     },
                     // labelLine: {
                     //    show: true,
                     //    length: fontSize(10),
                     //    length2: fontSize(10)
                     // },
                     emphasis: {
                        label: {
                           show: true,
                           fontSize: fontSize(22),
                           fontWeight: 'bold'
                        }
                     },
                     data: [
                        { value: 1048, name: '特别重大事故' },
                        { value: 735, name: '重大事故' },
                        { value: 580, name: '较大事故' },
                        { value: 484, name: '一般事故' },
                        { value: 300, name: '未遂事故' }
                     ],
                     center: ['50%','60%']
                  }
               ]
            };

            option && myChart.setOption(option);

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

            let option: EChartsOption;

            option = {
               tooltip: {
                  trigger: 'item'
               },
               legend: {
                  top: '0',
                  left: 'center',
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: '#fff',
                     fontSize: fontSize(11)
                  }
               },
               series: [
                  {
                     name: '年度数据',
                     type: 'pie',
                     radius: ['45%', '70%'],
                     avoidLabelOverlap: false,
                     itemStyle: {
                        borderRadius: fontSize(4)
                     },
                     label: {
                        show: false,
                        position: 'outer',
                        fontSize: fontSize(10),
                        color: '#ffffff',
                        textBorderWidth: 0,
                        width: fontSize(40),
                        overflow: 'break'
                     },
                     // labelLine: {
                     //    show: true,
                     //    length: fontSize(10),
                     //    length2: fontSize(10)
                     // },
                     emphasis: {
                        label: {
                           show: true,
                           fontSize: fontSize(22),
                           fontWeight: 'bold'
                        }
                     },
                     data: [
                        { value: 1048, name: '特别重大事故' },
                        { value: 735, name: '重大事故' },
                        { value: 580, name: '较大事故' },
                        { value: 484, name: '一般事故' },
                        { value: 300, name: '未遂事故' }
                     ],
                     center: ['50%','60%']
                  }
               ]
            };

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

         onUnmounted(() =>{
         })

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

<style scoped lang="scss">
   .charts-cont{
      width: 100%;
      height: 100%;
      padding: 5%;
      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%;
      }
   }
   .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>