大屏组件排行榜

components/AiDvRender.vue

@@ -37,6 +37,11 @@
         :isShowIndex="data.isShowIndex"
         :data="values">
       </AiDvTable>
+      <AiRanking
+        v-else-if="data.type === 'AiRanking'"
+        :heigth="'100%'"
+        :data="values">
+      </AiRanking>
       <ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1" :is3dAround="data.is3dAround === '1'"
               :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib" :onlyShowArea="data.limitArea==1"/>
       <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>

components/layout/AiRanking/AiRanking.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="AiRanking">
+    <div class="AiRanking-item" v-for="(item, index) in list" :key="index">
+      <i>{{ index + 1 }}</i>
+      <h2>{{ item.name }}</h2>
+      <span>{{ item.value }}</span>
+      <div class="AiRanking-item__rate" :style="{width: item.rate + '%'}">
+        <div class="bar">
+          <span></span>
+          <i></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AiRanking',
+
+    props: {
+      data: {
+        type: Array,
+        default: () => []
+      }
+    },
+
+    watch: {
+      data: {
+        handler (v) {
+          this.init(v)
+        },
+        deep: true,
+        immediate: true
+      }
+    },
+
+    data () {
+      return {
+        list: []
+      }
+    },
+
+    methods: {
+      init (v) {
+        if (!v.length) {
+          this.list = []
+          return false
+        }
+
+        const total = this.sum(v.map(v => v.value))
+        this.list = v.map(e => {
+          return {
+            ...e,
+            rate: ((Number(e.value) / total) * 100).toFixed(2)
+          }
+        })
+      },
+
+      sum (arr) {
+        return arr.reduce((x, y) => x + y)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AiRanking {
+    * {
+      box-sizing: border-box;
+    }
+
+    .AiRanking-item {
+      display: flex;
+      align-items: center;
+      height: 36px;
+      margin-bottom: 16px;
+      padding-right: 18px;
+      background: url(./asset/ranking1.png) no-repeat;
+      background-size: 100% 100%;
+
+      .AiRanking-item__rate {
+        position: relative;
+
+        .bar {
+          position: relative;
+          width: calc(100% - 6px);
+          height: 6px;
+          background: linear-gradient(90deg, #ffbb45ff 0%, #76f7b8ff 98%);
+
+          i {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            z-index: 12;
+            width: 22px;
+            height: 22px;
+            border: 1px solid #596269;
+            border-radius: 50%;
+            transform: translate(50%, -50%);
+          }
+
+          span {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            z-index: 11;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #e1ffee;
+            box-shadow: 0 0 10px 0 #26F0F7;
+            transform: translate(50%, -50%);
+          }
+        }
+      }
+
+      i {
+        width: 40px;
+        text-align: center;
+        font-size: 18px;
+        color: #fff;
+        font-weight: 600;
+        font-style: normal;
+      }
+
+      h2 {
+        width: 90px;
+        margin-left: 20px;
+        color: #fff;
+        font-size: 18px;
+      }
+
+      span {
+        width: 90px;
+        text-align: left;
+        font-size: 18px;
+        color: #fff;
+      }
+    }
+  }
+</style>

packages/bigscreen/designer/config.js

@@ -513,6 +513,31 @@ const components = [
               {name: '列2', v: 12, v2: 4},
               {name: '列2', v: 12, v2: 4}
             ]
+          },
+          {
+            type: 'AiRanking',
+            label: '排行榜',
+            title: '排行榜',
+            border: 'border6',
+            width: 523,
+            height: 400,
+            zIndex: 1,
+            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
+            dataX: '',
+            dataY: [],
+            rowNum: 7,
+            stripe: '1',
+            isShowIndex: '1',
+            sourceDataId: '',
+            api: '',
+            apiData: [],
+            dataType: 'staticData',
+            dynamicData: [],
+            staticData: [
+              { name: '列1', value: 23 },
+              { name: '列2', value: 12 },
+              { name: '列2', value: 12 }
+            ]
           }
         ]
       }