Merge branch 'build' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_webapp into build

components/AiDvRender.vue

@@ -37,12 +37,14 @@
         :stripe="data.stripe"
         :theme="theme"
         :isShowIndex="data.isShowIndex"
+        :config="dvTableConfig"
         :data="values">
       </AiDvTable>
       <AiRanking
         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'"
@@ -86,7 +88,8 @@ export default {
       chartList,
       map: null,
       lib: null,
-      timer: null
+      timer: null,
+      dvTableConfig: []
     }
   },
   computed: {
@@ -102,12 +105,24 @@ export default {
     currentType: v => v.data.type
   },
   watch: {
-    data: {
+    values: {
       immediate: true,
       deep: true, handler() {
         if (this.currentType == 'map') {
           // this.renderMap()
         }
+
+        if (this.currentType === 'AiDvTable') {
+          this.dvTableConfig = this.data[this.data.dataType].map((v, i) => {
+            return {
+              color: this.data.config[i] ? (this.data.config[i].color || '') : '',
+              width: this.data.config[i] ? (this.data.config[i].width || '') : '',
+              align: this.data.config[i] ? (this.data.config[i].align || '') : ''
+            }
+          })
+
+          this.data.config = this.dvTableConfig
+        }
       }
     }
   },

components/AiDvViewer.vue

@@ -14,7 +14,7 @@
         }"
         v-for="(item, index) in componentList"
         :key="index">
-        <ai-dv-render :instance="instance" :data="item" :index="index" :theme="dashboard.theme"/>
+        <ai-dv-render :instance="instance" :key="index" :data="item" :index="index" :theme="dashboard.theme"/>
       </div>
     </div>
     <components v-else :is="component" :dict="dict" :instance="instance" :nav="meta"/>
@@ -85,7 +85,7 @@ export default {
             this.dashboard = JSON.parse(res.data.config).dashboard
 
             this.componentList.forEach((item, index) => {
-              if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || ['display', 'table', 'map', 'summary'].includes(item.type))) {
+              if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || ['display', 'table', 'map', 'summary', 'AiRanking', 'AiDvTable'].includes(item.type))) {
                 this.getSourceData(item, index)
               }
               if (item.type === 'monitor' && item.monitorType === 'cmcc') {

components/AiEchart/template/bar/barChart3.js

@@ -12,20 +12,14 @@ export default {
     type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'},
     barWidth: 24,
     showBackground: true,
-    backgroundStyle: {
+    // backgroundStyle: {
-      color: 'rgba(123, 165, 255, .2)'
+    //   color: 'rgba(123, 165, 255, .2)'
-    },
+    // },
-    itemStyle: {
-      color: {
-        type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
-        colorStops: [{offset: 0, color: '#42BBFF'}, {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}]
-      }
-    },
     emphasis: {
       itemStyle: {
         color: {
           type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
-          colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
+          // colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
         }
       }
     }

components/AiEchart/template/bar/barChart5.js

@@ -19,5 +19,4 @@ export default {
   axisPointer: {
     type: 'none', show: true, triggerTooltip: false,
   },
-  daemon: {type: 'bar', barWidth: 12, stack: 'stack'}
 }

components/layout/AiDvTable/AiDvTable.vue

@@ -5,9 +5,9 @@
         v-for="(item, index) in header"
         :key="index"
         :style="{
-          width: item.width + 'px',
+          width: config[index].width ? config[index].width + 'px' : '',
-          textAlign: item.align,
+          textAlign: config[index].align,
-          flex: item.width ? 'inherit' : 1
+          flex: config[index].width ? 'inherit' : 1
         }">
         {{ item.v }}
       </span>
@@ -18,10 +18,10 @@
           v-for="(column, i) in item"
           :key="i"
           :style="{
-            color: column.color,
+            color: config[i].color,
-            textAlign: column.align,
+            textAlign: config[i].align,
-            width: column.width + 'px',
+            width: config[i].width ? config[i].width + 'px' : '',
-            flex: column.width ? 'inherit' : 1
+            flex: config[i].width ? 'inherit' : 1
           }">
           <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
           <span :title="column.v">{{ column.v }}</span>
@@ -54,6 +54,11 @@
       theme: {
         type: String,
         default: '0'
+      },
+
+      config: {
+        type: Array,
+        default: () => []
       }
     },
 
@@ -80,6 +85,7 @@
 
     methods: {
       init (value) {
+        console.log(this.config)
         if (!value.length) {
           this.header = []
           this.body = []
@@ -88,7 +94,6 @@
         }
 
         const headerKey = Object.keys(value[0])[0]
-        console.log(Object.keys(value[0]))
         const bodyKey = Object.keys(value[0]).filter(v => {
           return v !== headerKey && ['color', 'width', 'align'].indexOf(v) === -1
         })

components/layout/AiDvWrapper/AiDvWrapper.vue

@@ -2,7 +2,8 @@
   <section class="AiDvWrapper" :class="'AiDvWrapper' + theme">
     <dv-full-screen-container>
       <div class="viewPanel column" flex :style="{backgroundImage:`url('${background}')`}">
-        <component :is="headerComponent" v-bind="{...$props,...$data}" @fullscreen="handleFullScreen" @setting="e=>dialog=e" @change="e=>$emit('change',e)"/>
+        <component :is="headerComponent" v-bind="{...$props,...$data}" v-model="active" @fullscreen="handleFullScreen" @setting="e=>dialog=e"
+                   @change="e=>$emit('change',e)"/>
         <div class="fill">
           <slot/>
         </div>

components/layout/AiDvWrapper/layout/primary.vue

@@ -3,7 +3,7 @@
     <div flex class="content">
       <b class="headerTitle" v-text="title"/>
       <el-tabs class="fill" v-model="current" @tab-click="$emit('change', current)">
-        <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.name"/>
+        <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.id"/>
       </el-tabs>
       <div class="rightPane" flex>
         <div class="item" v-text="currentTime"/>
@@ -17,6 +17,10 @@
 <script>
 export default {
   name: "primary",
+  model: {
+    prop: "active",
+    event: "change"
+  },
   props: {
     title: String,
     views: {default: () => []},
@@ -53,6 +57,7 @@ export default {
     }
   },
   created() {
+    this.current = this.$copy(this.active)
     // this.getWeather()
   }
 }

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;
       }
     }

components/layout/AiRanking/components/Ranking1.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="Ranking1" :class="'Ranking1-' + theme">
+    <div class="Ranking1-item" v-for="(item, index) in list" :key="index" :class="'Ranking1-item' + (index + 1)">
+      <i>{{ index + 1 }}</i>
+      <h2>{{ item.name }}</h2>
+      <span>{{ item.value }}</span>
+      <div class="Ranking1-item__rate--wrapper">
+        <div class="Ranking1-item__rate" :style="{width: item.rate + '%'}">
+          <div class="bar">
+            <span></span>
+            <i></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Ranking1',
+
+    props: {
+      data: {
+        type: Array,
+        default: () => []
+      },
+
+      theme: {
+        type: String,
+        default: '0'
+      }
+    },
+
+    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>
+  .Ranking1 {
+    height: 100%;
+    overflow-y: auto;
+
+    .Ranking1-item {
+      display: flex;
+      align-items: center;
+      height: 36px;
+      margin-bottom: 16px;
+      padding-right: 18px;
+      background: url(../asset/ranking4.png) no-repeat;
+      background-size: 100% 100%;
+
+      &.Ranking1-item1 {
+        background: url(../asset/ranking1.png) no-repeat;
+        background-size: 100% 100%;
+      }
+
+      &.Ranking1-item2 {
+        background: url(../asset/ranking2.png) no-repeat;
+        background-size: 100% 100%;
+      }
+
+      &.Ranking1-item3 {
+        background: url(../asset/ranking3.png) no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .Ranking1-item__rate--wrapper {
+        flex: 1;
+        background: #6F7171;
+      }
+
+      .Ranking1-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;
+      }
+    }
+
+    &.Ranking1-1 {
+      .AiRanking-item {
+        background: url(../asset/ranking4-dj.png) no-repeat;
+        background-size: 100% 100%;
+
+        &.Ranking1-item1 {
+          background: url(../asset/ranking1-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+
+        &.Ranking1-item2 {
+          background: url(../asset/ranking2-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+
+        &.Ranking1-item3 {
+          background: url(../asset/ranking3-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .Ranking1-item__rate--wrapper {
+          flex: 1;
+          background: #928D7C;
+        }
+
+        .Ranking1-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;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

components/layout/AiRanking/components/Ranking2.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="Ranking2" :class="'Ranking2-' + theme">
+    <div class="Ranking-item" v-for="(item, index) in list" :key="index" :class="'Ranking-item' + (index + 1)">
+      <div class="Ranking-item__top">
+        <div class="left">
+          <i>{{ index + 1 > 9 ? '' : '0' }}{{ index + 1 }}</i>
+          <h2>{{ item.name }}</h2>
+        </div>
+        <span>{{ item.value }}</span>
+      </div>
+      <div class="Ranking-item__rate--wrapper">
+        <div class="Ranking-item__rate" :style="{width: item.rate + '%'}">
+          <div class="bar"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Ranking2',
+
+    props: {
+      data: {
+        type: Array,
+        default: () => []
+      },
+
+      theme: {
+        type: String,
+        default: '0'
+      }
+    },
+
+    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>
+  .Ranking2 {
+    height: 100%;
+    overflow-y: auto;
+
+    .Ranking-item {
+      margin-bottom: 16px;
+
+      .Ranking-item__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 16px;
+
+        .left {
+          display: flex;
+          align-items: center;
+          height: 24px;
+
+          i {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            margin-right: 11px;
+            text-align: center;
+            color: #fff;
+            font-style: normal;
+            font-size: 14px;
+            border: 1px solid #fff;
+          }
+
+          h2 {
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 14px;
+            font-weight: 500;
+          }
+        }
+
+        span {
+          color: #fff;
+          font-weight: 700;
+          font-size: 18px;
+        }
+      }
+
+      .Ranking-item__rate--wrapper {
+        height: 6px;
+        border-radius: 8px;
+        background: rgba(128, 136, 142, 0.4);
+      }
+
+      .Ranking-item__rate {
+        position: relative;
+
+        .bar {
+          position: relative;
+          height: 6px;
+          border-radius: 8px;
+          background: rgb(24, 254, 254);
+          box-shadow: 0 0 4px 0 rgba(24, 254, 254, 0.6);
+        }
+      }
+    }
+
+    &.Ranking2-1 {
+      .Ranking-item {
+        .Ranking-item__rate--wrapper {
+          background: rgba(121, 74, 59, 0.4);
+        }
+
+        .Ranking-item__rate {
+          position: relative;
+
+          .bar {
+            background: rgb(255, 186, 68);
+            box-shadow: 0 0 4px 0 rgba(255, 186, 68, 0.6);
+          }
+        }
+      }
+    }
+  }
+</style>

components/layout/AiRanking/components/Ranking3.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="Ranking3" :class="'Ranking3-' + theme">
+    <div class="Ranking-item" v-for="(item, index) in list" :key="index" :class="'Ranking-item' + (index + 1)">
+      <div class="Ranking-item__top">
+        <div class="left">
+          <i>No.{{ index + 1 > 9 ? '' : '0' }}{{ index + 1 }}</i>
+          <h2>{{ item.name }}</h2>
+        </div>
+        <span>{{ item.value }}</span>
+      </div>
+      <div class="Ranking-item__rate--wrapper">
+        <div class="Ranking-item__rate" :style="{width: item.rate + '%'}">
+          <div class="bar"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Ranking3',
+
+    props: {
+      data: {
+        type: Array,
+        default: () => []
+      },
+
+      theme: {
+        type: String,
+        default: '0'
+      }
+    },
+
+    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>
+  .Ranking3 {
+    height: 100%;
+    overflow-y: auto;
+
+    .Ranking-item {
+      margin-bottom: 16px;
+
+      .Ranking-item__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+
+        .left {
+          display: flex;
+          align-items: center;
+          height: 24px;
+
+          i {
+            width: 40px;
+            height: 24px;
+            line-height: 24px;
+            margin-right: 8px;
+            text-align: center;
+            color: #fff;
+            font-style: normal;
+            font-size: 14px;
+          }
+
+          h2 {
+            color: rgba(255, 255, 255, 1);
+            font-size: 14px;
+            font-weight: 500;
+          }
+        }
+
+        span {
+          color: #fff;
+          font-weight: 500;
+          font-size: 14px;
+        }
+      }
+
+      .Ranking-item__rate--wrapper {
+        height: 10px;
+        background: rgb(26, 26, 26);
+      }
+
+      .Ranking-item__rate {
+        position: relative;
+
+        .bar {
+          position: relative;
+          height: 10px;
+          background: linear-gradient(270deg, rgb(54, 234, 175) 0%, rgb(75, 179, 210) 100%);
+        }
+      }
+    }
+
+    &.Ranking3-1 {
+      .Ranking-item {
+        .Ranking-item__rate--wrapper {
+          background: rgba(255, 217, 112, 0.16);
+        }
+
+        .Ranking-item__rate {
+          position: relative;
+
+          .bar {
+            background: linear-gradient(90deg, rgb(249, 210, 103) 0%, rgb(241, 150, 70) 100%);
+          }
+        }
+      }
+    }
+  }
+</style>

packages/bigscreen/designer/components/Layout.vue

@@ -396,6 +396,7 @@ export default {
       })
     },
     clone(e) {
+      console.log(this.deepClone(e))
       this.componentList.push(this.deepClone(e))
     },
 
@@ -405,31 +406,42 @@ export default {
       }
     },
 
-    deepClone(data, hash = new WeakMap()) {
+    deepClone(obj) {
-      if (typeof data !== 'object' || data === null) {
+      if (obj instanceof Object) {
-        throw new TypeError('传入参数不是对象')
+        let newObj = {}
-      }
+
-      if (hash.has(data)) {
+        if (Array.isArray(obj)) {
-        return hash.get(data)
+          let arr = []
-      }
+          obj.forEach(item => {
-      let newData = {}
+            arr.push(this.deepClone(item))
-      const dataKeys = Object.keys(data)
-      dataKeys.forEach(value => {
-        const currentDataValue = data[value]
-        if (typeof currentDataValue !== "object" || currentDataValue === null) {
-          newData[value] = currentDataValue
-        } else if (Array.isArray(currentDataValue)) {
-          newData[value] = [...currentDataValue]
-        } else if (currentDataValue instanceof Set) {
-          newData[value] = new Set([...currentDataValue])
-        } else if (currentDataValue instanceof Map) {
-          newData[value] = new Map([...currentDataValue])
-        } else {
-          hash.set(data, data)
-          newData[value] = this.deepClone(currentDataValue, hash)
-        }
           })
-      return newData
+          return arr
+        } else if (typeof obj == 'function') {
+          newObj = obj.bind(newObj)
+        } else {
+          for (let key in obj) {
+            let value = obj[key]
+            if (typeof value == 'function') {
+              newObj[key] = value.bind(newObj)
+            } else if (typeof value == 'object') {
+              if (Array.isArray(value)) {
+                newObj[key] = []
+                value.forEach(item => {
+                  newObj[key].push(this.deepClone(item))
+                })
+              } else {
+                newObj[key] = this.deepClone(value)
+              }
+            } else {
+              newObj[key] = value
+            }
+          }
+        }
+
+        return newObj
+      } else {
+        return obj
+      }
     },
 
     onContextmenu(e, index) {

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>
@@ -99,7 +110,7 @@
               <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"></el-input-number>
             </div>
           </div>
-          <div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'" v-for="(item, index) in data" :key="index">
+          <div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'" v-for="(item, index) in config.config" :key="index">
             <label>第{{ index + 1 }}列</label>
             <div class="layout-config__item--right">
               <el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
@@ -108,7 +119,7 @@
                 <el-option label="居右" value="right"></el-option>
               </el-select>
               <el-color-picker v-model="item.color" style="margin: 0 10px;"></el-color-picker>
-              <el-input-number v-model="item.width" :min="1" label="描述文字" controls-position="right"></el-input-number>
+              <el-input-number v-model="item.width" label="描述文字" controls-position="right"></el-input-number>
             </div>
           </div>
         </template>
@@ -202,13 +213,8 @@ export default {
       tableStatus: [
         {label: '是', value: '1'},
         {label: '否', value: '0'}
-      ],
+      ]
-      data: []
     }
-  },
-
-  created() {
-    this.data = this.config[this.config.dataType]
   }
 }
 </script>

packages/bigscreen/designer/config.js

@@ -505,7 +505,23 @@ const components = [
             isShowIndex: '1',
             sourceDataId: '',
             api: '',
-            config: [],
+            config: [
+              {
+                width: '',
+                color: '',
+                align: ''
+              },
+              {
+                width: '',
+                color: '',
+                align: ''
+              },
+              {
+                width: '',
+                color: '',
+                align: ''
+              }
+            ],
             apiData: [],
             dataType: 'staticData',
             dynamicData: [],
@@ -527,6 +543,7 @@ const components = [
             dataX: '',
             dataY: [],
             rowNum: 7,
+            subType: 'Ranking1',
             stripe: '1',
             isShowIndex: '1',
             sourceDataId: '',

packages/wxwork/AppResidentGroupManage/components/List.vue

@@ -143,15 +143,13 @@
         // {slot: 'avatar'},
         {slot: 'userinfo'},
         {prop: 'ownerName', label: '群主', align: 'center'},
+        {prop: 'departmentName', label: '部门', align: 'center'},
+        {prop: 'areaName', label: '地区', align: 'center'},
         {slot: 'tags'},
-          {
+        {prop: 'personCount', label: '群人数', align: 'center'},
-            prop: 'personCount', label: '群人数', align: 'center'
-          },
         {prop: 'increase', label: '当日入群人数', align: 'center'},
         {prop: 'decrease', label: '当日退群人数', align: 'center'},
-          {
+        {prop: 'createTime', label: '创建时间', align: 'left'},
-            prop: 'createTime', label: '创建时间', align: 'left'
-          },
         {slot: 'options', label: '操作', align: 'center'}],
       tableData: [],
       subTags: [],
@@ -173,8 +171,7 @@
 
   methods: {
     getWxUserList() {
-        this.instance.post(`/app/wxcp/wxuser/listByDepartId`, {
+      this.instance.post(`/app/wxcp/wxuser/listByDepartId`, {}).then(res => {
-        }).then(res => {
         if (res.code == 0) {
           this.userList = res.data.map(item => {
             item.dictName = item.name