智慧农业大数据平台
xiebin
2022-11-16 3dc278f10a4c3e3db7ce3a445bed710bdc88916e
src/components/date-select/index.vue
@@ -4,7 +4,7 @@
            <div :class="{on: dateType == 'date'}" :data-type="'date'" :data-holder="'选择日'">
                <span :data-type="'date'" :data-holder="'选择日'">日</span>
            </div>
            <div :class="{on: dateType == 'month'}" :data-type="'month'" :data-holder="'选择月'">
            <div :class="{on: dateType == 'month'}"  :data-type="'month'" :data-holder="'选择月'">
                <span :data-type="'month'" :data-holder="'选择月'">月</span>
            </div>
            <div :class="{on: dateType == 'year'}" :data-type="'year'" :data-holder="'选择年'">
@@ -13,66 +13,124 @@
        </div>
        <el-date-picker
            class="emit-el-date-picker"
            size="small"
            v-model="currentDate"
            :type="dateType"
            :placeholder="datePlaceHolder"
                class="emit-el-date-picker"
                size="small"
                v-model="currentDate"
                @change="selectChange"
                :type="dateType"
                :placeholder="datePlaceHolder"
        ></el-date-picker>
    </div>
</template>
<script>
export default {
    name: 'DateSelect',
    data () {
        return {
            dateType: 'month',
            datePlaceHolder: '选择月',
            currentDate: ''
        }
    },
    export default {
        name: 'DateSelect',
    methods: {
        select (e) {
            console.log(e.target.dataset.holder)
            this.dateType = e.target.dataset.type
            this.datePlaceHolder = e.target.dataset.holder
        props: ['type'],
        data () {
            return {
                dateType: 'month',
                datePlaceHolder: '选择月',
                currentDate: ''
            }
        },
        created () {
            var date = new Date()
            this.currentDate = date
        },
        methods: {
            select (e) {
                this.dateType = e.target.dataset.type
                this.datePlaceHolder = e.target.dataset.holder
                var currentTime = this.gettime(this.currentDate)
                if (this.type == 'taskSelect') {
                    this.$parent.getTaskTime(currentTime)
                } else if (this.type == 'ncptrSelect') {
                    this.$parent.getNcptrTime(currentTime)
                } else if (this.type == 'nztrSelect') {
                    this.$parent.getNztrTime(currentTime)
                } else if (this.type == 'cltjSelect') {
                    this.$parent.getCltjTime(currentTime)
                } else if (this.type == 'symSelect') {
                    this.$parent.getSymTime(currentTime)
                } else if (this.type == 'ncpjgSelect') {
                    this.$parent.productsSupervise(currentTime)
                }
            },
            selectChange (e) {
                var currentTime = this.gettime(e)
                if (this.type == 'taskSelect') {
                    this.$parent.getTaskTime(currentTime)
                } else if (this.type == 'ncptrSelect') {
                    this.$parent.getNcptrTime(currentTime)
                } else if (this.type == 'nztrSelect') {
                    this.$parent.getNztrTime(currentTime)
                } else if (this.type == 'cltjSelect') {
                    this.$parent.getCltjTime(currentTime)
                } else if (this.type == 'symSelect') {
                    this.$parent.getSymTime(currentTime)
                } else if (this.type == 'ncpjgSelect') {
                    this.$parent.productsSupervise(currentTime)
                }
            },
            gettime (data) {
                let dateValue = data.getFullYear()
                if (this.dateType == 'date') {
                    dateValue += '-'
                    dateValue += this.checkTime(data.getMonth() + 1)
                    dateValue += '-'
                    dateValue += this.checkTime(data.getDate())
                } else if (this.dateType == 'month') {
                    dateValue += '-'
                    dateValue += this.checkTime(data.getMonth() + 1)
                }
                return dateValue
            },
            checkTime (i) {
                if (i < 10) {
                    i = '0' + i
                }
                return i
            }
        }
    }
}
</script>
<style scoped lang="scss">
.time-select {
    margin-top: 20px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    height: 34px;
    .date-box {
        margin-right: 20px;
    .time-select {
        margin-top: 20px;
        padding: 0 4px;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        height: 100%;
        background: rgba(33, 186, 196, 0.1);
        color: #a9d1d7;
        height: 34px;
        & > div {
        .date-box {
            margin-right: 20px;
            display: flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 100%;
            cursor: pointer;
        }
            background: rgba(33, 186, 196, 0.1);
            color: #a9d1d7;
        .on {
            background: rgba(33, 186, 196, 0.5);
            border: 1px solid #66dde9;
            & > div {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50px;
                height: 100%;
                cursor: pointer;
            }
            .on {
                background: rgba(33, 186, 196, 0.5);
                border: 1px solid #66dde9;
            }
        }
    }
}
</style>