diff --git a/src/views/sevenLargeScreen/laborManagement/leftTop.vue b/src/views/sevenLargeScreen/laborManagement/leftTop.vue index 82b7c7e7..d6c4c0b6 100644 --- a/src/views/sevenLargeScreen/laborManagement/leftTop.vue +++ b/src/views/sevenLargeScreen/laborManagement/leftTop.vue @@ -23,8 +23,125 @@
- -
+ + +
+
人员实时动态列表
+
今日作业人员趋势
+
+ +
人员总览
@@ -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(); }); @@ -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%; + } +}