<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">58</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">24</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">268</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">78</p>
                </div>
              </div>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="服务状态统计"
              class="block"
            >
              <line-chart :data="line_data" :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-charttwo :data="barData"></bar-charttwo>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              class="block"
              :show_header="true"
              title="应用构建数量排名"
            >
              <BarChart
                :data="bar_data_area"
                :colors="['#1034eb', '#4274f8']"
                :bar_border_radius="[20, 20, 0, 0]"
                :bar_width="26"
                :show_split="true"
              />
            </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="changeServeiceNumBtn"
            >
              <toplist
                class="block-radius-content"
                :options="toplistData"
                :target-value="toplistTargetValue"
                :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="changeBsNumBtn"
            >
              <the-list :data="bsData" 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-chartTwo";
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 {
  data() {
    return {
      barData: [
        ["product", "服务注册数量", "服务发布数量"],
        ["全程执法精细123", 43.3, 85.8],
        ["智能执法场所123", 83.1, 73.4],
        ["大数智能应用222", 86.4, 65.2],
        ["刑事案件智能1111", 72.4, 53.9],
      ],
      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],
          },
        ],
      },
      bar_data_area: {
        legendData: [
          "全程执法精细123",
          "智能执法场所123",
          "大数智能应用222",
          "刑事案件智能1111",
        ],
        seriesData: [50, 63, 48, 58],
      },
      toplistData: [
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "postgresql V11.1",
          request_count: 300,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "钉钉 V1.0",
          request_count: 220,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "易智瑞 V11.3",
          request_count: 210,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "CAS单点登录 V1.0",
          request_count: 180,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "postgresql V11.1",
          request_count: 150,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "CAS单点登录 V1.0",
          request_count: 120,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "postgresql V11.1",
          request_count: 100,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "CAS单点登录 V1.0",
          request_count: 80,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "postgresql V11.1",
          request_count: 60,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "CAS单点登录 V1.0",
          request_count: 50,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "postgresql V11.1",
          request_count: 40,
        },
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "CAS单点登录 V1.0",
          request_count: 20,
        },
      ], // 服务调用次数排名
      toplistTargetValue: 400, // 服务调用次数排名 目标值
      serveiceNum: "",
      bsNum: "",
      bsData: [
        {
          name: "警综平台",
          init: "贵州省公安厅警务综合系统",
          count: 120,
          img:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        },
        {
          name: "警综平台",
          init: "贵州省公安厅警务综合系统",
          count: 100,
          img:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        },
        {
          name: "警综平台",
          init: "贵州省公安厅警务综合系统",
          count: 90,
          img:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        },
        {
          name: "警综平台",
          init: "贵州省公安厅警务综合系统",
          count: 80,
          img:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        },
        {
          name: "警综平台",
          init: "贵州省公安厅警务综合系统",
          count: 60,
          img:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        },
      ],
    };
  },
  components: {
    BlockRadius,
    lineChart,
    BarCharttwo,
    BarChart,
    Toplist,
    theList,
  },
  methods: {
    getData() {},
    //服务调用排名切换
    changeServeiceNumBtn(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: 300,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "钉钉 V1.0",
            request_count: 220,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "易智瑞 V11.3",
            request_count: 210,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 180,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 150,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 120,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 100,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 80,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 60,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 50,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 40,
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 20,
          },
        ];
      } else {
        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,
          },
        ];
      }
    },
    //部署次数排名
    changeBsNumBtn(val) {
      if (val === 0) {
        this.bsData = [
          {
            name: "警综平台",
            init: "贵州省公安厅警务综合系统",
            count: 120,
            img:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          },
          {
            name: "警综平台",
            init: "贵州省公安厅警务综合系统",
            count: 100,
            img:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          },
          {
            name: "警综平台",
            init: "贵州省公安厅警务综合系统",
            count: 90,
            img:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          },
          {
            name: "警综平台",
            init: "贵州省公安厅警务综合系统",
            count: 80,
            img:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          },
          {
            name: "警综平台",
            init: "贵州省公安厅警务综合系统",
            count: 60,
            img:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          },
        ];
      } else {
        this.bsData = [
          {
            name: "警综平台",
            init: "贵州省公安厅警务综合系统",
            count: 12,
            img:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          },
          {
            name: "警综平台",
            init: "贵州省公安厅警务综合系统",
            count: 10,
            img:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          },
          {
            name: "警综平台",
            init: "贵州省公安厅警务综合系统",
            count: 9,
            img:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          },
          {
            name: "警综平台",
            init: "贵州省公安厅警务综合系统",
            count: 8,
            img:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          },
          {
            name: "警综平台",
            init: "贵州省公安厅警务综合系统",
            count: 6,
            img:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          },
        ];
      }
    },
  },
};
</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>
