Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

Your Name

2022-09-14 54051120c1b27732f05b8c2f4a0112ac02323696

Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

 src/api/specialWorkSystem/workPlan/workAppoint/index.ts

对比新文件
@@ -0,0 +1,50 @@
import request from '/@/utils/request';

export function workAppointApi() {
    return {
        // 分页获取列表
        getAppointListPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialWork/appointment/listAll`,
                method: 'post',
                data: data
            });
        },

        // 新增列表
        addRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialWork/appointment/save`,
                method: 'post',
                data: data
            });
        },

        //修改列表
        editRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialWork/appointment/update`,
                method: 'post',
                data: data
            });
        },

        //删除列表
        deleteRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialWork/appointment/delete`,
                method: 'post',
                data: data
            });
        },

        //获取各部门各作业的数量
        getAllRecords: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialWork/appointment/statistics`,
                method: 'post',
                data: data
            });
        }
    };
}

 src/api/specialWorkSystem/workPlan/workReservation/index.ts

对比新文件
@@ -0,0 +1,41 @@
import request from '/@/utils/request';

export function workReserveApi() {
    return {
        // 分页获取列表
        getReserveListPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialWork/appointment/listByDep`,
                method: 'post',
                data: data
            });
        },

        // 新增列表
        addRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialWork/appointment/save`,
                method: 'post',
                data: data
            });
        },

        //修改列表
        editRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialWork/appointment/update`,
                method: 'post',
                data: data
            });
        },

        //删除列表
        deleteRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialWork/appointment/delete`,
                method: 'post',
                data: data
            });
        }
    };
}

 src/api/specialWorkSystem/workProcess/index.ts

对比新文件
@@ -0,0 +1,59 @@
import request from '/@/utils/request';

export function workProcessApi() {
    return {
        // 分页获取检测列表
        getDetectionListPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/work/process/detection/page/list`,
                method: 'post',
                data: data
            });
        },

        // 分页获取检查列表
        getCheckListPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/work/process/check/page/list`,
                method: 'post',
                data: data
            });
        },

        // 检测上报
        postDetectionReport: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/work/process/detection/report`,
                method: 'post',
                data: data
            });
        },

        // 检查上报
        postCheckReport: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/work/process/check/report`,
                method: 'post',
                data: data
            });
        },

        // 获取可上报作业列表
        postReportList: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/work/process/workApply/list`,
                method: 'post',
                data: data
            });
        },

        // 获取预警记录
        postAlertList: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/work/process/warning/page/list`,
                method: 'post',
                data: data
            });
        },
    };
}

 src/layout/navBars/breadcrumb/user.vue

@@ -264,7 +264,6 @@
        };
        const backToMenu = () => {
            router.push({ path: 'newMenu' }).then(()=>{
                debugger
                routeList.routesList.value = []
                console.log(routeList);
            });

 src/router/route.ts

@@ -127,5 +127,13 @@
        meta: {
            title: 'spi报告详情'
        }
    },
    {
        path: '/workReservation',
        name: 'workReservation',
        component: () => import('/@/views/specialWorkSystem/workPlan/workReservation/index.vue'),
        meta: {
            title: '作业预约'
        }
    }
];

 src/utils/request.ts

@@ -46,7 +46,6 @@
        // };
        return JSONbig.parse(data);
        } catch (err) {
            console.log(err);
            // 转换失败返回一个空对象
        return data
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            onUnmounted(() =>{

            })

            return {

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

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

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

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

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

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


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

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

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

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

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

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

            ::v-deep(.el-popper){
                background-color: rgba(10,31,92,1);
                border: 1px solid rgba(17,254,238,.4);
                color: #11FEEE;
                .el-select-dropdown__item{
                    color: #11FEEE;
                }
                .el-select-dropdown__item.hover{
                    background: #0049af;
                }
            }
            ::v-deep(.el-popper__arrow){
                &::before{
                    background-color: rgba(10,31,92,.6) !important;
                    border: 1px solid rgba(17,254,238,.4);
                }
            }
            ::v-deep(.el-input__wrapper){
                box-shadow: none;
                border: 1px solid rgba(17,254,238,.2);
                background: rgba(10,31,92,.6) !important;
                height: 1.5rem;
                color: #11FEEE;

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

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

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

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

        .risk{
            width: 100%;

 src/views/riskWarningSys/warningBigScreen/index.vue

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

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

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

                            input{
                                font-size: 1.25rem;
                                color: #11FEEE;
                            }
                            .el-icon{
                                color: #11FEEE;
                            }
                        }
                        .selector{
                            width: calc(100% - 1.25rem);
                            margin-right: 0.8rem;

                            ::v-deep(.el-popper){
                                background-color: rgba(10,31,92,1);
                                border: 1px solid rgba(17,254,238,.4);
                                color: #11FEEE;
                                .el-select-dropdown__item{
                                    color: #11FEEE;
                                }
                                .el-select-dropdown__item.hover{
                                    background: #0049af;
                                }
                            }
                            ::v-deep(.el-popper__arrow){
                                &::before{
                                    background-color: rgba(10,31,92,.6) !important;
                                    border: 1px solid rgba(17,254,238,.4);
                                }
                            }
                            ::v-deep(.el-input__wrapper){
                                box-shadow: none;
                                border: 1px solid rgba(17,254,238,.2);
                                background: rgba(10,31,92,.6) !important;
                                height: 1.5rem;
                                color: #11FEEE;

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

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

                        training{
                        .train-chart{
                            width: 100%;
                            height: 100%;
                            height: calc(100% - 1rem);
                        }
                    }
                }
@@ -855,94 +703,10 @@
                        justify-content: space-between;
                        align-items: center;
                        z-index: 9999;
                        div{
                            width: 40%;
                            display: flex;
                            align-items: center;
                            justify-content: end;
                        }
                        span{
                            font-size: 1.25rem;
                            font-weight: bolder;
                            color: #000;
                        }
                        ::v-deep(.el-cascader){
                            width: 25% !important;
                        }
                        ::v-deep(.el-popper){
                            background-color: #fff;
                            border: 1px solid #ccc;
                            color: #000;
                            .el-cascader-node__label{
                                color: #000;
                            }
                            .el-icon{
                                color: #000;
                            }
                            .el-cascader-node{
                                &:hover{
                                    background: #ccc;
                                }
                            }
                        }
                        ::v-deep(.el-popper__arrow){
                            &::before{
                                background-color: #fff !important;
                                border: 1px solid #ccc;
                            }
                        }
                        ::v-deep(.el-input__wrapper){
                            width: 20%;
                            box-shadow: none;
                            border: 1px solid #ccc;
                            background: #fff !important;
                            height: 2.5rem;
                            color: #000;

                            input{
                                font-size: 1.25rem;
                                color: #000;
                            }
                            .el-icon{
                                color: #000;
                            }
                        }
                        .selector{
                            width: calc(100% - 1.25rem);
                            margin-right: 0.8rem;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

@@ -24,7 +24,7 @@
                <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-select v-model="warningType" placeholder="请选择预警类型">
                            <el-option
                                    v-for="item in alertTypeList"
                                    :key="item.id"
@@ -43,7 +43,7 @@
<!--                        <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-button type="primary" :icon="Refresh" size="default" @click="reLoadData"/>-->
<!--                    </el-row>-->
                    <el-table
                            ref="multipleTableRef"
@@ -52,14 +52,14 @@
                            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 type="index" label="序号" width="80"/>
                        <el-table-column property="workPermitNo" label="作业证编号"/>
                        <el-table-column property="workTypeDesc" label="作业类型"/>
                        <el-table-column property="warningContent" show-overflow-tooltip label="预警信息"/>
                        <el-table-column property="warningTypeDesc" label="预警类型"/>
                        <el-table-column property="warningInfo" show-overflow-tooltip label="描述" width="200"/>
                        <el-table-column property="operatorUname" label="上报人"/>
                        <el-table-column property="operationTime" label="上报时间" width="180"/>
                        <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>
@@ -74,7 +74,7 @@
                                small=false
                                background
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="100"
                                :total="totalSize"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                        />
@@ -85,25 +85,28 @@
        <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-input v-model="details.workPermitNo" readonly/>
                </el-form-item>
                <el-form-item label="作业类型">
                    <el-input v-model="details.workType" readonly/>
                    <el-input v-model="details.workTypeDesc" readonly/>
                </el-form-item>
                <el-form-item label="预警信息">
                    <el-input v-model="details.alertInfo" readonly/>
                    <el-input v-model="details.warningContent" readonly/>
                </el-form-item>
                <el-form-item label="预警类型">
                    <el-input v-model="details.alertType" readonly/>
                    <el-input v-model="details.warningTypeDesc" readonly/>
                </el-form-item>
                <el-form-item label="图片" v-if="details.imagePaths && details.imagePaths.length>0">
                    <el-image v-for="item in details.imagePaths" :preview-src-list="details.imagePaths" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="details.desc" type="textarea" readonly/>
                    <el-input v-model="details.warningInfo" type="textarea" readonly/>
                </el-form-item>
                <el-form-item label="上报人">
                    <el-input v-model="details.name" readonly/>
                    <el-input v-model="details.operatorUname" readonly/>
                </el-form-item>
                <el-form-item label="上报时间">
                    <el-input v-model="details.updateTime" readonly/>
                    <el-input v-model="details.operationTime" readonly/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
@@ -122,7 +125,7 @@
    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';
    import { workProcessApi } from '/@/api/specialWorkSystem/workProcess';

    // 定义接口来定义对象的类型
    interface stateType {
@@ -130,7 +133,6 @@
        departmentList: Array<any>;
        department:string;
        workerList: Array<string>;
        casProps: {};
        multipleSelection: Array<any>;
        deleteArr: Array<any>;
        dialogDetails: boolean;
@@ -142,12 +144,9 @@
        chosenIndex: null | number;
        deleteId: null | number;
        searchWord: string;
        searchType: number | null;
        searchAlert: number | null;
        searchType: string;
        warningType: string;
        totalSize: number;
        addRecord: {

        };
        details: {

        };
@@ -168,94 +167,47 @@
                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'
                    }
                ],
                searchType: '',
                warningType: '',
                tableData: [],
                departmentList: [],
                department: '',
                workerList: [],
                casProps: {
                    expandTrigger: 'hover',
                    emitPath: false,
                    value: 'depId',
                    label: 'depName'
                },
                multipleSelection: [],
                dialogDetails: false,
                dialogAddRecord: false,
                deleteDialog: false,
                deleteSetDialog: false,
                addRecord: {

                },
                details: {

                },
                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: '盲板抽堵作业' }
                    { 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: '作业检查' }
                    { id: '1', name: '检查' },
                    { id: '2', name: '检测' }
                ]
            });

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

            // 分页获取班组管理列表
            const getListByPage = async () => {
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } };
                let res = await teamManageApi().getRecordPage(data);
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { workType: state.searchType, workPermitNo: state.searchWord,warningType: state.warningType } };
                let res = await workProcessApi().postAlertList(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.tableData = JSON.parse(JSON.stringify(res.data.data))
                    state.totalSize = res.data.total;
                } else {
                    ElMessage({
@@ -265,36 +217,9 @@
                }
            };

            // 获取部门列表
            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 == '') {
            const searchRecord = () => {
                if (state.searchWord == ''&& state.searchType == ''&& state.warningType == '') {
                    ElMessage({
                        type: 'warning',
                        message: '请输入查询关键词'
@@ -304,9 +229,11 @@
                }
            };

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

            const handleSizeChange = (val: number) => {
@@ -343,7 +270,6 @@
                Delete,
                Refresh,
                Plus,
                handleChange,
                searchRecord,
                clearSearch,
                viewRecord,

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

对比新文件
@@ -0,0 +1,415 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                <el-col :span="8" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">选择时间段：</span>
                    <div class="grid-content topInfo">
                        <el-date-picker
                                v-model="searchDates"
                                type="daterange"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="YYYY-MM-DD"
                                :shortcuts="shortcuts"
                        />
                    </div>
                </el-col>
                <el-button style="margin-left: 20px" type="primary" @click="searchRecord">查询</el-button>
                <el-button plain @click="clearSearch">重置</el-button>
            </el-row>
            <div class="homeCard">
                <div :id="chartName" style="width: 100%;height: 100%"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, ref, onMounted, defineAsyncComponent, nextTick} 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, ElMessage, ElMessageBox } from 'element-plus'
    import { workAppointApi } from '/@/api/specialWorkSystem/workPlan/workAppoint';
    import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';
    import * as echarts from "echarts";

    // 定义接口来定义对象的类型
    interface stateType {
        tableData: [],
        departmentList: [],
        hotCount: [],
        confinedSpaceCount: [],
        liftingCount: [],
        groundBreakingCount: [],
        openCircuitCout: [],
        heightCount: [],
        temporaryPowerCount: [],
        blindPlatePluggingCount: [],
        searchDates: Array<any>,
        startTime: String,
        endTime: String
    }

    export default {
        name: 'workReservation',
        components: {},
        setup() {
            const userInfo = useUserInfo();
            const { userInfos } = storeToRefs(userInfo);
            const state = reactive<stateType>({
                tableData: [],
                departmentList: [],
                hotCount: [],
                confinedSpaceCount: [],
                liftingCount: [],
                groundBreakingCount: [],
                openCircuitCout: [],
                heightCount: [],
                temporaryPowerCount: [],
                blindPlatePluggingCount: [],
                searchDates: '',
                startTime: '',
                endTime: ''
            });
            const chartName = ref("eChart" + Date.now() + Math.random())
            const shortcuts = [
                {
                    text: '上周',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                    },
                },
                {
                    text: '上个月',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        return [start, end]
                    },
                },
                {
                    text: '上个季度',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        return [start, end]
                    },
                },
            ]

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

            // 获取列表
            const getListByPage = async () => {
                console.log(state.searchDates)
                const data = { startTime: state.searchDates[0], endTime: state.searchDates[1] };
                let res = await workAppointApi().getAllRecords(data);
                if (res.data.code === '200') {
                    if(JSON.parse(JSON.stringify(res.data.data)).length>0){
                        state.tableData = JSON.parse(JSON.stringify(res.data.data))
                        state.departmentList = Array.from(state.tableData, ({ applyDepName }) => applyDepName);
                        state.hotCount = Array.from(state.tableData, ({ hotCount }) => hotCount);
                        state.confinedSpaceCount = Array.from(state.tableData, ({ confinedSpaceCount }) => confinedSpaceCount);
                        state.liftingCount = Array.from(state.tableData, ({ liftingCount }) => liftingCount);
                        state.groundBreakingCount = Array.from(state.tableData, ({ groundBreakingCount }) => groundBreakingCount);
                        state.openCircuitCout = Array.from(state.tableData, ({ openCircuitCout }) => openCircuitCout);
                        state.heightCount = Array.from(state.tableData, ({ heightCount }) => heightCount);
                        state.temporaryPowerCount = Array.from(state.tableData, ({ temporaryPowerCount }) => temporaryPowerCount);
                        state.blindPlatePluggingCount = Array.from(state.tableData, ({ blindPlatePluggingCount }) => blindPlatePluggingCount);
                        initCharts()
                    }else{
                        ElMessage({
                            type: 'warning',
                            message: '该时段暂无数据'
                        });
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

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

                type EChartsOption = echarts.EChartsOption
                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: state.departmentList
                    },
                    series: [
                        {
                            name: '动火作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: state.hotCount
                        },
                        {
                            name: '受限空间作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: state.confinedSpaceCount
                        },
                        {
                            name: '吊装作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: state.liftingCount
                        },
                        {
                            name: '动土作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: state.groundBreakingCount
                        },
                        {
                            name: '断路作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: state.openCircuitCout
                        },
                        {
                            name: '高处作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: state.heightCount
                        },
                        {
                            name: '临时用电作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: state.temporaryPowerCount
                        },
                        {
                            name: '盲板抽堵作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: state.blindPlatePluggingCount
                        }
                    ]
                };

                option && myChart.setOption(option);

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

            // 关键词查询记录
            const searchRecord = async () => {
                if (state.searchDates == []) {
                    ElMessage({
                        type: 'warning',
                        message: '请选择时间段'
                    });
                } else {
                    getListByPage();
                }
            };

            const clearSearch = async () => {
                state.searchDates = [];
                getListByPage();
            };

            // 刷新
            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,
                Search,
                shortcuts,
                chartName,
                searchRecord,
                clearSearch,
                getListByPage,
                reLoadData,
                ...toRefs(state)
            };
        }
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .red{
        color: red;
    }
    .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;
    }
    ::v-deep(.el-date-editor){
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
    :deep(.el-cascader){
        width: 100% !important;
    }
</style>

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

对比新文件
@@ -0,0 +1,616 @@
<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-cascader v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
                    </div>
                </el-col>
                <el-col :span="6" style="display:flex;align-items: center;">
                    <span style="white-space: nowrap;margin-left: 20px">预约日期：</span>
                    <div class="grid-content topInfo">
                        <el-date-picker
                                v-model="searchDate"
                                type="date"
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        />
                    </div>
                </el-col>
                <el-button style="margin-left: 20px" 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" @click="reLoadData"/>-->
<!--                    </el-row>-->
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            height="calc(100% - 48px)"
                            :header-cell-style="{background: '#fafafa'}"
                    >
<!--                        <el-table-column type="selection" width="55" />-->
                        <el-table-column type="index" label="序号" width="80" />
                        <el-table-column prop="applyDepName" align="center" label="申请部门"/>
                        <el-table-column prop="appointmentTime" align="center" label="预约时间"/>
                        <el-table-column prop="hotWork" align="center" label="动火作业"/>
                        <el-table-column prop="confinedSpaceOper" align="center" label="受限空间作业"/>
                        <el-table-column prop="liftingOper" align="center" label="吊装作业"/>
                        <el-table-column prop="groundBreakingOper" align="center" label="动土作业"/>
                        <el-table-column prop="openCircuitOper" align="center" label="断路作业"/>
                        <el-table-column prop="workAtHeight" align="center" label="高处作业" />
                        <el-table-column prop="temporaryPowerOper" align="center" label="临时用电作业"/>
                        <el-table-column prop="blindPlatePluggingOper" align="center" 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>-->
<!--                                <el-button link type="primary" size="small" :icon="Edit" @click="editRecordBtn(scope.$index, scope.row)">修改</el-button>-->
<!--                                <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(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="totalSize"
                                @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.applyDepName"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="预约时间">
                    <el-input
                            v-model="details.appointmentTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="动火作业">
                    <el-input
                            v-model="details.hotWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                    <el-input
                            v-model="details.confinedSpaceOper"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
                    <el-input
                            v-model="details.liftingOper"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="动土作业">
                    <el-input
                            v-model="details.groundBreakingOper"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                    <el-input
                            v-model="details.openCircuitOper"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="高处作业">
                    <el-input
                            v-model="details.workAtHeight"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                    <el-input
                            v-model="details.temporaryPowerOper"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="盲板抽堵作业">
                    <el-input
                            v-model="details.blindPlatePluggingOper"
                            readonly
                    />
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="dialogDetails = false">确认</el-button>
              </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="作业预约编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="申请部门" prop="applyDepId">
                    <el-cascader :disabled = isDisabled v-model="addRecord.applyDepId" :options="departmentList" :props="casProps" :show-all-levels="false" @change="handleChange" />
                </el-form-item>
                <el-form-item label="预约时间" prop="appointmentTime">
                    <el-date-picker
                            v-model="addRecord.appointmentTime"
                            type="date"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            :disabled = isDisabled
                    />
                </el-form-item>
                <el-form-item label="动火作业" prop="hotWork">
                    <el-input
                            v-model="addRecord.hotWork"
                    />
                </el-form-item>
                <el-form-item label="受限空间作业" prop="confinedSpaceOper">
                    <el-input
                            v-model="addRecord.confinedSpaceOper"
                    />
                </el-form-item>
                <el-form-item label="吊装作业" prop="liftingOper">
                    <el-input
                            v-model="addRecord.liftingOper"
                    />
                </el-form-item>
                <el-form-item label="动土作业" prop="groundBreakingOper">
                    <el-input
                            v-model="addRecord.groundBreakingOper"
                    />
                </el-form-item>
                <el-form-item label="断路作业" prop="openCircuitOper">
                    <el-input
                            v-model="addRecord.openCircuitOper"
                    />
                </el-form-item>
                <el-form-item label="高处作业" prop="workAtHeight">
                    <el-input
                            v-model="addRecord.workAtHeight"
                    />
                </el-form-item>
                <el-form-item label="临时用电作业" prop="temporaryPowerOper">
                    <el-input
                            v-model="addRecord.temporaryPowerOper"
                    />
                </el-form-item>
                <el-form-item label="盲板抽堵作业" prop="blindPlatePluggingOper">
                    <el-input
                            v-model="addRecord.blindPlatePluggingOper"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
              </span>
            </template>
        </el-dialog>
        <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">
            <span>您确定要删除该条记录吗？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="deleteDialog = false" size="default">取消</el-button>
                    <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, ref, onMounted, defineAsyncComponent} 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, ElMessage, ElMessageBox } from 'element-plus'
    import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
    import { workAppointApi } from '/@/api/specialWorkSystem/workPlan/workAppoint';
    import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';

    // 定义接口来定义对象的类型
    interface stateType {
        tableData: Array<any>;
        departmentList: Array<any>;
        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;
        searchDep: number | null;
        searchDate: string;
        isDisabled:boolean;
        totalSize: number;
        addRecord: {

        };
        details: {

        };
        workTypeList: Array<any>
    }

    export default {
        name: 'workReservation',
        components: {},
        setup() {
            const userInfo = useUserInfo();
            const { userInfos } = storeToRefs(userInfo);
            const state = reactive<stateType>({
                pageIndex: 1,
                pageSize: 10,
                totalSize: 0,
                chosenIndex: null,
                searchDep: null,
                searchDate: '',
                isDisabled: false,
                tableData: [],
                departmentList: [],
                casProps: {
                    expandTrigger: 'hover',
                    emitPath: false,
                    value: 'depId',
                    label: 'depName',
                    checkStrictly: true
                },
                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>({
                applyDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                appointmentTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                hotWork: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                groundBreakingOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                blindPlatePluggingOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                temporaryPowerOper    : [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workAtHeight: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                openCircuitOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                liftingOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                confinedSpaceOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
            });

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

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

            // 分页获取气体检测列表
            const getListByPage = async () => {
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { applyDepId: state.searchDep, appointmentTime: state.searchDate } };
                let res = await workAppointApi().getAppointListPage(data);
                if (res.data.code === '200') {
                    state.tableData = JSON.parse(JSON.stringify(res.data.data))
                    state.totalSize = res.data.total;
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

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

            const clearSearch = async () => {
                state.searchDep = null;
                state.searchDate = '';
                getListByPage();
            };

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

            // 修改记录方法
            const editRecord = async (data: any) => {
                let res = await workAppointApi().editRecord(data);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    });
                    getListByPage();
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            // 点击修改
            const editRecordBtn = (index, row) => {
                state.dialogAddRecord = true;
                state.chosenIndex = index;
                state.addRecord = JSON.parse(JSON.stringify(row));
                state.isDisabled = true
            };

            // 新增修改记录
            const confirmAddRecord = async (formEl: FormInstance | undefined) => {
                if (!formEl) return;
                await formEl.validate(async (valid, fields) => {
                    if (valid) {
                        const data = {
                            applyDepId: state.addRecord.applyDepId,
                            appointmentTime: state.addRecord.appointmentTime,
                            hotWork: Number(state.addRecord.hotWork),
                            groundBreakingOper: Number(state.addRecord.groundBreakingOper),
                            blindPlatePluggingOper: Number(state.addRecord.blindPlatePluggingOper),
                            temporaryPowerOper: Number(state.addRecord.temporaryPowerOper),
                            workAtHeight: Number(state.addRecord.workAtHeight),
                            openCircuitOper: Number(state.addRecord.openCircuitOper),
                            liftingOper: Number(state.addRecord.liftingOper),
                            confinedSpaceOper: Number(state.addRecord.confinedSpaceOper),
                        };
                        if (state.chosenIndex == null) {
                            await addRecord(data);
                        } else {
                            data.id = state.addRecord.id
                            await editRecord(data);
                        }
                        state.dialogAddRecord = false;
                        getListByPage();
                    } 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 deleteRecord = async (data: any) => {
                let res = await workAppointApi().deleteRecord(data);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    });
                    getListByPage();
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            const deleteRecordBtn = (row) => {
                state.deleteId = row.id;
                state.deleteDialog = true;
            };

            const conFirmDelete = () => {
                deleteRecord({ id: state.deleteId });
                state.deleteDialog = false;
            };


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

            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,
                Search,
                searchRecord,
                clearSearch,
                viewRecord,
                editRecordBtn,
                deleteRecordBtn,
                conFirmDelete,
                getListByPage,
                reLoadData,
                handleSizeChange,
                handleCurrentChange,
                confirmAddRecord,
                closeAdd,
                indexClear,
                ...toRefs(state)
            };
        }
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .red{
        color: red;
    }
    .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;
    }
    ::v-deep(.el-date-editor){
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
    :deep(.el-cascader){
        width: 100% !important;
    }
</style>

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

文件已删除

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

@@ -1,429 +1,616 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
            <el-col :span="14">
                <div class="grid-content topInfo">
                    <div>当前所属部门：<span>电工部</span></div>
                    <el-date-picker
                            v-model="searchTime"
                            type="datetime"
                            placeholder="预约时间"
                            size="large"
                            style="width: 100%;white-space: nowrap;margin-right: 20px"
                    />
                    <el-select v-model="typeValue" placeholder="请选择预约类型" style="width: 100%">
                        <el-option label="类型1" value="类型1"/>
                        <el-option label="类型2" value="类型2"/>
                        <el-option label="类型3" value="类型3"/>
                    </el-select>
                    <el-button type="primary">查询</el-button>
                    <el-button plain>重置</el-button>
        <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-cascader v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
                    </div>
                </el-col>
                <el-col :span="6" style="display:flex;align-items: center;">
                    <span style="white-space: nowrap;margin-left: 20px">预约日期：</span>
                    <div class="grid-content topInfo">
                        <el-date-picker
                                v-model="searchDate"
                                type="date"
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        />
                    </div>
                </el-col>
                <el-button style="margin-left: 20px" 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" @click="reLoadData"/>
                    </el-row>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            height="calc(100% - 100px)"
                            :header-cell-style="{background: '#fafafa'}"
                    >
<!--                        <el-table-column type="selection" width="55" />-->
                        <el-table-column type="index" label="序号" width="80" />
                        <el-table-column prop="applyDepName" align="center" label="申请部门"/>
                        <el-table-column prop="appointmentTime" align="center" label="预约时间"/>
                        <el-table-column prop="hotWork" align="center" label="动火作业"/>
                        <el-table-column prop="confinedSpaceOper" align="center" label="受限空间作业"/>
                        <el-table-column prop="liftingOper" align="center" label="吊装作业"/>
                        <el-table-column prop="groundBreakingOper" align="center" label="动土作业"/>
                        <el-table-column prop="openCircuitOper" align="center" label="断路作业"/>
                        <el-table-column prop="workAtHeight" align="center" label="高处作业" />
                        <el-table-column prop="temporaryPowerOper" align="center" label="临时用电作业"/>
                        <el-table-column prop="blindPlatePluggingOper" align="center" 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>
                                <el-button link type="primary" size="small" :icon="Edit" @click="editRecordBtn(scope.$index, scope.row)">修改</el-button>
                                <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(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="totalSize"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </el-col>
        </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-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" width="120" />
                    <el-table-column prop="time" label="预约时间" width="150" />
                    <el-table-column prop="department" label="预约部门" width="180" />
                    <el-table-column prop="dirtyWork" label="动土作业" width="100" />
                    <el-table-column prop="fireWork" label="动火作业" width="100" />
                    <el-table-column prop="hangWork" label="吊装作业" width="100" />
                    <el-table-column prop="spaceWork" label="受限空间作业"/>
                    <el-table-column prop="cut" label="断路作业"/>
                    <el-table-column prop="high" label="高处作业" />
                    <el-table-column prop="block" label="盲板抽堵作业"/>
                    <el-table-column prop="tempUse" 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>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <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>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="作业预约">
            <el-form :model="details" label-width="120px">
                <el-form-item label="申请部门">
                    <el-input
                            v-model="details.applyDepName"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="预约时间">
                    <el-input
                            v-model="details.time"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="预约部门">
                    <el-input
                            v-model="details.department"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="动土作业">
                    <el-input
                            v-model="details.dirtyWork"
                            v-model="details.appointmentTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="动火作业">
                    <el-input
                            v-model="details.fireWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
                    <el-input
                            v-model="details.hangWork"
                            v-model="details.hotWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                    <el-input
                            v-model="details.spaceWork"
                            v-model="details.confinedSpaceOper"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
                    <el-input
                            v-model="details.liftingOper"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="动土作业">
                    <el-input
                            v-model="details.groundBreakingOper"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                    <el-input
                            v-model="details.cut"
                            v-model="details.openCircuitOper"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="高处作业">
                    <el-input
                            v-model="details.high"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="盲板抽堵作业">
                    <el-input
                            v-model="details.block"
                            v-model="details.workAtHeight"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                    <el-input
                            v-model="details.tempUse"
                            v-model="details.temporaryPowerOper"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                <el-form-item label="盲板抽堵作业">
                    <el-input
                            v-model="details.blindPlatePluggingOper"
                            readonly
                    />
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="dialogDetails = false">确认</el-button>
              </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="作业预约编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="预约时间" prop="time">
                <el-form-item label="申请部门" prop="applyDepId">
                    <el-cascader placeholder="若选择部门非本人所在部门，则记录不会出现在该页面" :disabled = isDisabled v-model="addRecord.applyDepId" :options="departmentList" :props="casProps" :show-all-levels="false" @change="handleChange" />
                </el-form-item>
                <el-form-item label="预约时间" prop="appointmentTime">
                    <el-date-picker
                            v-model="addRecord.time"
                            type="datetime"
                            format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                            v-model="addRecord.appointmentTime"
                            type="date"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            :disabled = isDisabled
                    />
                </el-form-item>
                <el-form-item label="预约部门" prop="department">
                    <el-select v-model="addRecord.department" placeholder="请选择">
                        <el-option label="部门一" value="部门一" />
                        <el-option label="部门二" value="部门二" />
                    </el-select>
                </el-form-item>
                <el-form-item label="动土作业">
                <el-form-item label="动火作业" prop="hotWork">
                    <el-input
                            v-model="addRecord.dirtyWork"
                            v-model="addRecord.hotWork"
                    />
                </el-form-item>
                <el-form-item label="动火作业">
                <el-form-item label="受限空间作业" prop="confinedSpaceOper">
                    <el-input
                            v-model="addRecord.fireWork"
                            v-model="addRecord.confinedSpaceOper"
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
                <el-form-item label="吊装作业" prop="liftingOper">
                    <el-input
                            v-model="addRecord.hangWork"
                            v-model="addRecord.liftingOper"
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                <el-form-item label="动土作业" prop="groundBreakingOper">
                    <el-input
                            v-model="addRecord.spaceWork"
                            v-model="addRecord.groundBreakingOper"
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                <el-form-item label="断路作业" prop="openCircuitOper">
                    <el-input
                            v-model="addRecord.cut"
                            v-model="addRecord.openCircuitOper"
                    />
                </el-form-item>
                <el-form-item label="高处作业">
                <el-form-item label="高处作业" prop="workAtHeight">
                    <el-input
                            v-model="addRecord.high"
                            v-model="addRecord.workAtHeight"
                    />
                </el-form-item>
                <el-form-item label="盲板抽堵作业">
                <el-form-item label="临时用电作业" prop="temporaryPowerOper">
                    <el-input
                            v-model="addRecord.block"
                            v-model="addRecord.temporaryPowerOper"
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                <el-form-item label="盲板抽堵作业" prop="blindPlatePluggingOper">
                    <el-input
                            v-model="addRecord.tempUse"
                            v-model="addRecord.blindPlatePluggingOper"
                    />
                </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>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
              </span>
            </template>
        </el-dialog>
        <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">
            <span>您确定要删除该条记录吗？</span>
            <template #footer>
          <span class="dialog-footer">
              <el-button @click="deleteDialog = false" size="default">取消</el-button>
            <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
          </span>
                <span class="dialog-footer">
                    <el-button @click="deleteDialog = false" size="default">取消</el-button>
                    <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
    import { toRefs, reactive, ref } from 'vue';
<script lang="ts">
    import {toRefs, reactive, ref, onMounted, defineAsyncComponent} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    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, FormInstance, FormRules } from 'element-plus'
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    };
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
    import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
    import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
    import { workReserveApi } from '/@/api/specialWorkSystem/workPlan/workReservation';
    import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';

    // 定义接口来定义对象的类型
    interface stateType {
        homeOne: Array <type>
    }
    interface type {
        tableData: Array<any>;
        departmentList: Array<any>;
        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;
        searchDep: number | null;
        searchDate: string;
        isDisabled:boolean;
        totalSize: number;
        addRecord: {

        };
        details: {

        };
        workTypeList: Array<any>
    }
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()

    export default {
        name: 'workReservation',
        components: {},
        setup() {
            const userInfo = useUserInfo();
            const { userInfos } = storeToRefs(userInfo);
            const typeValue = ref('')
            const currentPage = ref(1)
            const pageSize = ref(10)
            const chosenIndex = ref(-1)
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const tableData = reactive(
                    [
                        {
                            time: '2022-06-29 12:32:52',
                            department: '电工部',
                            dirtyWork: '',
                            fireWork: '',
                            hangWork: '',
                            spaceWork: '',
                            cut: '',
                            high: '',
                            block: '',
                            tempUse: ''
                        },
                        {
                            time: '2022-06-29 12:32:52',
                            department: '电工部',
                            dirtyWork: '',
                            fireWork: '',
                            hangWork: '',
                            spaceWork: '',
                            cut: '',
                            high: '',
                            block: '',
                            tempUse: ''
                        },
                        {
                            time: '2022-06-29 12:32:52',
                            department: '土木',
                            dirtyWork: '',
                            fireWork: '',
                            hangWork: '',
                            spaceWork: '',
                            cut: '',
                            high: '',
                            block: '',
                            tempUse: ''
                        }
            const state = reactive<stateType>({
                pageIndex: 1,
                pageSize: 10,
                totalSize: 0,
                chosenIndex: null,
                searchDep: null,
                searchDate: '',
                isDisabled: false,
                tableData: [],
                departmentList: [],
                casProps: {
                    expandTrigger: 'hover',
                    emitPath: false,
                    value: 'depId',
                    label: 'depName',
                    checkStrictly: true
                },
                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>({
                time:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                department:[{required: true, message: '该内容不能为空',trigger:'blur'}]
            })
            const dialogDetails = ref(false)
            const dialogAddRecord = ref(false)
            const deleteDialog = ref(false)
            const addRecord = ref({})
            const details = ref({})
            const viewRecord = (row) =>{
                details.value = JSON.parse(JSON.stringify(row))
                dialogDetails.value = true
            }
            const deleteRecord = (index) =>{
                chosenIndex.value = index
                deleteDialog.value = true
            }
            const conFirmDelete = ()=> {
                tableData.splice(chosenIndex.value,1)
                deleteDialog.value = false
            }
            const confirmAddRecord = async (formEl: FormInstance | undefined) =>{
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if(chosenIndex.value == -1){
                            tableData.unshift(addRecord.value)
                        }else{
                            tableData[chosenIndex.value] = addRecord.value
                        }
                        dialogAddRecord.value =false
                    } else {
                        console.log('error submit!', fields)
                    }
                })
            });

            }
            const closeAdd =()=>{
                addRecord.value={}
                chosenIndex.value = -1
            }
            const indexClear = ()=>{
                chosenIndex.value = -1
            }
            const editRecord =(index, row)=>{
                dialogAddRecord.value = true
                chosenIndex.value = index
                addRecord.value = JSON.parse(JSON.stringify(row))
            }
            const addRef = ref<FormInstance>();
            const addRules = reactive<FormRules>({
                applyDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                appointmentTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                hotWork: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                groundBreakingOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                blindPlatePluggingOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                temporaryPowerOper    : [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workAtHeight: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                openCircuitOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                liftingOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                confinedSpaceOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
            });

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

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

            // 分页获取气体检测列表
            const getListByPage = async () => {
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { applyDepId: state.searchDep, appointmentTime: state.searchDate } };
                let res = await workReserveApi().getReserveListPage(data);
                if (res.data.code === '200') {
                    state.tableData = JSON.parse(JSON.stringify(res.data.data))
                    state.totalSize = res.data.total;
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

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

            const clearSearch = async () => {
                state.searchDep = null;
                state.searchDate = '';
                getListByPage();
            };

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

            // 修改记录方法
            const editRecord = async (data: any) => {
                let res = await workReserveApi().editRecord(data);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    });
                    getListByPage();
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            // 点击修改
            const editRecordBtn = (index, row) => {
                state.dialogAddRecord = true;
                state.chosenIndex = index;
                state.addRecord = JSON.parse(JSON.stringify(row));
                state.isDisabled = true
            };

            // 新增修改记录
            const confirmAddRecord = async (formEl: FormInstance | undefined) => {
                if (!formEl) return;
                await formEl.validate(async (valid, fields) => {
                    if (valid) {
                        const data = {
                            applyDepId: state.addRecord.applyDepId,
                            appointmentTime: state.addRecord.appointmentTime,
                            hotWork: Number(state.addRecord.hotWork),
                            groundBreakingOper: Number(state.addRecord.groundBreakingOper),
                            blindPlatePluggingOper: Number(state.addRecord.blindPlatePluggingOper),
                            temporaryPowerOper: Number(state.addRecord.temporaryPowerOper),
                            workAtHeight: Number(state.addRecord.workAtHeight),
                            openCircuitOper: Number(state.addRecord.openCircuitOper),
                            liftingOper: Number(state.addRecord.liftingOper),
                            confinedSpaceOper: Number(state.addRecord.confinedSpaceOper),
                        };
                        if (state.chosenIndex == null) {
                            await addRecord(data);
                        } else {
                            data.id = state.addRecord.id
                            await editRecord(data);
                        }
                        state.dialogAddRecord = false;
                        getListByPage();
                    } 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 deleteRecord = async (data: any) => {
                let res = await workReserveApi().deleteRecord(data);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    });
                    getListByPage();
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            const deleteRecordBtn = (row) => {
                state.deleteId = row.id;
                state.deleteDialog = true;
            };

            const conFirmDelete = () => {
                deleteRecord({ id: state.deleteId });
                state.deleteDialog = false;
            };


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

            const indexClear = () => {
                state.deleteId = null;
            };

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

<style scoped lang="scss">
    $homeNavLengh: 8;
    .red{
        color: red;
    }
    .home-container {
        height: 100%;
        height: calc(100vh - 144px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;
        .homeCard{
        .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{
        .el-row {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
            .grid-content {
                align-items: center;
                min-height: 36px;
            }

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

                &>div{
                & > div {
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
    ::v-deep(.el-date-editor){
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
    :deep(.el-cascader){
        width: 100% !important;
    }
</style>

 src/views/specialWorkSystem/workProcess/components/dialogPermitNo.vue

对比新文件
@@ -0,0 +1,225 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8" style="display:flex;align-items: center">
                <div class="grid-content topInfo">
                    <el-input v-model="searchNo" placeholder="请输入作业证编号"></el-input>
                </div>
            </el-col>
            <el-col :span="8" style="display:flex;align-items: center">
                <div class="grid-content topInfo">
                    <el-select v-model="workType" placeholder="请选择作业类型">
                        <el-option
                                v-for="item in workTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </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-table
                            :data="tableData"
                            ref="singleTableRef"
                            highlight-current-row
                            style="width: 100%"
                            @current-change="handleCurrentChange"
                            :header-cell-style="{background: '#fafafa'}"
                    >
                        <el-table-column type="index" label="序号" width="80"/>
                        <el-table-column property="workPermitNo" label="作业证编号"/>
                        <el-table-column property="workTypeDesc" label="作业类型"/>
                    </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="totalSize"-->
<!--                                @size-change="handleSizeChange"-->
<!--                                @current-change="handleCurrentChange"-->
<!--                        />-->
<!--                    </div>-->
                </div>
            </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,ElTable } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import {workProcessApi} from "/@/api/specialWorkSystem/workProcess";


    interface stateType {
        workPermitNo: string
        searchNo: string
        workType: number
    }
    export default defineComponent({
        name: 'permitNo',
        components: {},
        props:[],
        setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const currentRow = ref()
            const singleTableRef = ref<InstanceType<typeof ElTable>>()
            const state  = reactive<stateType>({
                workPermitNo: '',
                searchNo: '',
                workType: null,
                tableData: [],
                workTypeList: [
                    {
                        label: "动火作业",
                        value: 1
                    },
                    {
                        label: "受限空间作业",
                        value: 2
                    },
                    {
                        label: "吊装作业",
                        value: 3
                    },
                    {
                        label: "动土作业",
                        value: 4
                    },
                    {
                        label: "断路作业",
                        value: 5
                    },
                    {
                        label: "高处作业",
                        value: 6
                    },
                    {
                        label: "临时用电作业",
                        value: 7
                    },
                    {
                        label: "盲板抽堵作业",
                        value: 8
                    }
                ]
            });
            const handleCurrentChange = (val: User | undefined) => {
                currentRow.value = val
                state.workPermitNo = currentRow.value.workPermitNo
            }
            // 获取作业编号列表
            const getAllReport = async (data)=>{
                const res = await workProcessApi().postReportList({workPermitNo: state.searchNo,workType: state.workType})
                if (res.data.code === '200') {
                    state.tableData = JSON.parse(JSON.stringify(res.data.data))
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };
            // 关键词查询记录
            const searchRecord = async () => {
                if (state.searchNo == ''&& state.workType == null) {
                    ElMessage({
                        type: 'warning',
                        message: '请输入查询关键词'
                    });
                } else {
                    getAllReport();
                }
            };

            const clearSearch = async () => {
                state.searchNo = '';
                state.workType = null;
                getAllReport();
            };
            // 页面载入时执行方法
            onMounted(() => {
                getAllReport()
            });

            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                currentRow,
                singleTableRef,
                searchRecord,
                clearSearch,
                handleCurrentChange,
                Search,
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped lang="scss">
    .home-container {
        height: 100%;
        overflow: hidden;
        position: relative;
        .homeCard{
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .applyBtn{
            width: 100%;
            background: #fff;
            padding-top: 15px;
            z-index: 5;
            box-shadow: 0 -3px 8px rgba(150,150,150,.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .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/specialWorkSystem/workProcess/gasCheck/index.vue

@@ -5,15 +5,15 @@
                <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>
                        <el-input v-model="workPermitNo" placeholder="请输入作业证编号"></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-select v-model="workType" placeholder="请选择作业类型">
                            <el-option
                                    v-for="item in workType"
                                    v-for="item in workTypeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
@@ -30,30 +30,29 @@
                        <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-button type="primary" :icon="Refresh" size="default" @click="reLoadData"/>
                    </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="combustible" label="可燃气%">
                            <template #default="scope">
                                <span :class="scope.row.combustible > 0 ? 'red': ''">{{ scope.row.combustible }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="80"/>
                        <el-table-column property="workPermitNo" label="作业证编号"/>
                        <el-table-column property="workTypeDesc" label="作业类型"/>
                        <el-table-column property="combustible" label="可燃气%"/>
<!--                        <el-table-column property="combustible" label="可燃气%">-->
<!--                            <template #default="scope">-->
<!--                                <span :class="scope.row.combustible > 0 ? 'red': ''">{{ scope.row.combustible }}</span>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
                        <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 property="carbonMonoxide" label="一氧化碳ppm"/>
                        <el-table-column property="hydrogenSulfide" label="硫化氢ppm"/>
                        <el-table-column property="info" label="描述" show-overflow-tooltip width="200"/>
                        <el-table-column property="operatorUname" label="分析人"/>
                        <el-table-column property="operationTime" label="分析时间" align="center" width="180"/>
                        <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>
@@ -68,7 +67,7 @@
                                small=false
                                background
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="100"
                                :total="totalSize"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                        />
@@ -79,10 +78,10 @@
        <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-input v-model="details.workPermitNo" readonly/>
                </el-form-item>
                <el-form-item label="作业类型">
                    <el-input v-model="details.workType" readonly/>
                    <el-input v-model="details.workTypeDesc" readonly/>
                </el-form-item>
                <el-form-item label="可燃气%">
                    <el-input v-model="details.combustible" readonly/>
@@ -91,38 +90,40 @@
                    <el-input v-model="details.oxygen" readonly/>
                </el-form-item>
                <el-form-item label="一氧化碳ppm">
                    <el-input v-model="details.co" readonly/>
                    <el-input v-model="details.carbonMonoxide" readonly/>
                </el-form-item>
                <el-form-item label="硫化氢ppm">
                    <el-input v-model="details.hs" readonly/>
                    <el-input v-model="details.hydrogenSulfide" readonly/>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="details.desc" type="textarea" readonly/>
                    <el-input v-model="details.info" type="textarea" readonly/>
                </el-form-item>
                <el-form-item label="分析人">
                    <el-input v-model="details.name" readonly/>
                    <el-input v-model="details.operatorUname" 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-input v-model="details.operationTime" readonly/>
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="dialogDetails = false">确认</el-button>
              </span>
            </template>
        </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-form-item label="作业证编号" prop="workPermitNo">
                    <el-input v-model="addRecord.workPermitNo" placeholder="作业编号须为已审批作业的编号，可点击右方按钮查询">
                        <template #append>
                            <el-button :icon="Search" />
                            <el-button :icon="Search" @click="dialogPermitNo = true"/>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="作业类型" prop="groupMembers">
                    <el-select v-model="addRecord.groupMembers">
                <el-form-item label="作业类型" prop="workType">
                    <el-select v-model="addRecord.workType">
                        <el-option
                                v-for="item in workType"
                                v-for="item in workTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
@@ -135,34 +136,45 @@
                <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 label="一氧化碳ppm" prop="carbonMonoxide">
                    <el-input v-model="addRecord.carbonMonoxide"/>
                </el-form-item>
                <el-form-item label="硫化氢ppm" prop="oxygen">
                    <el-input v-model="addRecord.hs"/>
                <el-form-item label="硫化氢ppm" prop="hydrogenSulfide">
                    <el-input v-model="addRecord.hydrogenSulfide"/>
                </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 label="描述" prop="info">
                    <el-input v-model="addRecord.info" type="textarea"> </el-input>
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
              </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogPermitNo" title="选择相应的作业编号">
            <permit-no ref="permitNoInfo"></permit-no>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="warning" @click="dialogPermitNo = false" size="default" plain>取消</el-button>
                <el-button type="primary" @click="confirmPermitNo" size="default">确认</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, ref, onMounted } from 'vue';
    import {toRefs, reactive, ref, onMounted, defineAsyncComponent} 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 type { FormInstance, FormRules } from 'element-plus'
    import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';
    import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
    import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
    import { workProcessApi } from '/@/api/specialWorkSystem/workProcess';

    // 定义接口来定义对象的类型
    interface stateType {
@@ -175,14 +187,15 @@
        deleteArr: Array<any>;
        dialogDetails: boolean;
        dialogAddRecord: boolean;
        dialogPermitNo: boolean;
        deleteDialog: boolean;
        deleteSetDialog: boolean;
        pageIndex: number;
        pageSize: number;
        chosenIndex: null | number;
        deleteId: null | number;
        searchWord: string;
        searchType: number | null;
        workPermitNo: string;
        workType: number | null;
        totalSize: number;
        addRecord: {

@@ -190,58 +203,26 @@
        details: {

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

    export default {
        name: 'gasCheck',
        components: {},
        components: {
            permitNo: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workProcess/components/dialogPermitNo.vue'))
        },
        setup() {
            const userInfo = useUserInfo();
            const { userInfos } = storeToRefs(userInfo);

            const permitNoInfo = ref()
            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'
                    }
                ],
                workPermitNo: '',
                workType: null,
                tableData: [],
                departmentList: [],
                department: '',
                workerList: [],
@@ -254,6 +235,7 @@
                multipleSelection: [],
                dialogDetails: false,
                dialogAddRecord: false,
                dialogPermitNo: false,
                deleteDialog: false,
                deleteSetDialog: false,
                addRecord: {
@@ -264,7 +246,7 @@
                },
                deleteId: null,
                deleteArr: [],
                workType: [
                workTypeList: [
                    { id: 1, name: '动火作业' },
                    { id: 2, name: '受限空间作业' },
                    { id: 3, name: '吊装作业' },
@@ -278,36 +260,26 @@

            const addRef = ref<FormInstance>();
            const addRules = reactive<FormRules>({
                id: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workPermitNo: [{ 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' }]
                carbonMonoxide: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                hydrogenSulfide: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                info: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
            });

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

            // 分页获取班组管理列表
            // 分页获取气体检测列表
            const getListByPage = async () => {
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } };
                let res = await teamManageApi().getRecordPage(data);
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { workType: state.workType, workPermitNo: state.workPermitNo } };
                let res = await workProcessApi().getDetectionListPage(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.tableData = JSON.parse(JSON.stringify(res.data.data))
                    state.totalSize = res.data.total;
                } else {
                    ElMessage({
@@ -317,36 +289,21 @@
                }
            };

            // 获取部门列表
            const getAllDepartment = async () => {
                let res = await teamManageApi().getAllDepartment();
                if (res.data.code === '200') {
                    state.departmentList = res.data.data;
                } else {
            const confirmPermitNo = ()=>{
                if(permitNoInfo.value.workPermitNo == ''){
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                        message: '请选择相应的作业编码'
                    });
                }else{
                    state.addRecord.workPermitNo = permitNoInfo.value.workPermitNo
                    state.dialogPermitNo = false
                }
            };

            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 == '') {
                if (state.workPermitNo == ''&& state.workType == null) {
                    ElMessage({
                        type: 'warning',
                        message: '请输入查询关键词'
@@ -357,13 +314,14 @@
            };

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

            // 添加班组管理方法
            // 添加气体检测方法
            const addRecord = async (data: any) => {
                let res = await teamManageApi().addRecord(data);
                let res = await workProcessApi().postDetectionReport(data);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
@@ -384,18 +342,17 @@
                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
                            workPermitNo: state.addRecord.workPermitNo,
                            info: state.addRecord.info,
                            combustible: Number(state.addRecord.combustible),
                            oxygen: Number(state.addRecord.oxygen),
                            carbonMonoxide: Number(state.addRecord.carbonMonoxide),
                            hydrogenSulfide: Number(state.addRecord.hydrogenSulfide),
                            source: 2,
                        };
                        if (state.chosenIndex == null) {
                            await addRecord(data);
                        } else {
                            data.groupId = JSON.stringify(state.addRecord.groupId);
                            await editRecord(data);
                        }
                        await addRecord(data);
                        state.dialogAddRecord = false;
                        getListByPage();
                    } else {
                        console.log('error submit!', fields);
                    }
@@ -451,7 +408,8 @@
                Refresh,
                Plus,
                Search,
                handleChange,
                permitNoInfo,
                confirmPermitNo,
                searchRecord,
                clearSearch,
                viewRecord,

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

@@ -5,13 +5,13 @@
                <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>
                        <el-input v-model="workPermitNo" placeholder="请输入作业证编号"></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-select v-model="workType" placeholder="请选择作业类型">
                            <el-option
                                    v-for="item in workTypeList"
                                    :key="item.id"
@@ -30,27 +30,26 @@
                        <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-button type="primary" :icon="Refresh" size="default" @click="reLoadData"/>
                    </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 type="index" label="序号" width="80"/>
                        <el-table-column property="workPermitNo" label="作业证编号"/>
                        <el-table-column property="workTypeDesc" label="作业类型"/>
                        <el-table-column property="checkContent" label="检查内容"/>
                        <el-table-column property="checkResultDesc" label="检查结果">
                            <template #default="scope">
                                <span :class="scope.row.result == '异常' ? 'red': ''">{{ scope.row.result }}</span>
                                <span :class="scope.row.checkResultDesc == '异常' ? 'red': ''">{{ scope.row.checkResultDesc}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="desc" label="描述" width="200"/>
                        <el-table-column property="name" label="分析人"/>
                        <el-table-column property="updateTime" label="分析时间"/>
                        <el-table-column property="info" label="描述" show-overflow-tooltip width="200"/>
                        <el-table-column property="operatorUname" label="分析人"/>
                        <el-table-column property="operationTime" label="分析时间" width="180"/>
                        <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>
@@ -65,7 +64,7 @@
                                small=false
                                background
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="100"
                                :total="totalSize"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                        />
@@ -76,37 +75,42 @@
        <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-input v-model="details.workPermitNo" readonly/>
                </el-form-item>
                <el-form-item label="作业类型">
                    <el-input v-model="details.workType" readonly/>
                    <el-input v-model="details.workTypeDesc" readonly/>
                </el-form-item>
                <el-form-item label="检查内容">
                    <el-input v-model="details.checkInfo" readonly/>
                    <el-input v-model="details.checkContent" readonly/>
                </el-form-item>
                <el-form-item label="检查结果">
                    <el-input v-model="details.result" readonly/>
                    <el-input :class="details.checkResultDesc == '异常' ? 'red': ''" v-model="details.checkResultDesc" readonly/>
                </el-form-item>
                <el-form-item label="现场图片" v-if="details.imagePaths && details.imagePaths.length>0">
                    <el-image v-for="item in details.imagePaths" :preview-src-list="details.imagePaths" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="details.desc" type="textarea" readonly/>
                    <el-input v-model="details.info" type="textarea" readonly/>
                </el-form-item>
                <el-form-item label="分析人">
                    <el-input v-model="details.name" readonly/>
                    <el-input v-model="details.operatorUname" 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-input v-model="details.operationTime" readonly/>
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="dialogDetails = false">确认</el-button>
              </span>
            </template>
        </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-form-item label="作业证编号" prop="workPermitNo">
                    <el-input v-model="addRecord.workPermitNo" placeholder="作业编号须为已审批作业的编号，可点击右方按钮查询">
                        <template #append>
                            <el-button :icon="Search" />
                            <el-button :icon="Search" @click="dialogPermitNo = true"/>
                        </template>
                    </el-input>
                </el-form-item>
@@ -120,16 +124,16 @@
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="检查内容" prop="checkInfo">
                    <el-input v-model="addRecord.checkInfo"> </el-input>
                <el-form-item label="检查内容" prop="checkContent">
                    <el-input v-model="addRecord.checkContent"> </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-form-item label="检查结果" prop="checkResult">
                    <el-select v-model="addRecord.checkResult">
                        <el-option label="正常" value="1"/>
                        <el-option label="异常" value="2"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="现场照片" prop="photos">
                <el-form-item label="现场照片" prop="imagePaths">
                    <el-upload accept="image/*" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='imgLimit' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" list-type="picture-card" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="getUploadUrl">
                        <el-icon><Plus /></el-icon>
                        <template #tip>
@@ -137,23 +141,34 @@
                        </template>
                    </el-upload>
                </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 label="描述" prop="info">
                    <el-input v-model="addRecord.info" type="textarea"> </el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                  <span class="dialog-footer">
                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
                  </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
        <el-dialog v-model="dialogPermitNo" title="选择相应的作业编号">
            <permit-no ref="permitNoInfo"></permit-no>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="warning" @click="dialogPermitNo = false" size="default" plain>取消</el-button>
                <el-button type="primary" @click="confirmPermitNo" size="default">确认</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, ref, onMounted } from 'vue';
    import {toRefs, reactive, ref, onMounted, defineAsyncComponent} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import { useUserInfo } from '/@/stores/userInfo';
@@ -162,8 +177,9 @@
    import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
    import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
    import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';
    import {workApplyApi} from "/@/api/specialWorkSystem/workApply";
    import axios from "axios";
    import { workProcessApi } from '/@/api/specialWorkSystem/workProcess';
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import axios from 'axios';

    // 定义接口来定义对象的类型
    interface stateType {
@@ -178,14 +194,15 @@
        deleteArr: Array<any>;
        dialogDetails: boolean;
        dialogAddRecord: boolean;
        dialogPermitNo: boolean;
        deleteDialog: boolean;
        deleteSetDialog: boolean;
        pageIndex: number;
        pageSize: number;
        chosenIndex: null | number;
        deleteId: null | number;
        searchWord: string;
        searchType: number | null
        workPermitNo: string;
        workType: number | null;
        totalSize: number;
        addRecord: {};
        details: {};
@@ -196,64 +213,42 @@
    }
    export default {
        name: 'workCheck',
        components: {},
        components: {
            permitNo: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workProcess/components/dialogPermitNo.vue'))
        },
        setup() {
            const userInfo = useUserInfo();
            const { userInfos } = storeToRefs(userInfo);

            const permitNoInfo = ref()
            const state = reactive<stateType>({
                pageIndex: 1,
                pageSize: 10,
                totalSize: 0,
                chosenIndex: null,
                searchWord: '',
                searchType: null,
                workPermitNo: '',
                workType: null,
                isOverSize: false,
                fileList: [],
                imgLimit: 3,
                uploadUrl: '',
                dialogVisible: false,
                dialogImageUrl: 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'
                    }
                ],
                tableData: [],
                multipleSelection: [],
                dialogDetails: false,
                dialogAddRecord: false,
                dialogPermitNo: false,
                deleteDialog: false,
                deleteSetDialog: false,
                addRecord: {

                    workPermitNo: '',
                    checkContent: '',
                    checkResult: '',
                    info: '',
                    source: 2,
                    imagePaths: []
                },
                details: {

                },
                details: {},
                deleteId: null,
                deleteArr: [],
                workTypeList: [
@@ -270,34 +265,25 @@

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

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

            // 分页获取班组管理列表
            // 分页获取作业检查列表
            const getListByPage = async () => {
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } };
                let res = await teamManageApi().getRecordPage(data);
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { workType: state.workType, workPermitNo: state.workPermitNo } };
                let res = await workProcessApi().getCheckListPage(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.tableData = res.data.data
                    state.totalSize = res.data.total;
                } else {
                    ElMessage({
@@ -314,7 +300,17 @@
                    message: '超出文件上传数量'
                });
            }

            const confirmPermitNo = ()=>{
                if(permitNoInfo.value.workPermitNo == ''){
                    ElMessage({
                        type: 'warning',
                        message: '请选择相应的作业编码'
                    });
                }else{
                    state.addRecord.workPermitNo = permitNoInfo.value.workPermitNo
                    state.dialogPermitNo = false
                }
            }
            const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
                console.log(uploadFile);
            };
@@ -335,12 +331,15 @@
                    return false
                }else{
                    const res = await workApplyApi().getUploadUrl(rawFile.name);
                    state.addRecord.photos.push(res.data.data.fileName)
                    state.addRecord.imagePaths.push(res.data.data.fileName)
                    state.uploadUrl = res.data.data.uploadUrl;
                    console.log(state.addRecord.imagePaths,state.uploadUrl,6666666666666)
                }
            };

            const upload = async (params: any) => {
                // const formData = new FormData();
                // formData.append('file', state.fileList[0].raw);
                let reader = new FileReader();
                reader.readAsArrayBuffer(params.file);
                reader.onload = async () => {
@@ -367,7 +366,7 @@
                        })
                                .then(() => {
                                    // console.log(state.workDetail.photos,'path')
                                    const list = JSON.parse(JSON.stringify(state.addRecord.photos))
                                    const list = JSON.parse(JSON.stringify(state.addRecord.imagePaths))
                                    fileList.map((item,index)=>{
                                        if(item.uid === file.uid){
                                            fileList.splice(index,1)
@@ -381,7 +380,7 @@
                                    reject(false);
                                });
                    }else{
                        const list = JSON.parse(JSON.stringify(state.addRecord.photos))
                        const list = JSON.parse(JSON.stringify(state.addRecord.imagePaths))
                        fileList.map((item,index)=>{
                            if(item.uid === file.uid){
                                fileList.splice(index,1)
@@ -414,7 +413,7 @@

            // 关键词查询记录
            const searchRecord = async () => {
                if (state.searchWord == '') {
                if (state.workPermitNo == ''&& state.workType == null) {
                    ElMessage({
                        type: 'warning',
                        message: '请输入查询关键词'
@@ -425,13 +424,15 @@
            };

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

            // 添加班组管理方法

            // 添加气体检测方法
            const addRecord = async (data: any) => {
                let res = await teamManageApi().addRecord(data);
                let res = await workProcessApi().postCheckReport(data);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
@@ -446,24 +447,15 @@
                }
            };


            // 新增修改记录
            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);
                        }
                        await addRecord(state.addRecord);
                        state.dialogAddRecord = false;
                        getListByPage();
                    } else {
                        console.log('error submit!', fields);
                    }
@@ -519,7 +511,9 @@
                Refresh,
                Plus,
                Search,
                permitNoInfo,
                showTip,
                confirmPermitNo,
                handlePreview,
                handlePictureCardPreview,
                getUploadUrl,
@@ -546,6 +540,10 @@
    $homeNavLengh: 8;
    .red{
        color: red;

        ::v-deep(input){
            color: red;
        }
    }
    .home-container {
        height: calc(100vh - 144px);

 src/views/specialWorkSystem/workTicket/myApproval/components/brokenLog.vue

@@ -38,7 +38,7 @@
                <el-input v-model="details.workDetail.involvedDepIds" readonly type="textarea"/>
            </el-form-item>
            <el-form-item label="图片">
                <el-image v-for="item in details.workDetail.bcPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
                <el-image v-for="item in details.workDetail.bcPath" :preview-src-list="details.workDetail.bcPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
            </el-form-item>
            <el-form-item label="期望开始时间">
                <el-input v-model="details.expStartTime" readonly />

 src/views/specialWorkSystem/workTicket/myApproval/components/groundLog.vue

@@ -38,7 +38,7 @@
                <el-input v-model="details.workDetail.otherSpecialWork" readonly type="textarea"/>
            </el-form-item>
            <el-form-item label="图片">
                <el-image v-for="item in details.workDetail.gbPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
                <el-image v-for="item in details.workDetail.gbPath" :preview-src-list="details.workDetail.gbPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
            </el-form-item>
            <el-form-item label="期望开始时间">
                <el-input v-model="details.expStartTime" readonly />

 src/views/specialWorkSystem/workTicket/myApproval/components/plateLog.vue

@@ -56,7 +56,7 @@
                <el-input v-model="details.workDetail.otherSpecialWork" readonly type="textarea"/>
            </el-form-item>
            <el-form-item label="盲板位置图">
                <el-image v-for="item in details.workDetail.bpLocationMapPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
                <el-image v-for="item in details.workDetail.bpLocationMapPath" :preview-src-list="details.workDetail.bpLocationMapPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
            </el-form-item>
            <el-form-item label="期望开始时间">
                <el-input v-model="details.expStartTime" readonly />

 src/views/specialWorkSystem/workTicket/myJobApply/components/brokenLog.vue

@@ -38,7 +38,7 @@
                <el-input v-model="details.workDetail.involvedDepIds" readonly type="textarea"/>
            </el-form-item>
            <el-form-item label="图片">
                <el-image v-for="item in details.workDetail.bcPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
                <el-image v-for="item in details.workDetail.bcPath" :preview-src-list="details.workDetail.bcPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
            </el-form-item>
            <el-form-item label="期望开始时间">
                <el-input v-model="details.expStartTime" readonly />

 src/views/specialWorkSystem/workTicket/myJobApply/components/groundLog.vue

@@ -38,7 +38,7 @@
                <el-input v-model="details.workDetail.otherSpecialWork" readonly type="textarea"/>
            </el-form-item>
            <el-form-item label="图片">
                <el-image v-for="item in details.workDetail.gbPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
                <el-image v-for="item in details.workDetail.gbPath" :preview-src-list="details.workDetail.gbPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
            </el-form-item>
            <el-form-item label="期望开始时间">
                <el-input v-model="details.expStartTime" readonly />

 src/views/specialWorkSystem/workTicket/myJobApply/components/plateLog.vue

@@ -56,7 +56,7 @@
                <el-input v-model="details.workDetail.otherSpecialWork" readonly type="textarea"/>
            </el-form-item>
            <el-form-item label="盲板位置图">
                <el-image v-for="item in details.workDetail.bpLocationMapPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
                <el-image v-for="item in details.workDetail.bpLocationMapPath" :preview-src-list="details.workDetail.bpLocationMapPath" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
            </el-form-item>
            <el-form-item label="期望开始时间">
                <el-input v-model="details.expStartTime" readonly />

 src/views/system/personShiftManage/personTimeManage/holidayTimeGroup/index.vue

@@ -323,7 +323,8 @@
                    if (state.chosenIndex == null) {
                        await addRecord(data);
                    } else {
                        (data.id = JSON.stringify(state.addRecord.id)), await editRecord(data);
                        data.id = JSON.stringify(state.addRecord.id)
                        await editRecord(data);
                    }
                    state.dialogAddRecord = false;
                } else {