vue3输入开始时间和结束时间以及间隔时间,点击“生成表格“按钮生成时间表格

通常在设置时间表的时候,给后端的数据都是时分秒的数据,如果要一个一个相加来手动设置的话就太麻烦了,是否可以直接设置我想要的开始时间和结束时间以及间隔时间直接生成表格呢?答案当然是可以的!

第一步,编写html

<template>
    <div class="demo-collapse">
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="抓拍时间表" name="1">
                <el-form label-width="65px">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="通道号:" style="float: left;">

                                <el-input id="txt_NW_B7_ch" v-model.number="inputData.hnzpch"
                                    @input="onVerifyNumberPercentage1($event)" style="width: 100px;" placeholder="通道号" />
                            </el-form-item>
                            <el-form-item label="">
                                <el-button type="primary" class="but1" style=" width: 100px; "
                                    @click="createtable(starttime, overtime, intervaltime)">生成表格</el-button>
                            </el-form-item>
                           
                            <el-form-item label="" style="float: left;">
                                <el-button type="primary" class="but1" style=" width: 100px; "
                                    @click="GetPicTureTime(diaId, inputData.hnzpch)">时间表查询</el-button>
                            </el-form-item>
                            <el-form-item label="">
                                <el-button type="primary" class="but1" style=" width: 100px; "
                                    @click="SetPicTureTime(diaId, inputData.hnzpch)">时间表设置</el-button>
                            </el-form-item>

                            <el-form-item label="开始时间:">
                                <el-time-picker v-model="starttime" value-format="HH:mm:ss" placeholder="开始时间" />
                            </el-form-item>
                            <el-form-item label="结束时间:">
                                <el-time-picker v-model="overtime" value-format="HH:mm:ss" placeholder="结束时间" />
                            </el-form-item>
                            
                                <el-form-item label="间隔分钟:" style="float: left;">
                                    <el-input id="txt_NW_B7_ch" v-model="intervaltime" :min="5" @blur="handleBlur"
                                        :show-password="false" :clearable="true" style="width: 100px;" placeholder="间隔分钟" />
                                </el-form-item>
                                <el-form-item label="预置位:" style="margin-left: 5px;">
                                    <el-input id="txt_NW_B7_ch" v-model="inputData.sjbyzw" style="width:100px;"
                                        @input="onVerifyNumberPercentage3($event)" placeholder="预置位" />
                                </el-form-item>
                          
                        </el-col>
                        <el-col :span="12">
                            <el-table :data="xsptableData" style="display: flex;width: 400px;" v-if="isshowtable">
                                <el-table-column prop="xs" label="小时">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.xs" maxlength="2"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="fz" label="分钟">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.fz" maxlength="2"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="yzw" label="预置位">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.yzw" maxlength="3"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" header-align="center" align="center">
                                    <template #default="scope">
                                        <span @click="handleAdd1()">
                                            <el-icon>
                                                <ele-Plus />
                                            </el-icon>
                                        </span>
                                        <span style="margin-left: 20px ;" @click="delAttrInput1(scope.$index)">
                                            <el-icon>
                                                <ele-Minus />
                                            </el-icon>
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-form>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

这样的话页面是这样的:

js代码(我这里用的是vue3+ts+vite):

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus';
//改成你们自己的后端接口即可
import { pictureTime } from '/@/api/main/tbhunan';
const starttime = ref()
const overtime = ref();
let intervaltime = ref();
const isshowtable = ref(false);
const handleBlur = () => {
    if (intervaltime.value < 5) {
        intervaltime.value = 5;
        ElMessage.error('最小值为5')
    }
}

const props = defineProps({
    diaId: String,
})
const activeName = ref('1');
const inputData = reactive({
    sjbyzw: '',
    hnzpch: '1'
})
const xsptableData = ref([]) as any

const onVerifyNumberPercentage1 = (val: string) => {
    inputData.hnzpch = verifyNumberPercentage(val);
};
// 生成表格
const starttimeall = ref();
const overtimeall = ref();
const createtable = (starttime: any, overtime: any, intervaltime: any) => {
    if (starttime == "" || overtime == "" || intervaltime == "" || inputData.sjbyzw == "") {
        ElMessage.error('请输入完整信息后再生成表格!')
    } else {
        if (starttime == undefined || overtime == undefined) {
            ElMessage.error('请输入开始时间或结束时间!')
        } else {
            if (starttime >= overtime) {
                ElMessage.error('开始时间数据不能大于或等于结束时间,请重新输入!')
            } else {
                starttimeall.value = getallSeconds(starttime)
                overtimeall.value = getallSeconds(overtime)
                let arr = []
                while (starttimeall.value < overtimeall.value) {
                    arr.push(getHMS(starttimeall.value))
                    starttimeall.value = starttimeall.value + Number(intervaltime * 60);
                }
                if (arr.length > 72) {
                    ElMessage.error('请重新选择时间间隔或者重新设置间隔时长')
                    isshowtable.value = false
                } else {
                    xsptableData.value = arr
                    isshowtable.value = true
                }

            }
        }

    }
}
const getallSeconds = (time: any) => {
    let arr = time.split(":")
    return parseInt(arr[0]) * 3600 + parseInt(arr[1]) * 60 + parseInt(arr[2])
}
const getHMS = (time: number) => {
    let Hourtime = parseInt(time / 3600);// 小时
    let exceptHour = time % 3600 //除去小时剩下的分钟+秒数的总秒数
    let minutetime = parseInt(exceptHour / 60);// 小时
    let exceptminnute = exceptHour % 60 //除去小时和分钟剩下的秒数的总秒数
    let timeShow = (Hourtime < 10 ? '0' + Hourtime : Hourtime) + ':' + (minutetime < 10 ? '0' + minutetime : minutetime) + ':' + (exceptminnute < 10 ? '0' + exceptminnute : exceptminnute);
    return {
        xs: String(Hourtime),
        fz: String(minutetime),
        yzw: inputData.sjbyzw,
        timeShow: timeShow,
    }
}
// 添加一行1
const aa = ref()
const handleAdd1 = () => {
    for (let i = 0; i < xsptableData.value.length; i++) {
        const element = xsptableData.value[i];
        aa.value = element
    }
    if (aa.value.xs == "" || aa.value.fz == "" || aa.value.yzw == "") {
        ElMessage.error('数据为空不能添加新的一行！');
        return
    } else { xsptableData.value.push({ xs: "", fz: "", yzw: "", }) }
}
const delAttrInput1 = (index: any) => {
    xsptableData.value.splice(index, 1)
}
// 抓拍时间表设置
const SetPicTureTime = (diaId: any, ch: any) => {
    const xs = ref<any>([])
    const fz = ref<any>([])
    const yzw = ref<any>([])
    const state = 1
    for (let i = 0; i < xsptableData.value.length; i++) {
        const element = xsptableData.value[i];
        xs.value.push(element.xs)
        fz.value.push(element.fz)
        yzw.value.push(element.yzw)
    }
    if (diaId == "") {
        ElMessage.error('请选择设备！');
        return
    } else if (ch == "" || xs == "" || fz == "" || yzw == "") {
        ElMessage.error('请输入完整信息!');
        return
    } pictureTime({ mid: diaId, ch: inputData.hnzpch, hour: xs.value, minute: fz.value, yzw: yzw.value, state }).then(res => {
        if (res.data.result.success == false) {
            ElMessage.error('指令下发失败!')
        } else {
            ElMessage.success('抓拍时间表设置成功!');

        }
    })
}
// 抓拍时间表查询
const GetPicTureTime = (diaId: any, ch: any) => {
    const xs = ["0"]
    const fz = ["0"]
    const yzw = ["0"]
    const state = 0
    if (diaId == "") {
        ElMessage.error('请选择设备！');
        return
    } else if (ch == "") {
        ElMessage.error('请输入通道号！');
        return
    } pictureTime({ mid: diaId, ch: inputData.hnzpch, hour: xs, minute: fz, yzw, state }).then(res => {
        if (res.data.result.success == false) {
            ElMessage.error('指令下发失败!')
        } else {
            ElMessage.success('查询指令下发成功!');
            // inputData.hnzpch = ''
        }
    })
}
</script>