数据分析接口对接

src/components/e-charts/commentlist.vue

@@ -45,7 +45,7 @@ export default {
       this.$el.scrollTop = 0;
 
       this.timer = setInterval(() => {
-        let curScrollTop = this.$el.scrollTop + 50;
+        let curScrollTop = this.$el.scrollTop + 70;
         if (curScrollTop > this.$el.scrollHeight - this.$el.clientHeight) {
           curScrollTop = 0;
         }

src/components/e-charts/graph.vue

@@ -38,8 +38,8 @@ export default {
           backgroundColor: "#f4f7fc"
         },
         grid: {
-          left: 10,
-          right: 10,
+          left: 20,
+          right: 32,
           bottom: 25,
           top: 25,
           containLabel: true
@@ -91,7 +91,7 @@ export default {
         ],
         series: [
           {
-            name: self.data.legend.data[0],
+            name: self.data.series[0].name,
             type: "line",
             data: self.data.series[0].data,
             symbolSize: 1,
@@ -108,7 +108,7 @@ export default {
             }
           },
           {
-            name: self.data.legend.data[1],
+            name: self.data.series[1].name,
             type: "line",
             data: self.data.series[1].data,
             symbolSize: 1,

src/components/e-charts/line_chart.vue

@@ -142,7 +142,7 @@ export default {
         },
         grid: {
           top: 10,
-          left: 10,
+          left: 15,
           right: 30,
           bottom: 30,
           containLabel: true

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

@@ -16,7 +16,7 @@
                     <img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
                     <div class="left_1_msg">
                       <div class="left_1_title">应用总数</div> 
-                      <div class="left_1_num">4</div>
+                      <div class="left_1_num">{{overview.total}}</div>
                     </div>
                   </div>
                   <div class="chain">
@@ -40,7 +40,7 @@
                   <div class="left_1_line"></div>
                   <div class="left_1_l_bottom">
                     日均被部署次数
-                    <span class="left_1_l_bottom_msg">12432</span>（次）
+                    <span class="left_1_l_bottom_msg">{{overview.day_count}}</span>（次）
                   </div>
                 </div>
                 <div class="left_1_right">
@@ -80,7 +80,7 @@
               :show_header="true"
               title="应用使用领域统计"
               :buttons_arr="['构建的应用', '申请的应用']"
-              @changeButton="changeServiceTypeBtn"
+              @changeButton="changeAppAreaTypeBtn"
               class="block"
             >
               <BarChart
@@ -166,7 +166,7 @@
             <block-radius
               :show_header="true"
               title="应用部署排名分析"
-              :buttons_arr="['被部署次数', '被部署次数']"
+              :buttons_arr="['被部署次数', '部署次数']"
               @changeButton="changeServeiceApplyCountBtn"
               class="block"
             >
@@ -249,16 +249,19 @@ export default {
     WaterPolo
   },
   data: () => ({
-    water_polo: [75, 25],
+    water_polo: [0, 0],
     overview: {
-      month_chain: 14.5,
-      week_chain: -14.2
+      month_chain: 0,
+      week_chain: 0,
+      total:0,
+      day_count:0
     },
-    mult_data: [
-      { name: "基础工具", value: 2 },
-      { name: "通用应用", value: 1 },
-      { name: "业务应用", value: 1 }
-    ],
+    now_used_count_day:7,
+    now_app_type:1,
+    now_app_used_area:1,
+    now_app_count:14,
+    now_app_deploy:1,
+    mult_data: [],
     text: "应用总数",
     spIndicatorStyles1: false,
     spRefLineStyles3: {
@@ -294,110 +297,11 @@ export default {
       color: "#e56600",
       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: [
-        {
-          name: "开发者应用",
-          arr: [4, 3, 2, 1, 0, 0, 2, 3,2,4,0,3,2,1]
-        },
-        {
-          name: "平台应用",
-          arr: [0, 2, 3, 4, 6, 3, 2, 1,2,5,3,0,3,1]
-        },
-        {
-          name: "未上架",
-          arr: [2, 3, 0, 1, 0, 0, 2, 1,1,2,2,3,3,2]
-        }
-      ]
-    },
-    bar_data_org: {
-      xaxis: [
-        "省公安厅",
-        "省发改委",
-        "贵州省公安厅",
-        "大数据中心",
-        "省资源局",
-        "js机构",
-      ],
-      data: [2, 1, 2, 1, 1, 1]
-    },
-    bar_data_area: {
-      xaxis: [
-        "经济建设",
-        "环境资源",
-        "道路交通",
-        "教育科技",
-        "文化休闲",
-        "城市管理",
-        "机构团体",
-        "民生服务",
-        "其他",
-      ],
-      data: [1, 0, 0, 1, 0, 2, 0, 0, 0]
-    }, 
-    graph_arr: {
-      xaxis: [
-        "07/09",
-        "07/10",
-        "07/11",
-        "07/12",
-        "07/13",
-        "07/14",
-        "07/15",
-        "07/16"
-      ],
-      data: [
-        [1, 1, 0, 1, 0, 2, 1, 2],
-        [0, 1, 1, 2, 1, 1, 0, 2],
-      ],
-      legend: ["被调用次数", "调用次数"]
-    },
-    toplistData: [
-      {
-        name: "mapvideos",
-        value: 13,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      },
-      {
-        name: "语音识别",
-        value: 12,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      },
-      {
-        name: "轨迹绘制",
-        value: 9,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      },
-      {
-        name: "postgresql",
-        value: 5,
-        logo:
-          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        unit: "次"
-      }
-    ], // 应用部署排名分析
+    line_data: {},
+    bar_data_org: {},
+    bar_data_area: {}, 
+    graph_arr: {},
+    toplistData: [], // 应用部署排名分析
     toplistTargetValue: 150, // 应用部署排名分析 目标值
     appInfoBtnIndex: 0,
     commentlistData: [
@@ -499,6 +403,13 @@ export default {
     ] // 热门搜索 数据
   }),
   mounted() {
+    this.getAppOverview()
+    this.getAppUsedCount()
+    this.getAppType()
+    this.getAppSourceOri()
+    this.getAppUsedArea()
+    this.getAppCount()
+    this.getAppDeployRank()
     this.hotSearchHeader = [
       {
         label: "排名",
@@ -523,12 +434,95 @@ export default {
         prop: "increases",
         width: 100,
         sortType: "0", // 0：升序 1：降序
-        sortable: true,
         align: "center"
       }
     ];
   },
   methods: {
+    getAppOverview(){
+      this.$api.dataAnalysis.getAppOverview().then(response => {
+        if (response.data.success == 1) {
+          let data = response.data.data
+          this.overview= {
+            month_chain: parseFloat(data.month_lr),
+            week_chain: parseFloat(data.week_lr),
+            total:data.total,
+            day_count:data.ave_deploy_count
+          }
+          this.water_polo = [parseFloat(data.developable_ratio),parseFloat(data.un_developable_ratio)]
+        }
+      })
+    },
+    getAppUsedCount(){
+      this.$api.dataAnalysis.getAppUsedCount({day:this.now_used_count_day}).then(response => {
+        if (response.data.success == 1) {
+          let data = response.data.data
+          this.graph_arr= data
+        }
+      })
+    },
+    getAppType(){
+      this.$api.dataAnalysis.getAppType({type:this.now_app_type}).then(response => {
+        if (response.data.success == 1) {
+          let data = response.data.data
+          this.mult_data= data.series[0].data
+        }
+      })
+    },
+    getAppSourceOri(){
+      this.$api.dataAnalysis.getAppSourceOri().then(response => {
+        if (response.data.success == 1) {
+          let data = response.data.data
+          this.bar_data_org= {
+            legendData: data.xAxis.data,
+            seriesData: data.series[0].data
+          }
+        }
+      })
+    },
+    getAppUsedArea(){
+      this.$api.dataAnalysis.getAppUsedArea({type:this.now_app_used_area}).then(response => {
+        if (response.data.success == 1) {
+          let data = response.data.data
+          this.bar_data_area= {
+            legendData: data.xAxis.data,
+            seriesData: data.series[0].data
+          }
+        }
+      })
+    },
+    getAppCount(){
+      this.$api.dataAnalysis.getAppCount({day:this.now_app_count}).then(response => {
+        if (response.data.success == 1) {
+          let data = response.data.data
+          this.line_data= {
+            xAxisData: data.data,
+            seriesData: data.series
+          }
+        }
+      })
+    },
+    getAppDeployRank(){
+      this.$api.dataAnalysis.getAppDeployRank({type:this.now_app_deploy}).then(response => {
+        if (response.data.success == 1) {
+          let data = response.data.data
+          this.toplistData = []
+          if(data&&data.length){
+            this.toplistTargetValue =data[0].num
+            data.forEach(e => {
+              this.toplistData.push({
+                service_name: e.name,
+                request_count: e.num,
+                cover:e.logo,
+                service_id:e.id,
+                data_service_type:e.type,
+                data_service_type1:124
+              })
+            });
+          }
+        }
+      })
+    },
     detailHotSearch(item) {
       console.log("查看热搜详情");
     },
@@ -536,16 +530,36 @@ export default {
       console.log("应用热门搜索: " + sortInfo);
     },
     changeServiceTypeBtn(index) {
-      console.log("应用类型分析: " + index);
+      if(index == 0){
+        this.now_app_type = 1
+      }else{
+        this.now_app_type = 2
+      }
+      this.getAppType()
+    },
+    changeAppAreaTypeBtn(index) {
+      if(index == 0){
+        this.now_app_used_area = 1
+      }else{
+        this.now_app_used_area = 2
+      }
+      this.getAppUsedArea()
     },
     changeApplicationFieldBtn(index) {
       console.log("xxx: " + index);
     },
     changeServiceCellBtn(index) {
-      console.log("应用调用次数分析: " + index);
+      if(index==0){
+        this.now_used_count_day = 7
+      }else{
+        this.now_used_count_day = 30
+      }
+      this.getAppUsedCount()
     },
     changeServeiceApplyCountBtn(index) {
       console.log("应用部署排名分析: " + index);
+      this.now_app_deploy = index+1
+      this.getAppDeployRank()
     },
     changeAppInfoBtn(index) {
       this.appInfoBtnIndex = index;
@@ -553,7 +567,12 @@ export default {
       console.log("应用评价及评分: " + index);
     },
     changeAppTotalChangeBtn(index) {
-      console.log("应用总数变化趋势: " + index);
+      if(index == 0){
+        this.now_app_count = 14
+      }else{
+        this.now_app_count = 30
+      }
+      this.getAppCount()
     }
   }
 };

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

@@ -152,7 +152,6 @@
                     :header="hotSearchHeader"
                     :data="hotSearchData"
                     :padding-left="0"
-                    @sort-change="hotSearchSortChange"
                   ></apass-table>
                 </div>
               </div>
@@ -309,14 +308,14 @@ export default {
       fill: "#e56600"
     },
     sparkline1: {
-      arr: [1, 2, 3, 4, 8, 9, 10, 21],
-      num: 12,
-      up: 15.3
+      num:0,
+      up:0,
+      arr:[]
     },
     sparkline2: {
-      arr: [1, 2, 3, 4, 8, 9, 10, 21],
-      num: 6,
-      up: -19.3
+      num:0,
+      up:0,
+      arr:[]
     },
     text: "服务总数",
     single_data: {
@@ -423,38 +422,7 @@ export default {
     ], // 服务评分
     starlistTotal: 15,
     hotSearchHeader: [], // 热门搜索 表头
-    hotSearchData: [
-      {
-        hotIndex: 1,
-        name: "数据服务",
-        count: 6,
-        increases: 0.28
-      },
-      {
-        hotIndex: 2,
-        name: "消息队列服务",
-        count: 5,
-        increases: 0.15
-      },
-      {
-        hotIndex: 3,
-        name: "按键中心服务",
-        count: 5,
-        increases: 0.03
-      },
-      {
-        hotIndex: 4,
-        name: "案件中心服务",
-        count: 3,
-        increases: -0.08
-      },
-      {
-        hotIndex: 5,
-        name: "数据中心服务",
-        count: 1,
-        increases: -0.18
-      }
-    ], // 热门搜索 数据
+    hotSearchData: [], // 热门搜索 数据
     graph_arr: {
       legend: {
         data: []
@@ -475,6 +443,7 @@ export default {
     this.getServiceRequest();
     this.getServiceOnlineState();
     this.getServiceEstimated();
+    this.getServiceHotSearch();
     this.hotSearchHeader = [
       {
         label: "服务排名",
@@ -499,13 +468,44 @@ export default {
         prop: "increases",
         width: 100,
         sortType: "0", // 0：升序 1：降序
-        sortable: true,
         align: "center"
       }
     ];
     this.getTopologyData();
   },
   methods: {
+    getServiceHotSearch(){
+      this.$api.dataAnalysis.getServiceHotSearch().then(response => {
+        if (response.data.success == 1) {
+          let data = response.data.data
+          this.sparkline1 = {
+            num:data.search_user.count,
+            up:data.trend=='up'?data.search_user.per:data.trend=='down'?0-data.search_user.per:data.search_user.per,
+            arr:data.search_user_trend.seriesData
+          }
+          this.sparkline2 = {
+            num:data.search_user_avg.count,
+            up:data.trend=='up'?data.search_user_avg.per:data.trend=='down'?0-data.search_user_avg.per:data.search_user_avg.per,
+            arr:data.search_user_avg_trend.seriesData
+          }
+          // top5_rank
+          this.hotSearchData = []
+          if(data.top5_rank&&data.top5_rank.length){
+            data.top5_rank.forEach((e,idx) => {
+              this.hotSearchData.push(
+                {
+                  id:e.service_id,
+                  hotIndex: top_rank,
+                  name: e.service_name,
+                  count: e.search_count,
+                  increases: e.trend=='up'?e.search_user.per:e.trend=='down'?0-e.search_user.per:e.search_user.per
+                }
+              )
+            });
+          }
+        }
+      });
+    },
     getServiceOverview() {
       this.$api.dataAnalysis.getServiceOverview().then(response => {
         if (response.data.success == 1) {
@@ -611,10 +611,7 @@ export default {
         });
     },
     detailHotSearch(item) {
-      console.log("查看热搜详情");
-    },
-    hotSearchSortChange(sortInfo) {
-      console.log("服务热门搜索: " + sortInfo);
+      this.$router.push('/fwgl/0/0/servicedetail/'+item.id)
     },
     changeServiceTypeBtn(index) {
       this.left_2_state = index;
@@ -767,7 +764,7 @@ export default {
 }
 .sparkline-text span:nth-of-type(2) {
   font-size: 12px;
-  width: 62px;
+  padding: 0 10px;
   float: right;
   text-align: center;
   line-height: 20px;

src/request/api/data-analysis.js

@@ -34,6 +34,32 @@ const dataAnalysis = {
   getServiceEstimated(params) {
     return axios.get(`/apaas/service/v3/statistics/normal/service/estimated/${params.type == 0 ? 'all' : 'scoremap'}?last_id=${params.last_id}`);
   },
+  getServiceHotSearch() {
+    return axios.get(`/apaas/service/v3/statistics/normal/service/search`);
+  },
+
+  //app
+  getAppOverview(){
+    return axios.get(`/apaas/hubApi/analysis/overview`);
+  },
+  getAppUsedCount(params){
+    return axios.get(`/apaas/hubApi/analysis/deployCount?day=${params.day}`);
+  },
+  getAppType(params){
+    return axios.get(`/apaas/hubApi/analysis/typesAnalysis?style=${params.type}`);
+  },
+  getAppSourceOri(){
+    return axios.get(`/apaas/hubApi/analysis/appSource`);
+  },
+  getAppUsedArea(params){
+    return axios.get(`/apaas/hubApi/analysis/areasAnalysis?style=${params.type}`);
+  },
+  getAppCount(params){
+    return axios.get(`/apaas/hubApi/analysis/numTrend?day=${params.day}`);
+  },
+  getAppDeployRank(params){
+    return axios.get(`/apaas/hubApi/analysis/deployRank?style=${params.type}`);
+  },
 }
 
 export default dataAnalysis;