fire-mh/src/views/time-select.vue

<template>
    <el-row class="timeSelect">
        <el-row class="wrap" v-if="!security">
            <el-row class="xj xj1"></el-row>
            <el-row class="xj xj2"></el-row>
            <el-row class="xj xj3"></el-row>
            <el-row class="xj xj4"></el-row>
            <el-button
                size="mini"
                @click="timeTypeClick('jinri')"
                :class="{ btnClick: timeArea === 'jinri' }"
                >今日</el-button
            >
            <el-button
                size="mini"
                @click="timeTypeClick('benzhou')"
                :class="{ btnClick: timeArea === 'benzhou' }"
                >本周</el-button
            >
            <el-button
                size="mini"
                @click="timeTypeClick('dangyue')"
                :class="{ btnClick: timeArea === 'dangyue' }"
                >当月</el-button
            >
            <!-- <el-button size="mini" @click="timeTypeClick('s')" :class="{ btnClick: timeArea === 's' }">当季度</el-button>
      <el-button size="mini" @click="timeTypeClick('by')" style="width: 0.5rem" :class="{ btnClick: timeArea === 'by' }">上半年</el-button> -->
            <el-button
                size="mini"
                @click="timeTypeClick('jinbannian')"
                :class="{ btnClick: timeArea === 'jinbannian' }"
                >近半年</el-button
            >
            <el-button
                size="mini"
                @click="timeTypeClick('jinyinian')"
                style="width: 0.5rem"
                :class="{ btnClick: timeArea === 'jinyinian' }"
                >近一年</el-button
            >
            <el-button
                size="mini"
                @click="timeTypeClick('jinsannian')"
                :class="{ btnClick: timeArea === 'jinsannian' }"
                >近三年</el-button
            >
            <el-date-picker
                v-model="valueTime"
                class="dataComponent"
                type="daterange"
                range-separator="~"
                size="small"
                prefix-icon
                :default-time="stores.timeList"
                format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateTimeChange"
            >
            </el-date-picker>
        </el-row>
        <el-row class="wrap2" v-if="security">
            <el-row class="xj xj1"></el-row>
            <el-row class="xj xj2"></el-row>
            <el-row class="xj xj3"></el-row>
            <el-row class="xj xj4"></el-row>
            <p>安保阶段：2023年10月23日——11月15日</p>
        </el-row>
    </el-row>
</template>
<script>
import {
    getWeekStartDate,
    getWeekEndDate,
    getMonthStartDate,
    getMonthEndDate,
    getQuarterStartDate,
    getQuarterEndDate,
    getHalfYearStartDate,
    getHalfYearEndDate,
    getThisYearStartDate,
    getThisYearEndDate,
    getYearMonthDateSFN,
    getLastHalfYear,
} from "../assets/js/dataFormate";
export default {
    props: {
        select: String,
    },
    data() {
        return {
            security:true,
            stores: this.$useStore(),

            timeArea: "dangyue",
            valueTime: [],
            defaultTime: [
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ], // '00:00:00', '23:59:59'
        };
    },
    created() {
        // this.timeTypeClick("dangyue");
        if(window.location.href.split("#")[1] == "/security" ){
            this.security = true
        }else{
            this.security = false
        }
    },
    watch: {
        "stores.timeList"(val) {
            this.valueTime = val.map((value) => {
                return value;
            });
        },
        select(val) {
            console.log(val)
            this.timeTypeClick(val);
        },
    },
    mounted() {},
    methods: {
        timeTypeClick(val) {
            if (val === "jinri") {
                this.stores.changTimeList([
                    new Date().Format("yyyy-MM-dd") + " 00:00:00",
                    new Date().Format("yyyy-MM-dd") + " 23:59:59",
                ]);
            } else if (val === "benzhou") {
                this.stores.changTimeList([
                    getWeekStartDate(),
                    getWeekEndDate(),
                ]);
            } else if (val === "dangyue") {
                this.stores.changTimeList([
                    getMonthStartDate(),
                    getMonthEndDate(),
                ]);
            } else if (val === "jinbannian") {
                this.stores.changTimeList([
                    getLastHalfYear().split(",")[0] + " 00:00:00",
                    getLastHalfYear().split(",")[1] + " 23:59:59",
                ]);
            } else if (val === "jinyinian") {
                let time = new Date().Format("yyyy-MM-dd");
                let arr = time.split("-");
                let y = arr[0] - 1;
                let jinyinian = `${y}-${arr[1]}-${arr[2]} 00:00:00`;
                this.stores.changTimeList([
                    jinyinian,
                    new Date().Format("yyyy-MM-dd") + " 23:59:59",
                ]);
            } else if (val === "jinsannian") {
                let time = new Date().Format("yyyy-MM-dd");
                let arr = time.split("-");
                let y = arr[0] - 3;
                let jinsanian = `${y}-${arr[1]}-${arr[2]} 00:00:00`;
                this.stores.changTimeList([
                    jinsanian,
                    new Date().Format("yyyy-MM-dd") + " 23:59:59",
                ]);
            }
            this.timeArea = val;
        },
        dateTimeChange(val) {
            stores.changTimeList((val) => val.Format("yyyy-MM-dd hh:mm:ss"));
            this.timeArea = "";
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/color.scss";
.timeSelect {
    position: absolute;
    z-index: 100;
    width: 9.3375rem;
    height: 0.5rem;
    left: 7.33125rem;
    top: 0.9rem;
    color: #fff;
    border-left: none;
    .wrap {
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 0.1rem 0.0125rem #137bb8;
        padding-left: 0.53rem;
        border-radius: 2px;
        /deep/.dataComponent {
            height: 0.325rem;
            padding: 0.1rem 0.15rem;
            margin: 0.08rem 0 0 0;
            width: 3.65rem;
            background: #000707;
            color: #fff;
            border: 1px solid;
            box-shadow: inset 0 0 0.05rem 0.05rem rgba(27, 79, 144, 1);
            background: rgba(#132a5a, 0.8);
            padding: 0.0625rem 0.14rem;
            font-size: 0.175rem;
            border-radius: 0.04rem;
            border: none;
            i,
            span {
                line-height: 100%;
                color: #fff;
                font-size: 0.175rem;
            }
            input {
                width: 40%;
                font-size: 0.175rem;
                background: transparent;
                color: #fff;
            }
        }
        /* 时间选择按钮 */
        .el-button {
            font-family: syhtN;
            width: auto !important;
            height: 0.325rem;
            min-height: auto;
            margin: 0.08rem 0.08rem 0 0 !important;
            padding: 0.05rem 0.15rem !important;
            color: #fff !important;
            font-size: 0.1625rem;
            text-align: center;
            box-shadow: inset 0 0 0.05rem 0.05rem rgba(27, 79, 144, 1);
            background: rgba(#132a5a, 0.8) !important;
            // border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
            border: none;
            border-radius: 0.04rem;
        }

        .btnClick {
            box-shadow: inset 0 0 0.05rem 0.05rem rgba(115, 251, 253, 0.8);
        }
    }
    .wrap2{
        width: 50%;
        height: 100%;
        margin-left:25%;
        box-shadow: inset 0 0 0.1rem 0.0125rem #137bb8;
        padding-left: 0.53rem;
        border-radius: 2px;
        >p{
            line-height: 40px;
            font-size: 0.175rem;
        }

    }
}
</style>