1498 lines
44 KiB
Vue
1498 lines
44 KiB
Vue
<template>
|
||
<div class="personnelOverview">
|
||
<div class="content1 flex">
|
||
<div class="PersonnelType_wrap whiteBlock">
|
||
<div class="flex title_wrap" style="margin-bottom: 18px">
|
||
<div class="pageTitle" style="margin-bottom: 0">
|
||
{{ $t('message.POverview.crew') }}{{ $t('message.POverview.type')
|
||
}}{{ $t('message.POverview.statistics') }}
|
||
</div>
|
||
<div class="flex3">
|
||
<div class="headcount">
|
||
{{ $t('message.POverview.totalNumber') }}：{{ totalPersonNum }}
|
||
</div>
|
||
<div class="headcount">
|
||
{{
|
||
$t('message.POverview.today') +
|
||
$t('message.POverview.attendanceNumber')
|
||
}}：{{ attendancePersonNum }}
|
||
</div>
|
||
<div class="headcount">
|
||
{{
|
||
$t('message.POverview.today') +
|
||
$t('message.POverview.presentNumber')
|
||
}}：{{ presencePersonNum }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="echarts" ref="personnelType"></div>
|
||
</div>
|
||
<div class="manager_wrap whiteBlock">
|
||
<div class="title_wrap">
|
||
<div class="pageTitle">
|
||
<!-- {{ $t("message.POverview.managerialCertificate")
|
||
}}{{ $t("message.POverview.statistics") }} -->
|
||
{{ this.$t('message.laborMange.companyAttendanceRanking') }}
|
||
</div>
|
||
</div>
|
||
<div class="echarts" ref="ageChart"></div>
|
||
<!-- <div class="echarts" ref="manager"></div> -->
|
||
</div>
|
||
<div class="safety_training whiteBlock">
|
||
<div class="title_wrap">
|
||
<div class="pageTitle">
|
||
{{ $t('message.POverview.safetyTraining')
|
||
}}{{ $t('message.POverview.statistics') }}
|
||
</div>
|
||
</div>
|
||
<div class="echarts" ref="safetyTraining"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content2 flex">
|
||
<div class="real_time whiteBlock">
|
||
<div class="title_wrap flex">
|
||
<div class="pageTitle">
|
||
{{ $t('message.POverview.crew')
|
||
}}{{ $t('message.POverview.realTimeDynamic') }}
|
||
</div>
|
||
<el-button
|
||
type="text"
|
||
style="margin-right: 18px"
|
||
@click="getAddCrewRealTime"
|
||
>
|
||
{{ $t('message.POverview.more') }}
|
||
<i class="el-icon-d-arrow-right"></i>
|
||
</el-button>
|
||
</div>
|
||
<div
|
||
class="echarts"
|
||
ref="realTime"
|
||
style="padding: 0 0 20px 0; box-sizing: border-box"
|
||
>
|
||
<vue-scroll class="scroll">
|
||
<el-table
|
||
:data="crewRealTimeList"
|
||
style="width: 100%"
|
||
:show-header="false"
|
||
>
|
||
<el-table-column
|
||
prop="passType"
|
||
:label="$t('message.laborMange.companyAttendanceRanking')"
|
||
width="100"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ $t('message.POverview.type') }}：</span
|
||
>{{
|
||
scope.row.passType == 1
|
||
? $t('message.laborMange.enter')
|
||
: $t('message.laborMange.leave')
|
||
}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="workerName"
|
||
:label="$t('message.laborMange.compellation')"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ $t('message.POverview.name') }}：</span>
|
||
{{ scope.row.workerName }}
|
||
<span v-show="scope.row.temperature"
|
||
>({{ scope.row.temperature }}℃)</span
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="teamName"
|
||
:label="$t('message.laborMange.belongsToTeam')"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.teamName">
|
||
<span>{{ $t('message.POverview.team') }}：</span>
|
||
{{ scope.row.teamName }}
|
||
</div>
|
||
<div v-else>
|
||
<span>{{ $t('message.laborMange.section') }}：</span>
|
||
{{ scope.row.departmentName }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="createTime"
|
||
:label="$t('message.laborMange.transitTime')"
|
||
width="250"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ $t('message.POverview.approachTime') }}：</span
|
||
>{{ scope.row.createTime }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="passagewayName"
|
||
:label="$t('message.laborMange.brakeMachineNames') + '：'"
|
||
v-if="COMPANY == 'nanchang'"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ $t('message.laborMange.brakeMachineNames') }}：</span
|
||
>{{ scope.row.passagewayName }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="address"
|
||
:label="$t('message.laborMange.inOutPicture')"
|
||
v-if="COMPANY != 'nanchang'"
|
||
>
|
||
<template slot-scope="scope">
|
||
<img
|
||
height="30"
|
||
:src="fileUrl + scope.row.imageUrl"
|
||
v-if="scope.row.imageUrl"
|
||
:preview="fileUrl + scope.row.imageUrl"
|
||
/>
|
||
<img
|
||
height="30"
|
||
:src="fileUrl + scope.row.fieldAcquisitionUrl"
|
||
:preview="fileUrl + scope.row.fieldAcquisitionUrl"
|
||
v-else
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
<div class="team_crew whiteBlock">
|
||
<div class="title_wrap">
|
||
<div class="pageTitle">
|
||
{{ $t('message.POverview.team') }}{{ $t('message.POverview.crew')
|
||
}}{{ $t('message.POverview.statistics') }}
|
||
</div>
|
||
</div>
|
||
<!-- <div class="echarts" ref="teamCrew"></div> -->
|
||
<el-table
|
||
class="tables"
|
||
:data="teamList"
|
||
height="360"
|
||
style="min-height: auto"
|
||
>
|
||
<el-table-column
|
||
type="index"
|
||
width="50"
|
||
align="center"
|
||
:label="$t('message.personnelPosition.beaconManage.table.index')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="teamName"
|
||
:label="$t('message.laborMange.teamName')"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="totalPerson"
|
||
:label="$t('message.laborMange.payroll')"
|
||
align="center"
|
||
sortable
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="attendancePersonTotal"
|
||
:label="$t('message.laborMange.attendance')"
|
||
align="center"
|
||
sortable
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="presencePersonTotal"
|
||
:label="$t('message.laborMange.theNumberOfPresent')"
|
||
align="center"
|
||
sortable
|
||
></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="
|
||
$t('message.POverview.crew') + $t('message.POverview.realTimeDynamic')
|
||
"
|
||
:visible.sync="dialogTableVisible"
|
||
width="70%"
|
||
>
|
||
<el-form
|
||
:inline="true"
|
||
:model="formInline"
|
||
class="demo-form-inline"
|
||
size="medium"
|
||
style="margin-top: -20px"
|
||
>
|
||
<el-form-item :label="$t('message.POverview.name')">
|
||
<el-input
|
||
v-model="formInline.workerName"
|
||
:placeholder="
|
||
$t('message.POverview.pleaseEnter') + $t('message.POverview.name')
|
||
"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.POverview.approachTime')">
|
||
<el-date-picker
|
||
v-model="startTime"
|
||
format="yyyy-MM-dd HH:mm:ss"
|
||
type="datetimerange"
|
||
:range-separator="$t('message.POverview.to')"
|
||
:start-placeholder="$t('message.POverview.startDate')"
|
||
:end-placeholder="$t('message.POverview.dateClosed')"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.laborMange.companies')">
|
||
<el-select
|
||
filterable
|
||
:clearable="true"
|
||
v-model="formInline.enterpriseId"
|
||
:placeholder="$t('message.laborMange.pleaseChoose')"
|
||
@change="changeCompany"
|
||
>
|
||
<el-option
|
||
:label="item.enterpriseName"
|
||
:value="item.id"
|
||
v-for="item in enterpriseListData"
|
||
:key="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.laborMange.belongsToTeam')">
|
||
<el-select
|
||
filterable
|
||
:clearable="true"
|
||
v-model="formInline.teamId"
|
||
:placeholder="$t('message.laborMange.pleaseChoose')"
|
||
>
|
||
<el-option
|
||
:label="item.teamName"
|
||
:value="item.id"
|
||
v-for="item in teamListData"
|
||
:key="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.laborMange.department')">
|
||
<el-select
|
||
filterable
|
||
:clearable="true"
|
||
v-model="formInline.departmentId"
|
||
:placeholder="$t('message.laborMange.pleaseChoose')"
|
||
>
|
||
<el-option
|
||
:label="item.departmentName"
|
||
:value="item.id"
|
||
v-for="item in departmentListData"
|
||
:key="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
@click="
|
||
pageNo = 1
|
||
pageSize = 10
|
||
getPageList()
|
||
"
|
||
>{{ $t('message.POverview.demand') }}</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
<vue-scroll class="scroll" style="height: 540px">
|
||
<el-table :data="tableData" style="width: 100%" :show-header="false">
|
||
<el-table-column
|
||
prop="passType"
|
||
:label="$t('message.laborMange.type')"
|
||
width="100"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ $t('message.POverview.type') }}：</span
|
||
>{{
|
||
scope.row.passType == 1
|
||
? $t('message.laborMange.enter')
|
||
: $t('message.laborMange.leave')
|
||
}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="workerName"
|
||
:label="$t('message.laborMange.compellation')"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ $t('message.POverview.name') }}：</span>
|
||
{{ scope.row.workerName }}
|
||
<span v-show="scope.row.temperature"
|
||
>({{ scope.row.temperature }}℃)</span
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="departmentName"
|
||
:label="$t('message.laborMange.belongsToTeam')"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.teamName">
|
||
<span>{{ $t('message.POverview.team') }}：</span>
|
||
{{ scope.row.teamName }}
|
||
</div>
|
||
<div v-else>
|
||
<span>{{ $t('message.laborMange.section') }}：</span>
|
||
{{ scope.row.departmentName }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="createTime"
|
||
:label="$t('message.laborMange.transitTime')"
|
||
width="250"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ $t('message.POverview.approachTime') }}：</span
|
||
>{{ scope.row.createTime }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="passagewayName"
|
||
:label="$t('message.laborMange.brakeMachineNames') + '：'"
|
||
width="250"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ $t('message.laborMange.brakeMachineNames') }}：</span
|
||
>{{ scope.row.passagewayName }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="address"
|
||
:label="$t('message.laborMange.inOutPicture')"
|
||
>
|
||
<template slot-scope="scope">
|
||
<img
|
||
height="30"
|
||
:src="fileUrl + scope.row.imageUrl"
|
||
v-if="scope.row.imageUrl"
|
||
:preview="fileUrl + scope.row.imageUrl"
|
||
/>
|
||
<img
|
||
height="30"
|
||
:src="fileUrl + scope.row.fieldAcquisitionUrl"
|
||
v-else
|
||
:preview="fileUrl + scope.row.fieldAcquisitionUrl"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</vue-scroll>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNo"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4'
|
||
// import scroll from "vue-seamless-scroll";
|
||
import {
|
||
selectWorkerOverviewStatisticsApi,
|
||
getRealTimeDataApi,
|
||
getPageListApi,
|
||
getAdministratorCertificateApi,
|
||
getDepartmentInfoList,
|
||
getTeamInfoList,
|
||
getEnterpriseInfoList,
|
||
getWorkerTeamStatisticsApi,
|
||
getPersonTypeAndEduStatisticsApi
|
||
} from '@/assets/js/api/laborPerson'
|
||
import { selectProjectComapnyWorkTotalListApi } from '@/assets/js/api/dataBoard.js'
|
||
|
||
export default {
|
||
name: 'personnelOverview',
|
||
// components: {
|
||
// scroll,
|
||
// },
|
||
data() {
|
||
return {
|
||
COMPANY: '',
|
||
teamList: [],
|
||
dialogTableVisible: false,
|
||
formInline: {
|
||
endTime: '',
|
||
startTime: '',
|
||
workerName: '',
|
||
enterpriseId: '',
|
||
teamId: '',
|
||
departmentId: ''
|
||
},
|
||
startTime: '',
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
tableData: [],
|
||
crewRealTimeList: [], //人员动态实时数据
|
||
totalPersonNum: 0,
|
||
attendancePersonNum: 0,
|
||
presencePersonNum: 0,
|
||
interval: null,
|
||
fileUrl: '',
|
||
enterpriseListData: [],
|
||
teamListData: [],
|
||
departmentListData: []
|
||
}
|
||
},
|
||
mounted() {
|
||
this.COMPANY = COMPANY
|
||
this.fileUrl = this.$store.state.FILEURL
|
||
// this.selectWorkerOverviewStatistics();
|
||
this.selectWorkerTeamStatistics()
|
||
this.selectPersonTypeAndEduStatistics()
|
||
// this.getCertificateList();
|
||
this.getCrewRealTimeData()
|
||
this.getCompanyAttendData()
|
||
this.getCompanyList()
|
||
this.interval = setInterval(() => {
|
||
this.getCrewRealTimeData()
|
||
}, 180000)
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.interval)
|
||
},
|
||
methods: {
|
||
changeCompany() {
|
||
this.formInline.departmentId = ''
|
||
this.formInline.teamId = ''
|
||
this.getDepartmentList()
|
||
this.getTeamList()
|
||
},
|
||
//获取所属 企业下拉
|
||
getCompanyList() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
enterpriseName: '',
|
||
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId
|
||
}
|
||
getEnterpriseInfoList(data).then((res) => {
|
||
this.enterpriseListData = res.result
|
||
})
|
||
},
|
||
//获取 部门 列表
|
||
getDepartmentList() {
|
||
let data = {
|
||
enterpriseId: this.formInline.enterpriseId,
|
||
projectSn: this.$store.state.projectSn
|
||
}
|
||
getDepartmentInfoList(data).then((res) => {
|
||
this.departmentListData = res.result.list
|
||
})
|
||
},
|
||
//获取企业的 - 班组列表
|
||
getTeamList() {
|
||
let data = {
|
||
enterpriseId: this.formInline.enterpriseId,
|
||
projectSn: this.$store.state.projectSn
|
||
}
|
||
getTeamInfoList(data).then((res) => {
|
||
this.teamListData = res.result.list
|
||
})
|
||
},
|
||
//获取企业出勤数据
|
||
getCompanyAttendData() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn
|
||
}
|
||
selectProjectComapnyWorkTotalListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
var Data = res.result
|
||
var xData = [],
|
||
yData1 = [],
|
||
yData2 = [],
|
||
yData3 = []
|
||
Data.forEach((element) => {
|
||
xData.push(element.enterpriseName)
|
||
yData1.push(element.attendancePersonNum)
|
||
yData2.push(element.totalPersonNum)
|
||
yData3.push(element.presencePersonNum)
|
||
})
|
||
this.createdBarCharts(
|
||
xData,
|
||
yData1,
|
||
yData2,
|
||
yData3,
|
||
this.$refs.ageChart,
|
||
[
|
||
this.$t('message.laborMange.attendance'),
|
||
this.$t('message.laborMange.payroll'),
|
||
this.$t('message.laborMange.theNumberOfPresent')
|
||
]
|
||
)
|
||
} else {
|
||
this.$message.error(res.message)
|
||
}
|
||
})
|
||
},
|
||
//企业出勤---图表
|
||
createdBarCharts(xData, yData1, yData2, yData3, el, legendData) {
|
||
let that = this
|
||
let ageChart = echarts.init(el)
|
||
ageChart.clear()
|
||
let option = {
|
||
grid: {
|
||
top: 40,
|
||
left: 30,
|
||
bottom: 25,
|
||
right: 20,
|
||
containLabel: true
|
||
},
|
||
color: ['#5CE2F6', '#5181F6', '#8EBDD2'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
show: true,
|
||
// align: "left",
|
||
top: 0,
|
||
// left: 0,
|
||
itemWidth: 13,
|
||
itemHeight: 5,
|
||
textStyle: {
|
||
color: '#9fa2ad'
|
||
}
|
||
},
|
||
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: xData,
|
||
boundaryGap: true,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: '#9fa2ad',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
],
|
||
|
||
yAxis: {
|
||
type: 'value',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: 'rgba(231, 233, 243, 1)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#9fa2ad'
|
||
}
|
||
},
|
||
// dataZoom: [
|
||
// {
|
||
// show: true,
|
||
// start: 50,
|
||
// end: 100,
|
||
// height: 8,
|
||
// borderColor: "transparent",
|
||
// backgroundColor: "#fff",
|
||
// filterColor: "#999999",
|
||
// bottom: 0,
|
||
// },
|
||
// ],
|
||
series: [
|
||
{
|
||
name: legendData[1],
|
||
type: 'bar',
|
||
data: yData2,
|
||
// stack: 'product',
|
||
barWidth: 35,
|
||
barGap: 0.1
|
||
},
|
||
{
|
||
name: legendData[0],
|
||
type: 'bar',
|
||
// stack: 'product',
|
||
data: yData1,
|
||
barMaxWidth: 35
|
||
},
|
||
{
|
||
name: legendData[2],
|
||
type: 'bar',
|
||
data: yData3,
|
||
// stack: 'product',
|
||
barMaxWidth: 35,
|
||
barGap: 0.1
|
||
}
|
||
]
|
||
}
|
||
|
||
ageChart.setOption(option)
|
||
},
|
||
//获取人员实时动态
|
||
getCrewRealTimeData() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId
|
||
// userEnterpriseId:'1506921464948166657,1506897864874627073,88',
|
||
}
|
||
|
||
getRealTimeDataApi(data).then((res) => {
|
||
console.log('查询结果', res)
|
||
if (res.code == 200) {
|
||
this.crewRealTimeList = res.result
|
||
this.$nextTick(() => {
|
||
this.$previewRefresh()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
|
||
selectNowDate() {
|
||
var date = new Date(),
|
||
year = date.getFullYear(),
|
||
month = date.getMonth() + 1,
|
||
day = date.getDate(),
|
||
hours = date.getHours(), //获取当前小时数(0-23)
|
||
minutes = date.getMinutes(), //获取当前分钟数(0-59)
|
||
seconds = date.getSeconds()
|
||
month >= 1 && month <= 9 ? (month = '0' + month) : ''
|
||
day >= 0 && day <= 9 ? (day = '0' + day) : ''
|
||
hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
|
||
minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
|
||
seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
|
||
var timer =
|
||
year +
|
||
'-' +
|
||
month +
|
||
'-' +
|
||
day +
|
||
' ' +
|
||
hours +
|
||
':' +
|
||
minutes +
|
||
':' +
|
||
seconds
|
||
console.log(timer)
|
||
return timer
|
||
},
|
||
//获取全部人员动态按钮
|
||
getAddCrewRealTime() {
|
||
this.dialogTableVisible = true
|
||
let nowTime = this.selectNowDate()
|
||
console.log(nowTime)
|
||
this.startTime = [nowTime.split(' ')[0] + ' ' + '00:00:00', nowTime]
|
||
this.pageNo = 1
|
||
this.pageSize = 10
|
||
this.getPageList()
|
||
},
|
||
|
||
//获取人员动态--更多列表
|
||
getPageList() {
|
||
console.log(this.startTime)
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
startTime: this.startTime && this.startTime[0],
|
||
endTime: this.startTime && this.startTime[1],
|
||
workerName: this.formInline.workerName,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
|
||
teamId: this.formInline.teamId,
|
||
departmentId: this.formInline.departmentId,
|
||
enterpriseId: this.formInline.enterpriseId
|
||
}
|
||
getPageListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.tableData = res.result.records
|
||
this.total = res.result.total
|
||
this.$nextTick(() => {
|
||
this.$previewRefresh()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 查询项目下按照班组统计
|
||
selectWorkerTeamStatistics() {
|
||
getWorkerTeamStatisticsApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId
|
||
}).then((res) => {
|
||
this.teamList = res.result
|
||
})
|
||
},
|
||
//查询人员类型和教育统计
|
||
selectPersonTypeAndEduStatistics() {
|
||
getPersonTypeAndEduStatisticsApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId
|
||
}).then((res) => {
|
||
console.log(res)
|
||
this.totalPersonNum = res.result.personType.toaltPerson.totalPerson //总人数
|
||
this.totalEducationPerson = res.result.totalEducationPerson
|
||
this.attendancePersonNum =
|
||
res.result.personType.attendancePerson.totalPerson //出勤总人数
|
||
this.presencePersonNum =
|
||
res.result.personType.presencePerson.totalPerson //在场 总人数
|
||
var personTypeData = res.result.personType
|
||
var arr1 = [
|
||
personTypeData.presencePerson.glPersonTotal,
|
||
personTypeData.presencePerson.lwPersonTotal,
|
||
personTypeData.presencePerson.lsPersonTotal
|
||
]
|
||
var arr2 = [
|
||
personTypeData.toaltPerson.glPersonTotal,
|
||
personTypeData.toaltPerson.lwPersonTotal,
|
||
personTypeData.toaltPerson.lsPersonTotal
|
||
]
|
||
var attendance = [
|
||
//出勤总人数
|
||
personTypeData.attendancePerson.glPersonTotal,
|
||
personTypeData.attendancePerson.lwPersonTotal,
|
||
personTypeData.attendancePerson.lsPersonTotal
|
||
]
|
||
this.createdEcharts(arr1, arr2, attendance)
|
||
this.createdEcharts3()
|
||
})
|
||
},
|
||
//人员类型和班组统计
|
||
selectWorkerOverviewStatistics() {
|
||
selectWorkerOverviewStatisticsApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId
|
||
}).then((res) => {
|
||
this.totalPersonNum = res.result.personType.toaltPerson.totalPerson //总人数
|
||
this.totalEducationPerson = res.result.totalEducationPerson
|
||
this.attendancePersonNum =
|
||
res.result.personType.attendancePerson.totalPerson //出勤总人数
|
||
this.presencePersonNum =
|
||
res.result.personType.presencePerson.totalPerson //在场 总人数
|
||
var personTypeData = res.result.personType
|
||
var arr1 = [
|
||
personTypeData.presencePerson.glPersonTotal,
|
||
personTypeData.presencePerson.lwPersonTotal,
|
||
personTypeData.presencePerson.lsPersonTotal
|
||
]
|
||
var arr2 = [
|
||
personTypeData.toaltPerson.glPersonTotal,
|
||
personTypeData.toaltPerson.lwPersonTotal,
|
||
personTypeData.toaltPerson.lsPersonTotal
|
||
]
|
||
var attendance = [
|
||
//出勤总人数
|
||
personTypeData.attendancePerson.glPersonTotal,
|
||
personTypeData.attendancePerson.lwPersonTotal,
|
||
personTypeData.attendancePerson.lsPersonTotal
|
||
]
|
||
this.createdEcharts(arr1, arr2, attendance)
|
||
var arr3 = [],
|
||
arr4 = [],
|
||
xAxisData = [],
|
||
arr5 = [] //出勤人数
|
||
this.teamList = res.result.teamList
|
||
// var teamList = res.result.teamList;
|
||
// teamList.forEach((element) => {
|
||
// xAxisData.push(element.teamName);
|
||
// arr3.push(element.presencePersonTotal);
|
||
// arr4.push(element.totalPerson);
|
||
// arr5.push(element.attendancePersonTotal)
|
||
// });
|
||
// this.createdEcharts4(xAxisData, arr3, arr4,arr5);
|
||
this.createdEcharts3()
|
||
})
|
||
},
|
||
//人员类型统计
|
||
createdEcharts(yAxisData1, yAxisData2, yAxisData3) {
|
||
// let yAxisData1 = [1, 2, 3, 4, 5, 6, 7];
|
||
// let yAxisData2 = [2, 3, 7, 4, 5, 6, 7];
|
||
let personnelType = echarts.init(this.$refs.personnelType)
|
||
let option = {
|
||
color: ['#8FC8FF', 'rgba(126,150,232,1)', '#61D2B9'],
|
||
tooltip: {
|
||
show: true,
|
||
trigger: 'axis',
|
||
formatter: '{b} <br /> {a0}: {c0}<br /> {a1}: {c1} <br /> {a2}: {c2}',
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: 'transparent'
|
||
}
|
||
},
|
||
textStyle: {
|
||
color: '#000',
|
||
fontSize: 12
|
||
},
|
||
backgroundColor: 'rgba(236,236,236,0.75)'
|
||
},
|
||
grid: {
|
||
left: 30,
|
||
right: 30,
|
||
bottom: 15,
|
||
top: 20,
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: { show: false },
|
||
data: [
|
||
this.$t('message.POverview.projectManagement'),
|
||
this.$t('message.POverview.lwWorker'),
|
||
// this.$t('message.POverview.specialOperation'),
|
||
// this.$t('message.POverview.generalOperator'),
|
||
// this.$t('message.POverview.outsourcedEmployee'),
|
||
this.$t('message.POverview.dayLaborer')
|
||
],
|
||
axisLabel: {
|
||
// rotate: 30,
|
||
textStyle: {
|
||
color: '#9fa2ad',
|
||
fontSize: 10
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
show: true,
|
||
// type: "time",
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: 'rgba(231, 233, 243, 0.5)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
// show: false,
|
||
textStyle: {
|
||
color: '#9fa2ad',
|
||
fontSize: 10
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: this.$t('message.POverview.registeredNumber'),
|
||
data: yAxisData2,
|
||
type: 'line',
|
||
symbolSize: 10,
|
||
// symbol: "circle",
|
||
lineStyle: {
|
||
width: 1
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
// opacity: 0.2
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(126,150,232,0.56)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(30, 72, 223, 0)'
|
||
}
|
||
])
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: this.$t('message.POverview.attendanceNumber'),
|
||
data: yAxisData3,
|
||
type: 'line',
|
||
symbolSize: 10,
|
||
// symbol: "circle",
|
||
lineStyle: {
|
||
width: 1
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
// opacity: 0.2
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(126,150,232,0.56)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(30, 72, 223, 0)'
|
||
}
|
||
])
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: this.$t('message.POverview.presentNumber'),
|
||
data: yAxisData1,
|
||
type: 'line',
|
||
symbolSize: 10,
|
||
// symbol: "circle",
|
||
lineStyle: {
|
||
width: 1
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
// opacity: 0.2
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(37,82,228,0.56)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(30, 72, 223, 0)'
|
||
}
|
||
])
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
personnelType.setOption(option)
|
||
},
|
||
|
||
//获取管理人员证书数据
|
||
getCertificateList() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId
|
||
}
|
||
getAdministratorCertificateApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
let valueArr = JSON.parse(JSON.stringify(res.result.list))
|
||
let arr = []
|
||
if (valueArr.length > 0) {
|
||
valueArr.forEach((item) => {
|
||
let obj = { name: item.dictionaryName, value: item.num }
|
||
arr.push(obj)
|
||
})
|
||
}
|
||
this.createdEcharts2(arr, res.result.totalNum)
|
||
}
|
||
})
|
||
},
|
||
|
||
//管理人员证书统计
|
||
createdEcharts2(arr, totalNum) {
|
||
let that = this
|
||
let manager = echarts.init(this.$refs.manager)
|
||
let option = {
|
||
legend: {
|
||
show: false
|
||
},
|
||
title: {
|
||
text: totalNum,
|
||
left: 'center',
|
||
top: '41%',
|
||
textStyle: {
|
||
color: '#9fa2ad',
|
||
fontSize: 26,
|
||
align: 'center'
|
||
},
|
||
subtext: this.$t('message.POverview.documentsNumber'),
|
||
subtextStyle: {
|
||
color: '#9fa2ad',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
calculable: true,
|
||
color: ['#81c2ff', '#bfd8ff', '#356093', '#557eed', '#364c93'],
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: [70, 90],
|
||
center: ['50%', '50%'],
|
||
roseType: 'area',
|
||
label: {
|
||
normal: {
|
||
formatter:
|
||
'{b|{b}}\n{hr|}\n{c|{c}' +
|
||
that.$t('message.POverview.piece') +
|
||
'}',
|
||
rich: {
|
||
b: {
|
||
fontSize: 13,
|
||
color: '#9fa2ad',
|
||
align: 'left',
|
||
padding: 4
|
||
},
|
||
hr: {
|
||
borderColor: '#226CEC',
|
||
width: '100%',
|
||
borderWidth: 1,
|
||
height: 0
|
||
},
|
||
d: {
|
||
fontSize: 13,
|
||
color: '#9fa2ad',
|
||
align: 'left',
|
||
padding: 4
|
||
},
|
||
c: {
|
||
fontSize: 13,
|
||
color: '#9fa2ad',
|
||
align: 'center',
|
||
padding: 4
|
||
}
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
length: 10,
|
||
length2: 10,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
data: arr
|
||
}
|
||
]
|
||
}
|
||
manager.setOption(option)
|
||
},
|
||
// 安全培训统计
|
||
createdEcharts3() {
|
||
let that = this
|
||
let safetyTraining = echarts.init(this.$refs.safetyTraining)
|
||
let option = {
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
center: ['50%', '25%'],
|
||
radius: [60, 65],
|
||
x: '0%', // for funnel
|
||
data: [
|
||
{
|
||
name: 'other',
|
||
value: 0,
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#e0e0e4'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: that.$t('message.POverview.headcount'),
|
||
value: this.totalPersonNum,
|
||
label: {
|
||
normal: {
|
||
position: 'center',
|
||
color: '#9fa2ad',
|
||
fontSize: 13,
|
||
padding: [0, 0, 20, 0],
|
||
formatter: function (params) {
|
||
return (
|
||
'{percent|' +
|
||
params.value +
|
||
'}\n' +
|
||
that.$t('message.POverview.headcount') +
|
||
''
|
||
)
|
||
},
|
||
rich: {
|
||
percent: {
|
||
color: '#9fa2ad',
|
||
fontSize: 26,
|
||
padding: [0, 0, 20, 0]
|
||
}
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#82C1FF'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'pie',
|
||
center: ['30%', '70%'],
|
||
radius: [60, 65],
|
||
x: '0%', // for funnel
|
||
data: [
|
||
{
|
||
name: 'other',
|
||
value: this.totalPersonNum - this.totalEducationPerson,
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#e0e0e4'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: that.$t('message.POverview.numberTrainees'),
|
||
value: this.totalEducationPerson,
|
||
label: {
|
||
normal: {
|
||
position: 'center',
|
||
color: '#9fa2ad',
|
||
fontSize: 13,
|
||
padding: [0, 0, 20, 0],
|
||
formatter: function (params) {
|
||
return (
|
||
'{percent|' +
|
||
params.value +
|
||
'}\n' +
|
||
that.$t('message.POverview.numberTrainees') +
|
||
''
|
||
)
|
||
},
|
||
rich: {
|
||
percent: {
|
||
color: '#9fa2ad',
|
||
fontSize: 26,
|
||
padding: [0, 0, 20, 0]
|
||
}
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(126,150,232,1)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'pie',
|
||
center: ['70%', '70%'],
|
||
radius: [60, 65],
|
||
x: '0%', // for funnel
|
||
data: [
|
||
{
|
||
name: 'other',
|
||
value: this.totalPersonNum,
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#e0e0e4'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: that.$t('message.POverview.untrainedNumber'),
|
||
value: this.totalPersonNum - this.totalEducationPerson,
|
||
label: {
|
||
normal: {
|
||
position: 'center',
|
||
color: '#9fa2ad',
|
||
fontSize: 13,
|
||
padding: [0, 0, 20, 0],
|
||
formatter: function (params) {
|
||
return (
|
||
'{percent|' +
|
||
params.value +
|
||
'}\n' +
|
||
that.$t('message.POverview.untrainedNumber') +
|
||
''
|
||
)
|
||
},
|
||
rich: {
|
||
percent: {
|
||
color: '#9fa2ad',
|
||
fontSize: 26,
|
||
padding: [0, 0, 20, 0]
|
||
}
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#226CEC'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
safetyTraining.setOption(option)
|
||
},
|
||
// 班组人员统计
|
||
createdEcharts4(xAxisData, arr3, arr4, arr5) {
|
||
let that = this
|
||
let teamCrew = echarts.init(this.$refs.teamCrew)
|
||
let option = {
|
||
// grid: {
|
||
// left: "20",
|
||
// right: "0",
|
||
// bottom: "0",
|
||
// top: "10",
|
||
// containLabel: true,
|
||
// },
|
||
// dataZoom: [
|
||
// {
|
||
// show: true,
|
||
// start: 0,
|
||
// end: 30,
|
||
// showDetail: false,
|
||
// },
|
||
// ],
|
||
// ,'#44D7B6'
|
||
color: ['#5181F6', '#61D2B9'],
|
||
tooltip: {
|
||
show: true,
|
||
trigger: 'axis',
|
||
formatter: '{b} <br /> {a0}: {c0}<br /> {a1}: {c1}<br /> {a2}: {c2}',
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: 'transparent'
|
||
}
|
||
},
|
||
textStyle: {
|
||
color: '#000',
|
||
fontSize: 12
|
||
},
|
||
backgroundColor: 'rgba(236,236,236,0.75)'
|
||
},
|
||
// legend: {
|
||
// show: true,
|
||
// x: "right",
|
||
// position: "top",
|
||
// },
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisLine: false,
|
||
data: xAxisData,
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
rotate: 15,
|
||
textStyle: {
|
||
color: '#9fa2ad',
|
||
fontSize: 10
|
||
}
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLine: false,
|
||
axisTick: { show: false },
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: 'rgba(231, 233, 243, 0.5)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#9fa2ad',
|
||
fontSize: 10
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: that.$t('message.POverview.registeredNumber'),
|
||
type: 'line',
|
||
data: arr4,
|
||
areaStyle: {
|
||
normal: {
|
||
// opacity: 0.2
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(126,150,232,0.56)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(30, 72, 223, 0)'
|
||
}
|
||
])
|
||
}
|
||
},
|
||
lineStyle: {
|
||
color: '#914EDE'
|
||
}
|
||
},
|
||
|
||
{
|
||
name: this.$t('message.POverview.attendanceNumber'),
|
||
type: 'bar',
|
||
data: arr5,
|
||
barMaxWidth: 26
|
||
},
|
||
{
|
||
name: that.$t('message.POverview.presentNumber'),
|
||
type: 'bar',
|
||
data: arr3,
|
||
barMaxWidth: 26
|
||
}
|
||
]
|
||
}
|
||
teamCrew.setOption(option)
|
||
},
|
||
//选择条数
|
||
handleSizeChange(val) {
|
||
this.pageSize = val
|
||
this.getPageList()
|
||
},
|
||
//选择分页
|
||
handleCurrentChange(val) {
|
||
this.pageNo = val
|
||
this.getPageList()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.flex2 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.flex3 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.personnelOverview {
|
||
width: 100%;
|
||
height: 100%;
|
||
.content1 {
|
||
width: 100%;
|
||
height: 45%;
|
||
.PersonnelType_wrap {
|
||
width: 33%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
}
|
||
.manager_wrap {
|
||
width: 33%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
margin: 0 13px;
|
||
}
|
||
.safety_training {
|
||
width: 33%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
}
|
||
}
|
||
.content2 {
|
||
width: 100%;
|
||
padding-top: 13px;
|
||
height: 55%;
|
||
box-sizing: border-box;
|
||
.real_time {
|
||
width: 48%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
margin-right: 13px;
|
||
}
|
||
.team_crew {
|
||
width: 52%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
}
|
||
}
|
||
.title_wrap {
|
||
margin-top: 12px;
|
||
// .title {
|
||
// width: 140px;
|
||
// text-align: center;
|
||
// padding: 10px 20px;
|
||
// background: #ebf1ff;
|
||
// }
|
||
.pageTitle {
|
||
margin-left: 20px;
|
||
}
|
||
.headcount {
|
||
font-size: 14px;
|
||
padding: 3px 10px;
|
||
border-radius: 30px;
|
||
background: rgba(81, 129, 246, 0.5);
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.echarts {
|
||
width: 100%;
|
||
height: calc(100% - 50px);
|
||
}
|
||
.scroll {
|
||
width: 100%;
|
||
padding: 15px 0 0;
|
||
box-sizing: border-box;
|
||
height: 100%;
|
||
}
|
||
.pagerBox {
|
||
padding-top: 30px;
|
||
margin-top: 0px;
|
||
// border-top: 1px solid #e5ecfe;
|
||
}
|
||
}
|
||
</style> |