feat(dashboard): optimize

src/views/dashboard/v1/AssetStatistic.vue

@@ -58,7 +58,7 @@ export default {
         value: data[AssetType.AUDIO] || 0
       }, {
         label: AssetTypeInfo[AssetType.PPT],
-        value: data[AssetType.IMAGE] || 0
+        value: data[AssetType.PPT] || 0
       }, {
         label: `${AssetTypeInfo[AssetType.PDF]}+${AssetTypeInfo[AssetType.DOC]}`,
         value: (data[AssetType.PDF] || 0) + (data[AssetType.DOC] || 0)

src/views/dashboard/v1/MessageNotice.vue

@@ -16,7 +16,7 @@
         <div class="l-flex__fill u-relative">
           <div class="c-messageNotice__newList">
             <div
-              v-for="item in newAlarmList.slice(0, 4)"
+              v-for="item in highAlarms"
               :key="item.id"
               class="l-flex--row c-messageNotice__item new"
             >
@@ -134,6 +134,11 @@ export default {
       colors: ['#04A681', '#FFA000', '#F40645']
     }
   },
+  computed: {
+    highAlarms () {
+      return this.newAlarmList.slice(0, 4)
+    }
+  },
   created () {
     this.getDeviceAlarms()
     subscribe(['dashboard/event'], this.onMessage)

src/views/dashboard/v1/ProgramRate.vue

@@ -88,12 +88,10 @@ export default {
   }
 }
 </script>
+
 <style lang="scss" scoped>
 .chart {
   height: 100%;
-  margin-left: 20px;
-  &:nth-child(1) {
-    margin-left: 0;
-  }
+  padding: 0 8px;
 }
 </style>

src/views/dashboard/v1/ProgramStatistic.vue

@@ -1,10 +1,10 @@
 <template>
   <Box title="广告统计">
     <StatisticCard
-      :colors="colors"
+      title="节目"
       unit="条"
       total-color="#2956F0"
-      title="节目"
+      :colors="colors"
       :items="items"
     />
   </Box>
@@ -13,6 +13,7 @@
 import { getProgramAnalysis } from './api.js'
 import StatisticCard from './StatisticCard'
 import Box from './Box'
+import { ProgramStatistic } from './config'
 
 export default {
   name: 'ProgramStatistic',
@@ -21,13 +22,13 @@ export default {
     Box
   },
   data () {
-    this.statusMap = {
-      draft: '草稿',
-      subjectToAudit: '待审核',
-      reviewed: '已审核',
-      rejected: '驳回'
-    }
     return {
+      statusMap: {
+        draft: '草稿',
+        subjectToAudit: '待审核',
+        reviewed: '已审核',
+        rejected: '驳回'
+      },
       colors: [
         '#FF6000',
         '#04FF98',
@@ -35,13 +36,15 @@ export default {
         '#C4C4C4',
         '#F40645'
       ],
-      items: [
-      ]
+      items: []
     }
   },
   created () {
-    this.getColor(this.transform())
     this.getProgramAnalysis()
+    this.$timer = setInterval(this.getProgramAnalysis, ProgramStatistic.timer)
+  },
+  beforeDestroy () {
+    clearInterval(this.$timer)
   },
   methods: {
     transform (data = {}) {
@@ -73,5 +76,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped
-></style>

src/views/dashboard/v1/ProgramTop.vue

@@ -11,7 +11,6 @@
 <script>
 import Box from './Box'
 import TopRankChart from './TopRankChart'
-import { createListOptions } from '@/utils'
 import { ProgramTop } from './config'
 import {
   getResources,
@@ -20,8 +19,8 @@ import {
   getPageCountRank,
   getTopOnlineSeconds
 } from './api'
+
 const request = {
-  getResources,
   getPageDurationRank,
   getPagePriceRank,
   getPageCountRank,
@@ -41,33 +40,32 @@ export default {
     }
   },
   data () {
-    this.methodsMap = {
-      getResources: '广告播放TOP5',
-      getPageDurationRank: '下单时长TOP5',
-      getPagePriceRank: '下单金额TOP5',
-      getPageCountRank: '下单次数TOP5',
-      getTopOnlineSeconds: '设备在线TOP5'
-    }
     return {
-      list: [],
-      options: createListOptions({ pageSize: 100 })
+      methodsMap: {
+        getResources: '广告播放TOP5',
+        getPageDurationRank: '下单时长TOP5',
+        getPagePriceRank: '下单金额TOP5',
+        getPageCountRank: '下单次数TOP5',
+        getTopOnlineSeconds: '设备在线TOP5'
+      },
+      list: []
     }
   },
   watch: {
-    type () {
-      this.init()
+    type: {
+      handler () {
+        this.init()
+      },
+      immediate: true
     }
   },
-  created () {
-    this.init()
-  },
   beforeDestroy () {
     clearInterval(this.$timer)
   },
   methods: {
     init () {
-      this.list = []
       clearInterval(this.$timer)
+      this.list = []
       this[this.type]()
       this.$timer = setInterval(this[this.type], ProgramTop.timer)
     },
@@ -82,33 +80,29 @@ export default {
               value: +i.split('=')[1]
             }
           })
-          .sort((a, b) => b.value - a.value)
           .slice(0, 5)
       })
     },
     getPageDurationRank () {
-      this.getDeviceRank('getPageDurationRank')
+      this.getDeviceRank('getPageDurationRank', { pageNum: 1, pageSize: 5 }, 'deviceName', 'value')
     },
     getPagePriceRank () {
-      this.getDeviceRank('getPagePriceRank')
+      this.getDeviceRank('getPagePriceRank', { pageNum: 1, pageSize: 5 }, 'deviceName', 'value')
     },
     getPageCountRank () {
-      this.getDeviceRank('getPageCountRank')
+      this.getDeviceRank('getPageCountRank', { pageNum: 1, pageSize: 5 }, 'deviceName', 'value')
     },
     getTopOnlineSeconds () {
       this.getDeviceRank('getTopOnlineSeconds', 5, 'deviceName', 'onlineSeconds')
     },
-    getDeviceRank (method, params = this.options.params, nameKey = 'deviceName', valueKey = 'value') {
+    getDeviceRank (method, params, nameKey, valueKey) {
       request[method](params).then(({ data }) => {
-        this.list = data
-          .map(i => {
-            return {
-              name: i[nameKey],
-              value: +i[valueKey]
-            }
-          })
-          .sort((a, b) => b.value - a.value)
-          .slice(0, 5)
+        this.list = data.map(i => {
+          return {
+            name: i[nameKey],
+            value: +i[valueKey]
+          }
+        })
       })
     }
   }

src/views/dashboard/v1/TopRankChart.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="l-flex__fill l-flex--col">
+  <div class="l-flex__fill l-flex--col u-releative">
     <status-wrapper
-      v-if="list.length === 0"
+      v-if="items.length === 0"
       class="l-flex__fill l-flex--row center"
     />
     <template v-else>
       <div
-        v-for="item in progressData"
+        v-for="item in items"
         :key="item.key"
         class="l-flex__fill block"
       >
-        <div class="block__intro">
-          <div class="block__name">{{ item.name }}</div>
-          <div class="block__value">{{ item.value }}</div>
+        <div class="l-flex--row block__intro">
+          <div class="l-flex__fill c-siblint-item block__name u-ellipsis">{{ item.name }}</div>
+          <div class="l-flex__none c-siblint-item block__value">{{ item.value }}</div>
         </div>
         <div class="block__progress--outer">
           <div
@@ -52,9 +52,9 @@ function formatSeconds (value) {
   if (hourTime > 0) {
     result = `${parseInt(hourTime)}小时${result}`
   }
-  console.log('result', result)
   return result
 }
+
 export default {
   name: 'TopRankChart',
   props: {
@@ -63,52 +63,23 @@ export default {
       default: () => []
     },
     isTime: {
-      type: Boolean,
+      type: [Boolean, String],
       default: false
     },
     isMoney: {
-      type: Boolean,
+      type: [Boolean, String],
       default: false
     }
   },
-  data () {
-    return {
-      progressData: []
-    }
-  },
-  watch: {
-    list: {
-      handler () {
-        console.log('transform')
-        this.transform()
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    transform () {
-      if (!this.list) {
-        this.progressData = []
-        return
-      }
-      this.progressData = this.list.slice()
-      // if (this.progressData.length === 1) {
-      //   this.progressData[0].rate = '100%'
-      //   return
-      // }
-      this.progressData = this.progressData
-        .sort((a, b) => b.value - a.value)
-        .slice(0, 5)
+  computed: {
+    items () {
       let max = 0
-      let total = this.progressData.reduce(
-        (total, cur) => {
-          max = Math.max(max, cur.value)
-          return total + cur.value
-        },
-        0
-      )
+      let total = this.list.reduce((total, cur) => {
+        max = Math.max(max, cur.value)
+        return total + cur.value
+      }, 0)
       total = Math.max(max, total *= 0.6)
-      this.progressData = this.progressData.map(i => {
+      return this.list.map(i => {
         const item = {
           ...i,
           rate: `${(i.value * 100) / total}%`
@@ -131,38 +102,39 @@ export default {
 .block {
   height: 20%;
   padding-top: 20px;
+
   &:nth-child(1) {
     padding-top: 0;
   }
+
   &__intro {
-    display: flex;
-    justify-content: space-between;
     margin-bottom: 10px;
   }
+
   &__name {
-    font-size: 18px;
     color: #9ea9cd;
-    line-height: 27px;
-    height: 18px;
+    font-size: 18px;
   }
+
   &__value {
     font-size: 18px;
-    line-height: 21px;
   }
+
   &__progress--outer {
     height: 20px;
     position: relative;
     background-color: #060920;
     width: 100%;
-    .block__progress--inner {
-      position: absolute;
-      width: 0;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      background-color: #00d1ff;
-      transition: all 1s;
-    }
+  }
+
+  &__progress--inner {
+    position: absolute;
+    width: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background-color: #00d1ff;
+    transition: all 1s;
   }
 }
 </style>

src/views/dashboard/v1/api.js

@@ -133,7 +133,8 @@ export function getPageDurationRank (query) {
     params: addTenant({
       pageIndex, pageSize,
       ...params
-    })
+    }),
+    custom: true
   })
 }
 
@@ -145,7 +146,8 @@ export function getPagePriceRank (query) {
     params: addTenant({
       pageIndex, pageSize,
       ...params
-    })
+    }),
+    custom: true
   })
 }
 
@@ -157,7 +159,8 @@ export function getPageCountRank (query) {
     params: addTenant({
       pageIndex, pageSize,
       ...params
-    })
+    }),
+    custom: true
   })
 }
 
@@ -165,9 +168,8 @@ export function getTopOnlineSeconds (count) {
   return tenantRequest({
     url: '/deviceOnlineInfoDetail/topOnlineSeconds',
     method: 'GET',
-    params: addTenant({
-      count
-    })
+    params: addTenant({ count }),
+    custom: true
   }).then(({ data }) => {
     return { data: data.map(({ deviceName, onlineSeconds, powerSeconds }) => {
       return {
@@ -182,7 +184,8 @@ export function getSensorMap (data) {
   return request({
     method: 'POST',
     url: '/device/sensorMap',
-    data
+    data,
+    custom: true
   })
 }
 

src/views/dashboard/v1/index.vue

@@ -225,7 +225,7 @@ export default {
       showNotice: false,
       curNotice: {},
       noticeCount: Index.noticeTimer,
-      group: {}
+      group: { path: this.$store.getters.org }
     }
   },
   computed: {
@@ -234,6 +234,7 @@ export default {
     }
   },
   created () {
+    this.getDeviceStatistics()
     this.$timer = setInterval(this.getDeviceStatistics, Index.deviceTimer)
   },
   mounted () {

src/views/dashboard/v2/AssetStatistic.vue

@@ -58,7 +58,7 @@ export default {
         value: data[AssetType.AUDIO] || 0
       }, {
         label: AssetTypeInfo[AssetType.PPT],
-        value: data[AssetType.IMAGE] || 0
+        value: data[AssetType.PPT] || 0
       }, {
         label: `${AssetTypeInfo[AssetType.PDF]}+${AssetTypeInfo[AssetType.DOC]}`,
         value: (data[AssetType.PDF] || 0) + (data[AssetType.DOC] || 0)

src/views/dashboard/v2/Box.vue

@@ -7,7 +7,9 @@
         v-if="title"
         class="l-flex__none c-box__header l-flex--row"
       >
-        <div class="u-bold l-flex__fill">{{ title }}</div>
+        <div class="u-bold l-flex__fill">
+          <slot name="title">{{ title }}</slot>
+        </div>
         <div class="header__decoration">
           <div class="decoration__bg" />
           <div class="decoration__bg--under" />
@@ -96,9 +98,9 @@ export default {
   &__header {
     margin: 0 24px 20px;
     position: relative;
-    height: 80px;
-    line-height: 80px;
-    font-size: 38px;
+    height: 64px;
+    line-height: 64px;
+    font-size: 32px;
     border-bottom: 1px solid rgba(#fff, 0.1);
   }
   .header__decoration {

src/views/dashboard/v2/ProgramBlock.vue

@@ -1,8 +1,6 @@
 <template>
   <Box title="自助广告收益">
-    <TopRankBlock
-      :list="list"
-    />
+    <TopRankBlock :list="list" />
   </Box>
 </template>
 
@@ -10,7 +8,6 @@
 import Box from './Box'
 import TopRankBlock from './TopRankBlock'
 import { getPagePriceRank } from './api'
-import { createListOptions } from '@/utils'
 import { ProgramTop } from './config'
 
 export default {
@@ -21,34 +18,25 @@ export default {
   },
   data () {
     return {
-      list: [],
-      options: createListOptions({ pageSize: 100 })
-    }
-  },
-  watch: {
-    type () {
-      this.init()
+      list: []
     }
   },
   created () {
-    this.getPagePriceRank()
-    this.$timer = setInterval(this.getPagePriceRank, ProgramTop.timer)
+    this.getData()
+    this.$timer = setInterval(this.getData, ProgramTop.timer)
   },
   beforeDestroy () {
     clearInterval(this.$timer)
   },
   methods: {
-    getPagePriceRank () {
-      getPagePriceRank(this.options.params).then(({ data }) => {
-        this.list = data
-          .map(i => {
-            return {
-              name: i.deviceName,
-              value: i.value
-            }
-          })
-          .sort((a, b) => b.value - a.value)
-          .slice(0, 4)
+    getData () {
+      getPagePriceRank({ pageNum: 1, pageSize: 4 }).then(({ data }) => {
+        this.list = data.map(i => {
+          return {
+            name: i.deviceName,
+            value: i.value
+          }
+        })
       })
     }
   }

src/views/dashboard/v2/ProgramRate.vue

@@ -88,12 +88,10 @@ export default {
   }
 }
 </script>
+
 <style lang="scss" scoped>
 .chart {
   height: 100%;
-  margin-left: 20px;
-  &:nth-child(1) {
-    margin-left: 0;
-  }
+  padding: 0 24px;
 }
 </style>

src/views/dashboard/v2/ProgramStatistic.vue

@@ -1,10 +1,10 @@
 <template>
   <Box title="广告统计">
     <StatisticCard
-      :colors="colors"
+      title="节目"
       unit="条"
       total-color="#2956F0"
-      title="节目"
+      :colors="colors"
       :items="items"
     />
   </Box>
@@ -22,13 +22,13 @@ export default {
     Box
   },
   data () {
-    this.statusMap = {
-      draft: '草稿',
-      subjectToAudit: '待审核',
-      reviewed: '已审核',
-      rejected: '驳回'
-    }
     return {
+      statusMap: {
+        draft: '草稿',
+        subjectToAudit: '待审核',
+        reviewed: '已审核',
+        rejected: '驳回'
+      },
       colors: [
         '#FF6000',
         '#04FF98',
@@ -36,8 +36,7 @@ export default {
         '#C4C4C4',
         '#F40645'
       ],
-      items: [
-      ]
+      items: []
     }
   },
   created () {

src/views/dashboard/v2/ProgramTop.vue

@@ -12,7 +12,6 @@
 <script>
 import Box from './Box'
 import TopRankChart from './TopRankChart'
-import { createListOptions } from '@/utils'
 import { ProgramTop } from './config'
 import {
   getResources,
@@ -21,8 +20,8 @@ import {
   getPageCountRank,
   getTopOnlineSeconds
 } from './api'
+
 const request = {
-  getResources,
   getPageDurationRank,
   getPagePriceRank,
   getPageCountRank,
@@ -41,39 +40,37 @@ export default {
       default: 'getResources'
     },
     isCol: {
-      type: Boolean,
+      type: [Boolean, String],
       default: false
     }
-
   },
   data () {
-    this.methodsMap = {
-      getResources: '热门广告',
-      getPageDurationRank: '下单时长TOP5',
-      getPagePriceRank: '自助广告收益',
-      getPageCountRank: '自助广告投单量',
-      getTopOnlineSeconds: '设备在线TOP5'
-    }
     return {
-      list: [],
-      options: createListOptions({ pageSize: 100 })
+      methodsMap: {
+        getResources: '热门广告',
+        getPageDurationRank: '下单时长TOP5',
+        getPagePriceRank: '自助广告收益',
+        getPageCountRank: '自助广告投单量',
+        getTopOnlineSeconds: '设备在线TOP5'
+      },
+      list: []
     }
   },
   watch: {
-    type () {
-      this.init()
+    type: {
+      handler () {
+        this.init()
+      },
+      immediate: true
     }
   },
-  created () {
-    this.init()
-  },
   beforeDestroy () {
     clearInterval(this.$timer)
   },
   methods: {
     init () {
-      this.list = []
       clearInterval(this.$timer)
+      this.list = []
       this[this.type]()
       this.$timer = setInterval(this[this.type], ProgramTop.timer)
     },
@@ -88,33 +85,29 @@ export default {
               value: +i.split('=')[1]
             }
           })
-          .sort((a, b) => b.value - a.value)
           .slice(0, 5)
       })
     },
     getPageDurationRank () {
-      this.getDeviceRank('getPageDurationRank')
+      this.getDeviceRank('getPageDurationRank', { pageNum: 1, pageSize: 5 }, 'deviceName', 'value')
     },
     getPagePriceRank () {
-      this.getDeviceRank('getPagePriceRank')
+      this.getDeviceRank('getPagePriceRank', { pageNum: 1, pageSize: 5 }, 'deviceName', 'value')
     },
     getPageCountRank () {
-      this.getDeviceRank('getPageCountRank')
+      this.getDeviceRank('getPageCountRank', { pageNum: 1, pageSize: 5 }, 'deviceName', 'value')
     },
     getTopOnlineSeconds () {
       this.getDeviceRank('getTopOnlineSeconds', 5, 'deviceName', 'onlineSeconds')
     },
-    getDeviceRank (method, params = this.options.params, nameKey = 'deviceName', valueKey = 'value') {
+    getDeviceRank (method, params, nameKey, valueKey) {
       request[method](params).then(({ data }) => {
-        this.list = data
-          .map(i => {
-            return {
-              name: i[nameKey],
-              value: +i[valueKey]
-            }
-          })
-          .sort((a, b) => b.value - a.value)
-          .slice(0, 5)
+        this.list = data.map(i => {
+          return {
+            name: i[nameKey],
+            value: +i[valueKey]
+          }
+        })
       })
     }
   }

src/views/dashboard/v2/TopRankBlock.vue

@@ -1,14 +1,12 @@
 <template>
-  <div
-    class="l-flex__fill l-flex block__box"
-  >
+  <div class="l-flex__fill l-flex block__box">
     <status-wrapper
-      v-if="list.length === 0"
-      class="l-flex--row center"
+      v-if="items.length === 0"
+      class="l-flex__fill l-flex--row center"
     />
     <template v-else>
       <div
-        v-for="item in progressData"
+        v-for="item in items"
         :key="item.key"
         class="block"
       >
@@ -28,35 +26,13 @@ export default {
       default: () => []
     }
   },
-  data () {
-    return {
-      progressData: [],
-      colors: ['#F40645', '#FF9E00', '#2956F0', '#9EA9CD', '#9EA9CD']
-    }
-  },
-  watch: {
-    list: {
-      handler () {
-        this.transform()
-      }
-    }
-  },
-  methods: {
-    transform () {
-      if (!this.list) {
-        this.progressData = []
-        return
-      }
-      this.progressData = this.list.slice()
-      this.progressData = this.progressData
-        .sort((a, b) => b.value - a.value)
-        .slice(0, 4)
-      this.progressData = this.progressData.map(i => {
-        const item = {
-          ...i
+  computed: {
+    items () {
+      return this.list.map(({ name, value }) => {
+        return {
+          name,
+          value: `${(value / 3600).toFixed(2)}H`
         }
-        item.value = `${(item.value / 100).toFixed(2)}元`
-        return item
       })
     }
   }
@@ -64,25 +40,28 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.block__box{
+.block__box {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 0 22px;
   margin-top: 40px;
 }
+
 .block {
   width: 360px;
   height: 180px;
   background-color: #0b0f30;
   padding: 20px;
-  &__name{
+
+  &__name {
     font-size: 24px;
-    color: #FFFFFF;
+    color: #ffffff;
   }
-  &__value{
+
+  &__value {
     font-size: 72px;
-    color: #12A3FF;
+    color: #12a3ff;
     margin-top: 10px;
   }
 }

src/views/dashboard/v2/TopRankChart.vue

@@ -1,22 +1,25 @@
 <template>
   <div
-    class="l-flex__fill block__box"
+    class="l-flex__fill u-releative"
     :class="isCol? 'l-flex': 'l-flex--col'"
   >
     <status-wrapper
-      v-if="list.length === 0"
+      v-if="items.length === 0"
       class="l-flex__fill l-flex--row center"
     />
     <template v-else>
-      <template v-if="!isCol">
+      <template v-if="isCol">
+        <BarEcharts :items="items" />
+      </template>
+      <template v-else>
         <div
-          v-for="item in progressData"
+          v-for="item in items"
           :key="item.key"
           class="l-flex__fill block"
         >
-          <div class="block__intro">
-            <div class="block__name">{{ item.name }}</div>
-            <div class="block__value">播放{{ item.value }}</div>
+          <div class="l-flex--row block__intro">
+            <div class="l-flex__fill c-siblint-item block__name u-ellipsis">{{ item.name }}</div>
+            <div class="l-flex__none c-siblint-item block__value">{{ item.value }}</div>
           </div>
           <div class="block__progress--outer">
             <div
@@ -26,9 +29,6 @@
           </div>
         </div>
       </template>
-      <template v-else>
-        <BarEcharts :items="progressData" />
-      </template>
     </template>
   </div>
 </template>
@@ -61,9 +61,9 @@ function formatSeconds (value) {
   if (hourTime > 0) {
     result = `${parseInt(hourTime)}小时${result}`
   }
-  console.log('result', result)
   return result
 }
+
 export default {
   name: 'TopRankChart',
   components: {
@@ -75,51 +75,27 @@ export default {
       default: () => []
     },
     isTime: {
-      type: Boolean,
+      type: [Boolean, String],
       default: false
     },
     isMoney: {
-      type: Boolean,
+      type: [Boolean, String],
       default: false
     },
     isCol: {
-      type: Boolean,
+      type: [Boolean, String],
       default: false
     }
   },
-  data () {
-    return {
-      progressData: []
-    }
-  },
-  watch: {
-    list: {
-      handler () {
-        this.transform()
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    transform () {
-      if (!this.list) {
-        this.progressData = []
-        return
-      }
-      this.progressData = this.list.slice()
-      this.progressData = this.progressData
-        .sort((a, b) => b.value - a.value)
-        .slice(0, 5)
+  computed: {
+    items () {
       let max = 0
-      let total = this.progressData.reduce(
-        (total, cur) => {
-          max = Math.max(max, cur.value)
-          return total + cur.value
-        },
-        0
-      )
+      let total = this.list.reduce((total, cur) => {
+        max = Math.max(max, cur.value)
+        return total + cur.value
+      }, 0)
       total = Math.max(max, total *= 0.6)
-      this.progressData = this.progressData.map(i => {
+      return this.list.map(i => {
         const item = {
           ...i,
           rate: `${(i.value * 100) / total}%`
@@ -137,101 +113,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.block__box{
-  position: relative;
-}
-.block__col{
-  z-index: 2;
-}
 .block {
   height: 20%;
   padding-top: 20px;
+
   &:nth-child(1) {
     padding-top: 0;
   }
+
   &__intro {
-    display: flex;
-    justify-content: space-between;
     margin-bottom: 10px;
   }
+
   &__name {
-    font-size: 30px;
     color: #9ea9cd;
-    line-height: 40px;
-    text-align: center;
+    font-size: 30px;
   }
+
   &__value {
     font-size: 30px;
-    line-height: 40px;
   }
+
   &__progress--outer {
     height: 20px;
     position: relative;
     background-color: #060920;
     width: 100%;
-    .block__progress--inner {
-      position: absolute;
-      width: 0;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      background-color: #12A3FF;
-      transition: all 1s;
-    }
   }
-  &__introcol{
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-  }
-  &__progress--outercol {
-    height: 74%;
-    position: relative;
-    background-color: transparent;
-    width: 64px;
-    margin-left: 50%;
-    transform: translateX(-50%);
-    margin-top: 35px;
-    .block__progress--innercol {
-      position: absolute;
-      width: 64px;
-      left: 0%;
-      bottom: 0;
-      background-color: #12A3FF;
-      transition: all 1s;
-    }
-    .block__top{
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      white-space: nowrap;
-      margin-bottom: 10px;
-    }
+
+  &__progress--inner {
+    position: absolute;
+    width: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background-color: #12A3FF;
+    transition: all 1s;
   }
 }
-.line{
-  width: 100%;
-  height: 1px;
-  background-color: #313A5A;
-  position: absolute;
-  left: 0;
-}
-.line1 {
-  bottom: 18%;
-}
-.line2 {
-  bottom: 33%;
-}
-.line3 {
-  bottom: 48%;
-}
-.line4 {
-  bottom: 63%;
-}
-.line5 {
-  bottom: 78%;
-}
-.line6 {
-  bottom: 92%;
-}
 </style>

src/views/dashboard/v2/api.js

@@ -133,7 +133,8 @@ export function getPageDurationRank (query) {
     params: addTenant({
       pageIndex, pageSize,
       ...params
-    })
+    }),
+    custom: true
   })
 }
 
@@ -145,7 +146,8 @@ export function getPagePriceRank (query) {
     params: addTenant({
       pageIndex, pageSize,
       ...params
-    })
+    }),
+    custom: true
   })
 }
 
@@ -157,7 +159,8 @@ export function getPageCountRank (query) {
     params: addTenant({
       pageIndex, pageSize,
       ...params
-    })
+    }),
+    custom: true
   })
 }
 
@@ -165,8 +168,14 @@ export function getTopOnlineSeconds (count) {
   return tenantRequest({
     url: '/deviceOnlineInfoDetail/topOnlineSeconds',
     method: 'GET',
-    params: addTenant({
-      count
-    })
+    params: addTenant({ count }),
+    custom: true
+  }).then(({ data }) => {
+    return { data: data.map(({ deviceName, onlineSeconds, powerSeconds }) => {
+      return {
+        deviceName,
+        onlineSeconds: powerSeconds && powerSeconds !== '0' ? powerSeconds : onlineSeconds
+      }
+    }) }
   })
 }

src/views/dashboard/v2/config.js

@@ -36,21 +36,23 @@ export const AlarmType = {
 export const AssetStatistic = {
   timer: 30 * 1000
 }
-// 节目统计
+
+// 广告统计
 export const ProgramStatistic = {
   timer: 30 * 1000
 }
 
-// 节目类型占比
+// 广告类型占比
 export const ProgramRate = {
   timer: 30 * 1000
 }
 
-// 节目播放TOP5
+// 广告播放TOP5
 export const ProgramTop = {
   timer: 30 * 1000
 }
 
+// 济南园区
 export const Bounds = {
   inspur: [
     [117.126789, 36.660564],

src/views/dashboard/v2/index.vue

@@ -73,8 +73,8 @@
               style="width: 860px; height: 607px; margin-top: 20px"
             >
               <ProgramTop
-                :type="topMap[2]"
-                :is-col="true"
+                :type="topMap[topIndex]"
+                is-col
               />
             </div>
           </div>
@@ -82,8 +82,8 @@
         <div class="l-flex--row">
           <div class="l-flex--col l-flex__none">
             <div
-              class="l-flex__none l-flex--col block-item"
-              style="width: 860px; height: 607px"
+              class="l-flex__none block-item"
+              style="width: 860px; height: 607px;"
             >
               <ProgramRate />
             </div>
@@ -137,9 +137,9 @@ export default {
     ProgramBlock
   },
   data () {
-    this.topMap = ['getPagePriceRank', 'getPageDurationRank', 'getPageCountRank']
     return {
-      topIndex: 0,
+      topMap: ['getPagePriceRank', 'getPageDurationRank', 'getPageCountRank'],
+      topIndex: 2,
       style: null,
       statusData: [
         { label: '大屏总数', value: '-' },
@@ -149,10 +149,11 @@ export default {
       ],
       runRatio: '0',
       deviceList: [],
-      group: {}
+      group: { path: this.$store.getters.org }
     }
   },
   created () {
+    this.getDeviceStatistics()
     this.$timer = setInterval(this.getDeviceStatistics, Index.deviceTimer)
   },
   mounted () {