twin2025-mod/src/pages/imp/imp06.vue

<template>
    <div  class="impDiv" @click.stop="void(0)" :style="{width:width+'px',top:xy.top+'px',left:xy.left-width+'px'}">
        <div class="triangle"></div>
        <div class="" style="text-align: center;margin-top:%;width: 100%;letter-spacing: 5px;color: #cdd2fb;font-size: 18px;">
            <span style="position: relative;">日期<el-date-picker v-model="startDate" :value-format="'YYYY-MM-DD'" type="date" placeholder="选择日期"></el-date-picker>
                <el-select style="width: 100px;" v-model="startH"><el-option v-for="item in startHourList" :key="item.code" :label="item.name" :value="item.code"></el-option> </el-select>
                <span> 到 </span>
                <el-date-picker v-model="endDate" type="date" :value-format="'YYYY-MM-DD'" placeholder="选择日期"></el-date-picker>
                <el-select style="width: 100px;" v-model="endH"><el-option v-for="item in endHourList" :key="item.code" :label="item.name" :value="item.code"></el-option> </el-select>
                <el-button style="margin:10px" @click="impdata">导出</el-button>
            </span>                
        </div>
        <div>

        </div>
    </div>
</template>
<style>
    @import '../../styles/main.css';
    .el-date-editor.el-input, .el-date-editor.el-input__wrapper{
        width:150px;

    }
    .el-input__wrapper{
        background-color:#1f4774;
        box-shadow: 0 0 0 1px #7f9bdd inset !important;
    }
    .el-input__wrapper input{
        border:0px !important;
        color:#fff;
    }
    .el-select__wrapper{
        background-color: #1f4774;
    }
    .el-select__selected-item{
        color: #fff !important;
    }
</style>
<script>
    import { ref,onMounted,watch } from 'vue';
    import api from "@/api/system";
    import { ElDatePicker,ElMessage } from 'element-plus';
    import 'element-plus/dist/index.css'; // 确保导入样式文件
    import * as echarts from 'echarts';
    export default {
        props:{
            xy:{
                type:Object
            }

        },
        setup(props,{emit}){
            const width=ref(300)
            let startDate=ref('');
            let endDate = ref('');
            let startH = ref(7);
            let endH = ref(19);
            let startHourList = ref([]);
            let endHourList = ref([]);

            function impquery(){

            }

            function impdata(){
                if(startDate.value=='' || endDate.value=='' || startDate.value==null || endDate.value==null){
                    ElMessage({
                        message: "未选择正确的日期",
                        type: "error"
                    })
                    return;
                }
                let s1 = startDate.value +" "+startH.value+":00:00";
                let s2 = endDate.value +" "+endH.value+":00:00";
                window.open(ApiServer + "/api/export/alarms?start="+s1+"&end="+s2);
            }

            onMounted(()=>{
                var day = new Date();
                if(day.getHours()<7){
                    day=day.setDate(day.getDate()-2);
                }else{
                    day=day.setDate(day.getDate()-1);
                }
                var day1 = new Date().setDate(new Date(day).getDate() - 7);
                startDate.value = new Date(day1).Format("yyyy-MM-dd");
                endDate.value  =new Date(day).Format("yyyy-MM-dd");
                var hour1Opts = [];
                var hour2Opts = [];
                //var nowHour = new Date().Format("h");
                for (var i = 0; i < 24; i++) {
                    hour1Opts.push({"name":i+'时',"code":i});
                    hour2Opts.push({"name":i+'时',"code":i});
                }
                startHourList.value = hour1Opts;
                endHourList.value = hour2Opts;
            })

            return{
                width,
                startDate,
                endDate,
                startH,
                endH,
                startHourList,
                endHourList,
                impdata,
                impquery,
            }
        }
    }
</script>