fix: some bugs

src/views/dashboard/v0/AlarmType.vue

@@ -79,7 +79,7 @@ export default {
           },
           axisLabel: {
             interval: 0,
-            width: 58,
+            width: 50,
             color: '#9EA9CD',
             overflow: 'truncate'
           },

src/views/dashboard/v0/DeviceCalender.vue

@@ -1,8 +1,8 @@
 <template>
   <box title="各大屏当前播放节目">
-    <div class="l-flex__fill l-flex--col c-calender">
+    <div class="l-flex__fill l-flex--col c-calender u-text-center">
       <template v-if="tableData.length">
-        <div class="l-flex__none l-flex--row c-calender__header">
+        <div class="l-flex__none l-flex--row c-calendar__header">
           <div class="col__deviceName">设备名称</div>
           <div class="col__programName">节目名称</div>
           <div class="col__calender">时间排期</div>
@@ -22,26 +22,17 @@
                 <div class="col__deviceName">
                   <auto-text
                     class="u-text-center"
-                    :text="item.deviceName "
+                    :text="item.name"
                   />
                 </div>
                 <div class="col__programName">
-                  <auto-text
-                    class="u-text-center"
-                    :text="item.programName"
-                  />
+                  <auto-text :text="item.programName" />
                 </div>
-                <div class=" col__calender">
-                  <auto-text
-                    class="u-text-center"
-                    :text=" item.calender "
-                  />
+                <div class="col__calender">
+                  <auto-text :text="item.programDesc" />
                 </div>
-                <div class=" col__createTime">
-                  <auto-text
-                    class="u-text-center"
-                    :text=" item.updateTime "
-                  />
+                <div class="col__createTime">
+                  <auto-text :text="item.updateTime" />
                 </div>
               </div>
             </vue-seamless-scroll>
@@ -55,14 +46,10 @@
 
 <script>
 import { getTimelines } from './api'
-import { EventFreq } from '@/constant'
-import { parseTime } from '@/utils'
 import {
   isHit,
-  getNearestHitDate,
-  getFinishDate,
-  getStartDate,
-  toDate
+  toDate,
+  getEventDescription
 } from '@/utils/event'
 import vueSeamlessScroll from '@/views/device/detail/dashboard/vue-seamless-scroll.min.js'
 import Box from './Box'
@@ -82,8 +69,7 @@ export default {
   data () {
     return {
       classOption: {
-        step: 0.5,
-        hoverStop: false
+        step: 0.5
       },
       tableData: []
     }
@@ -101,121 +87,43 @@ export default {
     }
   },
   methods: {
-    getIcon (index) {
-      return {
-        backgroundImage: `url("${require(`@/assets/v0/icon_alert${index}.svg`)}")`
-      }
-    },
     getTimelines () {
       getTimelines(this.deviceList.map(i => i.id), { custom: true }).then(data => {
-        const timeline = []
-        for (const event of data) {
-          let deviceName = ''
-          for (const device of this.deviceList) {
-            if (device.id === event.deviceId) {
-              deviceName = device.name
-              break
-            }
+        const map = {}
+        data.forEach(({ deviceId, updateTime, eventDetail }) => {
+          map[deviceId] = {
+            updateTime,
+            event: this.getCurrentEvent(eventDetail)
           }
-          if (!event.eventDetail.length) { continue }
-          const temp = []
-          for (const item of event.eventDetail) {
-            temp.push({ ...item, deviceName, updateTime: event.updateTime })
+        })
+        this.tableData = this.deviceList.map(({ id, name }) => {
+          const data = map[id]
+          return {
+            id, name,
+            updateTime: data ? data.updateTime : '-',
+            programName: data?.event?.target.name || '暂无节目',
+            programDesc: data?.event ? getEventDescription(data.event) : '-'
           }
-          timeline.push(temp)
-        }
-        this.onUpdate(timeline)
+        })
       })
     },
-    onUpdate (items) {
-      if (items.length) {
+    getCurrentEvent (events) {
+      if (events.length) {
         const now = new Date()
-        const timeline = items.map(events => events
-          .filter(({ until }) => !until || now < new Date(until))
-          .sort((a, b) => {
-            if (b.priority === a.priority) {
-              return toDate(a.start) - toDate(b.start)
-            }
-            return b.priority - a.priority
-          }))
-        for (const item of timeline) {
-          this.checkTimeline(item)
-        }
-      }
-    },
-    checkTimeline (timeline) {
-      if (!timeline.length) { return }
-      const now = new Date()
-      let current = null
-      let currentEndDate = null
-      let next = null
-      if (!current) {
+        const timeline = events.filter(({ until }) => !until || now < new Date(until)).sort((a, b) => {
+          if (b.priority === a.priority) {
+            return toDate(a.start) - toDate(b.start)
+          }
+          return b.priority - a.priority
+        })
         for (let i = 0; i < timeline.length; i++) {
           const event = timeline[i]
-          if (!current && isHit(event, now)) {
-            current = event
-            break
+          if (isHit(event, now)) {
+            return event
           }
         }
       }
-      currentEndDate = current && getFinishDate(current, now)
-      let nextStartDate = null
-      for (let i = 0; i < timeline.length; i++) {
-        const event = timeline[i]
-        if (!current || currentEndDate || event.priority > current.priority) {
-          const rangeStart =
-            !current || event.priority > current.priority
-              ? now
-              : currentEndDate || now
-          if (!nextStartDate || rangeStart < nextStartDate) {
-            const hit = getNearestHitDate(event, rangeStart, nextStartDate)
-            if (hit && (!next || hit < nextStartDate)) {
-              next = event
-              nextStartDate = hit
-            }
-          }
-        }
-      }
-      if (
-        nextStartDate
-        && (!currentEndDate || currentEndDate > nextStartDate)
-      ) {
-        currentEndDate = nextStartDate
-      }
-      if (current) {
-        this.tableData.push(
-          this.getEventInfo(current, getStartDate(current, now), currentEndDate)
-        )
-      }
-    },
-    getEventInfo (event, startDate, endDate) {
-      const { freq } = event
-      const rawData = {
-        startDate: parseTime(startDate, '{y}.{m}.{d}'),
-        startTime: parseTime(startDate, '{h}:{i}:{s}'),
-        endDate: endDate ? parseTime(endDate, '{y}.{m}.{d}') : '',
-        endTime: endDate ? parseTime(endDate, '{h}:{i}:{s}') : ''
-      }
-      let calender = ''
-      if (freq === EventFreq.ONCE) {
-        calender = `${rawData.startDate} ${rawData.startTime}-${
-          rawData.endDate ? `-${rawData.endDate}` : ''
-        } ${rawData.endTime}`
-      } else if (freq === EventFreq.WEEKLY) {
-        calender = `每周:${rawData.startTime}${
-          rawData.endTime ? `-${rawData.startTime}` : ''
-        }`
-      }
-      return {
-        deviceName: event.deviceName,
-        programName: event.target.name,
-        calender,
-        updateTime: event.updateTime,
-        startDate: parseTime(startDate, '{y}.{m}.{d}'),
-        startTime: parseTime(startDate, '{h}:{i}:{s}'),
-        endDate: endDate ? parseTime(endDate, '{y}.{m}.{d}') : '',
-        endTime: endDate ? parseTime(endDate, '{h}:{i}:{s}') : ''
-      }
+      return null
     }
   }
 }
@@ -223,6 +131,9 @@ export default {
 
 <style lang="scss" scoped>
 .c-calender {
+  font-size: 12px;
+  line-height: 36px;
+
   &__header {
     color: #9ea9cd;
     background-color: #313a5a;
@@ -240,23 +151,6 @@ export default {
   &__item {
     color: #ffffff;
     border-bottom: 1px solid #313a5a;
-
-    &.alarm {
-      color: #f40645;
-    }
-  }
-
-  &__header,
-  &__item {
-    font-size: 12px;
-    line-height: 36px;
-    text-align: center;
-  }
-
-  .alarm__icon {
-    width: 19px;
-    height: 19px;
-    transform: translateY(-2px);
   }
 
   .col {
@@ -278,18 +172,6 @@ export default {
     &__createTime {
       flex: 1;
       min-width: 0;
-      .o-button {
-        min-width: 32px;
-        height: 20px;
-        padding: 0 4px;
-        font-size: 12px;
-        border-radius: 2px;
-        background-color: #2956f0;
-      }
-      &.alarm {
-        background-color: #f40645;
-        color: #ffffff;
-      }
     }
   }
 

src/views/dashboard/v0/MessageNotice.vue

@@ -41,7 +41,6 @@
           </div>
           <div class="c-messageNotice__list">
             <vue-seamless-scroll
-              ref="seamlessScroll"
               :data="listData"
               :class-option="classOption"
             >
@@ -145,22 +144,17 @@ export default {
           }
           const length = data.length
           const lastId = this.listData[0]?.id
-          let hasNew = false
           for (let i = 0; i < length; i++) {
             const item = data[i]
             if (item.id === lastId) {
               break
             }
-            hasNew = true
             if (item.level === 2) {
               this.newAlarmList.unshift(item)
             }
           }
 
-          if (hasNew) {
-            this.listData = data
-            this.$refs.seamlessScroll.reset()
-          }
+          this.listData = data
         },
         () => {
           this.error = true