<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>
