fix: 质量监督页面新增
This commit is contained in:
kun
parent
6fb53eb9ec
commit
5e485300b7
@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<div class="overview">
|
||||
<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="personName">
|
||||
<el-input placeholder="请输入" v-model="form.personName" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="类别:" prop="sex">
|
||||
<el-input placeholder="请输入" v-model="form.personName" 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>
|
||||
<el-form-item label="施工总承包单位:" prop="nation">
|
||||
<el-input placeholder="请输入" v-model="form.personName" disabled />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="施工许可证编码:" prop="idCard">
|
||||
<el-input placeholder="请输入" v-model="form.idCard" />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目状态:" prop="idCard">
|
||||
<el-input placeholder="请输入" v-model="form.idCard" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="项目联系人:" prop="issuingAuthorityForIdCard">
|
||||
<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工程总面积:" prop="idCardExpireDate">
|
||||
<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="工程用途:" prop="issuingAuthorityForIdCard">
|
||||
<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工程总面积:" prop="idCardExpireDate">
|
||||
<el-date-picker
|
||||
v-model="form.entryTime"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</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>
|
||||
<div class="form-tab">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="参建班组" name="first">
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="unitData"
|
||||
border
|
||||
max-height="340"
|
||||
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>
|
||||
</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, UploadProps } from "element-plus";
|
||||
const props = defineProps({
|
||||
detailsDialog: Boolean,
|
||||
title: String,
|
||||
formData: Object
|
||||
});
|
||||
const pageable = ref({
|
||||
// 分页参数
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
total: 30
|
||||
});
|
||||
const activeName = ref("first");
|
||||
const handleClick = (tab: any, event: any) => {
|
||||
console.log(tab, event);
|
||||
};
|
||||
const handleSizeChange = size => {
|
||||
console.log(size);
|
||||
};
|
||||
const handleCurrentChange = currentPage => {
|
||||
console.log(currentPage);
|
||||
};
|
||||
const searchForm = ref({
|
||||
projectName: ""
|
||||
});
|
||||
const unitData = ref([
|
||||
{
|
||||
personName: 111
|
||||
}
|
||||
]);
|
||||
const monthColumns = [];
|
||||
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;
|
||||
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(props.formData);
|
||||
form.value = reactive(n);
|
||||
}
|
||||
);
|
||||
|
||||
onBeforeMount(() => {
|
||||
for (let i = 0; i < 31; i++) {
|
||||
monthColumns.push({
|
||||
prop: "day" + (i + 1),
|
||||
label: "" + (i + 1)
|
||||
});
|
||||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
// 初始化 配置formData
|
||||
console.log(props.formData);
|
||||
form.value = reactive(props.formData);
|
||||
});
|
||||
</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 {
|
||||
.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 {
|
||||
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;
|
||||
margin-top: 24px;
|
||||
.list-item {
|
||||
width: 352px;
|
||||
min-width: 352px;
|
||||
height: 201px;
|
||||
background: #f8f8f8;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
158
src/views/goverment/laborRealName/memberSelect/index.vue
Normal file
158
src/views/goverment/laborRealName/memberSelect/index.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<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-card>
|
||||
</div>
|
||||
<div class="statistics-list">
|
||||
<el-card shadow="never" class="bottomCard">
|
||||
<div class="statistics-item">
|
||||
<div class="item-child">
|
||||
<div class="top-title">
|
||||
<span>万天瑶</span>
|
||||
<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
|
||||
<el-button type="primary" style="margin-left: 20px" @click="showDetails()">查看</el-button>
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<img src="../../../../assets/images/govermentImg/在职人数.png" alt="" />
|
||||
<div>
|
||||
<div class="content-item">
|
||||
<span>开工时间:2023-01-01</span>
|
||||
</div>
|
||||
<div class="content-item">
|
||||
<span>计划竣工时间:2023-01-01</span>
|
||||
</div>
|
||||
<div class="content-item">
|
||||
<span>建设单位:2023-01-01</span>
|
||||
</div>
|
||||
<div class="content-item">
|
||||
<span>施工单位:2023-01-01</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-page">
|
||||
<Pagination
|
||||
:pageable="pageable"
|
||||
:background="true"
|
||||
:handleSizeChange="handleSizeChange"
|
||||
:handleCurrentChange="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<memberDetails title="查看工程信息" v-model:detailsDialog="detailsDialog" :formData="formData"> </memberDetails>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="ProjectSupervisionRecord">
|
||||
import { ref, reactive, nextTick, onMounted } from "vue";
|
||||
import Pagination from "@/components/ProTable/components/Pagination.vue";
|
||||
import memberDetails from "./components/memberDetails.vue";
|
||||
const searchForm = ref({
|
||||
projectName: ""
|
||||
});
|
||||
const pageable = ref({
|
||||
// 分页参数
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
total: 30
|
||||
});
|
||||
const detailsDialog = ref(false);
|
||||
const formData = ref({});
|
||||
const showDetails = () => {
|
||||
detailsDialog.value = true;
|
||||
};
|
||||
const handleSizeChange = size => {
|
||||
console.log(size);
|
||||
};
|
||||
const handleCurrentChange = currentPage => {
|
||||
console.log(currentPage);
|
||||
};
|
||||
// 点击发送按钮
|
||||
const handleSubmit = async () => {};
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.table-box {
|
||||
.statistics-search {
|
||||
.topCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.statistics-list {
|
||||
margin-top: 20px;
|
||||
height: 892px;
|
||||
overflow-y: scroll;
|
||||
.statistics-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item-child {
|
||||
width: 794px;
|
||||
min-width: 794px;
|
||||
height: 196px;
|
||||
background: #ffffff;
|
||||
opacity: 1;
|
||||
border: 1px solid #d9d9d9;
|
||||
.top-title {
|
||||
height: 56px;
|
||||
background: #f5f7f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin: 0px 10px 0 16px;
|
||||
}
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: auto;
|
||||
}
|
||||
:deep(.el-button) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
.detail-content {
|
||||
height: 140px;
|
||||
display: flex;
|
||||
img {
|
||||
width: 72px;
|
||||
height: 108px;
|
||||
align-self: center;
|
||||
margin-left: 16px;
|
||||
margin-right: 26px;
|
||||
}
|
||||
> div {
|
||||
margin: 16px 0;
|
||||
flex: 1;
|
||||
.content-item {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -232,7 +232,7 @@ const unitData = ref([
|
||||
personName: 111
|
||||
}
|
||||
]);
|
||||
const monthColumns = [];
|
||||
const monthColumns: any = [];
|
||||
const visible1 = ref(false);
|
||||
const changeType = ref(1);
|
||||
const filelist = ref([]);
|
||||
|
||||
@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div class="overview">
|
||||
<el-dialog :show-close="false" v-model="visible1" :style="dialogStyle">
|
||||
<template #title>
|
||||
<div class="title-detail">
|
||||
<img src="@/assets/images/tableIcon/look.png" alt="" />
|
||||
<span>查看隐患整改信息</span>
|
||||
<el-icon>
|
||||
<close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<div class="detail-content">
|
||||
<div class="content-title">隐患记录</div>
|
||||
<div class="row">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<span class="row-span" @click="showRecord">检查情况:整改中</span>
|
||||
</el-col>
|
||||
<el-col :span="8"> <span class="row-span">工程名称:衡阳大厦基坑支护工程</span></el-col>
|
||||
<el-col :span="8"> <span class="row-span">监督员:郭明明</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<span class="row-span">检查时间:2023-04-25 17:09:08</span>
|
||||
</el-col>
|
||||
<el-col :span="8"> <span class="row-span">施工单位:天津汇鑫建筑工程有限公司</span></el-col>
|
||||
<el-col :span="8"> <span class="row-span">监理单位:天津汇鑫建筑工程有限公司</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<span class="row-span">项目经理:徐晓云</span>
|
||||
</el-col>
|
||||
<el-col :span="8"> <span class="row-span">总监理工程师:天津汇鑫建筑工程有限公司</span></el-col>
|
||||
<el-col :span="8"> <span class="row-span">责任区域:中铁建工工人生活区</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<span class="row-span">隐患类别:安全管理/安全检查</span>
|
||||
</el-col>
|
||||
<el-col :span="8"> <span class="row-span">整改单位:中铁建工集团有限公司</span></el-col>
|
||||
<el-col :span="8"> <span class="row-span">整改期限:2023-04-30</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-table">
|
||||
<div class="content-title">整改/复查记录</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="recordData"
|
||||
border
|
||||
max-height="340"
|
||||
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" label="隐患问题" />
|
||||
<el-table-column label="隐患照片">
|
||||
<template #default="scope">
|
||||
<el-image style="width: 26px; height: 37px" :src="scope.row.imageUrl" fit="fill"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="整改状态">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.passType == 1 ? "进入" : "离开" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="operation-btn">
|
||||
<el-button type="info" style="margin-right: 98px">驳回,请尽快整改</el-button>
|
||||
<el-button type="primary">整改完成,全部合格</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transform-record">
|
||||
<div class="title-detail">
|
||||
<img src="@/assets/images/tableIcon/look.png" alt="" />
|
||||
<span>整改记录</span>
|
||||
<el-icon>
|
||||
<close />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="content-title">隐患记录</div>
|
||||
<div class="row">
|
||||
<span>创建人:</span>
|
||||
<span>朱可</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>创建时间:</span>
|
||||
<span>2023-05-26 12:45:09</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>隐患问题:</span>
|
||||
<span>未制定、完善、落实安全生产责任制度、安全生产规章制度和操作规程。</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>备注:</span>
|
||||
<span>请尽快整改</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>隐患照片:</span>
|
||||
<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
|
||||
</div>
|
||||
<div class="situation">
|
||||
<span>整改情况</span>
|
||||
<el-button type="success">新增整改记录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch, reactive } from "vue";
|
||||
const props = defineProps({
|
||||
detailsDialog: Boolean,
|
||||
title: String,
|
||||
formData: Object
|
||||
});
|
||||
const emits = defineEmits(["update:detailsDialog"]);
|
||||
const visible1 = ref(false);
|
||||
const recordData = ref([]);
|
||||
const dialogStyle = ref({
|
||||
"min-width": "824px",
|
||||
transform: "translateX(-170px)"
|
||||
});
|
||||
const showRecord = () => {
|
||||
console.log(666);
|
||||
dialogStyle.value = {
|
||||
"min-width": "824px",
|
||||
transform: "translateX(-170px)"
|
||||
};
|
||||
};
|
||||
// 监听父组件的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) => {
|
||||
console.log(props.formData);
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
// 初始化 配置formData
|
||||
console.log(props.formData);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin fullwidth {
|
||||
width: -webkit-fill-available;
|
||||
width: -moz-available;
|
||||
width: stretch;
|
||||
}
|
||||
@mixin flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@mixin title {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
border-left: 2px solid #008bff;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.overview {
|
||||
// background-color: #fff;
|
||||
flex: 1;
|
||||
:deep(.el-dialog) {
|
||||
position: relative;
|
||||
}
|
||||
.title-detail {
|
||||
@include flex;
|
||||
> img {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
}
|
||||
> span {
|
||||
font-size: 18px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
margin-left: 5px;
|
||||
margin-right: auto;
|
||||
}
|
||||
:deep(.el-icon) {
|
||||
cursor: pointer;
|
||||
color: #a8abb2;
|
||||
}
|
||||
}
|
||||
.detail-content {
|
||||
.content-title {
|
||||
@include title;
|
||||
}
|
||||
.row {
|
||||
margin-top: 14px;
|
||||
.row-span {
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-table {
|
||||
margin-top: 20px;
|
||||
.content-title {
|
||||
@include title;
|
||||
}
|
||||
.table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.operation-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.transform-record {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -460px;
|
||||
width: 380px;
|
||||
min-width: 420px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 8px 0px rgba(48, 62, 100, 0.2);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
padding: 15px 20px;
|
||||
.content-title {
|
||||
@include title;
|
||||
margin-top: 45px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
span:nth-child(1) {
|
||||
width: 56px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
margin-right: 10px;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
img {
|
||||
width: 95px;
|
||||
height: 53px;
|
||||
}
|
||||
}
|
||||
.situation {
|
||||
@include flex;
|
||||
border-left: 2px solid #008bff;
|
||||
margin-top: 20px;
|
||||
span {
|
||||
margin-right: auto;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
193
src/views/goverment/qualitySupervision/index.vue
Normal file
193
src/views/goverment/qualitySupervision/index.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<div class="statistics-top">
|
||||
<div class="sta-item">
|
||||
<div class="sta-num">
|
||||
<span>累计下达整改单</span>
|
||||
<span>2162207人</span>
|
||||
</div>
|
||||
<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
|
||||
</div>
|
||||
<div class="sta-item">
|
||||
<div class="sta-num">
|
||||
<span>累计下达停工单</span>
|
||||
<span>2162207人</span>
|
||||
</div>
|
||||
<img src="@/assets/images/govermentImg/出勤总数.png" alt="" />
|
||||
</div>
|
||||
<div class="sta-item">
|
||||
<div class="sta-num">
|
||||
<span>累计问题数</span>
|
||||
<span>2162207人</span>
|
||||
</div>
|
||||
<img src="@/assets/images/govermentImg/出勤率.png" alt="" />
|
||||
</div>
|
||||
<div class="sta-item">
|
||||
<div class="sta-num">
|
||||
<span>累计闭合问题数</span>
|
||||
<span>2162207人</span>
|
||||
</div>
|
||||
<img src="@/assets/images/govermentImg/考勤次数.png" alt="" />
|
||||
</div>
|
||||
<div class="sta-item">
|
||||
<div class="sta-num">
|
||||
<span>总检查次数</span>
|
||||
<span>2162207人</span>
|
||||
</div>
|
||||
<img src="@/assets/images/govermentImg/考勤次数.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<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.personType" placeholder="请输入" />
|
||||
<el-button type="primary" style="margin-left: 20px" @click="handleSubmit()">发送</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="statistics-table">
|
||||
<el-card shadow="never" class="topCard">
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="ageStatistics"
|
||||
class="el-table"
|
||||
:header-cell-style="{ backgroundColor: '#F4F7F9', textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
>
|
||||
<el-table-column prop="data" label="序号"></el-table-column>
|
||||
<el-table-column prop="data" label="工程名称"></el-table-column>
|
||||
<el-table-column prop="data" label="监督员"></el-table-column>
|
||||
<el-table-column prop="data" label="检查时间"></el-table-column>
|
||||
<el-table-column prop="data" label="施工单位"></el-table-column>
|
||||
<el-table-column prop="data" label="监理单位"></el-table-column>
|
||||
<el-table-column prop="data" label="项目经理"></el-table-column>
|
||||
<el-table-column prop="data" label="总监理工程师"></el-table-column>
|
||||
<el-table-column prop="data" label="状态">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.personType == 1 ? "管理" : "工人" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="showDetails">
|
||||
<img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" />
|
||||
<span>查看</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="statistics-page">
|
||||
<Pagination
|
||||
:pageable="pageable"
|
||||
:background="true"
|
||||
:handleSizeChange="handleSizeChange"
|
||||
:handleCurrentChange="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<transformInfo v-model:detailsDialog="detailsDialog"></transformInfo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="ProjectSupervisionRecord">
|
||||
import { ref, reactive, nextTick, onMounted } from "vue";
|
||||
import { ElMessage, ElMessageBox, ElTree, FormInstance } from "element-plus";
|
||||
import Pagination from "@/components/ProTable/components/Pagination.vue";
|
||||
import transformInfo from "./components/transformInfo.vue";
|
||||
|
||||
const searchForm = ref({
|
||||
personType: null,
|
||||
dateRange: []
|
||||
});
|
||||
const ageStatistics: any = [{ data: 111 }];
|
||||
const pageable = ref({
|
||||
// 分页参数
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
total: 30
|
||||
});
|
||||
const detailsDialog = ref(false);
|
||||
const showDetails = () => {
|
||||
detailsDialog.value = true;
|
||||
};
|
||||
const handleSizeChange = size => {
|
||||
console.log(size);
|
||||
};
|
||||
const handleCurrentChange = currentPage => {
|
||||
console.log(currentPage);
|
||||
};
|
||||
// 点击发送按钮
|
||||
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"
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.table-box {
|
||||
.statistics-top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.sta-item {
|
||||
min-width: 320px;
|
||||
height: 113px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 20px;
|
||||
.sta-num {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
margin-left: 42px;
|
||||
margin-right: auto;
|
||||
span:first-child {
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #6b7275;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 32px;
|
||||
font-family: OPPOSans-Heavy, OPPOSans;
|
||||
font-weight: 800;
|
||||
color: #2e3038;
|
||||
}
|
||||
}
|
||||
> img {
|
||||
width: 44px;
|
||||
height: 40px;
|
||||
margin-right: 22px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.statistics-search {
|
||||
margin-top: 20px;
|
||||
.topCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.statistics-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user