<template>
  <div class="report-detail">
    <YaContentDetail class="page-detail-title" :obj="{ value: '预览报告' }" />
    <Overlay :isOverlay="isOverlay"></Overlay>
    <div class="yjMain">
      <div id="yaPdf" class="yaPdf" :class="{ 'y-l-bg': !isDown }">
        <div class="ya-pdf-header">
          <div class="yj-header-title">
            <div class="yj_title">山东省网络安全监测报告</div>
            <span class="yj_time">{{ reportObj.date || '-' }}</span>
          </div>
        </div>
        <div class="ya-pdg-content">
          <!-- 第一页 -->
          <div :class="{ pageHeight: isDown }">
            <div class="top">
              {{ reportObj.date }}全省互联网<span
                class="tip-color">网络安全态势总体平稳，互联网基础设施运行整体平稳，</span>未出现造成较大影响的基础设施运行安全事件。全省网络告警事件约为<span
                class="tip-color">{{ reportObj.totalEventCount || 0 }}</span>个<span v-if="reportObj.totalEventCount">，{{
                  reportObj.totalEventQoq || '0%' }}，涉及单位<span class="tip-color">{{ reportObj.totalEnterpriseCount || 0
  }}家</span>，{{ reportObj.totalEnterpriseQoq || '0%'
}}<span v-if="reportObj.totalAttackType">。攻击行为以<span class="tip-color">{{
  reportObj.totalAttackType
}}</span>为主</span>，合计占比{{
  reportObj.totalAttackTypeTopThreeRate || '0%'
}}</span>。
            </div>
            <!-- 第一部分 -->
            <div>
              <div class="hearder-title">
                <div>
                  <img src="../../../assets/image/report/pdf-title-icon.png" alt="" />
                </div>
                <div>一、网络安全总体态势</div>
              </div>
              <div class="ya-text mt-16 color-text">
                本月监测到网络告警事件<span class="tip-color">{{
                  reportObj.totalEventCount || 0
                }}</span>个。<span v-if="reportObj.totalEventCount">从攻击的威胁程度分析，高危事件占比{{
  reportObj.totalAttackHighRiskRate || '0%'
}}，中危事件占比{{
  reportObj.totalAttackModerateRiskRate || '0%'
}}，低危事件占比{{ reportObj.totalAttackLowRiskRate || '0%'
}}<span v-if="reportObj.totalAttackType">。从攻击行为分析，告警事件主要以{{
  reportObj.totalAttackType
}}为主</span>，占到总数的{{
  reportObj.totalAttackTypeTopThreeRate || '0%'
}}。从所属运营商分析，来自<span class="tip-color">{{
  reportObj.totalAttackOperatorFirst || '-'
}}</span>运营商的攻击事件数量居于首位，占到总数的{{
  reportObj.totalAttackOperatorFirstRate || '0%'
}}，其次，{{ reportObj.totalAttackOperatorSecond || '-' }}、{{
  reportObj.totalAttackOperatorThird || '-'
}}运营商分别占比{{
  reportObj.totalAttackOperatorSecondRate || '0%'
}}、{{ reportObj.totalAttackOperatorThirdRate || '0%' }}。
                </span>
              </div>
              <div class="mt-16 color-text">
                本月网络告警事件趋势如下图所示<span v-if="reportObj.totalAttackCountDate">，其中{{
                  reportObj.totalAttackCountDate
                }}发生的事件数量最多，达{{
  reportObj.totalAttackCountFirst || 0
}}个</span>：
              </div>
              <div class="y-chart mt-16 border-color">
                <div class="color-text">告警事件趋势</div>
                <LineChart v-if="isDisplayChart" :xInterval="xInterval" :legendRight="0" :yAxisColor="textColor"
                  :yLineColor="yLineColor" :titleLeft="0" :gridTop="20" :gridBottom="20" :splitLineColor="yLineColor"
                  :showSymbol="true" :yAxisAxisLineShow="false" :xAxisSplitLineShow="false" :yAxisSplitLineShow="true"
                  :xAxisData="linexAxisData" :chartData="lineChartData" :xFontSize="10" />
              </div>
            </div>
            <!-- 第二部分 -->
            <div>
              <div class="hearder-title">
                <div>
                  <img src="../../../assets/image/report/pdf-title-icon.png" alt="" />
                </div>
                <div>二、网络告警事件分析</div>
              </div>
              <div class="secondary-title">
                <div class="secondary-left"></div>
                <div class="secondary-right">攻击行为分析</div>
              </div>
              <div class="color-text">
                <span v-if="reportObj.totalAttackType">告警事件主要包括：{{ reportObj.totalAttackType }}。</span>
                <span v-if="reportObj.totalAttackTypeSome">其中{{ reportObj.totalAttackTypeSome || '-'
                }}</span>各告警事件占比分析如下图所示：
              </div>
            </div>
          </div>
          <div class="page color-text" v-if="isDown">01页</div>
          <!-- 第二页 -->
          <div :class="{ 'pageHeight-two': isDown }">
            <div class="attark-behavior mt-16 border-color">
              <div class="attark-behavior-name color-text">事件占比分布图</div>
              <RoseChart style="height: 95%" v-if="isDisplayChart && barChartData.length > 0" :textColor="textColor"
                :textValueColor="isDown ? yLineColor : textColor" :borderWidth="0" :chartData="barChartData"
                :legendShow="false" :labelFormatter="labelFormatter" />
              <div style="margin-top: 50px" v-if="barChartData.length == 0">
                <YaEmpty :theme="theme"></YaEmpty>
              </div>
            </div>
            <div class="mt-16 color-text" v-if="reportObj.totalAttackType">
              对排名前三的{{ reportObj.totalAttackType || '-' }}分析如下：
            </div>
            <div class="mt-16 eventAnalyse color-text" v-for="(item, index) in reportObj.attackEventAnalyses">
              <div class="eventAnalyse-name">
                <span class="eventAnalyse-index" :class="{ yellow: index == 1, blue: index > 1 }">{{ index + 1 }}</span>
                {{ item.name }}
              </div>
              <div class="eventAnalyse-content">
                {{ item.value }}
              </div>
            </div>
            <div>
              <div class="secondary-title">
                <div class="secondary-left"></div>
                <div class="secondary-right">攻击威胁程度分析</div>
              </div>
              <div class="color-text">
                本月<span class="tip-color">高危事件{{ reportObj.totalAttackHighRiskCount || 0 }}</span>个<span
                  v-if="reportObj.totalAttackHighRiskCount">，占总数的{{
                    reportObj.totalAttackHighRiskRate || '0%'
                  }}，中危事件{{
  reportObj.totalAttackModerateRiskCount || 0
}}个，占总数的{{
  reportObj.totalAttackModerateRiskRate || '0%'
}}，低危事件{{
  reportObj.totalAttackLowRiskCount || 0
}}个，占比总数的{{
  reportObj.totalAttackLowRiskRate || '0%'
}}。高危事件主要以{{
  totalAttackHighRiskType || '-'
}}为主，分别占其总数的<span>{{
  reportObj.totalAttackHighRiskTypeRate || '0%'
}}</span></span>。
              </div>
              <div class="secondary-title">
                <div class="secondary-left"></div>
                <div class="secondary-right">攻击来源和被攻击地域分析</div>
              </div>
              <div class="color-text">
                本月监测发现<span class="tip-color">攻击源IP共{{ reportObj.totalAttackSrcIpCount || 0 }}</span>个<span
                  v-if="reportObj.totalAttackSrcIpCount">，其中省外IP
                  {{ reportObj.totalAttackSrcIpOutCount || 0 }}个，占比{{
                    reportObj.totalAttackSrcIpOutCountRate || '0%'
                  }}，告警事件数量{{
  reportObj.totalAttackEventOutCount || 0
}}个；省内IP
                  {{ reportObj.totalAttackSrcIpInCount || 0 }}个，占比{{
                    reportObj.totalAttackSrcIpInCountRate || '0%'
                  }}，告警事件数量{{
  reportObj.totalAttackEventInCount || 0
}}个。省内<span class="tip-color">受影响IP共计{{
  reportObj.totalAttackDestIpInCount || 0
}}个</span> </span>。
              </div>
              <div class="mt-16 color-text fontWeight">
                -省内受攻击区域分布：
              </div>
              <div class="mt-8 color-text" v-if="reportObj.totalAttackSrcIpCount">
                根据告警事件的地址分析，按告警事件的数量进行排序居前三的地区是<span class="tip-color">{{ reportObj.totalAttackArea || '-'
                }}</span>，事件数量分别为{{
  reportObj.totalAttackAreaCount || '-'
}}；省内受影响的IP共{{
  reportObj.totalAttackDestIpInCount || 0
}}个，按涉及IP的数量进行排序，居前三的地区是<span>{{
  reportObj.totalAttackAreaDestIp || '-'
}}</span>，受影响的IP数量分别为<span>{{
  reportObj.totalAttackAreaDestIpCount || '-'
}}</span>，具体情况如下表所示：
              </div>
            </div>
          </div>
          <div class="page color-text" v-if="isDown">02页</div>
          <!-- 第三页 -->
          <div :class="{ 'pageHeight-two': isDown }">
            <div class="table-border mt-16 border-color">
              <table width="100%" cellspacing="0">
                <tr class="table-header">
                  <th>排名</th>
                  <th>地区</th>
                  <th>IP数量</th>
                  <th>环比增长</th>
                </tr>
                <tr class="table-content color-text" v-if="reportObj.attackSourceProvinceIp.length > 0"
                  v-for="(item, index) in reportObj.attackSourceProvinceIp">
                  <td style="width: 50px">
                    <div class="table-content-index" :class="{
                      yellow: index == 1,
                      red: index == 0,
                      blue: index == 2,
                    }">
                      {{ index + 1 }}
                    </div>
                  </td>
                  <td>{{ item.name || '-' }}</td>
                  <td>{{ item.count || 0 }}</td>
                  <td>
                    <img v-if="item.trend == 2" src="../../../assets/image/report/decline.png" alt="" />
                    <img v-else src="../../../assets/image/report/increase.png" alt="" />
                    {{ item.ratio }}
                  </td>
                </tr>
              </table>
              <div class="empty-no-length" v-if="reportObj.attackSourceProvinceIp.length == 0">
                <YaEmpty :theme="theme"></YaEmpty>
              </div>
            </div>
            <div class="mt-16 color-text fontWeight">
              -境内攻击来源省份分布：
            </div>
            <div class="mt-8 color-text">
              <span v-if="reportObj.totalAttackDomesticEventProvince">根据事件的攻击来源进行统计，境内攻击主要<span class="tip-color">{{
                reportObj.totalAttackDomesticEventProvince || '-' }}</span>等省份，按事件数量对省份进行排序，</span>具体情况如下图所示：
            </div>
            <div class="attatk-origin mt-16 border-color">
              <div class="color-text">境内攻击事件数量TOP10的省份分布</div>
              <BarChart v-if="isDisplayChart && attackSourceProvinceTop10.length > 0" :textColor="textColor"
                :yLineColor="yLineColor" :splitLine="true" :gridTop="30" :gridBottom="20" :gridRight="0"
                :xAxisData="attackSourceProvinceTop10" :chartData="attackSourceProvinceTop10Data" />
              <div v-if="attackSourceProvinceTop10.length == 0">
                <YaEmpty :theme="theme"></YaEmpty>
              </div>
            </div>
            <div class="color-text mt-16">
              本月监测发现
              <span class="tip-color">境内恶意攻击IP数量为{{
                reportObj.totalAttackDomesticSrcIpCount || 0
              }}</span>个<span v-if="reportObj.totalAttackDomesticSrcIpCount">，<span
                  v-if="reportObj.spitAttackEventAnalyses">其中<span v-for="item in reportObj.spitAttackEventAnalyses">{{
                    item }}</span>，</span>按境内攻击IP数量进行排序</span>，具体情况如下图所示：
            </div>
          </div>
          <div class="page color-text" v-if="isDown">03页</div>
          <!-- 第四页 -->
          <div :class="{ 'pageHeight-two': isDown }">
            <div class="attatk-origin mt-16 border-color">
              <div class="color-text">境内攻击IP数量TOP10的省份分布</div>
              <BarChart v-if="isDisplayChart && attackSourceProvinceIpTop10.length > 0" :textColor="textColor"
                :yLineColor="yLineColor" :splitLine="true" :gridTop="30" :gridBottom="20" :gridRight="0"
                :xAxisData="attackSourceProvinceIpTop10" :chartData="attackSourceProvinceIpTop10Data" />
              <div v-if="attackSourceProvinceIpTop10.length == 0">
                <YaEmpty :theme="theme"></YaEmpty>
              </div>
            </div>
            <div class="secondary-title">
              <div class="secondary-left"></div>
              <div class="secondary-right">受影响单位情况分析</div>
            </div>
            <div class="mt-16 color-text fontWeight">-受攻击影响单位排名</div>
            <div class="mt-8 color-text">
              本月网络告警事件<span class="tip-color">共涉及单位{{ reportObj.totalEnterpriseCount || 0 }}家</span><span
                v-if="reportObj.totalEnterpriseCount">，按事件数量排名居前三的单位分别是{{
                  reportObj.totalAttackEnterprise || '-'
                }}，事件数量分别为{{
  reportObj.totalAttackEnterpriseCount || '-'
}}</span>。
            </div>
            <div class="mt-16 color-text fontWeight">-涉高危事件单位情况</div>
            <div class="mt-8 color-text">
              受高危事件影响的单位共计{{
                reportObj.totalAttackHighRiskEnterpriseCount || 0
              }}家<span v-if="reportObj.totalAttackHighRiskEnterpriseCount">，按高危事件数量进行排名，居前三的单位分别是{{
  reportObj.totalAttackHighRiskEnterprise || '-'
}}，事件数量分别为{{
  reportObj.totalAttackHighRiskEnterpriseFirstCount || '-'
}}。建议对涉及单位及时下发处置通报，协调支撑单位督促指导威胁的处置工作</span>。
            </div>
            <div class="mt-16 color-text fontWeight">-涉及告警事件IP分析</div>
            <div class="mt-8 color-text">
              本月监测网络告警事件涉及的IP数量{{
                reportObj.totalAttackDestIpCount || 0
              }}个。<span v-if="reportObj.totalAttackDestIpCount">根据涉及事件数量进行排名，居前三的IP分别是{{
  reportObj.totalAttackDestIp || '-'
}}，事件数量分别为{{
  reportObj.totalAttackDestIpCountSome || '-'
}}。
              </span>
            </div>
            <div class="secondary-title" v-if="reportObj.totalAttackOperatorSrcIpFirst ||
                reportObj.totalAttackOperatorFirst
                ">
              <div class="secondary-left"></div>
              <div class="secondary-right">运营商分析</div>
            </div>
            <div class="mt-16 color-text" v-if="reportObj.totalAttackOperatorFirst">
              从所属运营商分析，来自<span class="tip-color">{{
                reportObj.totalAttackOperatorFirst || '-'
              }}</span>运营商的攻击事件数量居于首位，为<span class="tip-color">{{
  reportObj.totalAttackOperatorFirstCount || 0
}}</span>个，占到总数的{{
  reportObj.totalAttackOperatorFirstRate || '0%'
}}，其次，{{ reportObj.totalAttackOperatorSecond || '-' }}、{{
  reportObj.totalAttackOperatorThird || '-'
}}运营商分别占比{{
  reportObj.totalAttackOperatorSecondRate || '0%'
}}、{{
  reportObj.totalAttackOperatorThirdRate || '0%'
}}。来自移动运营商的事件主要是{{
  reportObj.totalAttackMobileEvent || '-'
}}；来自电信运营商的事件主要是{{
  reportObj.totalAttackTelecomEvent || '-'
}}；来自联通运营商的事件主要是{{
  reportObj.totalAttackUnicomEven || '-'
}}。
            </div>
            <div class="mt-16 color-text" v-if="reportObj.totalAttackOperatorSrcIpFirst">
              来自<span class="tip-color">{{
                reportObj.totalAttackOperatorSrcIpFirst || '-'
              }}</span>运营商的攻击者数量最多，有<span class="tip-color">{{
  reportObj.totalAttackOperatorSrcIpFirstCount || 0
}}</span>个，占总数的{{
  reportObj.totalAttackOperatorSrcIpFirstCountRate || '0%'
}}；来自{{
  reportObj.totalAttackOperatorSrcIpSecond || '-'
}}运营商的攻击者有{{
  reportObj.totalAttackOperatorSrcIpSecondCount || 0
}}个，占总数的{{
  reportObj.totalAttackOperatorSrcIpSecondCountRate || '0%'
}}；来自{{
  reportObj.totalAttackOperatorSrcIpThird || '-'
}}运营商的攻击者有{{
  reportObj.totalAttackOperatorSrcIpThirdCount || 0
}}个，占总数的{{
  reportObj.totalAttackOperatorSrcIpThirdCountRate || '0%'
}}。建议各运营商加强管理，及时对攻击IP进行封禁。
            </div>
            <div class="secondary-title">
              <div class="secondary-left"></div>
              <div class="secondary-right">恶意程序分析</div>
            </div>
            <div class="mt-16 color-text fontWeight">-恶意程序捕捉情况</div>
            <div class="mt-8 color-text">
              <span class="tip-color">本月捕获恶意程序样本数量超过{{
                reportObj.totalEvilCount || 0
              }}个，日均传播次数达{{
  reportObj.totalEvilDayCount || 0
}}余次，涉及恶意程序家族近{{
  reportObj.totalEvilFamilyCount || 0
}}个</span>
              。<span v-if="reportObj.totalEvilCount">按照传播来源统计，境内来源主要来自{{
                reportObj.totalEvilProvince || '-'
              }}。按照攻击目标IP地址统计，省内受恶意程序攻击的IP地址约为{{
  reportObj.totalEvilInDestIpCount || 0
}}，主要集中在{{
  reportObj.totalEvilInDestIpCity || '-'
}}地区。</span>具体情况如下图所示：
            </div>
            <div class="attark-distribution mt-16 border-color">
              <div class="color-text">省内受恶意程序攻击地市分布</div>
              <CircularDiagram v-if="provinceSpiteAttackCity.length > 0" :chartData="provinceSpiteAttackCity"
                :legendLeft="'35%'" :chartWidth="'35%'" :radius="['50%', '63%']" :pieCenter="['50%', '50%']"
                legendLeft="50%" legendTop="auto" />
              <div v-if="provinceSpiteAttackCity.length == 0">
                <YaEmpty :theme="theme"></YaEmpty>
              </div>
            </div>
          </div>
          <div class="page color-text" v-if="isDown">04页</div>
          <!-- 第五页 -->
          <div :class="{ 'pageHeight-three': isDown }">
            <div class="mt-16 color-text fontWeight">
              -计算机恶意程序用户感染情况
            </div>
            <div class="mt-8">
              <span class="tip-color">省内感染计算机恶意程序的主机数量约为{{
                reportObj.totalEvilInDestIpCount || 0
              }}</span><span v-if="reportObj.totalEvilInDestIpQoq">{{
  reportObj.totalEvilInDestIpQoq || 0
}}</span>。<span v-if="reportObj.totalEvilInDestIpCount">大约{{
  reportObj.totalEvilSrcIpCount || 0
}}个计算机恶意程序控制服务器控制省内约{{
  reportObj.totalEvilInDestIpCount || 0
}}台主机。从控制服务器所属地区来看，位于{{
  reportObj.totalEvilSrcIpProvince || '-'
}}的控制服务器数量分列前三位，分别是约{{
  reportObj.totalEvilSrcIpProvinceCount || '-'
}}个；
                <span class="tip-color">从省内感染计算机恶意程序主机所属地区看，感染主机主要分布于{{
                  reportObj.totalEvilInDestIpCity || '-'
                }}</span>，分别占省内感染主机总数的{{
  reportObj.totalEvilInDestIpCityRate || '-'
}}。建议协调相关机构对计算机恶意程序感染主机进行扫描修复，有效控制感染主机引发的危害。</span>
            </div>
            <div class="attark-distribution mt-16 border-color">
              <div class="color-text">省内感染主机地市分布</div>
              <CircularDiagram v-if="provinceInfectHostCityTop10.length > 0" :chartData="provinceInfectHostCityTop10"
                :legendLeft="'35%'" :chartWidth="'35%'" :radius="['50%', '63%']" :pieCenter="['50%', '50%']"
                legendLeft="50%" legendTop="auto" />
              <div v-if="provinceInfectHostCityTop10.length == 0">
                <YaEmpty :theme="theme"></YaEmpty>
              </div>
            </div>
            <div class="secondary-title">
              <div class="secondary-left"></div>
              <div class="secondary-right">DDOS攻击</div>
            </div>
            <div class="mt-16 color-text">
              经过持续监测分析，全省分布式拒绝服务攻击发生（DDoS攻击）<span class="tip-color">{{ reportObj.totalDdosEventCount || 0
              }}</span>个，省内受害IP地址数量<span class="tip-color">{{
  reportObj.totalDdosDestIpInCount || 0
}}</span>个<span v-if="reportObj.totalDdosDestIpInQoq">，{{ reportObj.totalDdosDestIpInQoq }}</span>。<span
                v-if="reportObj.totalDdosDestIpCity">从受害IP所属地区看，主要分布于{{
                  reportObj.totalDdosDestIpCity || '-'
                }}，分别占省内受害IP总数的{{
  reportObj.totalDdosDestIpCityRate || '-'
}}。建议持续加强对省内目标遭大流量攻击情况的监测跟踪分析，针对所发现的被用于进行
                DDoS 攻击的网络资源重点开展治理。
              </span>
            </div>
          </div>
          <div class="page color-text page-last" v-if="isDown">05页</div>
        </div>
      </div>
      <div class="ya-icon-download" @click="handleDownloadPdf">
        <img :src="iconDownload" alt="" />
        <span>点击下载</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick, Ref, watch, onMounted } from 'vue';
import { ElMessageBox, ElMessage, FormRules } from 'element-plus';
import { postPreviewReport } from '../../../api/monitoring/report';
import { downloadPDF } from '../../../utils/tools';
import iconDownload from '../../../assets/image/report/download.svg';
import { useRoute } from 'vue-router';
import { mapMapping } from '../../../assets/map/provinceData';
import LineChart from '../../../components/chart/LineChart/LineChart.vue';
import RoseChart from '../../../components/chart/RoseChart/RoseChart.vue';
import BarChart from '../../../components/chart/BarChart/BarChart.vue';
import CircularDiagram from '../../../components/chart/CircularDiagram/CircularDiagram.vue';
import { bigNumberTransform } from '../../../utils/utils';
import Overlay from './Overlay.vue';
const mapData = reactive(mapMapping());
const route = useRoute();
const { id } = route.query;
const name = ref('');
const reportObj = ref({
  attackSourceProvinceIp: [],
});
const textColor = ref('rgba(255, 255, 255, 0.40)'); // 深色：rgba(255, 255, 255, 0.40) 浅色：rgba(0, 0, 0, 0.40)
const yLineColor = ref('rgba(255, 255, 255, 0.10)'); //深色：rgba(255, 255, 255, 0.10) 浅色：rgba(0, 0, 0, 0.10)
const xInterval = ref(0); // 折线图显示点
const linexAxisData = ref(['1', '2', '3']);
const lineChartData = ref([
  {
    name: '',
    data: [],
  },
]);
const barChartData = ref([]);
const attackSourceProvinceTop10 = ref([]);
const attackSourceProvinceTop10Data = ref([{ name: '', data: [] }]);
const attackSourceProvinceIpTop10 = ref([]);
const attackSourceProvinceIpTop10Data = ref([{ name: '', data: [] }]);
const provinceSpiteAttackCity = ref([]);
const provinceInfectHostCityTop10 = ref([]);
const labelFormatter = (params) => {
  return (
    '{name|' +
    params.name +
    '}\n\n{value|' +
    bigNumberTransform(params.data.value) +
    '个}'
  );
};
const isDown = ref(false);
const isOverlay = ref(false);
const isDisplayChart = ref(true);
const theme = ref('');
/**
 * @description 导出pdf
 */
const handleDownloadPdf = () => {
  resetChartStyle(true);
  setTimeout(() => {
    isDown.value = true;
    nextTick(() => {
      downloadPDF(
        document.getElementById('yaPdf'),
        reportObj.value.date + '山东省网络安全监测报告'
      );
      resetChartStyle(false);
    });
  }, 2500);
};
/**
 * @description 导出中重置图表样式
 */
const resetChartStyle = (e) => {
  if (e) {
    isDisplayChart.value = false;
    isOverlay.value = true;
    textColor.value = 'rgba(0, 0, 0, 0.40)';
    yLineColor.value = 'rgba(0, 0, 0, 0.20)';
    theme.value = 'light';
    nextTick(() => {
      isDisplayChart.value = true;
    });
  } else {
    isDown.value = false;
    isDisplayChart.value = false;
    textColor.value = 'rgba(255, 255, 255, 0.40)';
    yLineColor.value = 'rgba(255, 255, 255, 0.10)';
    theme.value = '';
    nextTick(() => {
      isDisplayChart.value = true;
      isOverlay.value = false;
    });
  }
};
/**
 * @description 获取报表详情
 */
const getList = () => {
  postPreviewReport({ id: Number(id) }).then((res) => {
    const { code, data } = res;
    if (code === 200) {
      reportObj.value = data;
      if (data.dateType == '月度') {
        xInterval.value = 3;
      }
      linexAxisData.value = data.attackEventTrend.date
        ? data.attackEventTrend.date.split(',')
        : [];
      lineChartData.value[0].data = data.attackEventTrend.count
        ? data.attackEventTrend.count.split(',')
        : [];
      barChartData.value = data.attackEvent
        ? data.attackEvent.map((item) => {
          return {
            name: item.name,
            value: item.count,
            percent: item.ratio.split('%')[0],
          };
        })
        : [];
      attackSourceProvinceTop10Data.value[0].data =
        data.attackSourceProvinceTop10
          ? data.attackSourceProvinceTop10.map((item) => {
            return item.count;
          })
          : [];
      attackSourceProvinceTop10.value = data.attackSourceProvinceTop10
        ? data.attackSourceProvinceTop10.map((item) => {
          return item.name;
        })
        : [];
      attackSourceProvinceIpTop10Data.value[0].data =
        data.attackSourceProvinceIpTop10
          ? data.attackSourceProvinceIpTop10.map((item) => {
            return item.count;
          })
          : [];
      attackSourceProvinceIpTop10.value = data.attackSourceProvinceIpTop10
        ? data.attackSourceProvinceIpTop10.map((item) => {
          return item.name;
        })
        : [];
      provinceSpiteAttackCity.value = data.provinceSpiteAttackCity
        ? data.provinceSpiteAttackCity.map((item) => {
          return {
            name: item.name,
            value: item.count,
            radio: item.ratio,
          };
        })
        : [];
      provinceInfectHostCityTop10.value = data.provinceInfectHostCityTop10
        ? data.provinceInfectHostCityTop10.map((item) => {
          return {
            name: item.name,
            value: item.count,
            radio: item.ratio,
          };
        })
        : [];
    }
  });
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.yjMain {
  position: relative;
  width: 858px;
  margin: 0 auto;
  background-color: transparent;
  backdrop-filter: blur(3px); //毛玻璃属性

  .ya-icon-download {
    position: sticky;
    bottom: 10vh;
    left: 0;
    margin-left: 900px;
    background: var(--el-text-color-active);
    width: 34px;
    height: 34px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    color: #fff;

    img {
      width: 24px;
    }

    span {
      font-size: 12px;
      display: none;
    }

    &:hover {
      img {
        display: none;
      }

      span {
        display: inline-block;
      }
    }
  }
}

.yaPdf {
  padding-bottom: 40px;
  font-size: 14px;
  line-height: 20px;
  min-height: 100vh;
  position: relative;
  background: var(--el-color-white);

  .ya-pdf-header {
    position: relative;
    height: 254px;
    background: url('../../../assets/image/report/pdf-header.png') no-repeat;
    background-size: 100% 100%;

    .yj-header-title {
      position: absolute;
      text-align: center;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 50%;
      color: var(--el-color-white);

      .yj_title {
        font-size: 30px;
        font-weight: bold;
        white-space: nowrap;
        margin-bottom: 32px;
      }

      .yj_time {
        height: 36px;
        font-size: 18px;
        background: rgba(0, 0, 0, 0.26);
        border: 3px solid rgba(255, 255, 255, 0.26);
        border-radius: 20px;
        padding: 3px 11px;
        box-sizing: border-box;
      }
    }
  }

  .mt-16 {
    margin-top: 16px;
  }

  .mt-8 {
    margin-top: 8px;
  }

  .mt-32 {
    margin-top: 32px;
  }

  .color-text {
    color: rgba(0, 0, 0, 0.65);
    font-weight: 400;
  }

  .fontWeight {
    font-weight: 500;
  }

  .ya-pdg-content {
    margin: 0 29px;
    font-size: 14px;

    .top {
      height: 92px;
      background: rgba(42, 144, 255, 0.12);
      border-radius: 4px;
      margin-top: 32px;
      box-sizing: border-box;
      padding: 16px;
    }

    .tip-color {
      color: rgba(42, 144, 255, 1);
    }

    .hearder-title {
      display: flex;
      align-items: center;
      height: 39px;
      background: rgba(0, 0, 0, 0.03);
      box-sizing: border-box;
      padding-left: 12px;
      margin-top: 32px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.8);
      font-size: 16px;

      img {
        position: relative;
        top: 3px;
        margin-right: 12px;
      }
    }

    .y-chart {
      height: 263px;
      border-radius: 4px;
      padding: 16px;
      box-sizing: border-box;
    }

    .secondary-title {
      display: flex;
      align-items: center;
      margin-top: 24px;
      margin-bottom: 16px;

      .secondary-left {
        width: 6px;
        height: 15px;
        background: rgba(0, 149, 255, 1);
        border-radius: 0px 100px 100px 0px;
      }

      .secondary-right {
        margin-left: 8px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.8);
        font-size: 14px;
      }
    }

    .attark-behavior {
      height: 340px;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 16px;

      .attark-behavior-name {
        font-weight: 400;
        font-size: 14px;
      }
    }

    .eventAnalyse {
      height: 106px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-sizing: border-box;

      .eventAnalyse-name {
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4);
        background: rgba(0, 0, 0, 0.03);
        border-radius: 4px 4px 0px 0px;
        padding: 10px 16px;
        display: flex;
        align-items: center;
      }

      .eventAnalyse-index {
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        margin-right: 8px;
        background: #e65857;
      }

      .eventAnalyse-content {
        padding: 12px 16px;
      }
    }

    .table-border {
      border-radius: 4px;
      width: 100%;
      height: 680px;
      overflow: auto;

      .table-header {
        height: 40px;
        background: #f4f4f4;
        border-radius: 4px 4px 0px 0px;
        color: rgba(0, 0, 0, 0.4);
      }

      .table-content {
        text-align: center;
        height: 40px;

        td {
          border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        }

        .table-content-index {
          width: 16px;
          height: 16px;
          line-height: 16px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.2);
          font-size: 12px;
          color: #ffffff;
          margin: 0 auto;
        }
      }

      .table-content:last-child {
        td {
          border: none;
        }
      }
    }

    .red {
      background: #e65857 !important;
    }

    .yellow {
      background: rgba(241, 131, 1, 1) !important;
    }

    .blue {
      background: rgba(42, 144, 255, 1) !important;
    }

    .attatk-origin {
      box-sizing: border-box;
      padding: 16px;
      height: 263px;
      border-radius: 4px;
    }

    .attark-distribution {
      box-sizing: border-box;
      height: 227px;
      border-radius: 4px;
      padding: 16px;
    }
  }

  .border-color {
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  ::v-deep .custom-circle-legend-item {
    .circle-icon {
      width: 8px;
      height: 8px;
      border-radius: 0;
    }

    .legend-label {
      color: rgba(0, 0, 0, 0.65) !important;
    }

    .legend-value {
      color: rgba(0, 0, 0, 0.4) !important;
      font-family: auto;
    }
  }
}

.pageHeight {
  height: 890px;
}

.pageHeight-two {
  height: 1150px;
}

.pageHeight-three {
  height: 1140px;
}

.page {
  text-align: right;
  padding-bottom: 30px;
}

.page-last {
  padding-bottom: 0;
}

::v-deep .no-data-text {
  color: rgba(0, 0, 0, 0.65) !important;
}

// 预览样式

.y-l-bg {
  background: #001e3d;
  color: #fff;

  .ya-pdg-content {
    .top {
      background: rgba(255, 255, 255, 0.05);
    }

    .hearder-title {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.05);
    }

    .secondary-title {
      .secondary-right {
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .eventAnalyse {
      border: 1px solid rgba(255, 255, 255, 0.1);

      .eventAnalyse-name {
        color: rgba(255, 255, 255, 0.8);
        background: rgba(255, 255, 255, 0.05);
      }
    }

    .table-border {
      .table-header {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
      }

      .table-content {
        td {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .table-content-index {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }

    .secondary-title {
      .secondary-left {
        background: var(--el-text-color-primary);
      }
    }
  }

  .color-text {
    color: rgba(255, 255, 255, 0.65);
  }

  .border-color {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  ::v-deep .custom-circle-legend-item {
    .legend-label {
      color: rgba(255, 255, 255, 0.4) !important;
    }

    .legend-value {
      color: rgba(255, 255, 255, 0.3) !important;
      font-family: auto;
    }
  }

  .tip-color {
    color: var(--el-text-color-primary) !important;
  }

  .empty-no-length {
    width: 100%;
    margin-top: 25%;
  }

  ::v-deep .no-data-text {
    color: var(--el-text-color-primary) !important;
  }
}
</style>
