合并

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

+<template>
+  <chart :options="bar()" class="bar" />
+</template>
+
+<script>
+import { graphic } from "echarts/lib/export";
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          xaxis: [],
+          data: []
+          
+        };
+      }
+    },
+    bar_width: {
+      type: String,
+      default: "12px"
+    },
+    colors: {
+      type: Array,
+      default: () => {
+        return ["#274fee", "#274fee"];
+      }
+    },
+    bar_border_radius: {
+      type: Array,
+      default: () => {
+        return [10, 10, 10, 10];
+      }
+    },
+    show_split: {
+      typr: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    navList: []
+  }),
+  mounted() {},
+  methods: {
+    bar() {
+      let self = this;
+      return {
+        xAxis: [
+          {
+            type: "category",
+            data: self.data.xaxis,
+            axisLabel: {
+              margin: 20,
+              color: "#0d1847",
+              textStyle: {
+                fontSize: 12
+              },
+              interval: 0,
+              rotate: 30,
+              formatter:  function(value) {
+                let valueTxt = "";
+                if (value.length > 6) {
+                  valueTxt = value.substring(0, 5) + "...";
+                } else {
+                  valueTxt = value;
+                }
+                return valueTxt;
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#f2f2f2"
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitArea: {
+              show: self.show_split,
+              interval: 0,
+              areaStyle: {
+                color: ["#f4f5fd", "#fff"],
+                opacity: 0.5
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            axisLabel: {
+              color: "#a9aec0",
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(0, 0, 0, 0)"
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#f2f2f2",
+                type: "solid"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            type: "bar",
+            data: self.data.data,
+            barWidth: self.bar_width,
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return new graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: self.colors[0] // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: self.colors[1] // 100% 处的颜色
+                      }
+                    ],
+                    false
+                  );
+                },
+                barBorderRadius: self.bar_border_radius
+              }
+            }
+          }
+        ]
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.bar {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

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/dashboard.vue

@@ -10,14 +10,18 @@ export default {
       type: Object,
       default: () => {
         return {
-          data: 40,
-          text: "模拟数据1.0"
+          data: 0,
+          text: ""
         };
       }
     },
     dangerousValue: {
       type: String,
       default: ""
+    },
+    is_word: {
+      type: Boolean,
+      default: false
     }
   },
   data: () => ({
@@ -31,6 +35,7 @@ export default {
         title: [
           {
             text: self.data.data + "{a|%}",
+            show: !self.is_word,
             x: "center",
             y: "center",
             textStyle: {
@@ -47,6 +52,7 @@ export default {
           },
           {
             text: self.data.text,
+            show: !self.is_word,
             x: "center",
             y: "58%",
             textStyle: {
@@ -54,6 +60,53 @@ export default {
               fontWeight: "normal",
               color: "#707693"
             }
+          },
+          {
+            text: self.data.text,
+            show: self.is_word,
+            x: "center",
+            y: "74%",
+            textStyle: {
+              fontSize: 14,
+              fontWeight: "normal",
+              color: "#8890a7"
+            }
+          },
+          {
+            text: self.data.data + "%",
+            show: self.is_word,
+            x: "center",
+            y: "64%",
+            textStyle: {
+              fontSize: 20,
+              fontWeight: "normal",
+              color: "#242c43"
+            }
+          },
+          {
+            text:
+              self.data.data > 75
+                ? "优"
+                : self.data.data > 50
+                ? "良"
+                : self.data.data > 25
+                ? "中"
+                : "差",
+            show: self.is_word,
+            x: "center",
+            y: "40%",
+            textStyle: {
+              fontSize: 36,
+              fontWeight: "normal",
+              color:
+                self.data.data > 75
+                  ? "#00beb2" //green
+                  : self.data.data > 50
+                  ? "#ff7200" //yellow
+                  : self.data.data > 25
+                  ? "#da4251" //red
+                  : "#da4251" //red
+            }
           }
         ],
         angleAxis: {
@@ -110,12 +163,12 @@ export default {
                           ? "#f7f1d5"
                           : "#d5f7e8"
                         : self.data.data > 75
-                        ? "#f7f1d5"
+                        ? "#d5f7e8"
                         : self.data.data > 50
                         ? "#ffd98f"
                         : self.data.data > 25
-                        ? "#d5f7e8"
-                        : "#d5f7e8"
+                        ? "#f7f1d5"
+                        : "#f7f1d5"
                   },
                   {
                     offset: 1,
@@ -125,12 +178,12 @@ export default {
                           ? "#da4251" // red
                           : "#00beb2" //green
                         : self.data.data > 75
-                        ? "#da4251" //red
+                        ? "#00beb2" //green
                         : self.data.data > 50
                         ? "#ff7200" //yellow
                         : self.data.data > 25
-                        ? "#00beb2" //green
-                        : "#00beb2" //green
+                        ? "#da4251" //red
+                        : "#da4251" //red
                   }
                 ])
               }

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/components/general/block-radius.vue

 <template>
   <div class="block_radius">
+    <div v-if="show_header" class="block_header">
+      <div class="block_header_title">{{ title }}</div>
+      <div class="block_header_button_group">
+        <div
+          v-for="(item, index) in buttons_arr"
+          :key="index"
+          class="block_header_button"
+          :class="active_button == index ? 'active' : ''"
+          @click="changeButton(index)"
+        >{{ item }}</div>
+      </div>
+    </div>
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    show_header: {
+      type: Boolean,
+      default: false
+    },
+    buttons_arr: {
+      type: Array,
+      default: () => {
+        [];
+      }
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    active_button: 0
+  }),
   computed: {},
   watch: {},
-  methods: {},
+  methods: {
+    changeButton(index) {
+      if (this.active_button != index) {
+        this.active_button = index;
+        this.$emit("changeButton", index);
+      }
+    }
+  },
   mounted() {}
 };
 </script>
 
 <style scoped>
 .block_radius {
-    background-color: #fff;
-    border-radius: 10px;
-    padding: 20px;
-    margin-bottom: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+.block_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.block_header_title {
+  font-size: 16px;
+  color: #707693;
+  padding-left: 16px;
+  position: relative;
+}
+.block_header_title::before {
+  position: absolute;
+  content: "";
+  width: 8px;
+  height: 8px;
+  background-color: #515fe7;
+  border-radius: 50%;
+  left: 0;
+  top: 8px;
+}
+.block_header_button_group {
+  background-color: #f4f7fc;
+  border-radius: 4px;
+}
+.block_header_button {
+  display: inline-block;
+  font-size: 12px;
+  padding: 2px 6px;
+  color: #8890a7;
+  cursor: pointer;
+}
+.block_header_button.active {
+  color: #f8f9fd;
+  background-color: #3f4f9c;
+  border-radius: 4px;
 }
 </style>
 

src/components/service-list/commodity-card.vue

@@ -2,7 +2,7 @@
   <div class="com_card">
     <div class="com_card_top">
       <img
-        :src="cellData.cover"
+        :src="cellData.logo"
         class="com_card_img"
       />
       <div class="com_card_name_v">

src/components/service-list/service_list.vue

@@ -475,8 +475,8 @@ export default {
     getAppArea() {
       this.$api.serviceShop.getAppArea().then(response => {
         if (response.data.success == 1) {
-          this.filterLists[1].childDomains = response.data.data;
-          this.refresh_app_1 = true;
+          this.filterLists[2].childDomains = response.data.data;
+          this.refresh_app_2 = true;
         } else {
           console.log(response.data.errMsg);
         }
@@ -485,8 +485,8 @@ export default {
     getAppType() {
       this.$api.serviceShop.getAppType().then(response => {
         if (response.data.success == 1) {
-          this.filterLists[2].childDomains = response.data.data;
-          this.refresh_app_2 = true;
+          this.filterLists[1].childDomains = response.data.data;
+          this.refresh_app_1 = true;
         } else {
           console.log(response.data.errMsg);
         }

src/components/table/table-filter.vue

@@ -18,11 +18,19 @@
             'margin-top': i < filterLength ? '0' : '10px',
           }"
         >
-          <a
-            :class="{ current: isCurrentFilter(item.prop, v) }"
-            @click.prevent="selectFilter(item.prop, v)"
-            v-text="v.name"
-          ></a>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="v.name"
+            placement="top"
+          >
+            <a
+              class="text_clip"
+              :class="{ current: isCurrentFilter(item.prop, v) }"
+              @click.prevent="selectFilter(item.prop, v)"
+              v-text="v.name"
+            ></a>
+          </el-tooltip>
         </li>
 
         <div
@@ -189,6 +197,7 @@ export default {
   display: block;
   height: 30px;
   width: 130px;
+  padding: 0 15px;
   box-sizing: border-box;
   border-radius: 12px;
   text-align: center;

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 class="block left_1">
-              <div ref="left_1_l" class="left_1_l"></div>
-              <dashboard ref="left_1_r" class="left_1_r"></dashboard>
+            <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" />
+                  <div class="left_1_title">服务总数</div>
+                  <div class="left_1_num">2222</div>
+                </div>
+                <dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
+              </div>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务类型分析"
+              :buttons_arr="['发布的服务', '调用的服务']"
+              @changeButton="changeServiceTypeBtn"
+              class="block"
+            >
               <multiple-circle :data="mult_data" :text="text"></multiple-circle>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius
+              :show_header="true"
+              title="服务应用领域统计"
+              :buttons_arr="['发布的服务', '调用的服务']"
+              @changeButton="changeApplicationFieldBtn"
+              class="block"
+            >
+              <BarChart :data="bar_data" />
+            </block-radius>
           </el-col>
         </el-row>
       </el-col>
       <el-col :span="12" class="in_center">
         <el-row>
-          <el-col :span="24" class="in_block">
+          <el-col :span="24" class="in_block height_2x">
             <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
-              <line-chart :data="line_data"></line-chart>
-            </block-radius>
+            <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block">
-
+              <line-chart :data="line_data"></line-chart>
             </block-radius>
           </el-col>
         </el-row>
@@ -44,29 +73,61 @@
       <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">
+            <block-radius class="block"></block-radius>
+          </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block">
               <single-circle :data="single_data"></single-circle>
             </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>
       </el-col>
       <!-- 不可横向铺满，一般为最后一行 -->
       <el-col :span="6" class="in_block">
-        <block-radius class="block"></block-radius>
+        <block-radius :show_header="true" title="服务来源机构分析" class="block">
+          <BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
+        </block-radius>
       </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>
@@ -76,11 +137,13 @@
 <script>
 import BlockRadius from "@/components/general/block-radius";
 import Dashboard from "@/components/e-charts/dashboard";
-import multipleCircle from '@/components/e-charts/multiple_circle'
-import singleCircle from '@/components/e-charts/single_circle'
-import lineChart from '@/components/e-charts/line_chart'
+import multipleCircle from "@/components/e-charts/multiple_circle";
+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: {
     BlockRadius,
@@ -88,42 +151,205 @@ export default {
     multipleCircle,
     singleCircle,
     Toplist,
+    commentlist,
     Starlist,
-    lineChart
+    lineChart,
+    BarChart,
   },
   data: () => ({
     navList: [],
-    mult_data:[
-      {"name":"基础工具","value":40},
-      {"name":"通用应用","value":0},
-      {"name":"业务应用","value":2}
+    mult_data: [
+      { name: "基础工具", value: 40 },
+      { name: "通用应用", value: 0 },
+      { name: "业务应用", value: 2 },
     ],
-    text:'应用总数',
-    single_data:{
-      num:12,
-      color:'#515fe7',
-      text:'共享'
+    text: "应用总数",
+    single_data: {
+      num: 12,
+      color: "#515fe7",
+      text: "共享",
     },
-    line_data:{
-      xaxis:['01-01','01-02','01-03','01-04','01-05','01-06','01-07','01-08'],
-      data:[
+    line_data: {
+      xaxis: [
+        "01-01",
+        "01-02",
+        "01-03",
+        "01-04",
+        "01-05",
+        "01-06",
+        "01-07",
+        "01-08",
+      ],
+      data: [
         {
-          name:'开发者应用',
-          arr:[100,120,130,150,160,120,110,100]
+          name: "开发者应用",
+          arr: [100, 120, 130, 150, 160, 120, 110, 100],
         },
         {
-          name:'平台应用',
-          arr:[120,130,140,130,140,120,100,90]
+          name: "平台应用",
+          arr: [120, 130, 140, 130, 140, 120, 100, 90],
         },
         {
-          name:'未上架',
-          arr:[80,90,100,110,100,70,80,90]
+          name: "未上架",
+          arr: [80, 90, 100, 110, 100, 70, 80, 90],
         },
       ],
-    }
+    },
+    das_data: {
+      data: 40,
+      text: "健康占比"
+    },
+    bar_data: {
+      xaxis: [
+        "01-01",
+        "01-02",
+        "01-03",
+        "01-04",
+        "01-05",
+        "01-06",
+        "01-07",
+        "01-08",
+      ],
+      data: [100, 120, 130, 150, 160, 120, 110, 100]
+    },
+    bar_data_org: {
+      xaxis: [
+        "01-01",
+        "01-02",
+        "01-03",
+        "01-04",
+        "01-05",
+        "01-06",
+        "01-07",
+        "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: {}
+  methods: {
+    changeServiceTypeBtn(index) {
+      console.log(index);
+    },
+    changeApplicationFieldBtn(index) {
+      console.log(index);
+    },
+    changeServeiceApplyCountBtn(index) {
+      console.log(index);
+    }, // 服务调用排名分析
+    changeServeiceInfoBtn(index) {
+      this.serveiceInfoBtnIndex = index;
+
+      console.log(index);
+    }, // 服务评价及评分
+  },
 };
 </script>
 <style scoped>
@@ -143,17 +369,38 @@ export default {
   height: 280px;
   padding: 10px;
 }
+.height_2x {
+  height: 560px;
+}
 .block {
   width: 100%;
   height: 100%;
 }
 .left_1 {
+  height: 100%;
   display: flex;
+  justify-content: space-between;
 }
 .left_1_l {
-  width: 50%;
+  width: 40%;
   height: 100%;
   display: inline-block;
+  padding: 20px 0 0 0;
+}
+.left_1_title {
+  width: 100%;
+  text-align: center;
+}
+.left_1_num {
+  font-size: 32px;
+  color: #515fe7;
+  width: 100%;
+  text-align: center;
+}
+.left_1_img {
+  width: 120px;
+  display: block;
+  margin: 0 auto;
 }
 .left_1_r {
   width: 50%;
@@ -167,4 +414,8 @@ export default {
   width: 330px;
   height: 230px;
 }
-</style>
\ No newline at end of file
+.block-radius-content {
+  height: calc(100% - 36px);
+  margin-top: 15px;
+}
+</style>

src/pages/workbench/yygl/yyglList.vue

@@ -166,12 +166,16 @@ export default {
             data: [
               {
                 name: "平台应用",
-                value: 0,
+                value: 2,
               },
               {
                 name: "开发者应用",
                 value: 1,
               },
+              {
+                name: "未上架",
+                value: 0,
+              },
             ],
           },
         ];
@@ -1019,7 +1023,7 @@ export default {
               },
             ].concat(
               (response.body.data || []).map((v) => ({
-                name: v.text,
+                name: v.value,
                 value: v.value,
               }))
             );
@@ -1145,7 +1149,11 @@ export default {
           this.dialogInfo.sunbmitText = "";
           this.dialogInfo.submit = () => {
             this.$http
-              .delete(`/apaas/hubApi/market/del/${item.app_id}`)
+              .delete(`/apaas/hubApi/market/del/${item.app_id}`, {
+                params: {
+                  apply_id: item.apply_id,
+                },
+              })
               .then(({ data }) => {
                 if (data.success) {
                   this.$message({

src/request/api/workbench.js

@@ -55,7 +55,7 @@ const workbench = {
 
     // get service topology
     getServiceTopology() {
-        return axios.get(`/awecloud/meshgraph/api/namespaces/graph?duration=60s&graphType=service&injectServiceNodes=false&appenders=deadNode,sidecarsCheck,serviceEntry,istio&namespaces=apaas-proxy`)
+        return axios.get(`/apaas/istio/v3/api/namespaces/graph`)
     },
 }