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