lct

Your Name

2022-10-14 596a6831ceb5417e2f4fb71f9e2dd1d2e2bcb6f8

 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="departList"
            :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,53 @@
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
   import * as echarts from 'echarts';
   import '/@/theme/bigScreen.css'
   import {useScreenTheme} from "/@/stores/screenTheme";
   import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";

   interface stateType {
      spiValue: number;
      departList: Array<any>;
      spiChart: string;
      spiProps: object
   }
   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: 1,
            departList: [],
            spiProps: {
               expandTrigger: 'hover',
               checkStrictly: true,
               value: 'depId',
               label: 'depName',
            },
            spiChart: 'spi-dark'
         })

         // 获取部门列表
         const getAllDepartment = async () => {
            let res = await teamManageApi().getAllDepartment();
            if (res.data.code === '200') {
               state.departList = JSON.parse(JSON.stringify(res.data.data))
            } else {
               ElMessage({
                  type: 'warning',
                  message: res.data.msg
               });
            }
         };

         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initSpi =()=>{
@@ -59,7 +102,7 @@
               grid: {
                  left: '8%',
                  right: '8%',
                  bottom: '4%',
                  bottom: '5%',
               },
               xAxis: [
                  {
@@ -222,6 +265,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);
@@ -229,7 +289,9 @@

         // 页面载入时执行方法
         onMounted(() => {
            getAllDepartment();
            initSpi();
            getTheme();
         });

         return {
@@ -249,6 +311,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%;