应用数据分析组件

src/pages/data-analysis/my-application.vue

@@ -50,7 +50,37 @@
             <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius
+              :show_header="true"
+              title="服务热门搜索"
+              class="block"
+            >
+              <div class="block-radius-content service-hot-search">
+                <div class="left-content">
+                  <div class="hot-line">
+                    <p class="hot-line-title">搜索用户数</p>
+                    <div class="hot-line-chart">
+                      <!-- 折线图 -->
+                    </div>
+                  </div>
+                  <div class="hot-line">
+                    <p class="hot-line-title">搜索用户数</p>
+                    <div class="hot-line-chart">
+                      <!-- 折线图 -->
+                    </div>
+                  </div>
+                </div>
+                <div class="right-content">
+                  <apass-table 
+                    class="hot-search-table" 
+                    :header="hotSearchHeader"
+                    :data="hotSearchData" 
+                    :padding-left="0" 
+                    @sort-change="hotSearchSortChange"
+                  ></apass-table>
+                </div>
+              </div>
+            </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius 
@@ -139,6 +169,7 @@ import Toplist from "@/components/e-charts/toplist";
 import Starlist from "@/components/e-charts/starlist";
 import Commentlist from "@/components/e-charts/commentlist";
 import BarChart from "@/components/e-charts/bar-chart";
+import ApassTable from "@/components/apass-table";
 import Graph from "@/components/e-charts/graph";
 export default {
   components: {
@@ -151,6 +182,7 @@ export default {
     Commentlist,
     lineChart,
     BarChart,
+    ApassTable,
     Graph
   },
   data: () => ({
@@ -334,9 +366,77 @@ export default {
         unit: "个"
       }
     ], // 应用评分
+    hotSearchHeader: [], // 热门搜索 表头
+    hotSearchData: [
+      {
+        hotIndex: 1,
+        name: "地图视频融合服务1",
+        count: 666,
+        increases: 1.28,
+      },
+      {
+        hotIndex: 2,
+        name: "地图视频融合服务2",
+        count: 666,
+        increases: 0.03,
+      },
+      {
+        hotIndex: 3,
+        name: "地图视频融合服务3",
+        count: 666,
+        increases: 0.58,
+      },
+      {
+        hotIndex: 4,
+        name: "地图视频融合服务4",
+        count: 666,
+        increases: -0.28,
+      },
+      {
+        hotIndex: 5,
+        name: "地图视频融合服务5",
+        count: 666,
+        increases: -0.58,
+      },
+    ], // 热门搜索 数据
   }),
-  mounted() {},
+  mounted() {
+    this.hotSearchHeader = [
+      {
+        label: "排名",
+        type: "hot-index",
+        width: 100,
+        align: "center",
+      },
+      {
+        label: "应用名称",
+        prop: "name",
+        type: "button",
+        callback: this.detailHotSearch,
+      },
+      {
+        label: "搜索次数",
+        prop: "count",
+        width: 100,
+        align: "center",
+      },
+      {
+        label: "日涨幅",
+        prop: "increases",
+        width: 100,
+        sortType: "0", // 0：升序 1：降序
+        sortable: true,
+        align: "center",
+      },
+    ]
+  },
   methods: {
+    detailHotSearch(item) {
+      console.log("查看热搜详情");
+    },
+    hotSearchSortChange(sortInfo) {
+      console.log("应用热门搜索: " + sortInfo);
+    },
     changeServiceTypeBtn(index) {
       console.log("应用类型分析: " + index);
     },
@@ -426,4 +526,48 @@ export default {
   height: calc(100% - 36px);
   margin-top: 15px;
 }
+.service-hot-search {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  height: calc(100% - 21px);
+  margin-top: 0;
+}
+.service-hot-search > .left-content {
+  width: 260px;
+  flex-shrink: 0;
+  padding: 0 20px;
+  box-sizing: border-box;
+  margin-right: 10px;
+}
+.service-hot-search > .right-content {
+  flex-grow: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.hot-line {
+  height: 50%;
+}
+.hot-line-title {
+  font-size: 14px;
+  line-height: 36px;
+  color: #8890a7;
+}
+.hot-line-chart {
+  height: calc(100% - 36px);
+  background-color: pink;
+}
+</style>
+
+<style>
+.hot-search-table .el-table td, 
+.hot-search-table .el-table th {
+  padding: 6px 0;
+}
+.hot-search-table .el-table div.row_action {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
 </style>
\ No newline at end of file