添加页面

Admin

2022-06-29 1eb0eed9133cc73fd06d0ee98d7cc19bc87de761

添加页面

 package.json

@@ -15,7 +15,7 @@
        "axios": "^0.27.2",
        "countup.js": "^2.2.0",
        "cropperjs": "^1.5.12",
        "echarts": "^5.3.2",
        "echarts": "^5.3.3",
        "echarts-gl": "^2.0.9",
        "echarts-wordcloud": "^2.0.0",
        "element-plus": "^2.2.2",

 src/views/homeMenu/homeMenu.vue

文件名从 src/views/menu/menu.vue 修改
@@ -29,7 +29,7 @@
                <el-row :gutter="16">
                    <el-col :span="6"><div class="grid-content grid-content-2"><div class="itemTit">应急管理系统</div><img class="iconImg" src="../../assets/menu/icon5.png"><img class="bgImg" src="../../assets/menu/card5.png"></div></el-col>
                    <el-col :span="6"><div class="grid-content grid-content-2"><div class="itemTit">事故管理系统</div><img class="iconImg" src="../../assets/menu/icon6.png"><img class="bgImg" src="../../assets/menu/card6.png"></div></el-col>
                    <el-col :span="6"><div class="grid-content grid-content-2"><div class="itemTit">特殊作业系统</div><img class="iconImg" src="../../assets/menu/icon7.png"><img class="bgImg" src="../../assets/menu/card7.png"></div></el-col>
                    <el-col :span="6"><div class="grid-content grid-content-2" @click="toSpecialWorkSys"><div class="itemTit">特殊作业系统</div><img class="iconImg" src="../../assets/menu/icon7.png"><img class="bgImg" src="../../assets/menu/card7.png"></div></el-col>
                    <el-col :span="6"><div class="grid-content grid-content-2"><div class="itemTit">智能巡检系统</div><img class="iconImg" src="../../assets/menu/icon8.png"><img class="bgImg" src="../../assets/menu/card8.png"></div></el-col>
                </el-row>
                <el-row :gutter="16">
@@ -50,6 +50,7 @@
import loginIconTwo from '/@/assets/login-icon-two.svg';
import { NextLoading } from '/@/utils/loading';
import {Session} from "/@/utils/storage";
import {useRoute, useRouter} from "vue-router";

// 定义接口来定义对象的类型
interface LoginState {
@@ -61,6 +62,8 @@
    name: 'loginIndex',
    components: {},
    setup() {
        const route = useRoute();
        const router = useRouter();
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const state = reactive<LoginState>({
@@ -75,6 +78,10 @@
        const onLoginOut = () => {
            console.log('退出登录')
        };
        //点击进入特殊作业
        const toSpecialWorkSys = () => {
            router.push('/workReservation');
        };
        // 页面加载时
        onMounted(() => {
            NextLoading.done();
@@ -85,6 +92,7 @@
            logoMini,
            loginIconTwo,
            getThemeConfig,
            toSpecialWorkSys,
            ...toRefs(state),
        };
    },
@@ -100,7 +108,7 @@
    .topPanel{
        position: absolute;
        width: 100%;
        top: -80px;
        top: -100px;
        left: 0;
        height:100px;
        background: #fff;

 src/views/loginPage/component/accountLogin.vue

@@ -61,9 +61,6 @@
    setup() {
        const { t } = useI18n();
        const userInfo = useUserInfo()
        const { userInfos } = storeToRefs(userInfo);
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const route = useRoute();
        const router = useRouter();
        const state = reactive({
@@ -86,11 +83,11 @@
            // 存储 token 到浏览器缓存
            let res = await useLoginApi().signIn(state.ruleForm)
            if(res.data.code === '200'){
                Session.set('ifMenu',false)
                Session.set('projectId','')
                userInfo.setUserInfos(res.data.data)
                Session.set('token', res.data.data.accessToken);
                Session.set('sign',res.data.data.id)
                await initFrontEndControlRoutes();
                Session.set('projectId','');
                Session.set('uid',res.data.data.uid);
                await initBackEndControlRoutes();
                signInSuccess();
            }else{
                state.loading.signIn = false
@@ -121,13 +118,13 @@
            // 登录成功，跳到转首页
            // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
            if (route.query?.redirect) {
                router.push('/menu');
                router.push('/homeMenu');
                // router.push({
                //     path: <string>route.query?.redirect,
                //     query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
                // });
            } else {
                router.push('/login');
                router.push('/loginPage');
            }
            state.loading.signIn = true;
            const signInText = t('message.signInText');

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

@@ -1,13 +1,182 @@
<template>
    <div>各部门预约统计</div>
    <div class="home-container">
        <el-row :gutter="15" class="home-card-one mb15">
            <el-col
                    :xs="24"
                    :sm="12"
                    :md="12"
                    :lg="4"
                    :xl="4"
                    v-for="(v, k) in homeOne"
                    :key="k"
                    :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
            >
                <div class="home-card-item flex" >
                    <el-button @click="renderMenu(v.id)">{{v.name}}</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="15" class="home-card-two mb15">
            <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
                <div class="home-card-item">
                    <div style="height: 100%">
                        <el-button @click="renderMenu('6')">{{'应急管理系统'}}</el-button>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
                <div class="home-card-item">
                    <div style="height: 100%">
                        <el-button @click="renderMenu('7')">{{'目标责任管理系统'}}</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="15" class="home-card-three">
            <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
                <div class="home-card-item">
                    <el-button @click="renderMenu('8')">{{'事故管理系统'}}</el-button>
                </div>
            </el-col>
            <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-media">
                <div class="home-card-item">
                    <div style="height: 100%">
                        <el-button @click="renderMenu('9')">{{'设备综合管控系统'}}</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
<script lang="ts">
    import { toRefs, reactive, defineComponent, } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    };

    interface stateType {
        homeOne: Array <type>
    }
    interface type {
        id:number,
        name: string
    }
    export default defineComponent({
        name: 'home',
        setup() {
            const userInfo = useUserInfo()
            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 renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        overflow: hidden;
        .home-card-one,
        .home-card-two,
        .home-card-three {
            .home-card-item {
                width: 100%;
                height: 130px;
                border-radius: 4px;
                transition: all ease 0.3s;
                padding: 20px;
                overflow: hidden;
                background: var(--el-color-white);
                color: var(--el-text-color-primary);
                border: 1px solid var(--next-border-color-light);
                &:hover {
                    box-shadow: 0 2px 12px var(--next-color-dark-hover);
                    transition: all ease 0.3s;
                }
                &-icon {
                    width: 70px;
                    height: 70px;
                    border-radius: 100%;
                    flex-shrink: 1;
                    i {
                        color: var(--el-text-color-placeholder);
                    }
                }
                &-title {
                    font-size: 15px;
                    font-weight: bold;
                    height: 30px;
                }
            }
        }
        .home-card-one {
            @for $i from 0 through 3 {
                .home-one-animation#{$i} {
                    opacity: 0;
                    animation-name: error-num;
                    animation-duration: 0.5s;
                    animation-fill-mode: forwards;
                    animation-delay: calc($i/10) + s;
                }
            }
        }
        .home-card-two,
        .home-card-three {
            .home-card-item {
                height: 400px;
                width: 100%;
                overflow: hidden;
                .home-monitor {
                    height: 100%;
                    .flex-warp-item {
                        width: 25%;
                        height: 111px;
                        display: flex;
                        .flex-warp-item-box {
                            margin: auto;
                            text-align: center;
                            color: var(--el-text-color-primary);
                            display: flex;
                            border-radius: 5px;
                            background: var(--next-bg-color);
                            cursor: pointer;
                            transition: all 0.3s ease;
                            &:hover {
                                background: var(--el-color-primary-light-9);
                                transition: all 0.3s ease;
                            }
                        }
                        @for $i from 0 through $homeNavLengh {
                            .home-animation#{$i} {
                                opacity: 0;
                                animation-name: error-num;
                                animation-duration: 0.5s;
                                animation-fill-mode: forwards;
                                animation-delay: calc($i/10) + s;
                            }
                        }
                    }
                }
            }
        }
    }
</style>

 src/views/specialWorkSystem/workPlan/index.vue

文件已删除

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

@@ -1,13 +1,466 @@
<template>
    <div>作业预约汇总</div>
    <div class="home-container">
        <el-row>
            <el-col :span="6">
                <div class="grid-content topInfo">
                    <div>预约时间：</div>
                    <div class="block">
                        <el-date-picker
                                v-model="searchTime"
                                type="date"
                                placeholder=""
                                size="large"
                        />
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content topInfo">
                    <div>预约类型：</div>
                    <div>
                        <el-select v-model="typeValue" class="m-2" placeholder="Select" size="large">
                            <el-option
                                    v-for="item in reserveOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
            </el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6">
                <div class="grid-content topInfo">
                    <div style="margin-right: 20px"><el-button type="primary" plain>查询历史</el-button></div>
                    <div><el-button type="primary" @click="dialogChartsVisible = true">查看统计图表</el-button></div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="tableData" border style="width: 100%">
                <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 label="操作">
                    <template #default>
                        <el-button link type="primary" size="small">操作</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog v-model="dialogChartsVisible" title="Shipping address">
            <el-row>
                <div class="grid-content">
                    <div>日期查询：</div>
                    <div class="block">
                        <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            unlink-panels
                            range-separator="To"
                            start-placeholder="Start date"
                            end-placeholder="End date"
                            :shortcuts="shortcuts"
                            size="large"
                        />
                    </div>
                </div>
            </el-row>
            <el-row>
                <div class="grid-content">
                    <div>部门查询：</div>
                    <div>
                        <el-cascader
                                v-model="departmentName"
                                :options="departmentOptions"
                                :props="props"
                                @change="handleChange"
                        />
                    </div>
                </div>
            </el-row>
            <div id="main" style="width: 600px;height:400px;"></div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
<script lang="ts">
    import { toRefs, reactive, defineComponent, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import * as echarts from 'echarts/core';
    import { TooltipComponent, TooltipComponentOption, GridComponent, GridComponentOption, LegendComponent, LegendComponentOption } from 'echarts/components';
    import { BarChart, BarSeriesOption } from 'echarts/charts';
    import { CanvasRenderer } from 'echarts/renderers';
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    };

    interface stateType {
        homeOne: Array <type>
    }
    interface type {
        id:number,
        name: string
    }
    export default defineComponent({
        name: 'home',
        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 dialogChartsVisible = ref(false);
            const dateRange = ref('')
            const shortcuts = [
                {
                    text: 'Last week',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                    },
                },
                {
                    text: 'Last month',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        return [start, end]
                    },
                },
                {
                    text: 'Last 3 months',
                    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 departmentOptions = [
                {
                    value: 'guide',
                    label: 'Guide',
                    children: [
                        {
                            value: 'disciplines',
                            label: 'Disciplines',
                            children: [
                                {
                                    value: 'consistency',
                                    label: 'Consistency',
                                },
                                {
                                    value: 'feedback',
                                    label: 'Feedback',
                                }
                            ],
                        },
                        {
                            value: 'navigation',
                            label: 'Navigation',
                            children: [
                                {
                                    value: 'side nav',
                                    label: 'Side Navigation',
                                },
                                {
                                    value: 'top nav',
                                    label: 'Top Navigation',
                                },
                            ],
                        },
                    ],
                },
                {
                    value: 'component',
                    label: 'Component',
                },
                {
                    value: 'resource',
                    label: 'Resource',
                    children: [
                        {
                            value: 'axure',
                            label: 'Axure Components',
                        },
                        {
                            value: 'sketch',
                            label: 'Sketch Templates',
                        },
                        {
                            value: 'docs',
                            label: 'Design Documentation',
                        },
                    ],
                },
            ];
            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'}],
            });

            // 分布图
            echarts.use([
                TooltipComponent,
                GridComponent,
                LegendComponent,
                BarChart,
                CanvasRenderer
            ]);

            type EChartsOption = echarts.ComposeOption<
                    | TooltipComponentOption
                    | GridComponentOption
                    | LegendComponentOption
                    | BarSeriesOption
                    >;

            const chartDom = document.getElementById('main')!;
            const myChart = echarts.init(chartDom);
            const option: EChartsOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 302, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Mail Ad',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Affiliate Ad',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ad',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 212, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Search Engine',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [820, 832, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };

            option && myChart.setOption(option);

            // 折线图
            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,
                handleChange,
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped>
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        overflow: hidden;
        padding: 20px 40px;
        .el-col{
            display: flex;
            align-items: center;
        }
        .grid-content{
            align-items: center;
        }

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

            .demo-datetime-picker {
                display: flex;
                width: 100%;
                padding: 0;
                flex-wrap: wrap;
            }
            .demo-datetime-picker .block {
                padding: 30px 0;
                text-align: center;
                border-right: solid 1px var(--el-border-color);
                flex: 1;
            }
        }
        .el-button--text {
            margin-right: 15px;
        }
        .el-select {
            width: 300px;
        }
        .el-input {
            width: 300px;
        }
        .dialog-footer button:first-child {
            margin-right: 10px;
        }
    }
</style>

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

@@ -1,13 +1,265 @@
<template>
    <div>作业预约</div>
    <div class="home-container">
        <el-row>
            <el-col :span="6">
                <div class="grid-content topInfo">
                    <div>当前所属部门：</div>
                    <div>电工部</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content topInfo">
                    <div>预约时间：</div>
                    <div class="block">
                        <el-date-picker
                                v-model="searchTime"
                                type="date"
                                placeholder=""
                                size="large"
                        />
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content topInfo">
                    <div>预约类型：</div>
                    <div>
                        <el-select v-model="typeValue" class="m-2" placeholder="Select" size="large">
                            <el-option
                                    v-for="item in reserveOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content topInfo">
                    <div style="margin-right: 20px"><el-button type="primary" plain>查询历史</el-button></div>
                    <div><el-button type="success" @click="dialogFormVisible = true">新增预约</el-button></div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="tableData" border style="width: 100%">
                <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 label="操作">
                    <template #default>
                        <el-button link type="primary" size="small">操作</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog v-model="dialogFormVisible" title="Shipping address">
            <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-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>
                <el-form-item label="对应作业数量" :label-width="formLabelWidth">
                    <el-input v-model="reservationForm.amount" placeholder="" />
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
<script lang="ts">
    import { toRefs, reactive, defineComponent, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    };

    interface stateType {
        homeOne: Array <type>
    }
    interface type {

    }
    export default defineComponent({
        name: 'home',
        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 renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                searchTime,
                typeValue,
                defaultTime,
                reserveOptions,
                tableData,
                dialogFormVisible,
                formLabelWidth,
                reservationForm,
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped>
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        overflow: hidden;
        padding: 20px 40px;
        .el-col{
            display: flex;
            align-items: center;
        }
        .grid-content{
            align-items: center;
        }

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

            .demo-datetime-picker {
                display: flex;
                width: 100%;
                padding: 0;
                flex-wrap: wrap;
            }
            .demo-datetime-picker .block {
                padding: 30px 0;
                text-align: center;
                border-right: solid 1px var(--el-border-color);
                flex: 1;
            }
        }
        .el-button--text {
            margin-right: 15px;
        }
        .el-select {
            width: 300px;
        }
        .el-input {
            width: 300px;
        }
        .dialog-footer button:first-child {
            margin-right: 10px;
        }
    }
</style>