巡更时间

operationSupport/src/views/patrolManagement/components/timeSelect.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="disfle">
+        <el-select
+            class="width50"
+            v-model="items.startTime"
+            placeholder="请选择开始时间"
+            clearable
+            @change="timeChange(items, 'startTime')"
+        >
+            <el-option v-for="(item, index) in leftTimes" :label="item.time" :value="item.time" :key="index"></el-option>
+        </el-select>
+        <span class="titleText">{{ titleText }}</span>
+        <el-select class="width50" v-model="items.endTime" placeholder="请选择结束时间" clearable @change="timeChange(items, 'startTime')">
+            <el-option v-for="(item, index) in rightTimes" :label="item.time" :value="item.time" :key="index"></el-option>
+        </el-select>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        step: {
+            type: Number,
+            default: 15
+        },
+        titleText: {
+            type: String,
+            default: '至'
+        },
+        items: {
+            type: String,
+            default: () => {
+                return {
+                    startTime: '',
+                    endTime: ''
+                };
+            }
+        }
+    },
+    computed: {
+        leftTimes() {
+            return this.leftTime;
+        },
+        rightTimes() {
+            return this.rightTime;
+        }
+    },
+    data() {
+        return {
+            leftTime: [],
+            rightTime: []
+        };
+    },
+    created() {
+        this.leftFuntion();
+        this.rightFuntion();
+    },
+    methods: {
+        timeChange(item, str) {
+            this.$emit('timeChange', item, str);
+        },
+        leftFuntion() {
+            let datime = 24;
+            let a = [];
+            for (let i = 0; i <= datime; i++) {
+                if (this.step == 15) {
+                    if (i == datime) {
+                        a.push({
+                            time: `${datime}:00`,
+                            disabled: true
+                        });
+                    } else {
+                        a.push({
+                            time: `${i >= 10 ? `${i}:00` : `0${i}:00`}`,
+                            disabled: true
+                        });
+                        a.push({
+                            time: `${i >= 10 ? `${i}:15` : `0${i}:15`}`,
+                            disabled: true
+                        });
+                        a.push({
+                            time: `${i >= 10 ? `${i}:30` : `0${i}:30`}`,
+                            disabled: true
+                        });
+                        a.push({
+                            time: `${i >= 10 ? `${i}:45` : `0${i}:45`}`,
+                            disabled: true
+                        });
+                    }
+                } else if (this.step == 30) {
+                    if (i == datime) {
+                        a.push({
+                            time: `${datime}:00`,
+                            disabled: true
+                        });
+                    } else {
+                        a.push({
+                            time: `${i >= 10 ? `${i}:00` : `0${i}:00`}`,
+                            disabled: true
+                        });
+                        a.push({
+                            time: `${i >= 10 ? `${i}:30` : `0${i}:30`}`,
+                            disabled: true
+                        });
+                    }
+                }
+            }
+            this.leftTime = a;
+            return a;
+        },
+        rightFuntion() {
+            let datime = 24;
+            let a = [];
+            for (let i = 0; i <= datime; i++) {
+                if (this.step == 15) {
+                    if (i == datime) {
+                        a.push({
+                            time: `${datime}:00`,
+                            disabled: true
+                        });
+                    } else {
+                        a.push({
+                            time: `${i >= 10 ? `${i}:00` : `0${i}:00`}`,
+                            disabled: true
+                        });
+                        a.push({
+                            time: `${i >= 10 ? `${i}:15` : `0${i}:15`}`,
+                            disabled: true
+                        });
+                        a.push({
+                            time: `${i >= 10 ? `${i}:30` : `0${i}:30`}`,
+                            disabled: true
+                        });
+                        a.push({
+                            time: `${i >= 10 ? `${i}:45` : `0${i}:45`}`,
+                            disabled: true
+                        });
+                    }
+                } else if (this.step == 30) {
+                    if (i == datime) {
+                        a.push({
+                            time: `${datime}:00`,
+                            disabled: true
+                        });
+                    } else {
+                        a.push({
+                            time: `${i >= 10 ? `${i}:00` : `0${i}:00`}`,
+                            disabled: true
+                        });
+                        a.push({
+                            time: `${i >= 10 ? `${i}:30` : `0${i}:30`}`,
+                            disabled: true
+                        });
+                    }
+                }
+            }
+            this.rightTime = a;
+            return a;
+        },
+        pushFunt() {}
+    }
+};
+</script>
+<style lang="scss" scoped>
+.disfle {
+    display: inline-block;
+    width: calc(100% - 25px);
+    .titleText {
+        display: inline-block;
+        width: 20px;
+        text-align: center;
+    }
+    .width50 {
+        width: calc(50% - 15px);
+    }
+}
+</style>