<!--
 * ../../..Author: changjun
 * ../../..FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/communication/trafficException.vue
 * @Date: 2022-09-02 16:00:07
 * @Description: 
 * @LastEditTime: 2023-08-31 20:04:16
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import NumberCountItem from "../../../components/ProgressBar/NumberCountItem.vue";
import { useGetChartData } from "../../../components/chart/logic";
import NumberProgressBarItem from "../../../components/ProgressBar/NumberProgressBarItem.vue";
import CircularDiagram from "../../../components/chart/CircularDiagram/CircularDiagram.vue";
import ProvincesMap from "../../../components/chart/map/ProvincesMap.vue";
import { ElProgress } from "element-plus";
const Module_API = "networkSafeDetect/";
const API_MAP = {
  近一周目的IP流量TOP10: "domainSafe/abnormalNetFlow/abnormalFlowIpCount",
  近一周地域流量占比: "domainSafe/abnormalNetFlow/abnormalFlowRegionCount",
  近一周目的端口流量TOP10: "domainSafe/abnormalNetFlow/abnormalFlowPortCount",
  近一周事件类型占比: "domainSafe/abnormalNetFlow/abnormalFlowEventCount",
};
const title = ref("近一周目的IP流量TOP10");
const title2 = ref("近一周地域流量占比");
const title3 = ref("近一周目的端口流量TOP10");
const title4 = ref("近一周事件类型占比");

const ipTrafficList = ref([]) as any;
const getIpTrafficList = async () => {
  const res = await useGetChartData(
    Module_API + API_MAP[title.value],
    (res) => res
  );
  ipTrafficList.value = res.map((item, index) => {
    return {
      rank: index + 1,
      name: item.ip,
      count: item.flow,
      unit: item.unit ? item.unit : "GB",
    };
  });
};

const hostList = ref([]) as any;
const getHostList = async () => {
  const res = await useGetChartData(
    Module_API + API_MAP[title3.value],
    (res) => res
  );
  hostList.value = res.map((item, index) => {
    return {
      rank: index + 1,
      name: item.port,
      value: item.flow,
      unit: item.unit ? item.unit : "GB",
      percentage: item.ratio,
    };
  });
};

const eventChartData = ref([]) as any;

const getEventChartData = async () => {
  const res = await useGetChartData(
    Module_API + API_MAP[title4.value],
    (res) => res
  );
  if (!res) return;
  eventChartData.value = res.map((item, index) => {
    return {
      name: item.eventType,
      value: item.num,
      valueFormat: `${item.num} (${item.ratio}%)`,
    };
  });
};

const mapChartData = ref([]) as any;

const getMapChartData = async () => {
  const res = await useGetChartData(
    Module_API + API_MAP[title2.value],
    (res) => res
  );
  console.log(res, "[]]]");
  if (!res) return;
  mapChartData.value = res.map((item, index) => {
    return {
      name: item.region,
      value: item.flow,
      precent: item.ratio,
    };
  });
};

const tooltipFormatter = function (params) {
  return `<div class="light-map-tip-box">
      <div class="light-map-tip-box-name">${params.name}</div>
      <div class="light-map-tip-box-content">
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">地域流量</div>
          <div class="light-map-tip-box-value">${params.value || 0}${params.value || "GB"
    }</div>
        </div>
      </div>
      
    </div>`;
};

const init = () => {
  getIpTrafficList();
  getHostList();
  getEventChartData();
  getMapChartData();
};

onMounted(() => {
  init();
});
</script>

<template>
  <div class="traffic-exception-page">
    <ElRow :gutter="16" class="custom-row" justify="space-between">
      <ElCol :md="10" :lg="8" :xl="6">
        <CommonCardVue :title="title" class="custom-row-item">
          <div class="number-count-box">
            <NumberCountItem v-for="(item, index) in ipTrafficList" :key="index" :count="item.count" :name="item.name"
              :unit="item.unit" :number="item.rank" />
          </div>
        </CommonCardVue>
      </ElCol>
      <ElCol :md="14" :lg="16" :xl="18">
        <CommonCardVue :title="title2" class="custom-row-item">
          <div class="chart-map-box">
            <div class="chart-map">
              <ProvincesMap :autotip="true" :chartData="mapChartData" :tooltipFormatter="tooltipFormatter" />
            </div>
            <div class="map-card-info ya-border-color">
              <div class="map-card-head ya-fill-color">
                <div class="item item-city ya-primary-text">区域</div>
                <div class="item item-text-right custom-progeress-item ya-primary-text">
                  占比
                </div>
              </div>
              <div class="map-card-content">
                <div class="item-box" v-for="(item, index) in mapChartData" :key="index">
                  <div class="item item-city ya-regular-text">
                    {{ item.name }}
                  </div>
                  <div class="item item-text-right custom-progeress-item">
                    <div class="custom-el-progress-box">
                      <ElProgress :show-text="false" :percentage="item.precent" :stroke-width="4" color="#0095FF" />
                    </div>
                    <div class="progress-text ya-regular-text">
                      {{ item.precent }}%
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CommonCardVue>
      </ElCol>
    </ElRow>
    <div class="custom-center">
      <ElRow :gutter="16" class="custom-row mt-16">
        <ElCol :md="10" :lg="14" :xl="16">
          <CommonCardVue :title="title3" class="custom-row-item">
            <div class="progress-box">
              <div class="progress-box-left">
                <NumberProgressBarItem v-for="(item, index) in hostList.slice(0, 5)" :key="index" :name="item.name"
                  :number="item.rank" :percentage="item.percentage" :value="item.value" :unit="item.unit" />
              </div>
              <div class="progress-box-right">
                <NumberProgressBarItem v-for="(item, index) in hostList.slice(5)" :key="index" :name="item.name"
                  :number="item.rank" :percentage="item.percentage" :value="item.value" :unit="item.unit" />
              </div>
            </div>
          </CommonCardVue>
        </ElCol>

        <ElCol :md="14" :lg="10" :xl="8">
          <CommonCardVue :title="title4" class="custom-row-item">
            <CircularDiagram otherType="one" legendLayout="vertical" legendLeft="55%" :name="title4"
              :pieCenter="['30%', '50%']" :chartData="eventChartData" :radius="['40%', '60%']" />
          </CommonCardVue>
        </ElCol>
      </ElRow>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.domain-tampering-attack-page {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.custom-row {
  height: calc((100vh - 56px - 40px - 12px - 12px - 16px) / 2);

  .custom-row-item {
    width: 100%;
    height: 100%;
  }
}

.progress-box {
  width: 100%;
  display: flex;
  height: 100%;
  margin-top: 24px;
  justify-content: space-around;
  gap: 40px;

  .progress-box-left,
  .progress-box-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.chart-map-box {
  display: flex;
  width: 100%;
  height: 100%;
}

.chart-map {
  flex: 1;
}

.map-card-info {
  width: 240px;
  height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.2);

  .map-card-head {
    width: 100%;
    height: 32px;
    background: #f8f8f8;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 32px;
    padding: 0 24px 0 24px;
    box-sizing: border-box;
    display: flex;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    .item {}

    .item-city {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      width: 80px;
    }

    .custom-progeress-item {
      flex: 1;
    }

    .item-text-right {
      text-align: right;
    }
  }

  .map-card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 24px 0 24px;
    box-sizing: border-box;

    .item-box {
      width: 100%;
      display: flex;
      height: 28px;
      line-height: 28px;

      .item-city {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        width: 80px;
      }

      .custom-progeress-item {
        flex: 1;
      }

      .custom-progeress-item {
        display: flex;
        align-items: center;

        .custom-el-progress-box {
          width: 100%;
          height: 4px;
          transform: rotate(180deg);
        }

        .progress-text {
          width: 40px;
          margin-left: 4px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.4);
        }
      }

      .item-text-right {
        text-align: right;
      }

      .item-count {
        font-size: 14px;
        font-family: HelveticaNeue;
        color: rgba(0, 0, 0, 0.4);
        text-align: right;
      }
    }
  }
}

.custom-center {
  padding-top: 24px;
}

:deep(.el-progress-bar__outer) {
  background-color: transparent;
}
</style>
