Merge branch 'lukeyan' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb into lukeyan
lukeyan
1 year 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