feat: 政务端劳务实名制功能新增(部分)
This commit is contained in:
kun
parent
b21869e5ae
commit
3959309e78
@ -361,7 +361,22 @@ export const addDividerQuestion = (params: FormData) => {
|
||||
export const attendanceStatistics = () => {
|
||||
return http.get(BASEURL + `/gov/workerStat/attendStatistics`);
|
||||
};
|
||||
|
||||
// 人员出勤监管-出勤统计数据
|
||||
export const attendanceCountStatistics = (params: any) => {
|
||||
return http.post(BASEURL + `/gov/workerStat/attendRecord`, params);
|
||||
};
|
||||
// 工人属性分析统计数据
|
||||
export const analysisCountStatistics = () => {
|
||||
return http.get(BASEURL + `/gov/workerStat/attribute`);
|
||||
};
|
||||
// 施工项目数据
|
||||
export const workProjectList = (params: any) => {
|
||||
return http.post(BASEURL + `/gov/workerStat/engineeringPage`, params);
|
||||
};
|
||||
// 参建单位分页数据
|
||||
export const unitPageList = (params: any) => {
|
||||
return http.post(BASEURL + `/gov/company/page`, params);
|
||||
};
|
||||
// 列表查询视频管理表信息
|
||||
// export const getVideo = (params: { projectSn?: string; engineeringSn?: string }) => {
|
||||
// return http.post<ResPage<User.ResUserList>>(BASEURL + `/gov/projectMonitor/engineeringTree`, params);
|
||||
|
||||
BIN
src/assets/images/govermentImg/projectIcon.png
Normal file
BIN
src/assets/images/govermentImg/projectIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@ -16,20 +16,22 @@
|
||||
<div class="statistics-search">
|
||||
<el-card shadow="never" class="topCard">
|
||||
<span style="margin: 0 10px 2px 0">人员分类</span>
|
||||
<el-select v-model="searchForm.personType" placeholder="请选择">
|
||||
<el-select v-model="searchForm.personType" clearable placeholder="请选择">
|
||||
<el-option v-for="item in categoryList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<span style="margin: 0 10px 2px 20px">提交时间</span>
|
||||
<span style="margin: 0 10px 2px 20px">出勤时间</span>
|
||||
<el-date-picker
|
||||
v-model="searchForm.dateRange"
|
||||
style="width: 300px"
|
||||
type="daterange"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button type="primary" style="margin-left: 20px" @click="handleSubmit(ruleFormRef)">查询</el-button>
|
||||
<el-button type="primary" style="margin-left: 20px" @click="handleSubmit">查询</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="statistics-echart">
|
||||
@ -42,27 +44,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="ProjectSupervisionRecord">
|
||||
import { ref, reactive, nextTick, onMounted } from "vue";
|
||||
import { ElMessage, ElMessageBox, ElTree, FormInstance } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ColumnProps } from "@/components/ProTable/interface";
|
||||
import { useHandleData } from "@/hooks/useHandleData";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { getRelevanceList } from "@/api/modules/common";
|
||||
import { jxj_User } from "@/api/types";
|
||||
import engineeringDrawer from "@/components/engineeringDrawer/index.vue";
|
||||
import allEngineering from "@/components/allEngineering/index.vue";
|
||||
import TreeFilter from "@/components/TreeFilter/index.vue";
|
||||
import AMap from "@/components/AMap/AMap.vue";
|
||||
import { editRolePermissions, getTreemRoleList, getTreeByIdList } from "@/api/modules/goverment";
|
||||
import DialogForm from "@/components/DialogForm/index.vue";
|
||||
import { attendanceStatistics } from "@/api/modules/goverment";
|
||||
|
||||
import { Delete } from "@element-plus/icons-vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ElMessage, FormInstance } from "element-plus";
|
||||
import { attendanceStatistics, attendanceCountStatistics } from "@/api/modules/goverment";
|
||||
import * as echarts from "echarts";
|
||||
import { useEcharts } from "@/hooks/useEcharts";
|
||||
import { start } from "repl";
|
||||
import dayjs from "dayjs";
|
||||
const statisticsOption = ref([
|
||||
{
|
||||
name: "在职人数",
|
||||
@ -93,7 +80,7 @@ const echartsRef = ref<HTMLElement>();
|
||||
|
||||
const searchForm = ref({
|
||||
personType: null,
|
||||
dateRange: []
|
||||
dateRange: null
|
||||
});
|
||||
const categoryList = ref([
|
||||
{
|
||||
@ -105,21 +92,119 @@ const categoryList = ref([
|
||||
value: 2
|
||||
}
|
||||
]);
|
||||
// 点击发送按钮
|
||||
const handleSubmit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "请完善表单信息！",
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
// 绘制echart图
|
||||
const drawEchart = (data: any) => {
|
||||
let xArr: any = [];
|
||||
let yOneArr: any = [];
|
||||
let yTwoArr: any = [];
|
||||
let yThreeArr: any = [];
|
||||
data.map(item => {
|
||||
xArr.push(item.dayDate);
|
||||
yOneArr.push(item.personNum);
|
||||
yTwoArr.push(item.attend);
|
||||
yThreeArr.push(item.ratio);
|
||||
});
|
||||
setTimeout(function () {
|
||||
let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
|
||||
let option: echarts.EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999"
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 60,
|
||||
top: 120,
|
||||
width: "94%"
|
||||
},
|
||||
legend: {
|
||||
right: 0,
|
||||
top: 0,
|
||||
data: ["出勤总数(人)", "在职总数(人)", "出勤率(%)"]
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: xArr,
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位(人)",
|
||||
nameTextStyle: {
|
||||
align: "right"
|
||||
},
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "出勤率(%)",
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 10
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "出勤总数(人)",
|
||||
type: "bar",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
borderRadius: [11, 11, 11, 11]
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " ml";
|
||||
}
|
||||
},
|
||||
data: yOneArr
|
||||
},
|
||||
{
|
||||
name: "在职总数(人)",
|
||||
type: "bar",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
borderRadius: [11, 11, 11, 11]
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " ml";
|
||||
}
|
||||
},
|
||||
data: yTwoArr
|
||||
},
|
||||
{
|
||||
name: "出勤率(%)",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " °C";
|
||||
}
|
||||
},
|
||||
data: yThreeArr
|
||||
}
|
||||
]
|
||||
};
|
||||
useEcharts(myChart, option);
|
||||
}, 500);
|
||||
};
|
||||
// 点击查询按钮
|
||||
const handleSubmit = async () => {
|
||||
getAttendanceStatistics();
|
||||
};
|
||||
// 获取顶部统计数据
|
||||
const getStatistics = async () => {
|
||||
const res = await attendanceStatistics();
|
||||
statisticsOption.value.map(item => {
|
||||
@ -127,101 +212,25 @@ const getStatistics = async () => {
|
||||
});
|
||||
console.log(res);
|
||||
};
|
||||
onMounted(() => {
|
||||
getStatistics();
|
||||
let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
|
||||
let option: echarts.EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999"
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 60,
|
||||
top: 120,
|
||||
width: "94%"
|
||||
},
|
||||
legend: {
|
||||
right: 0,
|
||||
top: 0,
|
||||
data: ["出勤总数(人)", "在职总数(人)", "出勤率(%)"]
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位(人)",
|
||||
nameTextStyle: {
|
||||
align: "right"
|
||||
},
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "出勤率(%)",
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "出勤总数(人)",
|
||||
type: "bar",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
borderRadius: [11, 11, 11, 11]
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " ml";
|
||||
}
|
||||
},
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
||||
},
|
||||
{
|
||||
name: "在职总数(人)",
|
||||
type: "bar",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
borderRadius: [11, 11, 11, 11]
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " ml";
|
||||
}
|
||||
},
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
||||
},
|
||||
{
|
||||
name: "出勤率(%)",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " °C";
|
||||
}
|
||||
},
|
||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
}
|
||||
]
|
||||
// 获取出勤统计数据
|
||||
const getAttendanceStatistics = async () => {
|
||||
let requestData = {
|
||||
...searchForm.value,
|
||||
startTime: searchForm.value.dateRange ? searchForm.value.dateRange[0] : "",
|
||||
endTime: searchForm.value.dateRange ? searchForm.value.dateRange[1] : ""
|
||||
};
|
||||
useEcharts(myChart, option);
|
||||
delete requestData.dateRange;
|
||||
const res = await attendanceCountStatistics(requestData);
|
||||
// statisticsOption.value.map(item => {
|
||||
// item.value = res.result[item.prop];
|
||||
// });
|
||||
console.log(res);
|
||||
drawEchart(res.result);
|
||||
};
|
||||
onMounted(() => {
|
||||
searchForm.value.dateRange = [dayjs().subtract(15, "day").format("YYYY-MM-DD HH:mm:ss"), dayjs().format("YYYY-MM-DD HH:mm:ss")];
|
||||
getStatistics();
|
||||
getAttendanceStatistics();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="overview">
|
||||
<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">
|
||||
<!-- 基础信息 -->
|
||||
@ -8,44 +8,45 @@
|
||||
<div>基本信息</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="工程名称:" prop="personName">
|
||||
<el-input placeholder="请输入" v-model="form.personName" disabled />
|
||||
<el-form-item label="工程名称:" prop="engineeringName">
|
||||
<el-input placeholder="请输入" v-model="form.engineeringName" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="类别:" prop="sex">
|
||||
<el-input placeholder="请输入" v-model="form.personName" disabled />
|
||||
<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="birthday">
|
||||
<el-input placeholder="请输入" v-model="form.personName" disabled />
|
||||
<el-form-item label="建设单位:" prop="buildEnt">
|
||||
<el-input placeholder="请输入" v-model="form.buildEnt" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="施工总承包单位:" prop="nation">
|
||||
<el-input placeholder="请输入" v-model="form.personName" disabled />
|
||||
<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="idCard">
|
||||
<el-input placeholder="请输入" v-model="form.idCard" />
|
||||
<el-form-item label="施工许可证编码:" prop="engineeringCode">
|
||||
<el-input placeholder="请输入" v-model="form.engineeringCode" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目状态:" prop="idCard">
|
||||
<el-input placeholder="请输入" v-model="form.idCard" />
|
||||
<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="issuingAuthorityForIdCard">
|
||||
<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
|
||||
<el-form-item label="建设地点:" prop="address">
|
||||
<el-input placeholder="请输入" v-model="form.address" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="工程总面积:" prop="idCardExpireDate">
|
||||
<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
|
||||
<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="issuingAuthorityForIdCard">
|
||||
<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
|
||||
<el-form-item label="工程用途:" prop="engineeringUseName">
|
||||
<el-input placeholder="请输入" v-model="form.engineeringUseName" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="工程总面积:" prop="idCardExpireDate">
|
||||
<el-form-item label="开工/竣工时间:" prop="idCardExpireDate">
|
||||
<el-date-picker
|
||||
v-model="form.entryTime"
|
||||
disabled
|
||||
v-model="form.dateRange"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
@ -53,11 +54,6 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="建设地点:" prop="issuingAuthorityForIdCard">
|
||||
<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 其他信息 -->
|
||||
<div>
|
||||
@ -65,24 +61,25 @@
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="参建单位" name="first">
|
||||
<div class="search">
|
||||
<span>参建单位总数:3</span>
|
||||
<span>参建单位</span>
|
||||
<el-input v-model="searchForm.projectName" placeholder="请输入" style="width: 160px" />
|
||||
<el-button type="primary" style="margin-left: 20px">发送</el-button>
|
||||
<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
|
||||
max-height="340"
|
||||
height="300"
|
||||
class="el-table"
|
||||
:header-cell-style="{ backgroundColor: '#EBEEF5', textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
>
|
||||
<el-table-column prop="personName" label="建设单位名称" />
|
||||
<el-table-column prop="personName" label="统一社会信用代码" />
|
||||
<el-table-column prop="personName" label="联系人" />
|
||||
<el-table-column prop="personName" label="联系人电话" />
|
||||
<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="联系人电话" />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
@ -202,7 +199,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch, reactive, onBeforeMount } from "vue";
|
||||
import Pagination from "@/components/ProTable/components/Pagination.vue";
|
||||
import type { FormInstance, UploadProps } from "element-plus";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { unitPageList } from "@/api/modules/goverment";
|
||||
const props = defineProps({
|
||||
detailsDialog: Boolean,
|
||||
title: String,
|
||||
@ -212,9 +210,34 @@ const pageable = ref({
|
||||
// 分页参数
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
total: 30
|
||||
total: 0
|
||||
});
|
||||
const activeName = ref("first");
|
||||
const searchForm = ref({
|
||||
type: ""
|
||||
});
|
||||
const unitData = ref([]);
|
||||
const monthColumns: any = [];
|
||||
const visible1 = ref(false);
|
||||
const emits = defineEmits(["update:detailsDialog", "confirm"]);
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const form = ref({});
|
||||
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, event);
|
||||
};
|
||||
@ -224,22 +247,6 @@ const handleSizeChange = size => {
|
||||
const handleCurrentChange = currentPage => {
|
||||
console.log(currentPage);
|
||||
};
|
||||
const searchForm = ref({
|
||||
projectName: ""
|
||||
});
|
||||
const unitData = ref([
|
||||
{
|
||||
personName: 111
|
||||
}
|
||||
]);
|
||||
const monthColumns: any = [];
|
||||
const visible1 = ref(false);
|
||||
const changeType = ref(1);
|
||||
const filelist = ref([]);
|
||||
const emits = defineEmits(["update:detailsDialog", "confirm"]);
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const educationLevelList: any = ref([]);
|
||||
const form = ref();
|
||||
// 重置表单
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
@ -260,8 +267,12 @@ watch(
|
||||
() => props.formData,
|
||||
(n, o) => {
|
||||
resetForm(ruleFormRef.value);
|
||||
console.log(props.formData);
|
||||
form.value = reactive(n);
|
||||
console.log(n);
|
||||
form.value = n;
|
||||
getUnitData();
|
||||
if (form.value.startTime && form.value.endTime) {
|
||||
form.value.dateRange = [form.value.startTime, form.value.endTime];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@ -273,11 +284,7 @@ onBeforeMount(() => {
|
||||
});
|
||||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
// 初始化 配置formData
|
||||
console.log(props.formData);
|
||||
form.value = reactive(props.formData);
|
||||
});
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -3,36 +3,50 @@
|
||||
<div class="statistics-search">
|
||||
<el-card shadow="never" class="topCard">
|
||||
<span style="margin: 0 10px 2px 0; white-space: nowrap">工程名称</span>
|
||||
<el-input v-model="searchForm.projectName" placeholder="请选择输入" />
|
||||
<el-button type="primary" style="margin-left: 20px" @click="handleSubmit()">发送</el-button>
|
||||
<el-input v-model="searchForm.engineeringName" clearable placeholder="请选择输入" style="width: 200px" />
|
||||
<el-button type="primary" style="margin-left: 20px" @click="handleSubmit()">查询</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="statistics-list">
|
||||
<el-card shadow="never" class="bottomCard">
|
||||
<div class="statistics-item">
|
||||
<div class="item-child">
|
||||
<div class="item-child" v-for="(item, index) in projectList" :key="index">
|
||||
<div class="top-title">
|
||||
<span>欧宝迪树脂(珠海)有限公司金湾区高栏港化工业产业园年产400000吨水性树脂生产线项目</span>
|
||||
<el-button type="primary" style="margin-left: 20px" @click="showDetails()">查看</el-button>
|
||||
<span>{{ item.engineeringName }}</span>
|
||||
<el-button type="primary" style="margin-left: 20px" @click="showDetails(item)">查看</el-button>
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<img src="../../../../assets/images/govermentImg/在职人数.png" alt="" />
|
||||
<img src="../../../../assets/images/govermentImg/projectIcon.png" alt="" />
|
||||
<div>
|
||||
<div class="content-item">
|
||||
<span>开工时间:2023-01-01</span>
|
||||
<span>工程编号:440404202106010201</span>
|
||||
<span>开工时间:{{ item.startTime }}</span>
|
||||
<span>工程编号:{{ item.engineeringCode }}</span>
|
||||
</div>
|
||||
<div class="content-item">
|
||||
<span>计划竣工时间:2023-01-01</span>
|
||||
<span>项目状态:440404202106010201</span>
|
||||
<span>计划竣工时间:{{ item.endTime }}</span>
|
||||
<span>工程状态:{{ item.state == 2 ? "在建" : "未开工" }}</span>
|
||||
</div>
|
||||
<div class="content-item">
|
||||
<span>建设单位:2023-01-01</span>
|
||||
<span>行政区划:440404202106010201</span>
|
||||
<span>建设单位:{{ item.buildEnt }}</span>
|
||||
<span>行政区划:{{ item.address }}</span>
|
||||
</div>
|
||||
<div class="content-item">
|
||||
<span>施工单位:2023-01-01</span>
|
||||
<span>项目分类:440404202106010201</span>
|
||||
<span>施工单位:{{ item.opEnt }}</span>
|
||||
<span
|
||||
>项目分类:{{
|
||||
item.engineeringType == 1
|
||||
? "房屋建筑"
|
||||
: item.engineeringType == 2
|
||||
? "市政公用工程"
|
||||
: item.engineeringType == 3
|
||||
? "轨道交通工程"
|
||||
: item.engineeringType == 4
|
||||
? "公共建设项目"
|
||||
: item.engineeringType == 5
|
||||
? "其他"
|
||||
: ""
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,29 +70,54 @@
|
||||
import { ref, reactive, nextTick, onMounted } from "vue";
|
||||
import Pagination from "@/components/ProTable/components/Pagination.vue";
|
||||
import projectDetails from "./components/projectDetails.vue";
|
||||
import { workProjectList } from "@/api/modules/goverment";
|
||||
const searchForm = ref({
|
||||
projectName: ""
|
||||
engineeringName: ""
|
||||
});
|
||||
const pageable = ref({
|
||||
// 分页参数
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
total: 30
|
||||
total: 0
|
||||
});
|
||||
const detailsDialog = ref(false);
|
||||
const formData = ref({});
|
||||
const showDetails = () => {
|
||||
const projectList = ref([]);
|
||||
const getData = async () => {
|
||||
let requestData = {
|
||||
engineeringName: searchForm.value.engineeringName,
|
||||
current: pageable.value.pageNo,
|
||||
size: pageable.value.pageSize
|
||||
};
|
||||
const { result } = await workProjectList(requestData);
|
||||
console.log(result);
|
||||
if (result && result.records) {
|
||||
projectList.value = result.records;
|
||||
pageable.value.total = +result.total;
|
||||
}
|
||||
};
|
||||
const showDetails = (obj: any) => {
|
||||
formData.value = obj;
|
||||
detailsDialog.value = true;
|
||||
};
|
||||
const handleSizeChange = size => {
|
||||
console.log(size);
|
||||
pageable.value.pageSize = size;
|
||||
getData();
|
||||
};
|
||||
const handleCurrentChange = currentPage => {
|
||||
console.log(currentPage);
|
||||
pageable.value.pageNo = currentPage;
|
||||
getData();
|
||||
};
|
||||
// 点击发送按钮
|
||||
const handleSubmit = async () => {};
|
||||
onMounted(() => {});
|
||||
const handleSubmit = async () => {
|
||||
pageable.value.pageNo = 1;
|
||||
getData();
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.table-box {
|
||||
@ -99,6 +138,7 @@ onMounted(() => {});
|
||||
.statistics-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.item-child {
|
||||
width: 794px;
|
||||
min-width: 794px;
|
||||
@ -106,6 +146,7 @@ onMounted(() => {});
|
||||
background: #ffffff;
|
||||
opacity: 1;
|
||||
border: 1px solid #d9d9d9;
|
||||
margin-bottom: 15px;
|
||||
.top-title {
|
||||
height: 56px;
|
||||
background: #f5f7f9;
|
||||
@ -136,16 +177,22 @@ onMounted(() => {});
|
||||
margin: 16px 0;
|
||||
flex: 1;
|
||||
.content-item {
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,19 +21,8 @@
|
||||
<el-table-column label="年龄" align="right" width="80">
|
||||
<el-table-column prop="type" label="类型" width="80"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="data1" label="20岁以下">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.personType == 1 ? "管理" : "工人" }}</span>
|
||||
</template>
|
||||
<el-table-column :prop="'data' + index" :label="item" v-for="(item, index) in ageTableHead" :key="index">
|
||||
</el-table-column>
|
||||
<el-table-column prop="data2" label="21-30岁" />
|
||||
<el-table-column prop="data3" label="31-50岁">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.passType == 1 ? "进入" : "离开" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="data4" label="51-60岁" />
|
||||
<el-table-column prop="data5" label="60岁以上" />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -57,7 +46,14 @@
|
||||
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
>
|
||||
<el-table-column prop="company" label="姓名" />
|
||||
<el-table-column type="index" width="80" label="排名" />
|
||||
<el-table-column prop="attribute" label="工种" />
|
||||
<el-table-column prop="workerNum" label="人数" />
|
||||
<el-table-column prop="ratio" label="占比(%)">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.ratio ? scope.row.ratio : 0 }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -67,13 +63,20 @@
|
||||
<div class="count-title">在册人员地域统计</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="workTypeList"
|
||||
:data="workAddressList"
|
||||
max-height="340"
|
||||
class="el-table"
|
||||
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
>
|
||||
<el-table-column prop="company" label="姓名" />
|
||||
<el-table-column type="index" width="80" label="排名" />
|
||||
<el-table-column prop="attribute" label="地域" />
|
||||
<el-table-column prop="workerNum" label="人数" />
|
||||
<el-table-column prop="ratio" label="占比(%)">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.ratio ? scope.row.ratio : 0 }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -83,13 +86,20 @@
|
||||
<div class="count-title">在册人员工民族统计</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="workTypeList"
|
||||
:data="workNationList"
|
||||
max-height="340"
|
||||
class="el-table"
|
||||
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
>
|
||||
<el-table-column prop="company" label="姓名" />
|
||||
<el-table-column type="index" width="80" label="排名" />
|
||||
<el-table-column prop="attribute" label="民族" />
|
||||
<el-table-column prop="workerNum" label="人数" />
|
||||
<el-table-column prop="ratio" label="占比(%)">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.ratio ? scope.row.ratio : 0 }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -99,32 +109,48 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="ProjectSupervisionRecord">
|
||||
import { ref, reactive, nextTick, onMounted } from "vue";
|
||||
import { ColumnProps } from "@/components/ProTable/interface";
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { useEcharts } from "@/hooks/useEcharts";
|
||||
import { analysisCountStatistics } from "@/api/modules/goverment";
|
||||
const echartsRef = ref<HTMLElement>();
|
||||
const echartsRef2 = ref<HTMLElement>();
|
||||
const echartsRef3 = ref<HTMLElement>();
|
||||
const ageStatistics = ref([
|
||||
const ageStatistics = ref<any>([
|
||||
{
|
||||
type: "在册",
|
||||
data1: 9915,
|
||||
data2: 9915,
|
||||
data3: 9915,
|
||||
data4: 9915,
|
||||
data5: 9915
|
||||
type: "在册"
|
||||
},
|
||||
{
|
||||
type: "在册",
|
||||
data1: 9915,
|
||||
data2: 9915,
|
||||
data3: 9915,
|
||||
data4: 9915,
|
||||
data5: 9915
|
||||
type: "在职"
|
||||
}
|
||||
]);
|
||||
const initEcharts1 = () => {
|
||||
const ageTableHead = ref([]);
|
||||
const workTypeList = ref([]);
|
||||
const workAddressList = ref([]);
|
||||
const workNationList = ref([]);
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
const { result } = await analysisCountStatistics();
|
||||
initEcharts1(result);
|
||||
initEcharts2(result);
|
||||
initEcharts3(result);
|
||||
if (result) {
|
||||
result.workerAge.map((item, index) => {
|
||||
ageTableHead.value.push(item.attribute);
|
||||
ageStatistics.value[0]["data" + index] = item.workerNum;
|
||||
ageStatistics.value[1]["data" + index] = item.inServiceWorkerNum;
|
||||
});
|
||||
workTypeList.value = result.workerTypes;
|
||||
workAddressList.value = result.workerAddresses;
|
||||
workNationList.value = result.workerNations;
|
||||
}
|
||||
console.log(result);
|
||||
};
|
||||
const initEcharts1 = (data: any) => {
|
||||
let dataArr = [];
|
||||
if (data) {
|
||||
dataArr = [data.workerNum, data.inServiceWorkerNum];
|
||||
}
|
||||
let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
|
||||
let option: echarts.EChartsOption = {
|
||||
tooltip: {
|
||||
@ -136,6 +162,7 @@ const initEcharts1 = () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
color: ["#008BFF"],
|
||||
grid: {
|
||||
left: 60,
|
||||
top: 80,
|
||||
@ -144,12 +171,12 @@ const initEcharts1 = () => {
|
||||
legend: {
|
||||
right: 0,
|
||||
top: 8,
|
||||
data: ["在职", "在册"]
|
||||
data: ["人数"]
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
data: ["在册", "在职"],
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
@ -161,15 +188,12 @@ const initEcharts1 = () => {
|
||||
name: "单位(人)",
|
||||
nameTextStyle: {
|
||||
align: "right"
|
||||
},
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "在职",
|
||||
name: "人数",
|
||||
type: "bar",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
@ -180,27 +204,23 @@ const initEcharts1 = () => {
|
||||
return value + " ml";
|
||||
}
|
||||
},
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
||||
},
|
||||
{
|
||||
name: "在册",
|
||||
type: "bar",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
borderRadius: [11, 11, 11, 11]
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " ml";
|
||||
}
|
||||
},
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
||||
data: dataArr
|
||||
}
|
||||
]
|
||||
};
|
||||
useEcharts(myChart, option);
|
||||
};
|
||||
const initEcharts2 = () => {
|
||||
const initEcharts2 = (data: any) => {
|
||||
let xArr: any = [];
|
||||
let dataArr1: any = [];
|
||||
let dataArr2: any = [];
|
||||
if (data) {
|
||||
data.workerAge.map(item => {
|
||||
xArr.push(item.attribute);
|
||||
dataArr1.push(item.workerNum);
|
||||
dataArr2.push(item.inServiceWorkerNum);
|
||||
});
|
||||
}
|
||||
let myChart: echarts.ECharts = echarts.init(echartsRef2.value as HTMLElement);
|
||||
let option: echarts.EChartsOption = {
|
||||
tooltip: {
|
||||
@ -212,6 +232,7 @@ const initEcharts2 = () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
color: ["#008BFF", "#60CE83"],
|
||||
grid: {
|
||||
left: 60,
|
||||
top: 80,
|
||||
@ -226,7 +247,7 @@ const initEcharts2 = () => {
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
data: xArr,
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
@ -238,10 +259,7 @@ const initEcharts2 = () => {
|
||||
name: "单位(人)",
|
||||
nameTextStyle: {
|
||||
align: "right"
|
||||
},
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
@ -257,7 +275,7 @@ const initEcharts2 = () => {
|
||||
return value + " ml";
|
||||
}
|
||||
},
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
||||
data: dataArr1
|
||||
},
|
||||
{
|
||||
name: "在册",
|
||||
@ -271,13 +289,21 @@ const initEcharts2 = () => {
|
||||
return value + " ml";
|
||||
}
|
||||
},
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
||||
data: dataArr2
|
||||
}
|
||||
]
|
||||
};
|
||||
useEcharts(myChart, option);
|
||||
};
|
||||
const initEcharts3 = () => {
|
||||
const initEcharts3 = (data: any) => {
|
||||
let legendArr: any = [];
|
||||
let dataArr: any = [];
|
||||
if (data) {
|
||||
data.workerSex.map(item => {
|
||||
legendArr.push(item.attribute);
|
||||
dataArr.push({ value: item.workerNum, name: item.attribute });
|
||||
});
|
||||
}
|
||||
let myChart: echarts.ECharts = echarts.init(echartsRef3.value as HTMLElement);
|
||||
let option: echarts.EChartsOption = {
|
||||
tooltip: {
|
||||
@ -286,11 +312,12 @@ const initEcharts3 = () => {
|
||||
legend: {
|
||||
right: 0,
|
||||
top: 8,
|
||||
data: ["男性", "女性"]
|
||||
data: legendArr
|
||||
},
|
||||
color: ["#008BFF", "#60CE83"],
|
||||
series: [
|
||||
{
|
||||
name: "Access From",
|
||||
name: "人数",
|
||||
type: "pie",
|
||||
radius: ["40%", "30%"],
|
||||
avoidLabelOverlap: true,
|
||||
@ -299,20 +326,18 @@ const initEcharts3 = () => {
|
||||
position: "outside",
|
||||
formatter: "{b}: {d}% {c}人"
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: "男性" },
|
||||
{ value: 735, name: "女性" }
|
||||
]
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 50
|
||||
},
|
||||
data: dataArr
|
||||
}
|
||||
]
|
||||
};
|
||||
useEcharts(myChart, option);
|
||||
};
|
||||
const workTypeList = ref([{ company: 123 }]);
|
||||
onMounted(() => {
|
||||
initEcharts1();
|
||||
initEcharts2();
|
||||
initEcharts3();
|
||||
onMounted(async () => {
|
||||
await getData();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -182,7 +182,7 @@ const formConfig = reactive({
|
||||
{
|
||||
required: true,
|
||||
message: "请输入经纬度",
|
||||
trigger: "blur"
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
engineeringSn: [
|
||||
|
||||
@ -118,36 +118,36 @@ export const rules = ref<FormRules>({
|
||||
{
|
||||
required: true,
|
||||
message: "请输入工程造价",
|
||||
trigger: "change"
|
||||
trigger: "blur"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
message: "请输入数字",
|
||||
trigger: "change"
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
engineeringArea: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入工程总面积",
|
||||
trigger: "change"
|
||||
trigger: "blur"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
message: "请输入数字",
|
||||
trigger: "change"
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
engineeringLength: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入工程总长度（m）",
|
||||
trigger: "change"
|
||||
trigger: "blur"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
message: "请输入数字",
|
||||
trigger: "change"
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
isImportant: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user