<!--
 * ../../..Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/communication/connectException.vue
 * @Date: 2022-09-02 15:59:15
 * @Description: 
 * @LastEditTime: 2023-08-31 20:03:49
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import { useGetChartData } from "../../../components/chart/logic";
import { ElScrollbar } from "element-plus";
import NumberProgressBarItem from "../../../components/ProgressBar/NumberProgressBarItem.vue";
import ProvincesMap from "../../../components/chart/map/ProvincesMap.vue";
const Module_API = "networkSafeDetect/";
const API_MAP = {
  近一周IP连接数量分布:
    "domainSafe/abnormalNetConnect/abnormalNetworkIpConnectCount",
  "近一周网络通信端口异常IP TOP10":
    "domainSafe/abnormalNetConnect/abnormalNetworkPortCount",
  "近一周连接方向异常IP TOP10":
    "domainSafe/abnormalNetConnect/abnormalNetworkDirectionCount",
  昨日新连接密度统计:
    "domainSafe/abnormalNetConnect/abnormalNetworkConnectCloseCount",
};
const title = ref("近一周网络通信端口异常IP TOP10");
const title2 = ref("近一周IP连接数量分布");
const title3 = ref("近一周连接方向异常IP TOP10");
const title4 = ref("昨日新连接密度统计");

const ipList = ref([]) as any;
const getIpList = async () => {
  const res = await useGetChartData(
    Module_API + API_MAP[title.value],
    (res) => res
  );
  ipList.value = res.map((item, index) => {
    return {
      rank: index + 1,
      name: item.ip,
      value: item.connectNum,
      percentage: item.ratio,
    };
  });
};

const connectList = ref([]) as any;
const getConnectList = async () => {
  const res = await useGetChartData(
    Module_API + API_MAP[title3.value],
    (res) => res
  );
  connectList.value = res.map((item, index) => {
    return {
      rank: index + 1,
      name: item.ip,
      value: item.connectNum,
      percentage: item.ratio,
    };
  });
};
const lineXAxisData = ref([]) as any;
const lineChartData = ref([]) as any;

const getLineChartData = async () => {
  const res =
    (await useGetChartData(Module_API + API_MAP[title4.value], (res) => res)) ||
    [];
  if (!res) return;
  if (res.length > 0) {
    lineXAxisData.value = res[0].xaxisData;
  }
  lineChartData.value = res.map((item, index) => {
    return {
      name: item.name,
      data: item.data,
    };
  });
};

const mapChartData = ref([]) as any;
const getMapChartData = async () => {
  // const res = await getCloseCount();
  const res = await useGetChartData(
    Module_API + API_MAP[title2.value],
    (res) => res
  );
  if (!res) return;
  mapChartData.value = res.map((item, index) => {
    return {
      name: item.region,
      value: item.connectNum,
      percentage: 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">IP连接数量</div>
          <div class="light-map-tip-box-value">${params.value || 0}</div>
        </div>
      </div>
      
    </div>`;
};

const init = () => {
  getIpList();
  getConnectList();
  getLineChartData();
  getMapChartData();
};

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

<template>
  <div class="connect-exception-container">
    <ElScrollbar>
      <div class="connect-exception-con">
        <ElRow :gutter="16" class="custom-row custom-row-top" justify="space-between">
          <ElCol :md="4" :lg="5" :xl="6">
            <CommonCardVue :title="title" class="custom-row-item">
              <div class="progress-box">
                <NumberProgressBarItem v-for="item in ipList" :key="`${item.name}-${item.rank}-${item.value}`"
                  :value="item.value" :name="item.name" :number="item.rank" :percentage="item.percentage" />
              </div>
            </CommonCardVue>
          </ElCol>
          <ElCol :md="16" :lg="14" :xl="12">
            <CommonCardVue :title="title2" class="custom-row-item">
              <div class="chart-map">
                <ProvincesMap :autotip="true" :chartData="mapChartData" :tooltipFormatter="tooltipFormatter" />
              </div>
              <div class="chart-map-card-info ya-border-color">
                <div class="chart-map-card-head ya-fill-color">
                  <div class="chart-item-box ya-primary-text" v-for="x in 3">
                    <div class="chart-card-item">区域</div>
                    <div class="chart-card-item">占比</div>
                  </div>
                </div>
                <ElScrollbar>
                  <div class="chart-map-card-content">
                    <div class="chart-item-box ya-regular-text" v-for="(city, index) in mapChartData" :key="index">
                      <div class="chart-card-item">{{ city.name }}</div>
                      <div class="chart-card-item chart-card-percent ya-regular-text">
                        {{ city.percentage }}%
                      </div>
                    </div>
                  </div>
                </ElScrollbar>
              </div>
            </CommonCardVue>
          </ElCol>
          <ElCol :md="4" :lg="5" :xl="6">
            <CommonCardVue :title="title3" class="custom-row-item">
              <div class="progress-box">
                <NumberProgressBarItem v-for="item in connectList" :key="`${item.name}-${item.rank}-${item.value}`"
                  :value="item.value" :name="item.name" :number="item.rank" :percentage="item.percentage" />
              </div>
            </CommonCardVue>
          </ElCol>
        </ElRow>

        <ElRow :gutter="16" class="custom-row custom-row-bottom mt-16">
          <ElCol :md="24" :lg="24" :xl="24">
            <CommonCardVue :title="title4" class="custom-row-item">
              <LineChart :xAxisData="lineXAxisData" :chartData="lineChartData" />
            </CommonCardVue>
          </ElCol>
        </ElRow>
      </div>
    </ElScrollbar>
  </div>
</template>

<style lang="scss" scoped>
.connect-exception-container {
  width: 100%;
  height: calc(100vh - 120px);
  overflow: auto;
}

.connect-exception-con {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.custom-row-top {
  height: 550px;
}

.custom-row-bottom {
  height: 292px;
}

.custom-row-item {
  height: 100%;
  display: flex;
  flex-direction: column;

  .progress-box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .chart-map {
    height: 100%;
  }

  .chart-map-card-info {
    height: 116px;
    margin-top: 16px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    width: 100%;
    display: flex;
    flex-direction: column;

    .chart-map-card-head {
      width: 100%;
      height: 31px;
      background: #f8f8f8;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      padding: 0px 24px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .chart-item-box {
        width: 100%;
        display: flex;
        flex: 1;
        font-size: 14px;
        font-weight: 400;
        margin-right: 12%;
        color: rgba(0, 0, 0, 0.65);
      }

      .chart-item-box:last-child {
        margin-right: 0;
      }

      .chart-card-item {
        flex: 1;
      }

      .chart-card-item:last-child {
        text-align: right;
      }
    }

    .chart-map-card-content {
      width: 100%;
      height: 100%;
      padding: 0 24px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      .chart-item-box {
        display: flex;
        flex: 0 0 25%;
        font-size: 14px;
        height: 28px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        margin-right: 12%;

        .chart-card-item {
          flex: 1;
          line-height: 28px;
        }

        .chart-card-item:last-child {
          text-align: right;
        }
      }

      .chart-card-percent {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4);
      }

      .chart-item-box:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>
