网络走势图

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

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

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

@ -50,12 +50,25 @@ export default {
data() { data() {
return { return {
tagList: [], 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() { mounted() {
this.getDataList(); this.init();
this.animate();
}, },
methods: { methods: {
getDataList() { getDataList() {
@ -66,8 +79,6 @@ export default {
count: 3, count: 3,
}); });
}); });
this.init();
this.animate();
}); });
}, },
init() { init() {

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

Loading…
Cancel
Save