Merge branch 'xym' into dev

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"
+      >
+        <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>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => [
+        {
+          star: 5,
+          count: 5,
+          unit: "个",
+        },
+        {
+          star: 4,
+          count: 4,
+          unit: "个",
+        },
+        {
+          star: 3,
+          count: 3,
+          unit: "个",
+        },
+        {
+          star: 2,
+          count: 10002,
+          unit: "个",
+        },
+        {
+          star: 1,
+          count: 1,
+          unit: "个",
+        },
+      ],
+    },
+    total: {
+      type: Number,
+      default: () => 10015,
+    },
+  },
+  methods: {
+    getPercent(value) {
+      return Math.min((value / this.total) * 100, 100);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.star_list {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.item_list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-right: 10px;
+  margin-bottom: 12px;
+}
+.item-rate {
+  flex-shrink: 0;
+  display: inline-flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+  align-items: center;
+  margin-right: 10px;
+}
+.item-progress {
+  flex-grow: 1;
+  max-width: 200px;
+  margin-right: 10px;
+}
+.item-text {
+  flex-shrink: 0;
+  width: 60px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #242c43;
+  text-align: right;
+}
+</style>
+
+<style>
+.item-rate .el-rate {
+  height: 14px;
+}
+.item-rate .el-rate__icon {
+  font-size: 14px;
+  margin-right: 0;
+}
+.item-progress .el-progress-bar__outer {
+  background: #e2e3ed;
+}
+</style>

src/components/e-charts/toplist.vue

+<template>
+  <div class="top_list">
+    <ul>
+      <li class="item_list" v-for="(option, index) in options" :key="index">
+        <div class="item_index">
+          <span v-text="'TOP' + (index + 1)"></span>
+        </div>
+        <div class="item_logo">
+          <el-avatar shape="square" :size="28" fit="cover" :src="option.logo" />
+        </div>
+        <div class="item_detail">
+          <p class="item_info">
+            <span class="text_clip">
+              {{ option.name }}
+              <i class="el-icon-arrow-right"></i>
+            </span>
+            <span v-text="option.value + (option.unit || '次')"></span>
+          </p>
+          <el-progress
+            class="item_progress"
+            :percentage="getPercent(option.value)"
+            :show-text="false"
+            color="#e56600"
+          ></el-progress>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => [
+        {
+          name: "报警服务",
+          value: 2031,
+          logo:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          unit: "次",
+        },
+        {
+          name: "数据服务",
+          value: 2201,
+          logo:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          unit: "次",
+        },
+        {
+          name: "消息队列服务",
+          value: 1901,
+          logo:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          unit: "次",
+        },
+        {
+          name: "档案中心服务",
+          value: 1400,
+          logo:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          unit: "次",
+        },
+        {
+          name: "哈哈服务",
+          value: 1280,
+          logo:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          unit: "次",
+        },
+      ],
+    },
+    targetValue: {
+      type: Number,
+      default: () => 2400,
+    },
+  },
+  methods: {
+    getPercent(value) {
+      return Math.min((value / this.targetValue) * 100, 100);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.top_list {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.item_list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-right: 10px;
+  margin-bottom: 18px;
+}
+.item_index {
+  width: 35px;
+  flex-shrink: 0;
+  margin-right: 10px;
+  font-size: 12px;
+  color: #58617a;
+}
+.item_logo {
+  margin-right: 10px;
+  flex-shrink: 0;
+  font-size: 0;
+  border: 2px solid #e3e5ef;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.item_info {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  line-height: 20px;
+  color: #58617a;
+}
+.item_detail {
+  flex-grow: 1;
+}
+.item_info > span:first-child {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+.item_info > span:first-child > i {
+  font-weight: bold;
+  font-size: 12px;
+  color: #8e96ab;
+}
+.item_info > span:nth-child(2) {
+  color: #0d1847;
+}
+.item_progress {
+  margin-top: 6px;
+}
+</style>

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

@@ -38,13 +38,17 @@
       <el-col :span="6" class="in_right">
         <el-row>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius class="block">
+              <toplist></toplist>
+            </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius class="block">
+              <starlist></starlist>
+            </block-radius>
           </el-col>
         </el-row>
       </el-col>
@@ -64,10 +68,14 @@
 <script>
 import BlockRadius from "@/components/general/block-radius";
 import Dashboard from "@/components/e-charts/dashboard";
+import Toplist from "@/components/e-charts/toplist";
+import Starlist from "@/components/e-charts/starlist";
 export default {
   components: {
     BlockRadius,
-    Dashboard
+    Dashboard,
+    Toplist,
+    Starlist
   },
   data: () => ({
     navList: []
@@ -80,7 +88,7 @@ export default {
 .in_analysis {
   padding: 0 10px 10px;
   height: 100%;
-  min-width: 1700px;
+  /* min-width: 1700px; */
 }
 .in_l {
 }