|
|
<!--
|
|
|
* @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>
|
