xuhaoyun
1 year ago
parent
85e584228e
commit
ad674de07e
@ -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>
|
||||
Loading…
Reference in new issue