diff --git a/src/assets/i18n/language-zh.js b/src/assets/i18n/language-zh.js
index 07d07cf162caa4fda0dbfa6e14d5ebd1e6473d99..1e64e6fe8b7aabb34eb1a1a5e58847a1e9f7f7b0 100644
--- a/src/assets/i18n/language-zh.js
+++ b/src/assets/i18n/language-zh.js
@@ -23,8 +23,12 @@ export const lang = {
 
     // data analysis
     data_analysis: "运营管控中心",
-    my_service_data_analysis: "服务分析",
-    my_application_data_analysis: "应用分析",
+    operational_analysis: "运营分析",
+    operation_control: "运行管控",
+    service_data_analysis: "服务分析",
+    application_data_analysis: "应用分析",
+    operation_overview: "运行概况",
+    service_control: "服务管控",
 
     // message
     message: "消息与推送管理",
diff --git a/src/components/e-charts/gkmultiple_circle.vue b/src/components/e-charts/gkmultiple_circle.vue
index 5f9619aaa49b2591cbb96aed524819ff96f463b7..bbdf0e658722c6ddb28d3a4573e966aef28ab4d4 100644
--- a/src/components/e-charts/gkmultiple_circle.vue
+++ b/src/components/e-charts/gkmultiple_circle.vue
@@ -36,7 +36,8 @@ export default {
     data: {
       handler() {
         this.init_yylx_asy(this.data, this.text);
-      }
+      },
+      deep: true,
     }
   },
   computed: {},
diff --git a/src/components/e-charts/graph.vue b/src/components/e-charts/graph.vue
index 1968cad19decd6eb26b070305a01e97d76f610c6..cdfaddcf8f9350480d5582bc8338133e2d3b2fab 100644
--- a/src/components/e-charts/graph.vue
+++ b/src/components/e-charts/graph.vue
@@ -25,8 +25,6 @@ export default {
   methods: {
     graph() {
       let self = this;
-      console.log(this.data.legend.data);
-      console.log(this.data.data);
       return {
         color: ["#274fee", "#ef9433"],
         legend: {
diff --git a/src/components/e-charts/multiple_circle.vue b/src/components/e-charts/multiple_circle.vue
index 59a8c6802d2c297d88494352f6df55a2efdf7bdf..ad2d2d994f939132b149e7667f0e11b235bc4978 100644
--- a/src/components/e-charts/multiple_circle.vue
+++ b/src/components/e-charts/multiple_circle.vue
@@ -48,7 +48,8 @@ export default {
     data: {
       handler() {
         this.init_yylx_asy(this.data, this.text);
-      }
+      },
+      deep: true,
     }
   },
   computed: {},
@@ -125,9 +126,10 @@ export default {
           name: "",
           type: "pie",
           clockWise: false,
-          radius: [65, 68],
-          center: ["50%", "50%"],
+          radius: [60, 63],
+          center: ["50%", "46%"],
           hoverAnimation: false,
+          avoidLabelOverlap: true,
           itemStyle: {
             normal: {
               label: {
@@ -173,9 +175,9 @@ export default {
           subtextStyle: {
             color: "#c9cedd"
           },
-          itemGap: -10, // 主副标题距离
+          itemGap: 0, // 主副标题距离
           left: "center",
-          top: "center"
+          top: "32%"
         },
         color: this.isFwsp ? color2 : color,
         tooltip: {
diff --git a/src/components/e-charts/single_circle.vue b/src/components/e-charts/single_circle.vue
index f2ca709fc041efaff17bc751e133fb1c7ed6093f..59549d4dddf227b2eb4fbea5b4b3d0018c04f0d3 100644
--- a/src/components/e-charts/single_circle.vue
+++ b/src/components/e-charts/single_circle.vue
@@ -13,24 +13,24 @@ export default {
         return {
           num: 0,
           color: "#e15260",
-          text: "敏感"
+          text: "敏感",
         };
-      }
-    }
+      },
+    },
   },
   components: {},
   data() {
     return {
-      health: uuidv1()
+      health: uuidv1(),
     };
   },
   watch: {
     data: {
       handler(val) {
-        console.log(val);
         this.init_health(this.data.num, this.data.color, this.data.text);
-      }
-    }
+      },
+      deep: true,
+    },
   },
   computed: {},
   created() {},
@@ -40,22 +40,22 @@ export default {
   methods: {
     init_health(num, color, text) {
       var options = {
-        color:[color,'#c9cedd'],
+        color: [color, "#c9cedd"],
         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, // 满分
@@ -63,119 +63,124 @@ 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: [
           {
-        type: 'pie',
-        z:5,
-        center:['50%','50%'],
-        radius:['68%','72%'],
-        silent:true,
-        label: {
-            normal: {
-                show: false
+            type: "pie",
+            z: 5,
+            center: ["50%", "50%"],
+            radius: ["68%", "72%"],
+            silent: true,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
             },
-            emphasis: {
-                show: false
-            }
-        },
-        labelLine: {
-            normal: {
-                show: false
+            labelLine: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
             },
-            emphasis: {
-                show: false
-            }
-        },
-        tooltip: {
-            show: false
-        },
-        data:[{
-          name:'',
-          value:num
-        },{
-          name:'',
-          value:100 - num
-        }]
-    },
+            tooltip: {
+              show: false,
+            },
+            data: [
+              {
+                name: "",
+                value: num,
+              },
+              {
+                name: "",
+                value: 100 - num,
+              },
+            ],
+          },
           {
-        type:'pie',
-        z:4,
-        center:['50%','50%'],
-        radius:['60%','80%'],
-        hoverAnimation:false,
-        avoidLabelOverlap: false,
-        label: {
-            normal: {
-                show: false
+            type: "pie",
+            z: 4,
+            center: ["50%", "50%"],
+            radius: ["60%", "80%"],
+            hoverAnimation: false,
+            avoidLabelOverlap: false,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
             },
-            emphasis: {
-                show: false
-            }
-        },
-        labelLine: {
-            normal: {
-                show: false
+            labelLine: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+            itemStyle: {
+              normal: {
+                color: "#f6f7fc",
+              },
             },
             emphasis: {
-                show: false
-            }
-        },
-        tooltip: {
-            show: false
-        },
-        itemStyle: {
-            normal: {
-                color:'#f6f7fc'
-            }
-        },
-        emphasis:{
-            show:false,
-            itemStyle:{
-                color:'#f6f7fc'
-            }
-        },
-        data: [{
-            value: 1,
-        }],
-    }
-        ]
+              show: false,
+              itemStyle: {
+                color: "#f6f7fc",
+              },
+            },
+            data: [
+              {
+                value: 1,
+              },
+            ],
+          },
+        ],
       };
       window[this.health] = echarts.init(document.getElementById(this.health));
       window[this.health].setOption(options, true);
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/components/menu.vue b/src/components/menu.vue
index fdf75df8581f573d8810262959a6dab293a2d5d3..fa90efb3066e65233e9e7b1f5d51d8eebe25c209 100644
--- a/src/components/menu.vue
+++ b/src/components/menu.vue
@@ -186,7 +186,6 @@ export default {
     },
     navAction(path) {
       this.now_menu = path;
-      window.sessionStorage.setItem("menuVisitUrl", path);
       this.$router.push(path);
     },
     gotoChildPage(v, parent) {
@@ -200,7 +199,6 @@ export default {
           this.$router.push(v.visit_url);
         }
         this.now_menu = parent;
-        window.sessionStorage.setItem("menuVisitUrl", parent);
       }
     },
     getList() {
@@ -218,8 +216,7 @@ export default {
       });
     },
     getMenuIndex() {
-      let visit_url = window.sessionStorage.getItem("menuVisitUrl");
-      this.now_menu = visit_url ? visit_url : "";
+      this.now_menu = this.$route.path;
     },
     getNowMenu() {
       this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
@@ -242,7 +239,6 @@ export default {
           } else {
           }
           this.menu_arr = arr;
-          console.log(this.user_arr);
           this.getMenuIndex();
         }
       });
diff --git a/src/components/shop-cloud/shop-cloud.vue b/src/components/shop-cloud/shop-cloud.vue
index 92178b419df176267e5d2ee6eca14d7306fd1631..eecc30616695a9d865b2a0eebd32a9d4db2facde 100644
--- a/src/components/shop-cloud/shop-cloud.vue
+++ b/src/components/shop-cloud/shop-cloud.vue
@@ -7,19 +7,19 @@
     <block-radius>
       <el-form ref="form" :inline="true" :rules="ruleBasis" :model="form" class="form_block">
         <el-row>
-          <el-col :span="11">
+          <el-col :span="12">
             <el-form-item class="form_item">
-              <div class="form_item_title">申请部门：</div>
-              <el-input v-model="form.department_name" :disabled="true" placeholder="请输入申请部门"></el-input>
+              <div class="form_item_title">申请组织：</div>
+              <el-input v-model="form.department_name" :disabled="true" placeholder="请输入申请组织"></el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="11" :offset="1">
+          <el-col :span="12">
             <el-form-item class="form_item" prop="link_man">
               <div class="form_item_title">部门联系人：</div>
               <el-input v-model="form.link_man" placeholder="请输入联系人姓名"></el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="11">
+          <el-col :span="12">
             <el-form-item class="form_item" prop="phone">
               <div class="form_item_title">联系电话：</div>
               <el-input v-model="form.phone" placeholder="请输入联系人电话"></el-input>
@@ -32,25 +32,25 @@
       <el-tabs v-model="activeName" class="cloud_form" @tab-click="tabClick">
         <el-tab-pane label="申请新的工作区域" name="0">
           <el-row>
-            <el-col :span="12">
+            <el-col :span="24">
               <el-form ref="formNew" :model="formNew" :rules="ruleNew">
                 <el-row>
                   <el-col :span="24">
                     <div class="form_title">基本信息</div>
                   </el-col>
-                  <el-col :span="22">
+                  <el-col :span="12">
                     <el-form-item prop="namespace" class="form_item">
                       <div class="form_item_title">工作区域名称：</div>
                       <el-input v-model="formNew.namespace" placeholder="请输入工作区域英文名称"></el-input>
                     </el-form-item>
                   </el-col>
-                  <el-col :span="22">
+                  <el-col :span="12">
                     <el-form-item prop="workplace" class="form_item">
                       <div class="form_item_title">中文名称：</div>
                       <el-input v-model="formNew.workplace" placeholder="请输入工作区域中文名称"></el-input>
                     </el-form-item>
                   </el-col>
-                  <el-col :span="22">
+                  <el-col :span="12">
                     <el-form-item prop="workplacedesc" class="form_item">
                       <div class="form_item_title">描述信息：</div>
                       <el-input
@@ -63,7 +63,7 @@
                   <el-col :span="24">
                     <div class="form_title">工作区域申请规格</div>
                   </el-col>
-                  <el-col :span="22">
+                  <el-col :span="6">
                     <el-form-item prop="cpu" class="form_item input_has_right">
                       <div class="form_item_title">CPU：</div>
                       <el-select v-model="formNew.cpu" placeholder="请选择CPU使用量">
@@ -77,7 +77,7 @@
                       <div class="input_right input_right_top">核</div>
                     </el-form-item>
                   </el-col>
-                  <el-col :span="22">
+                  <el-col :span="6">
                     <el-form-item prop="memory" class="form_item input_has_right">
                       <div class="form_item_title">内存：</div>
                       <el-select
@@ -95,7 +95,7 @@
                       <div class="input_right input_right_top">GB</div>
                     </el-form-item>
                   </el-col>
-                  <el-col :span="22">
+                  <el-col :span="6">
                     <el-form-item prop="containerGroup" class="form_item input_has_right">
                       <div class="form_item_title">容器组：</div>
                       <el-input-number
@@ -108,20 +108,10 @@
                       <div class="input_right">个</div>
                     </el-form-item>
                   </el-col>
-                  <el-col :span="22">
-                    <el-form-item class="form_item">
-                      <div class="form_item_title">数据盘（可选）：</div>
-                      <!-- <el-select v-model="formNew.store_type" placeholder="请选择数据盘类型">
-                        <el-option
-                          v-for="item in options_store_type"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        ></el-option>
-                      </el-select>-->
-                    </el-form-item>
+                  <el-col :span="24">
+                    <div class="form_item_title">数据盘（可选）：</div>
                   </el-col>
-                  <el-col :span="11">
+                  <el-col :span="6">
                     <el-form-item class="form_item input_has_right">
                       <el-input-number
                         v-model="formNew.dataDisk"
@@ -133,7 +123,7 @@
                       <div class="input_right">块</div>
                     </el-form-item>
                   </el-col>
-                  <el-col :span="11">
+                  <el-col :span="6">
                     <el-form-item class="form_item input_has_right">
                       <el-input-number
                         v-model="formNew.perDataDisk"
@@ -145,14 +135,16 @@
                       <div class="input_right">GB</div>
                     </el-form-item>
                   </el-col>
-
                   <el-col :span="24">
                     <div class="form_title">单个容器组规格</div>
                   </el-col>
-                  <el-col :span="24">
+                  <el-col :span="12">
                     <div class="form_item_title">CPU：</div>
                   </el-col>
-                  <el-col :span="11">
+                  <el-col :span="12">
+                    <div class="form_item_title">内存：</div>
+                  </el-col>
+                  <el-col :span="6">
                     <el-form-item prop="perCPUs" class="form_item input_has_left_right">
                       <div class="input_left">最高</div>
                       <el-input-number
@@ -165,7 +157,7 @@
                       <div class="input_right">核</div>
                     </el-form-item>
                   </el-col>
-                  <el-col :span="11">
+                  <el-col :span="6">
                     <el-form-item prop="perCPU" class="form_item input_has_left_right">
                       <div class="input_left">默认</div>
                       <el-input-number
@@ -178,10 +170,7 @@
                       <div class="input_right">核</div>
                     </el-form-item>
                   </el-col>
-                  <el-col :span="24">
-                    <div class="form_item_title">内存：</div>
-                  </el-col>
-                  <el-col :span="11">
+                  <el-col :span="6">
                     <el-form-item prop="perRAMs" class="form_item input_has_left_right">
                       <div class="input_left">最高</div>
                       <el-input-number
@@ -194,7 +183,7 @@
                       <div class="input_right">GB</div>
                     </el-form-item>
                   </el-col>
-                  <el-col :span="11">
+                  <el-col :span="6">
                     <el-form-item prop="perRAM" class="form_item input_has_left_right">
                       <div class="input_left">默认</div>
                       <el-input-number
@@ -210,7 +199,7 @@
                   <el-col :span="24">
                     <div class="form_title">其他信息</div>
                   </el-col>
-                  <el-col :span="22">
+                  <el-col :span="12">
                     <el-form-item prop="appDuration" class="form_item input_has_right_select">
                       <div class="form_item_title">申请时长：</div>
                       <el-input-number
@@ -255,7 +244,7 @@
         </el-tab-pane>
         <el-tab-pane label="调整现有工作区域" name="1">
           <el-row>
-            <el-col :span="11">
+            <el-col :span="12">
               <div class="select_title">选择要进行调整的工作区域：</div>
               <div class="form_item">
                 <el-select v-model="workSpace" @change="getForm" placeholder="请选择">
@@ -271,7 +260,7 @@
           </el-row>
           <div v-show="formShow">
             <el-row>
-              <el-col :span="12">
+              <el-col :span="24">
                 <el-form ref="formOld" :model="formOld" :rules="ruleOld">
                   <el-row>
                     <el-col :span="24">
@@ -308,7 +297,7 @@
                         </div>
                       </div>
                     </el-col>
-                    <el-col :span="22">
+                    <el-col :span="6">
                       <el-form-item prop="cpu" class="form_item input_has_right">
                         <div class="form_item_title">申请CPU调整为：</div>
                         <el-select v-model="formOld.cpu" placeholder="请选择CPU使用量">
@@ -322,7 +311,7 @@
                         <div class="input_right input_right_top">核</div>
                       </el-form-item>
                     </el-col>
-                    <el-col :span="22">
+                    <el-col :span="6">
                       <el-form-item prop="memory" class="form_item input_has_right">
                         <div class="form_item_title">申请内存调整为：</div>
                         <el-select
@@ -340,7 +329,7 @@
                         <div class="input_right input_right_top">GB</div>
                       </el-form-item>
                     </el-col>
-                    <el-col :span="22">
+                    <el-col :span="6">
                       <el-form-item prop="containerGroup" class="form_item input_has_right">
                         <div class="form_item_title">申请容器组调整为：</div>
                         <el-input-number
@@ -353,7 +342,7 @@
                         <div class="input_right">个</div>
                       </el-form-item>
                     </el-col>
-                    <el-col :span="22" v-if="dataDiskList.length != 0">
+                    <el-col :span="12" v-if="dataDiskList.length != 0">
                       <el-form-item class="form_item input_has_right">
                         <div class="form_item_title">调整数据盘：</div>
                         <table-um
@@ -366,7 +355,7 @@
                         ></table-um>
                       </el-form-item>
                     </el-col>
-                    <el-col :span="22">
+                    <el-col :span="24">
                       <el-form-item class="form_item">
                         <div class="form_item_title">增加数据盘：</div>
                         <!-- <el-select v-model="formOld.store_type" placeholder="请选择数据盘类型">
@@ -379,7 +368,7 @@
                         </el-select>-->
                       </el-form-item>
                     </el-col>
-                    <el-col :span="11">
+                    <el-col :span="6">
                       <el-form-item class="form_item input_has_right">
                         <el-input-number
                           v-model="formOld.dataDisk"
@@ -391,7 +380,7 @@
                         <div class="input_right">块</div>
                       </el-form-item>
                     </el-col>
-                    <el-col :span="11">
+                    <el-col :span="6">
                       <el-form-item class="form_item input_has_right">
                         <el-input-number
                           v-model="formOld.perDataDisk"
@@ -439,10 +428,13 @@
                         </div>
                       </div>
                     </el-col>
-                    <el-col :span="24">
+                    <el-col :span="12">
                       <div class="form_item_title">CPU：</div>
                     </el-col>
-                    <el-col :span="11">
+                    <el-col :span="12">
+                      <div class="form_item_title">内存：</div>
+                    </el-col>
+                    <el-col :span="6">
                       <el-form-item prop="perCPUs" class="form_item input_has_left_right">
                         <div class="input_left">最高</div>
                         <el-input-number
@@ -455,7 +447,7 @@
                         <div class="input_right">核</div>
                       </el-form-item>
                     </el-col>
-                    <el-col :span="11">
+                    <el-col :span="6">
                       <el-form-item prop="perCPU" class="form_item input_has_left_right">
                         <div class="input_left">默认</div>
                         <el-input-number
@@ -468,10 +460,7 @@
                         <div class="input_right">核</div>
                       </el-form-item>
                     </el-col>
-                    <el-col :span="24">
-                      <div class="form_item_title">内存：</div>
-                    </el-col>
-                    <el-col :span="11">
+                    <el-col :span="6">
                       <el-form-item prop="perRAMs" class="form_item input_has_left_right">
                         <div class="input_left">最高</div>
                         <el-input-number
@@ -484,7 +473,7 @@
                         <div class="input_right">GB</div>
                       </el-form-item>
                     </el-col>
-                    <el-col :span="11">
+                    <el-col :span="6">
                       <el-form-item prop="perRAM" class="form_item input_has_left_right">
                         <div class="input_left">默认</div>
                         <el-input-number
@@ -519,7 +508,7 @@
                         </div>
                       </el-col>
                     </el-col>
-                    <el-col :span="22">
+                    <el-col :span="12">
                       <el-form-item class="form_item input_has_right_select">
                         <div class="form_item_title">申请续期：</div>
                         <el-input-number
@@ -965,9 +954,9 @@ export default {
       ],
       formShow: false,
       specArr: [
-        { title: "CPU", val: "4", src: "ic_CPU" },
-        { title: "内存", val: "4", src: "ic_neicun" },
-        { title: "容器", val: "4", src: "ic_rongqi" },
+        { title: "CPU", val: "0", src: "ic_CPU" },
+        { title: "内存", val: "0", src: "ic_neicun" },
+        { title: "容器", val: "0", src: "ic_rongqi" },
       ],
       rqzArr: [
         { title: "CPU", max: "4", default: "2", src: "ic_CPU" },
diff --git a/src/components/work-flow/super-flow.vue b/src/components/work-flow/super-flow.vue
index 3389d19784cdfe0a56197acdfdf777e52d507238..7bbb99b0eef34113c46d3d3fa1bbe7a1c66fce8a 100644
--- a/src/components/work-flow/super-flow.vue
+++ b/src/components/work-flow/super-flow.vue
@@ -743,7 +743,6 @@ export default {
       }
     },
     nodeItemMouseDown(evt, info) {
-      console.log("dwad");
       const { clientX, clientY, currentTarget } = evt;
       const { top, left } = evt.currentTarget.getBoundingClientRect();
       const conf = this.dragConf;
diff --git a/src/pages/data-analysis/data-analysis.vue b/src/pages/data-analysis/data-analysis.vue
index 7fa182e83ac36ce16a3dc68a59012ac2b0172a16..63491a54567eb54329b8bb440d7eb58f6668bfa4 100644
--- a/src/pages/data-analysis/data-analysis.vue
+++ b/src/pages/data-analysis/data-analysis.vue
@@ -1,19 +1,20 @@
 <template>
   <div class="fwgl_container">
     <sideNavBar
-      v-if="is_admin == 3 || is_admin == 4 || is_admin == 1"
+      v-if="is_admin == 3 || is_admin == 4"
       title="运营管控中心"
       imgSrc="tool_fuwu"
       :nav-list="navList"
       :title-path="navList[0] && navList[0].path"
     ></sideNavBar>
     <sideNavBarClass
-      v-else-if="is_admin == 2"
+      v-else-if="is_admin == 1 || is_admin == 2"
       title="运营管控中心"
       imgSrc="tool_fuwu"
       :nav-list="navList"
       :title-path="navList[0] && navList[0].path"
     ></sideNavBarClass>
+    <div v-else class="skeleton"></div>
     <div class="main_container">
       <router-view :key="'type_' + $route.params.type"></router-view>
     </div>
@@ -71,12 +72,32 @@ export default {
     ],
     userNav2: [
       {
-        name: "服务分析",
+        name: "运营分析",
         path: `/data_analysis/super_service`,
+        child: [
+          {
+            name: "服务分析",
+            path: `/data_analysis/super_service`,
+          },
+          {
+            name: "应用分析",
+            path: `/data_analysis/super_application`,
+          },
+        ],
       },
       {
-        name: "应用分析",
-        path: `/data_analysis/super_application`,
+        name: "运行管控",
+        path: `/data_analysis/1`,
+        child: [
+          {
+            name: "运行概况",
+            path: `/data_analysis/1`,
+          },
+          {
+            name: "服务管控",
+            path: `/data_analysis/1`,
+          },
+        ],
       },
     ],
     navList: [],
@@ -125,4 +146,8 @@ export default {
   background-color: #f6f7fb;
   overflow: auto;
 }
+.skeleton {
+  width: 180px;
+  background-color: #0d1847;
+}
 </style>
diff --git a/src/pages/data-analysis/my-application.vue b/src/pages/data-analysis/my-application.vue
index c29ebea12e5972a4f414f20beb6fc682b82c7343..6c63be39455bd49b4922ac3955609e2e49ccdcb2 100644
--- a/src/pages/data-analysis/my-application.vue
+++ b/src/pages/data-analysis/my-application.vue
@@ -2,7 +2,7 @@
   <div>
     <el-breadcrumb separator="/" class="bread_crumb1">
       <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.data_analysis") }}</el-breadcrumb-item>
-      <el-breadcrumb-item>{{ $t("lang.my_application_data_analysis") }}</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ $t("lang.application_data_analysis") }}</el-breadcrumb-item>
     </el-breadcrumb>
     <el-row class="in_analysis">
       <!-- 可横向铺满 -->
diff --git a/src/pages/data-analysis/my-service.vue b/src/pages/data-analysis/my-service.vue
index 0765e66081c66d5a36943514687c7f6678917c79..4a5c637dfd1bdd1df0680d965ff963c1fabae237 100644
--- a/src/pages/data-analysis/my-service.vue
+++ b/src/pages/data-analysis/my-service.vue
@@ -8,7 +8,7 @@
       </el-breadcrumb-item>
       <el-breadcrumb-item>
         {{
-        $t("lang.my_service_data_analysis")
+        $t("lang.service_data_analysis")
         }}
       </el-breadcrumb-item>
     </el-breadcrumb>
@@ -71,7 +71,7 @@
               @changeButton="changeApplicationFieldBtn"
               class="block"
             >
-              <BarChart :data="bar_data" />
+              <BarChart :x_router="30" :data="bar_data" />
             </block-radius>
           </el-col>
         </el-row>
@@ -635,6 +635,7 @@ export default {
           }
         });
     },
+    getServiceTransfer() {},
     detailHotSearch(item) {
       this.$router.push("/fwgl/0/0/servicedetail/" + item.id);
     },
@@ -676,7 +677,7 @@ export default {
       if (index == 0) {
         this.getServiceHealth();
       } else {
-        this.a();
+        this.getServiceTransfer();
       }
     },
   },
diff --git a/src/pages/data-analysis/org-application.vue b/src/pages/data-analysis/org-application.vue
index b60948f3fa4ff67ddfcb89b45a13f53565a70557..cb9c90092271b84a1d4bbf842ad56b2b2763e3a1 100644
--- a/src/pages/data-analysis/org-application.vue
+++ b/src/pages/data-analysis/org-application.vue
@@ -2,7 +2,12 @@
   <div>
     <el-breadcrumb separator="/" class="bread_crumb1">
       <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.data_analysis") }}</el-breadcrumb-item>
-      <el-breadcrumb-item>{{ $t("lang.my_application_data_analysis") }}</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/data_analysis/org_service' }">
+        {{
+        $t("lang.operational_analysis")
+        }}
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>{{ $t("lang.application_data_analysis") }}</el-breadcrumb-item>
     </el-breadcrumb>
     <el-row class="in_analysis">
       <!-- 可横向铺满 -->
@@ -254,7 +259,7 @@
           :show_header="true"
           title="应用审批状态分析"
           class="block"
-          :buttons_arr="['申请状态', '待审批']"
+          :buttons_arr="['申请状态', '申请类型']"
           @changeButton="changeAppSpBtn"
         >
           <multiple-circle
@@ -293,16 +298,16 @@ export default {
     BarChart,
     ApassTable,
     Graph,
-    WaterPolo
+    WaterPolo,
   },
   data: () => ({
     isyysp: true,
     water_polo: [64, 36],
     overview: {
-      month_chain: 12,
-      week_chain: 20,
-      total: 1324,
-      day_count: 21
+      month_chain: 0,
+      week_chain: 0,
+      total: 0,
+      day_count: 0,
     },
     now_used_count_day: 7,
     now_app_type: 1,
@@ -310,458 +315,216 @@ export default {
     now_app_count: 14,
     now_app_deploy: 1,
     now_app_evalute: 1,
+    now_app_approval: 0,
+    now_app_approval_state: 0,
     mult_data: [
-      { name: "基础工具", value: 22 },
-      { name: "通用应用", value: 12 },
-      { name: "业务应用", value: 10 }
+      { name: "基础工具", value: 0 },
+      { name: "通用应用", value: 0 },
+      { name: "业务应用", value: 0 },
     ],
     text: "应用总数",
     spIndicatorStyles1: false,
     spRefLineStyles3: {
       stroke: "#d14",
       strokeOpacity: 0,
-      strokeDasharray: "2, 2"
+      strokeDasharray: "2, 2",
     },
     spCurveStyles2: {
       stroke: "#274fee",
-      fill: "#274fee"
+      fill: "#274fee",
     },
     Yysp_data: [
-      { name: "已审批", value: 15 },
-      { name: "待审批", value: 45 }
+      { name: "已审批", value: 0 },
+      { name: "待审批", value: 0 },
     ],
     Yysp_text: "应用审批",
     serviceSpData: {
-      xAxisData: [
-        "07-01",
-        "07-02",
-        "07-03",
-        "07-04",
-        "07-05",
-        "07-06",
-        "07-07",
-        "07-08",
-        "07-09",
-        "07-10",
-        "07-11",
-        "07-12",
-        "07-13",
-        "07-14"
-      ],
-      seriesData: [
-        {
-          name: "已审批",
-          data: [
-            300,
-            400,
-            350,
-            280,
-            480,
-            520,
-            500,
-            460,
-            300,
-            400,
-            350,
-            280,
-            480,
-            520,
-            500,
-            460
-          ]
-        },
-        {
-          name: "未审批",
-          data: [
-            300,
-            350,
-            400,
-            280,
-            320,
-            450,
-            400,
-            350,
-            300,
-            350,
-            400,
-            280,
-            320,
-            450,
-            400,
-            350
-          ]
-        }
-      ]
+      xAxisData: [],
+      seriesData: [],
     },
     spCurveStyles3: {
       stroke: "#e56600",
-      fill: "#e56600"
+      fill: "#e56600",
     },
     sparkline1: {
-      arr: [1, 2, 3, 4, 8, 9, 10, 21],
-      num: 21,
-      up: 15.3
+      arr: [],
+      num: 0,
+      up: 0,
     },
     sparkline2: {
-      arr: [1, 2, 3, 4, 8, 9, 10, 21],
-      num: 18,
-      up: -19.3
+      arr: [],
+      num: 0,
+      up: 0,
     },
     single_data: {
-      num: 54,
+      num: 0,
       color: "#274fee",
-      text: "平台应用"
+      text: "平台应用",
     },
     single_data1: {
-      num: 56,
+      num: 0,
       color: "#e56600",
-      text: "开发者应用"
+      text: "开发者应用",
     },
     line_data: {
-      xAxisData: [
-        "07-01",
-        "07-02",
-        "07-03",
-        "07-04",
-        "07-05",
-        "07-06",
-        "07-07",
-        "07-08",
-        "07-09",
-        "07-10",
-        "07-11",
-        "07-12",
-        "07-13",
-        "07-14"
-      ],
-      seriesData: [
-        {
-          name: "开发者应用",
-          data: [
-            300,
-            200,
-            150,
-            280,
-            480,
-            520,
-            500,
-            222,
-            300,
-            400,
-            350,
-            280,
-            480,
-            520,
-            500,
-            222
-          ]
-        },
-        {
-          name: "平台应用",
-          data: [
-            300,
-            400,
-            350,
-            280,
-            480,
-            520,
-            500,
-            222,
-            100,
-            200,
-            350,
-            280,
-            260,
-            320,
-            500,
-            222
-          ]
-        },
-        {
-          name: "未上架",
-          data: [
-            300,
-            350,
-            366,
-            280,
-            320,
-            450,
-            366,
-            350,
-            300,
-            350,
-            366,
-            280,
-            320,
-            450,
-            366,
-            350
-          ]
-        }
-      ]
+      xAxisData: [],
+      seriesData: [],
     },
     bar_data_org: {
-      legendData: [
-        "省公安厅",
-        "省发改委",
-        "贵州省公安厅",
-        "贵州省发改委",
-        "贵州省公安厅"
-      ],
-      seriesData: [322, 454, 266, 399, 222, 167]
+      legendData: [],
+      seriesData: [],
     },
     bar_data_area: {
-      legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
-      seriesData: [322, 454, 566, 399, 222, 167]
+      legendData: [],
+      seriesData: [],
     },
     graph_arr: {
       legend: {
-        data: ["被调用次数", "调用次数"]
+        data: ["被调用次数", "调用次数"],
       },
-      data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
+      data: [],
       series: [
-        { name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
-        { name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
-      ]
+        { name: "被调用次数", data: [] },
+        { name: "调用次数", data: [] },
+      ],
     },
     toplistData: [
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "postgresql V11.1",
-        request_count: 30
+        request_count: 30,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "钉钉 V1.0",
-        request_count: 22
+        request_count: 22,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "易智瑞 V11.3",
-        request_count: 21
+        request_count: 21,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "CAS单点登录 V1.0",
-        request_count: 18
+        request_count: 18,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "postgresql V11.1",
-        request_count: 15
+        request_count: 15,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "CAS单点登录 V1.0",
-        request_count: 12
+        request_count: 12,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "postgresql V11.1",
-        request_count: 10
+        request_count: 10,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "CAS单点登录 V1.0",
-        request_count: 8
+        request_count: 8,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "postgresql V11.1",
-        request_count: 6
+        request_count: 6,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "CAS单点登录 V1.0",
-        request_count: 6
+        request_count: 6,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "postgresql V11.1",
-        request_count: 4
+        request_count: 4,
       },
       {
         cover:
           "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
         service_name: "CAS单点登录 V1.0",
-        request_count: 2
-      }
+        request_count: 2,
+      },
     ], // 应用部署排名分析
     toplistTargetValue: 150, // 应用部署排名分析 目标值
     appInfoBtnIndex: 0,
-    commentlistData: [
-      {
-        picture_path:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        user_name: "孤独的狼",
-        add_time: "2020-08-01 19:00:00",
-        score: 4,
-        message: "这个应用非常实用，可以应用到多个业务领域！"
-      },
-      {
-        picture_path:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        user_name: "大锤",
-        add_time: "2020-08-01 19:00:00",
-        score: 4,
-        message: "这个应用非常实用，可以应用到多个业务领域！"
-      },
-      {
-        picture_path:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        user_name: "阿水",
-        add_time: "2020-08-01 19:00:00",
-        score: 3,
-        message: "这个应用非常实用，可以应用到多个业务领域！"
-      },
-      {
-        picture_path:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        user_name: "孤独的狼",
-        add_time: "2020-08-01 19:00:00",
-        score: 4,
-        message: "这个应用非常实用，可以应用到多个业务领域！"
-      },
-      {
-        picture_path:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        user_name: "孤独的狼",
-        add_time: "2020-08-01 19:00:00",
-        score: 4,
-        message: "这个应用非常实用，可以应用到多个业务领域！"
-      }
-    ], // 应用评价
-    starlistData: [
-      {
-        star: 5,
-        count: 5,
-        unit: "个"
-      },
-      {
-        star: 4,
-        count: 4,
-        unit: "个"
-      },
-      {
-        star: 3,
-        count: 3,
-        unit: "个"
-      },
-      {
-        star: 2,
-        count: 2,
-        unit: "个"
-      },
-      {
-        star: 1,
-        count: 1,
-        unit: "个"
-      }
-    ], // 应用评分
+    commentlistData: [], // 应用评价
+    starlistData: [], // 应用评分
     starlistTotal: 10,
     hotSearchHeader: [], // 热门搜索 表头
-    hotSearchData: [
-      {
-        id: 1,
-        hotIndex: 1,
-        name: "地图视频融合服务",
-        count: 9964,
-        increases: 568
-      },
-      {
-        id: 1,
-        hotIndex: 2,
-        name: "消息队列服务",
-        count: 8964,
-        increases: 528
-      },
-      {
-        id: 1,
-        hotIndex: 3,
-        name: "即时通讯服务",
-        count: 7864,
-        increases: 89
-      },
-      {
-        id: 1,
-        hotIndex: 4,
-        name: "即时通讯服务这里最多显示十五字地图视频融合服务",
-        count: 4964,
-        increases: -8
-      },
-      {
-        id: 1,
-        hotIndex: 5,
-        name: "即时通讯服务这里最多显示十五字地图视频融合服务",
-        count: 3364,
-        increases: -18
-      }
-    ] // 热门搜索 数据
+    hotSearchData: [], // 热门搜索 数据
   }),
   mounted() {
-    // this.getAppOverview();
-    // this.getAppUsedCount();
-    // this.getAppType();
-    // this.getAppSourceOri();
-    // this.getAppUsedArea();
-    // this.getAppCount();
-    // this.getAppDeployRank();
-    // this.getAppEvaluate();
-    // this.getAppOnlineState();
-    // this.getAppHot();
+    this.getAppOverview();
+    this.getAppUsedCount();
+    this.getAppType();
+    this.getAppSourceOri();
+    this.getAppUsedArea();
+    this.getAppCount();
+    this.getAppDeployRank();
+    this.getAppEvaluate();
+    this.getAppOnlineState();
+    this.getAppHot();
+    this.getAppApproval();
+    this.getAppApprovalState();
     this.hotSearchHeader = [
       {
         label: "排名",
         type: "hot-index",
         width: 100,
-        align: "center"
+        align: "center",
       },
       {
         label: "应用名称",
         prop: "name",
         type: "button",
-        callback: this.detailHotSearch
+        callback: this.detailHotSearch,
       },
       {
         label: "搜索次数",
         prop: "count",
         width: 100,
-        align: "center"
+        align: "center",
       },
       {
         label: "日涨幅",
         prop: "increases",
         width: 100,
         sortType: "0", // 0：升序 1：降序
-        align: "center"
-      }
+        align: "center",
+      },
     ];
   },
   methods: {
     getAppOverview() {
-      this.$api.dataAnalysis.getAppOverview().then(response => {
+      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
+            day_count: data.ave_deploy_count,
           };
           this.water_polo = [
             parseFloat(data.developable_ratio),
-            parseFloat(data.un_developable_ratio)
+            parseFloat(data.un_developable_ratio),
           ];
         }
       });
@@ -769,7 +532,7 @@ export default {
     getAppUsedCount() {
       this.$api.dataAnalysis
         .getAppUsedCount({ day: this.now_used_count_day })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             let data = response.data.data;
             this.graph_arr = data;
@@ -779,7 +542,7 @@ export default {
     getAppType() {
       this.$api.dataAnalysis
         .getAppType({ type: this.now_app_type })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             let data = response.data.data;
             this.mult_data = data.series[0].data;
@@ -787,12 +550,12 @@ export default {
         });
     },
     getAppSourceOri() {
-      this.$api.dataAnalysis.getAppSourceOri().then(response => {
+      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
+            seriesData: data.series[0].data,
           };
         }
       });
@@ -800,12 +563,12 @@ export default {
     getAppUsedArea() {
       this.$api.dataAnalysis
         .getAppUsedArea({ type: this.now_app_used_area })
-        .then(response => {
+        .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
+              seriesData: data.series[0].data,
             };
           }
         });
@@ -813,12 +576,12 @@ export default {
     getAppCount() {
       this.$api.dataAnalysis
         .getAppCount({ day: this.now_app_count })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             let data = response.data.data;
             this.line_data = {
               xAxisData: data.data,
-              seriesData: data.series
+              seriesData: data.series,
             };
           }
         });
@@ -826,22 +589,22 @@ export default {
     getAppDeployRank() {
       this.$api.dataAnalysis
         .getAppDeployRank({ type: this.now_app_deploy })
-        .then(response => {
+        .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 => {
+              data.forEach((e) => {
                 this.toplistData.push({
                   service_name: e.name,
                   request_count: e.num,
                   cover: e.logo,
                   service_id: {
                     id: e.app_id,
-                    source: e.source
+                    source: e.source,
                   },
-                  data_service_type1: 124
+                  data_service_type1: 124,
                 });
               });
             }
@@ -851,19 +614,19 @@ export default {
     getAppEvaluate() {
       this.$api.dataAnalysis
         .getAppEvaluate({ type: this.now_app_evalute })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             let data = response.data.data;
             if (this.now_app_evalute == 1) {
               this.commentlistData = [];
               if (data && data.length) {
-                data.forEach(e => {
+                data.forEach((e) => {
                   this.commentlistData.push({
                     add_time: e.add_time,
                     message: e.content,
                     picture_path: e.picture_path,
                     score: e.score,
-                    user_name: e.picture_path
+                    user_name: e.picture_path,
                   });
                 });
               }
@@ -872,11 +635,11 @@ export default {
               this.starlistData = [];
               var temp = [];
               if (data && data.length) {
-                data.forEach(e => {
+                data.forEach((e) => {
                   temp.push(e.num);
                   this.starlistData.push({
                     star: e.name,
-                    count: e.num
+                    count: e.num,
                   });
                 });
                 this.starlistTotal = Math.max(...temp);
@@ -886,24 +649,24 @@ export default {
         });
     },
     getAppOnlineState() {
-      this.$api.dataAnalysis.getAppOnlineState().then(response => {
+      this.$api.dataAnalysis.getAppOnlineState().then((response) => {
         if (response.data.success == 1) {
           let data = response.data.data;
           this.single_data = {
             num: data.platform,
             color: "#274fee",
-            text: "平台应用"
+            text: "平台应用",
           };
           this.single_data1 = {
             num: data.develop,
             color: "#e56600",
-            text: "开发者应用"
+            text: "开发者应用",
           };
         }
       });
     },
     getAppHot() {
-      this.$api.dataAnalysis.getAppHot().then(response => {
+      this.$api.dataAnalysis.getAppHot().then((response) => {
         if (response.data.success == 1) {
           let data = response.data.data;
           let user = data.user || {};
@@ -912,14 +675,14 @@ export default {
           this.sparkline1 = {
             arr: user.line_chart ? user.line_chart.series[0].data : [],
             num: user.today_num ? user.today_num : 0,
-            up: user.ratio ? parseFloat(user.ratio) : 0
+            up: user.ratio ? parseFloat(user.ratio) : 0,
           };
           this.sparkline2 = {
             arr: ave_search.line_chart
               ? ave_search.line_chart.series[0].data
               : [],
             num: ave_search.today_num ? ave_search.today_num : 0,
-            up: ave_search.ratio ? parseFloat(ave_search.ratio) : 0
+            up: ave_search.ratio ? parseFloat(ave_search.ratio) : 0,
           };
           this.hotSearchData = [];
           search_app.forEach((e, idx) => {
@@ -929,12 +692,38 @@ export default {
               hotIndex: idx + 1,
               name: e.name,
               count: e.num,
-              increases: parseFloat(e.ratio)
+              increases: parseFloat(e.ratio),
             });
           });
         }
       });
     },
+    getAppApproval() {
+      this.$api.dataAnalysis
+        .getAppApproval({ day: this.now_app_approval })
+        .then((response) => {
+          if (response.data.success == 1) {
+            let data = response.data.data;
+            this.serviceSpData = {
+              xAxisData: data.data,
+              seriesData: data.series,
+            };
+          }
+        });
+    },
+    getAppApprovalState() {
+      this.$api.dataAnalysis
+        .getAppApproval({ day: this.now_app_approval_state })
+        .then((response) => {
+          if (response.data.success == 1) {
+            let data = response.data.data;
+            this.serviceSpData = {
+              xAxisData: data.data,
+              seriesData: data.series,
+            };
+          }
+        });
+    },
     detailHotSearch(item) {
       console.log("查看热搜详情");
       this.$router.push(`/yygl/0/0/detail/${item.id}?source=${item.source}`);
@@ -942,769 +731,65 @@ export default {
     hotSearchSortChange(sortInfo) {
       console.log("应用热门搜索: " + sortInfo);
     },
-    changeAppSpChangeBtn(val) {
-      if (val === 0) {
-        this.serviceSpData = {
-          xAxisData: [
-            "07-01",
-            "07-02",
-            "07-03",
-            "07-04",
-            "07-05",
-            "07-06",
-            "07-07",
-            "07-08",
-            "07-09",
-            "07-10",
-            "07-11",
-            "07-12",
-            "07-13",
-            "07-14"
-          ],
-          seriesData: [
-            {
-              name: "已审批",
-              data: [
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460
-              ]
-            },
-            {
-              name: "未审批",
-              data: [
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350,
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350
-              ]
-            }
-          ]
-        };
+    changeAppSpChangeBtn(index) {
+      if (index == 0) {
+        this.now_app_approval = 14;
       } else {
-        this.serviceSpData = {
-          xAxisData: [
-            "07-01",
-            "07-02",
-            "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",
-            "07-17",
-            "07-18",
-            "07-19",
-            "07-20",
-            "07-21",
-            "07-22",
-            "07-23",
-            "07-24",
-            "07-25",
-            "07-26",
-            "07-27",
-            "07-28",
-            "07-29",
-            "07-30"
-          ],
-          seriesData: [
-            {
-              name: "已审批",
-              data: [
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460,
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350,
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350
-              ]
-            },
-            {
-              name: "未审批",
-              data: [
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350,
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460
-              ]
-            }
-          ]
-        };
+        this.now_app_approval = 30;
       }
+      this.getAppApproval();
     },
-    changeAppSpBtn(val) {
-      if (val === 0) {
-        this.Yysp_data = [
-          { name: "已审批", value: 15 },
-          { name: "待审批", value: 45 }
-        ];
-        this.isyysp = true;
-      } else {
-        this.Yysp_data = [
-          { name: "申请部署", value: 5 },
-          { name: "申请开发", value: 15 }
-        ];
-        this.isyysp = false;
-      }
+    changeAppSpBtn(index) {
+      this.now_app_approval_state = index;
+      this.getAppApprovalState();
     },
     changeServiceTypeBtn(index) {
-      if (index === 0) {
-        this.mult_data = [
-          { name: "基础工具", value: 22 },
-          { name: "通用应用", value: 12 },
-          { name: "业务应用", value: 10 }
-        ];
+      if (index == 0) {
+        this.now_app_type = 1;
       } else {
-        this.mult_data = [
-          { name: "基础工具", value: 6 },
-          { name: "通用应用", value: 20 },
-          { name: "业务应用", value: 14 }
-        ];
+        this.now_app_type = 2;
       }
-      // if (index == 0) {
-      //   this.now_app_type = 1;
-      // } else {
-      //   this.now_app_type = 2;
-      // }
-      // this.getAppType();
+      this.getAppType();
     },
     changeAppAreaTypeBtn(index) {
-      if (index === 0) {
-        this.bar_data_area = {
-          legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
-          seriesData: [322, 454, 566, 399, 222, 167]
-        };
+      if (index == 0) {
+        this.now_app_used_area = 1;
       } else {
-        this.bar_data_area = {
-          legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
-          seriesData: [222, 354, 466, 499, 422, 367]
-        };
+        this.now_app_used_area = 2;
       }
-      // if (index == 0) {
-      //   this.now_app_used_area = 1;
-      // } else {
-      //   this.now_app_used_area = 2;
-      // }
-      // this.getAppUsedArea();
+      this.getAppUsedArea();
     },
     changeApplicationFieldBtn(index) {
       console.log("xxx: " + index);
     },
     changeServiceCellBtn(index) {
-      if (index === 0) {
-        this.graph_arr = {
-          legend: {
-            data: ["被调用次数", "调用次数"]
-          },
-          data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
-          series: [
-            { name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
-            { name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
-          ]
-        };
+      if (index == 0) {
+        this.now_used_count_day = 7;
       } else {
-        this.graph_arr = {
-          legend: {
-            data: ["被调用次数", "调用次数"]
-          },
-          data: [
-            "07-01",
-            "07-02",
-            "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",
-            "07-17",
-            "07-18",
-            "07-19",
-            "07-20",
-            "07-21",
-            "07-22",
-            "07-23",
-            "07-24",
-            "07-25",
-            "07-26",
-            "07-27",
-            "07-28",
-            "07-29",
-            "07-30"
-          ],
-          series: [
-            {
-              name: "被调用次数",
-              data: [
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                333,
-                444
-              ]
-            },
-            {
-              name: "调用次数",
-              data: [
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                333,
-                444,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222
-              ]
-            }
-          ]
-        };
+        this.now_used_count_day = 30;
       }
-      // if (index == 0) {
-      //   this.now_used_count_day = 7;
-      // } else {
-      //   this.now_used_count_day = 30;
-      // }
-      // this.getAppUsedCount();
+      this.getAppUsedCount();
     },
     changeServeiceApplyCountBtn(index) {
-      if (index === 0) {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 30
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 22
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 21
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 18
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 12
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 10
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 8
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2
-          }
-        ];
-      } else {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 35
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 30
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 27
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 25
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 12
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 11
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 10
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2
-          }
-        ];
-      }
-      // console.log("应用部署排名分析: " + index);
-      // this.now_app_deploy = index + 1;
-      // this.getAppDeployRank();
+      console.log("应用部署排名分析: " + index);
+      this.now_app_deploy = index + 1;
+      this.getAppDeployRank();
     },
     changeAppInfoBtn(index) {
       this.appInfoBtnIndex = index;
       this.now_app_evalute = index + 1;
-      // this.getAppEvaluate();
-      // console.log("应用评价及评分: " + index);
+      this.getAppEvaluate();
+      console.log("应用评价及评分: " + index);
     },
     changeAppTotalChangeBtn(index) {
-      if (index === 0) {
-        this.line_data = {
-          xAxisData: [
-            "07-01",
-            "07-02",
-            "07-03",
-            "07-04",
-            "07-05",
-            "07-06",
-            "07-07",
-            "07-08",
-            "07-09",
-            "07-10",
-            "07-11",
-            "07-12",
-            "07-13",
-            "07-14"
-          ],
-          seriesData: [
-            {
-              name: "开发者应用",
-              data: [
-                300,
-                200,
-                150,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222
-              ]
-            },
-            {
-              name: "平台应用",
-              data: [
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                100,
-                200,
-                350,
-                280,
-                260,
-                320,
-                500,
-                222
-              ]
-            },
-            {
-              name: "未上架",
-              data: [
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                350,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                350
-              ]
-            }
-          ]
-        };
+      if (index == 0) {
+        this.now_app_count = 14;
       } else {
-        this.line_data = {
-          xAxisData: [
-            "07-01",
-            "07-02",
-            "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",
-            "07-17",
-            "07-18",
-            "07-19",
-            "07-20",
-            "07-21",
-            "07-22",
-            "07-23",
-            "07-24",
-            "07-25",
-            "07-26",
-            "07-27",
-            "07-28",
-            "07-29",
-            "07-30"
-          ],
-          seriesData: [
-            {
-              name: "开发者",
-              data: [
-                300,
-                100,
-                250,
-                280,
-                380,
-                220,
-                300,
-                122,
-                200,
-                300,
-                550,
-                480,
-                380,
-                420,
-                300,
-                122,
-                200,
-                250,
-                266,
-                380,
-                220,
-                350,
-                466,
-                250,
-                400,
-                250,
-                266,
-                380,
-                220,
-                350
-              ]
-            },
-            {
-              name: "平台应用",
-              data: [
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                350,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450
-              ]
-            },
-            {
-              name: "未上架",
-              data: [
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                350,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                350,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520
-              ]
-            }
-          ]
-        };
+        this.now_app_count = 30;
       }
-      // if (index == 0) {
-      //   this.now_app_count = 14;
-      // } else {
-      //   this.now_app_count = 30;
-      // }
-      // this.getAppCount();
-    }
-  }
+      this.getAppCount();
+    },
+  },
 };
 </script>
 <style scoped>
diff --git a/src/pages/data-analysis/org-service.vue b/src/pages/data-analysis/org-service.vue
index f1487d4b0e70163be1708a30cf9aca51deb97fd7..404ed72fe44db56500a95f048a543a300e01a922 100644
--- a/src/pages/data-analysis/org-service.vue
+++ b/src/pages/data-analysis/org-service.vue
@@ -6,9 +6,14 @@
         $t("lang.data_analysis")
         }}
       </el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/data_analysis/org_service' }">
+        {{
+        $t("lang.operational_analysis")
+        }}
+      </el-breadcrumb-item>
       <el-breadcrumb-item>
         {{
-        $t("lang.my_service_data_analysis")
+        $t("lang.service_data_analysis")
         }}
       </el-breadcrumb-item>
     </el-breadcrumb>
@@ -72,7 +77,7 @@
               @changeButton="changeApplicationFieldBtn"
               class="block"
             >
-              <BarChart :data="bar_data" />
+              <BarChart :x_router="30" :data="bar_data" />
             </block-radius>
           </el-col>
         </el-row>
@@ -293,492 +298,184 @@ export default {
     BarChart,
     ApassTable,
     Graph,
-    Topology
+    Topology,
   },
   data: () => ({
     overview: {
-      serviceTotal: 28
+      serviceTotal: 0,
     },
     left_1_state: 0,
     left_2_state: 0,
     left_3_state: 0,
     center_3_state: 0,
+    center_4_state: 0,
     right_0_state: 0,
     right_1_state: 0,
     right_2_state: 0,
     right_3_state: 0,
     last_id: 0,
     mult_data_state: [
-      { name: "正常", value: 22 },
-      { name: "警告", value: 12 },
-      { name: "错误", value: 14 },
-      { name: "未使用", value: 19 }
+      { name: "正常", value: 0 },
+      { name: "警告", value: 0 },
+      { name: "错误", value: 0 },
+      { name: "未使用", value: 0 },
     ],
     mult_data: [
-      { name: "数据服务", value: 22 },
-      { name: "时空服务", value: 12 },
-      { name: "视频服务", value: 14 },
-      { name: "感知服务", value: 14 },
-      { name: "综合服务", value: 1 }
+      { name: "数据服务", value: 0 },
+      { name: "时空服务", value: 0 },
+      { name: "视频服务", value: 0 },
+      { name: "感知服务", value: 0 },
+      { name: "综合服务", value: 0 },
     ],
     fwsp_data: [
-      { name: "已审批", value: 25 },
-      { name: "待审批", value: 75 }
+      { name: "已审批", value: 0 },
+      { name: "待审批", value: 0 },
     ],
     spIndicatorStyles1: false,
     spRefLineStyles3: {
       stroke: "#d14",
       strokeOpacity: 0,
-      strokeDasharray: "2, 2"
+      strokeDasharray: "2, 2",
     },
     spCurveStyles2: {
       stroke: "#274fee",
-      fill: "#274fee"
+      fill: "#274fee",
     },
     spCurveStyles3: {
       stroke: "#e56600",
-      fill: "#e56600"
+      fill: "#e56600",
     },
     sparkline1: {
-      num: 8848,
-      up: 32,
-      arr: [20, 29, 40, 33, 45, 58]
+      num: 0,
+      up: 0,
+      arr: [],
     },
     sparkline2: {
-      num: 9964,
-      up: 20,
-      arr: [33, 29, 36, 33, 45, 58]
+      num: 0,
+      up: 0,
+      arr: [],
     },
     text: "服务总数",
     fwsp_text: "服务审批",
     single_data: {
-      num: 32,
+      num: 0,
       color: "#25bdb1",
-      text: "共享"
+      text: "共享",
     },
     single_data1: {
-      num: 28,
+      num: 0,
       color: "#f5ab4c",
-      text: "受限"
+      text: "受限",
     },
     single_data2: {
-      num: 30,
+      num: 0,
       color: "#e15260",
-      text: "敏感"
+      text: "敏感",
     },
     serviceSpData: {
-      xAxisData: [
-        "07-01",
-        "07-02",
-        "07-03",
-        "07-04",
-        "07-05",
-        "07-06",
-        "07-07",
-        "07-08",
-        "07-09",
-        "07-10",
-        "07-11",
-        "07-12",
-        "07-13",
-        "07-14"
-      ],
+      xAxisData: [],
       seriesData: [
         {
           name: "已审批",
-          data: [
-            300,
-            400,
-            350,
-            280,
-            480,
-            520,
-            500,
-            460,
-            300,
-            400,
-            350,
-            280,
-            480,
-            520,
-            500,
-            460
-          ]
+          data: [],
         },
         {
           name: "未审批",
-          data: [
-            300,
-            350,
-            400,
-            280,
-            320,
-            450,
-            400,
-            350,
-            300,
-            350,
-            400,
-            280,
-            320,
-            450,
-            400,
-            350
-          ]
-        }
-      ]
+          data: [],
+        },
+      ],
     },
     line_data: {
-      xAxisData: [
-        "07-01",
-        "07-02",
-        "07-03",
-        "07-04",
-        "07-05",
-        "07-06",
-        "07-07",
-        "07-08",
-        "07-09",
-        "07-10",
-        "07-11",
-        "07-12",
-        "07-13",
-        "07-14"
-      ],
+      xAxisData: [],
       seriesData: [
         {
           name: "上架中",
-          data: [
-            300,
-            400,
-            350,
-            280,
-            480,
-            520,
-            500,
-            222,
-            300,
-            400,
-            350,
-            280,
-            480,
-            520,
-            500,
-            222
-          ]
+          data: [],
         },
         {
           name: "未上架",
-          data: [
-            300,
-            350,
-            366,
-            280,
-            320,
-            450,
-            366,
-            350,
-            300,
-            350,
-            366,
-            280,
-            320,
-            450,
-            366,
-            350
-          ]
-        }
-      ]
+          data: [],
+        },
+      ],
     },
     das_data: {
-      data: 85,
-      text: "健康占比"
+      data: 0,
+      text: "健康占比",
     },
     bar_data: {
-      legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
-      seriesData: [322, 454, 566, 399, 222, 167]
+      legendData: [],
+      seriesData: [],
     },
     bar_data_org: {
-      legendData: [
-        "省公安厅",
-        "省发改委",
-        "贵州省公安厅",
-        "贵州省发改委",
-        "贵州省公安厅"
-      ],
-      seriesData: [322, 454, 266, 399, 222, 167]
+      legendData: [],
+      seriesData: [],
     },
-    toplistData: [
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "postgresql V11.1",
-        request_count: 30
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "钉钉 V1.0",
-        request_count: 22
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "易智瑞 V11.3",
-        request_count: 21
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "CAS单点登录 V1.0",
-        request_count: 18
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "postgresql V11.1",
-        request_count: 15
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "CAS单点登录 V1.0",
-        request_count: 12
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "postgresql V11.1",
-        request_count: 10
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "CAS单点登录 V1.0",
-        request_count: 8
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "postgresql V11.1",
-        request_count: 6
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "CAS单点登录 V1.0",
-        request_count: 6
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "postgresql V11.1",
-        request_count: 4
-      },
-      {
-        cover:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        service_name: "CAS单点登录 V1.0",
-        request_count: 2
-      }
-    ], // 服务调用排名分析
+    toplistData: [], // 服务调用排名分析
     toplistTargetValue: 40, // 服务调用排名分析 目标值
-    commentlistData: [
-      {
-        picture_path:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        user_name: "孤独的狼",
-        add_time: "2020-08-01 19:00:00",
-        score: 4,
-        message: "这个应用非常实用，可以应用到多个业务领域！"
-      },
-      {
-        picture_path:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        user_name: "大锤",
-        add_time: "2020-08-01 19:00:00",
-        score: 4,
-        message: "这个应用非常实用，可以应用到多个业务领域！"
-      },
-      {
-        picture_path:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        user_name: "阿水",
-        add_time: "2020-08-01 19:00:00",
-        score: 3,
-        message: "这个应用非常实用，可以应用到多个业务领域！"
-      },
-      {
-        picture_path:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        user_name: "孤独的狼",
-        add_time: "2020-08-01 19:00:00",
-        score: 4,
-        message: "这个应用非常实用，可以应用到多个业务领域！"
-      },
-      {
-        picture_path:
-          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        user_name: "孤独的狼",
-        add_time: "2020-08-01 19:00:00",
-        score: 4,
-        message: "这个应用非常实用，可以应用到多个业务领域！"
-      }
-    ], // 服务评价
-    linelistData: [
-      {
-        count: 6,
-        percent: 75,
-        title: "0.1% 错误",
-        unit: "个"
-      },
-      {
-        count: 2,
-        percent: 25,
-        title: "0.1 - 20% 错误",
-        unit: "个"
-      },
-      {
-        count: 0,
-        percent: 0,
-        title: "20% 错误",
-        unit: "个"
-      },
-      {
-        count: 0,
-        percent: 0,
-        title: "TCP连接",
-        unit: "个"
-      },
-      {
-        count: 0,
-        percent: 0,
-        title: "Idle",
-        unit: "个"
-      }
-    ], // 服务状态统计
-    starlistData: [
-      {
-        star: 5,
-        count: 5,
-        unit: "个"
-      },
-      {
-        star: 4,
-        count: 4,
-        unit: "个"
-      },
-      {
-        star: 3,
-        count: 3,
-        unit: "个"
-      },
-      {
-        star: 2,
-        count: 2,
-        unit: "个"
-      },
-      {
-        star: 1,
-        count: 1,
-        unit: "个"
-      }
-    ], // 服务评分
+    commentlistData: [], // 服务评价
+    linelistData: [], // 服务状态统计
+    starlistData: [], // 服务评分
     starlistTotal: 15,
     hotSearchHeader: [], // 热门搜索 表头
-    hotSearchData: [
-      {
-        id: 1,
-        hotIndex: 1,
-        name: "地图视频融合服务",
-        count: 9964,
-        increases: 568
-      },
-      {
-        id: 1,
-        hotIndex: 2,
-        name: "消息队列服务",
-        count: 8964,
-        increases: 528
-      },
-      {
-        id: 1,
-        hotIndex: 3,
-        name: "即时通讯服务",
-        count: 7864,
-        increases: 89
-      },
-      {
-        id: 1,
-        hotIndex: 4,
-        name: "即时通讯服务这里最多显示十五字地图视频融合服务",
-        count: 4964,
-        increases: -8
-      },
-      {
-        id: 1,
-        hotIndex: 5,
-        name: "即时通讯服务这里最多显示十五字地图视频融合服务",
-        count: 3364,
-        increases: -18
-      }
-    ], // 热门搜索 数据
+    hotSearchData: [], // 热门搜索 数据
     graph_arr: {
       legend: {
-        data: ["被调用次数", "调用次数"]
+        data: [],
       },
-      data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
+      data: [],
       series: [
-        { name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
-        { name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
-      ]
+        { name: "被调用次数", data: [] },
+        { name: "调用次数", data: [] },
+      ],
     },
-    topology_datas: { }
+    topology_datas: {},
   }),
   mounted() {
-    // this.getServiceOverview();
-    // this.getServiceHealth();
-    // this.getServiceTrend();
-    // this.getServiceType();
-    // this.getServiceSectorse();
-    // this.getServiceOrg();
-    // this.getServiceOpenness();
-    // this.getServiceRequest();
-    // this.getServiceOnlineState();
-    // this.getServiceEstimated();
-    // this.getServiceHotSearch();
+    this.getServiceOverview();
+    this.getServiceHealth();
+    this.getServiceTrend();
+    this.getServiceType();
+    this.getServiceSectorse();
+    this.getServiceOrg();
+    this.getServiceOpenness();
+    this.getServiceRequest();
+    this.getServiceOnlineState();
+    this.getServiceEstimated();
+    this.getServiceHotSearch();
+    this.getServiceApprovalChanges();
+    this.getServiceApprovalStatus();
     this.hotSearchHeader = [
       {
         label: "服务排名",
         type: "hot-index",
         width: 100,
-        align: "center"
+        align: "center",
       },
       {
         label: "服务名称",
         prop: "name",
         type: "button",
-        callback: this.detailHotSearch
+        callback: this.detailHotSearch,
       },
       {
         label: "搜索次数",
         prop: "count",
         width: 100,
-        align: "center"
+        align: "center",
       },
       {
         label: "日涨幅",
         prop: "increases",
         width: 100,
         sortType: "0", // 0：升序 1：降序
-        align: "center"
-      }
+        align: "center",
+      },
     ];
     this.getTopologyData();
   },
   methods: {
     getServiceHotSearch() {
-      this.$api.dataAnalysis.getServiceHotSearch().then(response => {
+      this.$api.dataAnalysis.getServiceHotSearch().then((response) => {
         if (response.data.success == 1) {
           let data = response.data.data;
           this.sparkline1 = {
@@ -789,7 +486,7 @@ export default {
                 : data.trend == "down"
                 ? 0 - data.search_user.per
                 : data.search_user.per,
-            arr: data.search_user_trend.seriesData
+            arr: data.search_user_trend.seriesData,
           };
           this.sparkline2 = {
             num: data.search_user_avg.count,
@@ -799,7 +496,7 @@ export default {
                 : data.trend == "down"
                 ? 0 - data.search_user_avg.per
                 : data.search_user_avg.per,
-            arr: data.search_user_avg_trend.seriesData
+            arr: data.search_user_avg_trend.seriesData,
           };
           // top5_rank
           this.hotSearchData = [];
@@ -815,7 +512,7 @@ export default {
                     ? e.search_user.per
                     : e.trend == "down"
                     ? 0 - e.search_user.per
-                    : e.search_user.per
+                    : e.search_user.per,
               });
             });
           }
@@ -823,7 +520,7 @@ export default {
       });
     },
     getServiceOverview() {
-      this.$api.dataAnalysis.getServiceOverview().then(response => {
+      this.$api.dataAnalysis.getServiceOverview().then((response) => {
         if (response.data.success == 1) {
           this.overview = response.data.data;
           this.das_data.data = Math.round(
@@ -836,7 +533,7 @@ export default {
       });
     },
     getServiceHealth() {
-      this.$api.dataAnalysis.getServiceHealth().then(response => {
+      this.$api.dataAnalysis.getServiceHealth().then((response) => {
         if (response.data.success == 1) {
           this.mult_data_state = response.data.data.seriesData;
         }
@@ -845,7 +542,7 @@ export default {
     getServiceTrend() {
       this.$api.dataAnalysis
         .getServiceTrend({ type: this.right_1_state })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             this.graph_arr = response.data.data;
           }
@@ -854,7 +551,7 @@ export default {
     getServiceType() {
       this.$api.dataAnalysis
         .getServiceType({ type: this.left_2_state })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             this.mult_data = response.data.data.seriesData;
           }
@@ -863,7 +560,7 @@ export default {
     getServiceSectorse() {
       this.$api.dataAnalysis
         .getServiceSectorse({ type: this.left_3_state })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             this.bar_data = response.data.data;
           }
@@ -872,7 +569,7 @@ export default {
     getServiceOrg() {
       this.$api.dataAnalysis
         .getServiceOrg({ type: this.left_3_state })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             this.bar_data_org = response.data.data;
           }
@@ -881,7 +578,7 @@ export default {
     getServiceOpenness() {
       this.$api.dataAnalysis
         .getServiceOpenness({ type: this.right_2_state })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             this.single_data.num = response.data.data.shared;
             this.single_data1.num = response.data.data.privacy;
@@ -892,7 +589,7 @@ export default {
     getServiceRequest() {
       this.$api.dataAnalysis
         .getServiceRequest({ type: this.right_0_state })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             this.toplistData = response.data.data;
             if (this.toplistData && this.toplistData.length != 0) {
@@ -904,7 +601,7 @@ export default {
     getServiceOnlineState() {
       this.$api.dataAnalysis
         .getServiceOnlineState({ type: this.center_3_state })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             this.line_data = response.data.data;
             console.log(this.line_data);
@@ -915,758 +612,86 @@ export default {
       this.$api.dataAnalysis
         .getServiceEstimated({
           type: this.right_3_state,
-          last_id: this.last_id
+          last_id: this.last_id,
         })
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
-            this.commentlistData = response.data.data.concat(
-              this.commentlistData
-            );
+            if (response.data.data) {
+              this.commentlistData = response.data.data.concat(
+                this.commentlistData
+              );
+            }
             this.last_id = this.commentlistData[0].last_id;
           }
         });
     },
+    getServiceApprovalChanges() {
+      this.$api.dataAnalysis
+        .getServiceApprovalChanges({
+          type: this.center_4_state,
+        })
+        .then((response) => {
+          if (response.data.success == 1) {
+          }
+        });
+    },
+    getServiceApprovalStatus() {
+      this.$api.dataAnalysis.getServiceApprovalStatus().then((response) => {
+        if (response.data.success == 1) {
+          this.fwsp_data = response.data.data;
+        }
+      });
+    },
+    getServiceTransfer() {},
     detailHotSearch(item) {
       this.$router.push("/fwgl/0/0/servicedetail/" + item.id);
     },
-    changeServeiceSpChangeBtn(val) {
-      if (val === 0) {
-        this.serviceSpData = {
-          xAxisData: [
-            "07-01",
-            "07-02",
-            "07-03",
-            "07-04",
-            "07-05",
-            "07-06",
-            "07-07",
-            "07-08",
-            "07-09",
-            "07-10",
-            "07-11",
-            "07-12",
-            "07-13",
-            "07-14"
-          ],
-          seriesData: [
-            {
-              name: "已审批",
-              data: [
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460
-              ]
-            },
-            {
-              name: "未审批",
-              data: [
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350,
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350
-              ]
-            }
-          ]
-        };
-      } else {
-        this.serviceSpData = {
-          xAxisData: [
-            "07-01",
-            "07-02",
-            "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",
-            "07-17",
-            "07-18",
-            "07-19",
-            "07-20",
-            "07-21",
-            "07-22",
-            "07-23",
-            "07-24",
-            "07-25",
-            "07-26",
-            "07-27",
-            "07-28",
-            "07-29",
-            "07-30"
-          ],
-          seriesData: [
-            {
-              name: "已审批",
-              data: [
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460,
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350,
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350
-              ]
-            },
-            {
-              name: "未审批",
-              data: [
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350,
-                300,
-                350,
-                400,
-                280,
-                320,
-                450,
-                400,
-                350,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                460
-              ]
-            }
-          ]
-        };
-      }
+    changeServeiceSpChangeBtn(index) {
+      this.center_4_state = index;
+      this.getServiceApprovalChanges();
     },
     changeServiceTypeBtn(index) {
-      if (index === 0) {
-        this.mult_data = [
-          { name: "数据服务", value: 22 },
-          { name: "时空服务", value: 12 },
-          { name: "视频服务", value: 14 },
-          { name: "感知服务", value: 14 },
-          { name: "综合服务", value: 1 }
-        ];
-      } else {
-        this.mult_data = [
-          { name: "数据服务", value: 12 },
-          { name: "时空服务", value: 15 },
-          { name: "视频服务", value: 13 },
-          { name: "感知服务", value: 13 },
-          { name: "综合服务", value: 1 }
-        ];
-      }
-      // this.left_2_state = index;
-      // this.getServiceType();
+      this.left_2_state = index;
+      this.getServiceType();
     },
     changeApplicationFieldBtn(index) {
-      if (index === 0) {
-        this.bar_data = {
-          legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
-          seriesData: [322, 454, 566, 399, 222, 167]
-        };
-      } else {
-        this.bar_data = {
-          legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
-          seriesData: [422, 254, 366, 299, 422, 267]
-        };
-      }
-      // this.left_3_state = index;
-      // this.getServiceSectorse();
+      this.left_3_state = index;
+      this.getServiceSectorse();
     },
     changeServeiceApplyCountBtn(index) {
-      if (index === 0) {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 30
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 22
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 21
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 18
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 12
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 10
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 8
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2
-          }
-        ];
-      } else {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 35
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 30
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 27
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 25
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 12
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 11
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 10
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2
-          }
-        ];
-      }
-      // this.right_0_state = index;
-      // this.getServiceRequest();
+      this.right_0_state = index;
+      this.getServiceRequest();
     },
     changeServeiceInfoBtn(index) {
       this.right_3_state = index;
-      // this.getServiceEstimated();
+      this.getServiceEstimated();
     },
     changeOpenessBtnindex(index) {
-      if (index === 1) {
-        this.single_data = {
-          num: 32,
-          color: "#25bdb1",
-          text: "共享"
-        };
-        this.single_data1 = {
-          num: 28,
-          color: "#f5ab4c",
-          text: "受限"
-        };
-        this.single_data2 = {
-          num: 30,
-          color: "#e15260",
-          text: "敏感"
-        };
-      } else {
-        this.single_data = {
-          num: 42,
-          color: "#25bdb1",
-          text: "共享"
-        };
-        this.single_data1 = {
-          num: 18,
-          color: "#f5ab4c",
-          text: "受限"
-        };
-        this.single_data2 = {
-          num: 20,
-          color: "#e15260",
-          text: "敏感"
-        };
-      }
-      // this.right_2_state = index;
-      // this.getServiceOpenness();
+      this.right_2_state = index;
+      this.getServiceOpenness();
     },
     changeServiceCellBtn(index) {
-      if (index === 0) {
-        this.graph_arr = {
-          legend: {
-            data: ["被调用次数", "调用次数"]
-          },
-          data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
-          series: [
-            { name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
-            { name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
-          ]
-        };
-      } else {
-        this.graph_arr = {
-          legend: {
-            data: ["被调用次数", "调用次数"]
-          },
-          data: [
-            "07-01",
-            "07-02",
-            "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",
-            "07-17",
-            "07-18",
-            "07-19",
-            "07-20",
-            "07-21",
-            "07-22",
-            "07-23",
-            "07-24",
-            "07-25",
-            "07-26",
-            "07-27",
-            "07-28",
-            "07-29",
-            "07-30"
-          ],
-          series: [
-            {
-              name: "被调用次数",
-              data: [
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                333,
-                444
-              ]
-            },
-            {
-              name: "调用次数",
-              data: [
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                333,
-                444,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222
-              ]
-            }
-          ]
-        };
-      }
-
-      // this.right_1_state = index;
-      // this.getServiceTrend();
+      this.right_1_state = index;
+      this.getServiceTrend();
     },
     changeServeiceTotalChangeBtn(index) {
-      if (index === 0) {
-        this.line_data = {
-          xAxisData: [
-            "07-01",
-            "07-02",
-            "07-03",
-            "07-04",
-            "07-05",
-            "07-06",
-            "07-07",
-            "07-08",
-            "07-09",
-            "07-10",
-            "07-11",
-            "07-12",
-            "07-13",
-            "07-14"
-          ],
-          seriesData: [
-            {
-              name: "上架中",
-              data: [
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222
-              ]
-            },
-            {
-              name: "未上架",
-              data: [
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                350,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                350
-              ]
-            }
-          ]
-        };
-      } else {
-        this.line_data = {
-          xAxisData: [
-            "07-01",
-            "07-02",
-            "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",
-            "07-17",
-            "07-18",
-            "07-19",
-            "07-20",
-            "07-21",
-            "07-22",
-            "07-23",
-            "07-24",
-            "07-25",
-            "07-26",
-            "07-27",
-            "07-28",
-            "07-29",
-            "07-30"
-          ],
-          seriesData: [
-            {
-              name: "上架中",
-              data: [
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                350,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450
-              ]
-            },
-            {
-              name: "未上架",
-              data: [
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                350,
-                300,
-                350,
-                366,
-                280,
-                320,
-                450,
-                366,
-                350,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520,
-                500,
-                222,
-                300,
-                400,
-                350,
-                280,
-                480,
-                520
-              ]
-            }
-          ]
-        };
-      }
-      // this.center_3_state = index;
-      // this.getServiceOnlineState();
+      this.center_3_state = index;
+      this.getServiceOnlineState();
     },
     getTopologyData() {
-      this.$api.workbench.getServiceTopology().then(response => {
+      this.$api.workbench.getServiceTopology().then((response) => {
         this.topology_datas = response.data.elements;
       });
     },
     changeServiceStateBtn(index) {
-      if (index === 0) {
-        this.mult_data_state = [
-          { name: "正常", value: 22 },
-          { name: "警告", value: 12 },
-          { name: "错误", value: 14 },
-          { name: "未使用", value: 19 }
-        ];
+      this.left_1_state = index;
+      if (index == 0) {
+        this.getServiceHealth();
       } else {
-        this.mult_data_state = [
-          { name: "已调用", value: 33 },
-          { name: "未调用", value: 23 }
-        ];
+        this.getServiceTransfer();
       }
-      // this.left_1_state = index;
-      // if (index == 0) {
-      //   this.getServiceHealth();
-      // } else {
-      //   this.a();
-      // }
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>
diff --git a/src/pages/data-analysis/super-application.vue b/src/pages/data-analysis/super-application.vue
index e9b87ab310a2c722178fbb0aa82e2a282d889cf4..8b0532cd3a9f774d76e1b05d653ac36ed6882fa1 100644
--- a/src/pages/data-analysis/super-application.vue
+++ b/src/pages/data-analysis/super-application.vue
@@ -2,57 +2,976 @@
   <div>
     <el-breadcrumb separator="/" class="bread_crumb1">
       <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.data_analysis") }}</el-breadcrumb-item>
-      <el-breadcrumb-item>{{ $t("lang.my_application_data_analysis") }}</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/data_analysis/super_service' }">
+        {{
+        $t("lang.operational_analysis")
+        }}
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>{{ $t("lang.application_data_analysis") }}</el-breadcrumb-item>
     </el-breadcrumb>
-    <BlockRadius class="default">
-      <div class="default_img">
-        <h1 class="default_title">开发中，敬请期待！</h1>
-        <h3 class="default_msg">
-          如需技术支持
-          <br />请联系管理员
-        </h3>
-      </div>
-    </BlockRadius>
+    <el-row class="in_analysis">
+      <!-- 可横向铺满 -->
+      <el-col :span="6" class="in_left">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius :show_header="true" title="应用总体概况" class="block">
+              <div class="left_1">
+                <div class="left_block">
+                  <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_msg">
+                      <div class="left_1_title">应用总数</div>
+                      <div class="left_1_num">{{overview.total}}</div>
+                    </div>
+                  </div>
+                  <div class="chain">
+                    月环比
+                    <span
+                      class="chain_mid"
+                      :class="overview.month_chain >= 0 ? 'chain_up' : 'chain_down'"
+                    >
+                      {{ Math.abs(overview.month_chain) }}%
+                      <img
+                        :src="overview.month_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
+                      />
+                    </span>周环比
+                    <span :class="overview.week_chain >= 0 ? 'chain_up' : 'chain_down'">
+                      {{ Math.abs(overview.week_chain) }}%
+                      <img
+                        :src="overview.week_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
+                      />
+                    </span>
+                  </div>
+                  <div class="left_1_line"></div>
+                  <div class="left_1_l_bottom">
+                    日均被部署次数
+                    <span class="left_1_l_bottom_msg">{{overview.day_count}}</span>（次）
+                  </div>
+                </div>
+                <div class="left_1_right">
+                  <WaterPolo :datas="water_polo" class="water_polo" />
+                </div>
+              </div>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="应用调用次数分析"
+              :buttons_arr="['近7天', '近30天']"
+              @changeButton="changeServiceCellBtn"
+              class="block"
+            >
+              <Graph v-if="JSON.stringify(graph_arr)!=='{}'" :data="graph_arr" />
+            </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 class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12" class="in_center">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="应用使用领域统计"
+              :buttons_arr="['构建的应用', '申请的应用']"
+              @changeButton="changeAppAreaTypeBtn"
+              class="block"
+            >
+              <BarChart
+                :data="bar_data_area"
+                :colors="['#1034eb', '#4274f8']"
+                :bar_border_radius="[20, 20, 0, 0]"
+                :bar_width="26"
+                :show_split="true"
+              />
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius :show_header="true" title="应用热门搜索" class="block">
+              <div class="block-radius-content service-hot-search">
+                <div class="left-content">
+                  <div class="hot-line">
+                    <p class="hot-line-title">搜索用户数</p>
+                    <div class="hot-line-chart">
+                      <!-- 折线图 -->
+                      <p class="sparkline-text">
+                        <span>{{sparkline1.num}}</span>
+                        <span
+                          :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_down.png" alt />
+                        </span>
+                      </p>
+                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
+                        <sparklineCurve
+                          :refLineStyles="spRefLineStyles3"
+                          :refLineType="false"
+                          :data="sparkline1.arr"
+                          :limit="sparkline1.arr.length"
+                          :styles="spCurveStyles2"
+                        />
+                      </sparkline>
+                    </div>
+                  </div>
+                  <div class="hot-line">
+                    <p class="hot-line-title">人均搜索次数</p>
+                    <div class="hot-line-chart">
+                      <!-- 折线图 -->
+                      <p class="sparkline-text sparkline-text-user">
+                        <span>{{sparkline2.num}}</span>
+                        <span
+                          :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_down.png" alt />
+                        </span>
+                      </p>
+                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
+                        <sparklineCurve
+                          :refLineStyles="spRefLineStyles3"
+                          :refLineType="false"
+                          :data="sparkline2.arr"
+                          :limit="sparkline2.arr.length"
+                          :styles="spCurveStyles3"
+                        />
+                      </sparkline>
+                    </div>
+                  </div>
+                </div>
+                <div class="right-content apaas_scroll">
+                  <apass-table
+                    class="hot-search-table"
+                    :header="hotSearchHeader"
+                    :data="hotSearchData"
+                    :padding-left="0"
+                    @sort-change="hotSearchSortChange"
+                  ></apass-table>
+                </div>
+              </div>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              class="block"
+              :show_header="true"
+              title="应用总数变化趋势"
+              :buttons_arr="['近14天', '近30天']"
+              @changeButton="changeAppTotalChangeBtn"
+            >
+              <line-chart
+                v-if="JSON.stringify(line_data)!=='{}'"
+                class="block-radius-content"
+                :data="line_data"
+                :zzfw="true"
+              ></line-chart>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="in_right">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="应用部署排名分析"
+              class="block"
+            >
+              <toplist
+                class="block-radius-content"
+                :options="toplistData"
+                :target-value="toplistTargetValue"
+              ></toplist>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="应用评价及评分"
+              :buttons_arr="['应用评价', '应用评分']"
+              @changeButton="changeAppInfoBtn"
+              class="block"
+            >
+              <commentlist
+                v-if="appInfoBtnIndex == 0"
+                class="block-radius-content"
+                :data="commentlistData"
+              ></commentlist>
+              <starlist
+                v-else
+                class="block-radius-content"
+                :options="starlistData"
+                :total="starlistTotal"
+                style="margin-top: 30px;height: calc(100% - 51px);"
+              ></starlist>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block" :show_header="true" title="应用在线状态统计">
+              <single-circle class="block-radius-content single-charts" :data="single_data"></single-circle>
+              <single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <!-- 不可横向铺满，一般为最后一行 -->
+      <el-col :span="6" class="in_block">
+        <block-radius :show_header="true" title="应用来源机构分析" class="block">
+          <BarChart :data="bar_data_org" :colors="['#274fee', '#274fee']" :x_router="30" />
+        </block-radius>
+      </el-col>
+      <el-col :span="12" class="in_block">
+        <block-radius
+          :show_header="true"
+          title="应用审批变化趋势"
+          class="block"
+          :buttons_arr="['近14天', '近30天']"
+          @changeButton="changeAppSpChangeBtn"
+        >
+          <line-chart class="block-radius-content" :zzfw="true" :data="serviceSpData"></line-chart>
+        </block-radius>
+      </el-col>
+      <el-col :span="6" class="in_block">
+        <block-radius
+          :show_header="true"
+          title="应用审批状态分析"
+          class="block"
+          :buttons_arr="['申请状态', '申请类型']"
+          @changeButton="changeAppSpBtn"
+        >
+          <multiple-circle
+            class="block-radius-content"
+            :data="Yysp_data"
+            :text="Yysp_text"
+            :isFwsp="isyysp"
+          ></multiple-circle>
+        </block-radius>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import BlockRadius from "@/components/general/block-radius";
+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";
+import ApassTable from "@/components/apass-table";
+import Graph from "@/components/e-charts/graph";
+import WaterPolo from "@/components/e-charts/water-polo";
 export default {
-  methods: {
-    getData() {},
-  },
   components: {
     BlockRadius,
+    multipleCircle,
+    singleCircle,
+    Toplist,
+    Starlist,
+    Commentlist,
+    lineChart,
+    BarChart,
+    ApassTable,
+    Graph,
+    WaterPolo,
+  },
+  data: () => ({
+    isyysp: true,
+    water_polo: [64, 36],
+    overview: {
+      month_chain: 0,
+      week_chain: 0,
+      total: 0,
+      day_count: 0,
+    },
+    now_used_count_day: 7,
+    now_app_type: 1,
+    now_app_used_area: 1,
+    now_app_count: 14,
+    now_app_deploy: 1,
+    now_app_evalute: 1,
+    now_app_approval: 0,
+    now_app_approval_state: 0,
+    mult_data: [
+      { name: "基础工具", value: 0 },
+      { name: "通用应用", value: 0 },
+      { name: "业务应用", value: 0 },
+    ],
+    text: "应用总数",
+    spIndicatorStyles1: false,
+    spRefLineStyles3: {
+      stroke: "#d14",
+      strokeOpacity: 0,
+      strokeDasharray: "2, 2",
+    },
+    spCurveStyles2: {
+      stroke: "#274fee",
+      fill: "#274fee",
+    },
+    Yysp_data: [
+      { name: "已审批", value: 0 },
+      { name: "待审批", value: 0 },
+    ],
+    Yysp_text: "应用审批",
+    serviceSpData: {
+      xAxisData: [],
+      seriesData: [],
+    },
+    spCurveStyles3: {
+      stroke: "#e56600",
+      fill: "#e56600",
+    },
+    sparkline1: {
+      arr: [],
+      num: 0,
+      up: 0,
+    },
+    sparkline2: {
+      arr: [],
+      num: 0,
+      up: 0,
+    },
+    single_data: {
+      num: 0,
+      color: "#274fee",
+      text: "平台应用",
+    },
+    single_data1: {
+      num: 0,
+      color: "#e56600",
+      text: "开发者应用",
+    },
+    line_data: {
+      xAxisData: [],
+      seriesData: [],
+    },
+    bar_data_org: {
+      legendData: [],
+      seriesData: [],
+    },
+    bar_data_area: {
+      legendData: [],
+      seriesData: [],
+    },
+    graph_arr: {
+      legend: {
+        data: ["被调用次数", "调用次数"],
+      },
+      data: [],
+      series: [
+        { name: "被调用次数", data: [] },
+        { name: "调用次数", data: [] },
+      ],
+    },
+    toplistData: [
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "postgresql V11.1",
+        request_count: 30,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "钉钉 V1.0",
+        request_count: 22,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "易智瑞 V11.3",
+        request_count: 21,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "CAS单点登录 V1.0",
+        request_count: 18,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "postgresql V11.1",
+        request_count: 15,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "CAS单点登录 V1.0",
+        request_count: 12,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "postgresql V11.1",
+        request_count: 10,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "CAS单点登录 V1.0",
+        request_count: 8,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "postgresql V11.1",
+        request_count: 6,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "CAS单点登录 V1.0",
+        request_count: 6,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "postgresql V11.1",
+        request_count: 4,
+      },
+      {
+        cover:
+          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+        service_name: "CAS单点登录 V1.0",
+        request_count: 2,
+      },
+    ], // 应用部署排名分析
+    toplistTargetValue: 150, // 应用部署排名分析 目标值
+    appInfoBtnIndex: 0,
+    commentlistData: [], // 应用评价
+    starlistData: [], // 应用评分
+    starlistTotal: 10,
+    hotSearchHeader: [], // 热门搜索 表头
+    hotSearchData: [], // 热门搜索 数据
+  }),
+  mounted() {
+    this.getAppOverview();
+    this.getAppUsedCount();
+    this.getAppType();
+    this.getAppSourceOri();
+    this.getAppUsedArea();
+    this.getAppCount();
+    this.getAppDeployRank();
+    this.getAppEvaluate();
+    this.getAppOnlineState();
+    this.getAppHot();
+    this.getAppApproval();
+    this.getAppApprovalState();
+    this.hotSearchHeader = [
+      {
+        label: "排名",
+        type: "hot-index",
+        width: 100,
+        align: "center",
+      },
+      {
+        label: "应用名称",
+        prop: "name",
+        type: "button",
+        callback: this.detailHotSearch,
+      },
+      {
+        label: "搜索次数",
+        prop: "count",
+        width: 100,
+        align: "center",
+      },
+      {
+        label: "日涨幅",
+        prop: "increases",
+        width: 100,
+        sortType: "0", // 0：升序 1：降序
+        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: {
+                    id: e.app_id,
+                    source: e.source,
+                  },
+                  data_service_type1: 124,
+                });
+              });
+            }
+          }
+        });
+    },
+    getAppEvaluate() {
+      this.$api.dataAnalysis
+        .getAppEvaluate({ type: this.now_app_evalute })
+        .then((response) => {
+          if (response.data.success == 1) {
+            let data = response.data.data;
+            if (this.now_app_evalute == 1) {
+              this.commentlistData = [];
+              if (data && data.length) {
+                data.forEach((e) => {
+                  this.commentlistData.push({
+                    add_time: e.add_time,
+                    message: e.content,
+                    picture_path: e.picture_path,
+                    score: e.score,
+                    user_name: e.picture_path,
+                  });
+                });
+              }
+            } else {
+              this.starlistTotal = 10;
+              this.starlistData = [];
+              var temp = [];
+              if (data && data.length) {
+                data.forEach((e) => {
+                  temp.push(e.num);
+                  this.starlistData.push({
+                    star: e.name,
+                    count: e.num,
+                  });
+                });
+                this.starlistTotal = Math.max(...temp);
+              }
+            }
+          }
+        });
+    },
+    getAppOnlineState() {
+      this.$api.dataAnalysis.getAppOnlineState().then((response) => {
+        if (response.data.success == 1) {
+          let data = response.data.data;
+          this.single_data = {
+            num: data.platform,
+            color: "#274fee",
+            text: "平台应用",
+          };
+          this.single_data1 = {
+            num: data.develop,
+            color: "#e56600",
+            text: "开发者应用",
+          };
+        }
+      });
+    },
+    getAppHot() {
+      this.$api.dataAnalysis.getAppHot().then((response) => {
+        if (response.data.success == 1) {
+          let data = response.data.data;
+          let user = data.user || {};
+          let ave_search = data.ave_search || {};
+          let search_app = data.search_app || [];
+          this.sparkline1 = {
+            arr: user.line_chart ? user.line_chart.series[0].data : [],
+            num: user.today_num ? user.today_num : 0,
+            up: user.ratio ? parseFloat(user.ratio) : 0,
+          };
+          this.sparkline2 = {
+            arr: ave_search.line_chart
+              ? ave_search.line_chart.series[0].data
+              : [],
+            num: ave_search.today_num ? ave_search.today_num : 0,
+            up: ave_search.ratio ? parseFloat(ave_search.ratio) : 0,
+          };
+          this.hotSearchData = [];
+          search_app.forEach((e, idx) => {
+            this.hotSearchData.push({
+              id: e.app_id,
+              source: e.source,
+              hotIndex: idx + 1,
+              name: e.name,
+              count: e.num,
+              increases: parseFloat(e.ratio),
+            });
+          });
+        }
+      });
+    },
+    getAppApproval() {
+      this.$api.dataAnalysis
+        .getAppApproval({ type: this.now_app_approval })
+        .then((response) => {
+          if (response.data.success == 1) {
+            let data = response.data.data;
+            this.serviceSpData = {
+              xAxisData: data.data,
+              seriesData: data.series,
+            };
+          }
+        });
+    },
+    getAppApprovalState() {
+      this.$api.dataAnalysis
+        .getAppApprovalState({ type: this.now_app_approval_state })
+        .then((response) => {
+          if (response.data.success == 1) {
+            let data = response.data.data;
+            this.serviceSpData = {
+              xAxisData: data.data,
+              seriesData: data.series,
+            };
+          }
+        });
+    },
+    detailHotSearch(item) {
+      console.log("查看热搜详情");
+      this.$router.push(`/yygl/0/0/detail/${item.id}?source=${item.source}`);
+    },
+    hotSearchSortChange(sortInfo) {
+      console.log("应用热门搜索: " + sortInfo);
+    },
+    changeAppSpChangeBtn(index) {
+      if (index == 0) {
+        this.now_app_approval = 14;
+      } else {
+        this.now_app_approval = 30;
+      }
+      this.getAppApproval();
+    },
+    changeAppSpBtn(index) {
+      this.now_app_approval_state = index;
+      this.getAppApprovalState();
+    },
+    changeServiceTypeBtn(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) {
+      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;
+      this.now_app_evalute = index + 1;
+      this.getAppEvaluate();
+      console.log("应用评价及评分: " + index);
+    },
+    changeAppTotalChangeBtn(index) {
+      if (index == 0) {
+        this.now_app_count = 14;
+      } else {
+        this.now_app_count = 30;
+      }
+      this.getAppCount();
+    },
   },
 };
 </script>
-<style lang="less" scoped>
+<style scoped>
+.in_analysis {
+  padding: 0 10px 10px;
+  height: 100%;
+  width: 100%;
+  min-width: 1700px;
+}
+.in_l {
+}
+.in_r {
+}
+.in_c {
+}
+.in_block {
+  height: 280px;
+  padding: 10px;
+}
+.height_2x {
+  height: 560px;
+}
+.block {
+  width: 100%;
+  height: 100%;
+}
+.left_1 {
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+}
+.left_block {
+  width: 280px;
+  height: 100%;
+  padding: 10px 0 0 0;
+}
+.left_1_l {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+.left_1_title {
+  width: 100%;
+}
+.left_1_num {
+  font-size: 32px;
+  color: #515fe7;
+  width: 100%;
+}
+.left_1_img {
+  width: 120px;
+  height: 120px;
+  display: inline-block;
+}
+.chain {
+  color: #58617a;
+  font-size: 14px;
+  padding: 10px 0 10px 10px;
+}
+.chain_down {
+  background-color: #fbe8e8;
+  border-radius: 3px;
+  padding: 2px 4px;
+  font-size: 12px;
+  margin-left: 8px;
+  color: #e15260;
+}
+.chain_up {
+  background-color: #e7fdfc;
+  border-radius: 3px;
+  padding: 1px 4px;
+  font-size: 12px;
+  margin-left: 8px;
+  color: #25bdb1;
+}
+.chain_mid {
+  margin-right: 20px;
+}
+.left_1_l_bottom {
+  color: #58617a;
+  padding: 10px;
+}
+.left_1_l_bottom_msg {
+  margin-left: 20px;
+}
+.left_1_msg {
+  display: inline-block;
+  width: 120px;
+  padding: 0 0 10px 10px;
+}
+.left_1_line {
+  width: 90%;
+  margin-left: 5%;
+  height: 1px;
+  background-color: #f2f2f2;
+}
+.left_1_right {
+  width: 120px;
+  height: 100%;
+  display: inline-block;
+}
+.water_polo {
+  width: 110px;
+  margin: 0 auto 20px;
+}
 .default {
-  height: calc(100vh - 160px);
+  text-align: center;
+}
+.default_img {
+  width: 330px;
+  height: 230px;
+}
+.block-radius-content {
+  height: calc(100% - 36px);
+  margin-top: 15px;
+}
+.service-hot-search {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 20px;
-  .default_img {
-    width: 1282px;
-    height: 629px;
-    .default_title {
-      color: #264dd9;
-      font-size: 44px;
-      font-weight: bold;
-      margin-bottom: 40px;
-    }
-    .default_msg {
-      color: #58617a;
-      font-size: 24px;
-      line-height: 44px;
-    }
-  }
+  justify-content: flex-start;
+  align-items: stretch;
+  height: calc(100% - 21px);
+  margin-top: 0;
+}
+.service-hot-search > .left-content {
+  width: 260px;
+  flex-shrink: 0;
+  padding: 0 20px;
+  box-sizing: border-box;
+  margin-right: 10px;
+}
+.service-hot-search > .right-content {
+  flex-grow: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.hot-line {
+  height: 50%;
+}
+.hot-line-title {
+  font-size: 14px;
+  line-height: 36px;
+  color: #8890a7;
+}
+.hot-line-chart {
+  height: calc(100% - 36px);
+}
+.single-charts {
+  float: left;
+  width: 50%;
+}
+.sparkline-text {
+  width: 100%;
+  line-height: 20px;
+}
+.sparkline-text span:nth-of-type(1) {
+  font-size: 20px;
+  color: #274fee;
+}
+.sparkline-text span:nth-of-type(2) {
+  font-size: 12px;
+  width: 62px;
+  float: right;
+  text-align: center;
+  line-height: 20px;
+  height: 20px;
+  border-radius: 3px;
+  margin-top: 3px;
+  margin-right: 2px;
+}
+.sparkline-text-user span:nth-of-type(1) {
+  font-size: 20px;
+  color: #e56600;
 }
 </style>
-<style scoped>
-.default_img {
-  background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center center;
+
+<style>
+.hot-search-table .el-table td,
+.hot-search-table .el-table th {
+  padding: 6px 0;
+}
+.hot-search-table .el-table div.row_action {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/data-analysis/super-service.vue b/src/pages/data-analysis/super-service.vue
index 41ad89b538da52f1a8312b5eacc01e226ba0e808..40518cc2210ee254657d177ef1961bb6bebc4be2 100644
--- a/src/pages/data-analysis/super-service.vue
+++ b/src/pages/data-analysis/super-service.vue
@@ -6,61 +6,831 @@
         $t("lang.data_analysis")
         }}
       </el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/data_analysis/super_service' }">
+        {{
+        $t("lang.operational_analysis")
+        }}
+      </el-breadcrumb-item>
       <el-breadcrumb-item>
         {{
-        $t("lang.my_service_data_analysis")
+        $t("lang.service_data_analysis")
         }}
       </el-breadcrumb-item>
     </el-breadcrumb>
-    <BlockRadius class="default">
-      <div class="default_img">
-        <h1 class="default_title">开发中，敬请期待！</h1>
-        <h3 class="default_msg">
-          如需技术支持
-          <br />请联系管理员
-        </h3>
-      </div>
-    </BlockRadius>
+    <el-row class="in_analysis">
+      <!-- 可横向铺满 -->
+      <el-col :span="6" class="in_left">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius :show_header="true" title="服务总体概况" class="block">
+              <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">{{ overview.serviceTotal }}</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
+              :show_header="true"
+              title="服务状态统计"
+              :buttons_arr="['健康状态', '调用状态']"
+              @changeButton="changeServiceStateBtn"
+              class="block"
+            >
+              <multiple-circle
+                v-if="left_1_state == 0"
+                class="block-radius-content"
+                :data="mult_data_state"
+                :isPercent="false"
+                :show_center_data="false"
+                :bar_width="10 "
+              ></multiple-circle>
+              <starlist
+                v-else
+                class="block-radius-content"
+                :options="linelistData"
+                :show_star="false"
+                style="margin-top: 30px;height: calc(100% - 51px);"
+              ></starlist>
+            </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 class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务应用领域统计"
+              :buttons_arr="['发布的服务', '调用的服务']"
+              @changeButton="changeApplicationFieldBtn"
+              class="block"
+            >
+              <BarChart :x_router="30" :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 height_2x">
+            <block-radius :show_header="true" title="运行拓扑图" class="block">
+              <Topology class="topology" :datas="topology_datas" />
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius :show_header="true" title="服务热门搜索" class="block">
+              <div class="block-radius-content service-hot-search">
+                <div class="left-content">
+                  <div class="hot-line">
+                    <p class="hot-line-title">搜索用户数</p>
+                    <div class="hot-line-chart">
+                      <!-- 折线图 -->
+                      <p class="sparkline-text">
+                        <span>{{sparkline1.num}}</span>
+                        <span
+                          :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_down.png" alt />
+                        </span>
+                      </p>
+                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
+                        <sparklineCurve
+                          :refLineStyles="spRefLineStyles3"
+                          :refLineType="false"
+                          :data="sparkline1.arr"
+                          :limit="sparkline1.arr.length"
+                          :styles="spCurveStyles2"
+                        />
+                      </sparkline>
+                    </div>
+                  </div>
+                  <div class="hot-line">
+                    <p class="hot-line-title">人均搜索次数</p>
+                    <div class="hot-line-chart">
+                      <!-- 折线图 -->
+                      <p class="sparkline-text sparkline-text-user">
+                        <span>{{sparkline2.num}}</span>
+                        <span
+                          :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_down.png" alt />
+                        </span>
+                      </p>
+                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
+                        <sparklineCurve
+                          :refLineStyles="spRefLineStyles3"
+                          :refLineType="false"
+                          :data="sparkline2.arr"
+                          :limit="sparkline2.arr.length"
+                          :styles="spCurveStyles3"
+                        />
+                      </sparkline>
+                    </div>
+                  </div>
+                </div>
+                <div class="right-content apaas_scroll">
+                  <apass-table
+                    class="hot-search-table"
+                    :header="hotSearchHeader"
+                    :data="hotSearchData"
+                    :padding-left="0"
+                  ></apass-table>
+                </div>
+              </div>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              class="block"
+              :show_header="true"
+              title="服务总数变化趋势"
+              :buttons_arr="['近14天', '近30天']"
+              @changeButton="changeServeiceTotalChangeBtn"
+            >
+              <line-chart class="block-radius-content" :zzfw="true" :data="line_data"></line-chart>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="in_right">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务调用排名分析"
+              class="block"
+            >
+              <toplist
+                class="block-radius-content"
+                :options="toplistData"
+                :target-value="toplistTargetValue"
+              ></toplist>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务调用次数分析"
+              :buttons_arr="['近7天', '近30天']"
+              @changeButton="changeServiceCellBtn"
+              class="block"
+            >
+              <Graph :data="graph_arr" />
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务开放程度统计"
+              :buttons_arr="['发布的服务', '调用的服务']"
+              @changeButton="changeOpenessBtnindex"
+              class="block"
+            >
+              <single-circle class="block-radius-content single-charts" :data="single_data"></single-circle>
+              <single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle>
+              <single-circle class="block-radius-content single-charts" :data="single_data2"></single-circle>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务评价及评分"
+              :buttons_arr="['服务评价', '服务评分']"
+              @changeButton="changeServeiceInfoBtn"
+              class="block"
+            >
+              <commentlist
+                v-if="right_3_state == 0"
+                class="block-radius-content"
+                :data="commentlistData"
+              ></commentlist>
+              <starlist
+                v-else
+                class="block-radius-content"
+                :options="starlistData"
+                :total="starlistTotal"
+                style="margin-top: 30px;height: calc(100% - 51px);"
+              ></starlist>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <!-- 不可横向铺满，一般为最后一行 -->
+      <el-col :span="6" class="in_block">
+        <block-radius :show_header="true" title="服务来源机构分析" class="block">
+          <BarChart :data="bar_data_org" :x_router="30" :colors="['#e56600', '#e56600']" />
+        </block-radius>
+      </el-col>
+      <el-col :span="12" class="in_block">
+        <block-radius
+          :show_header="true"
+          title="服务审批变化趋势"
+          class="block"
+          :buttons_arr="['近14天', '近30天']"
+          @changeButton="changeServeiceSpChangeBtn"
+        >
+          <line-chart class="block-radius-content" :zzfw="true" :data="serviceSpData"></line-chart>
+        </block-radius>
+      </el-col>
+      <el-col :span="6" class="in_block">
+        <block-radius :show_header="true" title="服务审批状态分析" class="block">
+          <multiple-circle
+            class="block-radius-content"
+            :data="fwsp_data"
+            :text="fwsp_text"
+            :isFwsp="true"
+          ></multiple-circle>
+        </block-radius>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <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 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";
+import ApassTable from "@/components/apass-table";
+import Graph from "@/components/e-charts/graph";
+import Topology from "@/components/topology.vue";
 export default {
-  methods: {
-    getData() {},
-  },
   components: {
     BlockRadius,
+    Dashboard,
+    multipleCircle,
+    singleCircle,
+    Toplist,
+    Commentlist,
+    Starlist,
+    lineChart,
+    BarChart,
+    ApassTable,
+    Graph,
+    Topology,
+  },
+  data: () => ({
+    overview: {
+      serviceTotal: 0,
+    },
+    left_1_state: 0,
+    left_2_state: 0,
+    left_3_state: 0,
+    center_3_state: 0,
+    center_4_state: 0,
+    right_0_state: 0,
+    right_1_state: 0,
+    right_2_state: 0,
+    right_3_state: 0,
+    last_id: 0,
+    mult_data_state: [
+      { name: "正常", value: 0 },
+      { name: "警告", value: 0 },
+      { name: "错误", value: 0 },
+      { name: "未使用", value: 0 },
+    ],
+    mult_data: [
+      { name: "数据服务", value: 0 },
+      { name: "时空服务", value: 0 },
+      { name: "视频服务", value: 0 },
+      { name: "感知服务", value: 0 },
+      { name: "综合服务", value: 0 },
+    ],
+    fwsp_data: [
+      { name: "已审批", value: 0 },
+      { name: "待审批", value: 0 },
+    ],
+    spIndicatorStyles1: false,
+    spRefLineStyles3: {
+      stroke: "#d14",
+      strokeOpacity: 0,
+      strokeDasharray: "2, 2",
+    },
+    spCurveStyles2: {
+      stroke: "#274fee",
+      fill: "#274fee",
+    },
+    spCurveStyles3: {
+      stroke: "#e56600",
+      fill: "#e56600",
+    },
+    sparkline1: {
+      num: 0,
+      up: 0,
+      arr: [],
+    },
+    sparkline2: {
+      num: 0,
+      up: 0,
+      arr: [],
+    },
+    text: "服务总数",
+    fwsp_text: "服务审批",
+    single_data: {
+      num: 0,
+      color: "#25bdb1",
+      text: "共享",
+    },
+    single_data1: {
+      num: 0,
+      color: "#f5ab4c",
+      text: "受限",
+    },
+    single_data2: {
+      num: 0,
+      color: "#e15260",
+      text: "敏感",
+    },
+    serviceSpData: {
+      xAxisData: [],
+      seriesData: [
+        {
+          name: "已审批",
+          data: [],
+        },
+        {
+          name: "未审批",
+          data: [],
+        },
+      ],
+    },
+    line_data: {
+      xAxisData: [],
+      seriesData: [
+        {
+          name: "上架中",
+          data: [],
+        },
+        {
+          name: "未上架",
+          data: [],
+        },
+      ],
+    },
+    das_data: {
+      data: 0,
+      text: "健康占比",
+    },
+    bar_data: {
+      legendData: [],
+      seriesData: [],
+    },
+    bar_data_org: {
+      legendData: [],
+      seriesData: [],
+    },
+    toplistData: [], // 服务调用排名分析
+    toplistTargetValue: 40, // 服务调用排名分析 目标值
+    commentlistData: [], // 服务评价
+    linelistData: [], // 服务状态统计
+    starlistData: [], // 服务评分
+    starlistTotal: 15,
+    hotSearchHeader: [], // 热门搜索 表头
+    hotSearchData: [], // 热门搜索 数据
+    graph_arr: {
+      legend: {
+        data: [],
+      },
+      data: [],
+      series: [
+        { name: "被调用次数", data: [] },
+        { name: "调用次数", 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.getServiceHotSearch();
+    this.getServiceApprovalChanges();
+    this.getServiceApprovalStatus();
+    this.hotSearchHeader = [
+      {
+        label: "服务排名",
+        type: "hot-index",
+        width: 100,
+        align: "center",
+      },
+      {
+        label: "服务名称",
+        prop: "name",
+        type: "button",
+        callback: this.detailHotSearch,
+      },
+      {
+        label: "搜索次数",
+        prop: "count",
+        width: 100,
+        align: "center",
+      },
+      {
+        label: "日涨幅",
+        prop: "increases",
+        width: 100,
+        sortType: "0", // 0：升序 1：降序
+        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) {
+          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;
+            if (this.toplistData && this.toplistData.length != 0) {
+              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) {
+            if (response.data.data) {
+              this.commentlistData = response.data.data.concat(
+                this.commentlistData
+              );
+            }
+            this.last_id = this.commentlistData[0].last_id;
+          }
+        });
+    },
+    getServiceApprovalChanges() {
+      this.$api.dataAnalysis
+        .getServiceApprovalChanges({
+          type: this.center_4_state,
+        })
+        .then((response) => {
+          if (response.data.success == 1) {
+          }
+        });
+    },
+    getServiceApprovalStatus() {
+      this.$api.dataAnalysis.getServiceApprovalStatus().then((response) => {
+        if (response.data.success == 1) {
+          this.fwsp_data = response.data.data;
+        }
+      });
+    },
+    getServiceTransfer() {},
+    detailHotSearch(item) {
+      this.$router.push("/fwgl/0/0/servicedetail/" + item.id);
+    },
+    changeServeiceSpChangeBtn(index) {
+      this.center_4_state = index;
+      this.getServiceApprovalChanges();
+    },
+    changeServiceTypeBtn(index) {
+      this.left_2_state = index;
+      this.getServiceType();
+    },
+    changeApplicationFieldBtn(index) {
+      this.left_3_state = index;
+      this.getServiceSectorse();
+    },
+    changeServeiceApplyCountBtn(index) {
+      this.right_0_state = index;
+      this.getServiceRequest();
+    },
+    changeServeiceInfoBtn(index) {
+      this.right_3_state = index;
+      this.getServiceEstimated();
+    },
+    changeOpenessBtnindex(index) {
+      this.right_2_state = index;
+      this.getServiceOpenness();
+    },
+    changeServiceCellBtn(index) {
+      this.right_1_state = index;
+      this.getServiceTrend();
+    },
+    changeServeiceTotalChangeBtn(index) {
+      this.center_3_state = index;
+      this.getServiceOnlineState();
+    },
+    getTopologyData() {
+      this.$api.workbench.getServiceTopology().then((response) => {
+        this.topology_datas = response.data.elements;
+      });
+    },
+    changeServiceStateBtn(index) {
+      this.left_1_state = index;
+      if (index == 0) {
+        this.getServiceHealth();
+      } else {
+        this.getServiceTransfer();
+      }
+    },
   },
 };
 </script>
-<style lang="less" scoped>
+<style scoped>
+.in_analysis {
+  padding: 0 10px 10px;
+  height: 100%;
+  width: 100%;
+  min-width: 1700px;
+}
+.in_l {
+}
+.in_r {
+}
+.in_c {
+}
+.in_block {
+  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: 40%;
+  height: 100%;
+  display: inline-block;
+  padding: 10px 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%;
+  height: 100%;
+  display: inline-block;
+}
 .default {
-  height: calc(100vh - 160px);
+  text-align: center;
+}
+.default_img {
+  width: 330px;
+  height: 230px;
+}
+.block-radius-content {
+  height: calc(100% - 36px);
+  margin-top: 15px;
+}
+.service-hot-search {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 20px;
-  .default_img {
-    width: 1282px;
-    height: 629px;
-    .default_title {
-      color: #264dd9;
-      font-size: 44px;
-      font-weight: bold;
-      margin-bottom: 40px;
-    }
-    .default_msg {
-      color: #58617a;
-      font-size: 24px;
-      line-height: 44px;
-    }
-  }
+  justify-content: flex-start;
+  align-items: stretch;
+  height: calc(100% - 21px);
+  margin-top: 0;
+}
+.service-hot-search > .left-content {
+  width: 260px;
+  flex-shrink: 0;
+  padding: 0 20px;
+  box-sizing: border-box;
+  margin-right: 10px;
+}
+.service-hot-search > .right-content {
+  flex-grow: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.hot-line {
+  height: 50%;
+}
+.hot-line-title {
+  font-size: 14px;
+  line-height: 36px;
+  color: #8890a7;
+}
+.hot-line-chart {
+  height: calc(100% - 36px);
+  position: relative;
+}
+.sparkline-text {
+  width: 100%;
+  line-height: 20px;
+}
+.sparkline-text span:nth-of-type(1) {
+  font-size: 20px;
+  color: #274fee;
+}
+.sparkline-text span:nth-of-type(2) {
+  font-size: 12px;
+  padding: 0 10px;
+  float: right;
+  text-align: center;
+  line-height: 20px;
+  height: 20px;
+  border-radius: 3px;
+  margin-top: 3px;
+  margin-right: 2px;
+}
+.sparkline-text-user span:nth-of-type(1) {
+  font-size: 20px;
+  color: #e56600;
+}
+.topology {
+  width: 100%;
+  height: calc(100% - 20px);
+}
+.single-charts {
+  float: left;
+  width: 33.3%;
 }
 </style>
-<style scoped>
-.default_img {
-  background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center center;
+
+<style>
+.hot-search-table .el-table td,
+.hot-search-table .el-table th {
+  padding: 6px 0;
+}
+.hot-search-table .el-table div.row_action {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
 }
 </style>
\ No newline at end of file
diff --git a/src/request/api/data-analysis.js b/src/request/api/data-analysis.js
index 58f300084957cbd5410d11eafc17036e4e08e8c0..b66548ff870aebb5f519c03635e18f8c644ea94e 100644
--- a/src/request/api/data-analysis.js
+++ b/src/request/api/data-analysis.js
@@ -37,6 +37,12 @@ const dataAnalysis = {
   getServiceHotSearch() {
     return axios.get(`/apaas/service/v3/statistics/normal/service/search`);
   },
+  getServiceApprovalChanges() {
+    return axios.get(``);
+  },
+  getServiceApprovalStatus() {
+    return axios.get(``);
+  },
 
   //app
   getAppOverview(){
@@ -69,6 +75,12 @@ const dataAnalysis = {
   getAppHot(){
     return axios.get(`/apaas/hubApi/analysis/appSearch`);
   },
+  getAppApproval(params) {
+    return axios.get(`/apaas/hubApi/analysis/approvalChanges?day=${params.type}`);
+  },
+  getAppApprovalState(params) {
+    return axios.get(`/apaas/hubApi/analysis/approvalStatus?style=${params.type}`);
+  },
 }
 
 export default dataAnalysis;