<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="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() {},
    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>
