<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="7">
        <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.org_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.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"
              :buttons_arr="['周排名', '月排名']"
              @changeButton="changeAction4"
            >
              <div class="block-radius-content apaas_scroll">
                <apass-table
                  class="hot-search-table"
                  :header="hotSeviceHeader"
                  :data="hotSeviceData"
                  :padding-left="0"
                ></apass-table>
              </div>
            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10">
        <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="7">
        <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="changeAction2"
            >
              <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="7" class="in_block">
        <block-radius
          :show_header="true"
          title="应用构建组织贡献榜"
          class="block"
          :buttons_arr="['周排名', '月排名']"
          @changeButton="changeAction5"
        >
          <div class="block-radius-content apaas_scroll">
            <apass-table
              class="hot-search-table"
              :header="hotAppHeader"
              :data="hotAppData"
              :padding-left="0"
            ></apass-table>
          </div>
        </block-radius>
      </el-col>
      <el-col :span="10" class="in_block">
        <block-radius
          :show_header="true"
          title="组织服务及应用数量变化趋势"
          class="block"
          :buttons_arr="['近14天', '近30天']"
          @changeButton="changeAction3"
        >
          <line-chart
            class="block-radius-content"
            :data="servVolumeTrend"
            :zzfw="true"
          ></line-chart>
        </block-radius>
      </el-col>
      <el-col :span="7" 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";
import ApassTable from "@/components/apass-table";

export default {
  components: {
    BlockRadius,
    lineChart,
    BarChartTwo,
    BarChart,
    Toplist,
    theList,
    ApassTable,
  },
  data() {
    return {
      baseinfo: {}, // 平台组织概况
      servRegRank: {}, // 服务注册发布数量排名
      servVolumeTrend: {
        xAxisData: [],
        seriesData: [],
      }, // 服务被调用次数排名
      buildNum: {
        legendData: [],
        seriesData: [],
      }, // 组织服务及应用数量变化趋势
      servRequestRank: [], // 应用构建数量排名
      deployedNum: [], // 应用被部署次数排名
      hotSeviceHeader: [], // 服务注册发布组织贡献榜 表头
      hotSeviceData: [], // 服务注册发布组织贡献榜 数据
      hotAppHeader: [], // 应用构建组织贡献榜 表头
      hotAppData: [], // 应用构建组织贡献榜 数据
    };
  },
  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();
      this.getHotSevice();
      this.getHotApp();
    },
    getBaseInfo() {
      this.$http
        .get("/apaas/service/v3/control/super/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/super/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/super/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(day = 14) {
      Promise.all([
        this.$http.get(
          `/apaas/service/v3/control/super/serv/volume/trend?tab=day${day}`
        ),
        this.$http.get(`/apaas/hubApi/operation/appNum?day=${day}`),
      ])
        .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("获取应用被部署次数排名失败");
        });
    }, // 获取 应用被部署次数排名
    getHotSevice(tab = "week") {
      this.$http
        .get("/apaas/service/v3/control/super/serv/org/volume/rank", {
          params: { tab },
        })
        .then(({ data }) => {
          if (data.success === 1) {
            this.hotSeviceData = data.data.map((item, index) => ({
              ...item,
              hotIndex: index + 1,
            }));
          } else {
            this.$message.error(
              data.errMsg || "获取服务注册发布组织贡献榜失败"
            );
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取服务注册发布组织贡献榜失败");
        });
    }, // 服务注册发布组织贡献榜
    getHotApp(style = 1) {
      this.$http
        .get("/apaas/hubApi/operation/appContribution", {
          params: { style },
        })
        .then(({ data }) => {
          if (data.success === 1) {
            this.hotAppData = data.data.map((item, index) => ({
              ...item,
              hotIndex: index + 1,
            }));
          } 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");
      }
    }, // 切换 服务被调用次数排名
    changeAction2(val) {
      if (val === 0) {
        this.getDeployedNum(1);
      } else {
        this.getDeployedNum(2);
      }
    }, // 切换 应用被部署次数排名
    changeAction3(val) {
      if (val === 0) {
        this.getServVolumeTrend(14);
      } else {
        this.getServVolumeTrend(30);
      }
    }, // 切换 组织服务及应用数量变化趋势
    changeAction4(val) {
      if (val === 0) {
        this.getHotSevice("week");
      } else {
        this.getHotSevice("month");
      }
    }, // 切换 服务注册发布组织贡献榜
    changeAction5(val) {
      if (val === 0) {
        this.getHotApp(1);
      } else {
        this.getHotApp(2);
      }
    }, // 切换 应用构建组织贡献榜
    detailHotService(item) {
      // console.log(item);
    },
    detailHotApp(item) {
      // console.log(item);
    },
  },
  created() {
    this.hotSeviceHeader = [
      {
        label: "排名",
        type: "hot-index-2",
        width: 50,
        align: "center",
      },
      {
        label: "组织名称",
        prop: "department_name",
        type: "button",
        callback: this.detailHotService,
      },
      {
        label: "服务注册/发布数量",
        prop: "serv_total",
        width: 130,
        align: "center",
      },
      {
        label: "普通用户数量",
        prop: "user_num",
        width: 100,
        align: "center",
      },
      {
        label: "较前一周",
        prop: "rate",
        align: "center",
        sortIcon: true,
      },
    ];
    this.hotAppHeader = [
      {
        label: "排名",
        type: "hot-index-2",
        width: 50,
        align: "center",
      },
      {
        label: "组织名称",
        prop: "department_name",
        type: "button",
        callback: this.detailHotApp,
      },
      {
        label: "应用构建数量",
        prop: "last_app",
        width: 130,
        align: "center",
      },
      {
        label: "普通用户数量",
        prop: "user_count",
        width: 100,
        align: "center",
      },
      {
        label: "较前一周",
        prop: "compare_last",
        align: "right",
        sortIcon: true,
      },
    ];

    this.init();
  },
};
</script>

<style scoped>
.apaas_scroll {
  overflow: auto;
}
.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>

<style>
.hot-search-table .el-table td,
.hot-search-table .el-table th,
.hot-search-table .el-table .row_action .btn {
  padding: 6px 0;
  font-size: 12px;
}
.hot-search-table .el-table div.row_action {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
</style>
