Default Changelist

Admin

2022-09-05 421d5510fa769b99aa41dadfc7dfa59a5939a642

Default Changelist

 src/assets/warningScreen/logo_dark.png

 src/assets/warningScreen/logo_light.png

 src/assets/warningScreen/pagebg-l-light.png

 src/assets/warningScreen/pagebg-r-light.png

 src/assets/warningScreen/pagebg-t-light.png

 src/assets/warningScreen/riskprocast-light.jpg

 src/assets/warningScreen/skin-light.png

 src/assets/warningScreen/skin.png

 src/stores/interface/index.ts

@@ -51,6 +51,12 @@
    };
}

export interface screenThemeState {
    screenTheme: {
        isDark: boolean
    }
}

// 布局配置
export interface ThemeConfigState {
    isDrawer: boolean;

 src/stores/screenTheme.ts

对比新文件
@@ -0,0 +1,21 @@
import { defineStore } from 'pinia';
import { screenThemeState } from './interface';

/**
 * 路由列表
 * @methods setRoutesList 设置路由数据
 * @methods setColumnsMenuHover 设置分栏布局菜单鼠标移入 boolean
 * @methods setColumnsNavHover 设置分栏布局最左侧导航鼠标移入 boolean
 */
export const useScreenTheme = defineStore('screenTheme', {
    state: (): screenThemeState => ({
        screenTheme:{
            isDark: true
        }
    }),
    actions: {
        async setScreenTheme(value: any) {
            this.screenTheme.isDark = value;
        }
    },
});

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

@@ -26,7 +26,6 @@
        components: {},
        props:{
            size: Number,
            dep: Number
        },
        setup(props) {
            const userInfo = useUserInfo()
@@ -46,20 +45,21 @@
                option = {
                    legend: {
                        data: ['注意线', '警告线', '危险线', 'SPI预警指数值'],
                        top: '0',
                        left: 'center',
                        top: '2%',
                        right: '6%',
                        textStyle:{
                            color: '#fff',
                            fontSize: fontSize(12)
                            color: '#999',
                            fontSize: fontSize(14)
                        }
                    },
                    color: ['rgba(216,55,55)','rgba(235,194,80)','rgba(147,208,81)'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '4%',
                        right: '4%',
                        bottom: '5%',
                        left: '8%',
                        right: '8%',
                        bottom: '4%',
                    },
                    xAxis: [
                        {
@@ -69,18 +69,18 @@
                            axisLine:{
                                show: true,
                                lineStyle:{
                                    color: '#fff'
                                    color: '#999'
                                }
                            },
                            splitLine:{
                                show: true,
                                lineStyle:{
                                    type: 'dashed',
                                    color: 'rgba(255,255,255,.4)'
                                    color: '#999'
                                }
                            },
                            axisLabel:{
                                color: '#fff'
                                color: '#999',
                            }
                        }
                    ],
@@ -107,6 +107,64 @@
                    ],
                    series: [
                        {
                            name: '危险线',
                            data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000],
                            type: 'line',
                            lineStyle:{
                                width: 0
                            },
                            areaStyle: {
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "rgba(216,55,55)", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "rgba(216,55,55,.1)", // 坐标轴处的颜色
                                        },
                                    ],
                                }
                            },
                            showSymbol: false,
                            // stack: 'Total',
                            smooth: true
                        },
                        {
                            name: '警告线',
                            data: [750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750],
                            type: 'line',
                            lineStyle:{
                                width: 0
                            },
                            areaStyle: {
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "rgba(235,194,80)", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "rgba(235,194,80,.1)", // 坐标轴处的颜色
                                        },
                                    ],
                                }
                            },
                            showSymbol: false,
                            // stack: 'Total',
                            smooth: true
                        },
                        {
                            name: '注意线',
                            data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
                            type: 'line',
@@ -132,65 +190,7 @@
                                },
                            },
                            showSymbol: false,
                            stack: 'Total',
                            smooth: true
                        },
                        {
                            name: '警告线',
                            data: [250, 250, 250, 250, 250, 250, 250,250, 250, 250, 250, 250],
                            type: 'line',
                            lineStyle:{
                                width: 0
                            },
                            areaStyle: {
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "rgba(235,194,80)", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "rgba(235,194,80,.6)", // 坐标轴处的颜色
                                        },
                                    ],
                                }
                            },
                            showSymbol: false,
                            stack: 'Total',
                            smooth: true
                        },
                        {
                            name: '危险线',
                            data: [250, 250, 250, 250, 250, 250, 250,250, 250, 250, 250, 250],
                            type: 'line',
                            lineStyle:{
                                width: 0
                            },
                            areaStyle: {
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "rgba(216,55,55)", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "rgba(216,55,55,.6)", // 坐标轴处的颜色
                                        },
                                    ],
                                }
                            },
                            showSymbol: false,
                            stack: 'Total',
                            // stack: 'Total',
                            smooth: true
                        },
                        {
@@ -200,7 +200,7 @@
                            triggerLineEvent: true,
                            label:{
                                show: true,
                                color: '#fff',
                                color: '#23E5E5',
                                fontSize: fontSize(12)
                            },
                            lineStyle:{
@@ -246,7 +246,7 @@
    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 5%;
        padding: 2%;
        position: relative;

        .spi{

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

@@ -1,6 +1,6 @@
<template>
    <div class="charts-cont">
        <div class="choose">
        <div :class="choose" >
            <div :class="cur===1?'act':''" @click="changeTab(1)">月度</div>
            <div :class="cur===2?'act':''" @click="changeTab(2)">年度</div>
        </div>
@@ -10,7 +10,7 @@
</template>

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

    import {useScreenTheme} from "/@/stores/screenTheme"

    interface stateType {
        cur: number
        cur: number,
        curColor: string,
        choose: string
    }
    export default defineComponent({
        name: 'accident',
        components: {},
        props:{
            size: Number
            size: Number,
            theme: Boolean
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const screenThemes = useScreenTheme()
            const { screenTheme }  = storeToRefs(screenThemes);
            const accidentMonth = ref("eChartFix" + Date.now() + Math.random())
            const accidentYear = ref("eChartFix" + Date.now() + Math.random())
            const state = reactive<stateType>({
                cur: 1
                cur: 1,
                curColor: '#fff',
                choose: 'choose-dark'
            })

            const changeTab =(i)=>{
@@ -65,7 +72,7 @@
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
                        textStyle:{
                            color: '#fff',
                            color: 'auto',
                            fontSize: fontSize(11)
                        }
                    },
@@ -73,16 +80,15 @@
                        {
                            name: '月度数据',
                            type: 'pie',
                            radius: ['45%', '70%'],
                            radius: ['50%', '80%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: fontSize(4)
                                borderRadius: fontSize(2)
                            },
                            label: {
                                show: false,
                                position: 'outer',
                                fontSize: fontSize(10),
                                color: '#ffffff',
                                textBorderWidth: 0,
                                width: fontSize(40),
                                overflow: 'break'
@@ -100,11 +106,11 @@
                                }
                            },
                            data: [
                                { value: 1048, name: '特别重大事故' },
                                { value: 735, name: '重大事故' },
                                { value: 580, name: '较大事故' },
                                { value: 484, name: '一般事故' },
                                { value: 300, name: '未遂事故' }
                                { value: 1, name: '特别重大事故' },
                                { value: 10, name: '重大事故' },
                                { value: 20, name: '较大事故' },
                                { value: 33, name: '一般事故' },
                                { value: 50, name: '未遂事故' }
                            ],
                            center: ['50%','60%']
                        }
@@ -134,7 +140,7 @@
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
                        textStyle:{
                            color: '#fff',
                            color: 'auto',
                            fontSize: fontSize(11)
                        }
                    },
@@ -142,16 +148,15 @@
                        {
                            name: '年度数据',
                            type: 'pie',
                            radius: ['45%', '70%'],
                            radius: ['50%', '80%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: fontSize(4)
                                borderRadius: fontSize(2)
                            },
                            label: {
                                show: false,
                                position: 'outer',
                                fontSize: fontSize(10),
                                color: '#ffffff',
                                textBorderWidth: 0,
                                width: fontSize(40),
                                overflow: 'break'
@@ -169,11 +174,11 @@
                                }
                            },
                            data: [
                                { value: 1048, name: '特别重大事故' },
                                { value: 735, name: '重大事故' },
                                { value: 580, name: '较大事故' },
                                { value: 484, name: '一般事故' },
                                { value: 300, name: '未遂事故' }
                                { value: 10, name: '特别重大事故' },
                                { value: 20, name: '重大事故' },
                                { value: 100, name: '较大事故' },
                                { value: 130, name: '一般事故' },
                                { value: 150, name: '未遂事故' }
                            ],
                            center: ['50%','60%']
                        }
@@ -187,15 +192,31 @@
                });
            }


            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }
            const getTheme =()=>{
                if(screenTheme.value.isDark){
                    state.choose =  'choose-dark'
                }else{
                    state.choose =  'choose-light'
                }
            }

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


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

@@ -221,10 +242,10 @@
        padding: 5%;
        position: relative;

        .choose{
        .choose-dark{
            position: absolute;
            right: 5%;
            bottom: 20px;
            right: 4%;
            bottom: 4%;
            z-index: 999;
            display: flex;
            align-items: center;
@@ -248,6 +269,33 @@
                border: 1px solid #11FEEE;
            }
        }
        .choose-light{
            position: absolute;
            right: 4%;
            bottom: 4%;
            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: #ccc;
                border: 1px solid #ccc;
                border-radius: 2px;
                cursor: pointer;
            }
            div:hover{
                color: #333;
                border: 1px solid #333;
            }
            .act{
                color: #333;
                border: 1px solid #333;
            }
        }
        .month{
            width: 100%;
            height: 100%;

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

@@ -4,7 +4,7 @@
<!--            <el-option label="月度" value="1"/>-->
<!--            <el-option label="年度" value="2"/>-->
<!--        </el-select>-->
        <div class="choose">
        <div :class="choose">
            <div :class="cur===1?'act':''" @click="changeTab(1)">企业</div>
            <div :class="cur===2?'act':''" @click="changeTab(2)">部门</div>
        </div>
@@ -14,7 +14,17 @@
</template>

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


    interface stateType {
        cur: number
        cur: number,
        choose: string
    }
    export default defineComponent({
        name: 'danger',
        components: {},
        props:{
            size: Number
            size: Number,
            theme: Boolean
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const screenThemes = useScreenTheme()
            const { screenTheme }  = storeToRefs(screenThemes);
            const dangerMonth = ref("eChartFix" + Date.now() + Math.random())
            const dangerYear = ref("eChartFix" + Date.now() + Math.random())
            const state = reactive<stateType>({
                cur: 1
                cur: 1,
                choose: 'choose-dark'
            })

            const changeTab =(i)=>{
@@ -70,7 +86,7 @@
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
                        textStyle:{
                            color: '#fff',
                            color: 'auto',
                            fontSize: fontSize(11)
                        }
                    },
@@ -133,7 +149,7 @@
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
                        textStyle:{
                            color: '#fff',
                            color: 'auto',
                            fontSize: fontSize(11)
                        }
                    },
@@ -183,9 +199,27 @@
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }

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

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

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

            return {
@@ -207,10 +241,10 @@
        padding: 2% 2% 0;
        position: relative;

        .choose{
        .choose-dark{
            position: absolute;
            right: 5%;
            bottom: 20px;
            right: 4%;
            bottom: 4%;
            z-index: 999;
            display: flex;
            align-items: center;
@@ -234,6 +268,33 @@
                border: 1px solid #11FEEE;
            }
        }
        .choose-light{
            position: absolute;
            right: 4%;
            bottom: 4%;
            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: #ccc;
                border: 1px solid #ccc;
                border-radius: 2px;
                cursor: pointer;
            }
            div:hover{
                color: #333;
                border: 1px solid #333;
            }
            .act{
                color: #333;
                border: 1px solid #333;
            }
        }
        .month{
            width: 100%;
            height: 100%;

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

@@ -51,7 +51,7 @@
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
                        textStyle:{
                            color: '#fff',
                            color: 'auto',
                            fontSize: fontSize(11)
                        }
                    },

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

@@ -7,7 +7,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,17 +18,20 @@
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'

    import {useScreenTheme} from "/@/stores/screenTheme"

    interface stateType {
    }
    export default defineComponent({
        name: 'profession',
        name: 'message',
        components: {},
        props:{
            size: Number
            size: Number,
            theme: Boolean
        },
        setup(props) {
            const screenThemes = useScreenTheme()
            const { screenTheme }  = storeToRefs(screenThemes);
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const pro = ref("eChartPro" + Date.now() + Math.random())
@@ -61,20 +64,44 @@
            })

            const mouseoverHandler = (e: any) => {
                console.log(e)

            }

            const clickHandler = (e: any) => {
                console.log(e)

            }

            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }
            watchEffect(() => {
                if(props.theme){
                    state.config.headerBGC =  '#0049af'
                    state.config.oddRowBGC =  'none'
                    state.config.evenRowBGC =  'rgba(57,122,206,.1)'
                }else{
                    state.config.headerBGC =  '#333'
                    state.config.oddRowBGC =  '#888'
                    state.config.evenRowBGC =  '#999'
                }
            })

            const getTheme =()=>{
                if(screenTheme.value.isDark){
                    state.config.headerBGC =  '#0049af'
                    state.config.oddRowBGC =  'none'
                    state.config.evenRowBGC =  'rgba(57,122,206,.1)'
                }else{
                    state.config.headerBGC =  '#333'
                    state.config.oddRowBGC =  '#888'
                    state.config.evenRowBGC =  '#999'
                }
            }

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

            return {

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

@@ -1,9 +1,9 @@
<template>
    <div class="charts-cont">
<!--        <div class="pro" :id="pro">-->
        <div class="pro" :id="pro">

<!--        </div>-->
        <dv-active-ring-chart :config="config" style="width:100%;height:100%" />
        </div>
<!--        <dv-active-ring-chart :config="config" style="width:100%;height:100%" />-->
    </div>
</template>

@@ -51,74 +51,74 @@
                    lineWidth: fontSize(25),
                    digitalFlopStyle: {
                        fontSize: 16,
                        fill: '#fff'
                        fill: '#999'
                    }
                }
            })
            // type EChartsOption = echarts.EChartsOption
            // // 隐患整改情况
            // const initPro =()=>{
            //     let dom = document.getElementById(pro.value);
            //     let myChart = echarts.init(dom);
            //
            //     let option: EChartsOption;
            //
            //     option = {
            //         tooltip: {
            //             trigger: 'item'
            //         },
            //         legend: {
            //             top: '0',
            //             left: 'center',
            //             textStyle:{
            //                 color: '#fff',
            //                 fontSize: fontSize(11)
            //             }
            //         },
            //         series: [
            //             {
            //                 name: 'Access From',
            //                 type: 'pie',
            //                 radius: ['45%', '70%'],
            //                 avoidLabelOverlap: false,
            //                 itemStyle: {
            //                     borderRadius: 4
            //                 },
            //                 label: {
            //                     show: true,
            //                     position: 'outer',
            //                     fontSize: fontSize(12),
            //                     color: '#ffffff',
            //                     textBorderWidth: 0,
            //                     width: 30,
            //                     overflow: 'break'
            //                 },
            //                 labelLine: {
            //                     show: true,
            //                     length: 10,
            //                     length2: 10
            //                 },
            //                 emphasis: {
            //                     label: {
            //                         show: true,
            //                         fontSize: fontSize(22),
            //                         fontWeight: 'bold'
            //                     }
            //                 },
            //                 data: [
            //                     { value: 1048, name: '持证人员' },
            //                     { value: 735, name: '非持证人员' }
            //                 ],
            //                 center: ['50%','55%']
            //             }
            //         ]
            //     };
            //
            //     option && myChart.setOption(option);
            //     window.addEventListener("resize",function (){
            //         myChart.resize();
            //     });
            // }
            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initPro =()=>{
                let dom = document.getElementById(pro.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '0',
                        left: 'center',
                        textStyle:{
                            color: '#999',
                            fontSize: fontSize(11)
                        }
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['45%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 4
                            },
                            label: {
                                show: true,
                                position: 'outer',
                                fontSize: fontSize(12),
                                color: '#999',
                                textBorderWidth: 0,
                                width: 30,
                                overflow: 'break'
                            },
                            labelLine: {
                                show: true,
                                length: 10,
                                length2: 10
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: fontSize(22),
                                    fontWeight: 'bold'
                                }
                            },
                            data: [
                                { value: 1048, name: '持证人员' },
                                { value: 735, name: '非持证人员' }
                            ],
                            center: ['50%','55%']
                        }
                    ]
                };

                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);
@@ -126,6 +126,7 @@

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

            return {

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

@@ -74,7 +74,7 @@
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
                        textStyle:{
                            color: '#fff',
                            color: 'auto',
                            fontSize: fontSize(12)
                        }
                    },
@@ -91,11 +91,11 @@
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#fff'
                                color: '#999'
                            }
                        },
                        axisLabel:{
                            color: '#fff'
                            color: '#999'
                        }
                    },
                    yAxis: {
@@ -107,7 +107,7 @@
                            }
                        },
                        axisLabel:{
                            color: '#ccc'
                            color: '#999'
                        },
                        splitLine:{
                            show: false
@@ -186,7 +186,7 @@
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
                        textStyle:{
                            color: '#fff',
                            color: 'auto',
                            fontSize: fontSize(12)
                        }
                    },
@@ -203,11 +203,11 @@
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#fff'
                                color: '#999'
                            }
                        },
                        axisLabel:{
                            color: '#fff'
                            color: '#999'
                        }
                    },
                    yAxis: {
@@ -219,7 +219,7 @@
                            }
                        },
                        axisLabel:{
                            color: '#ccc'
                            color: '#999'
                        },
                        splitLine:{
                            show: false

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

@@ -63,7 +63,7 @@
                        {
                            name: '消防耗材',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 2103, name: '消防耗材'},
                                { value: 2310, name: '消防耗材未使用'}
@@ -75,12 +75,12 @@
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                        color:'#999',
                                    },
                                }
                            },
@@ -115,7 +115,7 @@
                        {
                            name: '安全帽',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 23509, name: '安全帽'},
                                { value: 34312, name: '安全帽未使用'}
@@ -127,12 +127,12 @@
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                        color:'#999',
                                    },
                                }
                            },
@@ -167,7 +167,7 @@
                        {
                            name: '防护服',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 12830, name: '防护服'},
                                { value: 22140, name: '防护服未使用'}
@@ -179,12 +179,12 @@
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                        color:'#999',
                                    },
                                }
                            },
@@ -221,7 +221,7 @@
                        {
                            name: '劳保鞋',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 5492, name: '劳保鞋'},
                                { value: 10842, name: '劳保鞋未使用'}
@@ -233,12 +233,12 @@
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                        color:'#999',
                                    },
                                }
                            },
@@ -273,7 +273,7 @@
                        {
                            name: '动火护具',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 44043, name: '动火护具'},
                                { value: 68102, name: '动火护具未使用' }
@@ -285,12 +285,12 @@
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                        color:'#999',
                                    },
                                }
                            },
@@ -343,7 +343,7 @@
                        {
                            name: '急救包',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 8603, name: '急救包'},
                                { value: 12032, name: '急救包未使用'}
@@ -355,12 +355,12 @@
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                        color:'#999',
                                    },
                                }
                            },
@@ -397,7 +397,7 @@
                        {
                            name: '人员培训资料',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 8960, name: '人员培训资料'},
                                { value: 9890, name: '人员培训资料未使用'}
@@ -409,12 +409,12 @@
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                        color:'#999',
                                    },
                                }
                            },
@@ -451,7 +451,7 @@
                        {
                            name: '安全护具',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 12302, name: '安全护具'},
                                { value: 20130, name: '安全护具未使用'}
@@ -463,12 +463,12 @@
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                        color:'#999',
                                    },
                                }
                            },
@@ -505,7 +505,7 @@
                        {
                            name: '高空护具',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 42948, name: '高空护具'},
                                { value: 89342, name: '高空护具未使用'}
@@ -517,12 +517,12 @@
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                        color:'#999',
                                    },
                                }
                            },
@@ -559,7 +559,7 @@
                        {
                            name: '防尘护具',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 1220, name: '防尘护具'},
                                { value: 5034, name: '防尘护具未使用' }
@@ -571,12 +571,12 @@
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                        color:'#999',
                                    },
                                }
                            },
@@ -647,7 +647,7 @@
    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 4% 2% 2%;
        padding: 2%;
        position: relative;

        .stock{

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

@@ -111,7 +111,7 @@
                            }
                        },
                        axisLabel:{
                            color: '#ccc'
                            color: '#999'
                        },
                        splitLine:{
                            show: false
@@ -124,11 +124,11 @@
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#fff'
                                color: '#999'
                            }
                        },
                        axisLabel:{
                            color: '#fff'
                            color: '#999'
                        }
                    },
                    series: [
@@ -160,7 +160,7 @@
                            label:{
                                show: true,
                                position: 'outside',
                                color: '#fff',
                                color: '#999',
                                fontSize: fontSize(11)
                            }
                        }
@@ -204,7 +204,7 @@
                            }
                        },
                        axisLabel:{
                            color: '#ccc'
                            color: '#999'
                        },
                        splitLine:{
                            show: false
@@ -217,11 +217,11 @@
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#fff'
                                color: '#999'
                            }
                        },
                        axisLabel:{
                            color: '#fff'
                            color: '#999'
                        }
                    },
                    series: [
@@ -253,7 +253,7 @@
                            label:{
                                show: true,
                                position: 'outside',
                                color: '#fff',
                                color: '#999',
                                fontSize: fontSize(11)
                            }
                        }
@@ -297,7 +297,7 @@
                            }
                        },
                        axisLabel:{
                            color: '#ccc'
                            color: '#999'
                        },
                        splitLine:{
                            show: false
@@ -310,11 +310,11 @@
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#fff'
                                color: '#999'
                            }
                        },
                        axisLabel:{
                            color: '#fff'
                            color: '#999'
                        }
                    },
                    series: [
@@ -346,7 +346,7 @@
                            label:{
                                show: true,
                                position: 'outside',
                                color: '#fff',
                                color: '#999',
                                fontSize: fontSize(11)
                            }
                        }

 src/views/riskWarningSys/warningBigScreen/index.vue

@@ -1,22 +1,28 @@
<template>
    <div class="container">
    <div id="container" class="dark">
        <div class="header-content">
            <div class="logo">
                <img src="../../../assets/warningScreen/logo_dark.png" alt="" />
                <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/logo_dark.png" alt="" />
                <img v-else="!screenTheme.isDark" src="../../../assets/warningScreen/logo_light.png" alt="" />
            </div>
            <div class="title">风险预警预报平台</div>
            <div class="title-right">
<!--                <img src="themeStyle.skinIcon" class="qiehuan" @click="changeTheme" />-->
                <span class="datetime">{{currentTime}}</span>
                <div class="btns">
                    <div class="fullbtn" @click="onScreenfullClick">
                    <div class="themeBtn" @click="changeTheme()">
                        <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/skin.png"/>
                        <img v-else src="../../../assets/warningScreen/skin-light.png"/>
                    </div>
                    <div class="fullBtn" @click="onScreenfullClick">
                        <div class="toFull">
                            <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
                        </div>
                        <div>全屏</div>
                    </div>
                    <div class="backBtn" @click="goBack()">
                        <img src="../../../assets/loginPage/back-icon.png"/>
<!--                        <img src="../../../assets/loginPage/back-icon.png"/>-->
                        <el-icon><SwitchButton /></el-icon>
                        <div>退出</div>
                    </div>
                </div>
@@ -25,20 +31,22 @@
        <div class="main-content">
            <div class="main-left">
                <div class="left-top">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 事故等级分布</span>
                        <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">
<!--                        <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(1)"/>
                    </div>
                    <div class="chart-box">
                        <accident :size="1"></accident>
                        <accident :size="1" :theme="screenTheme.isDark"></accident>
                    </div>
                </div>
                <div class="left-mid">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 应急演练次数</span>
                        <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">
<!--                        <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(2)"/>
                    </div>
                    <div class="chart-box">
                        <span class="train-tip">距上次演练结束 5 天</span>
@@ -46,7 +54,7 @@
                    </div>
                </div>
                <div class="left-bottom">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 隐患等级数量分布</span>
                        <div>
@@ -58,7 +66,8 @@
                                        :value="item.value"
                                />
                            </el-select>
                            <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">
<!--                            <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>
@@ -69,7 +78,7 @@
            </div>
            <div class="main-middle">
                <div class="mid-top">
                    <dv-border-box-11 title="SPI数据分析" backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-11>
                    <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"
@@ -77,41 +86,46 @@
                                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">
<!--                        <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/>
                    </div>
                    <div class="chart-box">
                        <spi :size="1" :dep="spiValue"></spi>
                        <spi :size="1"></spi>
                    </div>
                </div>
                <div class="mid-bottom">
                    <div class="mid-bot-l">
                        <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                        <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                        <div class="part-tit">
                            <span>| 教育培训分析</span>
                            <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">
<!--                            <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">-->
                            <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(5)"/>
                        </div>
                        <div class="chart-box">
                            <educate :size="1"></educate>
                        </div>
                    </div>
                    <div class="mid-bot-m">
                        <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                        <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                        <div class="part-tit">
                            <span>| 隐患等级</span>
                            <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">
<!--                            <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">-->
                            <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(6)"/>
                        </div>
                        <div class="chart-box">
                            <danger :size="1"></danger>
                            <danger :size="1" :theme="screenTheme.isDark"></danger>
                        </div>
                    </div>
                    <div class="mid-bot-r">
                        <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                        <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                        <div class="part-tit">
                            <span>| 人员专业度分布</span>
                            <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">
<!--                            <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">-->
                            <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(7)"/>
                        </div>
                        <div class="chart-box">
                            <profession :size="1"></profession>
@@ -121,30 +135,32 @@
            </div>
            <div class="main-right">
                <div class="right-top">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 预警消息报告</span>
                        <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">
<!--                        <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(8)"/>
                    </div>
                    <div class="chart-box">
                        <message :size="1"></message>
                        <message :size="1" :theme="screenTheme.isDark"></message>
                    </div>
                </div>
                <div class="right-mid">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 特殊作业实时监控</span>
                        <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">
<!--                        <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(9)"/>
                    </div>
                    <div class="chart-box">
                        <monitor></monitor>
                    </div>
                </div>
                <div class="right-bottom">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 风险应急物资储备</span>
                        <img @click="jumpPage(10)" src="../../../assets/warningScreen/small-full.png">
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(10)"/>
                    </div>
                    <div class="chart-box">
                        <stock :size="1"></stock>
@@ -165,9 +181,14 @@
    import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
    import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
    import '/@/theme/bigScreen.css'
    import {useScreenTheme} from "/@/stores/screenTheme"
    import {storeToRefs} from "pinia";

    // 定义接口来定义对象的类型
    interface stateType {
        boxBg: string;
        boxColor: Array<string>;
        boxBigColor: Array<string>;
        isScreenfull: boolean;
        currentTime: string;
        month: number;
@@ -190,11 +211,17 @@
            stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
        },
        setup() {
            const screenThemes = useScreenTheme()
            const { screenTheme }  = storeToRefs(screenThemes);
            const router = useRouter();
            const props = {
                expandTrigger: 'hover',
                checkStrictly: true
            }
            const state = reactive<stateType>({
                boxBg: 'rgba(8, 109, 209, 0.2)',
                boxColor: [],
                boxBigColor: [],
                isScreenfull: false,
                currentTime: '',
                month: 0,
@@ -292,6 +319,7 @@
            // 页面载入时执行方法
            onMounted(() => {
                getTime()
                getTheme()
            });

            const getTime =()=>{
@@ -299,6 +327,37 @@
                    state.currentTime = new Date().toLocaleString();
                }, 1000);
            }

            const changeTheme = () =>{
                screenTheme.value.isDark = !screenTheme.value.isDark
                screenThemes.setScreenTheme(screenTheme.value.isDark)
                if(screenTheme.value.isDark){
                    document.getElementById('container').setAttribute( "class", 'dark' )
                    state.boxBg = 'rgba(8, 109, 209, 0.2)'
                    state.boxColor = []
                    state.boxBigColor = []
                }else{
                    document.getElementById('container').setAttribute( "class", 'light' )
                    state.boxBg = '#fff'
                    state.boxColor = ['#ccc','#333']
                    state.boxBigColor = ['#666','#fff']
                }
            }

            const getTheme =()=>{
                if(screenTheme.value.isDark){
                    window.document.getElementById('container').setAttribute( "class", 'dark' );
                    state.boxBg = 'rgba(8, 109, 209, 0.2)'
                    state.boxColor = []
                    state.boxBigColor = []
                }else{
                    window.document.getElementById('container').setAttribute( "class", 'light' );
                    state.boxBg = '#fff'
                    state.boxColor = ['#ccc','#333']
                    state.boxBigColor = ['#666','#fff']
                }
            }

            // 全屏
            const onScreenfullClick = () => {
                if (!screenfull.isEnabled) {
@@ -346,6 +405,8 @@
            return {
                router,
                props,
                screenTheme,
                changeTheme,
                onScreenfullClick,
                jumpPage,
                goBack,
@@ -357,8 +418,7 @@

<style scoped lang="scss">
    $homeNavLengh: 8;

    .container {
    .dark {
        width: 100%;
        height: 100%;
        display: flex;
@@ -420,14 +480,21 @@
                        margin-right: 20px;

                        img{
                            width: 16px;
                            height: auto;
                            width: 1rem;
                            height: 1rem;
                        }
                        div{
                            margin-left: 6px;
                        }
                    }
                    .fullbtn{
                    .themeBtn{
                        img{
                            width: 1.25rem;
                            height: 1.25rem;
                        }
                        cursor: pointer;
                    }
                    .fullBtn{
                        cursor: pointer;
                    }
                    .backBtn{
@@ -438,8 +505,8 @@
        }
        .main-content{
            width: 100%;
            height: 100%;
            padding: 0 25px 25px;
            height: calc(100vh - 72px);
            padding: 0.4rem 1.5rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
@@ -468,7 +535,7 @@
                    }

                    .dv-border-box-11{
                        :deep(.dv-border-svg-container){
                        ::v-deep(.dv-border-svg-container){
                                .dv-border-box-11-title{
                                    font-size: 1.5rem;
                                    fill: #11feee !important;
@@ -577,6 +644,304 @@
                        }

                        img{
                            width: 1.2rem;
                            height: 1.2rem;
                            cursor: pointer;
                        }
                    }
                    .chart-box{
                        width: 100%;
                        height: calc(100% - 20px);
                        margin-top: 20px;
                        .train-tip{
                            display: block;
                            font-size: 0.8rem;
                            margin-top: 5%;
                            margin-left: 2%;
                            color: #fff;
                        }
                        accident{
                            width: 100%;
                            height: 100%;
                        }

                        training{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            .main-left{
                width: calc(25% - 5px);
                &>div{
                    width: 100%;
                    height: calc((100%/3) - (20px/3));
                }
            }
            .main-middle{
                width: calc(50% - 10px);

                .mid-top{
                    width: 100%;
                    height: calc((200% - 40px)/3 + 10px);
                }

                .mid-bottom{
                    display: flex;
                    width: 100%;
                    height: calc((100%/3) - (20px/3));
                    justify-content: space-between;
                    padding: 0;
                    background: none;
                    border-radius: 0;

                    &>div {
                        position: relative;
                        width: calc((100% - 20px)/3);
                        border-radius: 8px;
                        overflow: hidden;
                        padding: 10px 15px;
                        box-sizing: border-box;
                    }
                }
            }
            .main-right{
                width: calc(25% - 5px);
                &>div{
                    width: 100%;
                    height: calc((100%/3) - (20px/3));
                }
            }
        }
    }
    .light {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: url('../../../assets/warningScreen/riskprocast-light.jpg') no-repeat center;
        background-size: 100% 100%;
        color: #000;

        .header-content {
            width: 100%;
            height: 72px;
            padding: 0 20px;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            z-index: 9;

            .logo {
                width: 27%;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    height: 35px;
                    width: 128px;
                }
            }
            .title {
                width: 46%;
                font-size: 2rem;
                font-weight: bolder;
                line-height: 72px;
                text-align: center;
                letter-spacing: 2px;
            }

            .title-right {
                width: 27%;
                height: 90px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-size: 1rem;
                padding-left: 30px;

                .datetime {
                    color: #000;
                }
                .btns{
                    display: flex;
                    align-items: center;

                    &>div{
                        display: flex;
                        align-items: center;
                        font-size: 1rem;
                        margin-right: 20px;

                        img{
                            width: 1rem;
                            height: 1rem;
                        }
                        div{
                            margin-left: 6px;
                        }
                    }
                    .themeBtn{
                        img{
                            width: 1.25rem;
                            height: 1.25rem;
                        }
                        cursor: pointer;
                    }
                    .fullBtn{
                        cursor: pointer;
                    }
                    .backBtn{
                        cursor: pointer;
                    }
                }
            }
        }
        .main-content{
            width: 100%;
            height: calc(100vh - 72px);
            padding: 0.4rem 1.5rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>div{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                &>div{
                    padding: 20px 15px 10px;
                    box-sizing: border-box;
                    position: relative;
                    .box-bg{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        color: #000;
                        font-weight: bolder;
                    }

                    .dv-border-box-11{
                        :deep(.dv-border-svg-container){
                                .dv-border-box-11-title{
                                    font-size: 1.5rem;
                                    fill: #000 !important;
                                }
                        }
                    }
                    .part-tit{
                        position: absolute;
                        top: 20px;
                        left: 0;
                        height: 20px;
                        width: 100%;
                        padding: 0 15px;
                        display: flex;
                        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{
                            width: 1.20rem;
                            height: 1.20rem;
                            cursor: pointer;
@@ -591,6 +956,7 @@
                            font-size: 0.8rem;
                            margin-top: 5%;
                            margin-left: 2%;
                            color: #333;
                        }
                        accident{
                            width: 100%;

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

@@ -1,8 +1,13 @@
<template>
  <div class="com-page">
    <div class="btns" @click="goBack()">
      返回首页
  <div id="pageCont" class="dark-page">
    <div class="btns">
      <dv-decoration-11 :color="lineColor" @click="goBack()">
        <div color-green font-600 bg="~ dark/0">
          返回
    </div>
      </dv-decoration-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>
@@ -20,7 +25,7 @@
        <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>
        <spi v-else-if="curChart===4" :size="2.5"></spi>
        <spi v-else-if="curChart===4" :size="2"></spi>
        <educate v-else-if="curChart===5" :size="2.5"></educate>
        <danger v-else-if="curChart===6" :size="2.5"></danger>
        <profession v-else-if="curChart===7" :size="2.5"></profession>
@@ -29,13 +34,32 @@
        <stock v-else class="main-chart" :size="2"></stock>
      </div>
      <div class="chart-right">
        <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <div class="">

          <div class="des-tit">
            <div v-if="curChart===1">2022年度事故等级分布与影响一览</div>
            <div v-else-if="curChart===2">应急演练概况</div>
            <div v-else-if="curChart===3">隐患影响等级分布详情</div>
            <div v-else-if="curChart===4">2022年度事企业SPI趋势</div>
            <div v-else-if="curChart===5">教育培训情况汇总</div>
            <div v-else-if="curChart===6">隐患等级分布与隐患整改率</div>
            <div v-else-if="curChart===7">人员持证上岗情况</div>
            <div v-else-if="curChart===8">预警消息SPI报告-2022年8月</div>
            <div v-else-if="curChart===9">监控列表</div>
            <div v-else>当前应急物资储备情况（总）</div>
            <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
          </div>
          <div class="des-main">
            <div v-for="(item,index) in accidentDesc" :key="index">
              <h4><span>{{item.title}}</span>共计：<span>{{item.total}}</span>起</h4>
              <h4>
                事故影响
              </h4>
              <p>{{item.desc}}</p>
          </div>
        </div>
        <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
        </div>
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
      </div>
    </div>
  </div>
@@ -51,13 +75,17 @@
  import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
  import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {
    isScreenfull: boolean;
    curChart: number | null;
    month: number;
    optionList: Array<any>
    optionList: Array<any>;
    lineColor: Array<string>;
    accidentDesc: Array<any>;
  }
  export default defineComponent({
    name: 'warningPage',
@@ -74,11 +102,14 @@
      stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
    },
    setup() {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const route = useRoute();
      const state = reactive<stateType>({
        isScreenfull: false,
        curChart: null,
        month: 0,
        lineColor: ['#11FEEE'],
        optionList: [
          {
            label: '年度',
@@ -124,6 +155,33 @@
            label: '十月',
            value: 10
          }
        ],
        accidentDesc:[
          {
            title: '特别重大事故',
            total: 10,
            desc: '死亡人数：0人； 重伤人数：2人； 轻伤人数：3人； 直接经济损失：180.61万元'
          },
          {
            title: '重大事故',
            total: 20,
            desc: '死亡人数：1人； 重伤人数：6人； 轻伤人数：0人； 直接经济损失：160.61万元'
          },
          {
            title: '较大事故',
            total: 100,
            desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：3人； 直接经济损失：190.61万元'
          },
          {
            title: '一般事故',
            total: 130,
            desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：180.61万元'
          },
          {
            title: '未遂事故',
            total: 150,
            desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：9万元'
          }
        ]
      });

@@ -132,6 +190,7 @@
        if (route.query.num) {
          state.curChart = Number(route.query.num)
        }
        getTheme()
      });


@@ -150,7 +209,15 @@
          }
        });
      };

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('pageCont').setAttribute( "class", 'light-page' );
          state.lineColor = ['#333','#ccc']
        }
      }
      // 返回上一页
      const goBack = () => {
        window.history.go(-1);
@@ -168,7 +235,7 @@
</script>

<style scoped lang="scss">
  .com-page{
  .dark-page{
    width: 100%;
    height: 100%;
    border:1px #5a5959 solid;
@@ -176,13 +243,11 @@
    padding: 4%;
    .btns{
      position: fixed;
      width: 8%;
      height: 6%;
      right: 5%;
      top: 20px;
      top: 1.25rem;
      font-size: 1.125rem;
      padding: 10px 15px;
      box-sizing: border-box;
      border: 1px solid rgb(0, 208, 206);
      border-radius: 10px;
      color: rgb(17, 254, 238);
      cursor: pointer;
    }
@@ -261,6 +326,188 @@
          height: 90%;
          background: url("../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
          background-size: 100% 100%;
          padding: 4%;

          .des-tit{
            width: 100%;
            &>div{
              font-size: 1.5rem;
              height: 2.2rem;
              line-height: 2.2rem;
              text-align: center;
              font-weight: bolder;
              color: #11FEEE;
            }
          }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 0 2%;
            overflow: auto;
            color: #11FEEE;

            &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

            &>div{
              margin-bottom: 2rem;
              &>h4{
                font-size: 1.25rem;
                display: flex;
                align-items: center;

                span{
                  margin-right: 10px;
                }
                &:first-of-type{
                  margin-bottom: 10px;
                }
              }

              &>p{
                font-size: 1rem;
                margin-top: 10px;
              }
            }
          }
        }
      }

    }
  }
  .light-page{
    width: 100%;
    height: 100%;
    border:1px #5a5959 solid;
    background: #F0F0F0;
    padding: 4%;
    .btns{
      position: fixed;
      width: 8%;
      height: 6%;
      right: 5%;
      top: 1.25rem;
      font-size: 1.125rem;
      color: #333;
      cursor: pointer;
    }
    .tit{
      width: 100%;
      height: 122px;
      background: url("../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
      background-size: 100% 100%;


      .title{
        width: 100%;
        height: 122px;
        line-height: 112px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 2.8rem;
        color: #333;
        font-weight: bolder;
        text-align: center;
        letter-spacing: 5px;
      }
    }

    .chart-cont{
      width: 100%;
      padding: 20px;
      height: calc(100% - 122px);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .chart{
        width: calc((100% - 20px) * 0.63);
        height: 100%;
        padding: 3%;
        background: url("../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
        background-size: 100% 100%;
        position: relative;
        .selector-2{
          position: absolute;
          top: 5%;
          right: 10%;
          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%;
          height: 100%;
        }
      }
      .chart-right{
        width: calc((100% - 20px) * 0.37);
        height: 100%;
        .charts-des{
          height: 90%;
          background: url("../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
          background-size: 100% 100%;
          padding: 4%;

          .des-tit{
            width: 100%;
            &>div{
              font-size: 1.5rem;
              height: 2.2rem;
              line-height: 2.2rem;
              text-align: center;
              font-weight: bolder;
              color: #333;
            }
          }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 0 2%;
            overflow: auto;
            color: #333;

            &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

            &>div{
              margin-bottom: 2rem;
              &>h4{
                font-size: 1.25rem;
                display: flex;
                align-items: center;

                span{
                  margin-right: 10px;
                }
                &:first-of-type{
                  margin-bottom: 10px;
                }
              }

              &>p{
                font-size: 1rem;
                margin-top: 10px;
              }
            }
          }
        }
      }


 src/views/specialWorkSystem/workTicket/workApply/components/fire.vue

@@ -65,6 +65,14 @@
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="危害辨识" prop="hazardIdentification">
                        <el-input
                                v-model="form.hazardIdentification"
                                placeholder="请输入危害辨识"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
                <el-divider border-style="dashed"/>
            <el-row>
@@ -132,6 +140,7 @@
                    workLevel: null,
                    workContent: '',
                    workLocation: '',
                    hazardIdentification: '',
                    workDetail:{
                        hotMethod: '',
                        otherSpecialWork: []
@@ -206,6 +215,7 @@
                workLevel: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                "workDetail.hotMethod": [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
            });