<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>352</span>
|
<span>内部员工</span>
|
</div>
|
<div class="home_total_list_item b">
|
<span>352</span>
|
<span>访客</span>
|
</div>
|
<div class="home_total_list_item c">
|
<span>352</span>
|
<span>劳务人员</span>
|
</div>
|
<div class="home_total_list_item d">
|
<span>352</span>
|
<span>在场车辆</span>
|
</div>
|
<div class="home_total_list_item e">
|
<span>352</span>
|
<span>访客车辆</span>
|
</div>
|
<div class="home_total_list_item f">
|
<span>352</span>
|
<span>劳务车辆</span>
|
</div>
|
<div class="home_total_list_item g">
|
<span>352</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">超时预警人员(3)</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="date"
|
label="访客姓名">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="访客电话">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="访客公司">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="公司类型">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="授权到期时间">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="状态">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="处理"
|
width="80">
|
<template slot-scope="scope">
|
<el-button type="text">离场</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
style="margin-top: 20px;"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[100, 200, 300, 400]"
|
:page-size="100"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="400">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
export default {
|
name: 'Index',
|
data () {
|
return {
|
list: [],
|
page: 1
|
}
|
},
|
mounted () {
|
this.getcharts1()
|
this.getcharts2()
|
},
|
methods: {
|
handleSizeChange () {
|
|
},
|
handleCurrentChange () {
|
|
},
|
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: [
|
{ value: 1048, name: '劳务人员' },
|
{ value: 735, name: '内部员工' },
|
{ value: 580, name: '访客' }
|
],
|
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: ['海康威视', '农业有限公司', '字幕也有限公司', '万达股份有限公司', '阿里巴巴集团有限公司', '腾讯集团有限公司']
|
},
|
series: [
|
{
|
realtimeSort: true,
|
type: 'bar',
|
data: [1, 2, 3, 4, 5, 6],
|
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>
|
