劳务管理添加模块
This commit is contained in:
parent
e12ae0bfed
commit
bb97a23e1e
@ -23,8 +23,125 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="show-more" @click="openDialogHistoryData('人员总览')">人员总览</div>
|
||||
</div>
|
||||
@ -35,14 +152,39 @@
|
||||
import Card from "@/components/card.vue";
|
||||
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { getPersonTypeAndEduStatisticsApi, getQueryTodayAttendanceTrendApi } from "@/api/modules/labor";
|
||||
import { onMounted, reactive, ref, nextTick } from "vue";
|
||||
import noDataImage from "@/assets/images/vehicleManagement/car.png";
|
||||
import {
|
||||
getPersonTypeAndEduStatisticsApi,
|
||||
getQueryTodayAttendanceTrendApi,
|
||||
getRealTimeMoreDataApi,
|
||||
getDepartDataList,
|
||||
getTeamDataList,
|
||||
getCompanyDataList
|
||||
} from "@/api/modules/labor";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const BASEURL = import.meta.env.VITE_API_URL;
|
||||
const store = GlobalStore();
|
||||
const emits = defineEmits(["openDialog"])
|
||||
const emits = defineEmits(["openDialog"]);
|
||||
const presencePerson = ref(0); //实时人数
|
||||
const attendancePerson = 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 yData = ref([]);
|
||||
const option = reactive({
|
||||
@ -225,12 +367,18 @@ const option = reactive({
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialogData = (tip:any) => {
|
||||
emits("openDialog",{type: 1, tip})
|
||||
}
|
||||
const openDialogHistoryData = (tip:any) => {
|
||||
emits("openDialog",{type: 2, tip})
|
||||
}
|
||||
const openDialogData = (tip: any) => {
|
||||
emits("openDialog", { type: 1, tip });
|
||||
};
|
||||
const openDialogHistoryData = (tip: any) => {
|
||||
emits("openDialog", { type: 2, tip });
|
||||
};
|
||||
|
||||
const timeChange = (e: any) => {
|
||||
searchForm.startTime = e[0];
|
||||
searchForm.endTime = e[1];
|
||||
// getCrewRealTimeData();
|
||||
};
|
||||
|
||||
function drawChart() {
|
||||
let myEchartsNum = echarts.init(document.getElementById("myEchartsNum"));
|
||||
@ -277,9 +425,9 @@ const getQueryTodayList2 = async () => {
|
||||
projectSn: store.sn
|
||||
});
|
||||
if (res.result) {
|
||||
let tempArr: any = []
|
||||
xData.value = tempArr
|
||||
yData.value = tempArr
|
||||
let tempArr: any = [];
|
||||
xData.value = tempArr;
|
||||
yData.value = tempArr;
|
||||
res.result.forEach(item => {
|
||||
xData.value.push(item.time);
|
||||
yData.value.push(item.num);
|
||||
@ -287,17 +435,95 @@ const getQueryTodayList2 = async () => {
|
||||
}
|
||||
drawChart();
|
||||
};
|
||||
const loadMethod = async () =>{
|
||||
await getPersonList2()
|
||||
await getQueryTodayList2()
|
||||
}
|
||||
const handleChangeChecked = type => {
|
||||
checked.value = type;
|
||||
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({
|
||||
loadMethod
|
||||
})
|
||||
});
|
||||
onMounted(async () => {
|
||||
getPersonList();
|
||||
getQueryTodayList();
|
||||
getCrewRealTimeData();
|
||||
getCompanyList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -333,9 +559,166 @@ onMounted(async () => {
|
||||
float: right;
|
||||
width: 82%;
|
||||
margin-left: 1%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user