Default Changelist

Admin

2022-09-02 0d69019484ae3654579577d06871075b8a389159

Default Changelist

 package.json

@@ -11,6 +11,7 @@
    },
    "dependencies": {
        "@element-plus/icons-vue": "^2.0.6",
        "@kjgl77/datav-vue3": "^1.2.1",
        "@wangeditor/editor": "^5.1.14",
        "axios": "^0.27.2",
        "countup.js": "^2.2.0",

 src/App.vue

@@ -7,7 +7,7 @@
    <!--    <router-view v-if="!$route.meta.iskeepAlive" v-slot="{ Component }">-->
    <!--        <transition name="fade" mode="in-out">-->
    <!--            <keep-alive :exclude="excludeList" :include="includeList">-->
    <!--                <component :is="Component" :key="$route.id"></component>-->
    <!--                <components :is="Component" :key="$route.id"></components>-->
    <!--            </keep-alive>-->
    <!--        </transition>-->
    <!--    </router-view>-->

 src/assets/warningScreen/small-full.png

 src/main.ts

@@ -13,6 +13,7 @@
import mitt from 'mitt';
import VueGridLayout from 'vue-grid-layout';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import DataVVue3 from '@kjgl77/datav-vue3'

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -21,6 +22,6 @@
directive(app);
other.elSvg(app);

app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t, locale: zhCn }).use(i18n).use(VueGridLayout).mount('#app');
app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t, locale: zhCn }).use(i18n).use(DataVVue3).use(VueGridLayout).mount('#app');

app.config.globalProperties.mittBus = mitt();

 src/theme/bigScreen.css

@@ -1,18 +1,22 @@
html{font-size:12px; font-size:62.5%; /* 10÷16=62.5% */}
@media screen and (max-width: 1920px) {
    body { font-size: 16px;}
    html { font-size: 100%;}
}
@media screen and (max-width: 1336px) {
    html { font-size: 80%;}
}
@media screen and (max-width: 1200px) {
    body { font-size: 14px;}
    html { font-size: 62.5%;}
}
@media screen and (max-width: 1000px) {
    body { font-size: 12px;}
    html { font-size: 10px;}
}
@media screen and (max-width: 800px) {
    body { font-size: 8px;}
    html { font-size: 8px;}
}
@media screen and (max-width: 700px) {
    body { font-size: 7px;}
    html { font-size: 7px;}
}
@media screen and (max-width: 600px) {
    body { font-size: 6px;}
}
    html { font-size: 6px;}
}

 src/views/newHome/index.vue

@@ -328,7 +328,7 @@
        // 去风险大屏
        const toRiskPlatform = () => {
            // router.push({
            //     name: "bigDataScreen"
            //     name: "warningScreen"
            // });
            window.open('http://39.104.85.193:8585/');
        };

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

对比新文件
@@ -0,0 +1,276 @@
<template>
    <div class="charts-cont">
        <div class="spi" :id="spi">

        </div>
    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'

    interface stateType {
    }
    export default defineComponent({
        name: 'accident',
        components: {},
        props:{
            size: Number,
            dep: Number
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const spi = ref("eChartSpi" + Date.now() + Math.random())
            const state = reactive<stateType>({

            })
            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initSpi =()=>{
                let dom = document.getElementById(spi.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    legend: {
                        data: ['注意线', '警告线', '危险线', 'SPI预警指数值'],
                        top: '0',
                        left: 'center',
                        textStyle:{
                            color: '#fff',
                            fontSize: fontSize(12)
                        }
                    },
                    grid: {
                        left: '4%',
                        right: '4%',
                        bottom: '5%',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                            axisLine:{
                                show: true,
                                lineStyle:{
                                    color: '#fff'
                                }
                            },
                            splitLine:{
                                show: true,
                                lineStyle:{
                                    type: 'dashed',
                                    color: 'rgba(255,255,255,.4)'
                                }
                            },
                            axisLabel:{
                                color: '#fff'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine:{
                                show: true,
                                lineStyle:{
                                    type: 'dotted'
                                }
                            },
                            axisLabel:{
                                color: '#ccc'
                            },
                            splitLine:{
                                show: true,
                                lineStyle:{
                                    type: 'dashed',
                                    color: 'rgba(255,255,255,.4)'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '注意线',
                            data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
                            type: 'line',
                            lineStyle:{
                                width: 0
                            },
                            areaStyle: {
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "rgba(147,208,81)", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
                                        },
                                    ]
                                },
                            },
                            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',
                            smooth: true
                        },
                        {
                            name: 'SPI预警指数值',
                            data: [450, 632, 501, 434, 390, 530, 520,750, 632, 401, 634, 590],
                            type: 'line',
                            label:{
                                show: true,
                                color: '#fff',
                                fontSize: fontSize(12)
                            },
                            lineStyle:{
                                width: 2,
                                color: '#23E5E5'
                            },
                            itemStyle:{
                                color: '#23E5E5',
                                borderColor: '#fff',
                                borderWidth: 4
                            },
                            smooth: true
                        }
                    ]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
            }
            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }

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

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

<style scoped lang="scss">
    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 5%;
        position: relative;

        .spi{
            width: 100%;
            height: 100%;
        }
    }
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-input{
            width: 100% !important;
        }
        .el-date-editor::v-deep{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-cascader{
            width: 100% !important;
        }
    }
</style>

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

对比新文件
@@ -0,0 +1,275 @@
<template>
    <div class="charts-cont">
        <div class="choose">
            <div :class="cur===1?'act':''" @click="changeTab(1)">月度</div>
            <div :class="cur===2?'act':''" @click="changeTab(2)">年度</div>
        </div>
        <div v-show="cur===1" class="month" :id="accidentMonth"></div>
        <div v-show="cur===2" class="month" :id="accidentYear"></div>
    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from "echarts";
    import '/@/theme/bigScreen.css'


    interface stateType {
        cur: number
    }
    export default defineComponent({
        name: 'accident',
        components: {},
        props:{
            size: Number
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const accidentMonth = ref("eChartFix" + Date.now() + Math.random())
            const accidentYear = ref("eChartFix" + Date.now() + Math.random())
            const state = reactive<stateType>({
                cur: 1
            })

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

                let option: EChartsOption;

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

                option && myChart.setOption(option);

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

                let option: EChartsOption;

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

                option && myChart.setOption(option);

                window.addEventListener("resize",function (){
                    myChart.resize();
                });
            }


            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }

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

            onUnmounted(() =>{
            })

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

<style scoped lang="scss">
    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 5%;
        position: relative;

        .choose{
            position: absolute;
            right: 5%;
            bottom: 20px;
            z-index: 999;
            display: flex;
            align-items: center;
            font-size: 0.75rem;
            justify-content: space-between;

            div{
                padding: 2px 6px;
                box-sizing: border-box;
                color: rgba(17,254,238,.4);
                border: 1px solid rgba(17,254,238,.4);
                border-radius: 2px;
                cursor: pointer;
            }
            div:hover{
                color: #11FEEE;
                border: 1px solid #11FEEE;
            }
            .act{
                color: #11FEEE;
                border: 1px solid #11FEEE;
            }
        }
        .month{
            width: 100%;
            height: 100%;
        }
    }
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-input{
            width: 100% !important;
        }
        .el-date-editor::v-deep{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-cascader{
            width: 100% !important;
        }
    }
</style>

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

对比新文件
@@ -0,0 +1,265 @@
<template>
    <div class="charts-cont">
<!--        <el-select v-model="selected" class="choose" size="small">-->
<!--            <el-option label="月度" value="1"/>-->
<!--            <el-option label="年度" value="2"/>-->
<!--        </el-select>-->
        <div class="choose">
            <div :class="cur===1?'act':''" @click="changeTab(1)">企业</div>
            <div :class="cur===2?'act':''" @click="changeTab(2)">部门</div>
        </div>
        <div v-show="cur===1" class="month" :id="dangerMonth"></div>
        <div v-show="cur===2" class="year" :id="dangerYear"></div>
    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from "echarts";
    import '/@/theme/bigScreen.css'


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

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

                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    color: ['#FAC858','#EE6666'],
                    legend: {
                        top: '0',
                        left: 'center',
                        textStyle:{
                            color: '#fff',
                            fontSize: fontSize(11)
                        }
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '65%',
                            avoidLabelOverlap: true,
                            label: {
                                show: true,
                                position: 'inside',
                                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: 235, name: '一般隐患' },
                                { value: 1048, name: '重大隐患' }
                            ],
                            center: ['50%','55%']
                        }
                    ]
                };

                option && myChart.setOption(option);

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

                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    color: ['#FAC858','#EE6666'],
                    legend: {
                        top: '10%',
                        left: 'center',
                        textStyle:{
                            color: '#fff',
                            fontSize: fontSize(11)
                        }
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '65%',
                            avoidLabelOverlap: true,
                            label: {
                                show: true,
                                position: 'inside',
                                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: 35, name: '一般隐患' },
                                { value: 1048, name: '重大隐患' }
                            ],
                            center: ['50%','60%']
                        }
                    ]
                };

                option && myChart.setOption(option);

                window.addEventListener("resize",function (){
                    myChart.resize();
                });
            }
            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }
            // 页面载入时执行方法
            onMounted(() => {
                initdangerByMonth();
            });

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

<style scoped lang="scss">
    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 5% 2% 0;
        position: relative;

        .choose{
            position: absolute;
            right: 5%;
            bottom: 20px;
            z-index: 999;
            display: flex;
            align-items: center;
            font-size: 0.75rem;
            justify-content: space-between;

            div{
                padding: 2px 6px;
                box-sizing: border-box;
                color: rgba(17,254,238,.4);
                border: 1px solid rgba(17,254,238,.4);
                border-radius: 2px;
                cursor: pointer;
            }
            div:hover{
                color: #11FEEE;
                border: 1px solid #11FEEE;
            }
            .act{
                color: #11FEEE;
                border: 1px solid #11FEEE;
            }
        }
        .month{
            width: 100%;
            height: 100%;
        }
        .year{
            width: 100%;
            height: 100%;
        }
    }
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-input{
            width: 100% !important;
        }
        .el-date-editor::v-deep{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-cascader{
            width: 100% !important;
        }
    }
</style>

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

对比新文件
@@ -0,0 +1,178 @@
<template>
    <div class="charts-cont">
        <div class="educate" :id="educate">

        </div>
    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'


    interface stateType {
    }
    export default defineComponent({
        name: 'risk',
        components: {},
        props:{
            size: Number
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const educate = ref("eChartEdu" + Date.now() + Math.random())
            const state = reactive<stateType>({

            })
            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initEducate =()=>{
                let dom = document.getElementById(educate.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
                    legend: {
                        top: '5%',
                        left: 'center',
                        textStyle:{
                            color: '#fff',
                            fontSize: fontSize(11)
                        }
                    },
                    radar: [
                        {
                            indicator: [
                                { text: '设计培训次数' },
                                { text: '培训时间（小时）' },
                                { text: '完成比例（%）' }
                            ],
                            center: ['50%', '60%'],
                            radius: fontSize(60),
                            startAngle: 90,
                            splitNumber: 4,
                            shape: 'circle',
                            axisName: {
                                formatter: '{value}',
                                color: '#428BD4',
                                fontSize: fontSize(10),
                                width: 20,
                                overflow: 'break'
                            },
                            splitArea: {
                                areaStyle: {
                                    color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 10
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(211, 253, 250, 0.8)'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(211, 253, 250, 0.8)'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'radar',
                            emphasis: {
                                lineStyle: {
                                    width: 4
                                }
                            },
                            data: [
                                {
                                    value: [100, 8, 0.4, -80, 2000],
                                    name: '企业汇总'
                                },
                                {
                                    value: [60, 5, 0.3, -100, 1500],
                                    name: '事业部A',
                                    areaStyle: {
                                        color: 'rgba(255, 228, 52, 0.6)'
                                    }
                                }
                            ]
                        },
                    ]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
            }
            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }

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

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

<style scoped lang="scss">
    .charts-cont{
        width: 100%;
        height: 100%;
        position: relative;

        .educate{
            width: 100%;
            height: 100%;
        }
    }
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-input{
            width: 100% !important;
        }
        .el-date-editor::v-deep{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-cascader{
            width: 100% !important;
        }
    }
</style>

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

对比新文件
@@ -0,0 +1,185 @@
<template>
    <div class="charts-cont">
        <div class="message">
            <dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" />
        </div>
    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'


    interface stateType {
    }
    export default defineComponent({
        name: 'profession',
        components: {},
        props:{
            size: Number
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const pro = ref("eChartPro" + Date.now() + Math.random())
            const state = reactive<stateType>({
                config:{
                    header: ['消息列表', '同比'],
                    data: [
                        ['一月预警消息SPI报告', '↑ 94%'],
                        ['二月预警消息SPI报告', '↑ 94%'],
                        ['三月预警消息SPI报告', '↑ 94%'],
                        ['四月预警消息SPI报告', '↑ 94%'],
                        ['五月预警消息SPI报告', '↑ 94%'],
                        ['六月预警消息SPI报告', '↑ 94%'],
                        ['七月预警消息SPI报告', '↑ 94%'],
                        ['八月预警消息SPI报告', '↑ 94%'],
                        ['九月预警消息SPI报告', '↑ 94%'],
                        ['十月预警消息SPI报告', '↑ 94%'],
                        ['十一月预警消息SPI报告', '↑ 94%'],
                        ['十二月预警消息SPI报告', '↑ 94%']
                    ],
                    index: true,
                    columnWidth: [60, 220],
                    align: ['center','center','center'],
                    headerBGC: '#0049af',
                    oddRowBGC: 'none',
                    evenRowBGC: 'rgba(57,122,206,.1)',
                    indexHeader: '序号',
                    rowNum: fontSize(5)
                }
            })

            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);
            }

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

            return {
                pro,
                Search,
                mouseoverHandler,
                clickHandler,
                fontSize,
                ...toRefs(state)
            };
        },
    });
</script>
<style scoped lang="scss">

    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 5%;
        position: relative;

        .message{
            width: 100%;
            height: 100%;
            border-radius: 4px;
            overflow: hidden;

            .th{
                width: 100%;
                display: flex;
                height: 36px;
                justify-content: space-between;
                background: #1882d5;
                font-size: 1rem;
                line-height: 36px;
                color: #ffffff;
                .th-num{
                    width: 15%;
                    text-align: center;
                }
                .th-info{
                    width: 70%;
                    text-align: left;
                    color: #11FEEE
                }
                .th-sum{
                    width: 15%;
                    text-align: center;
                }
            }

            .tm{
                height: calc(100% - 36px);
                width: 100%;
                overflow: hidden;
                scroll-behavior: smooth;

                .ti{
                    display: flex;
                    height: 40px;
                    line-height: 40px;
                    justify-content: space-between;
                    color: #ffffff;

                    .num{
                        width: 15%;
                        text-align: center;
                    }
                    .info{
                        width: 70%;
                        text-align: left;
                        color: #11FEEE
                    }
                    .sum{
                        width: 15%;
                        text-align: center;
                    }
                }
                .darkBg{
                    background: rgba(57,122,206,.4);
                }
            }
        }
    }
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-input{
            width: 100% !important;
        }
        .el-date-editor::v-deep{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-cascader{
            width: 100% !important;
        }
    }
</style>

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

对比新文件
@@ -0,0 +1,104 @@
<template>
    <div class="charts-cont">
        <div class="monitor" :id="monitor">
            <div>
                <img src="../../../../assets/loginPage/watersys.JPG">
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'


    interface stateType {
    }
    export default defineComponent({
        name: 'monitor',
        components: {},
        props:['allData'],
        setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const monitor = ref("eChartMon" + Date.now() + Math.random())
            const state = reactive<stateType>({

            })



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

            return {
                monitor,
                Search,
                ...toRefs(state)
            };
        },
    });
</script>

<style scoped lang="scss">
    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 5%;
        position: relative;

        .monitor{
            width: 100%;
            height: 100%;
            position: relative;
            border-radius: 8px;
            overflow: hidden;

            img{
                display: block;
                width: 100%;
                height: auto;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
            }
        }
    }
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-input{
            width: 100% !important;
        }
        .el-date-editor::v-deep{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-cascader{
            width: 100% !important;
        }
    }
</style>

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

对比新文件
@@ -0,0 +1,176 @@
<template>
    <div class="charts-cont">
<!--        <div class="pro" :id="pro">-->

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

<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'


    interface stateType {
    }
    export default defineComponent({
        name: 'profession',
        components: {},
        props:{
            size: Number
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const pro = ref("eChartPro" + Date.now() + Math.random())
            const state = reactive<stateType>({
                config:{
                    data: [
                        {
                            name: '持证人员',
                            value: 55
                        },
                        {
                            name: '非持证人员',
                            value: 120
                        }
                    ],
                    radius: '65%',
                    activeRadius: '60%',
                    color: ['#FAC858','#EE6666'],
                    lineWidth: fontSize(25),
                    digitalFlopStyle: {
                        fontSize: 16,
                        fill: '#fff'
                    }
                }
            })
            // 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();
            //     });
            // }
            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }

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

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

<style scoped lang="scss">
    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 4% 4% 0;
        position: relative;

        .pro{
            width: 100%;
            height: 100%;
        }
    }
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-input{
            width: 100% !important;
        }
        .el-date-editor::v-deep{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-cascader{
            width: 100% !important;
        }
    }
</style>

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

对比新文件
@@ -0,0 +1,337 @@
<template>
    <div class="charts-cont">
        <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 { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'


    interface stateType {
        curValue: boolean
    }
    export default defineComponent({
        name: 'risk',
        components: {},
        props:{
            size: Number,
            month: Number
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
            const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
            const state = reactive<stateType>({
                curValue: true
            })

            const swi = setInterval(()=>{
                state.curValue = !state.curValue
                if(state.curValue == true){
                    nextTick(()=>{
                        initRisk1()
                    })
                }else{
                    nextTick(()=>{
                        initRisk2()
                    })
                }

            },5000)

            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initRisk1 =()=>{
                let dom = document.getElementById(risk1.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {
                        top: '1%',
                        left: 'center',
                        textStyle:{
                            color: '#fff',
                            fontSize: fontSize(12)
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '4%',
                        bottom: '0',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        data: ['企业总', 'A部门', 'B部门', 'C部门', 'D部门', 'E部门'],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#fff'
                            }
                        },
                        axisLabel:{
                            color: '#fff'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine:{
                            show: true,
                            lineStyle:{
                                type: 'dotted'
                            }
                        },
                        axisLabel:{
                            color: '#ccc'
                        },
                        splitLine:{
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '可能造成死亡的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
                            data: [320, 302, 301, 334, 390, 330],
                            barCategoryGap: '50%'
                        },
                        {
                            name: '可能造成重伤的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
                            data: [120, 132, 101, 134, 90, 230],
                            barCategoryGap: '50%'
                        },
                        {
                            name: '可能造成轻伤的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
                            data: [220, 182, 191, 234, 290, 330],
                            barCategoryGap: '50%'
                        }
                    ]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(risk2.value)).dispose()
            }

            const initRisk2 =()=>{
                let dom = document.getElementById(risk2.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {
                        top: '1%',
                        left: 'center',
                        textStyle:{
                            color: '#fff',
                            fontSize: fontSize(12)
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '4%',
                        bottom: '0',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#fff'
                            }
                        },
                        axisLabel:{
                            color: '#fff'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine:{
                            show: true,
                            lineStyle:{
                                type: 'dotted'
                            }
                        },
                        axisLabel:{
                            color: '#ccc'
                        },
                        splitLine:{
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '可能造成死亡的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
                            data: [320, 301, 334, 390, 330, 320],
                            barCategoryGap: '50%'
                        },
                        {
                            name: '可能造成重伤的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
                            data: [90, 230, 210, 132, 101, 134],
                            barCategoryGap: '50%'
                        },
                        {
                            name: '可能造成轻伤的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
                            data: [290, 330, 310, 191, 234, 290],
                            barCategoryGap: '50%'
                        }
                    ]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(risk1.value)).dispose()
            }

            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }

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

            onBeforeUnmount(() =>{
                clearInterval(swi)
            })

            return {
                risk1,
                risk2,
                Search,
                fontSize,
                ...toRefs(state)
            };
        },
    });
</script>

<style scoped lang="scss">
    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 5% 5% 2%;
        position: relative;

        .risk{
            width: 100%;
            height: 100%;
        }
    }
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-input{
            width: 100% !important;
        }
        .el-date-editor::v-deep{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-cascader{
            width: 100% !important;
        }
    }
</style>

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

对比新文件
@@ -0,0 +1,681 @@
<template>
    <div class="charts-cont">
        <div v-show="curValue===true" class="stock" :id="stock1">

        </div>
        <div v-show="curValue===false" class="stock" :id="stock2"></div>
    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'

    interface stateType {
        curValue: boolean
    }
    export default defineComponent({
        name: 'stock',
        components: {},
        props:{
            size: Number
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const stock1 = ref("eChartStock1" + Date.now() + Math.random())
            const stock2 = ref("eChartStock2" + Date.now() + Math.random())
            const state = reactive<stateType>({
                curValue: true
            })

            const swit = setInterval(()=>{
                state.curValue = !state.curValue
                if(state.curValue == true){
                    nextTick(()=>{
                        initStock1()
                    })
                }else{
                    nextTick(()=>{
                        initStock2()
                    })
                }
            },5000)
            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initStock1 =()=>{
                let dom = document.getElementById(stock1.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    series: [
                        {
                            name: '消防耗材',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            data: [
                                { value: 2103, name: '消防耗材'},
                                { value: 2310, name: '消防耗材未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|2103}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#2D74C0" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#21D9DC" // 100% 处的颜色
                                    }]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }]
                                }
                            ],
                            center: ['20%','25%']
                        },
                        {
                            name: '安全帽',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            data: [
                                { value: 23509, name: '安全帽'},
                                { value: 34312, name: '安全帽未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|23509}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#0DAA2E" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#4CF475" // 100% 处的颜色
                                    }]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }]
                                }
                            ],
                            center: ['50%','25%']
                        },
                        {
                            name: '防护服',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            data: [
                                { value: 12830, name: '防护服'},
                                { value: 22140, name: '防护服未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|12830}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#E8B21D" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#E5DC44" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['80%','25%']
                        },
                        {
                            name: '劳保鞋',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            data: [
                                { value: 5492, name: '劳保鞋'},
                                { value: 10842, name: '劳保鞋未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|5492}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#D65146" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#F58C28" // 100% 处的颜色
                                    }]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }]
                                }
                            ],
                            center: ['33.33%','75%']
                        },
                        {
                            name: '动火护具',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            data: [
                                { value: 44043, name: '动火护具'},
                                { value: 68102, name: '动火护具未使用' }
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|44043}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#4449D1" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#A86DE5" // 100% 处的颜色
                                    }]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }]
                                }
                            ],
                            center: ['66.66%','75%']
                        }
                    ],
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(stock2.value)).dispose()
            }

            const initStock2 =()=>{
                let dom = document.getElementById(stock2.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    series: [
                        {
                            name: '急救包',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            data: [
                                { value: 8603, name: '急救包'},
                                { value: 12032, name: '急救包未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|8603}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#2D74C0" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#21D9DC" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['20%','25%']
                        },
                        {
                            name: '人员培训资料',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            data: [
                                { value: 8960, name: '人员培训资料'},
                                { value: 9890, name: '人员培训资料未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|8960}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#0DAA2E" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#4CF475" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['50%','25%']
                        },
                        {
                            name: '安全护具',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            data: [
                                { value: 12302, name: '安全护具'},
                                { value: 20130, name: '安全护具未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|12302}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#E8B21D" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#E5DC44" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['80%','25%']
                        },
                        {
                            name: '高空护具',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            data: [
                                { value: 42948, name: '高空护具'},
                                { value: 89342, name: '高空护具未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|42948}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#D65146" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#F58C28" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['33.33%','75%']
                        },
                        {
                            name: '防尘护具',
                            type: 'pie',
                            radius: ['40%', '45%'],
                            data: [
                                { value: 1220, name: '防尘护具'},
                                { value: 5034, name: '防尘护具未使用' }
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|1220}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#fff',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#fff',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#4449D1" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#A86DE5" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['66.66%','75%']
                        }
                    ],
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(stock1.value)).dispose()
            }

            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }

            // 页面载入时执行方法
            onMounted(() => {
                initStock1();
            });
            onBeforeUnmount(() =>{
                clearInterval(swit)
            })
            return {
                stock1,
                stock2,
                Search,
                fontSize,
                ...toRefs(state)
            };
        },
    });
</script>

<style scoped lang="scss">
    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 4% 2% 2%;
        position: relative;

        .stock{
            width: 100%;
            height: 100%;
        }
    }
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-input{
            width: 100% !important;
        }
        .el-date-editor::v-deep{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-cascader{
            width: 100% !important;
        }
    }
</style>

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

对比新文件
@@ -0,0 +1,423 @@
<template>
    <div class="charts-cont">
        <div v-show="curTab === 1" class="train" :id="train1"></div>
        <div v-show="curTab === 2" class="train" :id="train2"></div>
        <div v-show="curTab === 3" class="train" :id="train3"></div>
    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'

    interface stateType {
        curTab: number
    }
    export default defineComponent({
        name: 'accident',
        components: {},
        props:{
            size: Number
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const train1 = ref("eChartTrain1" + Date.now() + Math.random())
            const train2 = ref("eChartTrain2" + Date.now() + Math.random())
            const train3 = ref("eChartTrain3" + Date.now() + Math.random())
            const state = reactive<stateType>({
                curTab: 1
            })

            // const changeTab=()=>{
            //     setInterval(()=>{
            //         if(state.curTab<3){
            //             state.curTab = state.curTab + 1
            //             if(state.curTab == 2){
            //                 nextTick(()=>{
            //                     initTrain2()
            //                 })
            //             }else{
            //                 nextTick(()=>{
            //                     initTrain3()
            //                 })
            //             }
            //
            //         }else{
            //             state.curTab = 1
            //             nextTick(()=>{
            //                 initTrain1()
            //             })
            //         }
            //     },5000)
            // }
            const changeTab = setInterval(()=>{
                if(state.curTab<3){
                    state.curTab = state.curTab + 1
                    if(state.curTab == 2){
                        nextTick(()=>{
                            initTrain2()
                        })
                    }else{
                        nextTick(()=>{
                            initTrain3()
                        })
                    }

                }else{
                    state.curTab = 1
                    nextTick(()=>{
                        initTrain1()
                    })
                }
            },5000)
            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initTrain1 =()=>{
                let dom = document.getElementById(train1.value);
                let myChart = echarts.init(dom);
                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: '1%',
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                type: 'dotted'
                            }
                        },
                        axisLabel:{
                            color: '#ccc'
                        },
                        splitLine:{
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                        data: ['一月', '二月', '三月', '四月'],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#fff'
                            }
                        },
                        axisLabel:{
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            name: '2011',
                            type: 'bar',
                            // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                            data: [18203, 23489, 29034, 104970],
                            itemStyle:{
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "#2D74C0", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "#21D9DC", // 坐标轴处的颜色
                                        },
                                    ]
                                },
                                borderRadius: [0,99,99,0]
                            },
                            barCategoryGap: '50%',
                            label:{
                                show: true,
                                position: 'outside',
                                color: '#fff',
                                fontSize: fontSize(11)
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(train2.value)).dispose()
                echarts.init(document.getElementById(train3.value)).dispose()
            }

            const initTrain2 =()=>{
                let dom = document.getElementById(train2.value);
                let myChart = echarts.init(dom);
                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: '1%',
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                type: 'dotted'
                            }
                        },
                        axisLabel:{
                            color: '#ccc'
                        },
                        splitLine:{
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                        data: ['五月', '六月','七月', '八月'],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#fff'
                            }
                        },
                        axisLabel:{
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            name: '2011',
                            type: 'bar',
                            // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                            data: [131744, 630230, 18203, 23489],
                            barCategoryGap: '50%',
                            itemStyle:{
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "#2D74C0", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "#21D9DC", // 坐标轴处的颜色
                                        },
                                    ]
                                },
                                borderRadius: [0,99,99,0]
                            },
                            label:{
                                show: true,
                                position: 'outside',
                                color: '#fff',
                                fontSize: fontSize(11)
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(train1.value)).dispose()
                echarts.init(document.getElementById(train3.value)).dispose()
            }

            const initTrain3 =()=>{
                let dom = document.getElementById(train3.value);
                let myChart = echarts.init(dom);
                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: '1%',
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                type: 'dotted'
                            }
                        },
                        axisLabel:{
                            color: '#ccc'
                        },
                        splitLine:{
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                        data: ['九月', '十月', '十一月', '十二月'],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#fff'
                            }
                        },
                        axisLabel:{
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            name: '2011',
                            type: 'bar',
                            // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                            data: [29034, 104970, 131744, 630230],
                            barCategoryGap: '50%',
                            itemStyle:{
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "#2D74C0", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "#21D9DC", // 坐标轴处的颜色
                                        },
                                    ]
                                },
                                borderRadius: [0,99,99,0]
                            },
                            label:{
                                show: true,
                                position: 'outside',
                                color: '#fff',
                                fontSize: fontSize(11)
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(train1.value)).dispose()
                echarts.init(document.getElementById(train2.value)).dispose()
            }

            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }

            // 页面载入时执行方法
            onMounted(() => {
                initTrain1();
            });
            onBeforeUnmount(() =>{
                clearInterval(changeTab)
            })
            return {
                train1,
                train2,
                train3,
                Search,
                fontSize,
                ...toRefs(state)
            };
        },
    });
</script>

<style scoped lang="scss">
    .charts-cont{
        width: 100%;
        height: 100%;
        padding: 1% 5% 5%;
        position: relative;

        .train{
            width: 100%;
            height: 100%;
        }
    }
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-input{
            width: 100% !important;
        }
        .el-date-editor::v-deep{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-cascader{
            width: 100% !important;
        }
    }
</style>

 src/views/riskWarningSys/warningBigScreen/index.vue

@@ -25,40 +25,129 @@
        <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>
                    <div class="part-tit">
                        <span>| 事故等级分布</span>
                        <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">
                    </div>
                    <div class="chart-box">
                        <accident :size="1"></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>
                    <div class="part-tit">
                        <span>| 应急演练次数</span>
                        <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">
                    </div>
                    <div class="chart-box">
                        <span class="train-tip">距上次演练结束 5 天</span>
                        <training :size="1"></training>
                    </div>
                </div>
                <div class="left-bottom">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 隐患等级数量分布</span>
                        <div>
                            <el-select class="selector" 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>
                            <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">
                        </div>

                    </div>
                    <div class="chart-box">
                        <risk :size="1" :month="month"></risk>
                    </div>
                </div>
            </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>
                    <div class="part-tit" style="position: absolute;top: 12%;padding: 0 4%">
                        <el-cascader
                                class="spiSe"
                                v-model="spiValue"
                                :options="spiOptions"
                                :props="props"
                                @change="handleChange"
                        />
<!--                        <span>SPI数据分析</span>-->
                        <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">
                    </div>
                    <div class="chart-box">
                        <spi :size="1" :dep="spiValue"></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>
                        <div class="part-tit">
                            <span>| 教育培训分析</span>
                            <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">
                        </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>
                        <div class="part-tit">
                            <span>| 隐患等级</span>
                            <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">
                        </div>
                        <div class="chart-box">
                            <danger :size="1"></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>
                        <div class="part-tit">
                            <span>| 人员专业度分布</span>
                            <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">
                        </div>
                        <div class="chart-box">
                            <profession :size="1"></profession>
                        </div>
                    </div>
                </div>
            </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>
                    <div class="part-tit">
                        <span>| 预警消息报告</span>
                        <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">
                    </div>
                    <div class="chart-box">
                        <message :size="1"></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>
                    <div class="part-tit">
                        <span>| 特殊作业实时监控</span>
                        <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">
                    </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>
                    <div class="part-tit">
                        <span>| 风险应急物资储备</span>
                        <img @click="jumpPage(10)" src="../../../assets/warningScreen/small-full.png">
                    </div>
                    <div class="chart-box">
                        <stock :size="1"></stock>
                    </div>
                </div>
            </div>
        </div>
@@ -67,42 +156,148 @@

<script lang="ts">
    import screenfull from 'screenfull';
    import { toRefs, reactive, ref, onMounted } from 'vue';
    import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
    import { ElTable } from 'element-plus';
    import { FormInstance, FormRules, ElMessage } from 'element-plus';
    import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
    import { useRouter } from 'vue-router';
    import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
    import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
    import * as echarts from 'echarts/core';
    import {TooltipComponent, TooltipComponentOption, LegendComponent, LegendComponentOption} from 'echarts/components';
    import {PieChart, PieSeriesOption} from 'echarts/charts';
    import {LabelLayout} from 'echarts/features';
    import {CanvasRenderer} from 'echarts/renderers';
    echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
    import '/@/theme/bigScreen.css'

    // 定义接口来定义对象的类型
    interface stateType {
        isScreenfull: boolean;
        currentTime: string
        currentTime: string;
        month: number;
        spiValue: number;
        optionList: Array<any>;
        spiOptions: Array<any>
    }
    export default {
    export default defineComponent({
        name: 'warningScreen',
        components: {},
        components: {
            accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue')),
            training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
            spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')),
            risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
            educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
            danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
            profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
            message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
            monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
            stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
        },
        setup() {
            const router = useRouter();
            const props = {
                expandTrigger: 'hover',
            }
            const state = reactive<stateType>({
                isScreenfull: false,
                currentTime: ''
                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,
                        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'
                            }
                        ]
                    }
                ]
            });

            // 页面载入时执行方法
            onMounted(() => {
                setInterval(() => {
                    state.currentTime = new Date().toLocaleString();
                    console.log(state.currentTime)
                }, 1000);
                getTime()
            });

            const getTime =()=>{
                setInterval(() => {
                    state.currentTime = new Date().toLocaleString();
                }, 1000);
            }
            // 全屏
            const onScreenfullClick = () => {
                if (!screenfull.isEnabled) {
@@ -118,6 +313,15 @@
                    }
                });
            };

            const jumpPage = (num) =>{
                router.push({
                    path: 'screenPage',
                    query: {
                        num: num
                    }
                });
            }

            // 返回上一页
            const goBack = () => {
@@ -138,102 +342,25 @@
            //     }
            // };

            // 隐患整改情况
            // const initRiskFix =()=>{
            //     var dom = document.getElementById('riskFix');
            //     var myChart = echarts.init(dom, null, {
            //         renderer: 'canvas',
            //         useDirtyRect: false
            //     });
            //     var app = {};
            //
            //     var option;
            //
            //     option = {
            //         tooltip: {
            //             trigger: 'item'
            //         },
            //         legend: {
            //             bottom: '5%',
            //             left: 'center'
            //         },
            //         series: [
            //             {
            //                 name: 'Access From',
            //                 type: 'pie',
            //                 radius: ['35%', '60%'],
            //                 avoidLabelOverlap: false,
            //                 itemStyle: {
            //                     borderRadius: 6,
            //                     borderColor: '#fff',
            //                     borderWidth: 2
            //                 },
            //                 label: {
            //                     alignTo: 'labelLine',
            //                     formatter: '{name|{b}}\n{value|{c}}',
            //                     minMargin: 5,
            //                     edgeDistance: 5,
            //                     lineHeight: 15,
            //                     rich: {
            //                         name: {
            //                             fontSize: 14,
            //                             color: '#666'
            //                         }
            //                     }
            //                 },
            //                 labelLine: {
            //                     length: 15,
            //                     maxSurfaceAngle: 80
            //                 },
            //                 emphasis: {
            //                     label: {
            //                         show: true,
            //                         fontSize: '40',
            //                         fontWeight: 'bold'
            //                     }
            //                 },
            //                 data: [
            //                     { value: 1048, name: '整改中' },
            //                     { value: 735, name: '待验收' },
            //                     { value: 580, name: '延期整改' },
            //                     { value: 484, name: '超期未整改' },
            //                     { value: 300, name: '已验收' }
            //                 ],
            //                 center: ['50%','40%']
            //             }
            //         ]
            //     };
            //
            //     if (option && typeof option === 'object') {
            //         myChart.setOption(option);
            //     }
            //
            //     window.addEventListener('resize', myChart.resize);
            // }

            return {
                router,
                props,
                onScreenfullClick,
                jumpPage,
                goBack,
                ...toRefs(state)
            };
        }
    };
    });
</script>

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

    @media screen and (min-width: 1366px) {

    ::v-deep(.el-select-dropdown) {
        background-color: transparent !important;
    }

    @media screen and (min-width: 1024px) and (max-width: 1366px){

    }

    @media screen and (max-width: 1024px) {

    ::v-deep(.el-select-dropdown__item){
        background-color: transparent !important;
    }
    .container {
        width: 100%;
@@ -247,9 +374,9 @@

        .header-content {
            width: 100%;
            height: 80px;
            height: 72px;
            padding: 0 20px;
            font-size: 20px;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
@@ -267,9 +394,9 @@
            }
            .title {
                width: 46%;
                font-size: 26px;
                font-size: 2rem;
                font-weight: bolder;
                line-height: 80px;
                line-height: 72px;
                text-align: center;
                letter-spacing: 2px;
            }
@@ -280,7 +407,7 @@
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-size: 15px;
                font-size: 1rem;
                padding-left: 30px;

                .datetime {
@@ -293,8 +420,7 @@
                    &>div{
                        display: flex;
                        align-items: center;
                        align-items: center;
                        font-size: 15px;
                        font-size: 1rem;
                        margin-right: 20px;

                        img{
@@ -305,92 +431,203 @@
                            margin-left: 6px;
                        }
                    }
                    .fullbtn{
                        cursor: pointer;
                    }
                    .backBtn{
                        cursor: pointer;
                    }
                }
            }
        }
        .main-content{
            width: 100%;
            height: 100%;
            padding: 20px;
            padding: 0 25px 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .main-left{
                width: calc(25% - 10px);
            &>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: #11feee;
                        font-weight: bolder;
                    }

                    .dv-border-box-11{
                        :deep(.dv-border-svg-container){
                                .dv-border-box-11-title{
                                    font-size: 1.5rem;
                                    fill: #11feee !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: #11feee;
                        }
                        ::v-deep(.el-cascader){
                            width: 25% !important;
                        }
                        ::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-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{
                            width: 1.20rem;
                            height: 1.20rem;
                            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%;
                        }
                        accident{
                            width: 100%;
                            height: 100%;
                        }

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

            .main-left{
                width: calc(25% - 5px);

                .left-top{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    height: calc((100%/3) - (20px/3));

                }
                .left-mid{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    height: calc((100%/3) - (20px/3));
                }
                .left-bottom{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    height: calc((100%/3) - (20px/3));
                }
            }
            .main-middle{
                width: calc(50% - 20px);
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                width: calc(50% - 10px);

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

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

                    &>div {
                        position: relative;
                        width: calc((100% - 40px)/3);
                        width: calc((100% - 20px)/3);
                        border-radius: 8px;
                        overflow: hidden;

                        .chart-tit {
                            position: absolute;
                            left: 20px;
                            top: 20px;
                            font-weight: 700;
                            z-index: 3;
                        }
                        padding: 10px 15px;
                        box-sizing: border-box;
                    }
                }
            }
            .main-right{
                width: calc(25% - 10px);
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                width: calc(25% - 5px);

                .right-top{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    height: calc((100%/3) - (20px/3));
                }
                .right-mid{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    height: calc((100%/3) - (20px/3));
                }
                .right-bottom{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    height: calc((100%/3) - (20px/3));
                }
            }
        }

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

对比新文件
@@ -0,0 +1,269 @@
<template>
  <div class="com-page">
    <div class="btns" @click="goBack()">
      返回首页
    </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>
    <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>
        <spi v-else-if="curChart===4" :size="2.5"></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>
        <message v-else-if="curChart===8" :size="2"></message>
        <monitor v-else-if="curChart===9" :size="2.5"></monitor>
        <stock v-else class="main-chart" :size="2"></stock>
      </div>
      <div class="chart-right">
        <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
        <div class="charts-des">
          <div class="">

          </div>
        </div>
        <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import screenfull from 'screenfull';
  import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
  import { ElTable } from 'element-plus';
  import { FormInstance, FormRules, ElMessage } from 'element-plus';
  import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
  import { useRoute } from 'vue-router';
  import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
  import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
  import '/@/theme/bigScreen.css'

  // 定义接口来定义对象的类型
  interface stateType {
    isScreenfull: boolean;
    curChart: number | null;
    month: number;
    optionList: Array<any>
  }
  export default defineComponent({
    name: 'warningPage',
    components: {
      accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue')),
      training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
      spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')),
      risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
      educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
      danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
      profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
      message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
      monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
      stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
    },
    setup() {
      const route = useRoute();
      const state = reactive<stateType>({
        isScreenfull: false,
        curChart: null,
        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
          }
        ]
      });

      // 页面载入时执行方法
      onMounted(() => {
        if (route.query.num) {
          state.curChart = Number(route.query.num)
        }
      });


      // 全屏
      const onScreenfullClick = () => {
        if (!screenfull.isEnabled) {
          ElMessage.warning('暂不不支持全屏');
          return false;
        }
        screenfull.toggle();
        screenfull.on('change', () => {
          if (screenfull.isFullscreen) {
            state.isScreenfull = true;
          } else {
            state.isScreenfull = false;
          }
        });
      };

      // 返回上一页
      const goBack = () => {
        window.history.go(-1);
      };


      return {
        route,
        onScreenfullClick,
        goBack,
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .com-page{
    width: 100%;
    height: 100%;
    border:1px #5a5959 solid;
    background: url('../../../../assets/warningScreen/body-bg.jpg');
    padding: 4%;
    .btns{
      position: fixed;
      right: 5%;
      top: 20px;
      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;
    }
    .tit{
      width: 100%;
      height: 122px;
      background: url("../../../../assets/warningScreen/pagebg-t.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: #11feee;
        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.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.png") no-repeat center;
          background-size: 100% 100%;
        }
      }

    }
  }
</style>

 src/views/specialWorkSystem/workAlert/alertRecord/index.vue

对比新文件
@@ -0,0 +1,438 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                <el-col :span="6" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业证编号：</span>
                    <div class="grid-content topInfo">
                        <el-input v-model="searchWord"></el-input>
                    </div>
                </el-col>
                <el-col :span="6" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业类型：</span>
                    <div class="grid-content topInfo">
                        <el-select v-model="searchType" placeholder="请选择作业类型">
                            <el-option
                                    v-for="item in workTypeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            />
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">预警类型：</span>
                    <div class="grid-content topInfo">
                        <el-select v-model="searchAlert" placeholder="请选择预警类型">
                            <el-option
                                    v-for="item in alertTypeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            />
                        </el-select>
                    </div>
                </el-col>
                <el-button type="primary" @click="searchRecord">查询</el-button>
                <el-button plain @click="clearSearch">重置</el-button>
            </el-row>
            <div class="homeCard">
                <div class="main-card">
<!--                    <el-row class="cardTop">-->
<!--                        <el-col :span="12" class="mainCardBtn">-->
<!--                            <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新建</el-button>-->
<!--                        </el-col>-->
<!--                        <el-button type="primary" :icon="Refresh" size="default"/>-->
<!--                    </el-row>-->
                    <el-table
                            ref="multipleTableRef"
                            :data="tableData"
                            style="width: 100%"
                            height="calc(100% - 48px)"
                            :header-cell-style="{background: '#fafafa'}"
                    >
                        <el-table-column type="index" label="序号" width="200"/>
                        <el-table-column property="id" label="作业证编号" width="200"/>
                        <el-table-column property="workType" label="作业类型" width="200"/>
                        <el-table-column property="alertInfo" label="预警信息"/>
                        <el-table-column property="alertType" label="预警类型"/>
                        <el-table-column property="desc" label="描述" width="200"/>
                        <el-table-column property="name" label="上报人"/>
                        <el-table-column property="updateTime" label="上报时间"/>
                        <el-table-column fixed="right" label="操作" align="center" width="250">
                            <template #default="scope">
                                <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination
                                v-model:currentPage="currentPage"
                                v-model:page-size="pageSize"
                                :page-sizes="[10, 15]"
                                small=false
                                background
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="100"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogDetails" title="作业预警记录">
            <el-form :model="details" label-width="120px">
                <el-form-item label="作业证编号">
                    <el-input v-model="details.id" readonly/>
                </el-form-item>
                <el-form-item label="作业类型">
                    <el-input v-model="details.workType" readonly/>
                </el-form-item>
                <el-form-item label="预警信息">
                    <el-input v-model="details.alertInfo" readonly/>
                </el-form-item>
                <el-form-item label="预警类型">
                    <el-input v-model="details.alertType" readonly/>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="details.desc" type="textarea" readonly/>
                </el-form-item>
                <el-form-item label="上报人">
                    <el-input v-model="details.name" readonly/>
                </el-form-item>
                <el-form-item label="上报时间">
                    <el-input v-model="details.updateTime" readonly/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, ref, onMounted } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import { useUserInfo } from '/@/stores/userInfo';
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
    import { ElTable } from 'element-plus';
    import { FormInstance, FormRules, ElMessage } from 'element-plus';
    import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';

    // 定义接口来定义对象的类型
    interface stateType {
        tableData: Array<any>;
        departmentList: Array<any>;
        department:string;
        workerList: Array<string>;
        casProps: {};
        multipleSelection: Array<any>;
        deleteArr: Array<any>;
        dialogDetails: boolean;
        dialogAddRecord: boolean;
        deleteDialog: boolean;
        deleteSetDialog: boolean;
        pageIndex: number;
        pageSize: number;
        chosenIndex: null | number;
        deleteId: null | number;
        searchWord: string;
        searchType: number | null;
        searchAlert: number | null;
        totalSize: number;
        addRecord: {

        };
        details: {

        };
        workTypeList: Array<any>;
        alertTypeList: Array<any>
    }

    export default {
        name: 'alertRecord',
        components: {},
        setup() {
            const userInfo = useUserInfo();
            const { userInfos } = storeToRefs(userInfo);

            const state = reactive<stateType>({
                pageIndex: 1,
                pageSize: 10,
                totalSize: 0,
                chosenIndex: null,
                searchWord: '',
                searchType: null,
                searchAlert: null,
                tableData: [
                    {
                        id: 'GTXH-0000001',
                        workType: '动火作业',
                        alertInfo: '可燃气检查超标',
                        alertType: '气体分析',
                        desc: 'A车间动火作业过程检查',
                        name: '李羽飞',
                        updateTime: '2022-08-31 12:00:00'
                    },
                    {
                        id: 'GTXH-0000002',
                        workType: '动火作业',
                        alertInfo: '作业现场检查异常',
                        alertType: '作业检查',
                        desc: 'B车间动火作业过程气体检查',
                        name: '李羽飞',
                        updateTime: '2022-08-31 16:31:44'
                    },
                    {
                        id: 'GTXH-0000003',
                        workType: '动火作业',
                        alertInfo: '可燃气检查超标',
                        alertType: '气体分析',
                        desc: '',
                        name: '李羽飞',
                        updateTime: '2022-08-31 17:05:20'
                    }
                ],
                departmentList: [],
                department: '',
                workerList: [],
                casProps: {
                    expandTrigger: 'hover',
                    emitPath: false,
                    value: 'depId',
                    label: 'depName'
                },
                multipleSelection: [],
                dialogDetails: false,
                dialogAddRecord: false,
                deleteDialog: false,
                deleteSetDialog: false,
                addRecord: {

                },
                details: {

                },
                deleteId: null,
                deleteArr: [],
                workTypeList: [
                    { id: 1, name: '动火作业' },
                    { id: 2, name: '受限空间作业' },
                    { id: 3, name: '吊装作业' },
                    { id: 4, name: '动土作业' },
                    { id: 5, name: '断路作业' },
                    { id: 6, name: '高处作业' },
                    { id: 7, name: '临时用电作业' },
                    { id: 8, name: '盲板抽堵作业' }
                ],
                alertTypeList: [
                    { id: 1, name: '气体分析' },
                    { id: 2, name: '作业检查' }
                ]
            });

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

            // 分页获取班组管理列表
            const getListByPage = async () => {
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } };
                let res = await teamManageApi().getRecordPage(data);
                if (res.data.code === '200') {
                    state.tableData = res.data.data.map((item) => {
                        if (!item.groupMembers || item.groupMembers == null) {
                            item.groupMembers = [];
                        } else {
                            item.groupMembers = Array.from(item.groupMembers, ({ username }) => username);
                        }
                        return item;
                    });
                    state.totalSize = res.data.total;
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

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

            const handleChange = async (value) => {
                state.addRecord.depId = value;
                console.log(state.addRecord.department, 'de');
                let res = await teamManageApi().getAllMember(value);
                if (res.data.code === '200') {
                    state.workerList = res.data.data;
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            // 关键词查询记录
            const searchRecord = async () => {
                if (state.searchWord == '') {
                    ElMessage({
                        type: 'warning',
                        message: '请输入查询关键词'
                    });
                } else {
                    getListByPage();
                }
            };

            const clearSearch = async () => {
                state.searchWord = '';
                getListByPage();
            };

            const handleSizeChange = (val: number) => {
                state.pageSize = val;
                getListByPage();
            };

            const handleCurrentChange = (val: number) => {
                state.pageIndex = val;
                getListByPage();
            };

            // 查看记录
            const viewRecord = (row) => {
                state.details = JSON.parse(JSON.stringify(row));
                state.dialogDetails = true;
            };

            // 刷新
            const reLoadData = async () => {
                getListByPage();
            };

            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId', value);
                userInfos.value.projectId = value;
                await initBackEndControlRoutes();
            };

            return {
                View,
                Edit,
                Delete,
                Refresh,
                Plus,
                handleChange,
                searchRecord,
                clearSearch,
                viewRecord,
                getListByPage,
                reLoadData,
                handleSizeChange,
                handleCurrentChange,
                ...toRefs(state)
            };
        }
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: calc(100vh - 144px);
        box-sizing: border-box;
        overflow: hidden;
        .homeCard {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 4px;

            .main-card {
                width: 100%;
                height: 100%;
                .cardTop {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    .mainCardBtn {
                        margin: 0;
                    }
                }
                .pageBtn {
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: right;

                    .demo-pagination-block + .demo-pagination-block {
                        margin-top: 10px;
                    }
                    .demo-pagination-block .demonstration {
                        margin-bottom: 16px;
                    }
                }
            }
            &:last-of-type {
                height: calc(100% - 100px);
            }
        }
        .el-row {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content {
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                width: 100%;
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                & > div {
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/specialWorkSystem/workProcess/gasCheck/index.vue

对比新文件
@@ -0,0 +1,540 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                <el-col :span="6" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业证编号：</span>
                    <div class="grid-content topInfo">
                        <el-input v-model="searchWord"></el-input>
                    </div>
                </el-col>
                <el-col :span="6" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业类型：</span>
                    <div class="grid-content topInfo">
                        <el-select v-model="searchType" placeholder="请选择作业类型">
                            <el-option
                                    v-for="item in workType"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            />
                        </el-select>
                    </div>
                </el-col>
                <el-button type="primary" @click="searchRecord">查询</el-button>
                <el-button plain @click="clearSearch">重置</el-button>
            </el-row>
            <div class="homeCard">
                <div class="main-card">
                    <el-row class="cardTop">
                        <el-col :span="12" class="mainCardBtn">
                            <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新建</el-button>
                        </el-col>
                        <el-button type="primary" :icon="Refresh" size="default"/>
                    </el-row>
                    <el-table
                            ref="multipleTableRef"
                            :data="tableData"
                            style="width: 100%"
                            height="calc(100% - 100px)"
                            :header-cell-style="{background: '#fafafa'}"
                    >
                        <el-table-column type="index" label="序号" width="200"/>
                        <el-table-column property="id" label="作业证编号" width="200"/>
                        <el-table-column property="workType" label="作业类型" width="200"/>
                        <el-table-column property="combustible" label="可燃气%"/>
                        <el-table-column property="oxygen" label="氧气%"/>
                        <el-table-column property="co" label="一氧化碳ppm"/>
                        <el-table-column property="hs" label="硫化氢ppm"/>
                        <el-table-column property="desc" label="描述" width="200"/>
                        <el-table-column property="name" label="分析人"/>
                        <el-table-column property="updateTime" label="分析时间"/>
                        <el-table-column fixed="right" label="操作" align="center" width="250">
                            <template #default="scope">
                                <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination
                                v-model:currentPage="currentPage"
                                v-model:page-size="pageSize"
                                :page-sizes="[10, 15]"
                                small=false
                                background
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="100"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogDetails" title="检测记录">
            <el-form :model="details" label-width="120px">
                <el-form-item label="作业证编号">
                    <el-input v-model="details.id" readonly/>
                </el-form-item>
                <el-form-item label="作业类型">
                    <el-input v-model="details.workType" readonly/>
                </el-form-item>
                <el-form-item label="可燃气%">
                    <el-input v-model="details.combustible" readonly/>
                </el-form-item>
                <el-form-item label="氧气%">
                    <el-input v-model="details.oxygen" readonly/>
                </el-form-item>
                <el-form-item label="一氧化碳ppm">
                    <el-input v-model="details.co" readonly/>
                </el-form-item>
                <el-form-item label="硫化氢ppm">
                    <el-input v-model="details.hs" readonly/>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="details.desc" type="textarea" readonly/>
                </el-form-item>
                <el-form-item label="分析人">
                    <el-input v-model="details.name" readonly/>
                </el-form-item>
                <el-form-item label="分析时间">
                    <el-input v-model="details.updateTime" readonly/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="新建" @close="closeAdd" @open="openAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="作业证编号" prop="id">
                    <el-input v-model="addRecord.id"> </el-input>
                </el-form-item>
                <el-form-item label="作业类型" prop="groupMembers">
                    <el-select v-model="addRecord.groupMembers">
                        <el-option
                                v-for="item in workType"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="可燃气%" prop="combustible">
                    <el-input v-model="addRecord.combustible"/>
                </el-form-item>
                <el-form-item label="氧气" prop="oxygen">
                    <el-input v-model="addRecord.oxygen"/>
                </el-form-item>
                <el-form-item label="一氧化碳ppm" prop="combustible">
                    <el-input v-model="addRecord.co"/>
                </el-form-item>
                <el-form-item label="硫化氢ppm" prop="oxygen">
                    <el-input v-model="addRecord.hs"/>
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input v-model="addRecord.desc" type="textarea"> </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, ref, onMounted } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import { useUserInfo } from '/@/stores/userInfo';
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
    import { ElTable } from 'element-plus';
    import { FormInstance, FormRules, ElMessage } from 'element-plus';
    import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';

    // 定义接口来定义对象的类型
    interface stateType {
        tableData: Array<any>;
        departmentList: Array<any>;
        department:string;
        workerList: Array<string>;
        casProps: {};
        multipleSelection: Array<any>;
        deleteArr: Array<any>;
        dialogDetails: boolean;
        dialogAddRecord: boolean;
        deleteDialog: boolean;
        deleteSetDialog: boolean;
        pageIndex: number;
        pageSize: number;
        chosenIndex: null | number;
        deleteId: null | number;
        searchWord: string;
        searchType: number | null;
        totalSize: number;
        addRecord: {

        };
        details: {

        };
        workType: Array<any>
    }

    export default {
        name: 'gasCheck',
        components: {},
        setup() {
            const userInfo = useUserInfo();
            const { userInfos } = storeToRefs(userInfo);

            const state = reactive<stateType>({
                pageIndex: 1,
                pageSize: 10,
                totalSize: 0,
                chosenIndex: null,
                searchWord: '',
                searchType: null,
                tableData: [
                    {
                        id: 'GTXH-0000001',
                        workType: '动火作业',
                        combustible: 5,
                        oxygen: 20,
                        co: 0,
                        hs: 0,
                        desc: 'A车间动火作业过程气体检测异常',
                        name: '李羽飞',
                        updateTime: '2022-08-32 12:00:00'
                    },
                    {
                        id: 'GTXH-0000002',
                        workType: '动火作业',
                        combustible: 0,
                        oxygen: 20.8,
                        co: 0,
                        hs: 0,
                        desc: 'B车间动火作业过程气体检查',
                        name: '李羽飞',
                        updateTime: '2022-08-32 16:31:44'
                    },
                    {
                        id: 'GTXH-0000003',
                        workType: '动火作业',
                        combustible: 0,
                        oxygen: 21,
                        co: 0,
                        hs: 0,
                        desc: 'C车间动火作业过程气体检测异常',
                        name: '李羽飞',
                        updateTime: '2022-08-32 17:05:20'
                    }
                ],
                departmentList: [],
                department: '',
                workerList: [],
                casProps: {
                    expandTrigger: 'hover',
                    emitPath: false,
                    value: 'depId',
                    label: 'depName'
                },
                multipleSelection: [],
                dialogDetails: false,
                dialogAddRecord: false,
                deleteDialog: false,
                deleteSetDialog: false,
                addRecord: {

                },
                details: {

                },
                deleteId: null,
                deleteArr: [],
                workType: [
                    { id: 1, name: '动火作业' },
                    { id: 2, name: '受限空间作业' },
                    { id: 3, name: '吊装作业' },
                    { id: 4, name: '动土作业' },
                    { id: 5, name: '断路作业' },
                    { id: 6, name: '高处作业' },
                    { id: 7, name: '临时用电作业' },
                    { id: 8, name: '盲板抽堵作业' }
                ]
            });

            const addRef = ref<FormInstance>();
            const addRules = reactive<FormRules>({
                id: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                combustible: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                oxygen: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                co: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                hs: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                desc: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                updateTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
            });

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

            // 分页获取班组管理列表
            const getListByPage = async () => {
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } };
                let res = await teamManageApi().getRecordPage(data);
                if (res.data.code === '200') {
                    state.tableData = res.data.data.map((item) => {
                        if (!item.groupMembers || item.groupMembers == null) {
                            item.groupMembers = [];
                        } else {
                            item.groupMembers = Array.from(item.groupMembers, ({ username }) => username);
                        }
                        return item;
                    });
                    state.totalSize = res.data.total;
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

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

            const handleChange = async (value) => {
                state.addRecord.depId = value;
                console.log(state.addRecord.department, 'de');
                let res = await teamManageApi().getAllMember(value);
                if (res.data.code === '200') {
                    state.workerList = res.data.data;
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            // 关键词查询记录
            const searchRecord = async () => {
                if (state.searchWord == '') {
                    ElMessage({
                        type: 'warning',
                        message: '请输入查询关键词'
                    });
                } else {
                    getListByPage();
                }
            };

            const clearSearch = async () => {
                state.searchWord = '';
                getListByPage();
            };

            // 添加班组管理方法
            const addRecord = async (data: any) => {
                let res = await teamManageApi().addRecord(data);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    });
                    getListByPage();
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            // 新增修改记录
            const confirmAddRecord = async (formEl: FormInstance | undefined) => {
                if (!formEl) return;
                await formEl.validate(async (valid, fields) => {
                    if (valid) {
                        const data = {
                            groupName: state.addRecord.groupName,
                            groupInfo: state.addRecord.groupInfo,
                            depId: state.addRecord.depId,
                            groupMemberIds: state.addRecord.groupMembers
                        };
                        if (state.chosenIndex == null) {
                            await addRecord(data);
                        } else {
                            data.groupId = JSON.stringify(state.addRecord.groupId);
                            await editRecord(data);
                        }
                        state.dialogAddRecord = false;
                    } else {
                        console.log('error submit!', fields);
                    }
                });
            };

            const handleSizeChange = (val: number) => {
                state.pageSize = val;
                getListByPage();
            };
            const handleCurrentChange = (val: number) => {
                state.pageIndex = val;
                getListByPage();
            };

            // 查看记录
            const viewRecord = (row) => {
                state.details = JSON.parse(JSON.stringify(row));
                state.dialogDetails = true;
            };

            // 刷新
            const reLoadData = async () => {
                getListByPage();
            };

            const closeAdd = () => {
                state.addRecord = {};
                state.chosenIndex = null;
            };

            const openAdd = () => {
                if (state.chosenIndex == null) {
                    state.addRecord.info = '';
                }
            };
            const indexClear = () => {
                state.deleteId = null;
            };

            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId', value);
                userInfos.value.projectId = value;
                await initBackEndControlRoutes();
            };
            return {
                addRef,
                addRules,
                View,
                Edit,
                Delete,
                Refresh,
                Plus,
                handleChange,
                searchRecord,
                clearSearch,
                viewRecord,
                getListByPage,
                reLoadData,
                handleSizeChange,
                handleCurrentChange,
                confirmAddRecord,
                closeAdd,
                openAdd,
                indexClear,
                ...toRefs(state)
            };
        }
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: calc(100vh - 144px);
        box-sizing: border-box;
        overflow: hidden;
        .homeCard {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 4px;

            .main-card {
                width: 100%;
                height: 100%;
                .cardTop {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    .mainCardBtn {
                        margin: 0;
                    }
                }
                .pageBtn {
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: right;

                    .demo-pagination-block + .demo-pagination-block {
                        margin-top: 10px;
                    }
                    .demo-pagination-block .demonstration {
                        margin-bottom: 16px;
                    }
                }
            }
            &:last-of-type {
                height: calc(100% - 100px);
            }
        }
        .el-row {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content {
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                width: 100%;
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                & > div {
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/specialWorkSystem/workProcess/workCheck/index.vue

对比新文件
@@ -0,0 +1,521 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                <el-col :span="6" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业证编号：</span>
                    <div class="grid-content topInfo">
                        <el-input v-model="searchWord"></el-input>
                    </div>
                </el-col>
                <el-col :span="6" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业类型：</span>
                    <div class="grid-content topInfo">
                        <el-select v-model="searchType" placeholder="请选择作业类型">
                            <el-option
                                    v-for="item in workTypeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            />
                        </el-select>
                    </div>
                </el-col>
                <el-button type="primary" @click="searchRecord">查询</el-button>
                <el-button plain @click="clearSearch">重置</el-button>
            </el-row>
            <div class="homeCard">
                <div class="main-card">
                    <el-row class="cardTop">
                        <el-col :span="12" class="mainCardBtn">
                            <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新建</el-button>
                        </el-col>
                        <el-button type="primary" :icon="Refresh" size="default"/>
                    </el-row>
                    <el-table
                            ref="multipleTableRef"
                            :data="tableData"
                            style="width: 100%"
                            height="calc(100% - 100px)"
                            :header-cell-style="{background: '#fafafa'}"
                    >
                        <el-table-column type="index" label="序号" width="200"/>
                        <el-table-column property="id" label="作业证编号" width="200"/>
                        <el-table-column property="workType" label="作业类型" width="200"/>
                        <el-table-column property="checkInfo" label="检查内容"/>
                        <el-table-column property="result" label="检查结果"/>
                        <el-table-column property="desc" label="描述" width="200"/>
                        <el-table-column property="name" label="分析人"/>
                        <el-table-column property="updateTime" label="分析时间"/>
                        <el-table-column fixed="right" label="操作" align="center" width="250">
                            <template #default="scope">
                                <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination
                                v-model:currentPage="currentPage"
                                v-model:page-size="pageSize"
                                :page-sizes="[10, 15]"
                                small=false
                                background
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="100"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogDetails" title="检查记录">
            <el-form :model="details" label-width="120px">
                <el-form-item label="作业证编号">
                    <el-input v-model="details.id" readonly/>
                </el-form-item>
                <el-form-item label="作业类型">
                    <el-input v-model="details.workType" readonly/>
                </el-form-item>
                <el-form-item label="检查内容">
                    <el-input v-model="details.checkInfo" readonly/>
                </el-form-item>
                <el-form-item label="检查结果">
                    <el-input v-model="details.result" readonly/>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="details.desc" type="textarea" readonly/>
                </el-form-item>
                <el-form-item label="分析人">
                    <el-input v-model="details.name" readonly/>
                </el-form-item>
                <el-form-item label="分析时间">
                    <el-input v-model="details.updateTime" readonly/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="新建" @close="closeAdd" @open="openAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="作业证编号" prop="id">
                    <el-input v-model="addRecord.id"> </el-input>
                </el-form-item>
                <el-form-item label="作业类型" prop="workType">
                    <el-select v-model="addRecord.workType">
                        <el-option
                                v-for="item in workTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="检查内容" prop="checkInfo">
                    <el-input v-model="addRecord.checkInfo"> </el-input>
                </el-form-item>
                <el-form-item label="检查结果" prop="result">
                    <el-select v-model="addRecord.result">
                        <el-option label="正常" value="0"/>
                        <el-option label="异常" value="1"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input v-model="addRecord.desc" type="textarea"> </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, ref, onMounted } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import { useUserInfo } from '/@/stores/userInfo';
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
    import { ElTable } from 'element-plus';
    import { FormInstance, FormRules, ElMessage } from 'element-plus';
    import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';

    // 定义接口来定义对象的类型
    interface stateType {
        tableData: Array<any>;
        departmentList: Array<any>;
        department:string;
        workerList: Array<string>;
        casProps: {};
        multipleSelection: Array<any>;
        deleteArr: Array<any>;
        dialogDetails: boolean;
        dialogAddRecord: boolean;
        deleteDialog: boolean;
        deleteSetDialog: boolean;
        pageIndex: number;
        pageSize: number;
        chosenIndex: null | number;
        deleteId: null | number;
        searchWord: string;
        searchType: number | null
        totalSize: number;
        addRecord: {

        };
        details: {

        };
        workTypeList: Array<any>
    }

    export default {
        name: 'workCheck',
        components: {},
        setup() {
            const userInfo = useUserInfo();
            const { userInfos } = storeToRefs(userInfo);

            const state = reactive<stateType>({
                pageIndex: 1,
                pageSize: 10,
                totalSize: 0,
                chosenIndex: null,
                searchWord: '',
                searchType: null,
                tableData: [
                    {
                        id: 'GTXH-0000001',
                        workType: '动火作业',
                        checkInfo: '动火作业检查',
                        result: '正常',
                        desc: 'A车间动火作业过程检查',
                        name: '李羽飞',
                        updateTime: '2022-08-31 12:00:00'
                    },
                    {
                        id: 'GTXH-0000002',
                        workType: '动火作业',
                        checkInfo: '动火作业检查',
                        result: '正常',
                        desc: 'B车间动火作业过程气体检查',
                        name: '李羽飞',
                        updateTime: '2022-08-31 16:31:44'
                    },
                    {
                        id: 'GTXH-0000003',
                        workType: '动火作业',
                        checkInfo: '动火作业检查',
                        result: '异常',
                        desc: '',
                        name: '李羽飞',
                        updateTime: '2022-08-31 17:05:20'
                    }
                ],
                departmentList: [],
                department: '',
                workerList: [],
                casProps: {
                    expandTrigger: 'hover',
                    emitPath: false,
                    value: 'depId',
                    label: 'depName'
                },
                multipleSelection: [],
                dialogDetails: false,
                dialogAddRecord: false,
                deleteDialog: false,
                deleteSetDialog: false,
                addRecord: {

                },
                details: {

                },
                deleteId: null,
                deleteArr: [],
                workTypeList: [
                    { id: 1, name: '动火作业' },
                    { id: 2, name: '受限空间作业' },
                    { id: 3, name: '吊装作业' },
                    { id: 4, name: '动土作业' },
                    { id: 5, name: '断路作业' },
                    { id: 6, name: '高处作业' },
                    { id: 7, name: '临时用电作业' },
                    { id: 8, name: '盲板抽堵作业' }
                ]
            });

            const addRef = ref<FormInstance>();
            const addRules = reactive<FormRules>({
                id: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                checkInfo: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                result: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                desc: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                updateTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
            });

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

            // 分页获取班组管理列表
            const getListByPage = async () => {
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } };
                let res = await teamManageApi().getRecordPage(data);
                if (res.data.code === '200') {
                    state.tableData = res.data.data.map((item) => {
                        if (!item.groupMembers || item.groupMembers == null) {
                            item.groupMembers = [];
                        } else {
                            item.groupMembers = Array.from(item.groupMembers, ({ username }) => username);
                        }
                        return item;
                    });
                    state.totalSize = res.data.total;
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

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

            const handleChange = async (value) => {
                state.addRecord.depId = value;
                console.log(state.addRecord.department, 'de');
                let res = await teamManageApi().getAllMember(value);
                if (res.data.code === '200') {
                    state.workerList = res.data.data;
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            // 关键词查询记录
            const searchRecord = async () => {
                if (state.searchWord == '') {
                    ElMessage({
                        type: 'warning',
                        message: '请输入查询关键词'
                    });
                } else {
                    getListByPage();
                }
            };

            const clearSearch = async () => {
                state.searchWord = '';
                getListByPage();
            };

            // 添加班组管理方法
            const addRecord = async (data: any) => {
                let res = await teamManageApi().addRecord(data);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    });
                    getListByPage();
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            // 新增修改记录
            const confirmAddRecord = async (formEl: FormInstance | undefined) => {
                if (!formEl) return;
                await formEl.validate(async (valid, fields) => {
                    if (valid) {
                        const data = {
                            groupName: state.addRecord.groupName,
                            groupInfo: state.addRecord.groupInfo,
                            depId: state.addRecord.depId,
                            groupMemberIds: state.addRecord.groupMembers
                        };
                        if (state.chosenIndex == null) {
                            await addRecord(data);
                        } else {
                            data.groupId = JSON.stringify(state.addRecord.groupId);
                            await editRecord(data);
                        }
                        state.dialogAddRecord = false;
                    } else {
                        console.log('error submit!', fields);
                    }
                });
            };

            const handleSizeChange = (val: number) => {
                state.pageSize = val;
                getListByPage();
            };
            const handleCurrentChange = (val: number) => {
                state.pageIndex = val;
                getListByPage();
            };

            // 查看记录
            const viewRecord = (row) => {
                state.details = JSON.parse(JSON.stringify(row));
                state.dialogDetails = true;
            };

            // 刷新
            const reLoadData = async () => {
                getListByPage();
            };

            const closeAdd = () => {
                state.addRecord = {};
                state.chosenIndex = null;
            };

            const openAdd = () => {
                if (state.chosenIndex == null) {
                    state.addRecord.info = '';
                }
            };
            const indexClear = () => {
                state.deleteId = null;
            };

            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId', value);
                userInfos.value.projectId = value;
                await initBackEndControlRoutes();
            };
            return {
                addRef,
                addRules,
                View,
                Edit,
                Delete,
                Refresh,
                Plus,
                handleChange,
                searchRecord,
                clearSearch,
                viewRecord,
                getListByPage,
                reLoadData,
                handleSizeChange,
                handleCurrentChange,
                confirmAddRecord,
                closeAdd,
                openAdd,
                indexClear,
                ...toRefs(state)
            };
        }
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: calc(100vh - 144px);
        box-sizing: border-box;
        overflow: hidden;
        .homeCard {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 4px;

            .main-card {
                width: 100%;
                height: 100%;
                .cardTop {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    .mainCardBtn {
                        margin: 0;
                    }
                }
                .pageBtn {
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: right;

                    .demo-pagination-block + .demo-pagination-block {
                        margin-top: 10px;
                    }
                    .demo-pagination-block .demonstration {
                        margin-bottom: 16px;
                    }
                }
            }
            &:last-of-type {
                height: calc(100% - 100px);
            }
        }
        .el-row {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content {
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                width: 100%;
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                & > div {
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/specialWorkSystem/workProcessManage/gasCheckAnalyze/index.vue

文件已删除

 src/views/specialWorkSystem/workProcessManage/workCheckRecord/index.vue

文件已删除