0813

src/components/e-charts/bar-chartTwo.vue

+<template>
+  <chart :options="bar()" class="bar" />
+</template>
+
+<script>
+import { graphic } from "echarts/lib/export";
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    bar_width: {
+      type: Number,
+      default: 12
+    },
+    colors: {
+      type: Array,
+      default: () => {
+        return ["#515fe7", "#e56600"];
+      }
+    },
+    bar_border_radius: {
+      type: Array,
+      default: () => {
+        return [10, 10, 10, 10];
+      }
+    },
+    show_split: {
+      type: Boolean,
+      default: false
+    },
+    x_router: {
+      type: Number,
+      default: 0
+    }
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {
+    bar() {
+      let self = this;
+      return {
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 25,
+          top: 25,
+          containLabel: true
+        },
+        legend: {
+          left: "right",
+          itemWidth: 10,
+          itemHeight: 10,
+          orient: "horizontal",
+          backgroundColor: "#f4f7fc"
+        },
+        color: this.colors,
+        tooltip: {},
+        dataset: {
+          source: self.data
+        },
+        xAxis: {
+          type: "category",
+          //   data: self.data.legendData,
+          axisLabel: {
+            margin: 20,
+            color: "#0d1847",
+            textStyle: {
+              fontSize: 12
+            },
+            interval: 0,
+            rotate: self.x_router,
+            formatter: function(value) {
+              let valueTxt = "";
+              if (value.length > 6) {
+                valueTxt = value.substring(0, 5) + "...";
+              } else {
+                valueTxt = value;
+              }
+              return valueTxt;
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#f2f2f2"
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ["#fff", "#f8f9fd"],
+              opacity: 0.5
+            },
+            interval: 0
+          }
+        },
+        yAxis: [
+          {
+            axisLabel: {
+              color: "#a9aec0",
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            minInterval: 1,
+            axisLine: {
+              lineStyle: {
+                color: "rgba(0, 0, 0, 0)"
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#f2f2f2",
+                type: "solid"
+              }
+            }
+          }
+        ],
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+        series: [
+          {
+            type: "bar",
+            type: "bar",
+            barWidth: self.bar_width,
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return new graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: self.colors[0] // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: self.colors[0] // 100% 处的颜色
+                      }
+                    ],
+                    false
+                  );
+                },
+                barBorderRadius: self.bar_border_radius
+              }
+            }
+          },
+          {
+            type: "bar",
+            type: "bar",
+            barWidth: self.bar_width,
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return new graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: self.colors[1] // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: self.colors[1] // 100% 处的颜色
+                      }
+                    ],
+                    false
+                  );
+                },
+                barBorderRadius: self.bar_border_radius
+              }
+            }
+          }
+        ]
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.bar {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/components/e-charts/doubleLine.vue

+<template>
+  <chart :options="bar()" class="bar" />
+</template>
+
+<script>
+import { graphic } from "echarts/lib/export";
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          title:[],
+          dataOne:[],
+          dataTwo:[]
+        };
+      }
+    },
+    bar_width: {
+      type: Number,
+      default: 12
+    },
+    colors: {
+      type: Array,
+      default: () => {
+        return [ "#1034eb", "#e56600"];
+      }
+    },
+    bar_border_radius: {
+      type: Array,
+      default: () => {
+        return [10, 0, 0, 10];
+      }
+    },
+    bar_border_radius_two: {
+      type: Array,
+      default: () => {
+        return [0, 10, 10, 0];
+      }
+    },
+    show_split: {
+      type: Boolean,
+      default: false
+    },
+    x_router: {
+      type: Number,
+      default: 0
+    }
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {
+    bar() {
+      let self = this;
+      return {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: function(params, ticket, callback) {
+            // console.log(params);
+            var res = params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              res +=
+                "<br/>" +
+                params[i].seriesName +
+                " : " +
+                Math.abs(params[i].value);
+            }
+            setTimeout(function() {
+              // 仅为了模拟异步回调
+              callback(ticket, res);
+            }, 500);
+            return "loading...";
+          }
+        },
+        legend: {
+          data: ["设置警告值", "实际访问值"],
+          left: "right",
+          itemWidth: 10,
+          itemHeight: 10,
+          orient: "horizontal",
+          backgroundColor: "#f4f7fc"
+        },
+        color:self.colors,
+        grid: {
+          left: "1%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: [
+          {
+            axisLabel: {
+              formatter: function(value) {
+                return Math.abs(value); //显示的数值都取绝对值
+              }
+            },
+            type: "value",
+            axisTick: {
+              show: false
+            },
+            // splitLine: {
+            //   show: false
+            // }
+            // splitArea: {
+            //   show: true,
+            //   areaStyle: {
+            //     color: ["#fff", "#f8f9fd"],
+            //     opacity: 0.5
+            //   },
+            //   interval: 0
+            // }
+          }
+        ],
+        yAxis: [
+          {
+            type: "category",
+            axisTick: { show: false },
+            axisLabel: {
+              color: "#333",
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            minInterval: 1,
+            data: self.data.title,
+            // splitLine: {
+            //   show: false
+            // },
+            axisLine:{
+              show:false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "设置警告值",
+            type: "bar",
+            stack: "总量",
+            label: {
+              normal: {
+                show: false,
+                position: "right"
+              }
+            },
+             barWidth : 10,//柱图宽度
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return new graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: self.colors[1] // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: self.colors[1] // 100% 处的颜色
+                      }
+                    ],
+                    false
+                  );
+                },
+                barBorderRadius: self.bar_border_radius_two
+              }
+            },
+            data: self.data.dataOne
+          },
+          {
+            name: "实际访问值",
+            type: "bar",
+            stack: "总量",
+            label: {
+              normal: {
+                show: false,
+                position: "left",
+                formatter: function(v) {
+                  return Math.abs(v.data);
+                }
+              }
+            },
+             barWidth : 10,//柱图宽度
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return new graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: self.colors[0] // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: self.colors[0] // 100% 处的颜色
+                      }
+                    ],
+                    false
+                  );
+                },
+                barBorderRadius: self.bar_border_radius
+              }
+            },
+            data: self.data.dataTwo
+          }
+        ]
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.bar {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/components/e-charts/gk-circle.vue

+<template>
+  <chart :options="dashboard()" class="dashboard" />
+</template>
+
+<script>
+import { graphic } from "echarts/lib/export";
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          data: 0,
+          text: ""
+        };
+      }
+    },
+    dangerousValue: {
+      type: String,
+      default: ""
+    },
+    is_word: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {
+    dashboard() {
+      let self = this;
+      return {
+        title: [
+          {
+            text: self.data.data + "{a|%}",
+            show: !self.is_word,
+            x: "center",
+            y: "30%",
+            textStyle: {
+              fontSize: 36,
+              fontWeight: "lighter",
+              color:
+                self.dangerousValue == "workplace" ? ["#0d1847"] : ["#67828c"],
+              rich: {
+                a: {
+                  fontSize: 14,
+                  padding: [0, 0, 4, 0]
+                }
+              }
+            }
+          },
+          {
+            text: self.data.text,
+            show: !self.is_word,
+            x: "center",
+            y: "58%",
+            textStyle: {
+              fontSize: 12,
+              fontWeight: "normal",
+              color: "#707693"
+            }
+          },
+          {
+            text: self.data.text,
+            show: self.is_word,
+            x: "center",
+            y: "75%",
+            textStyle: {
+              fontSize: 16,
+              fontWeight: "normal",
+              color: "#333"
+            }
+          },
+          {
+            text: self.data.data + "%",
+            show: self.is_word,
+            x: "center",
+            y: "center",
+            textStyle: {
+              fontSize: 22,
+              fontWeight: "normal",
+              color:
+                self.data.data > 75
+                  ? "#00beb2" //green
+                  : self.data.data >= 50
+                  ? "#38aef9" //blue
+                  : self.data.data > 25
+                  ? "#ff7200" //yellow
+                  : "#da4251" //red
+            }
+          }
+        ],
+        angleAxis: {
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          min: 0,
+          max: 138,
+          boundaryGap: ["0", "100"],
+          startAngle: 220,
+          endAngle: -40
+        },
+        radiusAxis: {
+          type: "category",
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        },
+        polar: {
+          radius: "110%"
+        },
+        series: [
+          {
+            type: "bar",
+            data: [, self.data.data],
+            coordinateSystem: "polar",
+            barMaxWidth: 10,
+            z: 1,
+            name: "B",
+            roundCap: true,
+            itemStyle: {
+              normal: {
+                color: new graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color:
+                      self.dangerousValue == "high"
+                        ? self.data.data >= 80
+                          ? "#f7f1d5"
+                          : "#d5f7e8"
+                        : self.dangerousValue == "workplace"
+                        ? self.data.data >= 80
+                          ? "#f7f1d5"
+                          : "#e6ebfe"
+                        : self.data.data > 75
+                        ? "#d5f7e8"
+                        : self.data.data >= 50
+                        ? "#e5f4fe"
+                        : self.data.data > 25
+                        ? "#ffd98f"
+                        : "#da4251"
+                  },
+                  {
+                    offset: 1,
+                    color:
+                      self.dangerousValue == "high"
+                        ? self.data.data >= 80
+                          ? "#da4251" // red
+                          : "#00beb2" //green
+                        : self.dangerousValue == "workplace"
+                        ? self.data.data >= 80
+                          ? "#da4251"
+                          : "#515fe7"
+                        : self.data.data > 75
+                        ? "#00beb2" //green
+                        : self.data.data >= 50
+                        ? "#38aef9" //blue
+                        : self.data.data > 25
+                        ? "#ff7200" //yellow
+                        : "#f7f1d5" //red
+                  }
+                ])
+              }
+            },
+            barGap: "-100%"
+          },
+          {
+            type: "bar",
+            data: [, 100],
+            z: 0,
+            silent: true,
+            coordinateSystem: "polar",
+            barMaxWidth: 10,
+            name: "C",
+            roundCap: true,
+            color: "#f4f4f5",
+            barGap: "-100%"
+          },
+          {
+            type: "gauge",
+            radius: "70%",
+            min: 0, //最小刻度
+            max: 100, //最大刻度
+            splitNumber: 10, //刻度数量
+            startAngle: 220,
+            endAngle: -40,
+            axisLabel: {
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: [[1, "rgba(0,0,0,0)"]]
+              }
+            }, //仪表盘轴线
+            axisLabel: {
+              show: false
+            }, //刻度标签。
+            axisTick: {
+              show: true,
+              splitNumber: 5,
+              lineStyle: {
+                color: "#c9cee0",
+                width: 1
+              },
+              length: 4
+            }, //刻度样式
+            splitLine: {
+              show: true,
+              length: 6,
+              lineStyle: {
+                color: "#c9cee0"
+              }
+            }, //分隔线样式
+            detail: {
+              show: false
+            },
+            pointer: {
+              show: false
+            }
+          },
+          {
+            name: "point",
+            type: "scatter",
+            coordinateSystem: "polar",
+            barGap: "-100%",
+            zlevel: 0,
+            symbol: "circle",
+            symbolSize: 6,
+            itemStyle: {
+              normal: {
+                show: true,
+                color: "#fff"
+              }
+            },
+
+            data: [, self.data.data]
+          }
+        ]
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.dashboard {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/components/e-charts/gkmultiple_circle.vue

+<template>
+  <div :id="yylx_asy" class="dashboard"></div>
+</template>
+
+<script>
+import uuidv1 from "uuid/v1";
+var echarts = require("echarts");
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    text: {
+      type: String,
+      default: ""
+    },
+    show_center_data: {
+      type: Boolean,
+      default: true
+    },
+    bar_width: {
+      type: Number,
+      default: 5
+    }
+  },
+  components: {},
+  data() {
+    return {
+      yylx_asy: uuidv1()
+    };
+  },
+  watch: {
+    data: {
+      handler() {
+        this.init_yylx_asy(this.data, this.text);
+      }
+    }
+  },
+  computed: {},
+  created() {},
+  mounted() {
+    this.init_yylx_asy(this.data, this.text);
+  },
+  methods: {
+    init_yylx_asy(data, text) {
+      var options = this.init_circle(data, text);
+      window[this.yylx_asy] = echarts.init(
+        document.getElementById(this.yylx_asy)
+      );
+      window[this.yylx_asy].setOption(options, true);
+    },
+    init_circle(data_val, text) {
+      // var data_val = data_val;
+      var rich = {
+        white: {
+          color: "#ddd",
+          align: "center",
+          padding: [3, 0]
+        }
+      };
+      var placeHolderStyle = {
+        normal: {
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          color: "rgba(0, 0, 0, 0)",
+          borderColor: "rgba(0, 0, 0, 0)",
+          borderWidth: 0
+        }
+      };
+      var data = [];
+      var total = 0;
+      var color = ["#274fee","#e56600", "#25bdb1", "#ffc95c" , "#e15260"];
+      var legendarr = [];
+      var temp2_data = 0;
+      data_val.forEach(e => {
+        temp2_data = temp2_data + e.value;
+      });
+      for (var i = 0; i < data_val.length; i++) {
+        data.push(
+          {
+            value: data_val[i].value,
+            name: data_val[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: this.bar_width,
+                // shadowBlur: 20,
+                borderColor: color[i]
+                // shadowColor: color[i],
+              }
+            }
+          },
+          {
+            value: temp2_data / 30,
+            name: "",
+            itemStyle: placeHolderStyle
+          }
+        );
+        legendarr.push(data_val[i].name);
+      }
+      for (var i = 0; i < data_val.length; i++) {
+        total += data_val[i].value;
+      }
+      var seriesObj = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [65, 70],
+          center: ["50%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,
+                position: "outside",
+                color: "#58617a",
+                formatter: params => {
+                  if (params.name !== "") {
+                    return params.value+'个'
+                  } else {
+                    return "";
+                  }
+                },
+                rich: rich
+              }
+            }
+          },
+          data: data
+        }
+      ];
+      var options = {
+        title: {
+          text: this.show_center_data ? total : "",
+          textStyle: {
+            color: "#000",
+            fontSize: 40,
+            fontWeight: 200
+          },
+          subtext: text,
+          subtextStyle: {
+            color: "#c9cedd"
+          },
+          itemGap: -10, // 主副标题距离
+          left: "center",
+          top: "center"
+        },
+        color: color,
+        tooltip: {
+          show: false
+        },
+        legend: {
+          bottom: -5,
+          left: "center",
+          itemWidth: 10,
+          itemHeight: 10,
+          orient: "horizontal",
+          data: legendarr,
+          backgroundColor: "#f4f7fc"
+        },
+        toolbox: {
+          show: false
+        },
+
+        series: seriesObj
+      };
+      return options;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dashboard {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/e-charts/line_chart.vue

@@ -25,14 +25,22 @@ export default {
         };
       }
     },
+    showShadow:{
+      type:Boolean,
+      default:true
+    },
+    zzfw: {
+      type: Boolean,
+      default: false
+    },
     targetValue: {
       type: Number,
       default: () => 0
     },
-    area_flag:{
+    area_flag: {
       type: Boolean,
       default: true
-    },
+    }
   },
   components: {},
   data() {
@@ -61,6 +69,7 @@ export default {
         "#8B5CFF",
         "#00CA69"
       ];
+      let color2 = ["#515fe7", "#ef9433","#37c299"];
       const hexToRgba = (hex, opacity) => {
         let rgbaColor = "";
         let reg = /^#[\da-f]{6}$/i;
@@ -83,32 +92,40 @@ export default {
           zlevel: 3,
           lineStyle: {
             normal: {
-              color: color[idx],
+              color: this.zzfw ? color2[idx] : color[idx],
               shadowBlur: 5,
-              shadowColor: hexToRgba(color[idx], 0.5),
+              shadowColor: hexToRgba(this.zzfw ? color2[idx] : color[idx], 0.5),
               shadowOffsetY: 10
             }
           },
           areaStyle: {
             normal: {
-              color:this.area_flag? new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: hexToRgba(color[idx], 0.3)
-                  },
-                  {
-                    offset: 1,
-                    color: hexToRgba(color[idx], 0.1)
-                  }
-                ],
-                false
-              ):'rgba(0,0,0,0)',
-              shadowColor: hexToRgba(color[idx], 0.1),
+              color: !this.showShadow?'transparent':this.area_flag
+                ? new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: hexToRgba(
+                          this.zzfw ? color2[idx] : color[idx],
+                          0.3
+                        )
+                      },
+                      {
+                        offset: 1,
+                        color: hexToRgba(
+                          this.zzfw ? color2[idx] : color[idx],
+                          0.1
+                        )
+                      }
+                    ],
+                    false
+                  )
+                : "rgba(0,0,0,0)",
+              shadowColor: !this.showShadow?'none':hexToRgba(this.zzfw ? color2[idx] : color[idx], 0.1),
               shadowBlur: 10
             }
           },
@@ -123,9 +140,9 @@ export default {
 
       var option = {
         // backgroundColor: bgColor,
-        color: color,
+        color: this.zzfw ? color2 : color,
         legend: {
-          show:yarr.length>=2,//是否显示图例
+          show: yarr.length >= 2, //是否显示图例
           right: "center",
           bottom: 0,
           itemWidth: 10,
@@ -148,7 +165,7 @@ export default {
           left: 15,
           right: 30,
           bottom: 30,
-          containLabel: true,
+          containLabel: true
         },
         xAxis: [
           {

src/components/e-charts/multiple_circle.vue

@@ -24,6 +24,14 @@ export default {
     bar_width: {
       type: Number,
       default: 5
+    },
+    isFwsp: {
+      type: Boolean,
+      default: false
+    },
+    isPercent: {
+      type: Boolean,
+      default: true
     }
   },
   components: {},
@@ -76,7 +84,8 @@ export default {
       };
       var data = [];
       var total = 0;
-      var color = ["#274fee", "#25bdb1", "#ffc95c", "#e56600", "#e15260"];
+      var color = ["#274fee", "#f5ab4c", "#e15260", "#a9aec0", "#e56600"];
+      var color2 = ["#ef9433", "#515fe7"];
       var legendarr = [];
       var temp2_data = 0;
       data_val.forEach(e => {
@@ -91,7 +100,7 @@ export default {
               normal: {
                 borderWidth: this.bar_width,
                 // shadowBlur: 20,
-                borderColor: color[i]
+                borderColor: this.isFwsp ? color2[i] : color[i]
                 // shadowColor: color[i],
               }
             }
@@ -122,12 +131,23 @@ export default {
                 position: "outside",
                 color: "#58617a",
                 formatter: params => {
-                  var percent = 0;
-                  percent = total != 0 ? ((params.value / total) * 100).toFixed(2) : 0;
-                  if (params.name !== "") {
-                    return percent + "%";
+                  if (this.isPercent) {
+                    var percent = 0;
+                    percent =
+                      total != 0
+                        ? ((params.value / total) * 100).toFixed(2)
+                        : 0;
+                    if (params.name !== "") {
+                      return percent + "%";
+                    } else {
+                      return "";
+                    }
                   } else {
-                    return "";
+                    if (params.name !== "") {
+                      return params.value + "个";
+                    } else {
+                      return "";
+                    }
                   }
                 },
                 rich: rich
@@ -153,7 +173,7 @@ export default {
           left: "center",
           top: "center"
         },
-        color: color,
+        color: this.isFwsp ? color2 : color,
         tooltip: {
           show: false
         },

src/components/e-charts/the-list.vue

+<template>
+  <div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
+    <ul>
+      <li class="item" v-for="(item ,idx) in data" :key="idx">
+        <span :class="idx==0?'one':idx==1?'two':idx==2?'three':'lis'" class="pm">{{idx+1}}.</span>
+        <img :src="item.img" alt />
+        <p class="name">{{item.name}}</p>
+        <p class="init">{{item.init}}</p>
+        <span class="count">{{getCount(item.count)}}次</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [
+          {
+            name: "123",
+            init: "122222",
+            count: 1080
+          }
+        ];
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    getCount(val) {
+      let a = val + "";
+      //   console.log((val + "").length);
+      if (a.length > 3) {
+        return a.substr(0, 1) + "," + a.substr(1);
+      } else {
+        return a;
+      }
+    },
+    autoScroll() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+
+      this.$el.scrollTop = 0;
+
+      this.timer = setInterval(() => {
+        let itemHeight = 50;
+        let curScrollTop = this.$el.scrollTop + itemHeight;
+        if (
+          curScrollTop >=
+          this.$el.scrollHeight - this.$el.clientHeight + itemHeight
+        ) {
+          curScrollTop = 0;
+        }
+        this.$el.scrollTop = Math.min(
+          curScrollTop,
+          this.$el.scrollHeight - this.$el.clientHeight
+        );
+      }, 1500);
+    },
+    mouseenter() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    },
+    mouseleave() {
+      this.autoScroll();
+    }
+  },
+  mounted() {
+    this.autoScroll();
+    window.addEventListener("resize", () => {
+      this.autoScroll();
+    });
+  }
+};
+</script>
+
+<style scoped>
+.top_list {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+li {
+  list-style: none;
+}
+.item {
+  height: 50px;
+  position: relative;
+}
+.item img {
+  height: 35px;
+  width: 35px;
+  border-radius: 50%;
+  margin-left: 15px;
+  margin-top: 7px;
+}
+.item .pm {
+  width: 14px;
+  height: 12px;
+  font-family: Arial-Black;
+  font-style: italic;
+  font-stretch: normal;
+  letter-spacing: 0px;
+  font-weight: bold;
+  font-size: 20px;
+  float: left;
+  margin-top: 12px;
+}
+.one {
+  color: #d9ac64;
+}
+.two {
+  color: #c4c4c0;
+}
+.three {
+  color: #ba6e40;
+}
+.lis {
+  color: #333;
+}
+.item p {
+  display: inline-block;
+}
+.item .name {
+  position: absolute;
+  left: 85px;
+}
+.item .init {
+  position: absolute;
+  top: 25px;
+  left: 85px;
+  color: #8890a7;
+}
+.item .count {
+  float: right;
+  margin-right: 25px;
+  margin-top: 15px;
+  height: 19px;
+  font-family: ArialMT;
+  font-size: 22px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 17px;
+  letter-spacing: 0px;
+  color: #515fe7;
+}
+</style>
\ No newline at end of file

src/components/e-charts/toplist.vue

@@ -11,14 +11,16 @@
         <div class="item_detail">
           <p class="item_info">
             <span
+              v-if="isShowjt"
               class="text_clip is_link"
               @click="getDetail(option.service_id, option.data_service_type1)"
             >
               {{ option.service_name }}
               <i class="el-icon-arrow-right"></i>
             </span>
+            <span v-else>{{ option.service_name }}</span>
             <span
-              v-text="helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')"
+              v-text="isPercent?((option.request_count/targetValue)*100).toFixed(2)+'%':helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')"
             ></span>
           </p>
           <el-progress
@@ -44,6 +46,14 @@ export default {
     targetValue: {
       type: Number,
       default: () => 0
+    },
+    isShowjt:{
+      type:Boolean,
+      default:true
+    },
+    isPercent:{
+      type:Boolean,
+      default:false
     }
   },
   data() {
@@ -75,11 +85,9 @@ export default {
       this.timer = setInterval(() => {
         let itemHeight = 50;
         let curScrollTop = this.$el.scrollTop + itemHeight;
-
         if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) {
           curScrollTop = 0;
         }
-
         this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight);
       }, 1500);
     },

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

@@ -15,7 +15,7 @@
                   <div ref="left_1_l" class="left_1_l">
                     <img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
                     <div class="left_1_msg">
-                      <div class="left_1_title">应用总数</div> 
+                      <div class="left_1_title">应用总数</div>
                       <div class="left_1_num">{{overview.total}}</div>
                     </div>
                   </div>
@@ -102,7 +102,17 @@
                       <!-- 折线图 -->
                       <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>
+                        <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
@@ -121,7 +131,17 @@
                       <!-- 折线图 -->
                       <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>
+                        <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
@@ -155,7 +175,12 @@
               :buttons_arr="['近14天', '近30天']"
               @changeButton="changeAppTotalChangeBtn"
             >
-              <line-chart v-if="JSON.stringify(line_data)!=='{}'" class="block-radius-content" :data="line_data"></line-chart>
+              <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>
@@ -213,9 +238,31 @@
           <BarChart :data="bar_data_org" :colors="['#274fee', '#274fee']" :x_router="30" />
         </block-radius>
       </el-col>
-      <el-col :span="18" class="in_block default">
-        <block-radius class="block">
-          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
+      <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>
@@ -249,79 +296,430 @@ export default {
     WaterPolo
   },
   data: () => ({
-    water_polo: [0, 0],
+    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,
-    mult_data: [],
+      month_chain: 12,
+      week_chain: 20,
+      total: 1324,
+      day_count: 21
+    },
+    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,
+    mult_data: [
+      { name: "基础工具", value: 22 },
+      { name: "通用应用", value: 12 },
+      { name: "业务应用", value: 10 }
+    ],
     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 }
+    ],
+    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
+          ]
+        }
+      ]
     },
     spCurveStyles3: {
       stroke: "#e56600",
-      fill: "#e56600",
+      fill: "#e56600"
     },
-    sparkline1:{
-      arr:[1,2,3,4,8,9,10,21],
-      num:21,
-      up:15.3
+    sparkline1: {
+      arr: [1, 2, 3, 4, 8, 9, 10, 21],
+      num: 21,
+      up: 15.3
     },
-    sparkline2:{
-      arr:[1,2,3,4,8,9,10,21],
-      num:18,
-      up:-19.3
+    sparkline2: {
+      arr: [1, 2, 3, 4, 8, 9, 10, 21],
+      num: 18,
+      up: -19.3
     },
     single_data: {
-      num: 0,
+      num: 54,
       color: "#274fee",
       text: "平台应用"
     },
     single_data1: {
-      num: 0,
+      num: 56,
       color: "#e56600",
       text: "开发者应用"
     },
-    line_data: {},
-    bar_data_org: {},
-    bar_data_area: {}, 
-    graph_arr: {},
-    toplistData: [], // 应用部署排名分析
+    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
+          ]
+        }
+      ]
+    },
+    bar_data_org: {
+      legendData: [
+        "省公安厅",
+        "省发改委",
+        "贵州省公安厅",
+        "贵州省发改委",
+        "贵州省公安厅"
+      ],
+      seriesData: [322, 454, 266, 399, 222, 167]
+    },
+    bar_data_area: {
+      legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
+      seriesData: [322, 454, 566, 399, 222, 167]
+    },
+    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] }
+      ]
+    },
+    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: [], // 应用评分
+    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: "个"
+      }
+    ], // 应用评分
     starlistTotal: 10,
     hotSearchHeader: [], // 热门搜索 表头
-    hotSearchData: [] // 热门搜索 数据
+    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
+      }
+    ] // 热门搜索 数据
   }),
   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.hotSearchHeader = [
       {
         label: "排名",
@@ -351,227 +749,960 @@ export default {
     ];
   },
   methods: {
-    getAppOverview(){
+    getAppOverview() {
       this.$api.dataAnalysis.getAppOverview().then(response => {
         if (response.data.success == 1) {
-          let data = response.data.data
-          this.overview= {
+          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)]
+            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
-        }
-      })
+    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;
+          }
+        });
     },
-    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
+    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;
           }
-        }
-      })
+        });
     },
-    getAppUsedArea(){
-      this.$api.dataAnalysis.getAppUsedArea({type:this.now_app_used_area}).then(response => {
+    getAppSourceOri() {
+      this.$api.dataAnalysis.getAppSourceOri().then(response => {
         if (response.data.success == 1) {
-          let data = response.data.data
-          this.bar_data_area= {
+          let data = response.data.data;
+          this.bar_data_org = {
             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
+    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
+            };
           }
-        }
-      })
+        });
     },
-    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
-              })
-            });
+    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
+            };
           }
-        }
-      })
+        });
     },
-    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){
+    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.commentlistData.push({
-                  add_time: e.add_time,
-                  message: e.content,
-                  picture_path: e.picture_path,
-                  score: e.score,
-                  user_name: e.picture_path,
-                })
+                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
+                });
               });
             }
-          }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)
+          }
+        });
+    },
+    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 =>{
+    getAppOnlineState() {
+      this.$api.dataAnalysis.getAppOnlineState().then(response => {
         if (response.data.success == 1) {
-          let data = response.data.data
+          let data = response.data.data;
           this.single_data = {
             num: data.platform,
             color: "#274fee",
             text: "平台应用"
-          }
-          this.single_data1= {
+          };
+          this.single_data1 = {
             num: data.develop,
             color: "#e56600",
             text: "开发者应用"
-          }
+          };
         }
-      })
+      });
     },
-    getAppHot(){
-      this.$api.dataAnalysis.getAppHot().then(response =>{
+    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) => {
+          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,
+              id: e.app_id,
+              source: e.source,
+              hotIndex: idx + 1,
               name: e.name,
               count: e.num,
               increases: parseFloat(e.ratio)
-            })
+            });
           });
         }
-      })
+      });
     },
     detailHotSearch(item) {
       console.log("查看热搜详情");
-      this.$router.push(`/yygl/0/0/detail/${item.id}?source=${item.source}`)
+      this.$router.push(`/yygl/0/0/detail/${item.id}?source=${item.source}`);
     },
     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
+              ]
+            }
+          ]
+        };
+      } 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
+              ]
+            }
+          ]
+        };
+      }
+    },
+    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;
+      }
+    },
     changeServiceTypeBtn(index) {
-      if(index == 0){
-        this.now_app_type = 1
-      }else{
-        this.now_app_type = 2
+      if (index === 0) {
+        this.mult_data = [
+          { name: "基础工具", value: 22 },
+          { name: "通用应用", value: 12 },
+          { name: "业务应用", value: 10 }
+        ];
+      } else {
+        this.mult_data = [
+          { name: "基础工具", value: 6 },
+          { name: "通用应用", value: 20 },
+          { name: "业务应用", value: 14 }
+        ];
       }
-      this.getAppType()
+      // 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
+      if (index === 0) {
+        this.bar_data_area = {
+          legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
+          seriesData: [322, 454, 566, 399, 222, 167]
+        };
+      } else {
+        this.bar_data_area = {
+          legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
+          seriesData: [222, 354, 466, 499, 422, 367]
+        };
       }
-      this.getAppUsedArea()
+      // 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
+      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.getAppUsedCount()
+      // 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()
+      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();
     },
     changeAppInfoBtn(index) {
       this.appInfoBtnIndex = index;
-      this.now_app_evalute = index+1
-      this.getAppEvaluate()
-      console.log("应用评价及评分: " + 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
+      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
+              ]
+            }
+          ]
+        };
+      } 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.getAppCount()
+      // if (index == 0) {
+      //   this.now_app_count = 14;
+      // } else {
+      //   this.now_app_count = 30;
+      // }
+      // this.getAppCount();
     }
   }
 };
@@ -720,30 +1851,30 @@ export default {
 .hot-line-chart {
   height: calc(100% - 36px);
 }
-.single-charts{
+.single-charts {
   float: left;
   width: 50%;
 }
-.sparkline-text{
+.sparkline-text {
   width: 100%;
   line-height: 20px;
 }
-.sparkline-text span:nth-of-type(1){
+.sparkline-text span:nth-of-type(1) {
   font-size: 20px;
   color: #274fee;
 }
-.sparkline-text span:nth-of-type(2){
+.sparkline-text span:nth-of-type(2) {
   font-size: 12px;
   width: 62px;
   float: right;
   text-align: center;
   line-height: 20px;
-	height: 20px;
+  height: 20px;
   border-radius: 3px;
   margin-top: 3px;
   margin-right: 2px;
 }
-.sparkline-text-user span:nth-of-type(1){
+.sparkline-text-user span:nth-of-type(1) {
   font-size: 20px;
   color: #e56600;
 }

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

@@ -40,6 +40,7 @@
                 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>
@@ -165,7 +166,7 @@
               :buttons_arr="['近14天', '近30天']"
               @changeButton="changeServeiceTotalChangeBtn"
             >
-              <line-chart class="block-radius-content" :data="line_data"></line-chart>
+              <line-chart class="block-radius-content" :zzfw="true" :data="line_data"></line-chart>
             </block-radius>
           </el-col>
         </el-row>
@@ -241,9 +242,25 @@
           <BarChart :data="bar_data_org" :x_router="30" :colors="['#e56600', '#e56600']" />
         </block-radius>
       </el-col>
-      <el-col :span="18" class="in_block default">
-        <block-radius class="block">
-          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
+      <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>
@@ -280,7 +297,7 @@ export default {
   },
   data: () => ({
     overview: {
-      serviceTotal: 0
+      serviceTotal: 28
     },
     left_1_state: 0,
     left_2_state: 0,
@@ -291,8 +308,23 @@ export default {
     right_2_state: 0,
     right_3_state: 0,
     last_id: 0,
-    mult_data_state: [],
-    mult_data: [],
+    mult_data_state: [
+      { name: "正常", value: 22 },
+      { name: "警告", value: 12 },
+      { name: "错误", value: 14 },
+      { name: "未使用", value: 19 }
+    ],
+    mult_data: [
+      { name: "数据服务", value: 22 },
+      { name: "时空服务", value: 12 },
+      { name: "视频服务", value: 14 },
+      { name: "感知服务", value: 14 },
+      { name: "综合服务", value: 1 }
+    ],
+    fwsp_data: [
+      { name: "已审批", value: 25 },
+      { name: "待审批", value: 75 }
+    ],
     spIndicatorStyles1: false,
     spRefLineStyles3: {
       stroke: "#d14",
@@ -308,59 +340,291 @@ export default {
       fill: "#e56600"
     },
     sparkline1: {
-      num:0,
-      up:0,
-      arr:[]
+      num: 8848,
+      up: 32,
+      arr: [20, 29, 40, 33, 45, 58]
     },
     sparkline2: {
-      num:0,
-      up:0,
-      arr:[]
+      num: 9964,
+      up: 20,
+      arr: [33, 29, 36, 33, 45, 58]
     },
     text: "服务总数",
+    fwsp_text: "服务审批",
     single_data: {
-      num: 0,
+      num: 32,
       color: "#25bdb1",
       text: "共享"
     },
     single_data1: {
-      num: 0,
+      num: 28,
       color: "#f5ab4c",
       text: "受限"
     },
     single_data2: {
-      num: 0,
+      num: 30,
       color: "#e15260",
       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
+          ]
+        }
+      ]
+    },
     line_data: {
-      xAxisData: [],
+      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: []
+          name: "上架中",
+          data: [
+            300,
+            400,
+            350,
+            280,
+            480,
+            520,
+            500,
+            222,
+            300,
+            400,
+            350,
+            280,
+            480,
+            520,
+            500,
+            222
+          ]
         },
         {
-          name: "",
-          data: []
+          name: "未上架",
+          data: [
+            300,
+            350,
+            366,
+            280,
+            320,
+            450,
+            366,
+            350,
+            300,
+            350,
+            366,
+            280,
+            320,
+            450,
+            366,
+            350
+          ]
         }
       ]
     },
     das_data: {
-      data: 90,
+      data: 85,
       text: "健康占比"
     },
     bar_data: {
-      legendData: [],
-      seriesData: []
+      legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
+      seriesData: [322, 454, 566, 399, 222, 167]
     },
     bar_data_org: {
-      legendData: [],
-      seriesData: []
+      legendData: [
+        "省公安厅",
+        "省发改委",
+        "贵州省公安厅",
+        "贵州省发改委",
+        "贵州省公安厅"
+      ],
+      seriesData: [322, 454, 266, 399, 222, 167]
     },
-    toplistData: [], // 服务调用排名分析
-    toplistTargetValue: 0, // 服务调用排名分析 目标值
-    commentlistData: [], // 服务评价
+    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: 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,
@@ -422,28 +686,67 @@ export default {
     ], // 服务评分
     starlistTotal: 15,
     hotSearchHeader: [], // 热门搜索 表头
-    hotSearchData: [], // 热门搜索 数据
+    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
+      }
+    ], // 热门搜索 数据
     graph_arr: {
       legend: {
-        data: []
+        data: ["被调用次数", "调用次数"]
       },
-      data: [],
-      series: [{ data: [] }, { 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] }
+      ]
     },
-    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.hotSearchHeader = [
       {
         label: "服务排名",
@@ -474,33 +777,46 @@ export default {
     this.getTopologyData();
   },
   methods: {
-    getServiceHotSearch(){
+    getServiceHotSearch() {
       this.$api.dataAnalysis.getServiceHotSearch().then(response => {
         if (response.data.success == 1) {
-          let data = response.data.data
+          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
-          }
+            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
-          }
+            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
-                }
-              )
+          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
+              });
             });
           }
         }
@@ -611,35 +927,718 @@ export default {
         });
     },
     detailHotSearch(item) {
-      this.$router.push('/fwgl/0/0/servicedetail/'+item.id)
+      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
+              ]
+            }
+          ]
+        };
+      }
     },
     changeServiceTypeBtn(index) {
-      this.left_2_state = index;
-      this.getServiceType();
+      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();
     },
     changeApplicationFieldBtn(index) {
-      this.left_3_state = index;
-      this.getServiceSectorse();
+      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();
     },
     changeServeiceApplyCountBtn(index) {
-      this.right_0_state = index;
-      this.getServiceRequest();
+      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();
     },
     changeServeiceInfoBtn(index) {
       this.right_3_state = index;
-      this.getServiceEstimated();
+      // this.getServiceEstimated();
     },
     changeOpenessBtnindex(index) {
-      this.right_2_state = index;
-      this.getServiceOpenness();
+      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();
     },
     changeServiceCellBtn(index) {
-      this.right_1_state = index;
-      this.getServiceTrend();
+      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();
     },
     changeServeiceTotalChangeBtn(index) {
-      this.center_3_state = index;
-      this.getServiceOnlineState();
+      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();
     },
     getTopologyData() {
       this.$api.workbench.getServiceTopology().then(response => {
@@ -647,12 +1646,25 @@ export default {
       });
     },
     changeServiceStateBtn(index) {
-      this.left_1_state = index;
-      if (index == 0) {
-        this.getServiceHealth();
+      if (index === 0) {
+        this.mult_data_state = [
+          { name: "正常", value: 22 },
+          { name: "警告", value: 12 },
+          { name: "错误", value: 14 },
+          { name: "未使用", value: 19 }
+        ];
       } else {
-        this.a();
+        this.mult_data_state = [
+          { name: "已调用", value: 33 },
+          { name: "未调用", value: 23 }
+        ];
       }
+      // this.left_1_state = index;
+      // if (index == 0) {
+      //   this.getServiceHealth();
+      // } else {
+      //   this.a();
+      // }
     }
   }
 };

src/pages/data-analysis/operation-overview.vue

 <template>
   <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("运行概况")
+        }}
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius :show_header="true" title="组织用户概况" class="block">
+              <div class="part">
+                <img src="../../assets/imgs/yxgk_ic_zuzhiyh.png" alt />
+                <div class="part_right_1">
+                  <p class="right_txt_1">组织用户数</p>
+                  <p class="right_txt_2">58</p>
+                </div>
+              </div>
+              <div class="part">
+                <img src="../../assets/imgs/yxgk_ic_zaixianyh.png" alt />
+                <div class="part_right_1">
+                  <p class="right_txt_1">在线用户数</p>
+                  <p class="right_txt_2">24</p>
+                </div>
+              </div>
+              <div class="part">
+                <img src="../../assets/imgs/yxgk_ic_fuwuzs.png" alt />
+                <div class="part_right_1">
+                  <p class="right_txt_1">服务总数</p>
+                  <p class="right_txt_2">268</p>
+                </div>
+              </div>
+              <div class="part">
+                <img src="../../assets/imgs/yxgk_ic_yingyongzs.png" alt />
+                <div class="part_right_1">
+                  <p class="right_txt_1">应用总数</p>
+                  <p class="right_txt_2">78</p>
+                </div>
+              </div>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius :show_header="true" title="服务状态统计" class="block">
+              <line-chart :data="line_data" :zzfw="true"></line-chart>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius :show_header="true" title="服务注册发布数量排名" class="block">
+              <bar-charttwo :data="barData"></bar-charttwo>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block" :show_header="true" title="应用构建数量排名">
+              <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-row>
+      </el-col>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务被调用次数排名"
+              class="block"
+              :buttons_arr="['累计', '今日']"
+              @changeButton="changeServeiceNumBtn"
+            >
+              <toplist
+                class="block-radius-content"
+                :options="toplistData"
+                :target-value="toplistTargetValue"
+                :isShowjt="false"
+              ></toplist>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="应用被部署次数排名"
+              class="block"
+              :buttons_arr="['累计', '今日']"
+              @changeButton="changeBsNumBtn"
+            >
+              <the-list :data="bsData" class="block-radius-content"></the-list>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span='24' class="in_block default">
+        <block-radius class="block">
+          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
+        </block-radius>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import BlockRadius from "@/components/general/block-radius";
+import lineChart from "@/components/e-charts/line_chart";
+import BarCharttwo from "@/components/e-charts/bar-chartTwo";
+import BarChart from "@/components/e-charts/bar-chart";
+import Toplist from "@/components/e-charts/toplist";
+import theList from "@/components/e-charts/the-list";
+
 export default {
+  data() {
+    return {
+      barData: [
+        ["product", "服务注册数量", "服务发布数量"],
+        ["全程执法精细123", 43.3, 85.8],
+        ["智能执法场所123", 83.1, 73.4],
+        ["大数智能应用222", 86.4, 65.2],
+        ["刑事案件智能1111", 72.4, 53.9]
+      ],
+      line_data: {
+        xAxisData: [
+          "08-01",
+          "08-02",
+          "08-03",
+          "08-04",
+          "08-05",
+          "08-06",
+          "08-07"
+        ],
+        seriesData: [
+          {
+            name: "服务数量",
+            data: [300, 400, 350, 280, 480, 520, 500, 460]
+          },
+          {
+            name: "应用数量",
+            data: [300, 350, 400, 280, 320, 450, 400, 350]
+          }
+        ]
+      },
+      bar_data_area: {
+        legendData: [
+          "全程执法精细123",
+          "智能执法场所123",
+          "大数智能应用222",
+          "刑事案件智能1111"
+        ],
+        seriesData: [50, 63, 48, 58]
+      },
+      toplistData: [
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 300
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "钉钉 V1.0",
+            request_count: 220
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "易智瑞 V11.3",
+            request_count: 210
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 180
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 150
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 120
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 100
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 80
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 60
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 50
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 40
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 20
+          }
+        ], // 服务调用次数排名
+      toplistTargetValue: 400, // 服务调用次数排名 目标值
+      serveiceNum: "",
+      bsNum: "",
+      bsData: [
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 120,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 100,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 90,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 80,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 60,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        }
+      ]
+    };
+  },
+  components: {
+    BlockRadius,
+    lineChart,
+    BarCharttwo,
+    BarChart,
+    Toplist,
+    theList
+  },
   methods: {
-    getData() {}
+    getData() {},
+    //服务调用排名切换
+    changeServeiceNumBtn(val) {
+      if (val === 0) {
+        this.toplistData = [
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 300
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "钉钉 V1.0",
+            request_count: 220
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "易智瑞 V11.3",
+            request_count: 210
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 180
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 150
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 120
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 100
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 80
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 60
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 50
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 40
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 20
+          }
+        ];
+      } 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
+          }
+        ];
+      }
+    },
+    //部署次数排名
+    changeBsNumBtn(val) {
+      if(val===0){
+        this.bsData= [
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 120,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 100,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 90,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 80,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 60,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        }
+      ]
+      }else{
+        this.bsData= [
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 12,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 10,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 9,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 8,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        },
+        {
+          name: "警综平台",
+          init: "贵州省公安厅警务综合系统",
+          count: 6,
+          img: "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob"
+        }
+      ]
+      }
+    }
   }
 };
 </script>
+<style scoped>
+.in_block {
+  height: 280px;
+  padding: 10px;
+}
+.block {
+  width: 100%;
+  height: 100%;
+}
+.block-radius-content {
+  height: calc(100% - 36px);
+  margin-top: 15px;
+}
+.part {
+  display: inline-block;
+  width: 48%;
+  height: 40%;
+  position: relative;
+}
+.part img {
+  margin-top: 15px;
+}
+.part_right_1 {
+  display: inline-block;
+  position: absolute;
+  margin-left: 12px;
+  top: 15px;
+}
+.right_txt_1 {
+  font-size: 14px;
+  color: #58617a;
+}
+.right_txt_2 {
+  font-size: 32px;
+  text-align: center;
+  color: #274fee;
+}
+.default {
+  text-align: center;
+}
+.default_img {
+  width: 330px;
+  height: 230px;
+}
+</style>

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

 <template>
-  <div>
-    组织-服务管控
+  <div class="service-control">
+    <el-breadcrumb separator="/" class="bread_crumb1">
+      <el-breadcrumb-item :to="{ path: '/data_analysis' }">
+        {{
+        $t("lang.data_analysis")
+        }}
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        {{
+        $t("管控服务")
+        }}
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius :show_header="true" title="管控分析概况" class="block" style="height:540px;">
+              <div style="height:25px;"></div>
+              <gk-circle ref="left_1_r" :data="gk_data[0]" :is_word="true" class="left_1_r"></gk-circle>
+              <gk-circle ref="left_1_r" :data="gk_data[1]" :is_word="true" class="left_1_r"></gk-circle>
+              <gk-circle ref="left_1_r" :data="gk_data[2]" :is_word="true" class="left_1_r"></gk-circle>
+              <gk-circle ref="left_1_r" :data="gk_data[3]" :is_word="true" class="left_1_r"></gk-circle>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius :show_header="true" title="敏感信息服务统计" class="block">
+              <el-row>
+                <el-col :span="12">
+                  <gkmultiple-circle
+                    class="block-radius-content"
+                    :data="mult_data_state"
+                    :show_center_data="false"
+                    :bar_width="10 "
+                    style="height:200px; margin-top:0"
+                  ></gkmultiple-circle>
+                </el-col>
+                <el-col :span="12">
+                  <line-chart
+                    :data="line_data"
+                    :zzfw="true"
+                    style="height:200px;width:400px"
+                    :showShadow="false"
+                  ></line-chart>
+                </el-col>
+              </el-row>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block" :show_header="true" title="应用构建数量排名">
+              <doubleLine :data="doubleData"></doubleLine>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务管控排名"
+              class="block"
+              style="height:540px;"
+              :buttons_arr="['完整性', '正确性','一致性','时效性']"
+              @changeButton="changeServeiceGkBtn"
+            >
+              <toplist
+                class="block-radius-content"
+                :options="toplistData"
+                :isPercent="true"
+                :target-value="toplistTargetValue"
+              ></toplist>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="in_block default">
+        <block-radius class="block">
+          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
+        </block-radius>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import BlockRadius from "@/components/general/block-radius";
+import GkCircle from "@/components/e-charts/gk-circle";
+import GkmultipleCircle from "@/components/e-charts/gkmultiple_circle";
+import lineChart from "@/components/e-charts/line_chart";
+import doubleLine from "@/components/e-charts/doubleLine";
+import Toplist from "@/components/e-charts/toplist";
+
 export default {
+  data() {
+    return {
+      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: 40, // 服务管控排名分析 目标值
+      gk_data: [
+        {
+          data: 85,
+          text: "数据完整率"
+        },
+        {
+          data: 50,
+          text: "数据正确性"
+        },
+        {
+          data: 40,
+          text: "数据一致性"
+        },
+        {
+          data: 20,
+          text: "数据时效性"
+        }
+      ],
+      doubleData: {
+        title: [
+          "人脸识别API",
+          "通知中心服务字符",
+          "省送达服务",
+          "数据传输服务",
+          "证据检查服务"
+        ],
+        dataOne: [100, 300, 256, 288, 176, 327],
+        dataTwo: [-60, -340, -226, -228, -136, -227]
+      },
+      mult_data_state: [
+        { name: "含敏感字段的服务", value: 50 },
+        { name: "不含敏感字段的服务", value: 41 }
+      ],
+      line_data: {
+        xAxisData: [
+          "08-01",
+          "08-02",
+          "08-03",
+          "08-04",
+          "08-05",
+          "08-06",
+          "08-07"
+        ],
+        seriesData: [
+          {
+            name: "服务数量",
+            data: [300, 400, 350, 280, 480, 520, 500, 460]
+          },
+          {
+            name: "应用数量",
+            data: [300, 350, 400, 280, 320, 450, 400, 350]
+          }
+        ]
+      }
+    };
+  },
+  components: {
+    BlockRadius,
+    GkCircle,
+    GkmultipleCircle,
+    lineChart,
+    doubleLine,
+    Toplist
+  },
   methods: {
-    getData() {}
+    getData() {},
+    changeServeiceGkBtn(val) {
+      if (val === 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 if(val===1) {
+        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
+          }
+        ];
+      }else if(val===2){
+        this.toplistData = [
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 33
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "钉钉 V1.0",
+            request_count: 25
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "易智瑞 V11.3",
+            request_count: 20
+          },
+          {
+            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: 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
+          }
+        ];
+      }else{
+        this.toplistData = [
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 36
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "钉钉 V1.0",
+            request_count: 34
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "易智瑞 V11.3",
+            request_count: 32
+          },
+          {
+            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: 14
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "postgresql V11.1",
+            request_count: 12
+          },
+          {
+            cover:
+              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
+            service_name: "CAS单点登录 V1.0",
+            request_count: 9
+          },
+          {
+            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
+          }
+        ];
+      }
+    }
   }
 };
 </script>
+<style scoped>
+.in_block {
+  height: 280px;
+  padding: 10px;
+}
+.block {
+  width: 100%;
+  height: 100%;
+}
+.block-radius-content {
+  height: calc(100% - 36px);
+  margin-top: 15px;
+}
+.left_1_r {
+  width: 49%;
+  height: 43%;
+  display: inline-block;
+}
+
+.default {
+  text-align: center;
+}
+.default_img {
+  width: 330px;
+  height: 230px;
+}
+</style>
+<style>
+.service-control .left_1_r canvas {
+  bottom: 0;
+  right: 0;
+  width: 160px !important;
+  height: 190px !important;
+  margin: 0 auto !important;
+}
+</style>