劳务管理添加模块
This commit is contained in:
parent
e12ae0bfed
commit
bb97a23e1e
@ -23,8 +23,125 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rightEcharts">
|
<div class="rightEcharts">
|
||||||
<Card title="今日作业人员趋势">
|
<!-- 今日作业人员趋势 -->
|
||||||
<div id="myEchartsNum" ref="myEchartsNum" style="width: 100%; height: 100%"></div>
|
<Card title="人员出勤分析">
|
||||||
|
<div class="rightHeader">
|
||||||
|
<div class="day Selected" @click="handleChangeChecked(1)" :class="checked == 1 ? 'active' : ''">人员实时动态列表</div>
|
||||||
|
<div class="year Selected" @click="handleChangeChecked(2)" :class="checked == 2 ? 'active' : ''">今日作业人员趋势</div>
|
||||||
|
</div>
|
||||||
|
<template v-if="checked == 1">
|
||||||
|
<div class="selBox">
|
||||||
|
<div class="search-item">
|
||||||
|
<el-input
|
||||||
|
style="width: 150px"
|
||||||
|
size="small"
|
||||||
|
v-model="searchForm.workerName"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="search-item">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="rangeTime"
|
||||||
|
type="daterange"
|
||||||
|
size="small"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
@change="timeChange"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<!-- 企业 -->
|
||||||
|
<div class="search-item">
|
||||||
|
<el-select v-model="searchForm.enterpriseId" @change="getTeamList" placeholder="请选择企业" size="small" clearable>
|
||||||
|
<el-option v-for="item in companyList" :key="item.id" :label="item.enterpriseName" :value="item.id"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="search-item">
|
||||||
|
<el-select v-model="searchForm.teamId" @change="getDepartmentList" placeholder="请选择班组" size="small" clearable>
|
||||||
|
<el-option v-for="item in teamList" :key="item.id" :label="item.teamName" :value="item.id"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<!-- 部门 -->
|
||||||
|
<div class="search-item">
|
||||||
|
<el-select v-model="searchForm.departmentId" placeholder="请选择部门" size="small" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in departmentList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.departmentName"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="search-item">
|
||||||
|
<el-button type="primary" size="small" @click="getCrewRealTimeData">查询</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="search-item">
|
||||||
|
<el-button type="primary" size="small" @click="reset">重置</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tabList">
|
||||||
|
<div>序号</div>
|
||||||
|
<div>类型</div>
|
||||||
|
<div>姓名</div>
|
||||||
|
<div>班组</div>
|
||||||
|
<div>通行时间</div>
|
||||||
|
<div>进出场图片</div>
|
||||||
|
</div>
|
||||||
|
<el-scrollbar class="listBox" ref="refScrollbar">
|
||||||
|
<template v-if="crewRealTimeList.length > 0">
|
||||||
|
<div v-for="(item, index) in crewRealTimeList" class="listStyle" :key="item.id">
|
||||||
|
<div>
|
||||||
|
<span>{{ index + 1 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ item.passType == 1 ? "进" : "出" }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ item.workerName }}</span>
|
||||||
|
<span v-show="item.temperature">({{ item.temperature }}℃)</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ item.teamName }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ item.createTime }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="list-img">
|
||||||
|
<el-image
|
||||||
|
v-if="item.imageUrl"
|
||||||
|
fit="contain"
|
||||||
|
class="el-img"
|
||||||
|
:src="BASEURL + '/image/' + item.imageUrl"
|
||||||
|
:preview-src-list="[BASEURL + '/image/' + item.imageUrl]"
|
||||||
|
>
|
||||||
|
<template #error>
|
||||||
|
<div class="image-slot">
|
||||||
|
<el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-img" alt />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-image>
|
||||||
|
<el-image v-else :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-img" alt />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="notoDta" v-if="crewRealTimeList.length == 0">
|
||||||
|
<img src="@/assets/images/noData.png" />
|
||||||
|
<p>暂无数据</p>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
:page-size="10"
|
||||||
|
style="justify-content: center"
|
||||||
|
@current-change="onCurrentChange"
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="Number(total)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<div v-else id="myEchartsNum" ref="myEchartsNum" style="width: 100%; height: 100%"></div>
|
||||||
</Card>
|
</Card>
|
||||||
<div class="show-more" @click="openDialogHistoryData('人员总览')">人员总览</div>
|
<div class="show-more" @click="openDialogHistoryData('人员总览')">人员总览</div>
|
||||||
</div>
|
</div>
|
||||||
@ -35,14 +152,39 @@
|
|||||||
import Card from "@/components/card.vue";
|
import Card from "@/components/card.vue";
|
||||||
|
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { onMounted, reactive, ref } from "vue";
|
import { onMounted, reactive, ref, nextTick } from "vue";
|
||||||
import { getPersonTypeAndEduStatisticsApi, getQueryTodayAttendanceTrendApi } from "@/api/modules/labor";
|
import noDataImage from "@/assets/images/vehicleManagement/car.png";
|
||||||
|
import {
|
||||||
|
getPersonTypeAndEduStatisticsApi,
|
||||||
|
getQueryTodayAttendanceTrendApi,
|
||||||
|
getRealTimeMoreDataApi,
|
||||||
|
getDepartDataList,
|
||||||
|
getTeamDataList,
|
||||||
|
getCompanyDataList
|
||||||
|
} from "@/api/modules/labor";
|
||||||
import { GlobalStore } from "@/stores";
|
import { GlobalStore } from "@/stores";
|
||||||
|
const BASEURL = import.meta.env.VITE_API_URL;
|
||||||
const store = GlobalStore();
|
const store = GlobalStore();
|
||||||
const emits = defineEmits(["openDialog"])
|
const emits = defineEmits(["openDialog"]);
|
||||||
const presencePerson = ref(0); //实时人数
|
const presencePerson = ref(0); //实时人数
|
||||||
const attendancePerson = ref(0); //日累计人数
|
const attendancePerson = ref(0); //日累计人数
|
||||||
const toaltPerson = ref(0); //总人数
|
const toaltPerson = ref(0); //总人数
|
||||||
|
const checked = ref(1);
|
||||||
|
const crewRealTimeList = ref([]);
|
||||||
|
const teamList = ref([]);
|
||||||
|
const companyList = ref([]);
|
||||||
|
const departmentList = ref([]);
|
||||||
|
|
||||||
|
const searchForm = reactive({
|
||||||
|
workerName: "",
|
||||||
|
teamId: "",
|
||||||
|
departmentId: "",
|
||||||
|
enterpriseId: "",
|
||||||
|
startTime: null,
|
||||||
|
endTime: null
|
||||||
|
});
|
||||||
|
const rangeTime = ref([]);
|
||||||
|
|
||||||
let xData = ref([]);
|
let xData = ref([]);
|
||||||
let yData = ref([]);
|
let yData = ref([]);
|
||||||
const option = reactive({
|
const option = reactive({
|
||||||
@ -225,12 +367,18 @@ const option = reactive({
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 打开弹窗
|
// 打开弹窗
|
||||||
const openDialogData = (tip:any) => {
|
const openDialogData = (tip: any) => {
|
||||||
emits("openDialog",{type: 1, tip})
|
emits("openDialog", { type: 1, tip });
|
||||||
}
|
};
|
||||||
const openDialogHistoryData = (tip:any) => {
|
const openDialogHistoryData = (tip: any) => {
|
||||||
emits("openDialog",{type: 2, tip})
|
emits("openDialog", { type: 2, tip });
|
||||||
}
|
};
|
||||||
|
|
||||||
|
const timeChange = (e: any) => {
|
||||||
|
searchForm.startTime = e[0];
|
||||||
|
searchForm.endTime = e[1];
|
||||||
|
// getCrewRealTimeData();
|
||||||
|
};
|
||||||
|
|
||||||
function drawChart() {
|
function drawChart() {
|
||||||
let myEchartsNum = echarts.init(document.getElementById("myEchartsNum"));
|
let myEchartsNum = echarts.init(document.getElementById("myEchartsNum"));
|
||||||
@ -277,9 +425,9 @@ const getQueryTodayList2 = async () => {
|
|||||||
projectSn: store.sn
|
projectSn: store.sn
|
||||||
});
|
});
|
||||||
if (res.result) {
|
if (res.result) {
|
||||||
let tempArr: any = []
|
let tempArr: any = [];
|
||||||
xData.value = tempArr
|
xData.value = tempArr;
|
||||||
yData.value = tempArr
|
yData.value = tempArr;
|
||||||
res.result.forEach(item => {
|
res.result.forEach(item => {
|
||||||
xData.value.push(item.time);
|
xData.value.push(item.time);
|
||||||
yData.value.push(item.num);
|
yData.value.push(item.num);
|
||||||
@ -287,17 +435,95 @@ const getQueryTodayList2 = async () => {
|
|||||||
}
|
}
|
||||||
drawChart();
|
drawChart();
|
||||||
};
|
};
|
||||||
const loadMethod = async () =>{
|
const handleChangeChecked = type => {
|
||||||
await getPersonList2()
|
checked.value = type;
|
||||||
await getQueryTodayList2()
|
if (checked.value == 2) {
|
||||||
}
|
nextTick(() => {
|
||||||
|
drawChart();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
let total = ref(0 as any);
|
||||||
|
let pageNo = ref(1 as any);
|
||||||
|
const onCurrentChange = (event: number) => {
|
||||||
|
pageNo.value = event;
|
||||||
|
getCrewRealTimeData();
|
||||||
|
};
|
||||||
|
//获取人员实时动态
|
||||||
|
const getCrewRealTimeData = () => {
|
||||||
|
let data = {
|
||||||
|
projectSn: store.sn,
|
||||||
|
pageNo: pageNo.value,
|
||||||
|
pageSize: 10,
|
||||||
|
userEnterpriseId: store.userInfo?.userEnterpriseId || "",
|
||||||
|
...searchForm
|
||||||
|
// userEnterpriseId:'1506921464948166657,1506897864874627073,88',
|
||||||
|
};
|
||||||
|
|
||||||
|
getRealTimeMoreDataApi(data).then(res => {
|
||||||
|
console.log("查询结果", res);
|
||||||
|
if (res.code == 200) {
|
||||||
|
crewRealTimeList.value = res.result.records;
|
||||||
|
total.value = res.result.total;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//获取所属 企业下拉
|
||||||
|
const getCompanyList = () => {
|
||||||
|
let data = {
|
||||||
|
projectSn: store.sn,
|
||||||
|
enterpriseName: "",
|
||||||
|
userEnterpriseId: store.userInfo?.userEnterpriseId
|
||||||
|
};
|
||||||
|
getCompanyDataList(data).then(res => {
|
||||||
|
companyList.value = res.result;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
//获取 部门 列表
|
||||||
|
const getDepartmentList = () => {
|
||||||
|
let data = {
|
||||||
|
enterpriseId: searchForm.enterpriseId,
|
||||||
|
projectSn: store.sn
|
||||||
|
};
|
||||||
|
getDepartDataList(data).then(res => {
|
||||||
|
departmentList.value = res.result.list;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
//获取企业的 - 班组列表
|
||||||
|
const getTeamList = () => {
|
||||||
|
let data = {
|
||||||
|
enterpriseId: searchForm.enterpriseId,
|
||||||
|
projectSn: store.sn
|
||||||
|
};
|
||||||
|
getTeamDataList(data).then(res => {
|
||||||
|
teamList.value = res.result.list;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const reset = () => {
|
||||||
|
searchForm.workerName = "";
|
||||||
|
searchForm.teamId = "";
|
||||||
|
searchForm.departmentId = "";
|
||||||
|
searchForm.enterpriseId = "";
|
||||||
|
searchForm.startTime = null;
|
||||||
|
searchForm.endTime = null;
|
||||||
|
rangeTime.value = [];
|
||||||
|
getCrewRealTimeData();
|
||||||
|
};
|
||||||
|
const loadMethod = async () => {
|
||||||
|
await getPersonList2();
|
||||||
|
await getQueryTodayList2();
|
||||||
|
await getCrewRealTimeData();
|
||||||
|
};
|
||||||
//将方法暴露给父组件
|
//将方法暴露给父组件
|
||||||
defineExpose({
|
defineExpose({
|
||||||
loadMethod
|
loadMethod
|
||||||
})
|
});
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
getPersonList();
|
getPersonList();
|
||||||
getQueryTodayList();
|
getQueryTodayList();
|
||||||
|
getCrewRealTimeData();
|
||||||
|
getCompanyList();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -333,9 +559,166 @@ onMounted(async () => {
|
|||||||
float: right;
|
float: right;
|
||||||
width: 82%;
|
width: 82%;
|
||||||
margin-left: 1%;
|
margin-left: 1%;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
::v-deep .h-card .content {
|
::v-deep .h-card .content {
|
||||||
margin-top: 1%;
|
margin-top: 1%;
|
||||||
}
|
}
|
||||||
|
.rightHeader {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 10px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 20px;
|
||||||
|
// width: 20%;
|
||||||
|
// left: 80%;
|
||||||
|
// top: 79%;
|
||||||
|
width: 100%;
|
||||||
|
top: 2%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.Selected {
|
||||||
|
height: 5%;
|
||||||
|
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.day {
|
||||||
|
// width: 15%;
|
||||||
|
padding: 0 16px;
|
||||||
|
margin-right: 3%;
|
||||||
|
// margin-left: 55%;
|
||||||
|
}
|
||||||
|
.year {
|
||||||
|
// width: 15%;
|
||||||
|
margin-right: 3%;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tabList {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 5%;
|
||||||
|
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
// position: absolute;
|
||||||
|
left: 75.5%;
|
||||||
|
top: 75%;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: calc(100vw * 14 / 1920);
|
||||||
|
line-height: 30px;
|
||||||
|
justify-content: space-around;
|
||||||
|
div {
|
||||||
|
text-align: center;
|
||||||
|
width: 11%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.selBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 8px;
|
||||||
|
gap: 4px;
|
||||||
|
.search-item {
|
||||||
|
@include flex;
|
||||||
|
max-width: 20%;
|
||||||
|
// margin-right: 20px;
|
||||||
|
span {
|
||||||
|
color: white;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listBox {
|
||||||
|
height: 75%;
|
||||||
|
.listStyle {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
color: #fff;
|
||||||
|
// line-height: 25px;
|
||||||
|
font-size: calc(100vw * 12 / 1920);
|
||||||
|
.list-img {
|
||||||
|
.el-img {
|
||||||
|
width: 72px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
.image-slot {
|
||||||
|
width: 72px;
|
||||||
|
height: 36px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> img {
|
||||||
|
width: 62px;
|
||||||
|
height: 62px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
text-align: center;
|
||||||
|
width: 11%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listStyle:hover {
|
||||||
|
background: #091f3f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// element 组件样式
|
||||||
|
:deep() {
|
||||||
|
.el-date-editor .el-range-input,
|
||||||
|
.el-range-separator {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-input__wrapper {
|
||||||
|
background: #112d59;
|
||||||
|
}
|
||||||
|
.el-input__inner {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-button {
|
||||||
|
background-color: #2758c0;
|
||||||
|
color: white;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .el-range-separator {
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
::v-deep .el-range-input {
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.notoDta {
|
||||||
|
top: 35%;
|
||||||
|
width: 20%;
|
||||||
|
left: 40%;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
img {
|
||||||
|
width: 40%;
|
||||||
|
margin: 5% 30%;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: #fff;
|
||||||
|
font-size: calc(100vw * 14 / 1920);
|
||||||
|
margin: -6% 37%;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user