数据分析组件

src/components/apass-table.vue

 <template>
   <div class="apass_table">
-    <el-table :data="data">
-      <el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column>
+    <el-table :data="data" @sort-change="sortChange">
+      <el-table-column
+        v-if="paddingLeft > 10"
+        :width="paddingLeft - 10"
+      ></el-table-column>
       <el-table-column
         v-for="(item, index) in header"
         :label="item.label"
         :align="item.align || 'left'"
         :width="item.width"
         :key="'head_' + index"
+        :prop="item.prop"
+        :sortable="item.sortable ? 'custom' : false"
       >
         <template slot-scope="scope">
           <div v-if="item.type === 'buttons'" class="row_action">
@@ -44,27 +49,73 @@
             ></a>
           </div>
           <div v-else-if="item.type === 'icon'">
-            <img src="../assets/imgs/ic_true.png" alt="" v-if="scope.row[item.prop]==1" style="width:100%;height:100%;">
-            <img src="../assets/imgs/ic_yiwancheng.png" alt="" v-if="scope.row[item.prop]==2" style="width:100%;height:100%;">
-            <img src="../assets/imgs/ic_restart.png" alt="" v-if="scope.row[item.prop]==3" style="width:100%;height:100%;">
-            <img src="../assets/imgs/ic_failed.png" alt="" v-if="scope.row[item.prop]==4" style="width:100%;height:100%;">
+            <img
+              src="../assets/imgs/ic_true.png"
+              alt=""
+              v-if="scope.row[item.prop] == 1"
+              style="width:100%;height:100%;"
+            />
+            <img
+              src="../assets/imgs/ic_yiwancheng.png"
+              alt=""
+              v-if="scope.row[item.prop] == 2"
+              style="width:100%;height:100%;"
+            />
+            <img
+              src="../assets/imgs/ic_restart.png"
+              alt=""
+              v-if="scope.row[item.prop] == 3"
+              style="width:100%;height:100%;"
+            />
+            <img
+              src="../assets/imgs/ic_failed.png"
+              alt=""
+              v-if="scope.row[item.prop] == 4"
+              style="width:100%;height:100%;"
+            />
           </div>
           <div v-else-if="item.type === 'tag'" class="table_tag">
             <el-tag
-              v-for="(item,index) in scope.row[item.prop]" v-if="index<=1||tag_flag_arr[scope.$index]==1"
-              :key="index+5515">
+              v-for="(item, index) in scope.row[item.prop]"
+              v-if="index <= 1 || tag_flag_arr[scope.$index] == 1"
+              :key="index + 5515"
+            >
               {{ item }}
             </el-tag>
-            <div class="tagclo btn_down" v-if="tag_flag_arr[scope.$index]==0&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,1)"></div>
-            <div class="tagclo btn_up" v-if="tag_flag_arr[scope.$index]==1&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,0)"></div>
+            <div
+              class="tagclo btn_down"
+              v-if="
+                tag_flag_arr[scope.$index] == 0 &&
+                  scope.row[item.prop].length > 2
+              "
+              @click="change_tag(scope.$index, 1)"
+            ></div>
+            <div
+              class="tagclo btn_up"
+              v-if="
+                tag_flag_arr[scope.$index] == 1 &&
+                  scope.row[item.prop].length > 2
+              "
+              @click="change_tag(scope.$index, 0)"
+            ></div>
           </div>
           <div v-else-if="item.type === 'chart'" class="charts">
             <sparkline :indicatorStyles="spIndicatorStyles1">
-              <sparklineCurve :refLineStyles="spRefLineStyles3" :refLineType="false" :data="scope.row[item.prop]" :limit="scope.row[item.prop].length" :styles="item.prop=='cpu'?spCurveStyles2:spCurveStyles3" />
+              <sparklineCurve
+                :refLineStyles="spRefLineStyles3"
+                :refLineType="false"
+                :data="scope.row[item.prop]"
+                :limit="scope.row[item.prop].length"
+                :styles="item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3"
+              />
             </sparkline>
-            <span class="use" v-if="item.prop=='cpu'">{{scope.row['cpu_use']}}.00mm</span>
-            <span class="use" v-if="item.prop=='mermoy'">{{scope.row['memory_use']}}Mi</span>
-          </div>  
+            <span class="use" v-if="item.prop == 'cpu'"
+              >{{ scope.row["cpu_use"] }}.00mm</span
+            >
+            <span class="use" v-if="item.prop == 'mermoy'"
+              >{{ scope.row["memory_use"] }}Mi</span
+            >
+          </div>
           <div v-else-if="item.type === 'image'" class="img_content">
             <img
               :src="item.getImage && item.getImage(scope.row)"
@@ -92,6 +143,22 @@
               ></span>
             </el-tooltip>
           </div>
+          <span
+            v-else-if="item.type === 'hot-index'"
+            class="hot_index"
+            :class="'index_' + scope.row.hotIndex"
+            v-text="'TOP' + scope.row.hotIndex"
+          ></span>
+          <span class="sort_table" v-else-if="item.sortable">
+            <span>{{ getPercent(scope.row[item.prop]) }}</span>
+            <span>
+              <img
+                v-if="scope.row[item.prop] >= 0"
+                :src="require('../assets/imgs/icon_up.png')"
+              />
+              <img v-else :src="require('../assets/imgs/icon_down.png')" />
+            </span>
+          </span>
           <span
             v-else
             v-text="
@@ -119,47 +186,55 @@ export default {
       type: [Number, String],
       default: () => 50,
     },
-    height:{
+    height: {
       type: Number,
       default: null,
     },
   },
-  data(){
-    return{
-      tag_flag_arr:[],
+  data() {
+    return {
+      tag_flag_arr: [],
       spCurveStyles2: {
-        stroke: '#515fe7',
-        fill: '#515fe7'
+        stroke: "#515fe7",
+        fill: "#515fe7",
         // fill: '#d2d6f8'
       },
       spCurveStyles3: {
-        stroke: '#37c299',
-        fill: '#37c299'
+        stroke: "#37c299",
+        fill: "#37c299",
         // fill: '#c8ebe4'
       },
       // 指示器样式
       spIndicatorStyles1: false,
-      spRefLineStyles3:{
-        stroke: '#d14',
+      spRefLineStyles3: {
+        stroke: "#d14",
         strokeOpacity: 0,
-        strokeDasharray: '2, 2'
+        strokeDasharray: "2, 2",
       },
-    }
+    };
   },
-  mounted(){
-    this.tag_flag_arr = Array.from({length: this.data.length},(item,index)=>item = 0)
-    
+  mounted() {
+    this.tag_flag_arr = Array.from(
+      { length: this.data.length },
+      (item, index) => (item = 0)
+    );
+  },
+  methods: {
+    change_tag(index, val) {
+      this.$set(this.tag_flag_arr, index, val);
+    },
+    sortChange(value) {
+      this.$emit("sort-change", value);
+    },
+    getPercent(num) {
+      return Math.round(num * 100) + "%";
+    },
   },
-  methods:{
-    change_tag(index,val){
-      this.$set(this.tag_flag_arr,index,val)
-    }
-  }
 };
 </script>
 
 <style>
-.table_tag .el-tag{
+.table_tag .el-tag {
   background-color: #58617a;
   color: #fff;
   display: inline-block;
@@ -171,7 +246,7 @@ export default {
   margin-right: 3px;
   margin-bottom: 3px;
 }
-.tagclo{
+.tagclo {
   display: inline-block;
   width: 22px;
   height: 22px;
@@ -182,18 +257,18 @@ export default {
   background-size: contain;
   margin-top: -3px;
 }
-.btn_down{
-  background-image: url('../assets/imgs/btn_expand.png');
+.btn_down {
+  background-image: url("../assets/imgs/btn_expand.png");
 }
-.btn_up{
-  background-image: url('../assets/imgs/btn_fold.png');
+.btn_up {
+  background-image: url("../assets/imgs/btn_fold.png");
 }
-.charts{
+.charts {
   position: relative;
 }
-.charts .use{
+.charts .use {
   position: absolute;
-  bottom:0;
+  bottom: 0;
   right: -10px;
   font-size: 12px;
   color: rgba(26, 34, 54, 1);
@@ -202,6 +277,39 @@ export default {
   font-size: 12px;
   line-height: 20px;
 }
+.hot_index {
+  font-family: "Arial";
+  font-style: italic;
+  font-weight: 800;
+  font-size: 16px;
+  color: #b9bab5;
+}
+.hot_index.index_1 {
+  color: #d9ac64;
+}
+.hot_index.index_2 {
+  color: #c3c4c0;
+}
+.hot_index.index_3 {
+  color: #ba6e40;
+}
+.sort_table {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.sort_table > span {
+  flex-shrink: 0;
+}
+.sort_table > span:nth-child(1) {
+  flex-grow: 1;
+  text-align: right;
+}
+.sort_table > span:nth-child(2) {
+  width: 30%;
+  margin-left: 5px;
+  text-align: left;
+}
 </style>
 
 <style scoped>

src/components/e-charts/toplist.vue

@@ -37,7 +37,7 @@ export default {
     },
     targetValue: {
       type: Number,
-      default: () => 2400,
+      default: () => 1000,
     },
   },
   methods: {

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

@@ -61,7 +61,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 class="block">
@@ -83,6 +113,7 @@
               <toplist
                 class="block-radius-content"
                 :options="toplistData"
+                :target-value="toplistTargetValue"
               ></toplist>
             </block-radius>
           </el-col>
@@ -144,6 +175,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";
 export default {
   components: {
     BlockRadius,
@@ -155,6 +187,7 @@ export default {
     Starlist,
     lineChart,
     BarChart,
+    ApassTable,
   },
   data: () => ({
     navList: [],
@@ -197,7 +230,7 @@ export default {
     },
     das_data: {
       data: 40,
-      text: "健康占比"
+      text: "健康占比",
     },
     bar_data: {
       xaxis: [
@@ -210,7 +243,7 @@ export default {
         "01-07",
         "01-08",
       ],
-      data: [100, 120, 130, 150, 160, 120, 110, 100]
+      data: [100, 120, 130, 150, 160, 120, 110, 100],
     },
     bar_data_org: {
       xaxis: [
@@ -221,9 +254,9 @@ export default {
         "01-05",
         "01-06",
         "01-07",
-        "01-08"
+        "01-08",
       ],
-      data: [100, 120, 130, 150, 160, 120, 110, 100]
+      data: [100, 120, 130, 150, 160, 120, 110, 100],
     },
     toplistData: [
       {
@@ -262,6 +295,7 @@ export default {
         unit: "次",
       },
     ], // 服务调用排名分析
+    toplistTargetValue: 2400, // 服务调用排名分析 目标值
     serveiceInfoBtnIndex: 0,
     commentlistData: [
       {
@@ -332,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);
     },
@@ -418,4 +520,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