suzhou-jichuang-lanhai
/
network-zz
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

切换

Browse Source
main
严飞永 3 weeks ago
parent 14ce9a036d
commit 0696bbacdd
3 changed files with 204 additions and 50 deletions
Show Stats Download Patch File Download Diff File

219
src/views/privateOrder/security/components/ReportingStatistics.vue
Unescape View File

@ -27,26 +27,26 @@
<!-- 通报 -->
<!-- <div v-if="announceCurrentIndex === 1"> -->
<div>
<div class="table_outside">
<!-- <div class="table_outside">
<div class="table_title">
<!-- <span class="title_one">部门名称</span>
<span class="title_two">通报次数</span> -->
<span class="title_one">部门名称</span>
<span class="title_two">通报次数</span>
<span class="title_one">单位名称</span>
<span class="title_two">积分</span>
</div>
<div>
<!-- <vue-seamless-scroll
<vue-seamless-scroll
:data="notificationList"
:class-option="classOption"
class="monitorScroll"
> -->
>
<div class="table_ctn">
<div
v-for="(item, index) in notificationList"
:key="index"
class="ctn_item"
@click="clickTop4(item)"
>
<!-- @click="clickTop4(item)" -->
<div class="item_icon">
{{ index + 1 }}
</div>
@ -56,9 +56,41 @@
<div class="item_num">{{ item.integral }}</div>
</div>
</div>
<!-- </vue-seamless-scroll> -->
</vue-seamless-scroll>
</div>
</div> -->
<div class="firewall-table" style="height: 100%;">
<div class="table-header">
<div class="header-cell" style="width: 220px">部门名称</div>
<div class="header-cell" style="width: 120px">通报次数</div>
<div class="header-cell" style="width: 170px">单位名称</div>
<div class="header-cell" style="width: 170px">积分</div>
</div>
<!-- vue-seamless-scroll
vue-seamless-scroll -->
<div :data="notificationList" :class-option="classOption" class="scroll-container">
<div class="table-body">
<div v-for="(item, index) in notificationList" :key="index" class="table-row"
:class="{ 'odd-row': index % 2 === 0 }" @click="clickTop4(item)">
<div class="cell" style="width: 220px">
<!-- <span>{{ item.integral }}</span> -->
<span>园区数据局</span>
</div>
<div class="cell" style="width: 120px">
<!-- <span>{{ item.integral }}</span> -->
<div class="item_icon">{{ index + 1 }}</div>
</div>
<div class="cell" style="width: 170px">
<div class="item_name" :title="item.unitName">{{ item.unitName }}</div>
</div>
<div class="cell" style="width: 170px">
<div class="item_icon">{{ index + 1 }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <el-dialog
v-if="dialogStatus"
@ -93,53 +125,27 @@
</span>
</span>
</el-dialog> -->
<el-dialog
v-if="dialogStatus2"
:title="'通报详情'"
class="screen-dialog"
:visible.sync="dialogStatus2"
width="1920px"
:modal-append-to-body="true"
center
:modal="false"
>
<div
style="
<el-dialog v-if="dialogStatus2" :title="'通报详情'" class="screen-dialog" :visible.sync="dialogStatus2" width="1920px"
:modal-append-to-body="true" center :modal="false">
<div style="
height: 740px;
overflow: auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
"
>
<div
v-if="fileExtension === 'docx' || fileExtension === 'doc'"
ref="file1"
class="file-content"
>
">
<div v-if="fileExtension === 'docx' || fileExtension === 'doc'" ref="file1" class="file-content">
<!-- <iframe style="height: 100%; width: 100%" :src="pdfUrl"></iframe> -->
</div>
<div
v-if="fileExtension === 'pdf'"
class="file-content"
style="height: 430px"
>
<div v-if="fileExtension === 'pdf'" class="file-content" style="height: 430px">
<!-- <iframe style="height: 100%; width: 100%" :src="pdfUrl"></iframe> -->
<pdf
v-for="i in numPages"
ref="pdf"
:key="i"
:src="pdfUrl"
:page="i"
></pdf>
<pdf v-for="i in numPages" ref="pdf" :key="i" :src="pdfUrl" :page="i"></pdf>
</div>
</div>
<span slot="footer" class="dialog-footer">
<span>
<el-button class="dialog-btn" @click="dialogStatus2 = false"
>关 闭</el-button
>
<el-button class="dialog-btn" @click="dialogStatus2 = false">关 闭</el-button>
</span>
</span>
</el-dialog>
@ -392,7 +398,7 @@ export default {
// dataBmtb().then((res) => {
// this.notificationList = res.data;
// });
listZcdwpm().then(res=>{
listZcdwpm().then(res => {
this.notificationList = res.rows;
})
},
@ -405,9 +411,8 @@ export default {
value: value.count,
percent: value.percentage.toFixed(2),
area: value.area,
img: require(`@/assets/privateOrder/general/${
index + 1 > 8 ? 1 : index + 1
}.png`),
img: require(`@/assets/privateOrder/general/${index + 1 > 8 ? 1 : index + 1
}.png`),
});
});
// this.inItPie();
@ -437,16 +442,95 @@ export default {
};
</script>
<style lang="scss" scoped>
.firewall-table {
width: 100%;
border-radius: 4px;
overflow: hidden;
margin-top: 20px;
height: 290px;
.table-header {
display: flex;
background-color: #1a3b6e;
background: url("~@/assets/privateOrder/general/背景表格头.png");
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: AlibabaPuHuiTiM;
.header-cell {
padding: 12px;
color: #ffffff;
font-size: 18px;
font-weight: normal;
flex: 1;
text-align: center;
}
}
.scroll-container {
height: 540px;
overflow: hidden;
}
.table-body {
width: 100%;
font-family: AlibabaPuHuiTiM;
.table-row {
display: flex;
background-color: black;
border-bottom: 1px solid #193859;
&:hover {
background-color: rgba(33, 150, 243, 0.1) !important;
}
&.odd-row {
background-color: rgba(18, 40, 69, 0.7);
background: url("~@/assets/privateOrder/general/背景表格斑马纹.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.cell {
padding: 12px;
color: #B9CCDF;
font-size: 16px;
flex: 1;
text-align: center;
font-family: AlibabaPuHuiTiR;
}
.violation-text {
color: #11D1E9;
font-family: DIN-Regular;
}
.number-text {
font-family: DIN-Regular;
}
.green-text {
color: #99F17A;
font-family: DIN-Regular;
}
}
}
}
.monitorScroll {
height: 280px;
width: 100%;
overflow: hidden;
margin-top: 15px;
}
::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;
@ -457,12 +541,14 @@ export default {
color: #ffffff;
}
}
//饼图
#pie1 {
width: 306px;
height: 307px;
transform: translate(11%, 11%);
}
.countpie {
width: 374px;
height: 374px;
@ -471,6 +557,7 @@ export default {
background: url("~@/assets/privateOrder/general/饼图-bg2.png");
background-size: 100% 100%;
}
.moduleCount {
height: 381px;
overflow: auto;
@ -481,26 +568,31 @@ export default {
margin-top: 20px;
justify-content: space-between;
align-content: flex-start;
.smallIcon {
margin-top: 28px;
height: 61px;
width: 143px;
display: flex;
.leftIcon {
margin-right: 5px;
}
.right_msg {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
height: 77px;
.Top_msg {
font-family: SourceHanSansCN-Medium;
font-size: 26px;
color: #b7dfff;
}
.bottom_msg {
font-family: DIN-Medium;
font-size: 30px;
@ -509,11 +601,13 @@ export default {
}
}
}
//部门
.table_outside {
width: 720px;
height: 350px;
margin-top: 18px;
.table_title {
width: 718px;
// height: 55px;
@ -528,9 +622,11 @@ export default {
// line-height: 20px;
line-height: 32px;
color: #a6d5ff;
.title_one {
margin-left: 77px;
}
.title_two {
margin-right: 25px;
}
@ -547,7 +643,8 @@ export default {
height: 75px;
margin: 15px 0;
background: url("~@/assets/privateOrder/general/first/部门通报tr-bg.png") no-repeat;
background-size:100% 100%;
background-size: 100% 100%;
.item_icon {
width: 38px;
height: 38px;
@ -557,6 +654,7 @@ export default {
line-height: 38px;
text-align: center;
}
.item_name {
width: 500px;
overflow: hidden;
@ -567,6 +665,7 @@ export default {
margin-left: 20px;
color: #ffffff;
}
.item_num {
font-family: PangMenZhengDao-3;
font-size: 32px;
@ -580,6 +679,7 @@ export default {
}
}
}
.screen-dialog {
.dialog-btn {
background: url("~@/assets/dialog/btn-bg.png") no-repeat;
@ -594,18 +694,22 @@ export default {
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);
}
::v-deep .el-dialog {
background: url("~@/assets/dialog/弹窗背景-一般.png") no-repeat;
//width: 1260px;
@ -613,12 +717,15 @@ export default {
//padding-top:20px;
background-size: 100% 100%;
}
::v-deep .el-dialog__headerbtn {
top: 0;
}
::v-deep .el-dialog__footer {
background: rgba(255, 255, 255, 0);
}
.dialogClose {
text-align: center;
width: 160px;
@ -636,10 +743,12 @@ export default {
color: #ffffff;
cursor: pointer;
}
.dialogClose:hover {
background: url("~@/assets/dialog/btn-bg-act.png") no-repeat 100% 100%;
}
}
//隐患处置
.dangerTitle {
//width: 720px;
@ -647,30 +756,37 @@ export default {
line-height: 55px;
margin-top: 13px;
background-color: #143458;
span {
font-family: SourceHanSansCN-Regular;
font-size: 26px;
color: #b7dfff;
}
span:nth-child(1) {
padding-left: 13px;
width: 510px;
}
span:nth-child(2) {
padding-left: 300px;
}
span:nth-child(3) {
padding-left: 300px;
}
span:nth-child(4) {
padding-left: 150px;
}
}
.dangerText {
//width: 719px;
height: 85px;
margin-top: 22px;
background-color: #6bb8ff21;
/* background-image: url("~@/assets/privateOrder/general/隐患处置-td-bg.png");
background-size: 100% 100%; */
span {
@ -683,6 +799,7 @@ export default {
font-size: 26px;
color: #ffffff;
}
span:nth-child(1) {
font-size: 26px;
padding-left: 16px;
@ -692,17 +809,21 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
}
span:nth-child(2) {
padding-left: 100px;
}
span:nth-child(3) {
padding-left: 260px;
}
span:nth-child(4) {
color: #fff36f;
padding-left: 180px;
}
}
.dialog-title {
text-align: center;
width: 956px;
@ -715,11 +836,13 @@ export default {
letter-spacing: 0;
color: #ffe850;
}
.dialog-explain {
margin-top: 39px;
height: 125px;
background: url("~@/assets/dialog/信息-bg.png") no-repeat 100% 100%;
}
.dialog-content {
width: 1073px;
max-height: 500px;
@ -732,11 +855,13 @@ export default {
letter-spacing: 2px;
color: #ffffff;
}
.file-content {
width: 1220px;
height: 370px;
transform: scale(1.5);
}
.screen-dialog ::-webkit-scrollbar {
width: 10px;
height: 10px;
@ -748,9 +873,11 @@ export default {
background: transparent !important;
padding: 0;
}
.file-content .docx {
width: 90% !important;
}
.file-content .docx p {
text-align: center !important;
}

6
src/views/privateOrder/security/components/attackSituation.vue
Unescape View File

@ -213,8 +213,8 @@ export default {
legend: {
orient: "vertical",
icon: "circle",
right: "-5%",
top: "0",
right: "-10%",
top: "10%",
itemGap: 17,
padding: 8,
formatter: (name) => {
@ -249,7 +249,7 @@ export default {
{
name: "分布情况",
type: "pie",
radius: ["35%", "80%"],
radius: ["55%", "80%"],
center: ["21.5%", "48.3%"],
avoidLabelOverlap: false,
label: {

29
src/views/privateOrder/security/components/componentRight.vue
Unescape View File

@ -241,7 +241,7 @@
</div>
</div>
<!-- 通报处置 -->
<div v-if="dangerCurrentIndex === 1">
<!-- <div v-if="dangerCurrentIndex === 1">
<div class="table_outside">
<div class="table_title">
<span class="title_one">单位名称</span>
@ -264,6 +264,30 @@
</vue-seamless-scroll>
</div>
</div>
</div> -->
<div v-if="dangerCurrentIndex === 1" class="firewall-table"style="height: 85%;">
<div class="table-header">
<div class="header-cell" style="width: 220px">单位名称</div>
<div class="header-cell" style="width: 120px">目标IP/域名</div>
<div class="header-cell" style="width: 170px">处置情况</div>
</div>
<vue-seamless-scroll :data="informList" :class-option="classOption" class="scroll-container">
<div class="table-body">
<div v-for="(item, index) in informList" :key="index" class="table-row"
:class="{ 'odd-row': index % 2 === 0 }" @click="rowDetails($event)">
<div class="cell" style="width: 220px">
<span :data-url="item.fileUrl">{{ item.unitName }}</span>
</div>
<div class="cell" style="width: 120px">
<span :data-url="item.fileUrl">{{ item.ipAddress }}</span>
</div>
<div class="cell yellownumb" style="width: 170px">
<span :data-url="item.fileUrl" >{{ item.czState }}</span>
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
</div>
</div>
@ -903,6 +927,9 @@ export default {
color: #99F17A;
font-family: DIN-Regular;
}
.yellownumb{
color: #fff36f;
}
}
}
}

Write Preview
Loading…
Cancel
Save