<template>
|
<div class="home">
|
<div class="home_total">
|
<div class="home_total_head">在厂人员总览</div>
|
<div class="home_total_list">
|
<div class="home_total_list_item a">
|
<span>{{head && head.workerCount ? head.workerCount : 0}}</span>
|
<span>内部员工</span>
|
</div>
|
<div class="home_total_list_item b">
|
<span>{{head && head.visitorCount ? head.visitorCount : 0}}</span>
|
<span>访客</span>
|
</div>
|
<div class="home_total_list_item c">
|
<span>{{head && head.lwCount ? head.lwCount : 0}}</span>
|
<span>劳务人员</span>
|
</div>
|
<div class="home_total_list_item d">
|
<span>{{head && head.presenceCarCount ? head.presenceCarCount : 0}}</span>
|
<span>在场车辆</span>
|
</div>
|
<div class="home_total_list_item e">
|
<span>{{head && head.longCarCount ? head.longCarCount : 0}}</span>
|
<span>长期车辆</span>
|
</div>
|
<div class="home_total_list_item f">
|
<span>{{head && head.visitorCarCount ? head.visitorCarCount : 0}}</span>
|
<span>预约车辆</span>
|
</div>
|
<div class="home_total_list_item g">
|
<span>{{head && head.supplierCount ? head.supplierCount : 0}}</span>
|
<span>供应商</span>
|
</div>
|
</div>
|
</div>
|
<div class="home_charts">
|
<div class="home_charts_item">
|
<div class="home_charts_item_label">在厂人员占比</div>
|
<div class="home_charts_item_charts" id="chart1"></div>
|
</div>
|
<div class="home_charts_item">
|
<div class="home_charts_item_label">劳务人员分布总览</div>
|
<div class="home_charts_item_charts" id="chart2"></div>
|
</div>
|
</div>
|
<div class="home_table">
|
<div class="home_table_head">超时预警人员({{total}})</div>
|
<div class="home_table_box">
|
<el-table
|
:data="list"
|
:header-cell-style="{background: '#dcdde2', color: 'rgb(51, 51, 51)'}"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="name"
|
label="访客姓名">
|
</el-table-column>
|
<el-table-column
|
prop="phone"
|
label="访客电话">
|
</el-table-column>
|
<el-table-column
|
prop="companyName"
|
label="访客公司">
|
</el-table-column>
|
<el-table-column
|
label="人员类型">
|
<template slot-scope="{row}">
|
<span v-if="row.type === 0">劳务访客</span>
|
<span v-if="row.type === 1">普通访客</span>
|
<span v-if="row.type === 2">内部人员</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="outDate"
|
label="授权到期时间">
|
</el-table-column>
|
<el-table-column
|
label="状态">
|
<template slot-scope="{row}">
|
<span v-if="row.outStatus === 0">未超时</span>
|
<span style="color: red;" v-if="row.outStatus === 1">已超时</span>
|
<span v-if="row.outStatus === 2">即将超时</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="处理"
|
width="80">
|
<template slot-scope="scope">
|
<el-button type="text" @click="departure(scope.row.id)" v-if="scope.row.outStatus === 1">离厂</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
style="margin-top: 20px;"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-size="10"
|
layout="total, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
import { body, head, timeoutPage, level } from '@/api/business/staging'
|
export default {
|
name: 'Index',
|
data () {
|
return {
|
head: null,
|
list: [],
|
total: 0,
|
data1: [],
|
data2: [[],[]],
|
page: 1
|
}
|
},
|
created () {
|
this.getHeader()
|
this.getData()
|
},
|
mounted () {
|
// this.getcharts2()
|
},
|
methods: {
|
departure(id) {
|
this.$confirm('确定离场吗, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
level(id)
|
.then(res => {
|
this.page = 1
|
this.getData()
|
})
|
}).catch(() => {
|
|
});
|
},
|
getData() {
|
timeoutPage({
|
capacity: 10,
|
page: this.page,
|
model: {}
|
}).then(res => {
|
this.list = res.records
|
this.total = res.total
|
})
|
},
|
getHeader() {
|
head().then(res => {
|
this.head = res
|
})
|
body().then(res => {
|
this.data1 = res.retentionUsers.map(item => {
|
let name = ''
|
if (item.memberType === 0) {
|
name = '劳务访客'
|
} else if (item.memberType === 1) {
|
name = '普通访客'
|
} else if (item.memberType === 2) {
|
name = '内部员工'
|
}
|
return {
|
value: item.memberCount,
|
name
|
}
|
})
|
let arr1 = res.companyUsers.map(item => item.companyName)
|
let arr2 = res.companyUsers.map(item => item.memberCount)
|
if (arr1.length > 0) {
|
this.data2 = [arr1, arr2]
|
this.getcharts2()
|
}
|
this.getcharts1()
|
})
|
},
|
handleCurrentChange (page) {
|
this.page = page
|
this.getData()
|
},
|
getcharts1 () {
|
const myChart = echarts.init(document.getElementById('chart1'))
|
// 绘制图表
|
myChart.setOption({
|
tooltip: {
|
trigger: 'item'
|
},
|
grid: {
|
bottom: '5%',
|
top: '5%'
|
},
|
legend: {
|
bottom: '0%',
|
left: 'center',
|
icon: 'circle'
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: ['40%', '70%'],
|
label: {
|
formatter: '{b} {d}%'
|
},
|
data: this.data1,
|
itemStyle: {
|
normal: {
|
color: function (colors) {
|
var colorList = [
|
'#fc8251',
|
'#5470c6',
|
'#91cd77'
|
]
|
return colorList[colors.dataIndex]
|
}
|
}
|
},
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
})
|
},
|
getcharts2 () {
|
const myChart = echarts.init(document.getElementById('chart2'))
|
myChart.setOption({
|
tooltip: {
|
trigger: 'item'
|
},
|
grid: {
|
bottom: '5%',
|
top: '5%'
|
},
|
xAxis: {
|
max: 'dataMax'
|
},
|
yAxis: {
|
type: 'category',
|
data: this.data2[0]
|
},
|
series: [
|
{
|
realtimeSort: true,
|
type: 'bar',
|
data: this.data2[1],
|
itemStyle: {
|
normal: {
|
color: '#fc8251'
|
}
|
}
|
}
|
]
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/assets/style/variables.scss";
|
.home {
|
width: 100%;
|
.home_table {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
background: #ffffff;
|
margin-top: 20px;
|
.home_table_head {
|
font-size: 16px;
|
font-weight: 600;
|
color: black;
|
}
|
.home_table_box {
|
width: 100%;
|
margin-top: 15px;
|
}
|
}
|
.home_charts {
|
width: 100%;
|
margin-top: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.home_charts_item {
|
padding: 20px;
|
box-sizing: border-box;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
margin-right: 20px;
|
background: #ffffff;
|
.home_charts_item_label {
|
font-size: 16px;
|
font-weight: 600;
|
color: black;
|
}
|
.home_charts_item_charts {
|
width: 100%;
|
height: 300px;
|
}
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
.home_total {
|
width: 100%;
|
background: #ffffff;
|
margin-top: 20px;
|
.home_total_head {
|
width: 100%;
|
font-size: 16px;
|
font-weight: 600;
|
color: black;
|
padding: 10px 20px;
|
box-sizing: border-box;
|
border-bottom: 1px solid #ececec;
|
}
|
.home_total_list {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
.a {
|
border-left: 5px solid rgba(129, 211, 248, 1) !important;
|
}
|
.b {
|
border-left: 5px solid rgba(236, 128, 141, 1) !important;
|
}
|
.c {
|
border-left: 5px solid rgba(250, 205, 145, 1) !important;
|
}
|
.d {
|
border-left: 5px solid rgba(245, 154, 35, 1) !important;
|
}
|
.e {
|
border-left: 5px solid rgba(128, 128, 255, 1) !important;
|
}
|
.f {
|
border-left: 5px solid rgba(202, 249, 130, 1) !important;
|
}
|
.g {
|
border-left: 5px solid rgba(194, 128, 255, 1) !important;
|
}
|
.home_total_list_item {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: center;
|
height: 80px;
|
border-radius: 5px;
|
border: 1px solid #ececec;
|
margin-right: 15px;
|
&:last-child {
|
margin: 0 !important;
|
}
|
span {
|
&:first-child {
|
font-weight: 500;
|
font-size: 24px;
|
color: black;
|
}
|
&:last-child {
|
font-weight: 400;
|
font-size: 14px;
|
color: #666666;
|
margin-top: 2px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
