commit
39cdf64d89
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 8.9 KiB |
@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<div class="pmwp">
|
||||
<div class="title"> 企业排名</div>
|
||||
<div class="more">更多>></div>
|
||||
<el-table :cell-style="{ background: 'revert' }" :data="fangkeList" class="table"
|
||||
style="width: calc(100% - 40px); margin:0 20px;" :row-style="tableRowStyle"
|
||||
:header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
|
||||
<el-table-column width="80" label="序号">
|
||||
<template slot-scope="scope">
|
||||
<div :class="{ 'yellow': scope.$index == 0, 'blue': scope.$index == 1, 'green': scope.$index == 2 }">
|
||||
NO.{{ scope.$index + 1 }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="companyName" label="企业名称">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="companyAddress" label="企业地址">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="emergencyContact" label="安全负责人" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="score" label="综合得分" width="90">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { topRanking } from '@/api/safetyIndex'
|
||||
export default {
|
||||
props: {
|
||||
scoreType: { type: String, default: 'month' }
|
||||
},
|
||||
data() {
|
||||
|
||||
return {
|
||||
staffStatisticsList: [],
|
||||
staffDetailList: [],
|
||||
listTotal: {},
|
||||
fangkeVisible: false,
|
||||
fangkepageSize: 10,
|
||||
fangkepageNum: 1,
|
||||
fangketotal: 0,
|
||||
fangkeList: [],
|
||||
wupinList: [],
|
||||
intotal: 0,
|
||||
outtotal: 0,
|
||||
ziyouTotal: 0,
|
||||
zulintotal: 0,
|
||||
goodsType: 0,
|
||||
fsyData: {},
|
||||
yzdData: {},
|
||||
yzbData: {},
|
||||
mbData: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getindexGoods()
|
||||
},
|
||||
watch: {
|
||||
'scoreType'(newVal) {
|
||||
topRanking({ scoreType: newVal }).then(res => {
|
||||
this.fangkeList = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tableRowStyle({ rowIndex }) {
|
||||
if ((rowIndex + 1) % 2 == 1) {
|
||||
return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0', 'height': '30px', 'cursor': ' pointer' }
|
||||
} else {
|
||||
return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff', 'height': '30px', 'cursor': ' pointer' }
|
||||
}
|
||||
},
|
||||
tableHeaderColor() {
|
||||
return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)', 'height': '30px' }
|
||||
// return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
|
||||
},
|
||||
tableHeaderCellColor() {
|
||||
return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff', 'height': '24px' }
|
||||
},
|
||||
fangkeSizeChange(val) {
|
||||
this.fangkepageNum = 1;
|
||||
this.fangkepageSize = val;
|
||||
this.getindexGoods(this.goodsType)
|
||||
},
|
||||
fangkeCurrentChange(val) {
|
||||
this.fangkepageNum = val;
|
||||
this.getindexGoods(this.goodsType)
|
||||
},
|
||||
getindexGoods() {
|
||||
topRanking({ scoreType: this.scoreType }).then(res => {
|
||||
this.fangkeList = res.data
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pmwp {
|
||||
height: calc(100% - 506px);
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
background: url('~@/assets/safetyIndex/主屏板块5.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 33px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
width: 60%;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
font-size: 16px;
|
||||
color: #D9E7FF;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
width: 90px;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
font-size: 16px;
|
||||
color: #D9E7FF;
|
||||
letter-spacing: 1px;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qyclBody {
|
||||
width: 100%;
|
||||
height: calc(100% - 33px);
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
.today {
|
||||
width: 100%;
|
||||
height: 23%;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
background: url('~@/assets/safetyIndex/99108881.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
|
||||
.todayChild {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid rgba(114, 155, 137, 0.48);
|
||||
|
||||
|
||||
.iconBox {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-left: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.iconmsg {
|
||||
margin-left: 10px;
|
||||
|
||||
width: 108px;
|
||||
height: 42px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.msgText {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #D0DEEE;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.msgNum {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
letter-spacing: 1.25px;
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
font-size: 19px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2.08px;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buySail {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.sailChild {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
|
||||
.buymsg {
|
||||
margin-left: 10px;
|
||||
|
||||
width: 108px;
|
||||
height: 42px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.msgText {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #D0DEEE;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.msgNum {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
letter-spacing: 1.25px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
|
||||
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
font-size: 19px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2.08px;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sailmsg {
|
||||
|
||||
margin-left: 10px;
|
||||
|
||||
width: 108px;
|
||||
height: 42px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.msgText {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #D0DEEE;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.msgNum {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
letter-spacing: 1.25px;
|
||||
line-height: 29;
|
||||
font-weight: 600;
|
||||
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
font-size: 19px;
|
||||
color: #FEF699;
|
||||
letter-spacing: 2.08px;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
/deep/.el-table {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
|
||||
td.el-table__cell {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding: 10px 0;
|
||||
|
||||
}
|
||||
|
||||
.xiangqing {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0;
|
||||
color: rgba(48, 196, 255, 0.7);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.staffPic {
|
||||
width: 19px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
color: #FEF699;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #66C3FF;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #19F7C3;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.el-input__inner {
|
||||
// background: url('~@/assets/companyFile/2121.png') no-repeat;
|
||||
background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: 1px solid rgba(40, 132, 126, 1);
|
||||
color: rgba(234, 246, 255, 0.7);
|
||||
;
|
||||
|
||||
.el-range-separator {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.el-range-input {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<div class="sjjr">
|
||||
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">数据接入</div>
|
||||
<div class="qyclBody">
|
||||
<div class="zonglei">
|
||||
<div class="zongleiTitle">接入总类</div>
|
||||
<div class="zongleiNum"><span>1234124</span> 条</div>
|
||||
</div>
|
||||
<div class="leixingBox">
|
||||
<div class="leixingItem">
|
||||
<div class="green">众智平台</div>
|
||||
<div class="greenText">1,1455</div>
|
||||
</div>
|
||||
<div class="leixingItem">
|
||||
<div class="blue">智能防控平台</div>
|
||||
<div class="blueText">3559</div>
|
||||
</div>
|
||||
<div class="leixingItem">
|
||||
<el-tooltip content="危化品道路运输监管平台" placement="top-start">
|
||||
<div class="yellow">危化品道路运...</div>
|
||||
</el-tooltip>
|
||||
<div class="yellowText">6707</div>
|
||||
</div>
|
||||
<div class="leixingItem">
|
||||
<div class="red">IRS</div>
|
||||
<div class="redText">8428</div>
|
||||
</div>
|
||||
<div class="leixingItem">
|
||||
<div class="green">警务百度</div>
|
||||
<div class="greenText">3,6059</div>
|
||||
</div>
|
||||
<div class="leixingItem">
|
||||
<div class="blue">派出所工作平台</div>
|
||||
<div class="blueText">3,1875</div>
|
||||
</div>
|
||||
<div class="leixingItem">
|
||||
<div class="yellow">110接处警平台</div>
|
||||
<div class="yellowText">2,0005</div>
|
||||
</div>
|
||||
<div class="leixingItem">
|
||||
<div class="red">...</div>
|
||||
<div class="redText">1,2732</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { indexGoods, indexGoodsDetail } from '@/api/safetyIndex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
staffStatisticsList: [],
|
||||
staffDetailList: [],
|
||||
listTotal: {},
|
||||
fangkeVisible: false,
|
||||
fangkepageSize: 10,
|
||||
fangkepageNum: 1,
|
||||
fangketotal: 0,
|
||||
fangkeList: [],
|
||||
wupinList: [],
|
||||
intotal: 0,
|
||||
outtotal: 0,
|
||||
ziyouTotal: 0,
|
||||
zulintotal: 0,
|
||||
goodsType: 0,
|
||||
fsyData: {},
|
||||
yzdData: {},
|
||||
yzbData: {},
|
||||
mbData: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getindexGoods()
|
||||
},
|
||||
methods: {
|
||||
tableRowStyle({ rowIndex }) {
|
||||
if ((rowIndex + 1) % 2 == 1) {
|
||||
return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
|
||||
} else {
|
||||
return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
|
||||
}
|
||||
},
|
||||
tableHeaderColor() {
|
||||
return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' }
|
||||
// return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
|
||||
},
|
||||
tableHeaderCellColor() {
|
||||
return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' }
|
||||
},
|
||||
fangkeSizeChange(val) {
|
||||
this.fangkepageNum = 1;
|
||||
this.fangkepageSize = val;
|
||||
this.showfangkeVisible(this.goodsType)
|
||||
},
|
||||
fangkeCurrentChange(val) {
|
||||
this.fangkepageNum = val;
|
||||
this.showfangkeVisible(this.goodsType)
|
||||
},
|
||||
getindexGoods() {
|
||||
indexGoods().then(res => {
|
||||
this.fangkeList = res.data
|
||||
this.fangkeList.forEach(item => {
|
||||
if (item.goodsType == 1) {
|
||||
this.fsyData = item
|
||||
} else if (item.goodsType == 2) {
|
||||
this.yzdData = item
|
||||
} else if (item.goodsType == 3) {
|
||||
this.yzbData = item
|
||||
} else if (item.goodsType == 4) {
|
||||
this.mbData = item
|
||||
}
|
||||
})
|
||||
console.log(this.fangkeList, 'this.fangkeList');
|
||||
})
|
||||
},
|
||||
showfangkeVisible(val) {
|
||||
this.goodsType = val
|
||||
indexGoodsDetail({ pageSize: this.fangkepageSize, pageNum: this.fangkepageNum, goodsType: this.goodsType }).then(res => {
|
||||
this.wupinList = res.data
|
||||
this.fangketotal = res.total
|
||||
this.fangkeVisible = true
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sjjr {
|
||||
height: 305px;
|
||||
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;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.qyclBody {
|
||||
width: 100%;
|
||||
height: calc(100% - 33px);
|
||||
padding: 15px 30px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.zonglei {
|
||||
box-sizing: border-box;
|
||||
width: 380px;
|
||||
height: 42px;
|
||||
background: url('~@/assets/safetyIndex/编组 38备份21.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.zongleiTitle {
|
||||
font-size: 16px;
|
||||
color: #D0DEEE;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.zongleiNum {
|
||||
font-size: 12px;
|
||||
color: #EBF9FF;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 400;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
color: #EBFFF8;
|
||||
letter-spacing: 2.5px;
|
||||
line-height: 37px;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
font-weight: 700
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leixingBox {
|
||||
width: 100%;
|
||||
height: calc(100% - 57px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.leixingItem {
|
||||
height: 50%;
|
||||
width: calc(25% - 10px);
|
||||
|
||||
.green {
|
||||
width: 67px;
|
||||
height: 67px;
|
||||
background: url('~@/assets/safetyIndex/绿色.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
padding: 17px;
|
||||
|
||||
line-height: 16.5px;
|
||||
font-size: 14px;
|
||||
color: rgba(235, 249, 255, 0.8);
|
||||
letter-spacing: 1.75px;
|
||||
font-weight: 700;
|
||||
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.greenText {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #40A996;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.blue {
|
||||
width: 67px;
|
||||
height: 67px;
|
||||
background: url('~@/assets/safetyIndex/蓝色.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
padding: 18px 5px;
|
||||
line-height: 16.5px;
|
||||
font-size: 12px;
|
||||
color: rgba(235, 249, 255, 0.8);
|
||||
letter-spacing: 1.75px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.blueText {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #5F99E6;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
width: 67px;
|
||||
height: 67px;
|
||||
background: url('~@/assets/safetyIndex/黄色.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
padding: 18px 5px;
|
||||
line-height: 16.5px;
|
||||
font-size: 10px;
|
||||
color: rgba(235, 249, 255, 0.8);
|
||||
letter-spacing: 1.75px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.yellowText {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #E6B25F;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.red {
|
||||
width: 67px;
|
||||
height: 67px;
|
||||
background: url('~@/assets/safetyIndex/红色.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
padding: 17px;
|
||||
line-height: 33px;
|
||||
font-size: 20px;
|
||||
color: rgba(235, 249, 255, 0.8);
|
||||
letter-spacing: 1.75px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.redText {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: #FF7272;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div class="yjcz">
|
||||
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">企业员工</div>
|
||||
<div class="yujing">
|
||||
<div class="drbj">
|
||||
<div>当日报警</div>
|
||||
<span>{{ statisticsList.todayAlarmSum }}</span>
|
||||
</div>
|
||||
<div class="zyj">
|
||||
<div>总预警</div>
|
||||
<span>{{ statisticsList.alarmSum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chuzhi">
|
||||
<div class="chuzhiItem">
|
||||
<div class="blue"></div>
|
||||
<div class="chuhzhi">
|
||||
当日处置
|
||||
<div>
|
||||
{{ statisticsList.todayDealSum }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chuzhiItem">
|
||||
<div class="yellow"></div>
|
||||
<div class="chuhzhi">
|
||||
处置中
|
||||
<div>
|
||||
{{ statisticsList.dealing }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chuzhiItem">
|
||||
<div class="green"></div>
|
||||
<div class="chuhzhi">
|
||||
处置完成
|
||||
<div>
|
||||
{{ statisticsList.dealCompleted }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tuisong">
|
||||
<div class="todayChild">
|
||||
<div class="iconBox"><img src="../../assets/safetyIndex/推送政务数量21.png" alt=""></div>
|
||||
<div class="iconmsg">
|
||||
<div class="msgText">推送政务数量</div>
|
||||
<div class="msgNum"><span>{{ statisticsList.pushGovernment }}/{{
|
||||
statisticsList.pushGovernmentSum }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tsCompany">
|
||||
<div class="iconBox"><img src="../../assets/safetyIndex/推送企业数量21.png" alt=""></div>
|
||||
<div class="iconmsg">
|
||||
<div class="msgText">推送企业数量</div>
|
||||
<div class="msgNum"><span>{{ statisticsList.pushCompany }}/{{ statisticsList.pushCompanySum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { statistics } from '@/api/safetyIndex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statisticsList: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
statistics().then(res => {
|
||||
this.statisticsList = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.yjcz {
|
||||
height: 290px;
|
||||
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;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.yujing {
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.drbj {
|
||||
width: 190px;
|
||||
height: 100%;
|
||||
background: url('~@/assets/safetyIndex/背景（当日报警）.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 16px;
|
||||
color: #FFE3E3;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
color: #FFE3E3;
|
||||
letter-spacing: 1px;
|
||||
line-height: 22px;
|
||||
text-shadow: 0 0 9px rgba(255, 87, 87, 0.88);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.zyj {
|
||||
width: 190px;
|
||||
height: 100%;
|
||||
background: url('~@/assets/safetyIndex/总预警21.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 16px;
|
||||
color: #FFE3E3;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
color: #FFFBE3;
|
||||
letter-spacing: 1px;
|
||||
line-height: 22px;
|
||||
text-shadow: 0 0 9px rgba(255, 216, 87, 0.88);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chuzhi {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
margin-top: 20px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.chuzhiItem {
|
||||
width: calc(33% - 11px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.blue {
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
opacity: 0.6;
|
||||
background: #66C3FF;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
opacity: 0.6;
|
||||
background: #FEF699;
|
||||
}
|
||||
|
||||
.green {
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
opacity: 0.6;
|
||||
background: #19F7C3;
|
||||
|
||||
}
|
||||
|
||||
.chuhzhi {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: calc(100% - 3px);
|
||||
padding-left: 14px;
|
||||
padding-top: 19px;
|
||||
background: rgba(108, 151, 149, 0.16);
|
||||
border: 1px solid rgba(73, 84, 97, 0.8);
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
letter-spacing: 0;
|
||||
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
|
||||
div {
|
||||
margin-top: 13px;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 1px;
|
||||
line-height: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tuisong {
|
||||
width: calc(100% - 40px);
|
||||
height: 63px;
|
||||
margin: 20px 20px 0;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-around;
|
||||
background: url('~@/assets/safetyIndex/99108881.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
|
||||
.todayChild {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid rgba(114, 155, 137, 0.48);
|
||||
|
||||
|
||||
.iconBox {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-left: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.iconmsg {
|
||||
margin-left: 10px;
|
||||
|
||||
width: 108px;
|
||||
height: 42px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.msgText {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #D0DEEE;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.msgNum {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
letter-spacing: 1.25px;
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
font-size: 19px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2.08px;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tsCompany {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid rgba(114, 155, 137, 0.48);
|
||||
|
||||
|
||||
.iconBox {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-left: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.iconmsg {
|
||||
margin-left: 10px;
|
||||
|
||||
width: 108px;
|
||||
height: 42px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.msgText {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #D0DEEE;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.msgNum {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
letter-spacing: 1.25px;
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
font-size: 19px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2.08px;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue