From 69ff4a9ccd48cab91402e04996e297a780a44352 Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Sat, 18 Jul 2020 16:49:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E6=9C=8D=E5=8A=A1=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=8C=E5=B7=AE=E4=BF=A9=EF=BC=8C=E4=BA=91=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=8D=87=E7=BA=A7id=EF=BC=8C=E6=84=9F=E8=A7=89?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E7=9A=84=E5=AD=97=E6=AE=B5=E5=90=8D=E5=92=8C?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E4=B8=8D=E4=B8=80=E6=A0=B7=E3=80=82=E3=80=82?=
 =?UTF-8?q?=E3=80=82=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/e-charts/bar-chart.vue         |  19 +-
 src/components/e-charts/commentlist.vue       |  61 ++-
 src/components/e-charts/graph.vue             |  23 +-
 src/components/e-charts/histogramScroll.vue   |   2 +-
 src/components/e-charts/line_chart.vue        | 190 +++++----
 src/components/e-charts/multiple_circle.vue   |  13 +-
 src/components/e-charts/single_circle.vue     |  82 ++--
 src/components/e-charts/toplist.vue           |  62 ++-
 src/components/infoList.vue                   |   1 +
 .../{ => service-list}/service_shop_menu.vue  |   4 +-
 src/components/shop-cloud/shop-cloud.vue      |   4 +-
 src/components/topology.vue                   |   6 +-
 src/pages/data-analysis/my-service.vue        | 359 +++++++++---------
 src/pages/service_shop/shop_cloud.vue         |   2 +-
 src/pages/service_shop/shop_list.vue          |   2 +-
 src/pages/user/order/order_detail.vue         |   3 +
 src/request/api.js                            |   6 +-
 src/request/api/data-analysis.js              |  39 ++
 .../api/{service_shop.js => service-shop.js}  |   0
 19 files changed, 512 insertions(+), 366 deletions(-)
 rename src/components/{ => service-list}/service_shop_menu.vue (95%)
 create mode 100644 src/request/api/data-analysis.js
 rename src/request/api/{service_shop.js => service-shop.js} (100%)

diff --git a/src/components/e-charts/bar-chart.vue b/src/components/e-charts/bar-chart.vue
index 6087dd6..1a9efdb 100644
--- a/src/components/e-charts/bar-chart.vue
+++ b/src/components/e-charts/bar-chart.vue
@@ -10,8 +10,8 @@ export default {
       type: Object,
       default: () => {
         return {
-          xaxis: [],
-          data: []
+          legendData: [],
+          seriesData: []
         };
       }
     },
@@ -56,7 +56,7 @@ export default {
         xAxis: [
           {
             type: "category",
-            data: self.data.xaxis,
+            data: self.data.legendData,
             axisLabel: {
               margin: 20,
               color: "#0d1847",
@@ -84,13 +84,13 @@ export default {
               show: false
             },
             splitArea: {
-              show: self.show_split,
-              interval: 0,
+              show: true,
               areaStyle: {
-                color: ["#f4f5fd", "#fff"],
+                color: ["#fff", "#f8f9fd"],
                 opacity: 0.5
-              }
-            }
+              },
+              interval: 0
+            },
           }
         ],
         yAxis: [
@@ -101,6 +101,7 @@ export default {
                 fontSize: 12
               }
             },
+            minInterval: 1,
             axisLine: {
               lineStyle: {
                 color: "rgba(0, 0, 0, 0)"
@@ -120,7 +121,7 @@ export default {
         series: [
           {
             type: "bar",
-            data: self.data.data,
+            data: self.data.seriesData,
             barWidth: self.bar_width,
             itemStyle: {
               normal: {
diff --git a/src/components/e-charts/commentlist.vue b/src/components/e-charts/commentlist.vue
index 6616153..90e8abb 100644
--- a/src/components/e-charts/commentlist.vue
+++ b/src/components/e-charts/commentlist.vue
@@ -1,23 +1,13 @@
 <template>
   <ul class="comments_list apass_scroll">
-    <li
-      class="comment_card"
-      v-for="(item, index) in data"
-      :key="'comment_' + index"
-    >
+    <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" />
+        <el-avatar :size="45" fit="cover" :src="item.message" />
       </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>
+          <span class="comment-user_name text_clip" v-text="item.message"></span>
+          <span class="comment-time text_clip" v-text="getTimeText(item.add_time || '')"></span>
         </p>
         <div class="commnet-rate">
           <el-rate
@@ -25,10 +15,9 @@
             :value="item.score"
             disabled
             score-template="{value}"
-          >
-          </el-rate>
+          ></el-rate>
         </div>
-        <p class="comment-description" v-text="item.content"></p>
+        <p class="comment-description" v-text="item.message"></p>
       </div>
     </li>
   </ul>
@@ -41,14 +30,48 @@ export default {
   props: {
     data: {
       type: Array,
-      required: true,
-    },
+      required: true
+    }
   },
   methods: {
     getTimeText(time) {
       return helper.dateStringTransform(time);
     },
+    autoScroll() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+
+      this.$el.scrollTop = 0;
+
+      this.timer = setInterval(() => {
+        let curScrollTop = this.$el.scrollTop + 50;
+        if (curScrollTop > this.$el.scrollHeight - this.$el.clientHeight) {
+          curScrollTop = 0;
+        }
+        this.$el.scrollTop = curScrollTop;
+      }, 1500);
+    },
+    mouseenter() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    },
+    mouseleave() {
+      this.autoScroll();
+    }
+  },
+  mounted() {
+    this.autoScroll();
+    window.addEventListener("resize", () => {
+      this.autoScroll();
+    });
   },
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  }
 };
 </script>
 
diff --git a/src/components/e-charts/graph.vue b/src/components/e-charts/graph.vue
index 7c28aa4..b6a2f95 100644
--- a/src/components/e-charts/graph.vue
+++ b/src/components/e-charts/graph.vue
@@ -10,13 +10,16 @@ export default {
       type: Object,
       default: () => {
         return {
-          xaxis: [],
+          legend: {
+            data: []
+          },
           data: [],
-          legend: []
+          series: [{ data: [] }, { data: [] }]
         };
       }
     }
   },
+  watch: {},
   data: () => ({}),
   mounted() {},
   methods: {
@@ -30,7 +33,7 @@ export default {
           icon: "roundRect",
           itemWidth: 10,
           itemHeight: 10,
-          data: self.data.legend,
+          data: self.data.legend.data,
           orient: "horizontal",
           backgroundColor: "#f4f7fc"
         },
@@ -44,7 +47,7 @@ export default {
         xAxis: [
           {
             type: "category",
-            data: self.data.xaxis,
+            data: self.data.data,
             axisLine: {
               lineStyle: {
                 color: "#f2f2f2"
@@ -55,8 +58,7 @@ export default {
               color: "#0d1847",
               textStyle: {
                 fontSize: 12
-              },
-              interval: 0
+              }
             },
             boundaryGap: false
           }
@@ -67,6 +69,7 @@ export default {
             axisTick: {
               show: false
             },
+            minInterval: 1,
             axisLine: {
               lineStyle: {
                 color: "rgba(0, 0, 0, 0)"
@@ -88,9 +91,9 @@ export default {
         ],
         series: [
           {
-            name: self.data.legend[0],
+            name: self.data.legend.data[0],
             type: "line",
-            data: self.data.data[0],
+            data: self.data.series[0].data,
             symbolSize: 1,
             symbol: "circle",
             smooth: true,
@@ -105,9 +108,9 @@ export default {
             }
           },
           {
-            name: self.data.legend[1],
+            name: self.data.legend.data[1],
             type: "line",
-            data: self.data.data[1],
+            data: self.data.series[1].data,
             symbolSize: 1,
             symbol: "circle",
             smooth: true,
diff --git a/src/components/e-charts/histogramScroll.vue b/src/components/e-charts/histogramScroll.vue
index 2241e2f..df6c975 100644
--- a/src/components/e-charts/histogramScroll.vue
+++ b/src/components/e-charts/histogramScroll.vue
@@ -80,7 +80,7 @@ export default {
               show: true,
               interval: 0,
               areaStyle: {
-                color: ["#f4f5fd", "#fff"],
+                color: ["#fff", "#f8f9fd"],
                 opacity: 0.5,
               },
             },
diff --git a/src/components/e-charts/line_chart.vue b/src/components/e-charts/line_chart.vue
index 42a01d2..49fdbbd 100644
--- a/src/components/e-charts/line_chart.vue
+++ b/src/components/e-charts/line_chart.vue
@@ -6,21 +6,48 @@
 import uuidv1 from "uuid/v1";
 var echarts = require("echarts");
 export default {
-  props: ['data'],
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          xAxisData: [],
+          seriesData: [
+            {
+              name: "",
+              data: []
+            },
+            {
+              name: "",
+              data: []
+            }
+          ]
+        };
+      }
+    },
+    targetValue: {
+      type: Number,
+      default: () => 0
+    }
+  },
   components: {},
   data() {
     return {
-      line: uuidv1(),
+      line: uuidv1()
     };
   },
-  watch: {},
+  watch: {
+    data() {
+      this.init_line_charts(this.data.xAxisData, this.data.seriesData);
+    }
+  },
   computed: {},
   created() {},
   mounted() {
-      this.init_line_charts(this.data.xaxis,this.data.data)
+    this.init_line_charts(this.data.xAxisData, this.data.seriesData);
   },
   methods: {
-    init_line_charts(xAxisData,yarr) {
+    init_line_charts(xAxisData, yarr) {
       let bgColor = "#fff";
       let color = [
         "#0090FF",
@@ -28,7 +55,7 @@ export default {
         "#FFC005",
         "#FF515A",
         "#8B5CFF",
-        "#00CA69",
+        "#00CA69"
       ];
       const hexToRgba = (hex, opacity) => {
         let rgbaColor = "";
@@ -41,56 +68,54 @@ export default {
         return rgbaColor;
       };
 
-      var series = []
+      var series = [];
 
-      yarr.forEach((e,idx) => {
-          series.push(
-              {
-            name: e.name,
-            type: "line",
-            smooth: true,
-            showSymbol: false,
-            // symbolSize: 8,
-            zlevel: 3,
-            lineStyle: {
-              normal: {
-                color: color[idx],
-                shadowBlur: 5,
-                shadowColor: hexToRgba(color[idx], 0.5),
-                shadowOffsetY: 10,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: hexToRgba(color[idx], 0.3),
-                    },
-                    {
-                      offset: 1,
-                      color: hexToRgba(color[idx], 0.1),
-                    },
-                  ],
-                  false
-                ),
-                shadowColor: hexToRgba(color[idx], 0.1),
-                shadowBlur: 10,
-              },
-            },
-            emphasis: {
-              itemStyle: {
-                borderWidth: 5,
-              },
-            },
-            data: e.arr,
+      yarr.forEach((e, idx) => {
+        series.push({
+          name: e.name,
+          type: "line",
+          smooth: true,
+          showSymbol: false,
+          // symbolSize: 8,
+          zlevel: 3,
+          lineStyle: {
+            normal: {
+              color: color[idx],
+              shadowBlur: 5,
+              shadowColor: hexToRgba(color[idx], 0.5),
+              shadowOffsetY: 10
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: hexToRgba(color[idx], 0.3)
+                  },
+                  {
+                    offset: 1,
+                    color: hexToRgba(color[idx], 0.1)
+                  }
+                ],
+                false
+              ),
+              shadowColor: hexToRgba(color[idx], 0.1),
+              shadowBlur: 10
+            }
+          },
+          emphasis: {
+            itemStyle: {
+              borderWidth: 5
+            }
           },
-          )
+          data: e.data
+        });
       });
 
       var option = {
@@ -104,23 +129,23 @@ export default {
           itemHeight: 10,
           icon: "roundRect",
           orient: "horizontal",
-          backgroundColor: "#f4f7fc",
+          backgroundColor: "#f4f7fc"
         },
         tooltip: {
           trigger: "axis",
           axisPointer: {
             lineStyle: {
               color: "#c3caf8",
-              width: 2,
-            },
-          },
+              width: 2
+            }
+          }
         },
         grid: {
           top: 10,
-          left:10,
-          right:30,
-          bottom:30,
-          containLabel: true,
+          left: 10,
+          right: 30,
+          bottom: 30,
+          containLabel: true
         },
         xAxis: [
           {
@@ -128,22 +153,24 @@ export default {
             boundaryGap: false, //是否从起点开始画
             axisLabel: {
               textStyle: {
-                color: "#0d1847",
-              },
+                color: "#0d1847"
+              }
             },
             axisLine: {
               lineStyle: {
-                color: "#D9D9D9",
-              },
+                color: "#D9D9D9"
+              }
             },
             splitArea: {
               show: true,
               areaStyle: {
                 color: ["#fff", "#f8f9fd"],
+                opacity: 0.5
               },
+              interval: 0
             },
-            data: xAxisData,
-          },
+            data: xAxisData
+          }
         ],
         yAxis: [
           {
@@ -151,36 +178,37 @@ export default {
             axisLabel: {
               textStyle: {
                 color: "#a9aec0",
-                fontSize: 16,
-              },
+                fontSize: 16
+              }
             },
             nameTextStyle: {
               color: "#666",
               fontSize: 12,
-              lineHeight: 40,
+              lineHeight: 40
             },
             splitLine: {
               lineStyle: {
-                color: "#f2f2f2",
-              },
+                color: "#f2f2f2"
+              }
             },
+            minInterval: 1,
             axisLine: {
               // show: false,
               lineStyle: {
-                color: "#e3e5ef",
-              },
+                color: "#e3e5ef"
+              }
             },
             axisTick: {
-              show: false,
-            },
-          },
+              show: false
+            }
+          }
         ],
-        series: series,
+        series: series
       };
       window[this.line] = echarts.init(document.getElementById(this.line));
       window[this.line].setOption(option, true);
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/src/components/e-charts/multiple_circle.vue b/src/components/e-charts/multiple_circle.vue
index 6f8d56e..7851ae8 100644
--- a/src/components/e-charts/multiple_circle.vue
+++ b/src/components/e-charts/multiple_circle.vue
@@ -32,7 +32,13 @@ export default {
       yylx_asy: uuidv1()
     };
   },
-  watch: {},
+  watch: {
+    data: {
+      handler() {
+        this.init_yylx_asy(this.data, this.text);
+      }
+    }
+  },
   computed: {},
   created() {},
   mounted() {
@@ -107,7 +113,7 @@ export default {
           type: "pie",
           clockWise: false,
           radius: [65, 68],
-          center: ["51%", "50%"],
+          center: ["50%", "50%"],
           hoverAnimation: false,
           itemStyle: {
             normal: {
@@ -117,8 +123,7 @@ export default {
                 color: "#58617a",
                 formatter: params => {
                   var percent = 0;
-
-                  percent = ((params.value / total) * 100).toFixed(2);
+                  percent = total != 0 ? ((params.value / total) * 100).toFixed(2) : 0;
                   if (params.name !== "") {
                     return percent + "%";
                   } else {
diff --git a/src/components/e-charts/single_circle.vue b/src/components/e-charts/single_circle.vue
index cea0bb7..b6bbddd 100644
--- a/src/components/e-charts/single_circle.vue
+++ b/src/components/e-charts/single_circle.vue
@@ -6,37 +6,55 @@
 import uuidv1 from "uuid/v1";
 var echarts = require("echarts");
 export default {
-  props: ['data'],
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          num: 0,
+          color: "#e15260",
+          text: "敏感"
+        };
+      }
+    }
+  },
   components: {},
   data() {
     return {
-      health: uuidv1(),
+      health: uuidv1()
     };
   },
-  watch: {},
+  watch: {
+    data: {
+      handler(val) {
+        console.log(val);
+        this.init_health(this.data.num, this.data.color, this.data.text);
+      }
+    }
+  },
   computed: {},
   created() {},
   mounted() {
-    this.init_health(this.data.num,this.data.color,this.data.text);
+    this.init_health(this.data.num, this.data.color, this.data.text);
   },
   methods: {
-    init_health(num,color,text) {
+    init_health(num, color, text) {
       var options = {
         title: {
           text: num + "%",
           textStyle: {
             color: "#000",
             fontSize: 26,
-            fontWeight: 200,
+            fontWeight: 200
           },
           subtext: text,
           subtextStyle: {
             color: "#707693",
-            fontSize: 12,
+            fontSize: 12
           },
           itemGap: 0, // 主副标题距离
           left: "center",
-          top: "center",
+          top: "center"
         },
         angleAxis: {
           max: 100, // 满分
@@ -44,37 +62,37 @@ export default {
           startAngle: 90,
           // 隐藏刻度线
           axisLine: {
-            show: false,
+            show: false
           },
           axisTick: {
-            show: false,
+            show: false
           },
           axisLabel: {
-            show: false,
+            show: false
           },
           splitLine: {
-            show: false,
-          },
+            show: false
+          }
         },
         radiusAxis: {
           type: "category",
           // 隐藏刻度线
           axisLine: {
-            show: false,
+            show: false
           },
           axisTick: {
-            show: false,
+            show: false
           },
           axisLabel: {
-            show: false,
+            show: false
           },
           splitLine: {
-            show: false,
-          },
+            show: false
+          }
         },
         polar: {
           center: ["50%", "50%"],
-          radius: "140%", //图形大小
+          radius: "140%" //图形大小
         },
         series: [
           {
@@ -88,17 +106,17 @@ export default {
                   normal: {
                     color: color,
                     shadowColor: "rgba(0, 0, 0, 0.2)",
-                    shadowBlur: 20,
-                  },
-                },
-              },
+                    shadowBlur: 20
+                  }
+                }
+              }
             ],
             coordinateSystem: "polar",
             roundCap: true,
             barWidth: 8,
             barGap: "-100%", // 两环重叠
 
-            z: 2,
+            z: 2
           },
           {
             // 灰色环
@@ -110,22 +128,22 @@ export default {
                 itemStyle: {
                   color: "#c9cedd",
                   shadowColor: "rgba(0, 0, 0, 0.2)",
-                  shadowBlur: 20,
-                },
-              },
+                  shadowBlur: 20
+                }
+              }
             ],
             coordinateSystem: "polar",
             roundCap: true,
             barWidth: 8,
             barGap: "-100%", // 两环重叠
-            z: 1,
-          },
-        ],
+            z: 1
+          }
+        ]
       };
       window[this.health] = echarts.init(document.getElementById(this.health));
       window[this.health].setOption(options, true);
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/src/components/e-charts/toplist.vue b/src/components/e-charts/toplist.vue
index 5f6d31b..e218df0 100644
--- a/src/components/e-charts/toplist.vue
+++ b/src/components/e-charts/toplist.vue
@@ -1,28 +1,29 @@
 <template>
-  <div
-    class="top_list apass_scroll"
-    @mouseenter="mouseenter"
-    @mouseleave="mouseleave"
-  >
+  <div class="top_list apass_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
     <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" />
+          <el-avatar shape="square" :size="28" fit="cover" :src="option.cover" />
         </div>
         <div class="item_detail">
           <p class="item_info">
-            <span class="text_clip">
-              {{ option.name }}
+            <span
+              class="text_clip is_link"
+              @click="getDetail(option.service_id, option.data_service_type1)"
+            >
+              {{ option.service_name }}
               <i class="el-icon-arrow-right"></i>
             </span>
-            <span v-text="option.value + (option.unit || '次')"></span>
+            <span
+              v-text="helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')"
+            ></span>
           </p>
           <el-progress
             class="item_progress"
-            :percentage="getPercent(option.value)"
+            :percentage="getPercent(option.request_count)"
             :show-text="false"
             color="#e56600"
           ></el-progress>
@@ -33,30 +34,36 @@
 </template>
 
 <script>
+import helper from "@/services/helper";
 export default {
   props: {
     options: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     targetValue: {
       type: Number,
-      default: () => 1000,
-    },
+      default: () => 0
+    }
   },
   data() {
     return {
       timer: null,
+      helper
     };
   },
   watch: {
     text() {
       this.autoScroll();
-    },
+    }
   },
   methods: {
     getPercent(value) {
-      return Math.min((value / this.targetValue) * 100, 100);
+      if (value == 0) {
+        return 0;
+      } else {
+        return Math.min((value / this.targetValue) * 100, 100);
+      }
     },
     autoScroll() {
       if (this.timer) {
@@ -81,10 +88,28 @@ export default {
     mouseleave() {
       this.autoScroll();
     },
+    getDetail(id, type) {
+      switch (type) {
+        case 5:
+          this.$router.push(`/shop/sjfwDetail/${id}`);
+          break;
+        case 6:
+          this.$router.push(`/shop/skfwDetail/${id}`);
+          break;
+        case 21:
+          this.$router.push(`/shop/zhfwDetail/${id}`);
+          break;
+        default:
+          this.$message({
+            message: "查看详情失败",
+            type: "warning"
+          });
+          break;
+      }
+    }
   },
   mounted() {
     this.autoScroll();
-
     window.addEventListener("resize", () => {
       this.autoScroll();
     });
@@ -93,7 +118,7 @@ export default {
     if (this.timer) {
       clearInterval(this.timer);
     }
-  },
+  }
 };
 </script>
 
@@ -151,4 +176,7 @@ export default {
 .item_progress {
   margin-top: 6px;
 }
+.is_link {
+  cursor: pointer;
+}
 </style>
diff --git a/src/components/infoList.vue b/src/components/infoList.vue
index 9d9f391..ef7ad08 100644
--- a/src/components/infoList.vue
+++ b/src/components/infoList.vue
@@ -10,6 +10,7 @@
           访问地址:
           <a :href="item.info" target="_blank">{{ item.info }}</a>
         </span>
+        <span v-else-if="item.type == 'time'">{{ helper.dateStringTransform(item.info) }}</span>
         <span v-else v-html="item.info" style="white-space:pre-wrap;"></span>
         <span
           v-if="item.type && item.type == 'down' && item.url != ''"
diff --git a/src/components/service_shop_menu.vue b/src/components/service-list/service_shop_menu.vue
similarity index 95%
rename from src/components/service_shop_menu.vue
rename to src/components/service-list/service_shop_menu.vue
index 85abcbd..60ffb6c 100644
--- a/src/components/service_shop_menu.vue
+++ b/src/components/service-list/service_shop_menu.vue
@@ -4,10 +4,10 @@
       <li v-for="(item, index) in menuList" :key="index" @click="active(item.visit_url)">
         <img
           v-if="item.visit_url == actives"
-          :src="item.active != '' ? require('../assets/imgs/' + item.active + '.png') : ''"
+          :src="item.active != '' ? require('@/assets/imgs/' + item.active + '.png') : ''"
           class="menu_img"
         />
-        <img v-else :src="require('../assets/imgs/' + item.default + '.png')" class="menu_img" />
+        <img v-else :src="require('@/assets/imgs/' + item.default + '.png')" class="menu_img" />
         <span
           :class="item.visit_url == actives ? 'menu_item_active':'menu_item'"
         >{{ item.menu_name }}</span>
diff --git a/src/components/shop-cloud/shop-cloud.vue b/src/components/shop-cloud/shop-cloud.vue
index 6c79b7d..a968dfe 100644
--- a/src/components/shop-cloud/shop-cloud.vue
+++ b/src/components/shop-cloud/shop-cloud.vue
@@ -255,7 +255,7 @@
                     v-for="(item, index) in workSpaceOptions"
                     :key="index"
                     :label="item.namespace"
-                    :value="index"
+                    :value="id"
                   ></el-option>
                 </el-select>
               </div>
@@ -1046,7 +1046,7 @@ export default {
         });
       } else {
         let query = {
-          resource_id: this.paramsOld.id,
+          resource_id: this.workSpace,
           resource_apply: {
             apply_file: this.formOld.apply_file,
             cpu: Number(this.formOld.cpu),
diff --git a/src/components/topology.vue b/src/components/topology.vue
index 38aed81..73169ff 100644
--- a/src/components/topology.vue
+++ b/src/components/topology.vue
@@ -280,7 +280,7 @@ export default {
             label: "时空服务"
           },
           {
-            id: "level2",
+            id: "level3",
             x: legendX,
             y: legendBeginY + legendYPadding * 2,
             type: "image",
@@ -289,7 +289,7 @@ export default {
             label: "视频服务"
           },
           {
-            id: "level2",
+            id: "level4",
             x: legendX,
             y: legendBeginY + legendYPadding * 3,
             type: "image",
@@ -298,7 +298,7 @@ export default {
             label: "感知服务"
           },
           {
-            id: "level2",
+            id: "level5",
             x: legendX,
             y: legendBeginY + legendYPadding * 4,
             type: "image",
diff --git a/src/pages/data-analysis/my-service.vue b/src/pages/data-analysis/my-service.vue
index 4c98929..35be073 100644
--- a/src/pages/data-analysis/my-service.vue
+++ b/src/pages/data-analysis/my-service.vue
@@ -22,7 +22,7 @@
                 <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">8</div>
+                  <div class="left_1_num">{{ overview.serviceTotal }}</div>
                 </div>
                 <dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
               </div>
@@ -97,7 +97,11 @@
                           :style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
                         >
                           {{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}%
-                          <img v-if="sparkline1.up>0" src="../../assets/imgs/icon_up.png" alt />
+                          <img
+                            v-if="sparkline1.up>0"
+                            src="../../assets/imgs/icon_up.png"
+                            alt
+                          />
                           <img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt />
                         </span>
                       </p>
@@ -122,7 +126,11 @@
                           :style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
                         >
                           {{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}%
-                          <img v-if="sparkline2.up>0" src="../../assets/imgs/icon_up.png" alt />
+                          <img
+                            v-if="sparkline2.up>0"
+                            src="../../assets/imgs/icon_up.png"
+                            alt
+                          />
                           <img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt />
                         </span>
                       </p>
@@ -169,7 +177,7 @@
             <block-radius
               :show_header="true"
               title="服务调用排名分析"
-              :buttons_arr="['被调用次数', '被调用次数']"
+              :buttons_arr="['被调用次数', '调用次数']"
               @changeButton="changeServeiceApplyCountBtn"
               class="block"
             >
@@ -213,7 +221,7 @@
               class="block"
             >
               <commentlist
-                v-if="serveiceInfoBtnIndex == 0"
+                v-if="right_3_state == 0"
                 class="block-radius-content"
                 :data="commentlistData"
               ></commentlist>
@@ -272,20 +280,20 @@ export default {
     Topology
   },
   data: () => ({
+    overview: {
+      serviceTotal: 0
+    },
     left_1_state: 0,
-    mult_data_state: [
-      { name: "正常", value: 4 },
-      { name: "警告", value: 2 },
-      { name: "错误", value: 0 },
-      { name: "未使用", value: 2 }
-    ],
-    mult_data: [
-      { name: "数据服务", value: 4 },
-      { name: "时空服务", value: 2 },
-      { name: "视频服务", value: 0 },
-      { name: "感知服务", value: 0 },
-      { name: "综合服务", value: 2 }
-    ],
+    left_2_state: 0,
+    left_3_state: 0,
+    center_3_state: 0,
+    right_0_state: 0,
+    right_1_state: 0,
+    right_2_state: 0,
+    right_3_state: 0,
+    last_id: 0,
+    mult_data_state: [],
+    mult_data: [],
     spIndicatorStyles1: false,
     spRefLineStyles3: {
       stroke: "#d14",
@@ -312,45 +320,30 @@ export default {
     },
     text: "服务总数",
     single_data: {
-      num: 50,
+      num: 0,
       color: "#25bdb1",
       text: "共享"
     },
     single_data1: {
-      num: 30,
+      num: 0,
       color: "#f5ab4c",
       text: "受限"
     },
     single_data2: {
-      num: 20,
+      num: 0,
       color: "#e15260",
       text: "敏感"
     },
     line_data: {
-      xaxis: [
-        "07/03",
-        "07/04",
-        "07/05",
-        "07/06",
-        "07/07",
-        "07/08",
-        "07/09",
-        "07/10",
-        "07/11",
-        "07/12",
-        "07/13",
-        "07/14",
-        "07/15",
-        "07/16"
-      ],
-      data: [
+      xAxisData: [],
+      seriesData: [
         {
-          name: "上架中",
-          arr: [5, 6, 7, 8, 5, 6, 7, 5,6,8,5,3,2,4]
+          name: "",
+          data: []
         },
         {
-          name: "已下架",
-          arr: [6, 5, 7, 6, 7, 6, 4, 3,5,7,8,6,7,4]
+          name: "",
+          data: []
         }
       ]
     },
@@ -359,122 +352,16 @@ export default {
       text: "健康占比"
     },
     bar_data: {
-      xaxis: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
-      data: [4, 1, 2, 1]
+      legendData: [],
+      seriesData: []
     },
     bar_data_org: {
-      xaxis: [
-        "省公安厅",
-        "省发改委",
-        "贵州省公安厅",
-        "大数据中心",
-        "省资源局",
-        "js机构"
-      ],
-      data: [2, 1, 2, 1, 1, 1]
-    },
-    toplistData: [
-      {
-        name: "报警服务",
-        value: 15,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      },
-      {
-        name: "数据服务",
-        value: 13,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      },
-      {
-        name: "消息队列服务",
-        value: 11,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      },
-      {
-        name: "档案中心服务",
-        value: 7,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      },
-      {
-        name: "按键中心服务",
-        value: 6,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      },
-      {
-        name: "通用API服务",
-        value: 3,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      },
-      {
-        name: "案件中心服务",
-        value: 1,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      },
-      {
-        name: "数据中心服务",
-        value: 1,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      }
-    ], // 服务调用排名分析
-    toplistTargetValue: 180, // 服务调用排名分析 目标值
-    serveiceInfoBtnIndex: 0,
-    commentlistData: [
-      {
-        add_time: "2020-07-14T16:35:40Z",
-        content: "good!!! its good",
-        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: "太好了",
-        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: "33333",
-        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: "4444",
-        id: 36,
-        picture_path:
-          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
-        score: 2,
-        service_id: 128,
-        user_name: "普通用户lxy"
-      }
-    ], // 服务评价
+      legendData: [],
+      seriesData: []
+    },
+    toplistData: [], // 服务调用排名分析
+    toplistTargetValue: 0, // 服务调用排名分析 目标值
+    commentlistData: [], // 服务评价
     linelistData: [
       {
         count: 6,
@@ -569,25 +456,25 @@ export default {
       }
     ], // 热门搜索 数据
     graph_arr: {
-      xaxis: [
-        "07/09",
-        "07/10",
-        "07/11",
-        "07/12",
-        "07/13",
-        "07/14",
-        "07/15",
-        "07/16"
-      ],
-      data: [
-        [34, 30, 13, 52, 23, 80, 48, 52],
-        [24, 17, 12, 17, 23, 71, 18, 45],
-      ],
-      legend: ["被调用次数", "调用次数"]
+      legend: {
+        data: []
+      },
+      data: [],
+      series: [{ data: [] }, { data: [] }]
     },
     topology_datas: {}
   }),
   mounted() {
+    this.getServiceOverview();
+    this.getServiceHealth();
+    this.getServiceTrend();
+    this.getServiceType();
+    this.getServiceSectorse();
+    this.getServiceOrg();
+    this.getServiceOpenness();
+    this.getServiceRequest();
+    this.getServiceOnlineState();
+    this.getServiceEstimated();
     this.hotSearchHeader = [
       {
         label: "服务排名",
@@ -619,6 +506,106 @@ export default {
     this.getTopologyData();
   },
   methods: {
+    getServiceOverview() {
+      this.$api.dataAnalysis.getServiceOverview().then(response => {
+        if (response.data.success == 1) {
+          this.overview = response.data.data;
+          this.das_data.data = Math.round(
+            (response.data.data.seriesData[0].value /
+              (response.data.data.seriesData[0].value +
+                response.data.data.seriesData[1].value)) *
+              100
+          );
+        }
+      });
+    },
+    getServiceHealth() {
+      this.$api.dataAnalysis.getServiceHealth().then(response => {
+        if (response.data.success == 1) {
+          this.mult_data_state = response.data.data.seriesData;
+        }
+      });
+    },
+    getServiceTrend() {
+      this.$api.dataAnalysis
+        .getServiceTrend({ type: this.right_1_state })
+        .then(response => {
+          if (response.data.success == 1) {
+            this.graph_arr = response.data.data;
+          }
+        });
+    },
+    getServiceType() {
+      this.$api.dataAnalysis
+        .getServiceType({ type: this.left_2_state })
+        .then(response => {
+          if (response.data.success == 1) {
+            this.mult_data = response.data.data.seriesData;
+          }
+        });
+    },
+    getServiceSectorse() {
+      this.$api.dataAnalysis
+        .getServiceSectorse({ type: this.left_3_state })
+        .then(response => {
+          if (response.data.success == 1) {
+            this.bar_data = response.data.data;
+          }
+        });
+    },
+    getServiceOrg() {
+      this.$api.dataAnalysis
+        .getServiceOrg({ type: this.left_3_state })
+        .then(response => {
+          if (response.data.success == 1) {
+            this.bar_data_org = response.data.data;
+          }
+        });
+    },
+    getServiceOpenness() {
+      this.$api.dataAnalysis
+        .getServiceOpenness({ type: this.right_2_state })
+        .then(response => {
+          if (response.data.success == 1) {
+            this.single_data.num = response.data.data.shared;
+            this.single_data1.num = response.data.data.privacy;
+            this.single_data2.num = response.data.data.sensitive;
+          }
+        });
+    },
+    getServiceRequest() {
+      this.$api.dataAnalysis
+        .getServiceRequest({ type: this.right_0_state })
+        .then(response => {
+          if (response.data.success == 1) {
+            this.toplistData = response.data.data;
+            this.toplistTargetValue = this.toplistData[0].request_count;
+          }
+        });
+    },
+    getServiceOnlineState() {
+      this.$api.dataAnalysis
+        .getServiceOnlineState({ type: this.center_3_state })
+        .then(response => {
+          if (response.data.success == 1) {
+            this.line_data = response.data.data;
+            console.log(this.line_data);
+          }
+        });
+    },
+    getServiceEstimated() {
+      this.$api.dataAnalysis
+        .getServiceEstimated({
+          type: this.right_3_state,
+          last_id: this.last_id
+        })
+        .then(response => {
+          if (response.data.success == 1) {
+            this.commentlistData = response.data.data;
+            this.last_id = this.commentlistData[0].last_id;
+          }
+        });
+    },
     detailHotSearch(item) {
       console.log("查看热搜详情");
     },
@@ -626,28 +613,32 @@ export default {
       console.log("服务热门搜索: " + sortInfo);
     },
     changeServiceTypeBtn(index) {
-      console.log("服务类型分析:" + index);
+      this.left_2_state = index;
+      this.getServiceType();
     },
     changeApplicationFieldBtn(index) {
-      console.log("服务应用领域统计: " + index);
+      this.left_3_state = index;
+      this.getServiceSectorse();
     },
     changeServeiceApplyCountBtn(index) {
-      console.log("服务调用排名分析: " + index);
+      this.right_0_state = index;
+      this.getServiceRequest();
     },
     changeServeiceInfoBtn(index) {
-      this.serveiceInfoBtnIndex = index;
-
-      console.log("服务评价及评分: " + index);
+      this.right_3_state = index;
+      this.getServiceEstimated();
     },
     changeOpenessBtnindex(index) {
-      console.log("服务开放程度统计: " + index);
+      this.right_2_state = index;
+      this.getServiceOpenness();
     },
     changeServiceCellBtn(index) {
-      console.log("服务调用次数分析: " + index);
+      this.right_1_state = index;
+      this.getServiceTrend();
     },
     changeServeiceTotalChangeBtn(index) {
-      console.log("服务总数变化趋势: " + index);
-      console.log(index);
+      this.center_3_state = index;
+      this.getServiceOnlineState();
     },
     getTopologyData() {
       this.$api.workbench.getServiceTopology().then(response => {
@@ -655,8 +646,12 @@ export default {
       });
     },
     changeServiceStateBtn(index) {
-      console.log(index);
       this.left_1_state = index;
+      if (index == 0) {
+        this.getServiceHealth();
+      } else {
+        this.a();
+      }
     }
   }
 };
diff --git a/src/pages/service_shop/shop_cloud.vue b/src/pages/service_shop/shop_cloud.vue
index 84b790e..7eb2afd 100644
--- a/src/pages/service_shop/shop_cloud.vue
+++ b/src/pages/service_shop/shop_cloud.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import ServiceShopMenu from "@/components/service_shop_menu";
+import ServiceShopMenu from "@/components/service-list/service_shop_menu";
 import ShopCloud from "@/components/shop-cloud/shop-cloud";
 export default {
   components: {
diff --git a/src/pages/service_shop/shop_list.vue b/src/pages/service_shop/shop_list.vue
index c68a3d5..82ef370 100644
--- a/src/pages/service_shop/shop_list.vue
+++ b/src/pages/service_shop/shop_list.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import ServiceShopMenu from "@/components/service_shop_menu";
+import ServiceShopMenu from "@/components/service-list/service_shop_menu";
 import ServiceList from "@/components/service-list/service_list";
 export default {
   components: {
diff --git a/src/pages/user/order/order_detail.vue b/src/pages/user/order/order_detail.vue
index ee533cb..d06314c 100644
--- a/src/pages/user/order/order_detail.vue
+++ b/src/pages/user/order/order_detail.vue
@@ -258,6 +258,7 @@ export default {
         arr: [
           {
             title: "审批时间：",
+            type: "time",
             info: ""
           },
           {
@@ -280,6 +281,7 @@ export default {
         arr: [
           {
             title: "审批时间：",
+            type: "time",
             info: ""
           },
           {
@@ -302,6 +304,7 @@ export default {
         arr: [
           {
             title: "审批时间：",
+            type: "time",
             info: ""
           },
           {
diff --git a/src/request/api.js b/src/request/api.js
index f67bd1f..79560de 100644
--- a/src/request/api.js
+++ b/src/request/api.js
@@ -1,13 +1,15 @@
 import workbench from '@/request/api/workbench';
-import serviceShop from '@/request/api/service_shop';
+import serviceShop from '@/request/api/service-shop';
 import user from '@/request/api/user';
 import authority from '@/request/api/authority';
 import general from '@/request/api/general';
+import dataAnalysis from '@/request/api/data-analysis';
 
 export default {
     workbench,
     serviceShop,
     user,
     authority,
-    general
+    general,
+    dataAnalysis
 }
\ No newline at end of file
diff --git a/src/request/api/data-analysis.js b/src/request/api/data-analysis.js
new file mode 100644
index 0000000..62a42a1
--- /dev/null
+++ b/src/request/api/data-analysis.js
@@ -0,0 +1,39 @@
+import axios from '@/request/http'; // 导入http中创建的axios实例
+import qs from 'qs'; // 根据需求是否导入qs模块
+
+const dataAnalysis = {
+  // Data Analysis
+  // service
+  getServiceOverview() {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/basic`);
+  },
+  getServiceHealth() {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/health`);
+  },
+  getServiceTrend(params) {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/trend?type=${params.type == 0 ? 'week' : 'mon'}`);
+  },
+  getServiceType(params) {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/type/${params.type == 0 ? 'register' : 'apply'}`);
+  },
+  getServiceSectorse(params) {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/sectors/${params.type == 0 ? 'register' : 'apply'}`);
+  },
+  getServiceOrg() {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/org`);
+  },
+  getServiceOpenness(params) {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/openness/${params.type == 0 ? 'register' : 'apply'}`);
+  },
+  getServiceRequest(params) {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/request/${params.type == 0 ? 'register' : 'apply'}`);
+  },
+  getServiceOnlineState(params) {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/onlinestate/${params.type == 0 ? 'day14' : 'day30'}`);
+  },
+  getServiceEstimated(params) {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/estimated/${params.type == 0 ? 'all' : 'scoremap'}?last_id=${params.last_id}`);
+  },
+}
+
+export default dataAnalysis;
diff --git a/src/request/api/service_shop.js b/src/request/api/service-shop.js
similarity index 100%
rename from src/request/api/service_shop.js
rename to src/request/api/service-shop.js
-- 
2.26.0