Default Changelist

Admin

2022-09-14 324eed59a668758755219d5cd4e68463a9cc427d

Default Changelist

 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%;

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

@@ -221,6 +221,7 @@
            });

            onUnmounted(() =>{

            })

            return {

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

@@ -22,6 +22,7 @@
    import {useScreenTheme} from "/@/stores/screenTheme"

    interface stateType {
        config: object
    }
    export default defineComponent({
        name: 'message',

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

@@ -1,12 +1,20 @@
<template>
    <div class="charts-cont">
        <el-select :class="selector" v-model="month" placeholder="Select" :teleported="false" size="default">
            <el-option
                    v-for="item in optionList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
            />
        </el-select>
        <div v-show="curValue===true" class="risk" :id="risk1"></div>
        <div v-show="curValue===false" class="risk" :id="risk2"></div>
    </div>
</template>

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


    interface stateType {
        curValue: boolean
        curValue: boolean,
        month: number,
        optionList: Array<any>,
        selector: string
    }
    export default defineComponent({
        name: 'risk',
        components: {},
        props:{
            size: Number,
            month: Number
            theme: Boolean
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const screenThemes = useScreenTheme()
            const { screenTheme }  = storeToRefs(screenThemes);
            const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
            const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
            const state = reactive<stateType>({
                curValue: true
                curValue: true,
                month: 0,
                optionList: [
                    {
                        label: '年度',
                        value: 0
                    },
                    {
                        label: '一月',
                        value: 1
                    },
                    {
                        label: '二月',
                        value: 2
                    },
                    {
                        label: '三月',
                        value: 3
                    },
                    {
                        label: '四月',
                        value: 4
                    },
                    {
                        label: '五月',
                        value: 5
                    },
                    {
                        label: '六月',
                        value: 6
                    },
                    {
                        label: '七月',
                        value: 7
                    },
                    {
                        label: '八月',
                        value: 8
                    },
                    {
                        label: '九月',
                        value: 9
                    },
                    {
                        label: '十月',
                        value: 10
                    }
                ],
                selector: 'select-dark'
            })

            const swi = setInterval(()=>{
@@ -278,6 +340,22 @@
                echarts.init(document.getElementById(risk1.value)).dispose()
            }

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

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

            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
@@ -286,6 +364,7 @@
            // 页面载入时执行方法
            onMounted(() => {
                initRisk1();
                getTheme();
            });

            onBeforeUnmount(() =>{
@@ -309,6 +388,91 @@
        height: 100%;
        padding: 5% 5% 2%;
        position: relative;
        .select-dark{
            position: absolute;
            z-index: 999;
            top: -20px;
            right: 1.5rem;
            width: 30%;
            height: 20px;
            margin-right: 0.8rem;

            ::v-deep(.el-popper){
                background-color: rgba(10,31,92,1);
                border: 1px solid rgba(17,254,238,.4);
                color: #11FEEE;
                .el-select-dropdown__item{
                    color: #11FEEE;
                }
                .el-select-dropdown__item.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){
                box-shadow: none;
                border: 1px solid rgba(17,254,238,.2);
                background: rgba(10,31,92,.6) !important;
                height: 1.5rem;
                color: #11FEEE;

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

        .select-light{
            position: absolute;
            z-index: 999;
            top: -20px;
            right: 1.5rem;
            width: 30%;
            height: 20px;
            margin-right: 0.8rem;

            ::v-deep(.el-popper){
                background-color: rgba(255,255,255,1);
                border: 1px solid #ccc;
                color: #fff;
                .el-select-dropdown__item{
                    color: #000;
                }
                .el-select-dropdown__item.hover{
                    background: #ccc;
                }
            }
            ::v-deep(.el-popper__arrow){
                &::before{
                    background-color: rgba(255,255,255,.6) !important;
                    border: 1px solid #ccc;
                }
            }
            ::v-deep(.el-input__wrapper){
                box-shadow: none;
                border: 1px solid #ccc;
                background: #fff !important;
                height: 1.5rem;
                color: #fff;

                input{
                    font-size: 0.8rem;
                    color: #000;
                }
                .el-icon{
                    color: #000;
                }
            }
        }

        .risk{
            width: 100%;

 src/views/riskWarningSys/warningBigScreen/index.vue

@@ -50,51 +50,29 @@
                    </div>
                    <div class="chart-box">
                        <span class="train-tip">距上次演练结束 5 天</span>
                        <training :size="1"></training>
                        <training class="train-chart" :size="1"></training>
                    </div>
                </div>
                <div class="left-bottom">
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 隐患等级数量分布</span>
                        <div>
                            <el-select class="selector" v-model="month" placeholder="Select" :teleported="false" size="default">
                                <el-option
                                        v-for="item in optionList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                />
                            </el-select>
<!--                            <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">-->
                            <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
                        </div>

                    </div>
                    <div class="chart-box">
                        <risk :size="1" :month="month"></risk>
                        <risk :size="1" :theme="screenTheme.isDark"></risk>
                    </div>
                </div>
            </div>
            <div class="main-middle">
                <div class="mid-top">
                    <dv-border-box-11 title="SPI数据分析" :backgroundColor="boxBg" :color="boxBigColor" class="box-bg"></dv-border-box-11>
                    <div class="part-tit" style="position: absolute;top: 12%;padding: 0 4%">
                        <el-cascader
                                class="spiSe"
                                :teleported="false"
                                v-model="spiValue"
                                :options="spiOptions"
                                :props="props"
                                :show-all-levels="false"
                                @change="handleChange"
                        />
<!--                        <span>SPI数据分析</span>-->
<!--                        <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">-->
                    <div class="part-tit" style="position: absolute;top: 8%;padding: 0 4%">
                        <div></div>
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/>
                    </div>
                    <div class="chart-box">
                        <spi :size="1"></spi>
                    <div class="chart-box" style="top: 60px;height: calc(100% - 70px)">
                        <spi :size="1" :theme="screenTheme.isDark"></spi>
                    </div>
                </div>
                <div class="mid-bottom">
@@ -191,9 +169,7 @@
        boxBigColor: Array<string>;
        isScreenfull: boolean;
        currentTime: string;
        month: number;
        spiValue: number;
        optionList: Array<any>;
        spiOptions: Array<any>
    }
    export default defineComponent({
@@ -224,54 +200,7 @@
                boxBigColor: [],
                isScreenfull: false,
                currentTime: '',
                month: 0,
                spiValue: 0,
                optionList: [
                    {
                        label: '年度',
                        value: 0
                    },
                    {
                        label: '一月',
                        value: 1
                    },
                    {
                        label: '二月',
                        value: 2
                    },
                    {
                        label: '三月',
                        value: 3
                    },
                    {
                        label: '四月',
                        value: 4
                    },
                    {
                        label: '五月',
                        value: 5
                    },
                    {
                        label: '六月',
                        value: 6
                    },
                    {
                        label: '七月',
                        value: 7
                    },
                    {
                        label: '八月',
                        value: 8
                    },
                    {
                        label: '九月',
                        value: 9
                    },
                    {
                        label: '十月',
                        value: 10
                    }
                ],
                spiOptions: [
                    {
                        value: 0,
@@ -555,94 +484,11 @@
                        justify-content: space-between;
                        align-items: center;
                        z-index: 9999;
                        div{
                            width: 40%;
                            display: flex;
                            align-items: center;
                            justify-content: end;
                        }

                        span{
                            font-size: 1.25rem;
                            font-weight: bolder;
                            color: #11feee;
                        }
                        ::v-deep(.el-cascader){
                            width: 25% !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;
                            }
                        }
                        .selector{
                            width: calc(100% - 1.25rem);
                            margin-right: 0.8rem;

                            ::v-deep(.el-popper){
                                background-color: rgba(10,31,92,1);
                                border: 1px solid rgba(17,254,238,.4);
                                color: #11FEEE;
                                .el-select-dropdown__item{
                                    color: #11FEEE;
                                }
                                .el-select-dropdown__item.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){
                                box-shadow: none;
                                border: 1px solid rgba(17,254,238,.2);
                                background: rgba(10,31,92,.6) !important;
                                height: 1.5rem;
                                color: #11FEEE;

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

                        img{
@@ -652,24 +498,26 @@
                        }
                    }
                    .chart-box{
                        position: absolute;
                        top: 40px;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        width: 100%;
                        height: calc(100% - 20px);
                        margin-top: 20px;
                        height: calc(100% - 50px);
                        z-index: 99999;
                        .train-tip{
                            display: block;
                            font-size: 0.8rem;
                            margin-top: 5%;
                            margin-left: 2%;
                            margin-top: 2%;
                            margin-left: 5%;
                            color: #fff;
                        }
                        accident{
                            width: 100%;
                            height: 100%;
                            height: 1rem;
                        }

                        training{
                        .train-chart{
                            width: 100%;
                            height: 100%;
                            height: calc(100% - 1rem);
                        }
                    }
                }
@@ -855,94 +703,10 @@
                        justify-content: space-between;
                        align-items: center;
                        z-index: 9999;
                        div{
                            width: 40%;
                            display: flex;
                            align-items: center;
                            justify-content: end;
                        }
                        span{
                            font-size: 1.25rem;
                            font-weight: bolder;
                            color: #000;
                        }
                        ::v-deep(.el-cascader){
                            width: 25% !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;
                            }
                        }
                        .selector{
                            width: calc(100% - 1.25rem);
                            margin-right: 0.8rem;

                            ::v-deep(.el-popper){
                                background-color: rgba(255,255,255,1);
                                border: 1px solid #ccc;
                                color: #fff;
                                .el-select-dropdown__item{
                                    color: #000;
                                }
                                .el-select-dropdown__item.hover{
                                    background: #ccc;
                                }
                            }
                            ::v-deep(.el-popper__arrow){
                                &::before{
                                    background-color: rgba(255,255,255,.6) !important;
                                    border: 1px solid #ccc;
                                }
                            }
                            ::v-deep(.el-input__wrapper){
                                box-shadow: none;
                                border: 1px solid #ccc;
                                background: #fff !important;
                                height: 1.5rem;
                                color: #fff;

                                input{
                                    font-size: 0.8rem;
                                    color: #000;
                                }
                                .el-icon{
                                    color: #000;
                                }
                            }
                        }

                        img{
@@ -952,24 +716,26 @@
                        }
                    }
                    .chart-box{
                        position: absolute;
                        top: 40px;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        width: 100%;
                        height: calc(100% - 20px);
                        margin-top: 20px;
                        height: calc(100% - 50px);
                        z-index: 99999;
                        .train-tip{
                            display: block;
                            font-size: 0.8rem;
                            margin-top: 5%;
                            margin-left: 2%;
                            margin-top: 2%;
                            margin-left: 5%;
                            color: #333;
                        }
                        accident{
                            width: 100%;
                            height: 100%;
                            height: 1rem;
                        }

                        training{
                        .train-chart{
                            width: 100%;
                            height: 100%;
                            height: calc(100% - 1rem);
                        }
                    }
                }

 src/views/riskWarningSys/warningBigScreen/indexs/index.vue

@@ -9,19 +9,11 @@
    </div>

    <div class="tit">
      <div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'年度隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div>
      <div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <div v-show="curChart===2" class="selector-2">距上次演练结束5天</div>
        <el-select v-show="curChart===3" class="selector-3" v-model="month" placeholder="Select" size="default">
          <el-option
                  v-for="item in optionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
          />
        </el-select>
        <accident v-if="curChart===1" :size="2.5"></accident>
        <training v-else-if="curChart===2" :size="2.5"></training>
        <risk v-else-if="curChart===3" :month="month" :size="2.5"></risk>
@@ -91,8 +83,6 @@
  interface stateType {
    isScreenfull: boolean;
    curChart: number | null;
    month: number;
    optionList: Array<any>;
    lineColor: Array<string>;
    accidentDesc: Array<any>;
    trainDesc: Object;
@@ -118,54 +108,7 @@
      const state = reactive<stateType>({
        isScreenfull: false,
        curChart: null,
        month: 0,
        lineColor: ['#11FEEE'],
        optionList: [
          {
            label: '年度',
            value: 0
          },
          {
            label: '一月',
            value: 1
          },
          {
            label: '二月',
            value: 2
          },
          {
            label: '三月',
            value: 3
          },
          {
            label: '四月',
            value: 4
          },
          {
            label: '五月',
            value: 5
          },
          {
            label: '六月',
            value: 6
          },
          {
            label: '七月',
            value: 7
          },
          {
            label: '八月',
            value: 8
          },
          {
            label: '九月',
            value: 9
          },
          {
            label: '十月',
            value: 10
          }
        ],
        accidentDesc:[
          {
            title: '特别重大事故',
@@ -343,25 +286,6 @@
          font-size: 1.25rem;
          color: #fff;
        }
        .selector-3{
          position: absolute;
          top: 5%;
          right: 10%;
          width: 20%;

          ::v-deep(.el-input__wrapper){
            background: none !important;
            box-shadow: none;
            color: #11FEEE;

            input{
              color: #11FEEE;
            }
            .el-icon{
              color: #11FEEE;
            }
          }
        }
        .main-chart{
          width: 100%;
          height: 100%;
@@ -482,25 +406,6 @@
          width: 20%;
          font-size: 1.25rem;
          color: #fff;
        }
        .selector-3{
          position: absolute;
          top: 5%;
          right: 10%;
          width: 20%;

          ::v-deep(.el-input__wrapper){
            background: none !important;
            box-shadow: none;
            color: #11FEEE;

            input{
              color: #11FEEE;
            }
            .el-icon{
              color: #11FEEE;
            }
          }
        }
        .main-chart{
          width: 100%;

 src/views/riskWarningSys/warningBigScreen/indexs/msgDetail.vue

@@ -9,7 +9,7 @@
    </div>
    <dv-decoration7 :color="lineColor" style="width:100%;height:6%;margin-bottom: 20px">
      <div class="msgTit">
        Decoration
        {{title}}
      </div>
    </dv-decoration7>
    <dv-border-box1 :color="lineColor" style="width: 100%;height: calc(100% - 20px)">
@@ -33,7 +33,8 @@

  // 定义接口来定义对象的类型
  interface stateType {

    lineColor: Array<string>,
    title: string | null
  }
  export default defineComponent({
    name: 'msgDetail',
@@ -46,13 +47,14 @@
      const route = useRoute();
      const state = reactive<stateType>({
        lineColor: ['#11FEEE'],
        title: ''
      });

      // 页面载入时执行方法
      onMounted(() => {
        // if (route.query.row) {
        //   state.row = route.query.num
        // }
        if (route.query.row) {
          state.title = route.query.row[1]
        }
        getTheme()
      });


 src/views/specialWorkSystem/workPlan/reserveSum/index.vue

@@ -107,6 +107,7 @@
                    },
                },
            ]

            // 页面载入时执行方法
            onMounted(() => {
                getListByPage()
@@ -134,7 +135,7 @@
                    }else{
                        ElMessage({
                            type: 'warning',
                            message: '暂无数据'
                            message: '该时段暂无数据'
                        });
                    }
                } else {
@@ -149,6 +150,7 @@
                let dom = document.getElementById(chartName.value);
                let myChart = echarts.init(dom);

                type EChartsOption = echarts.EChartsOption
                let option: EChartsOption;

                option = {