大屏组件

components/AiDvRender.vue

@@ -43,6 +43,7 @@
         v-else-if="data.type === 'AiRanking'"
         :theme="theme"
         :heigth="'100%'"
+        :subType="data.subType"
         :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'"

components/layout/AiRanking/AiRanking.vue

@@ -1,25 +1,22 @@
 <template>
   <div class="AiRanking" :class="'AiRanking-' + theme">
-    <div class="AiRanking-item" v-for="(item, index) in list" :key="index" :class="'AiRanking-item' + (index + 1)">
+    <component :is="subType" :theme="theme" :data="data"></component>
-      <i>{{ index + 1 }}</i>
-      <h2>{{ item.name }}</h2>
-      <span>{{ item.value }}</span>
-      <div class="AiRanking-item__rate--wrapper">
-        <div class="AiRanking-item__rate" :style="{width: item.rate + '%'}">
-          <div class="bar">
-            <span></span>
-            <i></i>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
+  import Ranking1 from './components/Ranking1'
+  import Ranking2 from './components/Ranking2'
+  import Ranking3 from './components/Ranking3'
   export default {
     name: 'AiRanking',
 
+    components: {
+      Ranking1,
+      Ranking2,
+      Ranking3
+    },
+
     props: {
       data: {
         type: Array,
@@ -29,43 +26,11 @@
       theme: {
         type: String,
         default: '0'
-      }
       },
 
-    watch: {
+      subType: {
-      data: {
+        type: String,
-        handler (v) {
+        default: 'Ranking1'
-          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)
       }
     }
   }
@@ -74,183 +39,47 @@
 <style lang="scss" scoped>
   .AiRanking {
     height: 100%;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar {
-      width: 5px;
-      height: 14px;
-    }
-
-    &::-webkit-scrollbar-corner {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      min-height: 20px;
-      background-clip: content-box;
-      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
-    }
-
-    &::-webkit-scrollbar-track {
-      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
-    }
 
     * {
       box-sizing: border-box;
     }
 
-    .AiRanking-item {
+    ::-webkit-scrollbar {
-      display: flex;
-      align-items: center;
-      height: 36px;
-      margin-bottom: 16px;
-      padding-right: 18px;
-      background: url(./asset/ranking4.png) no-repeat;
-      background-size: 100% 100%;
-
-      &.AiRanking-item1 {
-        background: url(./asset/ranking1.png) no-repeat;
-        background-size: 100% 100%;
-      }
-
-      &.AiRanking-item2 {
-        background: url(./asset/ranking2.png) no-repeat;
-        background-size: 100% 100%;
-      }
-
-      &.AiRanking-item3 {
-        background: url(./asset/ranking3.png) no-repeat;
-        background-size: 100% 100%;
-      }
-
-      .AiRanking-item__rate--wrapper {
-        flex: 1;
-        background: #6F7171;
-      }
-
-      .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;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: normal;
-      }
-
-      span {
-        width: 90px;
-        text-align: left;
-        font-size: 18px;
-        color: #fff;
-      }
-    }
-
-    &.AiRanking-1 {
-      .AiRanking-item {
-        background: url(./asset/ranking4-dj.png) no-repeat;
-        background-size: 100% 100%;
-
-        &.AiRanking-item1 {
-          background: url(./asset/ranking1-dj.png) no-repeat;
-          background-size: 100% 100%;
-        }
-
-        &.AiRanking-item2 {
-          background: url(./asset/ranking2-dj.png) no-repeat;
-          background-size: 100% 100%;
-        }
-
-        &.AiRanking-item3 {
-          background: url(./asset/ranking3-dj.png) no-repeat;
-          background-size: 100% 100%;
-        }
-        .AiRanking-item__rate--wrapper {
-          flex: 1;
-          background: #928D7C;
-        }
-
-        .AiRanking-item__rate {
-          position: relative;
-
-          .bar {
-            position: relative;
-            width: calc(100% - 6px);
-            height: 6px;
-            background: linear-gradient(90deg, #ffbb45ff 0%, #ff3e18ff 98%);
-
-            i {
-              border: 1px solid #AA9E93;
-            }
-
-            span {
-              background: #FAB56C;
-              box-shadow: 0 0 10px 0 #fab56c;
-            }
-          }
-        }
-      }
-
-      &::-webkit-scrollbar {
       width: 5px;
       height: 14px;
     }
 
-      &::-webkit-scrollbar-corner {
+    ::-webkit-scrollbar-corner {
       background: transparent;
     }
 
-      &::-webkit-scrollbar-thumb {
+    ::-webkit-scrollbar-thumb {
+      min-height: 20px;
+      background-clip: content-box;
+      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
+    }
+
+    ::-webkit-scrollbar-track {
+      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
+    }
+
+    &.AiRanking-1 {
+      ::-webkit-scrollbar {
+        width: 5px;
+        height: 14px;
+      }
+
+      ::-webkit-scrollbar-corner {
+        background: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
         min-height: 20px;
         background-clip: content-box;
         box-shadow: 0 0 0 5px rgba(250, 181, 108, 0.5) inset;
       }
 
-      &::-webkit-scrollbar-track {
+      ::-webkit-scrollbar-track {
         box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
       }
     }

packages/bigscreen/designer/components/form/componentConfig.vue

@@ -64,6 +64,17 @@
             </el-select>
           </div>
         </div>
+        <div class="layout-config__item" v-if="config.type === 'AiRanking'">
+          <label>样式</label>
+          <div class="layout-config__item--right">
+            <el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable>
+              <el-option label="样式1" value="Ranking1"></el-option>
+              <el-option label="样式2" value="Ranking2"></el-option>
+              <el-option label="样式3" value="Ranking3"></el-option>
+              <el-option label="样式4" value="Ranking4"></el-option>
+            </el-select>
+          </div>
+        </div>
         <template v-if="config.type === 'table' || config.type === 'AiDvTable'">
           <div class="layout-config__item">
             <label>显示排名</label>

packages/bigscreen/designer/config.js

@@ -527,6 +527,7 @@ const components = [
             dataX: '',
             dataY: [],
             rowNum: 7,
+            subType: 'Ranking1',
             stripe: '1',
             isShowIndex: '1',
             sourceDataId: '',