refactor: adjust some styles

src/components/service/FullLink/index.vue

@@ -179,7 +179,7 @@ export default {
           icon: status === -1
             ? 'link-unbound'
             : `link-${iconKey || key}-${status === 1 ? 'online' : 'offline'}`,
-          className: [alias || key, canClick && status === 1 ? 'u-pointer' : ''].join(' ')
+          className: [alias || key, canClick && ~status ? 'u-pointer' : ''].join(' ')
         }
       })
     },

src/views/dashboard/v0/AlarmLevel.vue

@@ -1,10 +1,11 @@
 <template>
   <box title="预警等级情况">
-    <cards :items="itemList" />
+    <cards :items="items" />
   </box>
 </template>
 
 <script>
+import { getDeviceExceptionLevelStatistic } from './api'
 import Box from './Box'
 import Cards from './Cards'
 
@@ -14,24 +15,40 @@ export default {
     Box,
     Cards
   },
-  props: {
-    items: {
-      type: Array,
-      required: true
+  data () {
+    return {
+      itemValue: ['-', '-', '-', '-']
     }
   },
   computed: {
-    itemList () {
+    items () {
       const colors = ['#0AB4FF', '#F40645', '#FFA000', '#04A681']
+      const value = this.itemValue
 
-      return this.items.map((item, index) => {
+      return ['预警等级总数', '紧急等级', '提示等级', '普通等级'].map((item, index) => {
         return {
-          ...item,
           icon: 'v0-alarm',
+          label: item,
+          value: value[index] === void 0 ? '-' : value[index],
           style: { color: colors[index] }
         }
       })
     }
+  },
+  created () {
+    this.getDeviceExceptionLevelStatistic()
+    this.$timer = setInterval(this.getDeviceExceptionLevelStatistic, 10000)
+  },
+  beforeDestroy () {
+    clearInterval(this.$timer)
+  },
+  methods: {
+    getDeviceExceptionLevelStatistic () {
+      getDeviceExceptionLevelStatistic().then(({ data }) => {
+        const { total, urgency, hint, common } = data
+        this.itemValue = [total, urgency, hint, common]
+      })
+    }
   }
 }
 </script>

src/views/dashboard/v0/Cards.vue

@@ -51,8 +51,8 @@ export default {
   }
 
   &__icon {
-    margin-right: 8px;
-    font-size: 19px;
+    margin: 0 8px 2px 0;
+    font-size: 18px;
   }
 
   &__value {

src/views/dashboard/v0/DeviceCalender.vue

@@ -1,45 +1,42 @@
 <template>
   <box title="各大屏当前播放节目">
     <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-calendar__header">
-          <div class="col__deviceName">设备名称</div>
-          <div class="col__programName">节目名称</div>
-          <div class="col__calender">时间排期</div>
-          <div class="col__createTime">更新时间</div>
-        </div>
-        <div class="l-flex__fill u-relative">
-          <div class="c-calender__list">
-            <vue-seamless-scroll
-              :data="tableData"
-              :class-option="classOption"
+      <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>
+        <div class="col__createTime">更新时间</div>
+      </div>
+      <div class="l-flex__fill u-relative">
+        <div class="c-calender__list">
+          <vue-seamless-scroll
+            :data="tableData"
+            :class-option="classOption"
+          >
+            <div
+              v-for="item in tableData"
+              :key="item.id"
+              class="l-flex--row c-calender__item"
             >
-              <div
-                v-for="item in tableData"
-                :key="item.id"
-                class="l-flex--row c-calender__item"
-              >
-                <div class="col__deviceName">
-                  <auto-text
-                    class="u-text-center"
-                    :text="item.name"
-                  />
-                </div>
-                <div class="col__programName">
-                  <auto-text :text="item.programName" />
-                </div>
-                <div class="col__calender">
-                  <auto-text :text="item.programDesc" />
-                </div>
-                <div class="col__createTime">
-                  <auto-text :text="item.updateTime" />
-                </div>
+              <div class="col__deviceName">
+                <auto-text
+                  class="u-text-center"
+                  :text="item.name"
+                />
+              </div>
+              <div class="col__programName">
+                <auto-text :text="item.programName" />
+              </div>
+              <div class="col__calender">
+                <auto-text :text="item.programDesc" />
+              </div>
+              <div class="col__createTime">
+                <auto-text :text="item.updateTime" />
               </div>
-            </vue-seamless-scroll>
-          </div>
+            </div>
+          </vue-seamless-scroll>
         </div>
-      </template>
-      <status-wrapper v-else />
+      </div>
     </div>
   </box>
 </template>
@@ -71,7 +68,23 @@ export default {
       classOption: {
         step: 0.5
       },
-      tableData: []
+      programMap: null
+    }
+  },
+  computed: {
+    tableData () {
+      const map = this.programMap
+      return this.deviceList.map(({ id, name }) => {
+        const data = map ? map[id] : null
+        return {
+          id, name,
+          updateTime: data ? data.updateTime : '-',
+          programName: map
+            ? data?.event?.target.name || '暂无节目'
+            : '查询中...',
+          programDesc: map && data?.event ? getEventDescription(data.event) : '-'
+        }
+      })
     }
   },
   watch: {
@@ -79,8 +92,6 @@ export default {
       handler () {
         if (this.deviceList.length) {
           this.getTimelines()
-        } else {
-          this.tableData = []
         }
       },
       immediate: true
@@ -88,24 +99,18 @@ export default {
   },
   methods: {
     getTimelines () {
-      getTimelines(this.deviceList.map(i => i.id), { custom: true }).then(data => {
-        const map = {}
-        data.forEach(({ deviceId, updateTime, eventDetail }) => {
-          map[deviceId] = {
-            updateTime,
-            event: this.getCurrentEvent(eventDetail)
-          }
-        })
-        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) : '-'
-          }
-        })
-      })
+      getTimelines(this.deviceList.map(i => i.id), { custom: true }).then(
+        data => {
+          const map = {}
+          data.forEach(({ deviceId, updateTime, eventDetail }) => {
+            map[deviceId] = {
+              updateTime,
+              event: this.getCurrentEvent(eventDetail)
+            }
+          })
+          this.programMap = map
+        }
+      )
     },
     getCurrentEvent (events) {
       if (events.length) {
@@ -174,9 +179,5 @@ export default {
       min-width: 0;
     }
   }
-
-  ::v-deep.el-empty {
-    padding: 0;
-  }
 }
 </style>

src/views/dashboard/v0/DeviceSort.vue

@@ -6,7 +6,7 @@
     v-on="$listeners"
   >
     <div class="l-flex__none l-flex--row center c-sort-header">
-      按住鼠标左键拖动视频框进行排序
+      按住鼠标左键拖动进行排序
       <button
         class="c-sort-header__button o-button"
         @click="save"
@@ -16,7 +16,7 @@
     </div>
     <draggable
       v-model="deviceList"
-      class="l-flex__auto c-sort-list u-overflow-y--auto"
+      class="l-flex__fill c-sort-list u-overflow-y--auto"
       animation="300"
     >
       <div
@@ -74,7 +74,7 @@ export default {
 .c-sort-header {
   position: relative;
   height: 40px;
-  margin: $spacing 24px;
+  margin: 0 24px $spacing;
   color: #7c86a7;
   font-size: 18px;
 
@@ -88,6 +88,7 @@ export default {
 .c-sort-list {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: max-content;
   grid-gap: $spacing $spacing;
   margin: 0 24px;
 

src/views/dashboard/v0/Header.vue

@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     getCurrentTime () {
-      this.now = parseTime(new Date(), '{y}/{m}/{d}   {h}:{i}')
+      this.now = parseTime(new Date(), '{y}/{m}/{d}   {h}:{i}:{s}')
     }
   }
 }

src/views/dashboard/v0/Map.vue

@@ -67,10 +67,10 @@ export default {
     onFullscreen (fullscreen) {
       this.fullscreen = fullscreen
       setTimeout(() => {
-        this.initMap()
-      }, 500)
+        this.initMap(true)
+      }, 100)
     },
-    initMap () {
+    initMap (soon) {
       if (!this.deviceList.length) {
         return
       }
@@ -97,7 +97,7 @@ export default {
         setTimeout(() => {
           this.$markers && this.map.remove(this.$markers)
           this.$markers = markers
-        }, 500)
+        }, soon ? 0 : 500)
 
         this.map.setFitView()
       })

src/views/dashboard/v0/MessageNotice.vue

@@ -1,19 +1,45 @@
 <template>
   <box title="消息通知">
     <div class="l-flex__fill l-flex--col c-messageNotice">
-      <template v-if="listData.length">
-        <div class="l-flex__none l-flex--row c-messageNotice__header">
-          <div class="l-flex__none col__time">时间</div>
-          <div class="l-flex__none col__deviceName">设备名称</div>
-          <div class="l-flex__fill col__content">内容</div>
-          <div class="l-flex__none col__opt">操作</div>
+      <div class="l-flex__none l-flex--row c-messageNotice__header">
+        <div class="l-flex__none col__time">时间</div>
+        <div class="l-flex__none col__deviceName">设备名称</div>
+        <div class="l-flex__fill">内容</div>
+      </div>
+      <div class="l-flex__fill u-relative">
+        <div class="c-messageNotice__newList">
+          <div
+            v-for="(item, index) in newItems"
+            :key="item.id"
+            class="l-flex--row c-messageNotice__item new"
+            @click="onView(item, index)"
+          >
+            <div class="l-flex__none col__time l-flex--row">
+              <svg-icon
+                class="alarm__icon"
+                icon-class="v0-alarm"
+                :style="{ color: colors[item.level] }"
+              />
+              <div>{{ item.happenTime }}</div>
+            </div>
+            <div class="l-flex__none u-ellipsis col__deviceName">
+              {{ item.deviceName }}
+            </div>
+            <div class="l-flex__fill u-ellipsis">
+              {{ item.type }}
+            </div>
+          </div>
         </div>
-        <div class="l-flex__fill u-relative">
-          <div class="c-messageNotice__newList">
+        <div class="c-messageNotice__list">
+          <vue-seamless-scroll
+            :data="listData"
+            :class-option="classOption"
+          >
             <div
-              v-for="(item, index) in newItems"
+              v-for="item in listData"
               :key="item.id"
-              class="l-flex--row c-messageNotice__item new"
+              class="l-flex--row c-messageNotice__item"
+              @click="onView(item)"
             >
               <div class="l-flex__none col__time l-flex--row">
                 <svg-icon
@@ -26,63 +52,13 @@
               <div class="l-flex__none u-ellipsis col__deviceName">
                 {{ item.deviceName }}
               </div>
-              <div class="l-flex__fill u-ellipsis col__content">
-                {{ item.type }}
-              </div>
-              <div class="l-flex__none col__opt">
-                <button
-                  class="o-button alarm"
-                  @click="onView(item, index)"
-                >
-                  查看
-                </button>
+              <div class="l-flex__fill u-ellipsis">
+                {{ item.deviceName }}
               </div>
             </div>
-          </div>
-          <div class="c-messageNotice__list">
-            <vue-seamless-scroll
-              :data="listData"
-              :class-option="classOption"
-            >
-              <div
-                v-for="item in listData"
-                :key="item.id"
-                class="l-flex--row c-messageNotice__item"
-              >
-                <div class="l-flex__none col__time l-flex--row">
-                  <svg-icon
-                    class="alarm__icon"
-                    icon-class="v0-alarm"
-                    :style="{ color: colors[item.level] }"
-                  />
-                  <div>{{ item.happenTime }}</div>
-                </div>
-                <div class="l-flex__none u-ellipsis col__deviceName">
-                  <auto-text
-                    class="u-text-center"
-                    :text="item.deviceName"
-                  />
-                </div>
-                <div class="l-flex__fill u-ellipsis col__content">
-                  <auto-text
-                    class="u-text-center"
-                    :text="item.type"
-                  />
-                </div>
-                <div class="l-flex__none col__opt">
-                  <button
-                    class="o-button"
-                    @click="onView(item)"
-                  >
-                    查看
-                  </button>
-                </div>
-              </div>
-            </vue-seamless-scroll>
-          </div>
+          </vue-seamless-scroll>
         </div>
-      </template>
-      <status-wrapper v-else />
+      </div>
     </div>
   </box>
 </template>
@@ -101,8 +77,6 @@ export default {
   data () {
     this.$num = 0
     return {
-      error: false,
-      loading: true,
       classOption: {
         step: 0.4
       },
@@ -118,7 +92,7 @@ export default {
   },
   mounted () {
     this.getDeviceAlarms()
-    this.$timer = setInterval(this.getDeviceAlarms, 30000)
+    this.$timer = setInterval(this.getDeviceAlarms, 10000)
   },
   beforeDestroy () {
     clearInterval(this.$timer)
@@ -131,36 +105,28 @@ export default {
       this.$emit('openAlarmInfo', item)
     },
     getDeviceAlarms () {
-      this.error = false
       getDeviceAlarms(
         addTenant({
           pageIndex: 1,
           pageSize: 20
         })
-      ).then(
-        ({ data }) => {
-          if (!data.length) {
-            return
+      ).then(({ data }) => {
+        if (!data.length) {
+          return
+        }
+        const length = data.length
+        const lastId = this.listData[0]?.id
+        for (let i = 0; i < length; i++) {
+          const item = data[i]
+          if (item.id === lastId) {
+            break
           }
-          const length = data.length
-          const lastId = this.listData[0]?.id
-          for (let i = 0; i < length; i++) {
-            const item = data[i]
-            if (item.id === lastId) {
-              break
-            }
-            if (item.level === 2) {
-              this.newAlarmList.unshift(item)
-            }
+          if (item.level === 2) {
+            this.newAlarmList.unshift(item)
           }
-
-          this.listData = data
-        },
-        () => {
-          this.error = true
         }
-      ).finally(() => {
-        this.loading = false
+
+        this.listData = data
       })
     }
   }
@@ -199,7 +165,7 @@ export default {
 
   .alarm__icon {
     font-size: 14px;
-    margin-right: 4px;
+    margin: 0 4px 2px 0;
   }
 
   .col {
@@ -210,31 +176,10 @@ export default {
     &__deviceName {
       width: 95px;
     }
-
-    &__opt {
-      width: 50px;
-
-      .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;
-        }
-      }
-    }
   }
 
-  &__newList {
-    animation: sparkle 2s linear infinite;
-
-    &:hover {
-      animation: none;
-    }
+  &__newList .alarm__icon {
+    animation: sparkle 1s linear infinite;
   }
 
   @keyframes sparkle {
@@ -251,9 +196,5 @@ export default {
       opacity: 0;
     }
   }
-
-  ::v-deep.el-empty {
-    padding: 0;
-  }
 }
 </style>

src/views/dashboard/v0/index.vue

@@ -105,7 +105,6 @@ import {
   getDevices,
   getDeviceStatistics
 } from '@/api/device'
-import { getDeviceExceptionLevelStatistic } from './api'
 import DeviceStatus from './DeviceStatus'
 import DeviceCalender from './DeviceCalender'
 import Map from './Map'
@@ -164,8 +163,8 @@ export default {
     }
   },
   created () {
-    this.getData()
-    this.$timer = setInterval(this.getData, 30000)
+    this.getDeviceStatistics()
+    this.$timer = setInterval(this.getDeviceStatistics, 60000)
   },
   mounted () {
     this.checkScale()
@@ -181,10 +180,6 @@ export default {
         transform: `scale(${window.innerWidth / 1920}, ${window.innerHeight / 1080})`
       }
     },
-    getData () {
-      this.getDeviceStatistics()
-      this.getDeviceExceptionLevelStatistic()
-    },
     openLinkState (item) {
       this.currentLinkState = item
       this.showLinkState = true
@@ -220,29 +215,6 @@ export default {
       this.currentAlarmInfo = null
       this.showAlarmInfo = false
     },
-    getDeviceExceptionLevelStatistic () {
-      getDeviceExceptionLevelStatistic().then(({ data }) => {
-        const { total, urgency, hint, common } = data
-        this.exceptionLevelStatisticArray = [
-          {
-            label: '预警等级总数',
-            value: total
-          },
-          {
-            label: '紧急等级',
-            value: urgency
-          },
-          {
-            label: '提示等级',
-            value: hint
-          },
-          {
-            label: '普通等级',
-            value: common
-          }
-        ]
-      })
-    },
     getDeviceStatistics () {
       getDeviceStatistics().then(({ data }) => {
         const { notEnabledTotal, offLineTotal, onLineTotal, total } = data

src/views/device/index.vue

@@ -63,10 +63,8 @@ export default {
           { label: '设备名称', 'min-width': 120, render (data, h) {
             return data.empty ? h('span', { staticClass: 'u-color--info' }, '暂无备份设备') : data.name
           } },
-          { prop: 'productName', label: '产品' },
-          { prop: 'serialNumber', label: '序列号' },
-          { prop: 'mac', label: 'MAC' },
-          { prop: 'address', label: '地址', 'min-width': 100 },
+          { prop: 'serialNumber', label: '序列号', 'min-width': 140 },
+          { prop: 'mac', label: 'MAC', 'min-width': 140 },
           { type: 'tag', 'width': 100, render ({ empty, activate, onlineStatus }) {
             return empty
               ? null

src/views/realm/ai-timing/components/GroupTimingTable.vue

@@ -45,8 +45,8 @@ export default {
         ],
         cols: [
           { prop: 'name', label: '设备名称', 'min-width': 120 },
-          { prop: 'serialNumber', label: '序列号' },
-          { prop: 'mac', label: 'MAC' },
+          { prop: 'serialNumber', label: '序列号', 'min-width': 140 },
+          { prop: 'mac', label: 'MAC', 'min-width': 140 },
           { prop: 'address', label: '地址' },
           { type: 'invoke', width: 180, render: [
             { label: '服务配置', on: this.onDeviceServiceConfig },

src/views/realm/assign/Device.vue

@@ -48,9 +48,9 @@ export default {
           { key: 'name', type: 'search', placeholder: '设备名称' }
         ],
         cols: [
-          { prop: 'name', label: '设备名称' },
-          { prop: 'serialNumber', label: '序列号' },
-          { prop: 'mac', label: 'MAC' },
+          { prop: 'name', label: '设备名称', 'min-width': 120 },
+          { prop: 'serialNumber', label: '序列号', 'min-width': 140 },
+          { prop: 'mac', label: 'MAC', 'min-width': 140 },
           { prop: 'address', label: '地址' },
           { type: 'invoke', width: 100, render: [
             { label: '移除', on: this.onDel }
@@ -68,10 +68,10 @@ export default {
           { key: 'name', type: 'search', placeholder: '设备名称' }
         ],
         cols: [
-          { prop: 'name', label: '设备名称' },
-          { prop: 'serialNumber', label: '序列号' },
-          { prop: 'mac', label: 'MAC' },
-          { prop: 'address', label: '地址' }
+          { prop: 'name', label: '设备名称', 'min-width': 120 },
+          { prop: 'serialNumber', label: '序列号', 'min-width': 140 },
+          { prop: 'mac', label: 'MAC', 'min-width': 140 },
+          { prop: 'address', label: '地址', 'min-width': 100 }
         ]
       }
     }

src/views/realm/device/Device.vue

@@ -140,8 +140,8 @@ export default {
           { label: '设备名称', 'min-width': 120, render (data, h) {
             return data.empty ? h('span', { staticClass: 'u-color--info' }, '暂无备份设备') : data.name
           } },
-          { prop: 'productName', label: '产品' },
-          { prop: 'address', label: '地址', 'min-width': 100 },
+          { prop: 'serialNumber', label: '序列号', 'min-width': 140 },
+          { prop: 'mac', label: 'MAC', 'min-width': 140 },
           { type: 'tag', 'width': 100, render ({ empty, activate, onlineStatus }) {
             return empty
               ? null