<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" v-text="baseinfo.user_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.online_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"
            >
              <line-chart
                class="block-radius-content"
                :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="servRegRank"></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="changeAction1"
            >
              <toplist
                class="block-radius-content"
                :options="servRequestRank"
                :target-value="1000"
                :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="changeActions"
            >
              <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-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";

export default {
  components: {
    BlockRadius,
    lineChart,
    BarCharttwo,
    BarChart,
    Toplist,
    theList,
  },
  data() {
    return {
      baseinfo: {},
      servRegRank: {},
      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],
      },
      servRequestRank: [
        {
          cover:
            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
          service_name: "postgresql V11.1",
          request_count: 300,
        },
      ],
      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",
        },
      ],
    };
  },
  methods: {
    init() {
      this.getBaseInfo();
      this.getServRegRank();
      this.getServRequestRank();
    },
    getBaseInfo() {
      this.$http
        .get("/apaas/service/v3/control/org/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/org/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/org/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("获取服务被调用次数排名失败");
        });
    },
    changeAction1(val) {
      if (val === 0) {
        this.getServRequestRank("all");
      } else {
        this.getServRequestRank("today");
      }
    },
    changeActions(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",
          },
        ];
      }
    },
  },
  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;
}
.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>
