1653 lines
49 KiB
Vue
1653 lines
49 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 class="condition-change">
|
||
<el-radio-group v-model="timeRadio" size="small" @change="radioGroupChange">
|
||
<el-radio-button label="3">安全履职分析</el-radio-button>
|
||
<el-radio-button label="4">安全培训分析</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="work-data-analysis" v-show="timeRadio == '3'">
|
||
<div class="analysis-item">
|
||
<span>{{safeData.notPerformNum || 0}}/{{safeData.inServiceNum || 0}}</span>
|
||
<span>未履职人员</span>
|
||
</div>
|
||
<div class="analysis-item">
|
||
<span>{{safeData.xmjlNotPerformNum || 0}}/{{safeData.xmjlInServiceNum || 0}}</span>
|
||
<span>项目经理</span>
|
||
</div>
|
||
<div class="analysis-item">
|
||
<span>{{safeData.aqyNotPerformNum || 0}}/{{safeData.aqyInServiceNum || 0}}</span>
|
||
<span>安全员</span>
|
||
</div>
|
||
<div class="analysis-item">
|
||
<span>{{safeData.zlyNotPerformNum || 0}}/{{safeData.zlyInServiceNum || 0}}</span>
|
||
<span>质量员</span>
|
||
</div>
|
||
<div class="analysis-item">
|
||
<span>{{safeData.jlNotPerformNum || 0}}/{{safeData.jlInServiceNum || 0}}</span>
|
||
<span>监理</span>
|
||
</div>
|
||
</div>
|
||
<div class="work-data-table" v-show="timeRadio == '3'">
|
||
<el-table
|
||
class="table-item"
|
||
:data="safeWorkList"
|
||
height="95%"
|
||
>
|
||
<el-table-column
|
||
prop="enterpriseName"
|
||
align="center"
|
||
label="企业名称"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="未履职人数"
|
||
>
|
||
<template v-slot="{ row }">
|
||
<span>{{row.notPerformNum || 0}}/{{row.inServiceNum || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="项目经理"
|
||
>
|
||
<template v-slot="{ row }">
|
||
<span>{{row.xmjlNotPerformNum || 0}}/{{row.xmjlInServiceNum || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="安全员"
|
||
>
|
||
<template v-slot="{ row }">
|
||
<span>{{row.aqyNotPerformNum || 0}}/{{row.aqyInServiceNum || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="质量员"
|
||
>
|
||
<template v-slot="{ row }">
|
||
<span>{{row.zlyNotPerformNum || 0}}/{{row.zlyInServiceNum || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="监理"
|
||
>
|
||
<template v-slot="{ row }">
|
||
<span>{{row.jlNotPerformNum || 0}}/{{row.jlInServiceNum || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="echarts" ref="safetyTraining" v-show="timeRadio == '4'"></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"
|
||
value-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,
|
||
getSafetyPerformanceAnalysisApi
|
||
} from "@/assets/js/api/laborPerson";
|
||
import { selectProjectComapnyWorkTotalListApi } from "@/assets/js/api/dataBoard.js";
|
||
|
||
export default {
|
||
name: "personnelOverview",
|
||
// components: {
|
||
// scroll,
|
||
// },
|
||
data() {
|
||
return {
|
||
safeWorkList: [],
|
||
timeRadio: "3",
|
||
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: [],
|
||
safeData: {}
|
||
};
|
||
},
|
||
mounted() {
|
||
this.COMPANY = COMPANY;
|
||
this.fileUrl = this.$store.state.FILEURL;
|
||
// this.selectWorkerOverviewStatistics();
|
||
|
||
this.selectWorkerTeamStatistics();
|
||
this.selectPersonTypeAndEduStatistics();
|
||
this.selectSafetyPerformanceAnalysisFn();
|
||
// this.getCertificateList();
|
||
this.getCrewRealTimeData();
|
||
this.getCompanyAttendData();
|
||
this.getCompanyList();
|
||
// this.interval = setInterval(() => {
|
||
// this.getCrewRealTimeData()
|
||
// }, 180000)
|
||
this.interval = setInterval(() => {
|
||
this.selectWorkerTeamStatistics();
|
||
this.selectPersonTypeAndEduStatistics();
|
||
this.selectSafetyPerformanceAnalysisFn();
|
||
// this.getCertificateList();
|
||
this.getCrewRealTimeData();
|
||
this.getCompanyAttendData();
|
||
this.getCompanyList();
|
||
}, 30 * 1000);
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.interval);
|
||
},
|
||
methods: {
|
||
radioGroupChange(){
|
||
if(this.timeRadio == '4'){
|
||
this.createdEcharts3();
|
||
}
|
||
console.log(777888)
|
||
},
|
||
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) => {
|
||
if (element.enterpriseName.length > 4) {
|
||
xData.push(element.enterpriseName.substring(0, 4) + "...");
|
||
} else {
|
||
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;
|
||
});
|
||
},
|
||
//查询安全履职分析数据
|
||
selectSafetyPerformanceAnalysisFn() {
|
||
let that = this;
|
||
getSafetyPerformanceAnalysisApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
|
||
}).then((res) => {
|
||
that.safeData = res.result;
|
||
that.safeWorkList = res.result.list || [];
|
||
});
|
||
},
|
||
//查询人员类型和教育统计
|
||
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,
|
||
// value: this.totalPersonNum,
|
||
// label: {
|
||
// normal: {
|
||
// show: false
|
||
// }
|
||
// },
|
||
// labelLine: {
|
||
// normal: {
|
||
// show: false
|
||
// }
|
||
// },
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: '#e0e0e4'
|
||
// }
|
||
// }
|
||
// },
|
||
{
|
||
name: that.$t("message.POverview.numberTrainees"),
|
||
// value: this.totalEducationPerson,
|
||
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.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,
|
||
value: 0,
|
||
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;
|
||
.condition-change {
|
||
margin-top: 10px;
|
||
margin-left: 5px;
|
||
}
|
||
.work-data-analysis {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
margin-top: 8px;
|
||
.analysis-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
span:nth-child(1) {
|
||
color: #5089ff;
|
||
font-size: 20px;
|
||
}
|
||
span:nth-child(2) {
|
||
color: #6b6b6b;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
.work-data-table {
|
||
width: 100%;
|
||
height: 72%;
|
||
margin-top: 10px;
|
||
.table-item{
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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>
|