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

src/components/advancedSearch/AdvancedSearch.vue

@@ -2,7 +2,8 @@
   <el-input
       class="advanced-search"
       :class="{'advanced-search--show-list': showList}"
-      v-model="searchContent"
+      v-model="searchContentTemp"
+      @keyup.enter="enter"
   >
     <template #suffix>
       <div class="search__suffixes" v-if="!showList">
@@ -37,12 +38,72 @@ export default {
   },
   data () {
     return {
-      searchContent: ''
+      searchContentTemp: '', // 搜索框内的文本内容，按回车键后为searchContent赋值
+      searchContent: '', // 查询语句
+      searchParams: null // 搜索参数，格式为[{ name: xxx, value: xxx }, ...]
     }
   },
   methods: {
     search () {
-      this.$emit('search', this.searchContent)
+      this.$emit('search', this.searchParams)
+    },
+    reset () {
+      this.searchParams = null
+      this.searchParams = []
+    },
+    addParams (params) {
+      if (params) {
+        const newParams = { ...this.searchParams, ...params }
+        this.searchContentTemp = this.objToStr(newParams)
+        this.enter()
+      }
+    },
+    strToObj (n) {
+      const paramsArr = n.split(/\s[aA][nN][dD]\s/)
+      const paramsObj = {}
+      paramsArr.forEach(string => {
+        const param = string.split('=')
+        if (param.length > 1) {
+          let value = param[1].trim()
+          const valueArr = value.split('"')
+          if (valueArr.length > 2) {
+            value = valueArr[1].trim()
+          }
+          paramsObj[param[0].trim()] = value
+        }
+      })
+      return paramsObj
+    },
+    objToStr (obj) {
+      return Object.keys(obj).map(k => {
+        return `${k}="${obj[k]}"`
+      }).join(' AND ')
+    },
+    enter () {
+      if (!this.searchContentTemp) {
+        this.reset()
+      } else {
+        this.searchContent = this.searchContentTemp
+      }
+    }
+  },
+  watch: {
+    searchContent (n) {
+      if (n) {
+        this.searchParams = this.strToObj(n)
+      } else {
+        this.reset()
+      }
+      this.searchContentTemp !== n && (this.searchContentTemp = n)
+    },
+    searchParams: {
+      deep: true,
+      handler (n) {
+        if (n) {
+          // 请求接口，获取左侧过滤条件和右侧entity列表
+          this.search()
+        }
+      }
     }
   }
 }

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) {