Merge branch 'lukeyan' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb into lukeyan
lukeyan
2 years ago
commit
823d8d42d1
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 47 KiB |
@ -0,0 +1,875 @@
|
|||||||
|
<template>
|
||||||
|
<div class="qyyg">
|
||||||
|
<div class="title" @click="showDialog"><img src="../../assets/safetyIndex/装饰009991.png" alt="">防攻击安全</div>
|
||||||
|
<div class="fangyiBox" v-if="staffStatisticsList && staffStatisticsList.length">
|
||||||
|
<div class="topBox">
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/企业人防达标.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ staffStatisticsList[0].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[0].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/企业物防达标.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ staffStatisticsList[1].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[1].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="topBox">
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/企业技防达标.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ staffStatisticsList[2].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[2].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/企业整改.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ staffStatisticsList[3].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[3].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomBox">
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/企业定期开展反恐实战演练、培训.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div class="changText">{{ staffStatisticsList[4].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[4].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog title="防攻击安全上报数据详情" :visible.sync="diaVisible" class="picForm">
|
||||||
|
<div class="xfsswh1" v-if="detailList.airDefenses && detailList.airDefenses.length">
|
||||||
|
<div class="tjsjTitle">企业人防达标情况</div>
|
||||||
|
<div class="zhuangshi"></div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/重要岗位人员是否进行安….png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ detailList.airDefenses[0].safeRuleName }}</div>
|
||||||
|
<div class="onlineStatus" v-if="detailList.airDefenses[0].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/应急力量是否匹配.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ detailList.airDefenses[1].safeRuleName }}</div>
|
||||||
|
<div class="onlineStatus" v-if="detailList.airDefenses[1].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/是否安排巡逻防控力量.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
|
||||||
|
<el-tooltip :content="detailList.airDefenses[2].safeRuleName" placement="bottom">
|
||||||
|
<div class="sjtexttext">{{ detailList.airDefenses[2].safeRuleName }}</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<div class="onlineStatus" v-if="detailList.airDefenses[2].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/是否安排人员24小时值班.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ detailList.airDefenses[3].safeRuleName }}</div>
|
||||||
|
<div class="onlineStatus" v-if="detailList.airDefenses[3].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/是否建立联防联动联治机制.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ detailList.airDefenses[4].safeRuleName }}</div>
|
||||||
|
<div class="onlineStatus" v-if="detailList.airDefenses[4].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/是否定期开展实战演练情况.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ detailList.airDefenses[5].safeRuleName }}</div>
|
||||||
|
<div class="onlineStatus" v-if="detailList.airDefenses[5].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="xfsswh" v-if="detailList.physicalDefenses && detailList.physicalDefenses.length">
|
||||||
|
<div class="tjsjTitle">企业技防达标情况</div>
|
||||||
|
<div class="zhuangshi"></div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/是否有实体防护措施.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ detailList.physicalDefenses[0].safeRuleName }}</div>
|
||||||
|
<div class="onlineStatus" v-if="detailList.physicalDefenses[0].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/是否配备必要的防爆器械.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ detailList.physicalDefenses[1].safeRuleName }}</div>
|
||||||
|
<div class="onlineStatus" v-if="detailList.physicalDefenses[1].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/车辆进出口是否安装冲撞….png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
|
||||||
|
<el-tooltip :content="detailList.physicalDefenses[2].safeRuleName" placement="bottom">
|
||||||
|
<div class="sjtexttext">{{ detailList.physicalDefenses[2].safeRuleName }}</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<div class="onlineStatus" v-if="detailList.physicalDefenses[2].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="xfsswh" v-if="detailList.technicalDefenses && detailList.technicalDefenses.length">
|
||||||
|
<div class="tjsjTitle">企业物防达标情况</div>
|
||||||
|
<div class="zhuangshi"></div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/是否全方位安装视屏监控….png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<el-tooltip :content="detailList.technicalDefenses[0].safeRuleName" placement="bottom">
|
||||||
|
<div class="sjtexttext">{{ detailList.technicalDefenses[0].safeRuleName }}</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<div class="onlineStatus" v-if="detailList.technicalDefenses[0].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/是否安装访客登记系统.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ detailList.technicalDefenses[1].safeRuleName }}</div>
|
||||||
|
<div class="onlineStatus" v-if="detailList.technicalDefenses[1].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/是否安装入侵和紧急报警….png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
|
||||||
|
<el-tooltip :content="detailList.technicalDefenses[2].safeRuleName" placement="bottom">
|
||||||
|
<div class="sjtexttext">{{ detailList.technicalDefenses[2].safeRuleName }}</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<div class="onlineStatus" v-if="detailList.technicalDefenses[2].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { preventSafety, preventSafetyDetail } from '@/api/companyCanban'
|
||||||
|
export default {
|
||||||
|
props: ['companyId'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
staffStatisticsList: [],
|
||||||
|
diaVisible: false,
|
||||||
|
companyID: this.companyId,
|
||||||
|
detailList: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getstaffStatistics()
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getstaffStatistics() {
|
||||||
|
preventSafety({ companyId: this.companyID }).then(res => {
|
||||||
|
this.staffStatisticsList = res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
showDialog() {
|
||||||
|
preventSafetyDetail({ companyId: this.companyID }).then(res => {
|
||||||
|
this.detailList = res.data
|
||||||
|
this.diaVisible = true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.qyyg {
|
||||||
|
height: 28.06%;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 33px;
|
||||||
|
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #D9E7FF;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fangyiBox {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 33px);
|
||||||
|
|
||||||
|
.topBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 33.33%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.sjItem {
|
||||||
|
width: 180px;
|
||||||
|
height: 55px;
|
||||||
|
background: url('~@/assets/companyCanban/7691备份.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.iconBox {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid rgba(64, 145, 169, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sjText {
|
||||||
|
width: 128px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.percent {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 1.12px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #2CFED3;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(44, 254, 211, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(33, 121, 195, 0.56);
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(183, 33, 33, 0.50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.outlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: #1C9980;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #FF2D2D;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(254, 67, 44, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(195, 33, 33, 0.56);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 33.33%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
.sjItem {
|
||||||
|
width: 380;
|
||||||
|
height: 55px;
|
||||||
|
background: url('~@/assets/companyCanban/7691备份.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.iconBox {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid rgba(64, 145, 169, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sjText {
|
||||||
|
width: 313px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.percent {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 1.12px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #2CFED3;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(44, 254, 211, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(33, 121, 195, 0.56);
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(183, 33, 33, 0.50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.outlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: #1C9980;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #FF2D2D;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(254, 67, 44, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(195, 33, 33, 0.56);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.picForm {
|
||||||
|
/deep/ .el-dialog {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
background: url('~@/assets/head/编组 3021112.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 841px;
|
||||||
|
height: 640px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #EBFFF4;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 15px;
|
||||||
|
height: 580px;
|
||||||
|
|
||||||
|
.xfsswh1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 233px;
|
||||||
|
margin: 10px 0;
|
||||||
|
background: url('~@/assets/companyCanban/09091.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.tjsjTitle {
|
||||||
|
position: absolute;
|
||||||
|
left: 14px;
|
||||||
|
top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FFE6D9;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhuangshi {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sjItem {
|
||||||
|
width: 250px;
|
||||||
|
height: 60px;
|
||||||
|
background: url('~@/assets/companyCanban/7691备份.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
.iconBox {
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
border: 1px solid rgba(64, 145, 169, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sjText {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 170px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap; //禁止换行
|
||||||
|
text-overflow: ellipsis; //...
|
||||||
|
|
||||||
|
.sjtexttext {
|
||||||
|
width: 170px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap; //禁止换行
|
||||||
|
text-overflow: ellipsis; //...
|
||||||
|
}
|
||||||
|
|
||||||
|
.percent {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 1.12px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #2CFED3;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(44, 254, 211, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(33, 121, 195, 0.56);
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(183, 33, 33, 0.50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.outlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: #1C9980;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #FF2D2D;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(254, 67, 44, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(195, 33, 33, 0.56);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.xfsswh {
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
margin: 10px 0;
|
||||||
|
background: url('~@/assets/companyCanban/09091.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tjsjTitle {
|
||||||
|
position: absolute;
|
||||||
|
left: 14px;
|
||||||
|
top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FFE6D9;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhuangshi {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sjItem {
|
||||||
|
width: 250px;
|
||||||
|
height: 60px;
|
||||||
|
background: url('~@/assets/companyCanban/7691备份.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
.iconBox {
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
border: 1px solid rgba(64, 145, 169, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sjText {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 170px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap; //禁止换行
|
||||||
|
text-overflow: ellipsis; //...
|
||||||
|
|
||||||
|
.sjtexttext {
|
||||||
|
width: 170px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap; //禁止换行
|
||||||
|
text-overflow: ellipsis; //...
|
||||||
|
}
|
||||||
|
|
||||||
|
.percent {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 1.12px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #2CFED3;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(44, 254, 211, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(33, 121, 195, 0.56);
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(183, 33, 33, 0.50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.outlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: #1C9980;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #FF2D2D;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(254, 67, 44, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(195, 33, 33, 0.56);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,699 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fangyi">
|
||||||
|
<div class="title" @click="showDialog"><img src="../../assets/safetyIndex/装饰009991.png" alt="">网络安全</div>
|
||||||
|
<div class="fangyiBox" v-if="staffStatisticsList && staffStatisticsList.length">
|
||||||
|
<div class="topBox">
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/漏洞整改.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ staffStatisticsList[0].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[0].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/行政案件.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ staffStatisticsList[1].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[1].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="topBox">
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/重大网络安全….png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ staffStatisticsList[2].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[2].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/网站应急系统….png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ staffStatisticsList[3].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[3].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="topBox">
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/等保顶级评审.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ staffStatisticsList[4].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[4].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/企业演习、培训.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ staffStatisticsList[5].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="staffStatisticsList[5].numValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog title="网络安全上报数据详情" :visible.sync="diaVisible" class="picForm">
|
||||||
|
<div class="kankuiBody">
|
||||||
|
<div class="topFankui" v-if="fangyiList.feedback && fangyiList.feedback.length">
|
||||||
|
<div class="topFankuiItem_green">
|
||||||
|
<div class="topText">{{ fangyiList.feedback[0].safeRuleName }}</div>
|
||||||
|
<div class="greenNum">{{ fangyiList.feedback[0].numValue }}</div>
|
||||||
|
<div class="dizuo"></div>
|
||||||
|
</div>
|
||||||
|
<div class="topFankuiItem_red">
|
||||||
|
<div class="topText">{{ fangyiList.feedback[1].safeRuleName }}</div>
|
||||||
|
<div class="greenNum">{{ fangyiList.feedback[1].numValue }}</div>
|
||||||
|
<div class="dizuo"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomFankui" v-if="fangyiList.networks && fangyiList.networks.length">
|
||||||
|
<div class="bottomFankuiItem">
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/漏洞整改.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ fangyiList.networks[0].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="fangyiList.networks[0].sumNumValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/行政案件.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ fangyiList.networks[1].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="fangyiList.networks[1].sumNumValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomFankuiItem">
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/重大网络安全事件.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ fangyiList.networks[2].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="fangyiList.networks[2].sumNumValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/网站应急系统备案.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ fangyiList.networks[3].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="fangyiList.networks[3].sumNumValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sjItem">
|
||||||
|
<div class="iconBox"><img src="../../assets/companyCanban/icon/等保顶级评审.png" alt=""></div>
|
||||||
|
<div class="sjText">
|
||||||
|
<div>{{ fangyiList.networks[4].levelIndexTwo }}</div>
|
||||||
|
<div class="onlineStatus" v-if="fangyiList.networks[4].sumNumValue == '是'">
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="outlineStatus" v-else>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { networkSafety, networkSafetyDetail } from '@/api/companyCanban'
|
||||||
|
export default {
|
||||||
|
props: ['companyId'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
companyID: this.companyId,
|
||||||
|
staffStatisticsList: [],
|
||||||
|
fangyiList: {},
|
||||||
|
diaVisible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
console.log(this.companyID, 'this.companyID');
|
||||||
|
networkSafety({ companyId: this.companyID }).then(res => {
|
||||||
|
this.staffStatisticsList = res.data
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showDialog() {
|
||||||
|
networkSafetyDetail({ companyId: this.companyID }).then(res => {
|
||||||
|
this.fangyiList = res.data
|
||||||
|
this.diaVisible = true
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.fangyi {
|
||||||
|
height: calc(37.94% - 40px);
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 33px;
|
||||||
|
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #D9E7FF;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fangyiBox {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 33px);
|
||||||
|
|
||||||
|
.topBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 33.33%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.sjItem {
|
||||||
|
width: 180px;
|
||||||
|
height: 55px;
|
||||||
|
background: url('~@/assets/companyCanban/7691备份.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.iconBox {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid rgba(64, 145, 169, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sjText {
|
||||||
|
width: 128px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.percent {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 1.12px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #2CFED3;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(44, 254, 211, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(33, 121, 195, 0.56);
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(183, 33, 33, 0.50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.outlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: #1C9980;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #FF2D2D;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(254, 67, 44, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(195, 33, 33, 0.56);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 33.33%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
.sjItem {
|
||||||
|
width: 380;
|
||||||
|
height: 55px;
|
||||||
|
background: url('~@/assets/companyCanban/7691备份.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.iconBox {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid rgba(64, 145, 169, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sjText {
|
||||||
|
width: 228px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.percent {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 1.12px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #2CFED3;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(44, 254, 211, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(33, 121, 195, 0.56);
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(183, 33, 33, 0.50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.outlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: #1C9980;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #FF2D2D;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(254, 67, 44, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(195, 33, 33, 0.56);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.picForm {
|
||||||
|
/deep/ .el-dialog {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
background: url('~@/assets/companyFile/背景2.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 811px;
|
||||||
|
height: 480px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #EBFFF4;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 420px;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
.kankuiBody {
|
||||||
|
background: url('~@/assets/companyCanban/09091.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.topFankui {
|
||||||
|
height: 180px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.topFankuiItem_green {
|
||||||
|
width: 180px;
|
||||||
|
height: 180px;
|
||||||
|
background: url('~@/assets/companyCanban/上_00000.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #DDFFF9;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
padding-top: 70px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.topText {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greenNum {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #13FFD4;
|
||||||
|
letter-spacing: 2.25px;
|
||||||
|
font-weight: 600;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dizuo {
|
||||||
|
width: 160px;
|
||||||
|
height: 70px;
|
||||||
|
background: url('~@/assets/companyCanban/底座2_00000.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topFankuiItem_red {
|
||||||
|
width: 180px;
|
||||||
|
height: 180px;
|
||||||
|
background: url('~@/assets/companyCanban/红色上_00000.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #DDFFF9;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
padding-top: 70px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.topText {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greenNum {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FF4646;
|
||||||
|
letter-spacing: 2.25px;
|
||||||
|
font-weight: 600;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dizuo {
|
||||||
|
width: 160px;
|
||||||
|
height: 70px;
|
||||||
|
background: url('~@/assets/companyCanban/底座红色_00000.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomFankui {
|
||||||
|
height: 200px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.bottomFankuiItem {
|
||||||
|
height: 50%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
|
||||||
|
.sjItem {
|
||||||
|
width: 200px;
|
||||||
|
height: 60px;
|
||||||
|
background: url('~@/assets/companyCanban/7691备份.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
.iconBox {
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
border: 1px solid rgba(64, 145, 169, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sjText {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.percent {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 1.12px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #2CFED3;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(44, 254, 211, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(33, 121, 195, 0.56);
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(183, 33, 33, 0.50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.outlineStatus {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 56px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: #1C9980;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #FF2D2D;
|
||||||
|
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 0px 8px 1px rgba(254, 67, 44, 0.65);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(195, 33, 33, 0.56);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue