CN-240 feat: 实体列表下拉详情（部分）

src/components/entities/EntityTop.vue

@@ -1,37 +1,44 @@
 <template >
-    <div class="entity-pop-custom" v-ele-click-outside="esc"  v-bind:style="entityTopStyle">
-        <div class="pop-title" >
-            <div>
-                <i :class="item.icon"></i>
-                <span>{{item.label}}</span>
-            </div>
-            <button @click="esc" class="el-dialog__headerbtn" type="button"><i class="el-dialog__close el-icon el-icon-close"></i></button>
-        </div>
-        <div class="filter-top-box" >
-            <div class="filter-top-body">
-                <div class="filter-top-type">{{item.value}}{{$t('overall.operator')}}{{item.label}}</div>
-                <el-table :data="entityTopTenData" style="width: 100%"
-                          :header-cell-style="tableHeaderCellStyle"
-                          :header-row-style="tableHeaderRowStyle"
-                          :row-style="rowStyle"
-                          class="customer-no-border-table"
-                          :cell-style="{'text-align':'left','padding': '1px 0','border':'0px'}">
-                    <el-table-column label="Top10" type="index" :index="indexMethod" width="81"/>
-                    <el-table-column prop="name" :label="item.label" width="100" />
-                    <el-table-column prop="value" :label="$t('overall.number')" width="79" />
-                    <el-table-column prop="rate" :label="$t('overall.percent')" >
-                        <template #default="scope">
-                            <div class="top-table-percent" >
-                                <div >{{ scope.row.percent }}%</div>
-                                <div class="top-table-progress" ><el-progress :percentage="scope.row.percent" :show-text="false" color="#23BF9A" ></el-progress></div>
-                            </div>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-        </div>
-
+  <div class="entity-pop-custom" v-ele-click-outside="esc"  v-bind:style="entityTopStyle">
+    <div class="pop-title" >
+      <div>
+        <i :class="item.icon"></i>
+        <span>{{item.label}}</span>
+      </div>
+      <button @click="esc" class="el-dialog__headerbtn" type="button"><i class="el-dialog__close el-icon el-icon-close"></i></button>
     </div>
+    <div class="filter-top-box" >
+      <div class="filter-top-body">
+        <div class="filter-top-type">{{item.value}}{{$t('overall.operator')}}{{item.label}}</div>
+        <el-table
+            :data="entityTopTenData"
+            :header-cell-style="tableHeaderCellStyle"
+            :header-row-style="tableHeaderRowStyle"
+            :row-style="rowStyle"
+            :cell-style="{'text-align':'left','padding': '1px 0','border':'0px'}"
+            class="customer-no-border-table"
+            style="width: 100%"
+            @row-click="filter"
+        >
+          <el-table-column label="Top10" type="index" :index="indexMethod" width="81"/>
+          <el-table-column prop="name" :label="item.label" width="120">
+            <template #default="scope">
+              <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" :title="scope.row.name">{{scope.row.name}}</div>
+            </template>
+          </el-table-column>
+            <el-table-column prop="count" :label="$t('overall.number')" width="79" />
+            <el-table-column prop="percent" :label="$t('overall.percent')" >
+              <template #default="scope">
+                <div class="top-table-percent" >
+                  <div >{{ scope.row.percent }}%</div>
+                  <div class="top-table-progress"><el-progress :percentage="scope.row.percent" :show-text="false" color="#23BF9A"></el-progress></div>
+                </div>
+              </template>
+            </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -46,55 +53,7 @@ export default {
       },
       custom: [],
       item: {},
-      entityTopTenData: [
-        {
-          name: '中国',
-          value: '376',
-          percent: 20
-        },
-        {
-          name: '美国',
-          value: '298',
-          percent: 18
-        },
-        {
-          name: '英国',
-          value: '268',
-          percent: 16
-        }, {
-          name: '意大利',
-          value: '230',
-          percent: 15
-        },
-        {
-          name: '泰国',
-          value: '210',
-          percent: 13
-        },
-        {
-          name: '越南',
-          value: '190',
-          percent: 10
-        }, {
-          name: '马尔代夫',
-          value: '172',
-          percent: 9
-        }, {
-          name: '马来西亚',
-          value: '156',
-          percent: 6
-        },
-        {
-          name: '新加坡',
-          value: '140',
-          percent: 5
-        },
-        {
-          name: '缅甸',
-          value: '120',
-          percent: 4
-        }
-      ]
+      entityTopTenData: []
     }
   },
   created () {
@@ -107,12 +66,20 @@ export default {
     esc () {
       this.$emit('close')
     },
-    initEntityTop (leftVal, itemVal, data) {
+    filter (row) {
+      this.$emit('filter', row.name, this.item)
+    },
+    initEntityTop (leftVal, itemVal, data, totalCount) {
       // this.entityTopStyle.top = topVal+'px'
       this.entityTopStyle.left = leftVal + 'px'
       this.item = itemVal
       if (data.length > 0) {
-        this.entityTopTenData = data
+        this.entityTopTenData = data.map(d => {
+          return {
+            ...d,
+            percent: (parseFloat(d.count / totalCount) * 100).toFixed(2)
+          }
+        })
       }
     },
     indexMethod (index) {