<template>
  <div>
    <add-page-layout>
      <div slot="Header-Content">
        <span>告警结果</span>
<!--        <i class="el-icon-close close" @click="$router.go(-1)" />-->
      </div>
      <div slot="Form-Content">
        <div
          v-show="!centerButtonVisible"
          style="width: 1%;position: fixed;z-index: 999;bottom: 20px;"
        >
          <el-button
            shape="circle"
            icon="el-icon-s-unfold"
            size="large"
            type="primary"
            @click="centerButton('openBt')"
          />
        </div>
        <div
          v-show="centerButtonVisible"
          style="width: 83%;position: fixed;z-index: 999;bottom: 20px;text-align: center;"
        >
          <el-button-group>
            <el-button
              size="large"
              type="primary"
              icon="el-icon-arrow-left"
              @click="centerButton('closeBt')"
            >收缩
            </el-button>
            <!-- <el-button @click="centerButton('assign')"
                     size="large"
                     type="primary"
                     icon="el-icon-share"
                     :disabled="alarmCorrelationResult.statusTag=='3' || alarmCorrelationResult.statusTag=='4' || alarmCorrelationResult.statusTag=='5'">
            指派
          </el-button> -->
            <el-button
              size="large"
              type="primary"
              icon="el-icon-edit"
              :disabled="alarmCorrelationResult.statusTag=='3' || alarmCorrelationResult.statusTag=='4' || alarmCorrelationResult.statusTag=='5'"
              @click="centerButton('deal')"
            >
              处理
            </el-button>
            <!-- <el-button @click="centerButton('back')" size="large" type="primary">
            <Icon type="ios-undo" />回退
          </el-button>-->
<!--            <el-button-->
<!--              size="large"-->
<!--              icon="el-icon-close"-->
<!--              type="primary"-->
<!--              @click="centerButton('close')"-->
<!--            >关闭-->
<!--            </el-button>-->
          </el-button-group>
        </div>

        <alarmResultDeal
          :type="dealType"
          :value="dealValue"
          @change="handleDealType"
          @refresh="handleDealRefresh"
        />
        <el-tabs
          v-model="attrType"
          type="card"
          @tab-click="labelClick"
        >
          <el-tab-pane
            label="详细信息"
            name="common"
          >
            <div class="table-container">
              <el-row>
                <el-col :span="12">
                  <el-card
                    shadow="hover"
                    class="simpleTable"
                  >
                    <h1 slot="header">基本信息</h1>
                    <table
                      border="1"
                      cellspacing="1"
                      cellpadding="0"
                      width="100%"
                    >
                      <tr>
                        <td>告警名称：</td>
                        <td
                          colspan="1"
                          :style="{ color: alarmLevelColor }"
                        >{{ alarmCorrelationResult.alertName }}</td>
                      </tr>
                      <tr>
                        <td>告警大类：</td>
                        <td>{{ alarmCorrelationResult.alertType|toCase(bigdataAlarmType ,'dataId','dataName') }}</td>
                      </tr>
                      <tr>
                        <td>告警小类：</td>
                        <td>{{ alarmCorrelationResult.alertTypeSub|toCase(bigdataAlarmType ,'dataId','dataName') }}</td>
                      </tr>
                      <tr>
                        <td>告警来源：</td>
                        <td>{{ alarmCorrelationResult.alertSource|toCase(datasourceType ,'dataId','dataName') }}</td>
                      </tr>
                      <tr>
                        <td>告警等级:</td>
                        <td :style="{ color: alarmLevelColor }">
                          <template>
                            <i
                              size="21"
                              class="el-icon-lightning"
                            />
                            &nbsp;{{ alarmCorrelationResult.alertLevel|toCase(alarmLevels ,'dataId','dataName') }}
                          </template>
                        </td>
                      </tr>
                      <tr>
                        <td>状态：</td>
                        <td>
                          <template>{{ alarmCorrelationResult.statusTag|toCase(statics.statusTag ,'dataId','dataName') }}</template>
                        </td>
                      </tr>
                      <tr>
                        <td>最近发生时间：</td>
                        <td>{{ alarmCorrelationResult.updateTime }}</td>
                      </tr>
                      <tr>
                        <td>告警次数：</td>
                        <td>{{ alarmCorrelationResult.alertCount }}</td>
                      </tr>
                    </table>
                  </el-card>
                </el-col>
                <el-col
                  :span="11"
                  :offset="1"
                >
                  <el-card
                    shadow="hover"
                    class="simpleTable"
                  >
<!--                    <h1 slot="header">攻击阶段分布</h1>-->
<!--                    <div style="width:100%;height:271px;">-->
<!--                      &lt;!&ndash; 曲线 &ndash;&gt;-->
<!--                      <p class="curve1" />-->
<!--                      <p class="curve2" />-->
<!--                      <p class="curve3" />-->
<!--                      <p class="curve4" />-->
<!--                      <p class="curve5" />-->
<!--                      <p class="curve6" />-->
<!--                      &lt;!&ndash; 三角形 &ndash;&gt;-->
<!--                      <p class="triangle1" />-->
<!--                      <p class="triangle2" />-->
<!--                      <p class="triangle3" />-->
<!--                      <p class="triangle4" />-->
<!--                      <p class="triangle5" />-->
<!--                      <p class="triangle6" />-->

<!--                      <span class="badgeName1">侦察</span>-->
<!--                      <span class="badgeName2">工具制作</span>-->
<!--                      <span class="badgeName3">投递</span>-->
<!--                      <span class="badgeName4">攻击渗透</span>-->
<!--                      <span class="badgeName5">安装工具</span>-->
<!--                      <span class="badgeName6">命令控制</span>-->
<!--                      <span class="badgeName7">恶意活动</span>-->

<!--                      <el-badge-->
<!--                        :value="badgeCount1"-->
<!--                        class="badge1"-->
<!--                        :hidden="badgeCount1===0?true:false"-->
<!--                      >-->
<!--                        <img-->
<!--                          class="img1"-->
<!--                          src="./imgs/attackChain/1.png"-->
<!--                        >-->
<!--                      </el-badge>-->
<!--                      <el-badge-->
<!--                        :value="badgeCount2"-->
<!--                        class="badge2"-->
<!--                        :hidden="badgeCount2===0?true:false"-->
<!--                      >-->
<!--                        <img-->
<!--                          class="img2"-->
<!--                          src="./imgs/attackChain/22.png"-->
<!--                        >-->
<!--                      </el-badge>-->
<!--                      <el-badge-->
<!--                        :value="badgeCount3"-->
<!--                        class="badge3"-->
<!--                        :hidden="badgeCount3===0?true:false"-->
<!--                      >-->
<!--                        <img-->
<!--                          class="img3"-->
<!--                          src="./imgs/attackChain/3.png"-->
<!--                        >-->
<!--                      </el-badge>-->
<!--                      <el-badge-->
<!--                        :value="badgeCount4"-->
<!--                        class="badge4"-->
<!--                        :hidden="badgeCount4===0?true:false"-->
<!--                      >-->
<!--                        <img-->
<!--                          class="img4"-->
<!--                          src="./imgs/attackChain/44.png"-->
<!--                        >-->
<!--                      </el-badge>-->
<!--                      <el-badge-->
<!--                        :value="badgeCount5"-->
<!--                        class="badge5"-->
<!--                        :hidden="badgeCount5===0?true:false"-->
<!--                      >-->
<!--                        <img-->
<!--                          class="img5"-->
<!--                          src="./imgs/attackChain/55.png"-->
<!--                        >-->
<!--                      </el-badge>-->
<!--                      <el-badge-->
<!--                        :value="badgeCount6"-->
<!--                        class="badge6"-->
<!--                        :hidden="badgeCount6===0?true:false"-->
<!--                      >-->
<!--                        <img-->
<!--                          class="img6"-->
<!--                          src="./imgs/attackChain/66.png"-->
<!--                        >-->
<!--                      </el-badge>-->
<!--                      <el-badge-->
<!--                        :value="badgeCount7"-->
<!--                        class="badge7"-->
<!--                        :hidden="badgeCount7===0?true:false"-->
<!--                      >-->
<!--                        <img-->
<!--                          class="img7"-->
<!--                          src="./imgs/attackChain/7.png"-->
<!--                        >-->
<!--                      </el-badge>-->
<!--                      <div style="clear:both;" />-->
<!--                    </div>-->
                    <h1 slot="header">IP信息</h1>
                  <table
                    border="1"
                    cellspacing="1"
                    cellpadding="0"
                    width="100%"
                  >
                    <tr>
                      <td>源IP：</td>
                      <td>
                        <assetAssociate :asset-ip="alarmCorrelationResult.srcIp"  :business-id="alarmCorrelationResult.businessId"/>
                      </td>
                      <td>源端口：</td>
                      <td>{{ alarmCorrelationResult.srcPort }}</td>
                    </tr>
                    <tr>
                      <td>目的IP：</td>
                      <td>
                        <assetAssociate :asset-ip="alarmCorrelationResult.dstIp" :business-id="alarmCorrelationResult.businessId"/>
                      </td>
                      <td>目的端口：</td>
                      <td>{{ alarmCorrelationResult.dstPort }}</td>
                    </tr>
                  </table>
                  </el-card>
                  <el-card
                    shadow="hover"
                    class="simpleTable"
                  ><h1 slot="header">来源设备</h1>
                    <table
                      border="1"
                      cellspacing="1"
                      cellpadding="0"
                      width="100%"
                    >
                      <tr>
                        <td>设备名称：</td>
                        <td>
                          <deviceAssociate :asset-id="alarmCorrelationResult.collectDevAssetId" :device-name="alarmCorrelationResult.deviceName" />
                        </td>
                      </tr>
                      <tr>
                        <td>设备IP：</td>
                        <td>{{ alarmCorrelationResult.deviceIp }}</td>
                      </tr>
                      <tr>
                        <td>设备类型：</td>
                        <td>{{ alarmCorrelationResult.deviceType }}</td>
                      </tr>
                    </table>
                  </el-card>
                </el-col>
              </el-row>

<!--              <el-card-->
<!--                shadow="hover"-->
<!--                class="simpleTable"-->
<!--                :body-style="{height:'45px'}"-->
<!--              >-->
<!--                <h1 slot="header">IP信息</h1>-->
<!--                <table-->
<!--                  border="1"-->
<!--                  cellspacing="1"-->
<!--                  cellpadding="0"-->
<!--                  width="100%"-->
<!--                >-->
<!--                  <tr>-->
<!--                    <td>源IP：</td>-->
<!--                    <td>-->
<!--                      <assetAssociate :asset-ip="alarmCorrelationResult.srcIp" />-->
<!--                    </td>-->
<!--                    <td>源端口：</td>-->
<!--                    <td>{{ alarmCorrelationResult.srcPort }}</td>-->
<!--                    <td>目的IP：</td>-->
<!--                    <td>-->
<!--                      <assetAssociate :asset-ip="alarmCorrelationResult.dstIp" />-->
<!--                    </td>-->
<!--                    <td>目的端口：</td>-->
<!--                    <td>{{ alarmCorrelationResult.dstPort }}</td>-->
<!--                  </tr>-->
<!--                </table>-->
<!--              </el-card>-->
<!--              <el-card-->
<!--                shadow="hover"-->
<!--                class="simpleTable"-->
<!--                :body-style="{height:'45px'}"-->
<!--              >-->
<!--                <h1 slot="header">来源设备</h1>-->
<!--                <table-->
<!--                  border="1"-->
<!--                  cellspacing="1"-->
<!--                  cellpadding="0"-->
<!--                  width="100%"-->
<!--                >-->
<!--                  <tr>-->
<!--                    <td>设备名称：</td>-->
<!--                    <td>-->
<!--                      <deviceAssociate :asset-id="alarmCorrelationResult.collectDevAssetId" :device-name="alarmCorrelationResult.deviceName" />-->
<!--                    </td>-->
<!--                    <td>设备IP：</td>-->
<!--                    <td>{{ alarmCorrelationResult.deviceIp }}</td>-->
<!--                    <td>设备类型：</td>-->
<!--                    <td>{{ alarmCorrelationResult.deviceType }}</td>-->
<!--                  </tr>-->
<!--                </table>-->
<!--              </el-card>-->
              <el-card
                v-if="alarmCorrelationResult.description!=null && alarmCorrelationResult.description!=''"
                shadow="hover"
                class="simpleTable"
              >
                <h1 slot="header">告警描述</h1>
                {{ alarmCorrelationResult.description }}
              </el-card>
              <el-card
                v-if="alarmCorrelationResult.rectification!=null && alarmCorrelationResult.rectification!=''"
                shadow="hover"
                class="simpleTable"
              >
                <h1 slot="header">整改建议</h1>
                {{ alarmCorrelationResult.rectification }}
              </el-card>

              <el-card
                shadow="hover"
                class="simpleTable"
              >
                <h1 slot="header">其他信息</h1>
                <table
                  border="1"
                  cellspacing="1"
                  cellpadding="0"
                  width="100%"
                >
                  <tr>
                    <td>告警编号：</td>
                    <td>{{ alarmCorrelationResult.alertId }}</td>
                    <td>资产名称：</td>
                    <td>{{ alarmCorrelationResult.assetName }}</td>
                    <td>系统名称：</td>
                    <td>{{ alarmCorrelationResult.businessName }}</td>
                  </tr>
                  <tr>
                    <td>资产责任人：</td>
                    <td>{{ alarmCorrelationResult.governorName }}</td>
                    <td>资产IP：</td>
                    <td>{{ alarmCorrelationResult.assetIp }}</td>
                    <td>资产类型：</td>
                    <td>{{ alarmCorrelationResult.assetType }}</td>
                  </tr>
                  <tr>
                    <td>可信度：</td>
                    <td>{{ alarmCorrelationResult.reliability }}</td>
                    <td>攻击是否成功：</td>
                    <td>
                      <template>{{ alarmCorrelationResult.successTag|toCase(statics.successTagList ,'dataId','dataName') }}</template>
                    </td>
                    <td>索引名称：</td>
                    <td>{{ alarmCorrelationResult.indexName }}</td>
                  </tr>
                  <tr>
                    <td>协议：</td>
                    <td>{{ alarmCorrelationResult.protocol }}</td>
                    <td>规则ID：</td>
                    <td><ruleAssociate :rule-id="alarmCorrelationResult.ruleId+''" />
                    </td>
                    <td>最早发生时间：</td>
                    <td>{{ alarmCorrelationResult.occurTime }}</td>
                  </tr>
                  <tr>
                    <td>用户名：</td>
                    <td>{{ alarmCorrelationResult.userName }}</td>
                    <td>发件人地址：</td>
                    <td>{{ alarmCorrelationResult.mailFrom }}</td>
                    <td>接收人地址：</td>
                    <td>{{ alarmCorrelationResult.mailTo }}</td>
                  </tr>
                  <tr>
                    <td>源域：</td>
                    <td>{{ alarmCorrelationResult.srcZone }}</td>
                    <td>目的域：</td>
                    <td>{{ alarmCorrelationResult.dstZone }}</td>
                    <td>恶意域名家族：</td>
                    <td colspan="3">{{ alarmCorrelationResult.classDga }}</td>
                  </tr>
                  <tr>
                    <td>文件名称：</td>
                    <td colspan="3">{{ alarmCorrelationResult.fileName }}</td>
                    <td>特征码：</td>
                    <td colspan="3">{{ alarmCorrelationResult.signature }}</td>
                  </tr>
                  <tr>
                    <td>文件路径：</td>
                    <td colspan="3">{{ alarmCorrelationResult.filePath }}</td>
                    <td>文件MD5：</td>
                    <td colspan="3">{{ alarmCorrelationResult.fileMd5 }}</td>
                  </tr>
                  <tr>
                    <td>URL</td>
                    <td colspan="3">{{ alarmCorrelationResult.url }}</td>
                    <td>COOKIE</td>
                    <td colspan="3">{{ alarmCorrelationResult.cookie }}</td>
                  </tr>
                  <tr>
                    <td>进程名：</td>
                    <td colspan="3">{{ alarmCorrelationResult.processName }}</td>
                  </tr>
                </table>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="归并告警"
            name="merger"
          >
            <alarmResultMergeList
              :refresh-tag="refreshMergeList"
              :p-data="alarmCorrelationResult"
              @traceBack="clickMergerRowAttack"
            />
          </el-tab-pane>
          <el-tab-pane
            label="状态追溯"
            name="statusHis"
          >
            <el-row>
              <el-col :span="11">
                <el-card
                  shadow="hover"
                  class="simpleTable"
                >
                  <h1 slot="header">概览：</h1>
                  <el-row>
                    <el-col :span="12">
                      <p>当前最新状态：</p>
                      <p :style="{ color: alarmStatusColor }">
                        <span style="font-size: 30px;line-height: 50px;">{{ alarmCorrelationResult.statusTag|toCase(statics.statusTag ,'dataId','dataName') }}</span>
                      </p>
                    </el-col>
                    <el-col
                      :span="12"
                      style="line-height: 30px;"
                    >
                      <p>最新处理人：{{ timeLineInfo.latestName }}</p>
                      <p>经历状态变更次数：{{ timeLineInfo.times }}</p>
                      <p>时间周期：{{ timeLineInfo.timeStr }}</p>
                      <p>最开始处理人：{{ timeLineInfo.firstName }}</p>
                      <!--                  <p>累计指派人数：{{timeLineInfo.personNum}}</p>-->
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
              <el-col
                :span="11"
                :offset="2"
              >
                <el-card
                  shadow="hover"
                  class="simpleTable"
                >
                  <h1 slot="header">时间线：</h1>
                  <el-timeline>
                    <!-- <template v-for="temp in timeLineData"> -->
                    <el-timeline-item
                      v-for="temp in timeLineData"
                      :key="temp.time"
                    >
                      <p class="time">{{ temp.time }}</p>
                      <p class="content" v-html="temp.content">{{ temp.content }}</p>
                      <p class="content">{{ temp.statusChange }}</p>
                    </el-timeline-item>
                    <!-- </template> -->
                  </el-timeline>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>

          <el-tab-pane
            label="归并统计"
            name="static"
          >
            <el-row
              class="margin-top-10 searchable-table-con1"
              style="width:100%"
            >
              <el-col :span="12">
                <el-card
                  shadow="hover"
                  class="simpleTable"
                >
                  <h1 slot="header">归并源IP占比：</h1>
                  <div
                    id="echart_pie_src"
                    style="width:500px;height:300px;"
                  />
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card
                  shadow="hover"
                  class="simpleTable"
                >
                  <h1 slot="header">归并目的IP占比：</h1>
                  <div
                    id="echart_pie"
                    style="width:500px;height:300px;"
                  />
                </el-card>
              </el-col>
            </el-row>
            <el-row
              class="margin-top-10 searchable-table-con1"
              style="width:100%"
            >
              <el-col :span="24">
                <el-card
                  shadow="hover"
                  class="simpleTable"
                >
                  <h1 slot="header">归并时间分布：</h1>
                  <div
                    id="echart_line"
                    style="width:1200px;height:300px;"
                  />
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </add-page-layout>
    <manager-dialog
      :visible.sync="mergerTraceDialog"
      width="80%"
      :modal="false"
      title="追溯信息"
    >
      <el-row>
        <el-tabs v-model="traceTab">
          <el-tab-pane
            label="攻击链追溯"
            name="name1"
          >
            <el-row v-show="attackStageShow">
              <el-table
                tooltip-effect="dark"
                :data="mergerAttackTypeData"
                stripe
                border
              >
                <el-table-column
                  prop="srcIp"
                  label="源IP"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <assetAssociate :asset-ip="scope.row.srcIp" :business-id="alarmCorrelationResult.businessId"/>
                  </template>
                </el-table-column>
                <el-table-column
                  label="侦察"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="clickMergerRowAttackList(scope.row,'1')"
                    >
                      {{ scope.row['1'] }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="工具制作"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="clickMergerRowAttackList(scope.row,'2')"
                    >
                      {{ scope.row['2'] }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="投递"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="clickMergerRowAttackList(scope.row,'3')"
                    >
                      {{ scope.row['3'] }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="攻击渗透"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="clickMergerRowAttackList(scope.row,'4')"
                    >
                      {{ scope.row['4'] }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="安装工具"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="clickMergerRowAttackList(scope.row,'5')"
                    >
                      {{ scope.row['5'] }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="命令控制"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="clickMergerRowAttackList(scope.row,'6')"
                    >
                      {{ scope.row['6'] }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="恶意活动"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="clickMergerRowAttackList(scope.row,'7')"
                    >
                      {{ scope.row['7'] }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="dstIp"
                  label="目的IP"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <assetAssociate :asset-ip="scope.row.dstIp" :business-id="alarmCorrelationResult.businessId"/>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <el-row
              v-show="!attackStageShow"
              style="line-height: 300px;text-align: center;font-size: 13px;"
            >
              <span>暂无数据</span>
            </el-row>
          </el-tab-pane>
          <el-tab-pane
            label="IP轨迹追溯"
            name="name2"
          >
            <el-row
              v-show="ipTraceShow"
              style="width:100%"
            >
              <div
                id="echart_ip_relation"
                style="width:750px;height:300px;"
              />
            </el-row>
            <el-row
              v-show="!ipTraceShow"
              style="line-height: 300px;text-align: center;font-size: 13px;"
            >
              <span>暂无数据</span>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </manager-dialog>

    <manager-dialog
      :visible.sync="mergerAttackTypeListDialog"
      width="80%"
      :title="mergerAttackTypeListTitle"
    >
      <alarmResultMergeList
        :p-data="mergerAttackTypeListRow"
        display-type="attackType"
      />
    </manager-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/infographic')
import alarmResultDeal from './alarmResultDeal'
import alarmResultMergeList from './alarmResultMergeList'
import assetAssociate from './assetAssociate'
import deviceAssociate from './deviceAssociate'
import ruleAssociate from './ruleAssociate'
import dataTool from 'echarts/extension/dataTool'

import { queryTraceBack, getAlarmResultInfo, mergeStatisticsData, alarmStatusTimeLine } from './api/alarm-result'

export default {
  name: 'AlarmResultsDetail',
  components: {
    // "ctsi-button": ctsiButton
    alarmResultDeal: alarmResultDeal,
    alarmResultMergeList: alarmResultMergeList,
    assetAssociate: assetAssociate,
    deviceAssociate: deviceAssociate,
    ruleAssociate: ruleAssociate
  },
  data() {
    return {
      mergerTraceDialog: false,
      attackTypeColumns: [
        {
          key: 'srcIp',
          title: '源IP'
        },
        {
          key: '1',
          title: '侦察',
          render: (h, params) => {
            return h(
              'a',
              {
                on: {
                  click: () => {
                    this.clickMergerRowAttackList(params.row, '1')
                  }
                }
              },
              params.row['1']
            )
          }
        },
        {
          key: '2',
          title: '工具制作',
          render: (h, params) => {
            return h(
              'a',
              {
                on: {
                  click: () => {
                    this.clickMergerRowAttackList(params.row, '2')
                  }
                }
              },
              params.row['2']
            )
          }
        },
        {
          key: '3',
          title: '投递',
          render: (h, params) => {
            return h(
              'a',
              {
                on: {
                  click: () => {
                    this.clickMergerRowAttackList(params.row, '3')
                  }
                }
              },
              params.row['3']
            )
          }
        },
        {
          key: '4',
          title: '攻击渗透',
          render: (h, params) => {
            return h(
              'a',
              {
                on: {
                  click: () => {
                    this.clickMergerRowAttackList(params.row, '4')
                  }
                }
              },
              params.row['4']
            )
          }
        },
        {
          key: '5',
          title: '安装工具',
          render: (h, params) => {
            return h(
              'a',
              {
                on: {
                  click: () => {
                    this.clickMergerRowAttackList(params.row, '5')
                  }
                }
              },
              params.row['5']
            )
          }
        },
        {
          key: '6',
          title: '命令控制',
          render: (h, params) => {
            return h(
              'a',
              {
                on: {
                  click: () => {
                    this.clickMergerRowAttackList(params.row, '6')
                  }
                }
              },
              params.row['6']
            )
          }
        },
        {
          key: '7',
          title: '恶意活动',
          render: (h, params) => {
            return h(
              'a',
              {
                on: {
                  click: () => {
                    this.clickMergerRowAttackList(params.row, '7')
                  }
                }
              },
              params.row['7']
            )
          }
        },
        {
          key: 'dstIp',
          title: '目的IP'
        }
      ],
      mergerAttackTypeData: [],
      mergerAttackTypeLoading: false,
      attackStageShow: false,
      ipTraceShow: false,
      ipTraceData: null,
      mergerAttackTypeListTitle: '',
      mergerAttackTypeListRow: null,
      mergerAttackTypeListDialog: false,
      badgeCount1: 0,
      badgeCount2: 0,
      badgeCount3: 0,
      badgeCount4: 0,
      badgeCount5: 0,
      badgeCount6: 0,
      badgeCount7: 0,
      dealType: '',
      alertId: null,
      dealValue: {},
      centerButtonVisible: true,
      timeLineData: [],
      timeLineInfo: {
        firstName: '',
        latestName: '',
        personNum: 0,
        times: 0,
        timeStr: ''
      },
      statics: {
        alertType: [
          {
            dataId: 1,
            dataName: '漏洞告警'
          },
          {
            dataId: 2,
            dataName: '配置脆弱性告警'
          },
          {
            dataId: 4,
            dataName: '完整性告警'
          },
          {
            dataId: 5,
            dataName: 'WEB告警'
          },
          {
            dataId: 0,
            dataName: '关联告警'
          },
          {
            dataId: 7,
            dataName: '预警告警'
          },
          {
            dataId: 8,
            dataName: '全端口漏洞告警'
          }
        ],
        alertSource: [
          {
            dataId: '0',
            dataName: '外部告警'
          },
          {
            dataId: '1',
            dataName: '内部告警'
          }
        ],
        statusTag: [
          {
            dataId: '0',
            dataName: '待处理'
          },
          {
            dataId: '1',
            dataName: '已指派'
          },
          {
            dataId: '2',
            dataName: '已确认'
          },
          {
            dataId: '3',
            dataName: '已处理'
          },
          {
            dataId: '4',
            dataName: '已清除'
          },
          {
            dataId: '5',
            dataName: '误报'
          },
          {
            dataId: '6',
            dataName: '待审核'
          }
        ],
        successTagList: [
          {
            dataId: '0',
            dataName: '否'
          },
          {
            dataId: '1',
            dataName: '是'
          },
          {
            dataId: '2',
            dataName: '未知'
          }
        ]
      },
      attrType: 'common',
      traceTab: 'name1',
      eventType: 'first',
      resultId: null,
      alarmCorrelationResult: {
        alertId: null,
        alertName: null,
        assetId: null,
        businessId: null,
        alertSource: null,
        alertLevel: null,
        alertType: null,
        alertTypeSub: null,
        attackStage: null,
        protocol: null,
        alertCount: null,
        ruleId: null,
        reliability: null,
        successTag: null,
        srcIp: null,
        srcPort: null,
        dstIp: null,
        dstPrtLevel: null,
        signature: null,
        cveId: null,
        fileName: null,
        filePath: null,
        fileMd5: null,
        url: null,
        cookie: null,
        userName: null,
        processName: null,
        mailFrom: null,
        mailTo: null,
        srcZone: null,
        dstZone: null,
        statusTag: null,
        rectification: null,
        indexName: null,
        occurTime: null,
        updateTime: null,
        description: null,
        collectDevAssetId: null,
        deviceName: null,
        classDga: null
      },
      eventTableData: [],
      list: [
        'Alabama',
        'Alaska',
        'Arizona',
        'Arkansas',
        'California',
        'Colorado',
        'Connecticut',
        'Delaware',
        'Florida',
        'Georgia',
        'Hawaii',
        'Idaho',
        'Illinois',
        'Indiana',
        'Iowa',
        'Kansas',
        'Kentucky',
        'Louisiana',
        'Maine',
        'Maryland',
        'Massachusetts',
        'Michigan',
        'Minnesota',
        'Mississippi',
        'Missouri',
        'Montana',
        'Nebraska',
        'Nevada',
        'New hampshire',
        'New jersey',
        'New mexico',
        'New york',
        'North carolina',
        'North dakota',
        'Ohio',
        'Oklahoma',
        'Oregon',
        'Pennsylvania',
        'Rhode island',
        'South carolina',
        'South dakota',
        'Tennessee',
        'Texas',
        'Utah',
        'Vermont',
        'Virginia',
        'Washington',
        'West virginia',
        'Wisconsin',
        'Wyoming'
      ],
      mergereventTableData: [],
      EventListData: {},
      refreshMergeList: false,
      openDetailsDialog: false,
      form: {
        alarmResultMap: {
          alertName: null,
          alarmLevels: [],
          alertSources: [],
          alertTypes: [],
          attackStages: [],
          deviceIp: null,
          statusTags: ['0', '1', '2'],
          reliability: null
        },
        page: {
          current: 1,
          size: 10
        }
      },
      loading: false,
      Id: null,
      mergerVisible: false,

      loading: false,
      /* echart*/
      mainChart1: null,
      mainChart2: null,
      mainChart3: null
    }
  },
  computed: {
    alarmLevelColor: {
      get() {
        if (this.alarmCorrelationResult.alertLevel == 1) {
          return '#58B7FF'
        } else if (this.alarmCorrelationResult.alertLevel == 2) {
          return '#20A0FF'
        } else if (this.alarmCorrelationResult.alertLevel == 3) {
          return '#1D8CE0'
        } else if (this.alarmCorrelationResult.alertLevel == 4) {
          return '#F7BA2A'
        } else if (this.alarmCorrelationResult.alertLevel == 5) {
          return '#FF4949'
        }
      },
      set() { }
    },
    alarmStatusColor: {
      get() {
        if (this.alarmCorrelationResult.statusTag == 0) {
          return '#FF4949'
        } else if (this.alarmCorrelationResult.statusTag == 1) {
          return '#FF4949'
        } else if (this.alarmCorrelationResult.statusTag == 2) {
          return '#20A0FF'
        } else if (this.alarmCorrelationResult.statusTag == 3) {
          return '#1D8CE0'
        } else if (this.alarmCorrelationResult.statusTag == 4) {
          return '#F7BA2A'
        } else if (this.alarmCorrelationResult.statusTag == 5) {
          return '#FF4949'
        } else if (this.alarmCorrelationResult.statusTag == 6) {
          return '#FF4949'
        }
      },
      set() { }
    },
    attackType() {
      return this.$store.state.alarm.attackType
    },
    bigdataAlarmType() {
      return this.$store.state.alarm.newAlarmType
    },
    datasourceType() {
      return this.$store.state.alarm.datasourceType
    },
    alarmLevels() {
      return this.$store.state.alarm.ruleLevel
    }
  },
  // updated() {
  //   window.scroll(0, 0);
  // },
  // //进入该页面时，用之前保存的滚动位置赋值
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     console.log("vm")
  //     console.log(vm)
  //     // document.body.scrollTop = vm.scrollTop
  //     // var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  //     // console.log(scrollTop)
  //     document.body.scrollTop = 0;
  //     document.documentElement.scrollTop = 0;
  //   })
  // },

  watch: {},
  created: function() {
    this.$store.dispatch('alarm/getAllAlarmStaticList')
    this.search()
  },
  mounted() {
    this.mainChart1 = echarts.init(
      document.getElementById('echart_line'),
      'infographic'
    )
    this.mainChart2 = echarts.init(
      document.getElementById('echart_pie'),
      'infographic'
    )
    this.mainChart3 = echarts.init(
      document.getElementById('echart_pie_src'),
      'infographic'
    )
  },
  methods: {
    clickMergerRowAttackList(row, type) {
      const ret = this.toCase(type, this.attackType, 'dataId', 'dataName')

      this.mergerAttackTypeListTitle =
        row.srcIp + ' -> ' + row.dstIp + '的 ' + ret + ' 活动'
      this.mergerAttackTypeListRow = JSON.parse(JSON.stringify(row))
      this.mergerAttackTypeListRow.attack_stage = type
      this.mergerAttackTypeListDialog = true
    },
    clickMergerRowAttack: function(row) {
      this.mergerAttackTypeLoading = true
      const temp = { AlarmAttackStage: null }
      temp.AlarmAttackStage = row
      queryTraceBack(temp)
        .then(resp => {
          row.buttonLoading = false
          if (resp.data.returnCode == '0') {
            this.mergerAttackTypeLoading = false
            this.attackStageShow = true
            this.ipTraceShow = true

            if (resp.data.data == null ||
              JSON.stringify(resp.data.data) == '{}') {
              this.attackStageShow = false
              this.ipTraceShow = false
            } else {
              if (
                resp.data.data.attackStage == null ||
                JSON.stringify(resp.data.data.attackStage) == '{}'
              ) {
                this.attackStageShow = false
              }

              if (resp.data.data.ipTrace == null) {
                this.ipTraceShow = true
              }
            }
            if (this.attackStageShow == false && this.ipTraceShow == false) {
              this.$message('未追溯到任何信息')
            } else {
              this.mergerTraceDialog = true
              if (this.attackStageShow) {
                resp.data.data.attackStage.srcIp = row.src_ip
                resp.data.data.attackStage.dstIp = row.dst_ip
                resp.data.data.attackStage.type = 'attackList'
                resp.data.data.attackStage.merge_alert_id = row.merge_alert_id
                this.mergerAttackTypeData = [resp.data.data.attackStage]
              }
              if (this.ipTraceShow) {
                this.ipTraceData = resp.data.data.ipTrace
                setTimeout(() => {
                  this.iniRelationEchart()
                }, 200)
              }
            }
          } else {
            this.mergerAttackTypeLoading = false
            this.$message.error(resp.data.returnMsg)
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    iniRelationEchart: function() {
      this.mainChart = echarts.init(
        document.getElementById('echart_ip_relation'),
        'infographic'
      )

      var graph = echarts.dataTool.gexf.parse(this.ipTraceData)
      var categories = []
      for (var i = 0; i < 9; i++) {
        categories[i] = {
          name: '类目' + i
        }
      }
      graph.nodes.forEach(function(node) {
        node.itemStyle = null
        node.value = node.attributes.value
        node.symbolSize = node.attributes.size
        node.label = {
          // show: node.symbolSize > 30
          show: true
        }
        node.category = node.attributes.category
      })
      const option = {
        title: {
          text: '源目告警追溯',
          show: false
        },
        tooltip: {
        },
        legend: [
          {
            show: false,
            // selectedMode: 'single',
            data: categories.map(function(a) {
              return a.name
            })
          }
        ],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: '源目告警追溯',
            type: 'graph',
            layout: 'none',
            data: graph.nodes,
            links: graph.links,
            edgeSymbol: ['circle', 'arrow'],
            categories: categories,
            roam: true,
            layout: 'force',
            force: {
              repulsion: 300
            },
            focusNodeAdjacency: true,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1,
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.3)'
            },
            label: {
              normal: {
                show: false,
                position: 'inside'
              }
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            emphasis: {
              lineStyle: {
                width: 10
              }
            }
          }
        ]
      }

      this.mainChart.setOption(option)
      // this.mainChart.on("click", this.clickFun);
    },
    handleDealType() {
      this.dealValue = null
    },
    handleDealRefresh() {
      this.search()
    },
    centerButton(value) {
      if (value === 'close') {
        this.$router.back()
      } else if (value === 'assign') {
        this.dealValue = this.alarmCorrelationResult
        this.dealType = 'assign'
      } else if (value === 'deal') {
        // this.dealValue = this.alarmCorrelationResult;
        // this.dealType = "dealAsk";
        this.$router.push({
          name: 'alarmBatch',
          query: { statusTag: this.alarmCorrelationResult.statusTag, alertId: this.alarmCorrelationResult.alertId, rectification: this.alarmCorrelationResult.rectification }
        })
      }
      // else if (value === "back") {
      //   this.dealValue= this.alarmCorrelationResult;
      //   this.dealType="dealAsk";
      // }
      else if (value === 'openBt') {
        this.centerButtonVisible = true
      } else {
        this.centerButtonVisible = false
      }
    },
    toCase: function(input, source, keyName, valueName) {
      if (!(source instanceof Array) || !source.length) return input
      for (const e of source) {
        if (e[keyName] == input) return e[valueName]
      }
      return input
    },
    // 归并信息点击查看后页面
    labelClick: function(e) {
      console.log(e.name)
      if (e.name == 'merger') {
        this.refreshMergeList = !this.refreshMergeList
      } else if (e.name == 'statusHis') {
        this.getStatusHisData()
      } else if (e.name == 'event') {
        this.eventSearch()
      } else if (e.name == 'static') {
        this.getLineData()
      }
    },
    search() {
      this.alertId = this.$route.query.id
      // document.body.scrollTop = 0
      getAlarmResultInfo(this.alertId)
        .then(resp => {
          if (resp.data.returnCode == '0') {
            this.alarmCorrelationResult = resp.data.data
            var attackStage = this.alarmCorrelationResult.attackStage
            eval('that.badgeCount' + attackStage + '= attackStage*1')
          }
        })
    },
    ok() {
      this.$message.info('点击了确定')
    },
    cancel() {
      this.$message.info('点击了取消')
    },
    /* echart*/
    loadmain: function(inputData) {
      const xDate = []
      const arr1 = []
      inputData.forEach((e, index) => {
        xDate.push(e.name)
        arr1.push(e.value)
      })
      const option = {
        legend: {
          show: true,
          top: '0',
          textStyle: {
            color: '#aaa'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function(params) {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                '<br/>' +
                /* params[i].marker + */ params[i].seriesName +
                ' : ' +
                params[i].value +
                '次'
            }
            return relVal
          }
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '1%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#eee',
                type: 'solid'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#eee',
                type: 'dash'
              }
            },
            axisLabel: {
              color: '#aaa'
            },
            data: xDate
          }
        ],
        yAxis: [
          {
            name: '告警数',
            type: 'value',
            axisLabel: {
              color: '#aaa'
            },
            axisLine: {
              lineStyle: {
                color: '#eee',
                type: 'solid'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#eee',
                type: 'dash'
              }
            }
          }
        ],
        series: [
          {
            smooth: false,
            name: '告警数',
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#00da88'
              }
            },
            lineStyle: {
              color: '#00da88'
            },
            data: arr1
          } /*,
                    {
                        smooth: false,
                        name: '未知协议',
                        type: 'line',
                        symbol: "circle",
                        symbolSize: 8,
                        itemStyle: {
                            normal: {
                                color: "#2d8cf0"
                            }
                        },
                        lineStyle: {
                            color: "#2d8cf0",
                        },
                        data: [
                            {name: '1', value: 10},
                            {name: '2', value: 20},
                            {name: '3', value: 30},
                            {name: '4', value: 40},
                            {name: '5', value: 50},
                        ]
                    }*/
        ]
      }
      this.mainChart1.setOption(option)
      this.mainChart1.resize()
    },
    getLineData() {
      mergeStatisticsData(this.alertId)
        .then(resp => {
          if (resp.data.returnCode == '0') {
            this.loadmain(resp.data.data.line)
            this.loadmain2(resp.data.data.dstIp)
            this.loadmain3(resp.data.data.srcIp)
          } else {
            this.$message.error(resp.data.returnMsg)
          }
        })
        .catch(error => {
          if (error.resp) {
            this.$message.error(error.resp.data.detail)
          }
          this.loadmain([
            /*  {name: '1', value: 10},
                          {name: '2', value: 20},
                          {name: '3', value: 30},
                          {name: '4', value: 40},
                          {name: '5', value: 50},*/
          ])
        })
    },
    loadmain2: function(inputData) {
      const arr = [
        inputData.value1,
        inputData.value2,
        inputData.value3,
        inputData.value4,
        inputData.value5
      ]
      const option = {
        color: [
          '#2c8cf0',
          '#01da89',
          '#f8d732',
          '#fc7586',
          '#7266ba',
          '#28b193',
          '#1bc5a0',
          '#889c9a',
          '#f0a472',
          '#fac021',
          '#ff7fe3',
          '#bd7ee9',
          '#8b8bef'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '10%',
          top: '28%',
          textStyle: {
            color: '#999'
          },
          icon: 'Rect',
          itemWidth: 18,
          itemHeight: 8,
          data: ['轻微', '低级', '中级', '高级', '严重']
        },
        series: [
          {
            type: 'pie',
            radius: [20, 70],
            center: ['66%', '50%'],
            roseType: 'radius',
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: inputData
          }
        ]
      }
      this.mainChart2.setOption(option)
      this.mainChart2.resize()
    },
    loadmain3: function(inputData) {
      const arr = [
        inputData.value1,
        inputData.value2,
        inputData.value3,
        inputData.value4,
        inputData.value5
      ]
      const option = {
        color: [
          '#2c8cf0',
          '#01da89',
          '#f8d732',
          '#fc7586',
          '#7266ba',
          '#28b193',
          '#1bc5a0',
          '#889c9a',
          '#f0a472',
          '#fac021',
          '#ff7fe3',
          '#bd7ee9',
          '#8b8bef'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '10%',
          top: '28%',
          textStyle: {
            color: '#999'
          },
          icon: 'Rect',
          itemWidth: 18,
          itemHeight: 8,
          data: ['轻微', '低级', '中级', '高级', '严重']
        },
        series: [
          {
            type: 'pie',
            radius: [20, 70],
            center: ['66%', '50%'],
            roseType: 'radius',
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: inputData
          }
        ]
      }
      this.mainChart3.setOption(option)
      this.mainChart3.resize()
    },
    getStatusHisData() {
      alarmStatusTimeLine({ alertId: this.alertId })
        .then(resp => {
          if (resp.data.returnCode == '0') {
            this.timeLineData = resp.data.data.list
            this.timeLineInfo = resp.data.data.info
          } else {
            this.$message.error(resp.data.returnMsg)
          }
        })
        .catch(error => {
          if (error.resp) {
            this.$message.error(error.resp.data.detail)
          }
        })
    }
  }
}
</script>
<style>
  .deal-button {
    display:inline;
  }
</style>
<style scoped>
@import url(./layoutStyle.css);

.actived {
  color: #fff !important;
  background-color: RGB(45, 140, 240) !important;
  border-color: #fff !important;
}
.simpleTable {
  margin: 5px;
  padding: 5px;
}
.simpleTable table {
  border-right: 1px solid #fff;
  /* border-right: 1px solid #dcdee2; */
  border-bottom: 1px solid #fff;
  border-collapse: collapse;
}

.simpleTable table td {
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  height: 39px;
  padding-left: 10px;
  text-align: left;
}

.simpleTable table td:nth-child(odd) {
  font-weight: bold;
  background-color: #fff;
}

.borderTable table {
  border-right: 1px solid #dcdee2;
  border-bottom: 1px solid #dcdee2;
  border-collapse: collapse;
}

.borderTable table td {
  border-left: 1px solid #dcdee2;
  border-top: 1px solid #dcdee2;
  width: 200px;
  height: 45px;
  padding-left: 10px;
  text-align: center;
}
.borderTable table td:nth-child(odd) {
  font-weight: bold;
  background-color: #f8f8f9;
}

.curve1 {
  position: absolute;
  left: 56%;
  top: 62%;
  width: 6%;
  height: 25%;
  border-bottom: 3px solid #515a6e;
  border-bottom-left-radius: 100%;
  bottom: 0;
}
.curve2 {
  position: absolute;
  left: 65%;
  top: 68%;
  width: 6%;
  height: 19%;
  border-bottom: 3px solid #515a6e;
  border-bottom-right-radius: 100%;
}
.curve3 {
  position: absolute;
  left: 71%;
  top: 32%;
  width: 5%;
  height: 25%;
  border-top: 3px solid #515a6e;
  border-top-left-radius: 100%;
}
.curve4 {
  position: absolute;
  left: 78.1%;
  top: 31.5%;
  width: 6%;
  height: 23%;
  border-top: 3px solid #515a6e;
  border-top-right-radius: 100%;
}
.curve5 {
  position: absolute;
  left: 84%;
  top: 61%;
  width: 5.5%;
  height: 26.5%;
  border-bottom: 3px solid #515a6e;
  border-bottom-left-radius: 100%;
  bottom: 0;
}
.curve6 {
  position: absolute;
  left: 92.2%;
  top: 66%;
  width: 5%;
  height: 22%;
  border-bottom: 3px solid #515a6e;
  border-bottom-right-radius: 100%;
}
.triangle1 {
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #515a6e;
  width: 0;
  height: 0;
  position: absolute;
  top: 84%;
  left: 62%;
}
.triangle2 {
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #515a6e transparent;
  width: 0;
  height: 0;
  position: absolute;
  top: 65%;
  left: 70.5%;
}
.triangle3 {
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #515a6e;
  width: 0;
  height: 0;
  position: absolute;
  top: 30.5%;
  left: 75.8%;
}
.triangle4 {
  border-width: 8px;
  border-style: solid;
  border-color: #515a6e transparent transparent transparent;
  width: 0;
  height: 0;
  position: absolute;
  top: 53%;
  left: 83.6%;
}
.triangle5 {
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #515a6e;
  width: 0;
  height: 0;
  position: absolute;
  top: 84.6%;
  left: 89.4%;
}
.triangle6 {
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #515a6e transparent;
  width: 0;
  height: 0;
  position: absolute;
  top: 64%;
  left: 96.7%;
}

.badgeName1 {
  position: absolute;
  top: 50%;
  left: 55%;
}
.badgeName2 {
  position: absolute;
  top: 93%;
  left: 63%;
}
.badgeName3 {
  position: absolute;
  top: 50%;
  left: 70%;
}
.badgeName4 {
  position: absolute;
  top: 37%;
  left: 76.4%;
}
.badgeName5 {
  position: absolute;
  top: 66%;
  left: 83%;
}
.badgeName6 {
  position: absolute;
  top: 93%;
  left: 90%;
}
.badgeName7 {
  position: absolute;
  top: 48%;
  left: 96%;
}

.badge1 {
  position: absolute;
  top: 57%;
  left: 55%;
}
.badge2 {
  position: absolute;
  top: 82%;
  left: 63%;
}
.badge3 {
  position: absolute;
  top: 56%;
  left: 70%;
}
.badge4 {
  position: absolute;
  top: 27%;
  left: 76.4%;
}
.badge5 {
  position: absolute;
  top: 56%;
  left: 83%;
}
.badge6 {
  position: absolute;
  top: 82%;
  left: 90%;
}
.badge7 {
  position: absolute;
  top: 56%;
  left: 96%;
}

.img1 {
  width: 40px;
  height: 30px;
  background-color: #fff;
}
.img2 {
  width: 40px;
  height: 30px;
  background-color: #fff;
}
.img3 {
  width: 40px;
  height: 30px;
  background-color: #fff;
}
.img4 {
  width: 45px;
  height: 30px;
  background-color: #fff;
}
.img5 {
  width: 40px;
  height: 30px;
  background-color: #fff;
}
.img6 {
  width: 40px;
  height: 30px;
  background-color: #fff;
}
.img7 {
  width: 40px;
  height: 30px;
  background-color: #fff;
}

.cursor {
  cursor: pointer;
}
</style>
