添加修改页面

Admin

2022-07-22 3296afa88207747ef14b06b6803e84692fd7e242

添加修改页面

 src/router/backEnd.ts

@@ -75,7 +75,7 @@
/**
 * 重新请求后端路由菜单接口
 * @description 用于菜单管理界面刷新菜单（未进行测试）
 * @description 路径：/src/views/system/menu/component/menuDialog.vue
 * @description 路径：/src/views/system/homeMenu/component/menuDialog.vue
 */
export function setBackEndControlRefreshRoutes() {
    getBackEndControlRoutes(Session.get('projectId'));

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

@@ -12,12 +12,9 @@
                            style="width: 100%;white-space: nowrap;margin-right: 20px"
                    />
                    <el-select v-model="typeValue" placeholder="请选择预约类型" style="width: 100%">
                        <el-option
                                v-for="item in reserveOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                        <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>
@@ -27,21 +24,38 @@
        </el-row>
        <div class="homeCard">
            <div class="main-card">
                <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background: '#fafafa'}">
                    <el-table-column prop="id" label="编号" width="180" />
                    <el-table-column prop="time" label="预约时间" width="180" />
                    <el-table-column prop="department" label="预约部门" />
                    <el-table-column prop="dirtyWork" label="动土作业" width="180" />
                    <el-table-column prop="fireWork" label="动火作业" width="180" />
                    <el-table-column prop="hangWork" label="吊装作业" />
                    <el-table-column prop="spaceWork" label="受限空间作业" width="180" />
                    <el-table-column prop="cut" label="断路" width="180" />
                    <el-table-column prop="high" label="高处" />
                    <el-table-column prop="block" label="盲板抽堵" width="180" />
                    <el-table-column prop="tempUse" label="临时用电" width="180" />
                    <el-table-column fixed="right" label="操作" align="center" width="180">
                        <template #default>
                            <el-button link type="primary" size="small">操作</el-button>
                <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>
@@ -60,20 +74,21 @@
                />
            </div>
        </div>
        <el-dialog v-model="dialogChartsVisible" title="统计图表">
        </el-scrollbar>
        <el-dialog v-model="dialogChartsVisible" title="统计图表" @opened="openChart">
            <el-row>
                <div class="grid-content">
                    <div style="margin-bottom: 10px">日期查询：</div>
                    <div class="block">
                        <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="截止日期"
                            :shortcuts="shortcuts"
                            size="large"
                                v-model="dateRange"
                                type="daterange"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="截止日期"
                                :shortcuts="shortcuts"
                                size="large"
                        />
                    </div>
                </div>
@@ -85,7 +100,7 @@
                        <el-cascader
                                v-model="departmentName"
                                :options="departmentOptions"
                                :props="props"
                                :props="{expandTrigger: 'hover'}"
                                @change="handleChange"
                        />
                    </div>
@@ -93,16 +108,155 @@
            </el-row>
            <div ref="myChart" style="width: 100%;height:400px;"></div>
        </el-dialog>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="作业预约">
            <el-form :model="details" label-width="120px">
                <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"
                            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"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                    <el-input
                            v-model="details.spaceWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                    <el-input
                            v-model="details.cut"
                            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"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                    <el-input
                            v-model="details.tempUse"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="作业预约编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="预约时间" prop="time">
                    <el-date-picker
                            v-model="addRecord.time"
                            type="datetime"
                            format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </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-input
                            v-model="addRecord.dirtyWork"
                    />
                </el-form-item>
                <el-form-item label="动火作业">
                    <el-input
                            v-model="addRecord.fireWork"
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
                    <el-input
                            v-model="addRecord.hangWork"
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                    <el-input
                            v-model="addRecord.spaceWork"
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                    <el-input
                            v-model="addRecord.cut"
                    />
                </el-form-item>
                <el-form-item label="高处作业">
                    <el-input
                            v-model="addRecord.high"
                    />
                </el-form-item>
                <el-form-item label="盲板抽堵作业">
                    <el-input
                            v-model="addRecord.block"
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                    <el-input
                            v-model="addRecord.tempUse"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <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, defineComponent, ref, onMounted } from 'vue';
<script lang="ts" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } from 'element-plus'
    import { FormInstance, FormRules } from 'element-plus'
    import * as echarts from 'echarts/core';
    import { TooltipComponent, TooltipComponentOption, GridComponent, GridComponentOption, LegendComponent, LegendComponentOption } from 'echarts/components';
    import { BarChart, BarSeriesOption } from 'echarts/charts';
@@ -125,114 +279,17 @@
        homeOne: Array <type>
    }
    interface type {
        id:number,
        name: string

    }
    export default defineComponent({
        name: 'home',
        setup() {
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const searchTime = ref('');
            const typeValue = ref('');
            const departmentName = ref('');
            const reserveOptions = [
                {
                    value: 'Option1',
                    label: 'Option1',
                },
                {
                    value: 'Option2',
                    label: 'Option2',
                },
                {
                    value: 'Option3',
                    label: 'Option3',
                },
                {
                    value: 'Option4',
                    label: 'Option4',
                },
                {
                    value: 'Option5',
                    label: 'Option5',
                },
            ];
            const tableData = [
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '电工部',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                },
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '电工部',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                },
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                }
            ];
            const typeValue = ref('')
            const dialogChartsVisible = ref(false);
            const dateRange = ref('')
            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]
                    },
                },
            ];
            const props = {
                expandTrigger: 'hover',
            };
            const departmentName = ref('')
            const departmentOptions = [
                {
                    value: 'guide',
@@ -290,16 +347,112 @@
                        },
                    ],
                },
            ];
            ]
            const handleChange = (value) => {
                console.log(value)
            };
            const state  = reactive<stateType>({
                homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'双重预防系统'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
            });
            }
            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 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.push(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 myChart = ref<HTMLElement>()
            const myCharts = ref<any>()
            setTimeout(()=>{
            const openChart =()=>{
                type EChartsOption = echarts.ComposeOption<
                        | TooltipComponentOption
                        | GridComponentOption
@@ -327,11 +480,11 @@
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        data: ['部门A', '部门B', '部门C', '部门D', '部门E', '部门F', '部门G']
                    },
                    series: [
                        {
                            name: 'Direct',
                            name: '动火作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
@@ -343,7 +496,7 @@
                            data: [320, 302, 301, 334, 390, 330, 320]
                        },
                        {
                            name: 'Mail Ad',
                            name: '受限空间作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
@@ -355,7 +508,7 @@
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: 'Affiliate Ad',
                            name: '吊装作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
@@ -367,7 +520,7 @@
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: 'Video Ad',
                            name: '动土作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
@@ -379,7 +532,43 @@
                            data: [150, 212, 201, 154, 190, 330, 410]
                        },
                        {
                            name: 'Search Engine',
                            name: '断路作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 832, 901, 934, 1290, 1330, 1320]
                        },
                        {
                            name: '高处作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 832, 901, 934, 1290, 1330, 1320]
                        },
                        {
                            name: '临时用电作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 832, 901, 934, 1290, 1330, 1320]
                        },
                        {
                            name: '盲板抽堵作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
@@ -394,39 +583,13 @@
                };

                option && myCharts.value.setOption(option);
            },2000)
            // 分布图
            // onMounted(()=>{
            //     setTimeout(() => {
            //         drawChart()
            //     },1000)
            // });


            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                searchTime,
                typeValue,
                reserveOptions,
                tableData,
                dialogChartsVisible,
                dateRange,
                shortcuts,
                departmentName,
                departmentOptions,
                props,
                myChart,
                handleChange,
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped lang="scss">
@@ -465,6 +628,12 @@
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{

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

@@ -2,7 +2,7 @@
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
            <el-col :span="16">
            <el-col :span="14">
                <div class="grid-content topInfo">
                    <div>当前所属部门：<span>电工部</span></div>
                    <el-date-picker
@@ -13,12 +13,9 @@
                            style="width: 100%;white-space: nowrap;margin-right: 20px"
                    />
                    <el-select v-model="typeValue" placeholder="请选择预约类型" style="width: 100%">
                        <el-option
                                v-for="item in reserveOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                        <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>
@@ -29,24 +26,36 @@
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogFormVisible = true">新增预约</el-button>
                        <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 :data="tableData" border style="width: 100%" :header-cell-style="{background: '#fafafa'}">
                    <el-table-column prop="id" label="编号" width="120" />
                <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="180">
                        <template #default>
                            <el-button link type="primary" size="small">操作</el-button>
                    <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>
@@ -65,47 +74,156 @@
                />
            </div>
        </div>
        <el-dialog v-model="dialogFormVisible" title="新增预约">
            <el-form :model="reservationForm">
                <el-form-item label="我的当前部门" :label-width="formLabelWidth">
                    <el-input v-model="reservationForm.department" placeholder="" />
                </el-form-item>
                <el-form-item label="预约作业时间" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="reservationForm.time"
                            type="date"
                            placeholder=""
                            size="large"
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="作业预约">
            <el-form :model="details" label-width="120px">
                <el-form-item label="预约时间">
                    <el-input
                            v-model="details.time"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="预约作业类型" :label-width="formLabelWidth">
                    <el-select v-model="reservationForm.type">
                        <el-option label="类型1" value="type1" />
                        <el-option label="类型2" value="type2" />
                    </el-select>
                <el-form-item label="预约部门">
                    <el-input
                            v-model="details.department"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="对应作业数量" :label-width="formLabelWidth">
                    <el-input v-model="reservationForm.amount" placeholder="" />
                <el-form-item label="动土作业">
                    <el-input
                            v-model="details.dirtyWork"
                            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"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                    <el-input
                            v-model="details.spaceWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                    <el-input
                            v-model="details.cut"
                            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"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                    <el-input
                            v-model="details.tempUse"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="作业预约编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="预约时间" prop="time">
                    <el-date-picker
                            v-model="addRecord.time"
                            type="datetime"
                            format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </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-input
                            v-model="addRecord.dirtyWork"
                    />
                </el-form-item>
                <el-form-item label="动火作业">
                    <el-input
                            v-model="addRecord.fireWork"
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
                    <el-input
                            v-model="addRecord.hangWork"
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                    <el-input
                            v-model="addRecord.spaceWork"
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                    <el-input
                            v-model="addRecord.cut"
                    />
                </el-form-item>
                <el-form-item label="高处作业">
                    <el-input
                            v-model="addRecord.high"
                    />
                </el-form-item>
                <el-form-item label="盲板抽堵作业">
                    <el-input
                            v-model="addRecord.block"
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                    <el-input
                            v-model="addRecord.tempUse"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">
            <span>您确定要删除该条记录吗？</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="default">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false" 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>
        </el-scrollbar>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, defineComponent, ref } from 'vue';
<script lang="ts" setup>
    import { toRefs, reactive, ref } 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, Upload } from '@element-plus/icons-vue'
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } from 'element-plus'
    import { FormInstance, FormRules } from 'element-plus'
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
@@ -119,107 +237,117 @@
    interface type {

    }
    export default defineComponent({
        name: 'home',
        setup() {
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const searchTime = ref('')
            const typeValue = ref('')
            const reserveOptions = [
                {
                    value: 'Option1',
                    label: 'Option1',
                },
                {
                    value: 'Option2',
                    label: 'Option2',
                },
                {
                    value: 'Option3',
                    label: 'Option3',
                },
                {
                    value: 'Option4',
                    label: 'Option4',
                },
                {
                    value: 'Option5',
                    label: 'Option5',
                },
            ];
            const tableData = [
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '电工部',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                },
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '电工部',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                },
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '土木',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                }
            ];
            const dialogFormVisible = ref(false);
            const formLabelWidth = '140px';
            const reservationForm = reactive({
                department: '',
                time: '',
                type: '',
                amount: ''
            });
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({
                homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'双重预防系统'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
            });
            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 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.push(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 renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                searchTime,
                typeValue,
                reserveOptions,
                tableData,
                Plus,
                dialogFormVisible,
                formLabelWidth,
                reservationForm,
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped lang="scss">
@@ -258,6 +386,12 @@
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{