xuhaoyun
1 year ago
parent
5df3be065f
commit
854d23fce5
|
After Width: | Height: | Size: 728 B |
|
After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 673 B |
|
After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 1007 B After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 651 B |
@ -0,0 +1,540 @@
|
||||
<template>
|
||||
<div class="qyyg">
|
||||
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">企业员工</div>
|
||||
<div class="zongshu" @click="showVisible()">
|
||||
<div class="text4">员工总数</div>
|
||||
<div class="numberTotal"><span>{{ listTotal.number }}</span>人</div>
|
||||
</div>
|
||||
<div class="ygtb" id="ygtb">
|
||||
</div>
|
||||
<div class="bottomBtns">
|
||||
<div class="fangke" @click="showfangkeVisible()">
|
||||
<div class="iconBox"><img src="../../assets/safetyIndex/访客icon.png" alt=""></div>
|
||||
<div class="iconNum">
|
||||
<div class="iconName">访客</div>
|
||||
<div class="number1">1200</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fangke" @click="showliudongVisible()">
|
||||
<div class="iconBox"><img src="../../assets/safetyIndex/流动人员icon.png" alt=""></div>
|
||||
<div class="iconNum">
|
||||
<div class="iconName">流动人员</div>
|
||||
<div class="number1">700</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="详情" :visible.sync="diaVisible" class="picForm">
|
||||
<el-table :cell-style="{ background: 'revert' }" :data="staffDetailList" class="table"
|
||||
style="width: calc(100% - 40px); margin:0 20px;" :row-style="tableRowStyle"
|
||||
:header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
|
||||
<el-table-column show-overflow-tooltip label="照片" width="50">
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.picUrl" alt="" class="staffPic">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="staffName" label="姓名" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="identityId" label="身份证号" width="160">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="homeAddress" label="家庭住址">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="companyName" label="所属企业">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block">
|
||||
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
|
||||
@size-change="SizeChange" @current-change="CurrentChange" :current-page="detailpageNum"
|
||||
:page-sizes="[8]" layout="total, sizes, prev, pager, next, jumper" :total="detailtotal">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog title="访客详情" :visible.sync="fangkeVisible" class="fangkeForm">
|
||||
<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 show-overflow-tooltip label="照片" width="50">
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.picUrl" alt="" class="staffPic">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="visitName" label="访客姓名" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="identityId" label="身份证号">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="visitContactInfo" label="联系方式">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="visitTime" label="访问时间">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="contactPerson" label="对接人" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="contactInfo" label="对接人联系方式">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block">
|
||||
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
|
||||
@size-change="fangkeSizeChange" @current-change="fangkeCurrentChange" :current-page="fangkepageNum"
|
||||
:page-sizes="[8]" layout="total, sizes, prev, pager, next, jumper" :total="fangketotal">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog title="流动人员详情" :visible.sync="liudongVisible" class="picForm">
|
||||
<el-table :cell-style="{ background: 'revert' }" :data="liudongList" class="table"
|
||||
style="width: calc(100% - 40px); margin:0 20px;" :row-style="tableRowStyle"
|
||||
:header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
|
||||
<el-table-column show-overflow-tooltip label="照片" width="50">
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.picUrl" alt="" class="staffPic">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="flowName" label="姓名" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="identityId" label="身份证号" width="160">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="contactInfo" label="联系方式">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="companyName" label="所属企业">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block">
|
||||
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
|
||||
@size-change="liudongSizeChange" @current-change="liudongCurrentChange" :current-page="liudongpageNum"
|
||||
:page-sizes="[8]" layout="total, sizes, prev, pager, next, jumper" :total="liudongtotal">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import "echarts-gl";
|
||||
import { staffStatistics, staffDetail, visitDetail, flowDetail } from '@/api/safetyIndex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
staffStatisticsList: [],
|
||||
staffDetailList: [],
|
||||
listTotal: {},
|
||||
diaVisible: false,
|
||||
DetailpageSize: 8,
|
||||
detailpageNum: 1,
|
||||
detailtotal: 0,
|
||||
fangkeVisible: false,
|
||||
fangkepageSize: 8,
|
||||
fangkepageNum: 1,
|
||||
fangketotal: 0,
|
||||
fangkeList: [],
|
||||
liudongList: [],
|
||||
liudongVisible: false,
|
||||
liudongpageSize: 8,
|
||||
liudongpageNum: 1,
|
||||
liudongtotal: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getstaffStatistics()
|
||||
|
||||
},
|
||||
methods: {
|
||||
getstaffStatistics() {
|
||||
staffStatistics().then(res => {
|
||||
this.staffStatisticsList = res.data.filter(item => {
|
||||
return item.type != '全部'
|
||||
})
|
||||
this.listTotal = res.data.filter(item => {
|
||||
return item.type == '全部'
|
||||
})[0]
|
||||
this.initygtb()
|
||||
})
|
||||
},
|
||||
initygtb() {
|
||||
let myChart = echarts.init(document.getElementById("ygtb"));
|
||||
const colors = ['#66C3FF', '#FEF699', '#19F7C3', '#E4FEF0', '#ADF1FF']
|
||||
|
||||
let data = []
|
||||
this.staffStatisticsList.forEach((item, index) => {
|
||||
data.push({
|
||||
value: item.number, name: item.type, itemStyle: { color: colors[index], }
|
||||
})
|
||||
})
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '20%',
|
||||
right: '5%',
|
||||
padding: [5, 10],
|
||||
itemWidth: 6,
|
||||
itemHeight: 6,
|
||||
backgroundColor: 'rgba(108,128,151,0.2)',
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
color: "#D0DEEE",
|
||||
lineHeight: 10,
|
||||
padding: [3, 0, 3, 0],
|
||||
width: 120,
|
||||
height: 20,
|
||||
},
|
||||
b: {
|
||||
color: "#FFFFF",
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
padding: [3, 0, 3, 0],
|
||||
width: 120,
|
||||
height: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: function (name) {
|
||||
var percent = 0;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].name == name) {
|
||||
percent = data[i].value
|
||||
}
|
||||
}
|
||||
return "{a|" + name + "}" + "{b|" + percent + "}";
|
||||
},
|
||||
},
|
||||
graphic: [{
|
||||
type: 'image', // 插入圆环中间的图片
|
||||
style: {
|
||||
image: require('../../assets/safetyIndex/89771.png'), // 本地图片要用require引入
|
||||
width: 90, // 设置图片大小
|
||||
height: 90
|
||||
},
|
||||
// 设置图片位置
|
||||
top: "22.8%",
|
||||
left: "9.3%",
|
||||
},],
|
||||
backgroundColor: 'rgba(255,255,255,0)',
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['55%', '70%'],
|
||||
top: "middle",
|
||||
left: "left",
|
||||
width: 190,
|
||||
height: 190,
|
||||
center: ['45%', '50%'],
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
borderColor: 'rgba(255,255,255,0)',
|
||||
borderWidth: 5
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
data
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
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' }
|
||||
},
|
||||
SizeChange(val) {
|
||||
this.detailpageNum = 1;
|
||||
this.DetailpageSize = val;
|
||||
this.showVisible()
|
||||
},
|
||||
CurrentChange(val) {
|
||||
this.detailpageNum = val;
|
||||
this.showVisible()
|
||||
},
|
||||
fangkeSizeChange(val) {
|
||||
this.fangkepageNum = 1;
|
||||
this.fangkepageSize = val;
|
||||
this.showfangkeVisible()
|
||||
},
|
||||
fangkeCurrentChange(val) {
|
||||
this.fangkepageNum = val;
|
||||
this.showfangkeVisible()
|
||||
},
|
||||
liudongSizeChange(val) {
|
||||
this.liudongpageNum = 1;
|
||||
this.liudongpageSize = val;
|
||||
this.showliudongVisible()
|
||||
},
|
||||
liudongCurrentChange(val) {
|
||||
this.liudongpageNum = val;
|
||||
this.showliudongVisible()
|
||||
},
|
||||
showVisible() {
|
||||
staffDetail({ pageSize: this.DetailpageSize, pageNum: this.detailpageNum }).then(res => {
|
||||
this.staffDetailList = res.data
|
||||
this.detailtotal = res.total
|
||||
this.diaVisible = true
|
||||
})
|
||||
},
|
||||
showliudongVisible() {
|
||||
flowDetail({ pageSize: this.liudongpageSize, pageNum: this.liudongpageNum }).then(res => {
|
||||
this.liudongList = res.data
|
||||
this.liudongtotal = res.total
|
||||
this.liudongVisible = true
|
||||
})
|
||||
},
|
||||
showfangkeVisible() {
|
||||
visitDetail({ pageSize: this.fangkepageSize, pageNum: this.fangkepageNum }).then(res => {
|
||||
this.fangkeList = res.data
|
||||
this.fangketotal = res.total
|
||||
this.fangkeVisible = true
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.qyyg {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.zongshu {
|
||||
width: 400px;
|
||||
height: 33px;
|
||||
margin: 12px 20px;
|
||||
background: url('~@/assets/safetyIndex/7691.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.text4 {
|
||||
font-size: 16px;
|
||||
color: #D0DEEE;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.numberTotal {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ygtb {
|
||||
height: calc(100% - 130px);
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.bottomBtns {
|
||||
height: 37px;
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: url('~@/assets/safetyIndex/7691备份.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.fangke {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.iconBox {
|
||||
background: url('~@/assets/safetyIndex/Target 03_00000.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.iconNum {
|
||||
margin-left: 10px;
|
||||
width: 40%;
|
||||
height: 33px;
|
||||
|
||||
.iconName {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
letter-spacing: 0;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.number1 {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
font-size: 15px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 1px;
|
||||
line-height: 22px;
|
||||
vertical-align: middle;
|
||||
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fangke:last-child {
|
||||
border-left: 1px solid #6C8097;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 360px;
|
||||
|
||||
.scopeQuantity {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fangkeForm {
|
||||
/deep/ .el-dialog {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background: url('~@/assets/head/编组 3021112.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 1241px;
|
||||
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;
|
||||
height: 360px;
|
||||
|
||||
.scopeQuantity {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.el-table {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
|
||||
td.el-table__cell {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.xiangqing {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0;
|
||||
color: rgba(48, 196, 255, 0.7);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.staffPic {
|
||||
width: 19px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/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