<template> <div class="publicContainer"> <el-form :model="queryParams" ref="queryRef" inline v-show="showSearch"> <el-form-item label="项目名称"> <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery" style="width: 240px" /> </el-form-item> <el-form-item label="问题类型:" prop="problemType"> <el-input v-model="queryParams.problemType" placeholder="请输入问题类型" clearable style="width: 240px" /> </el-form-item> <el-form-item label="检查项目"> <el-input v-model="queryParams.checkItem" placeholder="请输入检查项目" clearable style="width: 240px" @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="整改类型:"> <el-select clearable v-model="queryParams.abarbeitungType" placeholder="请选择整改类型"> <el-option v-for="dict in abarbeitung_type" :key="dict.id" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <!-- 操作栏 --> <el-row :gutter="10" class="mb8" style="margin: 0"> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> </el-row> <!-- 表格 --> <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" max-height="500"> <el-table-column label="序号" type="index" width="80" /> <el-table-column :label="i.label" :prop="i.props" show-overflow-tooltip v-for="i in qualityRectificationDetailsCloum"> <template #default="{ row }" v-if="i.props == 'projectName'"> <span @click="handleDetails(row, 1, '详情')" class="projectName"> {{ row.projectName }}</span> </template> <template #default="{ row }" v-if="i.props == 'abarbeitungType'"> <dict-tag :options="abarbeitung_type" :value="row.abarbeitungType" /> </template> </el-table-column> <el-table-column label="操作" width="220" class-name="small-padding fixed-width"> <template #default="scope"> <el-button link type="primary" @click="handleDetails(scope.row)">详情</el-button> <!-- <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button> --> <el-button link type="danger" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改巡查对话框 --> <el-dialog :title="title" v-model="open" width="68%"> <el-form ref="postRef" :model="form" :rules="rules" label-width="120px" :inline="true"> <div class="biaoti">基本信息</div> <el-form-item label="巡查记录编号" prop="patrolNo" style="width: 30%"> <el-input v-model="form.patrolNo" placeholder="系统自动生成" /> </el-form-item> <el-form-item label="项目名称" style="width: 60%"> <el-select v-model="form.projectNo" placeholder="请选择项目名称" style="width: 400px" @change="ProjectChange(form.projectNo, true)" > <el-option v-for="dict in ProjectListData" :key="dict.projectNo" :label="dict.projectName" :value="dict.projectNo" /> </el-select> </el-form-item> <el-form-item label="巡检人" style="width: 30%"> <el-input v-model="form.patrolPrimaryPerson" placeholder="巡检人" /> </el-form-item> <el-form-item label="巡检日期" style="width: 30%"> <el-date-picker v-model="form.patrolTime" type="date" placeholder="投标时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item label="项目整体描述" style="width: 97%"> <el-input v-model="form.description" placeholder="招标项目概况" :autosize="{ minRows: 5, maxRows: 7 }" type="textarea" /> </el-form-item> <el-form-item label="备注" style="width: 97%"> <el-input v-model="form.remark" placeholder="备注" :autosize="{ minRows: 5, maxRows: 7 }" type="textarea" /> </el-form-item> <el-form-item label="附件" style="width: 97%"> <el-upload v-model:file-list="fileList1" class="upload-demo" action="/prod-api/system/upload" :headers="uploadHeader" multiple :on-preview="handlePreview" :before-remove="beforeRemove" :before-upload="handleBeforeUpload" > <el-button type="primary">选择文件</el-button> <template #tip> <div class="el-upload__tip">支持CSV格式,可一次性上传多个文件</div> </template> </el-upload> </el-form-item> <div class="biaoti"> 问题记录 <el-button type="primary" plain style="float: right" @click="FenJieMoney">新增记录</el-button> </div> <div class="JiHuaHeader"> <div class="HeaderListDiv HeaderListDiv0">序号</div> <div class="HeaderListDiv">问题类型</div> <div class="HeaderListDiv">检查项</div> <div class="HeaderListDiv">问题描述</div> <div class="HeaderListDiv">是否修改</div> <div class="HeaderListDiv">备注</div> <div class="HeaderListDiv HeaderListDiv1">操作</div> </div> <div v-for="(row, index) in form.projectPatrolProblemSaveRequestList" :key="index" class="JiHuaHeader JiHuaBoder"> <div class="HeaderListDiv HeaderListDiv0">{{ index + 1 }}</div> <div class="HeaderListDiv">{{ row.problemType }}</div> <div class="HeaderListDiv">{{ row.checkItem }}</div> <div class="HeaderListDiv">{{ row.problemDescription }}</div> <div class="HeaderListDiv">{{ row.status == 0 ? '是' : '否' }}</div> <div class="HeaderListDiv">{{ row.remark }}</div> <div class="HeaderListDiv HeaderListDiv1"> <el-button type="primary" link @click="handleDetails2(row)">查看详情</el-button> <el-button type="danger" link @click="ZhiFuDel2(index)">删除数据</el-button> </div> </div> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </template> <!-- 新增巡检记录 --> <el-dialog width="800px" title="巡检记录操作" v-model="open3" append-to-body align-center top="30%"> <el-form ref="postRef2" :model="form2" :rules="rules2" label-width="120px" :inline="true" :disabled="Open3Disable"> <el-form-item label="问题类型" prop="problemType" style="width: 97%"> <el-input v-model="form2.problemType" placeholder="问题类型" /> </el-form-item> <el-form-item label="检查项" prop="checkItem" style="width: 97%"> <el-input v-model="form2.checkItem" placeholder="检查项" /> </el-form-item> <el-form-item label="是否整改" style="width: 97%"> <el-radio-group v-model="form2.status"> <el-radio label="0" size="large">是</el-radio> <el-radio label="1" size="large">否</el-radio> </el-radio-group> </el-form-item> <el-form-item label="问题描述" prop="problemDescription" style="width: 97%"> <el-input v-model="form2.problemDescription" placeholder="问题描述" :autosize="{ minRows: 5, maxRows: 7 }" type="textarea" /> </el-form-item> <el-form-item label="备注" prop="remark" style="width: 97%"> <el-input v-model="form2.remark" placeholder="备注" :autosize="{ minRows: 5, maxRows: 7 }" type="textarea" /> </el-form-item> <el-form-item label="附件" style="width: 97%"> <el-upload v-model:file-list="fileList2" class="upload-demo" action="/prod-api/system/upload" :headers="uploadHeader" multiple :on-preview="handlePreview" :before-remove="beforeRemove" :before-upload="handleBeforeUpload" accept="image/png, image/jpeg" > <el-button type="primary">选择文件</el-button> <template #tip> <div class="el-upload__tip">可一次性上传多个文件</div> </template> </el-upload> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submitForm2">确 定</el-button> <el-button @click="open3 = false">取 消</el-button> </div> </template> </el-dialog> </el-dialog> <!-- 详情对话框 --> <el-dialog title="质量整改单详情" v-model="open2" width="90%" id="DiaLogBox"> <!-- 信息头部 --> <div class="DetailHeader1"> <span class="DetailName">{{ DetailData.reformNo }}</span> <span class="DetailName">流程名称:{{ DetailData.workFlowName || '' }}</span> <span class="DetailName">流程步骤:{{ project_statusM(DetailData.status) || '' }}</span> </div> <div class="DetailHeader"> <span class="DetailName">{{ DetailData.projectName }}</span> <span class="DetailTypeName">{{ DetailData.projectTypeName ? DetailData.projectTypeName : '海绵道路' }}</span> <span class="DetailNo">{{ DetailData.projectNo }}</span> </div> <!-- 金额统计 --> <div class="DetailMoney"> <div class="MoneyList"> <div class="leftBox"> <div class="Left_top" :title="DetailData.contractAmount" style="color: #0f69ff"> {{ DetailData.contractAmount }} </div> <div class="Left_Bottom">合同金额(万元)</div> </div> <div class="RightBox"></div> </div> <div class="MoneyList"> <div class="leftBox"> <div class="Left_top" :title="DetailData.paymentMoney" style="color: #28d290"> {{ DetailData.paymentMoney }} </div> <div class="Left_Bottom">已经支付(万元)</div> </div> <div class="RightBox"> <el-progress type="circle" color="" width="50" class="progressDom" :percentage="DetailData.paymentRatio" status="success"> <template #default="{ percentage }"> <span class="percentage-value">{{ percentage }}%</span> </template></el-progress > </div> </div> <div class="MoneyList"> <div class="leftBox"> <div class="Left_top" :title="DetailData.notPaymentMoney" style="color: #f15261"> {{ DetailData.notPaymentMoney }} </div> <div class="Left_Bottom">未支付(万元)</div> </div> <div class="RightBox"></div> </div> </div> <!-- 基本信息 --> <div class="ProjectInfo" v-if="open2"> <p class="ProjectInfoTitle">基本信息</p> <div class="InfoList"> <div class="InfoListLable">责任人</div> <div class="InfoListvalue">{{ DetailData.chargeUser }}</div> </div> <div class="InfoList"> <div class="InfoListLable">提交人</div> <div class="InfoListvalue">{{ DetailData.recentSubmitter }}</div> </div> <!-- <div class="InfoList "> <div class="InfoListLable">项目编号</div> <div class="InfoListvalue">{{ DetailData.projectNo }}</div> </div> <div class="InfoList "> <div class="InfoListLable">巡检人</div> <div class="InfoListvalue">{{ DetailData.patrolPrimaryPerson }}</div> </div> --> <div class="InfoList"> <div class="InfoListLable">整改发起时间</div> <div class="InfoListvalue">{{ DetailData.abarbeitungStartTime?.substring(0, 10) }}</div> </div> <div class="InfoList"> <div class="InfoListLable">限制整改时间</div> <div class="InfoListvalue">{{ DetailData.abarbeitungStartTime?.substring(0, 10) }}</div> </div> <div class="InfoList InfoList2"> <div class="InfoListLable">补充说明</div> <div class="InfoListvalue">{{ DetailData.supplementaryInstruction }}</div> </div> <!-- <div class="InfoList3"> <div class="InfoListLable">附件</div> <div class="InfoListvalue"> <el-upload v-model:file-list="fileList1" class="upload-demo" action="/system/upload" disabled multiple :on-preview="handlePreview"> </el-upload> </div> </div> --> </div> <!-- 巡检问题清单 --> <div class="ProjectInfo" v-if="open2"> <p class="ProjectInfoTitle">整改问题清单</p> <div class="TableHeader"> <div class="TableList TableList0 ttttle">序号</div> <div class="TableList">问题类型</div> <div class="TableList">检查项</div> <!-- <div class="TableList">检查项明细</div> --> <div class="TableList">整改前问题描述</div> <div class="TableList TableList2">整改前附图</div> <div class="TableList TableList2">整改要求</div> <div class="TableList TableList0" title="预计整改完成时间">预计整改完成时间</div> <div class="TableList TableList0">整改措施说明</div> <div class="TableList TableList0">整改后附图</div> <div class="TableList TableList0">整改类型</div> <!-- <div class="TableList">备注</div> --> </div> <div class="TableBody" v-for="(item, index) in DetailData.projectQualityReformDetailSaveRequestList" :key="index"> <div class="TableList TableList0 ttttle">{{ index + 1 }}</div> <div class="TableList">{{ item.problemType || '' }}</div> <div class="TableList">{{ item.checkItem || '' }}</div> <div class="TableList"> {{ item.abarbeitungDescription || '' }} </div> <div class="TableList TableList2"> <el-image style="width: 40px; height: 40px" v-for="(item2, index2) in item.fileSaveRequestList" :src="item2.url" :zoom-rate="1" :initial-index="4" :preview-src-list="[item2.url]" /> </div> <div class="TableList TableList2">{{ item.abarbeitungRequire || '' }}</div> <div class="TableList TableList0">{{ item.updateTime?.substring(0, 10) }}</div> <div class="TableList TableList0">{{ item.problemDescription || '' }}</div> <div class="TableList TableList0"> <el-image style="width: 40px; height: 100%" v-for="(item2, index2) in item.afterRectificationFileList" :src="item2.url" :initial-index="4" :preview-src-list="[item2.url]" /> </div> <div class="TableList TableList0">{{ abarbeitung_typeM(item.abarbeitungType || '') }}</div> </div> </div> <div class="" v-if="lcbzList?.length > 0"> <p class="ProjectInfoTitle">流程日志</p> <el-steps direction="vertical" :active="lcbzList.length"> <el-step v-for="i in lcbzList" :title="i.activityName" style="height: 100px; width: 300px"> <template #description> <div class="direction">时间:{{ i.endTime }}</div> <div class="direction">分配人:{{ i.assigneeName }}</div> <div class="direction">任务备注:{{ i.comment }}</div> </template> </el-step> </el-steps> </div> <template #footer> <div class="dialog-footer"> <el-button @click="open2 = false">关 闭</el-button> </div> </template> </el-dialog> </div> </template> <script setup name="Post"> import { ElMessage, ElMessageBox } from 'element-plus'; import { projectPatrolPage, projectPatrolAdd, projectPatrolIDS, projectPatrolSelectId, projectPatrolEdit, FileSystemList, projectInfoList, projectInfoGetProjectStatistics, workflowProcess, } from '@/api/project/qualityRectificationDetails'; import { projectPatrolProblemPage } from '@/api/project/qualityRectification'; import { getToken } from '@/utils/auth'; import { qualityRectificationDetailsCloum } from '@/utils/cloums'; const { proxy } = getCurrentInstance(); const { abarbeitung_type, quality_rectification_status } = proxy.useDict('abarbeitung_type', 'quality_rectification_status'); const postList = ref([]); const open = ref(false); const open2 = ref(false); const open3 = ref(false); const loading = ref(true); const showSearch = ref(true); const ids = ref([]); const single = ref(true); const multiple = ref(true); const total = ref(0); const title = ref(''); const Open3Disable = ref(false); const lcbzList = ref([]); const Problome = ref([]); const data = reactive({ form: {}, queryParams: { pageNum: 1, pageSize: 10, patrolPrimaryPerson: undefined, projectName: undefined, timer: '', patrolStartTime: undefined, patrolEndTime: undefined, }, rules: { patrolNo: [{ required: true, message: '巡查记录编号不能为空', trigger: 'blur' }], }, rules2: { problemType: [{ required: true, message: '不能为空', trigger: 'blur' }], checkItem: [{ required: true, message: '不能为空', trigger: 'blur' }], problemDescription: [{ required: true, message: '不能为空', trigger: 'blur' }], remark: [{ required: true, message: '不能为空', trigger: 'blur' }], }, DetailData: {}, form2: {}, }); const { queryParams, form, rules, rules2, DetailData, form2 } = toRefs(data); const ProjectListData = ref([]); const uploadHeader = ref({ Authorization: 'Bearer ' + getToken(), }); /** 文件上传 */ const fileList1 = ref([]); const fileList2 = ref([]); function handlePreview(file) { console.log(file); return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then( () => window.open(file.url), () => false ); } function handleBeforeUpload(file) { if (file.name.length > 50) { proxy.$modal.msgError(`文件名称过长(50个字符以内),请先修改再上传!`); return false; } return true; } function beforeRemove(file) { return true; } /** 查询巡查列表 */ function getList(p) { loading.value = true; projectPatrolPage(queryParams.value).then(response => { postList.value = response.data; total.value = response.total; loading.value = false; }); } /** 取消按钮 */ function cancel() { open.value = false; reset(); } /** 表单重置 */ function reset() { form.value = { id: undefined, patrolNo: undefined, projectNo: undefined, patrolPrimaryPerson: undefined, patrolTime: undefined, description: undefined, remark: undefined, projectPatrolProblemSaveRequestList: [], fileSaveRequestList: [], }; fileList1.value = []; proxy.resetForm('postRef'); } function reset2() { form2.value = { id: undefined, problemType: undefined, checkItem: undefined, status: '0', problemDescription: undefined, remark: undefined, fileSaveRequestList: [], }; fileList2.value = []; proxy.resetForm('postRef2'); } /** 搜索按钮操作 */ function handleQuery() { if (queryParams.value.timer) { queryParams.value.patrolStartTime = queryParams.value.timer[0]; queryParams.value.patrolEndTime = queryParams.value.timer[1]; } else { queryParams.value.patrolStartTime = ''; queryParams.value.patrolEndTime = ''; } queryParams.value.pageNum = 1; getList(); } /** 重置按钮操作 */ function resetQuery() { queryParams.value = { pageNum: 1, pageSize: 10 }; handleQuery(); } /** 多选框选中数据 */ function handleSelectionChange(selection) { ids.value = selection.map(item => item.id); single.value = selection.length != 1; multiple.value = !selection.length; } /** 新增按钮操作 */ function handleAdd() { reset(); open.value = true; title.value = '添加巡查'; } /** 修改按钮操作 */ function handleUpdate(row) { reset(); const id = row.id || ids.value; projectPatrolSelectId(id).then(response => { form.value = response.data; ProjectChange(form.value.projectNo, false); open.value = true; title.value = '修改巡查'; form.value.fileSaveRequestList = []; }); // 获取文件列表 FileSystemList({ refId: id, refType: 'proProjectPatrol', }).then(response => { response.data.forEach(element => { fileList1.value.push(element); }); }); } /**详情按钮 */ function handleDetails(row) { lcbzList.value = []; reset(); const id = row.qualityReformId || ids.value; projectPatrolSelectId(id).then(({ data }) => { let arrar = data; if (data.status != 'start') { workflowProcess({ workflowKey: 'projectQualityReformRecord', businessKey: id }).then(({ code, data }) => { lcbzList.value = data; }); } projectInfoGetProjectStatistics(row.projectNo).then(({ data }) => { DetailData.value = { ...arrar, ...data }; open2.value = true; }); }); form.value.fileSaveRequestList = []; // 获取文件列表 FileSystemList({ refId: id, refType: 'proProjectPatrol', }).then(response => { response.data.forEach(element => { fileList1.value.push(element); }); }); } /** 提交按钮 */ function submitForm() { proxy.$refs['postRef'].validate(valid => { if (valid) { fileList1.value.forEach(element => { // 基本信息 if (element.hasOwnProperty('response')) { element.response.data.refType = 'proProjectPatrol'; form.value.fileSaveRequestList.push(element.response.data); } else { form.value.fileSaveRequestList.push(element); } }); if (form.value.id != undefined) { projectPatrolEdit(form.value).then(response => { proxy.$modal.msgSuccess('修改成功'); open.value = false; getList(); }); } else { projectPatrolAdd(form.value).then(response => { proxy.$modal.msgSuccess('新增成功'); open.value = false; getList(); }); } } }); } /** 删除按钮操作 */ function handleDelete(row) { const ids = row.id || ids.value; proxy.$modal .confirm('是否确认删除巡查编号为"' + ids + '"的数据项?') .then(function () { return projectPatrolIDS(ids); }) .then(() => { getList(); proxy.$modal.msgSuccess('删除成功'); }) .catch(() => {}); } /** 导出按钮操作 */ function handleExport() { proxy.download( 'system/post/export', { ...queryParams.value, }, `post_${new Date().getTime()}.xlsx` ); } /**获取所有的项目数据 */ function loadProjerctListData() { projectInfoList().then(response => { ProjectListData.value = response.data; }); } /**项目下拉框事件 */ function ProjectChange(val, bol) { console.log(val); // 清空部分数据 if (bol) { form.value.patrolPrimaryPerson = undefined; form.value.patrolTime = undefined; form.value.description = undefined; form.value.remark = undefined; } } /**新增记录 */ function FenJieMoney() { reset2(); Open3Disable.value = false; open3.value = true; } /**添加问题记录 */ function submitForm2() { proxy.$refs['postRef2'].validate(valid => { if (valid) { console.log(form2.value); fileList2.value.forEach(element => { // 基本信息 if (element.hasOwnProperty('response')) { element.response.data.refType = 'proProjectPatrolProblem'; form2.value.fileSaveRequestList.push(element.response.data); } else { form2.value.fileSaveRequestList.push(element); } }); form.value.projectPatrolProblemSaveRequestList.push(form2.value); open3.value = false; } }); } /**查看详情 */ function handleDetails2(row) { console.log(row); reset2(); open3.value = true; Open3Disable.value = true; form2.value = row; fileList2.value = row.fileSaveRequestList; // 获取文件列表 } /**删除记录 */ function ZhiFuDel2(index) { form.value.projectPatrolProblemSaveRequestList.splice(index, 1); } function ProjectChangea(p) { projectPatrolProblemPage(p).then(({ data }) => { Problome.value = data; }); } function abarbeitung_typeM(v) { let arr = abarbeitung_type.value.filter(i => { return v == i.value; }); return arr[0]?.label; } const project_statusM = v => { const arrar = quality_rectification_status.value.filter(i => { return v == i.value; }); return arrar[0]?.label; }; onMounted(() => { ProjectChangea(1); }); getList(); loadProjerctListData(); </script> <style scoped lang="scss"> .biaoti { font-weight: 900; font-size: 18px; margin: 10px 0; width: 100%; height: 40px; line-height: 40px; } .JiHuaHeader { width: 100%; height: 40px; font-weight: 600; .HeaderListDiv { width: 14%; text-align: center; float: left; height: 40px; line-height: 40px; border: 1px solid #ccc; color: c6c6c6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; .EditInput { border: none !important; :deep(.el-input__wrapper) { background: #f0f0f000 !important; border: none !important; box-shadow: none !important; } } } .HeaderListDiv0 { width: 10%; } .HeaderListDiv1 { width: 18%; } } .JiHuaBoder { font-weight: 400; } #DiaLogBox { .DetailHeader, .DetailHeader1 { width: 100%; height: 54px; line-height: 53px; box-sizing: border-box; border-top: 1px solid #066592; // background-color: #fff; .DetailName { font-size: 14px; font-family: Source Han Sans CN; font-weight: bold; color: #fff; margin: 0 10px 0 20px; } .DetailTypeName { width: 66px; height: 20px; background: #dffff0; border: 1px solid #3ad68e; border-radius: 2px; font-size: 14px; font-family: Source Han Sans CN; font-weight: bold; color: #3ad68e; margin-right: 20px; } .DetailNo { font-size: 14px; font-family: Source Han Sans CN; font-weight: bold; color: #fff; } } .DetailMoney { width: 100%; height: 111px; // background: #ffffff; box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1); border-radius: 6px; margin-top: 20px; .MoneyList { width: 230px; height: 70px; background: #f8faff; border: 1px solid #eaeaea; border-radius: 2px; float: left; margin: 20px; box-sizing: border-box; padding-left: 24px; .leftBox { width: 130px; height: 70px; float: left; .Left_top { width: 100%; height: 35px; line-height: 40px; text-align: left; font-size: 24px; font-family: Source Han Sans CN; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .Left_Bottom { width: 100%; height: 35px; line-height: 30px; text-align: left; font-size: 14px; font-family: Source Han Sans CN; font-weight: 500; color: #333333; } } .RightBox { float: left; width: 70px; height: 70px; .progressDom { width: 50px; height: 50px; margin: 10px; } } } } .ProjectInfo { width: 100%; height: auto; // background: #ffffff; box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1); border-radius: 6px; font-size: 0; // margin-top: 20px; padding-bottom: 10px; .InfoList { display: inline-block; width: 50%; height: 42px; border: 1px solid #066592; box-sizing: border-box; // margin-left: 1%; .InfoListLable { height: 40px; line-height: 40px; width: 100px; float: left; background-color: #004565; box-sizing: border-box; font-size: 14px; font-family: Source Han Sans CN; font-weight: 500; color: #c6c6c6; text-align: center; border-right: 0.00521rem solid #066592; font-weight: 700; } .InfoListvalue { width: calc(100% - 100px); height: 40px; line-height: 40px; float: left; font-size: 14px; font-family: Source Han Sans CN; font-weight: bold; color: #fcfcfc; text-align: right; padding-right: 10px; } } .InfoList2 { width: 100%; height: 82px; border: 1px solid #066592; box-sizing: border-box; .InfoListLable { height: 100%; height: 80px; line-height: 80px; } .InfoListvalue { height: 100%; height: 80px; } } .InfoList3 { width: 100%; min-height: 60px; height: auto; .InfoListLable { width: 100px; float: left; font-size: 14px; font-family: Source Han Sans CN; font-weight: 500; color: #000000; text-align: center; line-height: 60px; } .InfoListvalue { float: left; width: calc(100% - 100px); height: auto; } } .TableHeader { width: 100%; height: 38px; display: flex; .TableList { width: 170px; height: 100%; line-height: 36px; float: left; text-align: center; font-size: 16px; color: #fcfcfc; border: 1px solid #066592; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .TableList0 { width: 140px; height: 100%; } .TableList2 { width: 200px; height: 100%; } } .TableBody { width: 100%; height: 48px; // overflow: auto; .TableList { width: 170px; height: 48px; line-height: 46px; float: left; text-align: center; font-size: 16px; color: #fcfcfc; border: 1px solid #066592; box-sizing: border-box; } .TableList0 { width: 140px; height: 48px; // overflow:hidden; // text-overflow:ellipsis; // white-space:nowrap } .TableList2 { width: 200px; height: 48px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap .el-image { width: 28px; height: 28px; margin: 10px; } } } } .ProjectInfoTitle { width: 100%; height: 50px; line-height: 50px; box-sizing: border-box; padding-left: 24px; font-size: 16px; font-family: Source Han Sans CN; font-weight: bold; color: #fff; margin: 0; } } .mb8 { margin-bottom: -30px; } .ttttle { width: 60px; } </style>