Default Changelist

Admin

2022-09-21 f3a13fc1e0acdb6bc2dd052eb17c376eba3ee8ac

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

@@ -1,5 +1,17 @@
<template>
   <div class="charts-cont">
      <div :class="spiChart">
         <el-cascader
            class="spiSe"
            :teleported="false"
            v-model="spiValue"
            :options="spiOptions"
            :props="spiProps"
            :show-all-levels="false"
            @change="handleChange"
         />
      </div>

      <div class="spi" :id="spi">

      </div>
@@ -7,7 +19,7 @@
</template>

<script lang="ts">
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, watchEffect} from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import {useUserInfo} from "/@/stores/userInfo";
@@ -18,22 +30,76 @@
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
   import * as echarts from 'echarts';
   import '/@/theme/bigScreen.css'
   import {useScreenTheme} from "/@/stores/screenTheme";

   interface stateType {
      spiValue: number;
      spiOptions: Array<any>;
      spiChart: string
   }
   export default defineComponent({
      name: 'accident',
      name: 'SPI',
      components: {},
      props:{
         size: Number,
         theme: Boolean
      },
      setup(props) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const screenThemes = useScreenTheme()
         const { screenTheme }  = storeToRefs(screenThemes);
         const spi = ref("eChartSpi" + Date.now() + Math.random())
         const state = reactive<stateType>({

            spiValue: 0,
            spiOptions: [
               {
                  value: 0,
                  label: '公司级别SPI'
               },
               {
                  value: 1,
                  label: 'A事业部SPI',
                  children: [
                     {
                        value: 11,
                        label: 'A车间SPI'
                     },
                     {
                        value: 12,
                        label: 'B车间SPI'
                     },
                     {
                        value: 13,
                        label: 'C车间SPI'
                     }
                  ]
               },
               {
                  value: 2,
                  label: 'B事业部SPI',
                  children: [
                     {
                        value: 21,
                        label: 'D车间SPI'
                     },
                     {
                        value: 22,
                        label: 'E车间SPI'
                     },
                     {
                        value: 23,
                        label: 'F车间SPI'
                     }
                  ]
               }
            ],
            spiChart: 'spi-dark'
         })
         const spiProps = {
            expandTrigger: 'hover',
            checkStrictly: true
         }
         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initSpi =()=>{
@@ -222,6 +288,23 @@
               myChart.resize();
            });
         }

         const getTheme =()=>{
            if(screenTheme.value.isDark){
               state.spiChart =  'spi-dark'
            }else{
               state.spiChart =  'spi-light'
            }
         }

         watchEffect(() => {
            if(props.theme){
               state.spiChart =  'spi-dark'
            }else{
               state.spiChart =  'spi-light'
            }
         })

         function fontSize(val){
            let nowClientWidth = document.documentElement.clientWidth;
            return val * (nowClientWidth/1920) * Number(props.size);
@@ -230,11 +313,13 @@
         // 页面载入时执行方法
         onMounted(() => {
            initSpi();
            getTheme();
         });

         return {
            spi,
            Search,
            spiProps,
            fontSize,
            ...toRefs(state)
         };
@@ -249,6 +334,105 @@
      padding: 2%;
      position: relative;

      .spi-dark{
         position: absolute;
         width: 25% !important;
         top: 0;
         left: 2rem;
         z-index: 99999;

         ::v-deep(.el-cascader){
            width: 100% !important;
         }
         ::v-deep(.el-popper){
            background-color: rgba(10,31,92,1);
            border: 1px solid rgba(17,254,238,.4);
            color: #11FEEE;
            .el-cascader-node__label{
               color: #11FEEE;
            }
            .el-icon{
               color: #11FEEE;
            }
            .el-cascader-node{
               &:hover{
                  background: #0049af;
               }
            }
         }
         ::v-deep(.el-popper__arrow){
            &::before{
               background-color: rgba(10,31,92,.6) !important;
               border: 1px solid rgba(17,254,238,.4);
            }
         }
         ::v-deep(.el-input__wrapper){
            width: 20%;
            box-shadow: none;
            border: 1px solid rgba(17,254,238,.2);
            background: rgba(10,31,92,.6) !important;
            height: 2.5rem;
            color: #11FEEE;

            input{
               font-size: 1.25rem;
               color: #11FEEE;
            }
            .el-icon{
               color: #11FEEE;
            }
         }
      }

      .spi-light{
         position: absolute;
         width: 25% !important;
         top: 0;
         left: 2rem;
         z-index: 99999;

         ::v-deep(.el-cascader){
            width: 100% !important;
         }
         ::v-deep(.el-popper){
            background-color: #fff;
            border: 1px solid #ccc;
            color: #000;
            .el-cascader-node__label{
               color: #000;
            }
            .el-icon{
               color: #000;
            }
            .el-cascader-node{
               &:hover{
                  background: #ccc;
               }
            }
         }
         ::v-deep(.el-popper__arrow){
            &::before{
               background-color: #fff !important;
               border: 1px solid #ccc;
            }
         }
         ::v-deep(.el-input__wrapper){
            width: 20%;
            box-shadow: none;
            border: 1px solid #ccc;
            background: #fff !important;
            height: 2.5rem;
            color: #000;

            input{
               font-size: 1.25rem;
               color: #000;
            }
            .el-icon{
               color: #000;
            }
         }
      }
      .spi{
         width: 100%;
         height: 100%;