<template>
  <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="controlData[0]"
                :is_word="true"
                class="left_1_r"
              ></gk-circle>
              <gk-circle
                ref="left_1_r"
                :data="controlData[1]"
                :is_word="true"
                class="left_1_r"
              ></gk-circle>
              <gk-circle
                ref="left_1_r"
                :data="controlData[2]"
                :is_word="true"
                class="left_1_r"
              ></gk-circle>
              <gk-circle
                ref="left_1_r"
                :data="controlData[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="sensitivityLeftData"
                    :show_center_data="false"
                    :bar_width="10"
                    style="height:200px;margin-top:0;"
                  ></gkmultiple-circle>
                </el-col>
                <el-col :span="12">
                  <line-chart
                    :data="sensitivityRightData"
                    :zzfw="true"
                    style="height:200px;"
                    :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="应用构建数量排名"
            >
              <doubleBar
                :data="requestData"
                style="margin-top: -20px;"
              ></doubleBar>
            </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="changeRankTab"
            >
              <rankList
                class="block-radius-content"
                :options="rankData"
              ></rankList>
            </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 doubleBar from "@/components/e-charts/doubleBar";
import rankList from "@/components/e-charts/rankList";

export default {
  components: {
    BlockRadius,
    GkCircle,
    GkmultipleCircle,
    lineChart,
    doubleBar,
    rankList,
  },
  data() {
    return {
      controlData: [
        {
          data: 0,
          text: "数据完整率",
        },
        {
          data: 0,
          text: "数据正确性",
        },
        {
          data: 0,
          text: "数据一致性",
        },
        {
          data: 0,
          text: "数据时效性",
        },
      ], // 管控分析概况
      sensitivityLeftData: [
        { name: "含敏感字段的服务", value: 0 },
        { name: "不含敏感字段的服务", value: 0 },
      ], // 敏感信息服务统计 左侧饼图
      sensitivityRightData: {
        xAxisData: [],
        seriesData: [
          {
            name: "含敏感字段的服务",
            data: [],
          },
          {
            name: "不含敏感字段的服务",
            data: [],
          },
        ],
      }, // 敏感信息服务统计 右侧折线图
      requestData: {
        yAxis: [],
        series: [
          {
            name: "服务注册数量",
            data: [],
          },
          {
            name: "服务发布数量",
            data: [],
          },
        ],
      }, // 应用构建数量排名
      rankData: [], // 服务管控排名
    };
  },
  methods: {
    init() {
      this.initControl();
      this.initSensitivity();
      this.initRequest();
      this.initRank();
    },
    initControl() {
      this.$http
        .get("/apaas/service/v3/control/service/data/control")
        .then(({ data }) => {
          if (data.success === 1) {
            this.controlData = [
              {
                data: data.data.integrity,
                text: "数据完整率",
              },
              {
                data: data.data.correctness,
                text: "数据正确性",
              },
              {
                data: data.data.coherence,
                text: "数据一致性",
              },
              {
                data: data.data.timeliness,
                text: "数据时效性",
              },
            ];
          } else {
            this.$message.error(data.errMsg || "获取管控分析概况失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取管控分析概况失败");
        });
    }, // 获取 管控分析概况
    initSensitivity() {
      Promise.all([
        this.$http.get(
          "/apaas/service/v3/control/service/data/sensitivity?tab=1"
        ),
        this.$http.get(
          "/apaas/service/v3/control/service/data/sensitivity?tab=2"
        ),
      ])
        .then((response) => {
          let datas = response.map((item) => item.data.data);

          this.sensitivityLeftData = [
            { name: "含敏感字段的服务", value: datas[0].have_sensitivity },
            { name: "不含敏感字段的服务", value: datas[0].not_sensitivity },
          ];
          this.sensitivityRightData = {
            xAxisData: datas[1].xAxis.data,
            seriesData: datas[1].series,
          };
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取敏感信息服务统计失败");
        });
    }, // 获取 敏感信息服务统计
    initRequest() {
      this.$http
        .get("/apaas/service/v3/control/service/data/sensitivity/request")
        .then(({ data }) => {
          if (data.success === 1) {
            this.requestData = {
              yAxis: data.data.xAxis.data,
              series: data.data.series,
            };
          } else {
            this.$message.error(data.errMsg || "获取应用构建数量排名失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取应用构建数量排名失败");
        });
    }, // 获取 应用构建数量排名
    initRank(tab = 1) {
      this.$http
        .get(`/apaas/service/v3/control/service/data/control/rank?tab=${tab}`)
        .then(({ data }) => {
          if (data.success === 1) {
            this.rankData = data.data;
          } else {
            this.$message.error(data.errMsg || "获取服务管控排名失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取服务管控排名失败");
        });
    }, // 获取 服务管控排名
    changeRankTab(val) {
      this.initRank(val + 1);
    }, // 切换 服务管控排名
  },
  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;
}
.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>
