<!--
 * @Version: 1.0
 * @Author: kery.chen
 * @Description: 总体概览左侧
 * @Date: 2021-11-30 11:08:50
 * @LastEditTime: 2022-10-31 14:46:40
 * @FilePath     : \\tcingiocpro\\src\\views\\privateOrder\\security\\components\\componentLeft.vue
-->
<template>
  <div class="container">
    <div class="module-container">
      <div class="section-dataSource">
        <module-title>数据来源</module-title>
        <div class="section-source">
          <div class="section-top">
            <div
              v-for="(item, idx) in dataSource.top"
              :key="idx"
              class="section-top-item"
            >
              <img :src="item.url" alt="" />
              <div class="top-item-content">
                <div style="margin-bottom: 15px">{{ item.title }}</div>
                <div>
                  <span class="content-currentNum">{{ item.currentNum }}</span>
                  <span
                    style="
                      display: inline-block;
                      transform: translate(5px, -7px);
                    "
                  >
                    /</span>
                  <span class="content-total">{{ item.total }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="section-bottom">
            <div
              v-for="(item, idx) in dataSource.bottom"
              :key="idx"
              class="section-bottom-item"
              @click="showAttack(item.title,item.num)"
            >
              <img :src="item.url" alt="" />
              <span class="bottom-title">{{ item.title }}</span>
              <span class="bottom-num">{{ item.num |commaFilter }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="section-superviseObject">
        <module-title>监管对象</module-title>
        <div class="section-object">
          <div class="section-bg">
            <div
              v-for="(item, idx) in superviseObject"
              :key="idx"
              :class="['section-object-item', item.className]"
              @click="showAttack(item.title,item.num)"
            >
              <img :src="item.url" alt="" />
              <div class="item-content">
                <span class="item-content-title">{{ item.title }}</span><br />
                <span class="item-content-num">{{ item.num | commaFilter }}</span>
              </div>
            </div>
            <div class="section-center" />
          </div>
        </div>
      </div>
      <div class="section-securityMonitor">
        <module-title>安全监测</module-title>
        <div class="section-monitor">
          <div class="section-monitor-top">
            <div class="monitor-info">
              <img :src="securityMonitor.url" alt="" />
              <div class="monitor-info-des">
                <span class="info-des-title">{{ securityMonitor.title }}</span>
                <span class="info-des-total">{{ securityMonitor.total }}</span>
              </div>
            </div>
            <span class="monitor-line">|</span>
            <div class="monitor-detail">
              <div
                v-for="(item, index) in securityMonitor.detail"
                v-show="index<3"
                :key="index"
                class="monitor-detail-item"
              >
                <span class="detail-item-title">{{ item.title }}</span>
                <span class="detail-item-num">{{ item.num }}</span>
              </div>
            </div>
          </div>
          <div class="section-monitor-bottom">
            <div class="monitor-box">
              <div class="monitor-title">
                <span>时间</span>
                <span>攻击源/IP</span>
                <span>攻击类型</span>
              </div>
              <vue-seamless-scroll
                :data="tableData"
                :class-option="classOption"
                class="monitorScroll"
              >
                <div
                  v-for="(item, idx) in tableData"
                  :key="idx"
                  class="monitor-list"
                  :data-obj="'安全监测'"
                  @click="getAttackSource(item.id)"
                >
                  <span>{{ item.attackTime }}</span>
                  <span>{{ item.attackedIp }}</span>
                  <span>{{ $filterDict('tc_attack_type',item.attackType) }}</span>
                </div>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
      <div
        class="section-attackRanking"
        @mouseover="mouseOver"
        @mouseleave="mouseLeave"
      >
        <module-title>
          受攻击情况
          <div slot="operate" class="btn-wrap">
            <div
              v-for="(item, idx) in attackList.options"
              :key="idx"
              class="btn"
              :class="{ active: currentIndex === idx }"
              @click="currentIndex = idx"
            >
              {{ item }}
              <div :class="[idx === 0 ? 'topIP' : 'distributed']" />
            </div>
          </div>
        </module-title>
        <!-- 受攻击情况 -->
        <attackSituation :current-index="currentIndex"></attackSituation>
      </div>
    </div>
    <!-- 安全监测详细弹框 -->
    <el-dialog
      v-if="dialogStatus"
      class="screen-dialog"
      :visible.sync="dialogStatus"
      :width="dialogWidth"
      :modal-append-to-body="false"
      center
      :modal="false"
    >
      <template v-if="dialogType === '安全监测'">
        <div class="dialog_title">攻击详情</div>
        <el-row>
          <el-col :span="6">
            <div class="dialog_little_title">攻击发起时间：</div>
          </el-col>
          <el-col :span="18">
            <div class="dialog_little_ctn">{{ tableDataPop.attackTime }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div class="dialog_little_title">攻击源IP：</div>
          </el-col>
          <el-col :span="18">
            <div class="dialog_little_ctn">{{ tableDataPop.sourceIp }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div class="dialog_little_title">攻击类型：</div>
          </el-col>
          <el-col :span="18">
            <div class="dialog_little_ctn">{{ $filterDict('tc_attack_type',tableDataPop.attackType) }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div class="dialog_little_title">攻击源IP区域：</div>
          </el-col>
          <el-col :span="18">
            <div class="dialog_little_ctn">
              {{ tableDataPop.attackIpRegion }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div class="dialog_little_title">受攻击IP：</div>
          </el-col>
          <el-col :span="18">
            <div class="dialog_little_ctn">{{ tableDataPop.attackedIp }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div class="dialog_little_title">受攻击IP区域：</div>
          </el-col>
          <el-col :span="18">
            <div class="dialog_little_ctn">
              {{ tableDataPop.attackedIpRegion }}
            </div>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="6">
            <div class="dialog_little_title">受攻击目标类型：</div>
          </el-col>
          <el-col :span="18">
            <div class="dialog_little_ctn">{{ $filterDict('tc_attack_type',tableDataPop.attackType) }}</div>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="6">
            <div class="dialog_little_title">网站安全等级：</div>
          </el-col>
          <el-col :span="6">
            <div class="dialog_little_ctn">{{ $filterDict('tc_net_safety_level',tableDataPop.level) }}</div>
          </el-col>
          <el-col :span="6">
            <div class="dialog_little_title">联系电话：</div>
          </el-col>
          <el-col :span="6">
            <div class="dialog_little_ctn">{{ tableDataPop.phoneNum }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div class="dialog_little_title">所属单位：</div>
          </el-col>
          <el-col :span="6">
            <div class="dialog_little_ctn">
              {{ tableDataPop.affUnit }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="dialog_little_title">联系人：</div>
          </el-col>
          <el-col :span="6">
            <div class="dialog_little_ctn">{{ tableDataPop.linkMan }}</div>
          </el-col>
        </el-row>
      </template>

      <template
        v-if="
          dialogType === '硬探针' ||
            dialogType === '系统监测' ||
            dialogType === '网站监测' ||
            dialogType === 'IDC单位' ||
            dialogType === '等保单位' ||
            dialogType === '政府网站' ||
            dialogType === '等保系统' ||
            dialogType === '监管单位' ||
            dialogType === '软探针'
        "
      >
        <MyTable
          :table-list="excelData"
          :table-key="excelDataHeader"
        />
        <div style="text-align: right; margin-top: 10px">
          <paginations
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="showAttack"
          />
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <span>
          <el-button
            class="dialog-btn"
            @click="dialogStatus = false"
          >关 闭</el-button>
        </span>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSource } from '@/api/common'
import vueSeamlessScroll from 'vue-seamless-scroll'
import ModuleTitle from '../../common/ModuleTitle.vue'
import attackSituation from './attackSituation.vue'
import ExcelTable from '@/components/ExcelTable'
import { listSystem, listUnit, listWeb, listIDCunit, listSource, saftyscreenSupervise, saftyscreenSafety,
  listDetection, getDetection
} from '@/api/zongzhi/st.js'
import {
  yingTanZhen,
  yingTanZhenKeyValue,
  xitongjiance,
  xitongjianceKeyValue
} from './mock'
import {
  IDCKeyValue,
  IDC,
  dbdwKeyValue,
  dbdw,
  dbxt,
  dbxtKeyValue,
  zfdwKeyValue,
  zfdw,
  rtz,
  rtzKeyValue
} from './jianGuan'
import { getLatest, getSecurity } from '@/api/common'
export default {
  components: {
    attackSituation,
    ModuleTitle,
    vueSeamlessScroll,
    ExcelTable
  },
  filters: {
    commaFilter(target) {
      if (target < 10000) {
        return String(target).replace(/(\d)(?=(\d{3})+$)/g, '$1,')
      } else {
        return (target / 10000).toFixed(2) + '万'
      }
    }
  },
  data() {
    return {
      /**
       * 自己的变量
       */
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }, // 分页查询条件
      total: 0, // 总数
      time: null,
      checkTotal: 0,
      checkParams: {
        pageNum: 1,
        pageSize: 10
      },
      //
      dialogWidth: 0,
      dialogStatus: false,
      dialogType: '',
      safeDialog: false,
      attackTime: null,
      tableTime: null,
      tableTotal: 0,
      currentIndex: 0,
      attackList: {
        options: ['受攻击IPTOP5', '分布情况']
      },
      dataSource: {
        top: [
          {
            title: '云端监测(G)',
            currentNum: 100,
            total: 150,
            url: require('@/assets/privateOrder/general/icon-云端监测.png')
          },
          {
            title: 'APT(M)',
            currentNum: 239,
            total: 1000,
            url: require('@/assets/privateOrder/general/icon-APT.png')
          }
        ],
        bottom: [
          {
            title: '硬探针',
            num: 6,
            url: require('@/assets/privateOrder/general/硬探针.png')
          },
          {
            title: '软探针',
            num: 125,
            url: require('@/assets/privateOrder/general/软探针.png')
          },
          {
            title: '系统监测',
            num: 2658,
            url: require('@/assets/privateOrder/general/系统监测.png')
          }
        ]
      },
      superviseObject: [
        {
          title: '政府网站',
          num: 0,
          className: 'item1',
          url: require('@/assets/privateOrder/general/icon-政府网站.png')
        },
        {
          title: '监管单位',
          num: 0,
          className: 'item2',
          url: require('@/assets/privateOrder/general/icon-监管单位.png')
        },
        {
          title: '网站监测',
          num: 0,
          className: 'item3',
          url: require('@/assets/privateOrder/general/icon-网站监测.png')
        },
        {
          title: 'IDC单位',
          num: 0,
          className: 'item4',
          url: require('@/assets/privateOrder/general/icon-IDC单位.png')
        },
        {
          title: '等保系统',
          num: 0,
          className: 'item5',
          url: require('@/assets/privateOrder/general/icon-等保系统.png')
        },
        {
          title: '等保单位',
          num: 0,
          className: 'item6',
          url: require('@/assets/privateOrder/general/icon-等保单位.png')
        }
      ],
      securityMonitor: {
        url: require('@/assets/privateOrder/general/icon-网络攻击.png'),
        title: '网络攻击(次)',
        total: 0,
        detail: [
          // {
          //   title: '入侵攻击',
          //   num: 1455.92
          // },
          // {
          //   title: '恶意扫描',
          //   num: 2325.24
          // },
          // {
          //   title: '僵木蠕病毒',
          //   num: 796.152
          // }
        ]
      },
      tableDataPop: {
        // id: 1,
        // attackTime: '2023-07-30',
        // sourceIp: '192.168.0.114',
        // attackType: '网络爬虫',
        // attackIpRegion: '美国',
        // attackedIp: '192.168.5.0',
        // attackedIpRegion: '太仓',
        // attackedType: '网络爬虫',
        // webLevel: '1级别',
        // contactTel: '18703885598',
        // subordinateDept: '网络安全部',
        // contactName: '张三'
      },
      tableData: [
        // {
        //   date: '2022-02-13',
        //   ip: '荷兰/178.128.242.134',
        //   type: '挖矿'
        // },
        // {
        //   date: '2022-02-13',
        //   ip: '荷兰/178.128.242.134',
        //   type: '挖矿'
        // },
        // {
        //   date: '2022-02-13',
        //   ip: '杭州市/60.190.232.14',
        //   type: '扫描行为'
        // },
        // {
        //   date: '2022-02-13',
        //   ip: '荷兰/178.128.242.134',
        //   type: '挖矿'
        // },
        // {
        //   date: '2022-02-13',
        //   ip: '荷兰/178.128.242.134',
        //   type: '挖矿'
        // }
      ],
      excelData: null,
      excelDataHeader: null
    }
  },
  computed: {
    classOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {},
  destroyed() {
    clearInterval(this.attackTime) // 清除定时器
    clearInterval(this.tableTime)
    clearInterval(this.time)
  },
  mounted() {
    this.changeBtn() // 切换
    this.getSaftyscreenSupervise()
    this.getSaftyscreenSafety()
    this.getListDetection()
    this.time = setInterval(() => { // 安全隐患列表
      if (this.tableData.length >= this.checkTotal) {
        clearInterval(this.time)
      } else {
        this.checkParams.pageNum = this.checkParams.pageNum + 1
        this.getListDetection()
      }
    }, 6000)
    // this.getDataSource() // 数据来源
    //  左下角数据滚动
    // getLatest().then((res) => {
    //   this.tableData = []
    //   res['T_LATEST_NEWS[]'].forEach((item) => {
    //     this.tableData.push({
    //       id: item.id,
    //       date: item.attack_time.substring(0, 10),
    //       ip: item.attack_ip_region + '/' + item.source_ip,
    //       type: item.attack_type
    //     })
    //   })
    // })
    // getSecurity().then((res) => {
    //   const data = res['T_SECURITY_MONITOR[]']
    //   this.securityMonitor.total = (data[0].statistic_count / 10000).toFixed(2)
    //   this.securityMonitor.detail[0].num = (
    //     data[1].statistic_count / 10000
    //   ).toFixed(2)
    //   this.securityMonitor.detail[1].num = (
    //     data[2].statistic_count / 10000
    //   ).toFixed(2)
    //   this.securityMonitor.detail[2].num = (
    //     data[3].statistic_count / 10000
    //   ).toFixed(2)
    // })
  },
  methods: {
    AttackClick(id) {
      return new Promise((resolve) => {
        getLatest().then((res) => {
          res['T_LATEST_NEWS[]'].forEach((item) => {
            if (item.id === id) {
              this.tableDataPop.id = id
              this.tableDataPop.attackTime = item.attack_time
              this.tableDataPop.sourceIp = item.source_ip
              this.tableDataPop.attackType = item.attack_type
              this.tableDataPop.attackIpRegion = item.attack_ip_region
              this.tableDataPop.attackedIp = item.attacked_ip
              this.tableDataPop.attackedType = item.attacked_type
              this.tableDataPop.webLevel = item.web_level
              this.tableDataPop.subordinateDept = item.subordinate_dept
              this.tableDataPop.attackedIpRegion = item.attacked_ip_region
              item.contact_tel === undefined
                ? (this.tableDataPop.contactTel = '-')
                : (this.tableDataPop.contactTel = item.contact_tel)
              item.contact_name === undefined
                ? (this.tableDataPop.contactName = '-')
                : (this.tableDataPop.contactName = item.contact_name)
              resolve()
            }
          })
        })
      })
    },
    async getAttackSource(id) {
      this.dialogWidth = '1000px'
      getDetection(id).then(res => {
        this.tableDataPop = res.data
        this.dialogType = '安全监测'
        this.dialogStatus = true
      })
      // await this.AttackClick(id)
    },
    /**
     * 安全监管List
     */
    getListDetection() {
      listDetection(this.checkParams).then(res => {
        this.tableData = [...this.tableData, ...res.rows]
        this.checkTotal = res.total
      })
    },
    /**
     * 安全监测攻击类型统计
     */
    getSaftyscreenSafety() {
      saftyscreenSafety().then(res => {
        this.securityMonitor.detail = res.data.list.map((item, index) => {
          this.securityMonitor.total = this.securityMonitor.total + item.count
          return {
            title: this.$filterDict('tc_attack_type', item.attackType),
            num: item.count
          }
        })
      })
    },
    /**
     * 监管对象各类别统计量
     */
    getSaftyscreenSupervise() {
      saftyscreenSupervise().then(res => {
        // this.superviseObject[4].num = res.data.
        res.data.forEach(item => {
          this.superviseObject.forEach(it => {
            if (item.name == it.title) {
              it.num = item.count
            }
          })
        })
        console.log(res, 'aaa')
      })
    },
    /**
     * 表格参数重置
     *  */
    reset() {
      this.total = 0
      this.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.excelData = []
      this.excelDataHeader = []
    },
    /**
     * 等保系统
     */
    getDbSteam() {
      listSystem(this.queryParams).then(res => {
        this.excelData = res.rows
        this.excelDataHeader = dbxtKeyValue
        this.total = res.total
      })
    },
    /**
     * 等保单位
     */
    getDbUnit() {
      listUnit(this.queryParams).then(res => {
        this.excelData = res.rows
        this.excelDataHeader = dbdwKeyValue
        this.total = res.total
      })
    },
    /**
     * 政府网站
     */
    getZfWeb() {
      listWeb(this.queryParams).then(res => {
        this.excelData = res.rows
        this.excelDataHeader = zfdwKeyValue
        this.total = res.total
      })
    },
    /**
     * IDC单位
     */
    getIdcUnit() {
      listIDCunit(this.queryParams).then(res => {
        this.excelData = res.rows
        this.excelDataHeader = IDCKeyValue
        this.total = res.total
      })
    },
    /**
     * 监管单位 || 网站监测 || 系统监测
     */
    getJgUnit() {
      listSource(this.queryParams).then(res => {
        this.excelData = res.rows
        this.excelDataHeader = xitongjianceKeyValue
        this.total = res.total
      })
    },
    showAttack(item = '安全监测', total) {
      if (typeof item === 'object') {
        //
      } else {
        this.reset()
        this.dialogType = item
      }

      if (this.dialogType === '等保系统') {
        this.dialogWidth = '4000px'
        this.getDbSteam()
      }
      if (this.dialogType === '等保单位') {
        this.dialogWidth = '4000px'
        this.getDbUnit()
      }
      if (this.dialogType === '政府网站') {
        this.dialogWidth = '1800px'
        this.getZfWeb()
      }
      if (this.dialogType === 'IDC单位') {
        this.dialogWidth = '1800px'
        this.getIdcUnit()
      }
      if (this.dialogType === '监管单位' || this.dialogType === '系统监测' || this.dialogType === '网站监测' || this.dialogType === '软探针' || this.dialogType === '硬探针') {
        this.dialogWidth = '2100px'
        if (this.dialogType === '软探针') {
          this.queryParams.type = 4
        } else if (this.dialogType === '硬探针') {
          this.queryParams.type = 3
        } else if (this.dialogType === '监管单位') {
          this.queryParams.type = 5
        } else if (this.dialogType === '网站监测') {
          this.queryParams.type = 6
        } else {
          this.queryParams.type = 7
        }

        this.getJgUnit()
      }
      this.$nextTick(() => {
        this.dialogStatus = true
      })
    },
    // 数据来源数据获取
    getDataSource() {
      getSource(9).then((res) => {
        const data = JSON.parse(res['[]'][0].T_static_data.DATA)
        for (let i = 0; i < data.top.length; i++) {
          for (let j = 0; j < this.dataSource.top.length; j++) {
            if (data.top[i].title === this.dataSource.top[j].title) {
              this.dataSource.top[j].currentNum = data.top[i].currentNum
              this.dataSource.top[j].total = data.top[i].total
            }
          }
        }
        for (let i = 0; i < data.bottom.length; i++) {
          for (let j = 0; j < this.dataSource.bottom.length; j++) {
            if (data.bottom[i].title === this.dataSource.bottom[j].title) {
              this.dataSource.bottom[j].num = data.bottom[i].num
            }
          }
        }
      })
    },
    // 鼠标经过暂停
    mouseOver() {
      clearInterval(this.attackTime)
    },
    // 鼠标离开开启
    mouseLeave() {
      this.changeBtn()
    },
    // 受攻击情况自动切换
    changeBtn() {
      this.attackTime = setInterval(() => {
        this.currentIndex === 0
          ? (this.currentIndex = 1)
          : (this.currentIndex = 0)
      }, 11000)
    }
  }
}
</script>

<style lang="scss" scoped>
.screen-dialog {
  ::v-deep .el-dialog__header {
    background: rgba(255, 255, 255, 0);
  }
  ::v-deep .el-dialog {
    background: url("~@/assets/dialog/弹窗背景-一般.png") no-repeat;
    width: 1820px;
    height: 950px;
    //padding-top:20px;
    background-size: 100% 100%;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 0;
    font-size: 30px;
    font-weight: bolder;
  }
  ::v-deep .el-dialog__footer {
    background: rgba(255, 255, 255, 0);
  }
  .dialog-btn {
    background: url("~@/assets/dialog/btn-bg.png") no-repeat;
    background-size: 100% 100%;
    width: 160px;
    height: 50px;
    font-family: SourceHanSansCN-Regular;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 10px;
    letter-spacing: 2px;
    color: #ffffff;
  }
  ::v-deep .el-button {
    border: none;
  }
  .dialog-footer :hover {
    .dialog-btn {
      background: url("~@/assets/dialog/btn-bg-act.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .dialog-btn {
        background: url("~@/assets/dialog/btn-bg.png") no-repeat;
        background-size: 100% 100%;
        width: 160px;
        height: 50px;
        font-family: SourceHanSansCN-Regular;
        font-size: 24px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 10px;
        letter-spacing: 2px;
        color: #ffffff;
      }
      ::v-deep .el-button {
        border: none;
      }
      .dialog-footer :hover {
        .dialog-btn {
          background: url("~@/assets/dialog/btn-bg-act.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      ::v-deep .el-dialog__header {
        background: rgba(255, 255, 255, 0);
        text-align: left;
        padding-left: 40px;
        .el-dialog__title {
          font-family: SourceHanSansCN-Bold, san-serif;
          font-size: 24px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 38px;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }
      ::v-deep .el-dialog {
        background: url("../../../../assets/dialog/弹窗背景-一般.png") no-repeat;
        width: 1820px;
        height: 1066px;
        background-size: 100% 100%;
      }
      ::v-deep .el-dialog__headerbtn {
        top: 0;
        font-size: 30px;
        font-weight: bolder;
      }
      ::v-deep .el-dialog__footer {
        background: rgba(255, 255, 255, 0);
      }
      ::v-deep .el-table th.el-table__cell {
        background-color: rgba(0, 0, 0, 0);
      }
      ::v-deep .el-table {
        background-color: rgba(0, 0, 0, 0);
        color: #fff;
        border: none;
      }
      ::v-deep.el-table::before {
        display: none;
      }
      ::v-deep .el-table tr {
        background-color: rgba(0, 0, 0, 0);
      }
      ::v-deep .el-table .cell {
        font-size: 26px;
        height: 40px;
        line-height: 40px;
      }
      ::v-deep .el-table__header {
        background-color: rgba(76, 162, 248, 0.2);
        color: #fff;
      }
      ::v-deep .el-table__row {
        font-family: SourceHanSansCN-Regular, sans-serif;
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #b7dfff;
        background-color: rgba(106, 184, 255, 0.2);
        border: solid 1px #6ab8ff;
      }
      ::v-deep .el-table {
        tbody tr {
          &:hover {
            td {
              background-color: rgba(228, 223, 223, 0.3) !important;
            }
          }
        }
      }
      ::v-deep .el-table td.el-table__cell {
        border: none;
      }
      ::v-deep .el-table th.el-table__cell {
        border: none;
      }
}
.dialog_title {
  font-family: SourceHanSansCN-Regular;
  font-size: 35px;
  color: #68cff9;
  padding-left: 20px;
}
.dialog_little_title {
  font-family: SourceHanSansCN-Regular;
  font-size: 28px;
  color: #f8f8f8;
  text-align: right;
  margin: 20px 0;
}
.dialog_little_ctn {
  font-family: SourceHanSansCN-Regular;
  font-size: 28px;
  color: #f8f8f8;
  margin: 20px 0;
}

.container {
  width: 100%;
  height: 100%;
  .module-container {
    width: 1512px;
    height: 950px;
    margin: 130px 0 0 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    .section-securityMonitor,
    .section-dataSource {
      width: 720px;
      height: 447px;
    }
    .section-securityMonitor {
      padding-top: 35px;
    }
    .section-attackRanking {
      width: 742px;
      height: 447px;
      padding-top: 35px;
      :hover {
        cursor: pointer;
      }
    }
    .section-superviseObject {
      width: 751px;
      height: 447px;
    }
  }
  //球
  .country-attack {
    position: absolute;
    top: 0;
    left: 1632px;
    width: 540px;
    height: 1409px;
    margin: 180px 0 0 20px;
    .attack-left {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .attack-wrap {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
        flex: 0.51;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .attack-item {
          width: 365px;
          height: 89px;
          background: url("~@/assets/privateOrder/general/left.png") no-repeat;
          background-size: 100%;
          position: relative;
          img {
            width: 52px;
            height: 34px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 18px;
            &:hover {
              cursor: pointer;
            }
          }
          .attack-info {
            width: 344px;
            height: 119px;
            position: absolute;
            left: 74px;
            top: -18px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            .attack-num {
              display: inline-block;
              align-self: center;
              font-family: DIN-Medium;
              font-size: 35px;
              color: #ffffff;
              span {
                font-size: 18px;
              }
            }
            .attack-country {
              display: inline-block;
              align-self: center;
              font-family: SourceHanSansCN-Regular;
              font-size: 28px;
              color: #6ab8f9;
              opacity: 0.5;
            }
          }
        }
      }
      .earth {
        width: 100%;
        height: 291px;
        display: inline-table;
        margin-top: 71px;
        margin-left: 9px;
        background: url("~@/assets/privateOrder/general/地球.png") no-repeat;
        position: relative;
        img {
          width: auto;
          height: 183px;
          position: absolute;
          top: 70px;
          left: 70px;
          animation: rotate 6s linear infinite;
          // background-size: 100%;
        }
        @keyframes rotate {
          from {
            transform: rotateZ(0deg);
            transform-origin: center;
          }
          to {
            transform: rotateZ(360deg);
            transform-origin: center;
          }
        }
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
//btn  title 切换
.btn-wrap {
  display: flex;
  cursor: pointer;
  .btn {
    height: 43px;
    text-align: center;
    line-height: 43px;
    font-family: SourceHanSansCN-Regular;
    font-size: 30px;
    color: #b7dfff;
    margin-left: 20px;
    &.active {
      color: #fff;
      font-weight: bold;
      .topIP {
        width: 154px;
        height: 10px;
        position: relative;
        left: -3px;
        top: -13px;
        // background: url("~@/assets/privateOrder/general/tab-act.png");
        // background-size: 100% 100%;
        font-family: SourceHanSansCN-Bold;
        font-size: 30px;
        color: #ffffff;
        z-index: -1;
      }
      .distributed {
        width: 107px;
        height: 10px;
        position: relative;
        left: -3px;
        top: -13px;
        // background: url("~@/assets/privateOrder/general/tab-act.png");
        // background-size: 100% 100%;
        font-family: SourceHanSansCN-Bold;
        font-size: 30px;
        color: #ffffff;
        z-index: -1;
      }
    }
  }
}
//数据来源
.section-source {
  height: 447px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  .section-top {
    width: 100%;
    height: 140px;
    display: flex;
    // margin-top: 24px;
    // margin-left: 12px;
    // margin-bottom: 20px;
    justify-content: space-around;
    .section-top-item {
      width: 338px;
      height: 140px;
      display: flex;
      justify-content: space-around;
      background: url("~@/assets/privateOrder/general/数据来源-框1.png");
      background-size: 100% 100%;
      img {
        align-self: center;
      }
      .top-item-content {
        align-self: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 70%;
        div {
          text-align: center;
          font-family: SourceHanSansCN-Regular;
          font-size: 28px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #ffffff;
          .content-currentNum,
          .content-total {
            text-align: center;
            font-family: LESLIE-Regular;
            font-size: 44px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
          }
          .content-currentNum {
            color: #fff36f;
          }
          .content-total {
            color: #ffffff;
            opacity: 0.5;
          }
        }
      }
    }
  }
  .section-bottom {
    width: 100%;
    height: 192px;
    display: flex;
    justify-content: space-around;
    .section-bottom-item {
      width: 230px;
      height: 200px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .bottom-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 28px;
        color: #fff;
        font-family: SourceHanSansCN-Regular;
        text-shadow: 0 0 10px #77adeb;
      }
      .bottom-num {
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 40px;
        color: #fff;
        font-family: ConthraxSb-Regular;
      }
    }
  }
}
//监管对象
.section-object {
  height: 364px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .section-bg {
    position: relative;
    top: 54px;
    width: 100%;
    height: 351px;
    background: url("~@/assets/privateOrder/general/circle.png") no-repeat;
    background-size: 100% 100%;
    .section-object-item {
      position: absolute;
      width: 250px;
      height: 100px;
      display: flex;
      &:hover {
        cursor: pointer;
        transform: scale(1.1);
        transition: 0.2s;
      }
      .item-content-title {
        font-family: SourceHanSansCN-Regular;
        font-size: 28px;
        color: #b7dfff;
      }
      .item-content-num {
        font-family: DIN-Bold;
        font-size: 44px;
        font-style: italic;
        color: #ffffff;
      }
    }
    .section-center {
      position: absolute;
      top: 72px;
      left: 336px;
      width: 73px;
      height: 100px;
      background: url("~@/assets/privateOrder/general/icon-监管.png");
      background-size: 100%;
    }
  }
}
.section-bg:hover {
  .item1 {
    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -26.75s infinite alternate,
      animY 15s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
      scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
  }
  .item2 {
    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -32.25s infinite alternate,
      animY 15s cubic-bezier(0.36, 0, 0.64, 1) -24.5s infinite alternate,
      scale 30s cubic-bezier(0.36, 0, 0.64, 1) -2.5s infinite alternate;
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
  }
  .item3 {
    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -7.25s infinite alternate,
      animY 15s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
      scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
  }
  .item4 {
    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -11.75s infinite alternate,
      animY 15s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
      scale 30s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate;
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
  }
  .item5 {
    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
      animY 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
      scale 30s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
  }
  .item6 {
    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -21.75s infinite alternate,
      animY 15s cubic-bezier(0.36, 0, 0.64, 1) -14.5s infinite alternate,
      scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
  }
}
//安全检测
.section-monitor {
  height: 387px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  .section-monitor-top {
    width: 100%;
    height: 120px;
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
    background: url("~@/assets/privateOrder/general/bg-安全监测.png") 100%
      no-repeat;
    .monitor-line {
      display: inline-block;
      height: 47px;
      width: 2px;
      background-color: #fff;
      opacity: 0.3;
      align-self: center;
    }
    .monitor-info {
      display: flex;
      width: 254px;
      justify-content: space-around;
      img {
        align-self: center;
      }
      .monitor-info-des {
        align-self: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 70%;
        .info-des-title {
          font-family: SourceHanSansCN-Regular;
          font-size: 24px;
          color: #ffffff;
        }
        .info-des-total {
          font-family: PangMenZhengDao-3;
          font-size: 40px;
          font-style: italic;
          letter-spacing: 2px;
          color: #fff36f;
        }
      }
    }
    .monitor-detail {
      width: 394px;
      display: flex;
      .monitor-detail-item {
        display: flex;
        align-self: center;
        justify-content: center;
        flex: 1;
        flex-direction: column;
        .detail-item-title {
          font-family: SourceHanSansCN-Regular;
          font-size: 26px;
          color: #68cff9;
        }
        .detail-item-num {
          font-family: DIN-Medium;
          font-size: 34px;
          color: #ffffff;
        }
      }
    }
  }
  .section-monitor-bottom {
    width: 100%;
    height: 229px;
    display: flex;
    margin-top: -33px;
    justify-content: space-around;
    .monitor-box {
      width: 720px;
      height: 229px;
      margin-top: 28px;
      overflow: hidden;
      .monitor-title {
        width: 720px;
        height: 50px;
        line-height: 50px;
        background-color: #133458;
        display: grid;
        grid-template-columns: 253px 306px 180px;
        span {
          font-family: SourceHanSansCN-Regular;
          font-size: 28px;
          color: #b7dfff;
        }
        span:nth-child(1) {
          margin-left: 39px;
        }
      }
      .monitorScroll {
        width: 720px;
        height: 180px;
        overflow: hidden;
        margin-top: 5px;
      }
      .monitor-list {
        margin-top: 12px;
        width: 720px;
        height: 80px;
        line-height: 80px;
        background-color: rgb(19, 52, 88, 0.3);
        display: flex;
        span {
          display: inline-block;
          font-family: DIN-Medium;
          font-size: 28px;
          letter-spacing: 0px;
          color: #ffffff;
        }
        span:nth-child(1) {
          width: 185px;
          margin-left: 39px;
        }
        span:nth-child(2) {
          width: 355px;
          margin-left: 55px;
        }
        span:nth-child(3) {
          width: 180px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
//-------------------旋转动画---------------
.item1 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -26.75s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.item2 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -32.25s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -24.5s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -2.5s infinite alternate;
}
.item3 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -7.25s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.item4 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -11.75s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate;
}
.item5 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
}
.item6 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -21.75s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -14.5s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
}
@keyframes animX {
  0% {
    left: 10px;
  }
  100% {
    left: 640px;
  }
}
@keyframes animY {
  0% {
    top: -35px;
  }
  100% {
    top: 260px;
  }
}
@keyframes scale {
}
::v-deep .el-pagination__total {
  color: #fff;
}
::v-deep .el-input .el-input--mini .el-input--suffix {
  background: transparent;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner {
  background: transparent;
  border: none;
  color: #fff;
}
::v-deep .el-select-dropdown__list {
  background: #000;
}
::v-deep .el-pagination button:disabled {
  background-color: transparent;
}
::v-deep .el-pagination .btn-next {
  background-color: transparent;
  color: #fff;
}
::v-deep .el-pager {
  color: #fff !important;
}
::v-deep .el-pager li {
  background-color: transparent;
}
::v-deep .el-pagination__editor.el-input .el-input__inner {
  background-color: transparent;
  border: none;
  color: #fff;
}
::v-deep .el-pagination__jump {
  color: #fff;
}
::v-deep .el-select-dropdown .el-popper {
  background-color: #132d56 !important;
}
</style>
