添加页面

Admin

2022-06-30 6d5dbde08fc4c167ed253f8607d591a17f32b718

添加页面

 src/assets/loginPage/login-bg.jpg

 src/assets/loginPage/login-bg.png

 src/views/homeMenu/homeMenu.vue

@@ -3,9 +3,9 @@
        <div class="topPanel">
            <div class="topPanelCont">
                <div class="topTit">
                    <div>新疆国泰新华安</div>
                    <div>新疆国泰新华</div>
                    <span></span>
                    <div>全风险预警监测系统</div>
                    <div>安全风险预警监测系统</div>
                </div>
                <div class="userInfo">
                    <div class="avator">

 src/views/loginPage/loginPage.vue

@@ -82,7 +82,8 @@
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: radial-gradient(at center, #0075c3, #000b61);
    background: url("../../assets/loginPage/login-bg.jpg") no-repeat center;
    /*background-image: radial-gradient(at center, #0075c3, #000b61);*/

    canvas {
        display: block;
@@ -113,7 +114,7 @@
        .loginContL{
            font-size: 48px;
            font-weight: bold;
            padding-top: 20px;
            padding-top: 80px;
            margin-right: 30px;

            .apTitleT{

 src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue

对比新文件
@@ -0,0 +1,234 @@
<template>
    <div class="home-container">
        <div v-for="(item,index) in approveSteps" class="stepItem">
            <div class="stepNum">{{index+1}}</div>
            <div class="stepCard">
                <el-card class="box-card" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <div>步骤<span>{{index+1}}</span></div>
                            <div>
                                <el-button type="primary" size="default" @click="addFlow(index)">新增</el-button>
                                <el-button type="danger" size="default" @click="deleteFlow(index)">删除</el-button>
                            </div>
                        </div>
                    </template>
                    <div class="text item">审批部门：<span>{{item.department}}</span></div>
                    <div class="text item">审批人员：<span>{{item.manager}}</span></div>
                    <div class="text item">其他参数：<span>{{item.others}}</span></div>
                </el-card>
            </div>
        </div>
        <el-drawer v-model="showAdd" direction="rtl">
            <template #title>
                <h4>新增审批流</h4>
            </template>
            <template #default>
                <el-form :model="addProgress" label-width="120px">
                    <el-form-item label="审批部门">
                        <el-select v-model="addProgress.department" placeholder="请选择审批部门">
                            <el-option label="动土" value="动土" />
                            <el-option label="动火" value="动火" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审批人员">
                        <el-select v-model="addProgress.manager" placeholder="请选择审批人员">
                            <el-option label="人员1" value="人员1" />
                            <el-option label="人员2" value="人员2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="其他参数">
                        <el-input v-model="addProgress.others" />
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick(ruleFormRef)">确认</el-button>
                </div>
            </template>
        </el-drawer>
        <el-dialog v-model="deleteDialog" title="提示" width="30%" center>
            <span>您确定要删除该审批流吗？</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="deleteDialog = false">取消</el-button>
                <el-button type="primary" @click="conFirmDelete">确认</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

<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 { ElMessage } from 'element-plus'
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    };

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

    }
    export default defineComponent({
        name: 'approveProcessSetting',
        setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const approveSteps = [
                {
                    department: '动土',
                    manager: '',
                    others: ''
                },
                {
                    department: '动土',
                    manager: '',
                    others: ''
                },
                {
                    department: '动土',
                    manager: '',
                    others: ''
                }
            ];
            const showAdd = ref(false)
            const deleteDialog = ref(false)
            const chosenIndex = ref('')
            const addProgress = ref({
                department: '',
                manager: '',
                others: ''
            })
            const confirmClick = () => {
                approveSteps.splice(chosenIndex.value+1,0,addProgress.value)
                addProgress.value = {
                    department: '',
                    manager: '',
                    others: ''
                }
                showAdd.value = false
            }
            const addFlow = (index) => {
                showAdd.value = true
                chosenIndex.value = index
            }
            const deleteFlow = (index) => {
                if(approveSteps.length>1){
                    deleteDialog.value = true
                    chosenIndex.value = index
                }else{
                    ElMessage({
                        message: '抱歉最后一条无法删除',
                        type: 'warning',
                    })
                }
            }
            const conFirmDelete = () => {
                const i = chosenIndex.value
                approveSteps.splice( i,1)
                deleteDialog.value = false
            }
            const state  = reactive<stateType>({});
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                showAdd,
                approveSteps,
                addProgress,
                chosenIndex,
                deleteDialog,
                conFirmDelete,
                deleteFlow,
                addFlow,
                confirmClick,
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        overflow: hidden;
        padding: 80px;
        .stepItem{
            display: flex;
            align-items: flex-start;
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-left: 2px solid #ccc;
            &:last-of-type{
                margin-bottom: 0;
                border-left: none;
            }
            .stepNum {
                width: 30px;
                height: 30px;
                border-radius: 15px;
                box-sizing: border-box;
                color: #333;
                border: 2px solid #999;
                line-height: 26px;
                text-align: center;
                margin-right: 40px;
                margin-left: -16px;
                margin-top: -30px;
            }
            .stepCard {
                margin-top: -30px;

                .box-card {
                    width: 480px;

                    .card-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        span{
                            font-weight: bold;
                            margin-left: 10px;
                        }
                    }

                    .text {
                        font-size: 14px;
                    }

                    .item {
                        margin-bottom: 18px;
                    }
                }
            }
            &:hover .card-header{
                color: #0098F5;
            }
            &:hover .stepNum{
                border: 2px solid #0098F5;
                color: #0098F5;
            }
        }

        .el-form{
            padding: 40px 20px;
        }
    }
</style>

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

@@ -29,8 +29,7 @@
                    </div>
                </div>
            </el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6">
            <el-col :span="12" class="topBtns">
                <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>
@@ -57,7 +56,7 @@
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog v-model="dialogChartsVisible" title="Shipping address">
        <el-dialog v-model="dialogChartsVisible" title="统计图表">
            <el-row>
                <div class="grid-content">
                    <div>日期查询：</div>
@@ -88,13 +87,13 @@
                    </div>
                </div>
            </el-row>
            <div id="main" style="width: 600px;height:400px;"></div>
            <div ref="myChart" style="width: 100%;height:400px;"></div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, defineComponent, ref } from 'vue';
    import { toRefs, reactive, defineComponent, ref, onMounted } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
@@ -103,6 +102,13 @@
    import { TooltipComponent, TooltipComponentOption, GridComponent, GridComponentOption, LegendComponent, LegendComponentOption } from 'echarts/components';
    import { BarChart, BarSeriesOption } from 'echarts/charts';
    import { CanvasRenderer } from 'echarts/renderers';
    echarts.use([
        TooltipComponent,
        GridComponent,
        LegendComponent,
        BarChart,
        CanvasRenderer
    ]);
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
@@ -286,112 +292,111 @@
            const state  = reactive<stateType>({
                homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'双重预防系统'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
            });
            const myChart = ref<HTMLElement>()
            const myCharts = ref<any>()
            setTimeout(()=>{
                type EChartsOption = echarts.ComposeOption<
                        | TooltipComponentOption
                        | GridComponentOption
                        | LegendComponentOption
                        | BarSeriesOption
                        >;
                myCharts.value = echarts.init(myChart.value!);
                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: '3%',
                        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 && myCharts.value.setOption(option);
            },2000)
            // 分布图
            echarts.use([
                TooltipComponent,
                GridComponent,
                LegendComponent,
                BarChart,
                CanvasRenderer
            ]);
            // onMounted(()=>{
            //     setTimeout(() => {
            //         drawChart()
            //     },1000)
            // });

            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) => {
@@ -411,6 +416,7 @@
                departmentName,
                departmentOptions,
                props,
                myChart,
                handleChange,
                ...toRefs(state),
            };
@@ -423,12 +429,21 @@
    .home-container {
        overflow: hidden;
        padding: 20px 40px;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-col{
            display: flex;
            align-items: center;
            margin: 40px 0;
        }
        .grid-content{
            display: flex;
            align-items: center;
            min-height: 36px;
        }

        .topInfo{
@@ -450,6 +465,10 @@
                flex: 1;
            }
        }
        .topBtns{
            display: flex;
            justify-content: right;
        }
        .el-button--text {
            margin-right: 15px;
        }

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

@@ -35,7 +35,7 @@
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
            <el-col :span="6" class="topBtns">
                <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>
@@ -62,7 +62,7 @@
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog v-model="dialogFormVisible" title="Shipping address">
        <el-dialog v-model="dialogFormVisible" title="新增预约">
            <el-form :model="reservationForm">
                <el-form-item label="我的当前部门" :label-width="formLabelWidth">
                    <el-input v-model="reservationForm.department" placeholder="" />
@@ -205,7 +205,6 @@
                renderMenu,
                searchTime,
                typeValue,
                defaultTime,
                reserveOptions,
                tableData,
                dialogFormVisible,
@@ -222,12 +221,20 @@
    .home-container {
        overflow: hidden;
        padding: 20px 40px;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .el-col{
            display: flex;
            align-items: center;
            margin: 40px 0;
        }
        .grid-content{
            align-items: center;
            min-height: 36px;
        }

        .topInfo{
@@ -249,6 +256,10 @@
                flex: 1;
            }
        }
        .topBtns{
            display: flex;
            justify-content: right;
        }
        .el-button--text {
            margin-right: 15px;
        }