Merge branch 'dev' of https://cloud.wodcloud.com/git/apaas/apaas-v3-ui into dev

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/bar-chart.vue

@@ -12,7 +12,6 @@ export default {
         return {
           xaxis: [],
           data: []
-          
         };
       }
     },
@@ -37,14 +36,19 @@ export default {
       default: false
     }
   },
-  data: () => ({
-    navList: []
-  }),
+  data: () => ({}),
   mounted() {},
   methods: {
     bar() {
       let self = this;
       return {
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 25,
+          top: 25,
+          containLabel: true
+        },
         xAxis: [
           {
             type: "category",
@@ -57,7 +61,7 @@ export default {
               },
               interval: 0,
               rotate: 30,
-              formatter:  function(value) {
+              formatter: function(value) {
                 let valueTxt = "";
                 if (value.length > 6) {
                   valueTxt = value.substring(0, 5) + "...";

src/components/e-charts/dashboard.vue

@@ -24,9 +24,7 @@ export default {
       default: false
     }
   },
-  data: () => ({
-    navList: []
-  }),
+  data: () => ({}),
   mounted() {},
   methods: {
     dashboard() {

src/components/e-charts/graph.vue

+<template>
+  <chart :options="graph()" class="graph" />
+</template>
+
+<script>
+import { graphic } from "echarts/lib/export";
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          xaxis: [],
+          data: [],
+          legend: []
+        };
+      }
+    }
+  },
+  data: () => ({
+    navList: []
+  }),
+  mounted() {},
+  methods: {
+    graph() {
+      let self = this;
+      return {
+        color: ["#274fee", "#ef9433"],
+        legend: {
+          bottom: 0,
+          left: "center",
+          icon: "roundRect",
+          itemWidth: 10,
+          itemHeight: 10,
+          data: self.data.legend,
+          orient: "horizontal",
+          backgroundColor: "#f4f7fc"
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 25,
+          top: 25,
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: self.data.xaxis,
+            axisLine: {
+              lineStyle: {
+                color: "#f2f2f2"
+              }
+            },
+            axisLabel: {
+              margin: 20,
+              color: "#0d1847",
+              textStyle: {
+                fontSize: 12
+              },
+              interval: 0
+            },
+            boundaryGap: false
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(0, 0, 0, 0)"
+              }
+            },
+            axisLabel: {
+              color: "#a9aec0",
+              textStyle: {
+                fontSize: 12
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: self.data.legend[0],
+            type: "line",
+            data: self.data.data[0],
+            symbolSize: 1,
+            symbol: "circle",
+            smooth: true,
+            yAxisIndex: 0,
+            showSymbol: false,
+            lineStyle: {
+              width: 2,
+              color: "#274fee",
+              shadowColor: "rgb(39, 79, 238, 0.3)",
+              shadowBlur: 5,
+              shadowOffsetY: 8
+            }
+          },
+          {
+            name: self.data.legend[1],
+            type: "line",
+            data: self.data.data[1],
+            symbolSize: 1,
+            symbol: "circle",
+            smooth: true,
+            yAxisIndex: 0,
+            showSymbol: false,
+            lineStyle: {
+              width: 2,
+              color: "#ef9433",
+              shadowColor: "rgb(239, 148, 51, 0.3)",
+              shadowBlur: 5,
+              shadowOffsetY: 8
+            }
+          }
+        ]
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.graph {
+  width: 100%;
+  height: calc(100% - 20px);
+}
+</style>
\ No newline at end of file

src/components/e-charts/starlist.vue

 <template>
-  <div>
-    <ul class="star_list">
-      <li
-        class="item_list"
-        v-for="(option, index) in options"
-        :key="'star_info_' + index"
+  <ul class="star_list">
+    <li
+      class="item_list"
+      v-for="(option, index) in options"
+      :key="'star_info_' + index"
+    >
+      <el-rate
+        class="item-rate"
+        :colors="['#8890a7', '#8890a7', '#8890a7']"
+        :value="option.star"
+        disabled
+        disabled-void-color="transparent"
       >
-        <el-rate
-          class="item-rate"
-          :colors="['#8890a7', '#8890a7', '#8890a7']"
-          :value="option.star"
-          disabled
-          disabled-void-color="transparent"
-        >
-        </el-rate>
-        <el-progress
-          class="item-progress"
-          :percentage="getPercent(option.count)"
-          :show-text="false"
-          color="#e56600"
-        ></el-progress>
-        <span class="item-text" v-text="option.count + '个'"></span>
-      </li>
-    </ul>
-  </div>
+      </el-rate>
+      <el-progress
+        class="item-progress"
+        :percentage="getPercent(option.count)"
+        :show-text="false"
+        color="#e56600"
+      ></el-progress>
+      <span class="item-text" v-text="option.count + '个'"></span>
+    </li>
+  </ul>
 </template>
 
 <script>

src/components/e-charts/toplist.vue

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