数据分析组件

src/components/comments-list.vue

@@ -20,13 +20,15 @@
           </el-rate>
         </div>
         <p class="comment-description" v-text="item.content"></p>
-        <p class="comment-time" v-text="item.add_time"></p>
+        <p class="comment-time" v-text="getTimeText(item.add_time || '')"></p>
       </div>
     </li>
   </ul>
 </template>
 
 <script>
+import helper from "@/services/helper.js";
+
 export default {
   props: {
     data: {
@@ -34,9 +36,11 @@ export default {
       required: true,
     },
   },
-  data: () => ({}),
-  methods: {},
-  created() {},
+  methods: {
+    getTimeText(time) {
+      return helper.dateStringTransform(time);
+    },
+  },
 };
 </script>
 

src/components/e-charts/commentlist.vue

+<template>
+  <ul class="comments_list">
+    <li
+      class="comment_card"
+      v-for="(item, index) in data"
+      :key="'comment_' + index"
+    >
+      <div class="comment-left">
+        <el-avatar :size="45" fit="cover" :src="item.picture_path" />
+      </div>
+      <div class="comment-right">
+        <p class="comment-base">
+          <span
+            class="comment-user_name text_clip"
+            v-text="item.user_name"
+          ></span>
+          <span
+            class="comment-time text_clip"
+            v-text="getTimeText(item.add_time || '')"
+          ></span>
+        </p>
+        <div class="commnet-rate">
+          <el-rate
+            :colors="['#e69232', '#e69232', '#e69232']"
+            :value="item.score"
+            disabled
+            score-template="{value}"
+          >
+          </el-rate>
+        </div>
+        <p class="comment-description" v-text="item.content"></p>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import helper from "@/services/helper.js";
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    getTimeText(time) {
+      return helper.dateStringTransform(time);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.comments_list {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.comment_card {
+  margin-right: 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 10px 0;
+  border-top: 2px solid #f4f7fc;
+}
+.comment_card:nth-child(1) {
+  border-top: none;
+}
+.comment_card:last-child {
+  border-bottom: 2px solid #f4f7fc;
+}
+.comment-left {
+  flex-shrink: 0;
+  padding-top: 8px;
+  margin-right: 20px;
+}
+.comment-right {
+  flex-grow: 1;
+  line-height: 20px;
+}
+.comment-base {
+  padding-left: 3px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: #58617a;
+}
+.comment-user_name {
+  flex-grow: 1;
+  color: #58617a;
+  margin-right: 10px;
+}
+.comment-time {
+  flex-shrink: 0;
+  color: #8890a7;
+}
+.comment-description {
+  padding-left: 3px;
+  color: #242c43;
+}
+</style>
+
+<style>
+.comment-right > .commnet-rate .el-rate {
+  height: 20px;
+}
+.comment-right > .commnet-rate .el-rate__icon {
+  font-size: 20px;
+  margin-right: 0;
+}
+</style>

src/components/e-charts/starlist.vue

@@ -31,33 +31,7 @@ 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: "个",
-        },
-      ],
+      default: () => [],
     },
     total: {
       type: Number,
@@ -74,7 +48,6 @@ export default {
 
 <style scoped>
 .star_list {
-  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 }

src/components/e-charts/toplist.vue

@@ -33,43 +33,7 @@ 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: "次",
-        },
-      ],
+      default: () => [],
     },
     targetValue: {
       type: Number,
@@ -86,7 +50,6 @@ export default {
 
 <style scoped>
 .top_list {
-  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 }

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

 <template>
   <div>
     <el-breadcrumb separator="/" class="bread_crumb1">
-      <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
-      <el-breadcrumb-item>{{ $t("lang.myServiceDataAnalysis") }}</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{
+        $t("lang.dataAnalysis")
+      }}</el-breadcrumb-item>
+      <el-breadcrumb-item>{{
+        $t("lang.myServiceDataAnalysis")
+      }}</el-breadcrumb-item>
     </el-breadcrumb>
     <el-row class="in_analysis">
       <!-- 可横向铺满 -->
       <el-col :span="6" class="in_left">
         <el-row>
           <el-col :span="24" class="in_block">
-            <block-radius :show_header="true" title="服务总体概况" class="block">
+            <block-radius
+              :show_header="true"
+              title="服务总体概况"
+              class="block"
+            >
               <div class="left_1">
                 <div ref="left_1_l" class="left_1_l">
                   <img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
@@ -65,8 +73,17 @@
       <el-col :span="6" class="in_right">
         <el-row>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
-              <toplist></toplist>
+            <block-radius
+              :show_header="true"
+              title="服务调用排名分析"
+              :buttons_arr="['被调用次数', '被调用次数']"
+              @changeButton="changeServeiceApplyCountBtn"
+              class="block"
+            >
+              <toplist
+                class="block-radius-content"
+                :options="toplistData"
+              ></toplist>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
@@ -78,8 +95,23 @@
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
-              <starlist></starlist>
+            <block-radius
+              :show_header="true"
+              title="服务评价及评分"
+              :buttons_arr="['服务评价', '服务评分']"
+              @changeButton="changeServeiceInfoBtn"
+              class="block"
+            >
+              <commentlist
+                v-if="serveiceInfoBtnIndex == 0"
+                class="block-radius-content"
+                :data="commentlistData"
+              ></commentlist>
+              <starlist
+                v-else
+                class="block-radius-content"
+                :options="starlistData"
+              ></starlist>
             </block-radius>
           </el-col>
         </el-row>
@@ -92,7 +124,10 @@
       </el-col>
       <el-col :span="18" class="in_block default">
         <block-radius class="block">
-          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
+          <img
+            :src="require('@/assets/imgs/data_img_default.gif')"
+            class="default_img"
+          />
         </block-radius>
       </el-col>
     </el-row>
@@ -107,6 +142,7 @@ import singleCircle from "@/components/e-charts/single_circle";
 import lineChart from "@/components/e-charts/line_chart";
 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";
 export default {
   components: {
@@ -115,22 +151,23 @@ export default {
     multipleCircle,
     singleCircle,
     Toplist,
+    commentlist,
     Starlist,
     lineChart,
-    BarChart
+    BarChart,
   },
   data: () => ({
     navList: [],
     mult_data: [
       { name: "基础工具", value: 40 },
       { name: "通用应用", value: 0 },
-      { name: "业务应用", value: 2 }
+      { name: "业务应用", value: 2 },
     ],
     text: "应用总数",
     single_data: {
       num: 12,
       color: "#515fe7",
-      text: "共享"
+      text: "共享",
     },
     line_data: {
       xaxis: [
@@ -141,22 +178,22 @@ export default {
         "01-05",
         "01-06",
         "01-07",
-        "01-08"
+        "01-08",
       ],
       data: [
         {
           name: "开发者应用",
-          arr: [100, 120, 130, 150, 160, 120, 110, 100]
+          arr: [100, 120, 130, 150, 160, 120, 110, 100],
         },
         {
           name: "平台应用",
-          arr: [120, 130, 140, 130, 140, 120, 100, 90]
+          arr: [120, 130, 140, 130, 140, 120, 100, 90],
         },
         {
           name: "未上架",
-          arr: [80, 90, 100, 110, 100, 70, 80, 90]
-        }
-      ]
+          arr: [80, 90, 100, 110, 100, 70, 80, 90],
+        },
+      ],
     },
     das_data: {
       data: 40,
@@ -171,7 +208,7 @@ export default {
         "01-05",
         "01-06",
         "01-07",
-        "01-08"
+        "01-08",
       ],
       data: [100, 120, 130, 150, 160, 120, 110, 100]
     },
@@ -187,7 +224,114 @@ export default {
         "01-08"
       ],
       data: [100, 120, 130, 150, 160, 120, 110, 100]
-    }
+    },
+    toplistData: [
+      {
+        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: "次",
+      },
+    ], // 服务调用排名分析
+    serveiceInfoBtnIndex: 0,
+    commentlistData: [
+      {
+        add_time: "2020-07-14T16:35:40Z",
+        content: "1111111111111111",
+        id: 36,
+        picture_path:
+          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
+        score: 5,
+        service_id: 128,
+        user_name: "普通用户lxy",
+      },
+      {
+        add_time: "2020-07-14T16:35:40Z",
+        content: "1111111111111111",
+        id: 36,
+        picture_path:
+          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
+        score: 4,
+        service_id: 128,
+        user_name: "普通用户lxy",
+      },
+      {
+        add_time: "2020-07-14T16:35:40Z",
+        content: "1111111111111111",
+        id: 36,
+        picture_path:
+          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
+        score: 3,
+        service_id: 128,
+        user_name: "普通用户lxy",
+      },
+      {
+        add_time: "2020-07-14T16:35:40Z",
+        content: "1111111111111111",
+        id: 36,
+        picture_path:
+          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
+        score: 2,
+        service_id: 128,
+        user_name: "普通用户lxy",
+      },
+    ], // 服务评价
+    starlistData: [
+      {
+        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: "个",
+      },
+    ], // 服务评分
   }),
   mounted() {},
   methods: {
@@ -196,8 +340,16 @@ export default {
     },
     changeApplicationFieldBtn(index) {
       console.log(index);
-    }
-  }
+    },
+    changeServeiceApplyCountBtn(index) {
+      console.log(index);
+    }, // 服务调用排名分析
+    changeServeiceInfoBtn(index) {
+      this.serveiceInfoBtnIndex = index;
+
+      console.log(index);
+    }, // 服务评价及评分
+  },
 };
 </script>
 <style scoped>
@@ -262,4 +414,8 @@ export default {
   width: 330px;
   height: 230px;
 }
-</style>
+.block-radius-content {
\ No newline at end of file
+  height: calc(100% - 36px);
+  margin-top: 15px;
+}
+</style>