网络走势图

lijinlong
杜函宇 1 year ago
parent cdac35518f
commit 5360249569

@ -0,0 +1,23 @@
import request from '@/utils/request.js'
//数据来源
export function dataLY() {
return request({
url: '/zongzhi/saftyscreen/source',
method: 'get',
})
}
//地球受攻击
export function mapAttack(data) {
return request({
url: '/zongzhi/attack/list',
method: 'get',
params:data
})
}
//安全隐患
export function safeRisks() {
return request({
url: '/zongzhi/saftyscreen/safetyhazard',
method: 'get',
})
}

@ -91,7 +91,7 @@
gl_PointSize = clamp(fract(percent*number + l - u_time*number*speed)-l ,0.0,1.) * size * (1./length);
opacity = gl_PointSize/size;
gl_Position = projectionMatrix * mvPosition;
}`
}`;
</script>
<script>
import * as THREE from "three";
@ -100,7 +100,9 @@ import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
import { inlandAttack, outlandAttack } from '@/api/common'
import { inlandAttack, outlandAttack } from "@/api/common";
import { mapAttack } from "@/api/wlSafe";
export default {
filters: {
commaFilter(target) {
@ -221,7 +223,7 @@ export default {
attackItem: [
{
country: "荷兰",
attackNum: 1123456,
attackNum: 0,
pos: {
x: 3.0555661883637675,
y: 3.947974319364163,
@ -236,7 +238,7 @@ export default {
},
{
country: "美国",
attackNum: 194817,
attackNum: 0,
pos: {
x: -0.7429826939416676,
y: 3.173642316073895,
@ -251,7 +253,7 @@ export default {
},
{
country: "韩国",
attackNum: 64202,
attackNum: 0,
pos: {
x: -2.476630836604717,
y: 2.974956787678714,
@ -266,7 +268,7 @@ export default {
},
{
country: "日本",
attackNum: 54272,
attackNum: 0,
pos: {
x: -3.025242162418693,
y: 3.06965280605713,
@ -281,7 +283,7 @@ export default {
},
{
country: "新加坡",
attackNum: 36181,
attackNum: 0,
pos: {
x: -1.1977125498395522,
y: 0.1187630232077593,
@ -296,7 +298,7 @@ export default {
},
{
country: "澳大利亚",
attackNum: 4227,
attackNum: 0,
pos: {
x: -3.14762251291355,
y: -2.055138287415189,
@ -311,7 +313,7 @@ export default {
},
{
country: "比利时",
attackNum: 3248,
attackNum: 0,
url: require("@/assets/privateOrder/general/比利时.png"),
pos: {
x: 3.150208620337378,
@ -326,7 +328,7 @@ export default {
},
{
country: "欧盟",
attackNum: 2824,
attackNum: 0,
url: require("@/assets/privateOrder/general/欧盟.png"),
pos: {
x: 3.0716462228398043,
@ -341,7 +343,7 @@ export default {
},
{
country: "印度",
attackNum: 2547,
attackNum: 0,
url: require("@/assets/privateOrder/general/印度.png"),
pos: {
x: 0.8973138397272145,
@ -356,7 +358,7 @@ export default {
},
{
country: "爱尔兰",
attackNum: 1753,
attackNum: 0,
pos: {
x: 2.971912016290204,
y: 3.9983787025311033,
@ -373,7 +375,7 @@ export default {
attackItemTwo: [
{
country: "浙江省",
attackNum: 15226229,
attackNum: 0,
pos: {
x: -2.172660741647654,
y: 2.519873478041844,
@ -388,7 +390,7 @@ export default {
},
{
country: "江苏省",
attackNum: 10725829,
attackNum: 0,
pos: {
x: -2.041420338320037,
y: 2.6542648717292443,
@ -403,7 +405,7 @@ export default {
},
{
country: "上海市",
attackNum: 1495968,
attackNum: 0,
pos: {
x: -2.2319153148460087,
y: 2.5918025598512733,
@ -418,7 +420,7 @@ export default {
},
{
country: "广东省",
attackNum: 1078552,
attackNum: 0,
pos: {
x: -1.8163404736411468,
y: 1.9638138809954824,
@ -433,7 +435,7 @@ export default {
},
{
country: "北京市",
attackNum: 927036,
attackNum: 0,
to: {
x: 1.5,
y: 1.3,
@ -448,7 +450,7 @@ export default {
},
{
country: "山东省",
attackNum: 370540,
attackNum: 0,
pos: {
x: -1.8242436054004105,
y: 2.9852801487720697,
@ -463,7 +465,7 @@ export default {
},
{
country: "青海省",
attackNum: 71048,
attackNum: 0,
to: {
x: 0,
y: 0.9,
@ -478,7 +480,7 @@ export default {
},
{
country: "香港",
attackNum: 57921,
attackNum: 0,
pos: {
x: -1.891796825048188,
y: 1.906025635738977,
@ -493,7 +495,7 @@ export default {
},
{
country: "河北省",
attackNum: 56947,
attackNum: 0,
pos: {
x: -1.6349002874033607,
y: 3.0827610905393548,
@ -508,7 +510,7 @@ export default {
},
{
country: "江西省",
attackNum: 44890,
attackNum: 0,
to: {
x: 1.5,
y: -0.1,
@ -532,10 +534,9 @@ export default {
// this.startAnimate();
// this.startAnimateTwo();
},
computed: {
},
computed: {},
mounted() {
this.onload();
this.mapList();
// inlandAttack().then(res => {
// const attackObject = res['T_INLAND_ATTACK[]']
// for (let j = 0; j < attackObject.length; j++) {
@ -560,6 +561,27 @@ export default {
// })
},
methods: {
//
mapList() {
mapAttack({ pageSize: 20, pageNum: 1 }).then((res) => {
console.log(res);
res.rows.forEach((value) => {
this.attackItem.forEach((value1,index1)=>{
if(value1.country == value.name){
this.attackItem[index1].attackNum = value.attackCount
return
}
})
this.attackItemTwo.forEach((value2,index2)=>{
if(value2.country == value.name){
this.attackItemTwo[index2].attackNum = value.attackCount
return
}
})
});
this.onload();
});
},
stopAnimate() {
window.clearInterval(this.timer);
this.animateFlag = false;
@ -1430,7 +1452,7 @@ export default {
width: 365px;
height: 89px;
margin-bottom: 20px;
background: url('~@/assets/privateOrder/general/left.png') no-repeat;
background: url("~@/assets/privateOrder/general/left.png") no-repeat;
background-size: 100%;
position: relative;
img {
@ -1479,7 +1501,7 @@ export default {
display: inline-table;
margin-top: 54px;
margin-left: 9px;
background: url('~@/assets/privateOrder/general/地球.png') no-repeat;
background: url("~@/assets/privateOrder/general/地球.png") no-repeat;
// background-size: 100%;
// background-position: center;
position: relative;
@ -1533,7 +1555,7 @@ export default {
height: 89px;
margin-bottom: 20px;
margin-left: 130px;
background-image: url('~@/assets/privateOrder/general/right.png');
background-image: url("~@/assets/privateOrder/general/right.png");
background-size: 100% 100%;
position: relative;
img {
@ -1582,7 +1604,7 @@ export default {
height: 291px;
margin-top: 75px;
margin-left: 182px;
background: url('~@/assets/privateOrder/general/中国.png') no-repeat;
background: url("~@/assets/privateOrder/general/中国.png") no-repeat;
position: relative;
img {
width: auto;

@ -29,7 +29,8 @@
transform: translate(5px, -7px);
"
>
/</span>
/</span
>
<span class="content-total">{{ item.total }}</span>
</div>
</div>
@ -40,11 +41,11 @@
v-for="(item, idx) in dataSource.bottom"
:key="idx"
class="section-bottom-item"
@click="showAttack(item.title,item.num)"
@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>
<span class="bottom-num">{{ item.num | commaFilter }}</span>
</div>
</div>
</div>
@ -57,12 +58,15 @@
v-for="(item, idx) in superviseObject"
:key="idx"
:class="['section-object-item', item.className]"
@click="showAttack(item.title,item.num)"
@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>
<span class="item-content-title">{{ item.title }}</span
><br />
<span class="item-content-num">{{
item.num | commaFilter
}}</span>
</div>
</div>
<div class="section-center" />
@ -84,7 +88,7 @@
<div class="monitor-detail">
<div
v-for="(item, index) in securityMonitor.detail"
v-show="index<3"
v-show="index < 3"
:key="index"
class="monitor-detail-item"
>
@ -114,7 +118,9 @@
>
<span>{{ item.attackTime }}</span>
<span>{{ item.attackedIp }}</span>
<span>{{ $filterDict('tc_attack_type',item.attackType) }}</span>
<span>{{
$filterDict("tc_attack_type", item.attackType)
}}</span>
</div>
</vue-seamless-scroll>
</div>
@ -178,7 +184,9 @@
<div class="dialog_little_title">攻击类型</div>
</el-col>
<el-col :span="18">
<div class="dialog_little_ctn">{{ $filterDict('tc_attack_type',tableDataPop.attackType) }}</div>
<div class="dialog_little_ctn">
{{ $filterDict("tc_attack_type", tableDataPop.attackType) }}
</div>
</el-col>
</el-row>
<el-row>
@ -222,7 +230,9 @@
<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>
<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>
@ -262,10 +272,7 @@
dialogType === '软探针'
"
>
<MyTable
:table-list="excelData"
:table-key="excelDataHeader"
/>
<MyTable :table-list="excelData" :table-key="excelDataHeader" />
<div style="text-align: right; margin-top: 10px">
<paginations
v-show="total > 0"
@ -278,10 +285,9 @@
</template>
<span slot="footer" class="dialog-footer">
<span>
<el-button
class="dialog-btn"
@click="dialogStatus = false"
> </el-button>
<el-button class="dialog-btn" @click="dialogStatus = false"
> </el-button
>
</span>
</span>
</el-dialog>
@ -289,20 +295,28 @@
</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 { 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'
xitongjianceKeyValue,
} from "./mock";
import {
IDCKeyValue,
IDC,
@ -313,25 +327,27 @@ import {
zfdwKeyValue,
zfdw,
rtz,
rtzKeyValue
} from './jianGuan'
import { getLatest, getSecurity } from '@/api/common'
rtzKeyValue,
} from "./jianGuan";
import { getLatest, getSecurity } from "@/api/common";
//===============
import { dataLY } from "@/api/wlSafe";
export default {
components: {
attackSituation,
ModuleTitle,
vueSeamlessScroll,
ExcelTable
ExcelTable,
},
filters: {
commaFilter(target) {
if (target < 10000) {
return String(target).replace(/(\d)(?=(\d{3})+$)/g, '$1,')
return String(target).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
} else {
return (target / 10000).toFixed(2) + '万'
}
return (target / 10000).toFixed(2) + "万";
}
},
},
data() {
return {
/**
@ -339,101 +355,108 @@ export default {
*/
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
}, //
total: 0, //
time: null,
checkTotal: 0,
checkParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
},
//
dialogWidth: 0,
dialogStatus: false,
dialogType: '',
dialogType: "",
safeDialog: false,
attackTime: null,
tableTime: null,
tableTotal: 0,
currentIndex: 0,
attackList: {
options: ['受攻击IPTOP5', '分布情况']
options: ["受攻击IPTOP5", "分布情况"],
},
dataSource: {
top: [
{
title: '云端监测(G)',
currentNum: 100,
title: "云端监测(G)",
currentNum: 0,
total: 150,
url: require('@/assets/privateOrder/general/icon-云端监测.png')
url: require("@/assets/privateOrder/general/icon-云端监测.png"),
type: 1,
},
{
title: 'APT(M)',
currentNum: 239,
title: "APT(M)",
currentNum: 0,
total: 1000,
url: require('@/assets/privateOrder/general/icon-APT.png')
}
url: require("@/assets/privateOrder/general/icon-APT.png"),
type: 2,
},
],
bottom: [
{
title: '硬探针',
num: 6,
url: require('@/assets/privateOrder/general/硬探针.png')
title: "硬探针",
num: 0,
url: require("@/assets/privateOrder/general/硬探针.png"),
type: 3,
},
{
title: '软探针',
num: 125,
url: require('@/assets/privateOrder/general/软探针.png')
title: "软探针",
num: 0,
url: require("@/assets/privateOrder/general/软探针.png"),
type: 4,
},
{
title: '系统监测',
num: 2658,
url: require('@/assets/privateOrder/general/系统监测.png')
}
]
title: "系统监测",
num: 0,
url: require("@/assets/privateOrder/general/系统监测.png"),
type: 7,
},
],
},
superviseObject: [
{
title: '政府网站',
title: "政府网站",
num: 0,
className: 'item1',
url: require('@/assets/privateOrder/general/icon-政府网站.png')
className: "item1",
url: require("@/assets/privateOrder/general/icon-政府网站.png"),
},
{
title: '监管单位',
title: "监管单位",
num: 0,
className: 'item2',
url: require('@/assets/privateOrder/general/icon-监管单位.png')
className: "item2",
url: require("@/assets/privateOrder/general/icon-监管单位.png"),
type:5
},
{
title: '网站监测',
title: "网站监测",
num: 0,
className: 'item3',
url: require('@/assets/privateOrder/general/icon-网站监测.png')
className: "item3",
url: require("@/assets/privateOrder/general/icon-网站监测.png"),
type:6
},
{
title: 'IDC单位',
title: "IDC单位",
num: 0,
className: 'item4',
url: require('@/assets/privateOrder/general/icon-IDC单位.png')
className: "item4",
url: require("@/assets/privateOrder/general/icon-IDC单位.png"),
},
{
title: '等保系统',
title: "等保系统",
num: 0,
className: 'item5',
url: require('@/assets/privateOrder/general/icon-等保系统.png')
className: "item5",
url: require("@/assets/privateOrder/general/icon-等保系统.png"),
},
{
title: '等保单位',
title: "等保单位",
num: 0,
className: 'item6',
url: require('@/assets/privateOrder/general/icon-等保单位.png')
}
className: "item6",
url: require("@/assets/privateOrder/general/icon-等保单位.png"),
},
],
securityMonitor: {
url: require('@/assets/privateOrder/general/icon-网络攻击.png'),
title: '网络攻击(次)',
url: require("@/assets/privateOrder/general/icon-网络攻击.png"),
title: "网络攻击(次)",
total: 0,
detail: [
// {
@ -448,7 +471,7 @@ export default {
// title: '',
// num: 796.152
// }
]
],
},
tableDataPop: {
// id: 1,
@ -492,8 +515,9 @@ export default {
// }
],
excelData: null,
excelDataHeader: null
}
excelDataHeader: null,
//=================
};
},
computed: {
classOption() {
@ -505,29 +529,30 @@ export default {
openWatch: true, // dom
singleHeight: 0, // (0) direction => 0/1
singleWidth: 0, // (0) direction => 2/3
waitTime: 1000 // (1000ms)
}
}
waitTime: 1000, // (1000ms)
};
},
},
created() {},
destroyed() {
clearInterval(this.attackTime) //
clearInterval(this.tableTime)
clearInterval(this.time)
clearInterval(this.attackTime); //
clearInterval(this.tableTime);
clearInterval(this.time);
},
mounted() {
this.changeBtn() //
this.getSaftyscreenSupervise()
this.getSaftyscreenSafety()
this.getListDetection()
this.time = setInterval(() => { //
this.changeBtn(); //
this.getSaftyscreenSupervise();
this.getSaftyscreenSafety();
this.getListDetection();
this.time = setInterval(() => {
//
if (this.tableData.length >= this.checkTotal) {
clearInterval(this.time)
clearInterval(this.time);
} else {
this.checkParams.pageNum = this.checkParams.pageNum + 1
this.getListDetection()
this.checkParams.pageNum = this.checkParams.pageNum + 1;
this.getListDetection();
}
}, 6000)
}, 6000);
// this.getDataSource() //
//
// getLatest().then((res) => {
@ -554,228 +579,263 @@ export default {
// data[3].statistic_count / 10000
// ).toFixed(2)
// })
//
this.getsjly();
},
methods: {
getsjly() {
dataLY().then((res) => {
console.log(res);
res.data.forEach((value, index) => {
this.dataSource.top.forEach((value1, index1) => {
if (value.type == value1.type) {
this.dataSource.top[index1].currentNum = value.count
return
}
});
this.dataSource.bottom.forEach((value2, index2) => {
if (value.type == value2.type) {
this.dataSource.bottom[index2].num = value.count
return
}
});
this.superviseObject.forEach((value3,index3)=>{
if (value.type == value3.type) {
this.superviseObject[index3].num = value.count
return
}
})
});
});
},
//================
AttackClick(id) {
return new Promise((resolve) => {
getLatest().then((res) => {
res['T_LATEST_NEWS[]'].forEach((item) => {
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
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)
? (this.tableDataPop.contactTel = "-")
: (this.tableDataPop.contactTel = item.contact_tel);
item.contact_name === undefined
? (this.tableDataPop.contactName = '-')
: (this.tableDataPop.contactName = item.contact_name)
resolve()
? (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
})
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
})
listDetection(this.checkParams).then((res) => {
this.tableData = [...this.tableData, ...res.rows];
this.checkTotal = res.total;
});
},
/**
* 安全监测攻击类型统计
*/
getSaftyscreenSafety() {
saftyscreenSafety().then(res => {
saftyscreenSafety().then((res) => {
this.securityMonitor.detail = res.data.list.map((item, index) => {
this.securityMonitor.total = this.securityMonitor.total + item.count
this.securityMonitor.total = this.securityMonitor.total + item.count;
return {
title: this.$filterDict('tc_attack_type', item.attackType),
num: item.count
}
})
})
title: this.$filterDict("tc_attack_type", item.attackType),
num: item.count,
};
});
});
},
/**
* 监管对象各类别统计量
*/
getSaftyscreenSupervise() {
saftyscreenSupervise().then(res => {
saftyscreenSupervise().then((res) => {
// this.superviseObject[4].num = res.data.
res.data.forEach(item => {
this.superviseObject.forEach(it => {
res.data.forEach((item) => {
this.superviseObject.forEach((it) => {
if (item.name == it.title) {
it.num = item.count
it.num = item.count;
}
})
})
console.log(res, 'aaa')
})
});
});
console.log(res, "aaa");
});
},
/**
* 表格参数重置
* */
reset() {
this.total = 0
this.total = 0;
this.queryParams = {
pageNum: 1,
pageSize: 10
}
this.excelData = []
this.excelDataHeader = []
pageSize: 10,
};
this.excelData = [];
this.excelDataHeader = [];
},
/**
* 等保系统
*/
getDbSteam() {
listSystem(this.queryParams).then(res => {
this.excelData = res.rows
this.excelDataHeader = dbxtKeyValue
this.total = res.total
})
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
})
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
})
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
})
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
})
listSource(this.queryParams).then((res) => {
this.excelData = res.rows;
this.excelDataHeader = xitongjianceKeyValue;
this.total = res.total;
});
},
showAttack(item = '安全监测', total) {
if (typeof item === 'object') {
showAttack(item = "安全监测", total) {
if (typeof item === "object") {
//
} else {
this.reset()
this.dialogType = item
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
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.queryParams.type = 7;
}
this.getJgUnit()
this.getJgUnit();
}
this.$nextTick(() => {
this.dialogStatus = true
})
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
}
}
}
})
},
// 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)
clearInterval(this.attackTime);
},
//
mouseLeave() {
this.changeBtn()
this.changeBtn();
},
//
changeBtn() {
this.attackTime = setInterval(() => {
this.currentIndex === 0
? (this.currentIndex = 1)
: (this.currentIndex = 0)
}, 11000)
}
}
}
: (this.currentIndex = 0);
}, 11000);
},
},
};
</script>
<style lang="scss" scoped>

@ -119,15 +119,10 @@
class="dangerText"
@click="rowDetails(item)"
>
<span>{{
item.unitName
}}</span>
<span>{{
item.riskName
}}</span>
<span>{{ $filterDict('tc_yh_level',item.level) }}</span>
<span>
{{ $filterDict('tc_yh_source',item.riskSource) }}</span>
<span>{{ item.unitName }}</span>
<span>{{ item.riskName }}</span>
<span>{{ $filterDict("tc_yh_level", item.level) }}</span>
<span> {{ $filterDict("tc_yh_source", item.riskSource) }}</span>
</div>
</vue-seamless-scroll>
</div>
@ -149,20 +144,13 @@
:key="index"
class="ctn_item"
>
<div
class="item_name"
>
<div class="item_name">
{{ item.depName }}
</div>
<div
class="item_ip"
>
<div class="item_ip">
{{ item.domainName }}
</div>
<span class="item_num">{{
item.status
}}</span>
<span class="item_num">{{ item.status }}</span>
</div>
</vue-seamless-scroll>
</div>
@ -187,10 +175,9 @@
</div>
<span slot="footer" class="dialog-footer">
<span>
<el-button
class="dialog-btn"
@click="dialogStatus = false"
> </el-button>
<el-button class="dialog-btn" @click="dialogStatus = false"
> </el-button
>
</span>
</span>
</el-dialog>
@ -226,10 +213,9 @@
</div>
<span slot="footer" class="dialog-footer">
<span>
<el-button
class="dialog-btn"
@click="dialogDetails = false"
> </el-button>
<el-button class="dialog-btn" @click="dialogDetails = false"
> </el-button
>
</span>
</span>
</el-dialog>
@ -237,48 +223,49 @@
</template>
<script>
import { listDanger, getDanger, listTb, getTb } from '@/api/zongzhi/st.js'
import vueSeamlessScroll from 'vue-seamless-scroll'
import ModuleTitle from '../../common/ModuleTitle.vue'
import ReportingStatistics from './ReportingStatistics.vue'
import {safeRisks} from '@/api/wlSafe'
import { listDanger, getDanger, listTb, getTb } from "@/api/zongzhi/st.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import ModuleTitle from "../../common/ModuleTitle.vue";
import ReportingStatistics from "./ReportingStatistics.vue";
// import { getSafeHazardSatistic, getNotificationList } from '@/api/common'
import { dangerList, informList } from './data.js'
import qs from 'qs'
const docx = require('docx-preview')
import axios from 'axios'
window.JSZip = require('jszip')
import pdf from 'vue-pdf'
import { dangerList, informList } from "./data.js";
import qs from "qs";
const docx = require("docx-preview");
import axios from "axios";
window.JSZip = require("jszip");
import pdf from "vue-pdf";
export default {
components: {
vueSeamlessScroll,
ModuleTitle,
ReportingStatistics,
pdf
pdf,
},
filters: {
numFilter(value) {
const realVal = Number(value).toFixed(2)
return Number(realVal)
const realVal = Number(value).toFixed(2);
return Number(realVal);
},
commaFilter(target) {
if (target < 10000) {
return String(target).replace(/(\d)(?=(\d{3})+$)/g, '$1,')
return String(target).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
} else {
return (target / 10000).toFixed(2) + '万'
}
return (target / 10000).toFixed(2) + "万";
}
},
},
data() {
return {
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
},
total2: 0,
queryParams2: {
pageNum: 1,
pageSize: 10
pageSize: 10,
},
loading: true,
//
@ -287,35 +274,41 @@ export default {
dangerTime: null,
dangerCurrentIndex: 0,
threeStatistics: {
options: ['属地通报', '部门通报']
options: ["属地通报", "部门通报"],
},
trouble: { options: ['最新隐患', '通报处置'] },
trouble: { options: ["最新隐患", "通报处置"] },
//
safetyList: [
{
title: '敏感信息泄露漏洞',
value: 86800
title: "敏感信息泄露漏洞",
value: 0,
type:1,
},
{
title: '权限许可和访问控制',
value: 23800
title: "权限许可和访问控制",
type:2,
value: 0,
},
{
title: '未加密登录请求',
value: 15200
title: "未加密登录请求",
value: 0,
type:3,
},
{
title: '其他',
value: 14700
title: "其他",
type:6,
value: 0,
},
{
title: '应用程序测试脚本漏洞',
value: 2142
title: "应用程序测试脚本漏洞",
type:4,
value: 0,
},
{
title: '文件上传漏洞',
value: 1525
}
title: "文件上传漏洞",
type:5,
value: 0,
},
],
//
notificationFinishList: [
@ -323,32 +316,32 @@ export default {
timeRangeFlag: 1,
notificationCount: 59,
completionCount: 59,
completionPercent: `100%`
completionPercent: `100%`,
},
{
timeRangeFlag: 2,
notificationCount: 92,
completionCount: 92,
completionPercent: `100%`
completionPercent: `100%`,
},
{
timeRangeFlag: 3,
notificationCount: 108,
completionCount: 108,
completionPercent: `100%`
completionPercent: `100%`,
},
{
timeRangeFlag: 4,
notificationCount: 170,
completionCount: 170,
completionPercent: `100%`
completionPercent: `100%`,
},
{
timeRangeFlag: 4,
notificationCount: 120,
completionCount: 170,
completionPercent: `100%`
}
completionPercent: `100%`,
},
],
animate: true,
positionTimer: null,
@ -361,24 +354,24 @@ export default {
dialogStatus: false,
rowDta: {},
dialogDetails: false,
dialogTitle: '',
dialogTitle: "",
//
fileExtension: '',
fileExtension: "",
numPages: 1,
pdfUrl: ''
}
pdfUrl: "",
};
},
computed: {
notificationStatus() {
return (flag) => {
const myMap = new Map([
[1, '近一个月'],
[2, '近三个月'],
[3, '近六个月'],
[4, '近一年']
])
return myMap.get(flag)
}
[1, "近一个月"],
[2, "近三个月"],
[3, "近六个月"],
[4, "近一年"],
]);
return myMap.get(flag);
};
},
classOption() {
return {
@ -389,37 +382,41 @@ export default {
openWatch: true, // dom
singleHeight: 0, // (0) direction => 0/1
singleWidth: 0, // (0) direction => 2/3
waitTime: 1000 // (1000ms)
}
}
waitTime: 1000, // (1000ms)
};
},
},
created() {},
destroyed() {
clearInterval(this.announceTime)
clearInterval(this.dangerTime)
clearInterval(this.dangerListTime)
clearInterval(this.tbTime)
clearInterval(this.announceTime);
clearInterval(this.dangerTime);
clearInterval(this.dangerListTime);
clearInterval(this.tbTime);
},
mounted() {
this.dangerChange()
this.getListDanger()
this.dangerListTime = setInterval(() => { //
this.dangerChange();
this.getListDanger();
this.dangerListTime = setInterval(() => {
//
if (this.dangerList.length >= this.total) {
clearInterval(this.dangerListTime)
clearInterval(this.dangerListTime);
} else {
this.queryParams.pageNum = this.queryParams.pageNum + 1
this.getListDanger()
this.queryParams.pageNum = this.queryParams.pageNum + 1;
this.getListDanger();
}
}, 6000)
this.getlistTb()
this.tbTime = setInterval(() => { //
}, 6000);
this.getlistTb();
this.tbTime = setInterval(() => {
//
if (this.informList.length >= this.total2) {
clearInterval(this.tbTime)
clearInterval(this.tbTime);
} else {
this.queryParams2.pageNum = this.queryParams2.pageNum + 1
this.getlistTb()
this.queryParams2.pageNum = this.queryParams2.pageNum + 1;
this.getlistTb();
}
}, 6000)
}, 6000);
//
this.safeListDP();
// this.announceChange()
// getSafeHazardSatistic().then((res) => {
@ -441,89 +438,104 @@ export default {
// })
},
methods: {
/**
* 安全隐患大屏数据
*/
safeListDP() {
safeRisks().then(res=>{
res.data.forEach((value,index)=>{
this.safetyList.forEach((value1,index1)=>{
if(value.type == value1.type){
this.safetyList[index1].value = value.count
}
})
})
})
},
/**
* 最新隐患
*/
getListDanger() {
listDanger(this.queryParams).then(res => {
this.dangerList = [...this.dangerList, ...res.rows]
this.total = res.total
})
listDanger(this.queryParams).then((res) => {
this.dangerList = [...this.dangerList, ...res.rows];
this.total = res.total;
});
},
/**
* 通报处置
*/
getlistTb() {
listTb(this.queryParams2).then(res => {
console.log(res, 'www')
this.informList = [...this.informList, ...res.rows]
this.total2 = res.total
})
listTb(this.queryParams2).then((res) => {
console.log(res, "www");
this.informList = [...this.informList, ...res.rows];
this.total2 = res.total;
});
},
//
mouseOver(status) {
if (status === 'danger') {
clearInterval(this.dangerTime)
if (status === "danger") {
clearInterval(this.dangerTime);
} else {
clearInterval(this.announceTime)
clearInterval(this.announceTime);
}
},
//
mouseLeave(status) {
if (status === 'danger') {
this.dangerChange()
if (status === "danger") {
this.dangerChange();
} else {
this.announceChange()
this.announceChange();
}
},
//
loadList() {
this.animate = true
this.animate = true;
setTimeout(() => {
this.dangerList.push(this.dangerList[0])
this.dangerList.shift()
this.animate = false
}, 1000)
this.dangerList.push(this.dangerList[0]);
this.dangerList.shift();
this.animate = false;
}, 1000);
},
//
loadList2() {
this.animate = true
this.animate = true;
setTimeout(() => {
this.informList.push(this.informList[0])
this.informList.shift()
this.animate2 = false
}, 1000)
this.informList.push(this.informList[0]);
this.informList.shift();
this.animate2 = false;
}, 1000);
},
//
announceChange() {
this.announceTime = setInterval(() => {
this.announceCurrentIndex === 0
? (this.announceCurrentIndex = 1)
: (this.announceCurrentIndex = 0)
}, 11000)
: (this.announceCurrentIndex = 0);
}, 11000);
},
//
dangerChange() {
this.dangerTime = setInterval(() => {
this.dangerCurrentIndex === 0
? (this.dangerCurrentIndex = 1)
: (this.dangerCurrentIndex = 0)
}, 11000)
: (this.dangerCurrentIndex = 0);
}, 11000);
},
rowClick(row) {
this.rowDta = row
this.dialogStatus = true
this.rowDta = row;
this.dialogStatus = true;
},
rowDetails(e) {
const row = JSON.parse(e.target.dataset.obj)
this.dialogTitle = row?.name || row?.systemName
const row = JSON.parse(e.target.dataset.obj);
this.dialogTitle = row?.name || row?.systemName;
if (this.dangerCurrentIndex === 0) {
row.url = `/网信办大屏内容文档/网络安全/最新隐患/网络和信息安全通报-2023年第${row.issue}期 总第${row.totalNum}期(${row.systemName}.pdf`
row.url = `/网信办大屏内容文档/网络安全/最新隐患/网络和信息安全通报-2023年第${row.issue}期 总第${row.totalNum}期(${row.systemName}.pdf`;
} else {
row.url = `/网信办大屏内容文档/网络安全/通报处置/${row.url}`
row.url = `/网信办大屏内容文档/网络安全/通报处置/${row.url}`;
}
console.log(row, 'aaa')
this.dialogDetails = true
console.log(row, "aaa");
this.dialogDetails = true;
// this.fileExtension = row.url.substring(row.url.lastIndexOf('.') + 1)
// if (this.fileExtension === 'docx' || this.fileExtension === 'doc') {
@ -555,66 +567,66 @@ export default {
},
getNumPages(url) {
axios({
method: 'GET',
method: "GET",
url: url, //
paramsSerializer: function(params) {
return qs.stringify(params, { arrayFormat: 'brackets' })
paramsSerializer: function (params) {
return qs.stringify(params, { arrayFormat: "brackets" });
},
headers: {
'Content-Type':
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
"Content-Type":
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
},
responseType: 'blob'
responseType: "blob",
})
.then((response) => {
this.pdfUrl = this.getObjectURL(response.data)
const loadingTask = pdf.createLoadingTask(this.pdfUrl)
this.pdfUrl = this.getObjectURL(response.data);
const loadingTask = pdf.createLoadingTask(this.pdfUrl);
loadingTask.promise
.then((pdf) => {
this.numPages = 1
this.numPages = 1;
setInterval(() => {
if (pdf.numPages > this.numPages) {
this.numPages++
this.$forceUpdate()
this.numPages++;
this.$forceUpdate();
} else {
clearInterval()
clearInterval();
}
}, 2000)
this.dialogDetails = true
}, 2000);
this.dialogDetails = true;
})
.catch((err) => {
console.error('pdf 加载失败', err)
})
console.error("pdf 加载失败", err);
});
})
.catch((error) => {
this.$message.error('' + error)
})
this.$message.error("" + error);
});
},
// url
getObjectURL(file) {
let url = null
let url = null;
if (window.createObjectURL !== undefined) {
// basic
url = window.createObjectURL(file)
url = window.createObjectURL(file);
} else if (window.webkitURL !== undefined) {
// webkit or chrome
try {
url = window.webkitURL.createObjectURL(file)
url = window.webkitURL.createObjectURL(file);
} catch (error) {
console.log(error)
console.log(error);
}
} else if (window.URL !== undefined) {
// mozilla(firefox)
try {
url = window.URL.createObjectURL(file)
url = window.URL.createObjectURL(file);
} catch (error) {
console.log(error)
}
console.log(error);
}
return url
}
}
}
return url;
},
},
};
</script>
<style lang="scss" scoped>

@ -50,12 +50,25 @@ export default {
data() {
return {
tagList: [],
data: [],
data: [
{ name: "太仓市委", count: 200 },
{ name: "“交通先行”抢位长三角", count: 400 },
{ name: "太仓速度", count: 600 },
{ name: "最具幸福感城市", count: 2000 },
{ name: "振翅高飞", count: 350 },
{ name: "娄城防疫", count: 666 },
{ name: "城市更新", count: 899 },
{ name: "争当猛虎尖兵", count: 899 },
{ name: "家在太仓 情暖娄城", count: 899 },
{ name: "国土空间全域整治", count: 899 },
],
};
},
created() {},
created() {
},
mounted() {
this.getDataList();
this.init();
this.animate();
},
methods: {
getDataList() {
@ -66,8 +79,6 @@ export default {
count: 3,
});
});
this.init();
this.animate();
});
},
init() {

@ -352,6 +352,7 @@ export default {
negativeOpinion: [],
allDate: [],
date: [],
newDate: [],
};
},
computed: {},
@ -511,6 +512,7 @@ export default {
return arr.indexOf(item) === index;
});
this.date.forEach((value) => {
this.newDate.push(value.slice(6));
let arr2 = res.data.filter((m) => {
return m.publishTime == value;
});
@ -530,9 +532,6 @@ export default {
});
});
this.lineBox();
console.log(this.date);
console.log(this.negativeOpinion);
console.log(this.positiveOpinion);
});
},
//
@ -555,52 +554,52 @@ export default {
},
// 线
lineBox() {
const myChart = this.$echarts.init(document.getElementById("lineBox"));
const myChart = this.$echarts.init(document.getElementById('lineBox'))
const options = {
grid: {
top: "20%",
bottom: "15%",
left: "17%",
right: "1%",
},
length: {
data: ["非敏感", "敏感"],
top: "3%",
right: "2%",
top: '20%',
bottom: '15%',
left: '17%',
right: '1%'
},
legend: {
data: ['非敏感', '敏感'],
top: '3%',
right: '2%',
itemHeight: 10,
itemWidth: 10,
textStyle: {
padding: [10, 30, 10, 14],
color: "rgba(250,250,250,1)",
fontSize: 28,
},
color: 'rgba(250,250,250,1)',
fontSize: 28
}
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ",
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ',
axisPointer: {
lineStyle: {
width: 0,
},
width: 0
}
},
backgroundColor: "#fff",
backgroundColor: '#fff',
textStyle: {
color: "#5c6c7c",
},
color: '#5c6c7c'
}
},
xAxis: {
// data: this.opinionTime,
data: this.date,
data: this.newDate,
// data: ['7.23', '7.24', '7.25', '7.26', '7.27', '7.28', '7.29'],
axisLine: {
show: true, // X线
lineStyle: {
color: "rgb(119,123,132,1)",
width: 1,
},
color: 'rgb(119,123,132,1)',
width: 1
}
},
axisTick: {
show: true, // X
length: 0.2,
length: 0.2
},
axisLabel: {
show: true,
@ -610,14 +609,14 @@ export default {
// margin: 15,
// position: [100, 100],
textStyle: {
color: "#6ddefb", // X
fontSize: 28,
},
color: '#6ddefb', // X
fontSize: 28
}
},
grid: {
left: "50%",
bottom: "35%",
},
left: '50%',
bottom: '35%'
}
// splitArea: {
// interval: 0,
// show: true,
@ -628,65 +627,67 @@ export default {
},
yAxis: [
{
name: "单位:件",
name: '单位:件',
min: 0,
// max: 3500,
splitNumber: 7,
type: "value",
type: 'value',
nameTextStyle: {
padding: [10, 0, 10, 0],
color: "rgb(255,255,255,1)",
color: 'rgb(255,255,255,1)',
fontSize: 28,
left: 20,
left: 20
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(77, 128, 254, 0.4)",
width: 1,
},
type: 'dashed',
color: 'rgba(77, 128, 254, 0.4)',
width: 1
}
},
axisTick: {
show: true,
show: true
},
axisLine: {
show: false,
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(250,250,250,1)",
fontSize: 28,
},
},
},
color: 'rgba(250,250,250,1)',
fontSize: 28
}
}
}
],
series: [
{
name: "非敏感",
type: "bar",
name: '非敏感',
type: 'bar',
barWidth: 12,
itemStyle: {
normal: {
color: "#38c5ff",
},
color: '#38c5ff'
}
},
data: this.positiveOpinion,
data: this.positiveOpinion
// data: [70, 50, 70, 60, 30, 40, 70]
},
{
name: "敏感",
type: "bar",
name: '敏感',
type: 'bar',
barWidth: 12,
itemStyle: {
color: "#fc6a31",
},
data: this.negativeOpinion,
color: '#fc6a31'
},
],
};
myChart.setOption(options, true);
echartsJump(myChart, options);
data: this.negativeOpinion
// data: [30, 10, 70, 64, 60, 10, 20]
}
]
}
myChart.setOption(options, true)
echartsJump(myChart, options)
},
//
clickDetails(val, type) {

Loading…
Cancel
Save