fix(event): time range

when there are multiple time ranges and the last ending time is 00:00:00

src/components/dialog/MultiDeviceDialog/index.vue

@@ -29,20 +29,18 @@
           <draggable
             v-if="sortable"
             v-model="devices"
-            class="l-flex__auto l-flex--col c-sibling-item--v u-font-size--sm u-overflow--auto"
+            class="l-flex__auto l-flex--col c-sibling-item--v u-overflow--auto"
             handle=".mover"
             animation="300"
           >
             <div
               v-for="(item, index) in devices"
               :key="item.id"
-              class="l-flex--row c-sibling-item--v o-draggable-item"
+              class="o-draggable-item"
             >
-              <div class="l-flex__auto l-flex--row c-sibling-item mover">
-                <i class="l-flex__none o-draggable-item__mover el-icon-sort has-padding--h u-color--info u-font-size--md has-active" />
-                <div class="l-flex__auto has-padding--v u-ellipsis">
-                  {{ item.name }}
-                </div>
+              <div class="l-flex__fill l-flex--row mover">
+                <i class="l-flex__none o-draggable-item__mover el-icon-sort u-color--info u-font-size--md has-active" />
+                <div class="l-flex__auto o-draggable-item__label u-ellipsis">{{ item.name }}</div>
               </div>
               <i
                 class="l-flex__none el-icon-delete has-padding--h u-color--info u-font-size--md has-active"

src/components/service/DraggableItem/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="l-flex--row c-sibling-item--v o-draggable-item">
-    <div class="l-flex__auto l-flex--row c-sibling-item mover">
-      <i class="l-flex__none o-draggable-item__mover el-icon-sort has-padding--h u-color--info u-font-size--md has-active" />
+  <div class="o-draggable-item">
+    <div class="l-flex__fill l-flex--row c-sibling-item mover">
+      <i class="l-flex__none o-draggable-item__mover el-icon-sort u-color--info u-font-size--md has-active" />
       <auto-text
-        class="l-flex__auto has-padding--v has-active"
+        class="l-flex__auto has-active"
         :text="label"
         @click.native="onView"
       />
     </div>
     <div
       v-if="item.disabled"
-      class="l-flex__none c-sibling-item u-color--info u-font-size--xs"
+      class="l-flex__none c-sibling-item near u-color--info u-font-size--xs"
     >
       {{ duration }}
     </div>
@@ -66,8 +66,6 @@ export default {
 
 <style lang="scss" scoped>
 .o-draggable-item {
-  min-width: $width--lg;
-
   &__seconds {
     width: 92px;
   }

src/scss/bem/_component.scss

@@ -534,8 +534,7 @@
     }
 
     &.large {
-      min-width: 300px;
-      max-width: 300px;
+      min-width: 320px;
     }
   }
 }

src/scss/bem/_object.scss

@@ -57,6 +57,10 @@
 .o-tag {
   min-width: 80px;
   text-align: center;
+
+  &.sm {
+    min-width: 48px;
+  }
 }
 
 .o-next {
@@ -315,15 +319,47 @@
 }
 
 .o-draggable-item {
+  display: flex;
+  align-items: center;
+  min-width: $width--lg;
+  font-size: $font-size--sm;
   border: 1px solid $gray;
   border-radius: $radius--sm;
 
+  & + & {
+    margin-top: $spacing--xs;
+  }
+
   &.sortable-chosen {
     border-color: #c6e2ff;
     background-color: $blue--light;
   }
 
+  &__label {
+    padding: $padding 0;
+  }
+
   &__mover {
+    padding: 0 $padding--md;
     cursor: move;
   }
 }
+
+.o-badge {
+  display: inline-flex;
+  align-items: center;
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  padding: 0 6px;
+  height: 20px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  border: 1px solid #fff;
+  border-radius: 18px;
+  background-color: $error;
+  transform: translateY(-50%) translateX(100%);
+}

src/views/screen/deploy/components/EventFrequencyConfigDialog.vue

@@ -262,8 +262,9 @@ export default {
         return []
       }
       const events = []
-      ;[...this.timeRanges].sort((a, b) => a.startTime <= b.startTime ? -1 : 1).forEach(timeRange => {
-        this.dates.forEach(date => {
+      const timeRanges = [...this.timeRanges].sort((a, b) => a.startTime <= b.startTime ? -1 : 1)
+      this.dates.forEach(date => {
+        timeRanges.forEach(timeRange => {
           events.push(this.createMultiEvent(date, timeRange))
         })
       })
@@ -275,7 +276,7 @@ export default {
       return {
         freq: EventFrequency.ONCE,
         start: `${toDateStr(date)} ${startTime}`,
-        until: `${startTime === endTime ? toDateStr(date, 1) : toDateStr(date)} ${endTime}`
+        until: this.transformEndDateTime(date, endTime)
       }
     },
     createWeeklyEvents () {
@@ -296,11 +297,11 @@ export default {
       const startDateStr = toDateStr(startDate)
       if (weeks.length === 7 && this.timeRanges.length === 1) {
         const { startTime, endTime } = this.timeRanges[0]
-        if (endTime === '00:00:00' && startTime === endTime) {
+        if (startTime === endTime) {
           return [{
             freq: EventFrequency.ONCE,
             start: `${startDateStr} ${startTime}`,
-            until: `${toDateStr(endDate, 1)} ${endTime}`
+            until: this.transformEndDateTime(endDate, endTime)
           }]
         }
       } else if (weeks.length < 7) {
@@ -337,7 +338,7 @@ export default {
       return {
         freq: EventFrequency.WEEKLY,
         start: `${toDateStr(startDate)} ${startTime}`,
-        until: `${startTime === endTime ? toDateStr(endDate, 1) : toDateStr(endDate)} ${endTime}`,
+        until: this.transformEndDateTime(endDate, endTime),
         byDay: weeks,
         startTime,
         endTime
@@ -379,6 +380,9 @@ export default {
         endTime: correctEndTime(endTime)
       }
     },
+    transformEndDateTime (date, endTime) {
+      return `${endTime === '00:00:00' ? toDateStr(date, 1) : toDateStr(date)} ${endTime}`
+    },
     onError (message) {
       this.$message({
         type: 'warning',

src/views/screen/deploy/device/index.vue

@@ -232,12 +232,15 @@ export default {
       },
       timeSchema: {
         nonPagination: true,
+        props: {
+          size: 'small'
+        },
         list: this.getEvents,
         cols: [
           { prop: 'time', label: '生效时间', 'show-overflow-tooltip': false },
           { type: 'invoke', render: [
             { label: '移除', on: this.removeEventProxy }
-          ] }
+          ], width: 60 }
         ]
       },
       events: [],

src/views/screen/deploy/ratio/index.vue

@@ -116,6 +116,9 @@ export default {
       ],
       timeSchema: {
         nonPagination: true,
+        props: {
+          size: 'small'
+        },
         list: this.getEvents,
         cols: [
           { prop: 'time', label: '生效时间', 'show-overflow-tooltip': false },

src/views/visualization/v1/TransferCameraDialog.vue

@@ -30,20 +30,18 @@
           <div class="l-flex__none c-sibling-item--v u-font-size--sm u-bold">最多选择{{ max }}个设备</div>
           <draggable
             v-model="cameras"
-            class="l-flex__auto l-flex--col u-font-size--sm u-overflow--auto"
+            class="l-flex__auto l-flex--col u-overflow--auto"
             handle=".mover"
             animation="300"
           >
             <div
               v-for="(item, index) in cameras"
               :key="item.identifier"
-              class="l-flex--row c-sibling-item--v o-draggable-item"
+              class="o-draggable-item"
             >
-              <div class="l-flex__auto l-flex--row c-sibling-item mover">
-                <i class="l-flex__none o-draggable-item__mover el-icon-sort has-padding--h u-color--info u-font-size--md has-active" />
-                <div class="l-flex__auto has-padding--v u-ellipsis">
-                  {{ item.remark }}
-                </div>
+              <div class="l-flex__fill l-flex--row mover">
+                <i class="l-flex__none o-draggable-item__mover el-icon-sort u-color--info u-font-size--md has-active" />
+                <div class="l-flex__auto o-draggable-item__label u-ellipsis">{{ item.remark }}</div>
               </div>
               <i
                 class="l-flex__none el-icon-delete has-padding--h u-color--info u-font-size--md has-active"