<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" v-text="baseinfo.user_num || 0"></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"
                    v-text="baseinfo.online_user_num || 0"
                  ></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" v-text="baseinfo.serv_num || 0"></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" v-text="baseinfo.app_num || 0"></p>
                </div>
              </div>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="组织服务及应用数量变化趋势"
              class="block"
            >
              <line-chart
                class="block-radius-content"
                :data="servVolumeTrend"
                :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-chart-two
                :data="servRegRank"
                :xAxis_text_length="5"
              ></bar-chart-two>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              class="block"
              :show_header="true"
              title="应用构建数量排名"
            >
              <BarChart
                :data="buildNum"
                :colors="['#1034eb', '#4274f8']"
                :bar_border_radius="[20, 20, 0, 0]"
                :bar_width="26"
                :show_split="true"
                :xAxis_text_length="5"
              />
            </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="changeAction1"
            >
              <toplist
                class="block-radius-content"
                :options="servRequestRank"
                :target-value="servRequestRankMax"
                :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="changeActions"
            >
              <the-list
                :data="deployedNum"
                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-chart-two";
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 {
  components: {
    BlockRadius,
    lineChart,
    BarChartTwo,
    BarChart,
    Toplist,
    theList,
  },
  data() {
    return {
      baseinfo: {}, // 组织用户概况
      servRegRank: {}, // 服务注册发布数量排名
      servVolumeTrend: {
        xAxisData: [],
        seriesData: [],
      }, // 服务被调用次数排名
      buildNum: {
        legendData: [],
        seriesData: [],
      }, // 组织服务及应用数量变化趋势
      servRequestRank: [], // 应用构建数量排名
      deployedNum: [], // 应用被部署次数排名
    };
  },
  computed: {
    servRequestRankMax() {
      return (
        (this.servRequestRank &&
          this.servRequestRank[0] &&
          this.servRequestRank[0].request_count) ||
        100
      );
    },
  },
  methods: {
    init() {
      this.getBaseInfo();
      this.getServRegRank();
      this.getServRequestRank();
      this.getServVolumeTrend();
      this.getBuildNum();
      this.getDeployedNum();
    },
    getBaseInfo() {
      this.$http
        .get("/apaas/service/v3/control/org/baseinfo")
        .then(({ data }) => {
          if (data.success === 1) {
            this.baseinfo = data.data;
          } else {
            this.$message.error(data.errMsg || "获取组织用户概况失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取组织用户概况失败");
        });
    }, // 获取 组织用户概况
    getServRegRank() {
      this.$http
        .get("/apaas/service/v3/control/org/serv/reg/rank")
        .then(({ data }) => {
          if (data.success === 1) {
            this.servRegRank = data.data;
          } else {
            this.$message.error(data.errMsg || "获取服务注册发布数量排名失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取服务注册发布数量排名失败");
        });
    }, // 获取 服务注册发布数量排名
    getServRequestRank(tab = "all") {
      this.$http
        .get("/apaas/service/v3/control/org/serv/request/rank", {
          params: { tab },
        })
        .then(({ data }) => {
          if (data.success === 1) {
            this.servRequestRank = data.data;
          } else {
            this.$message.error(data.errMsg || "获取服务被调用次数排名失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取服务被调用次数排名失败");
        });
    }, // 获取 服务被调用次数排名
    getServVolumeTrend() {
      Promise.all([
        this.$http.get("/apaas/service/v3/control/org/serv/volume/trend"),
        this.$http.get("/apaas/hubApi/operation/appNum?day=7"),
      ])
        .then((response) => {
          let datas = response.map((item) => item.data.data);

          this.servVolumeTrend = {
            xAxisData: datas[1].data,
            seriesData: datas[0].series.concat(datas[1].series),
          };
        })
        .catch((error) => {
          this.$message.error("获取组织服务及应用数量变化趋势失败");
        });
    }, // 获取 组织服务及应用数量变化趋势
    getBuildNum() {
      this.$http
        .get("/apaas/hubApi/operation/buildNum")
        .then(({ data }) => {
          if (data.success === 1) {
            this.buildNum = {
              legendData: data.data.xAxis.data,
              seriesData: data.data.series[0].data,
            };
          } else {
            this.$message.error(data.errMsg || "获取应用构建数量排名失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取应用构建数量排名失败");
        });
    }, // 获取 应用构建数量排名
    getDeployedNum(style = 1) {
      this.$http
        .get("/apaas/hubApi/operation/deployedNum", {
          params: { style },
        })
        .then(({ data }) => {
          if (data.success === 1) {
            this.deployedNum = data.data;
          } else {
            this.$message.error(data.errMsg || "获取应用被部署次数排名失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取应用被部署次数排名失败");
        });
    }, // 获取 应用被部署次数排名
    changeAction1(val) {
      if (val === 0) {
        this.getServRequestRank("all");
      } else {
        this.getServRequestRank("today");
      }
    }, // 切换 服务被调用次数排名
    changeActions(val) {
      if (val === 0) {
        this.getDeployedNum(1);
      } else {
        this.getDeployedNum(2);
      }
    }, // 切换 应用被部署次数排名
  },
  created() {
    this.init();
  },
};
</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>
