686 lines
20 KiB
Vue
686 lines
20 KiB
Vue
<template>
|
||
<div class="overview" v-if="visible1">
|
||
<el-dialog :title="props.title" show-close v-model="visible1" style="min-width: 1500px">
|
||
<el-form ref="ruleFormRef" :model="form" label-width="200px" class="form" size="default">
|
||
<!-- 基础信息 -->
|
||
<div>
|
||
<div class="form-title">
|
||
<div>基本信息</div>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="工程名称:" prop="engineeringName">
|
||
<el-input placeholder="请输入" v-model="form.engineeringName" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="工程类别:" prop="engineeringTypeName">
|
||
<el-input placeholder="请输入" v-model="form.engineeringTypeName" disabled />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="建设单位:" prop="buildEnt">
|
||
<el-input placeholder="请输入" v-model="form.buildEnt" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="施工总承包单位:" prop="opEnt">
|
||
<el-input placeholder="请输入" v-model="form.opEnt" disabled />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="施工许可证编码:" prop="engineeringCode">
|
||
<el-input placeholder="请输入" v-model="form.engineeringCode" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="工程状态:" prop="stateName">
|
||
<el-input placeholder="请输入" v-model="form.stateName" disabled />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="建设地点:" prop="address">
|
||
<el-input placeholder="请输入" v-model="form.address" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="工程总面积:" prop="engineeringArea">
|
||
<el-input placeholder="请输入" v-model="form.engineeringArea" disabled />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="工程用途:" prop="engineeringUseName">
|
||
<el-input placeholder="请输入" v-model="form.engineeringUseName" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="开工/竣工时间:" prop="idCardExpireDate">
|
||
<el-date-picker
|
||
disabled
|
||
v-model="form.dateRange"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
type="daterange"
|
||
placeholder="请选择"
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<!-- 其他信息 -->
|
||
<div>
|
||
<div class="form-tab">
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="参建单位" name="first">
|
||
<div class="search">
|
||
<span>参建单位总数:{{ unitData.length }}</span>
|
||
<span>参建单位类型</span>
|
||
<el-input v-model="searchForm.type" placeholder="请输入" clearable style="width: 160px" />
|
||
<el-button type="primary" style="margin-left: 20px" @click="getUnitData">查询</el-button>
|
||
</div>
|
||
<div class="table">
|
||
<el-table
|
||
:data="unitData"
|
||
border
|
||
height="300"
|
||
class="el-table"
|
||
:header-cell-style="{ backgroundColor: '#EBEEF5', textAlign: 'center' }"
|
||
:cell-style="{ textAlign: 'center' }"
|
||
>
|
||
<el-table-column prop="companyName" label="建设单位名称" />
|
||
<el-table-column prop="type" label="参建类型" />
|
||
<el-table-column prop="creditCode" label="统一社会信用代码" />
|
||
<el-table-column prop="leadName" label="联系人" />
|
||
<el-table-column prop="leadTel" label="联系人电话" />
|
||
<!-- 表格无数据情况 -->
|
||
<template #empty>
|
||
<div class="table-empty">
|
||
<slot name="empty">
|
||
<img src="@/assets/images/notData.png" alt="notData" />
|
||
<div>暂无数据</div>
|
||
</slot>
|
||
</div>
|
||
</template>
|
||
</el-table>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="参建班组" name="second">
|
||
<div class="search">
|
||
<span>参建班组总数:{{ classGroupData.length }}</span>
|
||
</div>
|
||
<div class="table">
|
||
<el-table
|
||
:data="classGroupData"
|
||
border
|
||
height="300"
|
||
class="el-table"
|
||
:header-cell-style="{ backgroundColor: '#EBEEF5', textAlign: 'center' }"
|
||
:cell-style="{ textAlign: 'center' }"
|
||
>
|
||
<!-- <el-table-column prop="id" label="班组ID" /> -->
|
||
<el-table-column prop="teamName" label="班组名称" />
|
||
<el-table-column prop="companyName" label="企业名称" />
|
||
<el-table-column prop="leaderName" label="班组长" />
|
||
<el-table-column prop="leaderTel" label="班组长电话" />
|
||
<!-- 表格无数据情况 -->
|
||
<template #empty>
|
||
<div class="table-empty">
|
||
<slot name="empty">
|
||
<img src="@/assets/images/notData.png" alt="notData" />
|
||
<div>暂无数据</div>
|
||
</slot>
|
||
</div>
|
||
</template>
|
||
</el-table>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="人员信息" name="third">
|
||
<div class="search-two">
|
||
<span>在册人员:{{ memberCountInfo.person }}</span>
|
||
<span>在册管理人员:{{ memberCountInfo.manager }}</span>
|
||
<span>在册建筑工人:{{ memberCountInfo.worker }}</span>
|
||
<span>在职人员:{{ memberCountInfo.inPerson }}</span>
|
||
<span>在职管理人员:{{ memberCountInfo.inManager }}</span>
|
||
<span>在职建筑工人:{{ memberCountInfo.inWorker }}</span>
|
||
</div>
|
||
<div class="search-form">
|
||
<span>企业名称</span>
|
||
<el-select v-model="memberSearch.companySn" style="width: 160px; margin-right: 5px" placeholder="请选择">
|
||
<el-option v-for="item in unitData" :key="item.companySn" :label="item.companyName" :value="item.companySn">
|
||
</el-option>
|
||
</el-select>
|
||
<span>姓名</span>
|
||
<el-input v-model="memberSearch.personName" placeholder="请输入" style="width: 160px; margin-right: 5px" />
|
||
<span>人员类型</span>
|
||
<el-select v-model="memberSearch.personType" style="width: 160px" placeholder="请选择">
|
||
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||
</el-select>
|
||
<el-button type="primary" style="margin-left: 20px" @click="getMemberCountList">查询</el-button>
|
||
</div>
|
||
<div class="table">
|
||
<div class="table-title">人员列表</div>
|
||
<div class="member-list" v-if="memberListData.length > 0">
|
||
<div class="list-item" v-for="(item, index) in memberListData" :key="index">
|
||
<div class="avater-item">
|
||
<img :src="item.portrait" alt="" />
|
||
<div class="avater-right">
|
||
<div>
|
||
<span>{{ item.personName }}</span>
|
||
<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
|
||
</div>
|
||
<span>{{ item.idCard }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="member-type">{{ item.personType == 1 ? "管理" : "工人" }}</div>
|
||
<div class="member-other">公司: {{ item.companyName }}</div>
|
||
<div class="member-other">班组: {{ item.teamName }}</div>
|
||
<div class="member-other">工种: {{ item.workerTypeName }}</div>
|
||
<div class="member-other">电话: {{ item.phone }}</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="table-empty">
|
||
<img src="@/assets/images/notData.png" alt="notData" />
|
||
<div>暂无数据</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="出勤列表" name="fourth">
|
||
<div class="search-three">
|
||
<span>人员类型</span>
|
||
<el-select v-model="attendaceSearch.personType" clearable style="width: 160px" placeholder="请选择">
|
||
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||
</el-select>
|
||
<span>月份</span>
|
||
<el-date-picker
|
||
v-model="attendaceSearch.month"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
style="width: 160px"
|
||
type="month"
|
||
placeholder="选择月"
|
||
>
|
||
</el-date-picker>
|
||
<el-button type="primary" style="margin-left: 20px; margin-right: auto" @click="getAttendanceCountList"
|
||
>查询</el-button
|
||
>
|
||
<div class="attendance-label">
|
||
<span class="successCircle"></span>
|
||
<span class="text">正常出勤</span>
|
||
<span class="errorCircle"></span>
|
||
<span class="text">未出勤</span>
|
||
</div>
|
||
</div>
|
||
<div class="table">
|
||
<el-table
|
||
:data="attendanceListData"
|
||
height="300"
|
||
class="el-table"
|
||
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center' }"
|
||
:cell-style="{ textAlign: 'center' }"
|
||
>
|
||
<el-table-column prop="personName" label="姓名" />
|
||
<el-table-column prop="personName" width="100" label="职位/班组" />
|
||
<el-table-column prop="personName" label="迟到天数" />
|
||
<el-table-column prop="personName" label="早退天数" />
|
||
<el-table-column prop="personName" label="总工时" />
|
||
<el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in monthColumns" :key="index">
|
||
<template #default="scope">
|
||
<span class="successCircle" v-if="scope.row[item.prop]"></span>
|
||
<span class="errorCircle" v-else></span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 表格无数据情况 -->
|
||
<template #empty>
|
||
<div class="table-empty">
|
||
<slot name="empty">
|
||
<img src="@/assets/images/notData.png" alt="notData" />
|
||
<div>暂无数据</div>
|
||
</slot>
|
||
</div>
|
||
</template>
|
||
</el-table>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<div class="statistics-page">
|
||
<Pagination
|
||
:pageable="pageable"
|
||
:background="true"
|
||
:handleSizeChange="handleSizeChange"
|
||
:handleCurrentChange="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, ref, watch, reactive, onBeforeMount } from "vue";
|
||
import Pagination from "@/components/ProTable/components/Pagination.vue";
|
||
import type { FormInstance } from "element-plus";
|
||
import { unitPageList, classGroupList, memberCountData, memberPageList, attendancePageList } from "@/api/modules/goverment";
|
||
const typeOptions = ref([
|
||
{ label: "管理", value: 1 },
|
||
{ label: "工人", value: 2 }
|
||
]);
|
||
const memberSearch = ref({
|
||
companySn: "",
|
||
personName: "",
|
||
personType: null
|
||
});
|
||
const attendaceSearch = ref({
|
||
personType: null,
|
||
month: ""
|
||
});
|
||
const props = defineProps({
|
||
detailsDialog: Boolean,
|
||
title: String,
|
||
formData: Object
|
||
});
|
||
const pageable = ref({
|
||
// 分页参数
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0
|
||
});
|
||
const activeName = ref("first");
|
||
const searchForm = ref({
|
||
type: ""
|
||
});
|
||
const unitData = ref([]);
|
||
const classGroupData = ref([]);
|
||
const memberCountInfo = ref({});
|
||
const memberListData = ref([]);
|
||
const attendanceListData = ref([]);
|
||
const monthColumns: any = [];
|
||
const visible1 = ref(false);
|
||
const emits = defineEmits(["update:detailsDialog", "confirm"]);
|
||
const ruleFormRef = ref<FormInstance>();
|
||
const form = ref({});
|
||
// 获取人员出勤列表数据
|
||
const getAttendanceCountList = async () => {
|
||
console.log(form.value);
|
||
let requestData = {
|
||
current: pageable.value.pageNo,
|
||
size: pageable.value.pageSize,
|
||
engineeringSn: form.value.engineeringSn,
|
||
...attendaceSearch.value
|
||
};
|
||
console.log(666);
|
||
const { result } = await attendancePageList(requestData);
|
||
if (result && result.records) {
|
||
attendanceListData.value = result.records;
|
||
pageable.value.total = +result.total;
|
||
}
|
||
console.log(result);
|
||
};
|
||
// 获取人员信息列表数据
|
||
const getMemberCountList = async () => {
|
||
console.log(form.value);
|
||
let requestData = {
|
||
current: pageable.value.pageNo,
|
||
size: pageable.value.pageSize,
|
||
engineeringSn: form.value.engineeringSn,
|
||
...memberSearch.value
|
||
};
|
||
console.log(666);
|
||
const { result } = await memberPageList(requestData);
|
||
if (result && result.records) {
|
||
memberListData.value = result.records;
|
||
pageable.value.total = +result.total;
|
||
}
|
||
console.log(result);
|
||
};
|
||
// 获取人员信息统计数据
|
||
const getMemberCountData = async () => {
|
||
console.log(form.value);
|
||
let requestData = {
|
||
companySn: "",
|
||
personType: "",
|
||
engineeringSn: form.value.engineeringSn
|
||
};
|
||
console.log(666);
|
||
const { result } = await memberCountData(requestData);
|
||
if (result) {
|
||
memberCountInfo.value = result;
|
||
}
|
||
console.log(result);
|
||
};
|
||
// 获取参建班组数据
|
||
const getClassGroupData = async () => {
|
||
console.log(form.value);
|
||
let requestData = {
|
||
current: pageable.value.pageNo,
|
||
size: pageable.value.pageSize,
|
||
engineeringSn: form.value.engineeringSn
|
||
};
|
||
console.log(666);
|
||
const { result } = await classGroupList(requestData);
|
||
if (result && result.records) {
|
||
classGroupData.value = result.records;
|
||
pageable.value.total = +result.total;
|
||
}
|
||
console.log(result);
|
||
};
|
||
// 获取参建单位数据
|
||
const getUnitData = async () => {
|
||
console.log(form.value);
|
||
let requestData = {
|
||
current: pageable.value.pageNo,
|
||
size: pageable.value.pageSize,
|
||
engineeringSn: form.value.engineeringSn,
|
||
type: searchForm.value.type
|
||
};
|
||
console.log(666);
|
||
const { result } = await unitPageList(requestData);
|
||
if (result && result.records) {
|
||
unitData.value = result.records;
|
||
pageable.value.total = +result.total;
|
||
}
|
||
console.log(result);
|
||
};
|
||
const handleClick = (tab: any, event: any) => {
|
||
console.log(tab.props.name);
|
||
pageable.value.pageNo = 1;
|
||
pageable.value.pageSize = 10;
|
||
let val = tab.props.name;
|
||
if (val == "first") {
|
||
getUnitData();
|
||
} else if (val == "second") {
|
||
getClassGroupData();
|
||
} else if (val == "third") {
|
||
getMemberCountData();
|
||
getMemberCountList();
|
||
} else if (val == "fourth") {
|
||
getAttendanceCountList();
|
||
}
|
||
};
|
||
const handleSizeChange = size => {
|
||
console.log(size);
|
||
pageable.value.pageSize = size;
|
||
};
|
||
const handleCurrentChange = currentPage => {
|
||
console.log(currentPage);
|
||
pageable.value.pageNo = currentPage;
|
||
};
|
||
// 重置表单
|
||
const resetForm = (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return;
|
||
formEl.resetFields();
|
||
};
|
||
// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
|
||
watch(
|
||
() => props.detailsDialog,
|
||
(n, o) => {
|
||
visible1.value = n;
|
||
}
|
||
);
|
||
// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
|
||
watch(visible1, (n, o) => {
|
||
emits("update:detailsDialog", n);
|
||
});
|
||
watch(
|
||
() => props.formData,
|
||
(n, o) => {
|
||
resetForm(ruleFormRef.value);
|
||
console.log(n);
|
||
form.value = n;
|
||
getUnitData();
|
||
if (form.value.startTime && form.value.endTime) {
|
||
form.value.dateRange = [form.value.startTime, form.value.endTime];
|
||
}
|
||
}
|
||
);
|
||
|
||
onBeforeMount(() => {
|
||
for (let i = 0; i < 31; i++) {
|
||
monthColumns.push({
|
||
prop: "day" + (i + 1),
|
||
label: "" + (i + 1)
|
||
});
|
||
}
|
||
});
|
||
onMounted(() => {});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@mixin fullwidth {
|
||
width: -webkit-fill-available;
|
||
width: -moz-available;
|
||
width: stretch;
|
||
}
|
||
@mixin flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
@mixin successCircle {
|
||
display: inline-block;
|
||
width: 11px;
|
||
height: 11px;
|
||
background: #008bff;
|
||
opacity: 1;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
@mixin errorCircle {
|
||
display: inline-block;
|
||
width: 11px;
|
||
height: 11px;
|
||
background: #d9d9d9;
|
||
opacity: 1;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
.overview {
|
||
// background-color: #fff;
|
||
flex: 1;
|
||
.form {
|
||
background-color: #fff;
|
||
.form-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #fff;
|
||
margin-bottom: 32px;
|
||
div {
|
||
position: relative;
|
||
padding-left: 6px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
border-left: 3px solid #008bff;
|
||
}
|
||
}
|
||
.form-tab {
|
||
.search {
|
||
@include flex();
|
||
span:first-child {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
margin-right: auto;
|
||
}
|
||
span:nth-child(2) {
|
||
margin-right: 5px;
|
||
}
|
||
> div {
|
||
.successCircle {
|
||
@include successCircle();
|
||
}
|
||
.errorCircle {
|
||
@include successCircle();
|
||
}
|
||
.text {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-right: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
.search-two {
|
||
@include flex;
|
||
span {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
margin-right: 22px;
|
||
}
|
||
}
|
||
.search-form {
|
||
@include flex;
|
||
margin-top: 24px;
|
||
> span {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.search-three {
|
||
@include flex();
|
||
> span:first-child {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
> span {
|
||
margin-right: 5px;
|
||
}
|
||
> span:nth-child(3) {
|
||
margin-left: 10px;
|
||
}
|
||
> div {
|
||
min-width: 160px;
|
||
.successCircle {
|
||
@include successCircle();
|
||
}
|
||
.errorCircle {
|
||
@include errorCircle();
|
||
}
|
||
.text {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-right: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
.table {
|
||
height: 300px;
|
||
min-height: 300px;
|
||
margin-top: 20px;
|
||
.successCircle {
|
||
@include successCircle();
|
||
}
|
||
.errorCircle {
|
||
@include successCircle();
|
||
}
|
||
.table-title {
|
||
position: relative;
|
||
padding-left: 6px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
border-left: 3px solid #008bff;
|
||
}
|
||
.member-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 24px;
|
||
.list-item {
|
||
width: 352px;
|
||
min-width: 352px;
|
||
height: 201px;
|
||
background: #f8f8f8;
|
||
margin-right: 13px;
|
||
margin-bottom: 20px;
|
||
.avater-item {
|
||
display: flex;
|
||
margin-top: 12px;
|
||
margin-left: 12px;
|
||
> img {
|
||
width: 25px;
|
||
height: 36px;
|
||
align-self: center;
|
||
}
|
||
.avater-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 5px;
|
||
> div {
|
||
display: flex;
|
||
align-items: center;
|
||
img {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.member-type {
|
||
margin-top: 5px;
|
||
margin-left: 12px;
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
.member-other {
|
||
margin-top: 5px;
|
||
margin-left: 12px;
|
||
font-size: 12px;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
.table-empty {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
flex-direction: column;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
.statistics-page {
|
||
margin-top: 10px;
|
||
}
|
||
.row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
> :first-child,
|
||
> :last-child {
|
||
width: 45%;
|
||
}
|
||
}
|
||
:deep(.el-input--default) {
|
||
width: 100%;
|
||
}
|
||
v-deep {
|
||
.date {
|
||
@include fullwidth;
|
||
}
|
||
.el-input__prefix {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.test :deep(.el-input__wrapper) {
|
||
box-shadow: 0 0 0 0;
|
||
}
|
||
.test :deep(.el-input__inner) {
|
||
text-align: center;
|
||
}
|
||
:deep(.el-table__empty-text) {
|
||
min-height: 200px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style>
|