GitBucket
Newer
<template>
<div class="app-container" id="DiaLogBox">
<div class="TabsTop">
<div
class="TabsList"
:class="{ TabsListActive: tabsNum == 1 }"
@click="tabsNum = 1"
>
基础信息
</div>
<div
class="TabsList"
:class="{ TabsListActive: tabsNum == 2 }"
@click="tabsNum = 2"
>
进度明细
</div>
</div>
<!-- 内容 -->
<div class="TabBody" v-show="tabsNum == 1">
<!-- 基础信息 -->
<div class="LeftBox1">
<p class="HTNo">{{ DetailData.contractNo }}</p>
<div class="HTMoney1">
<div class="JENum">{{ DetailData.contractAmount }}(万元)</div>
<div class="JEName">合同金额</div>
</div>
<div class="HTMoney1">
<div class="JENum">
{{ DetailData.paymentMoney ? DetailData.paymentMoney : "--" }}(万元)
</div>
<div class="JEName">已支付金额</div>
</div>
<div class="echarts">
<barEcharts v-if="isChart2" :data="data1"></barEcharts>
<barEcharts v-if="isChart2" :data="data2"></barEcharts>
<barEcharts v-if="isChart2" :data="data3"></barEcharts>
</div>
</div>
<div class="LeftBox2">
<el-form
label-width="auto"
ref="ruleFormRef"
:model="tableList"
class="demo-form-inline"
disabled
>
<el-row gutter="0">
<el-divider content-position="left">基本信息</el-divider>
<el-col :span="24">
<el-form-item label="项目名称:" prop="projectName">
<el-input
v-model="tableList.projectName"
placeholder="项目名称"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="项目编码:" prop="projectNo">
<el-input
v-model="tableList.projectNo"
placeholder="项目名称"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="项目类别:">
<el-input
v-model="tableList.projectTypeName"
placeholder="项目名称"
/>
<!-- <el-select
clearable
v-model="tableList.projectTypeId"
class="m-2"
placeholder="请选择项目类别"
style="width: 100%"
size="mini"
>
<el-option
v-for="item in projectTypDate"
:key="item.projectTypeCode"
:label="item.projectTypeName"
:value="item.id"
/>
</el-select> -->
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="项目状态:" prop="state">
<el-select
clearable
v-model="tableList.buildStatus"
style="width: 100%"
placeholder="xxx"
size="mini"
>
<el-option
v-for="item in build_status"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="建设进度:" prop="totalProgress">
<el-input v-model="tableList.totalProgress" :min="0" :max="100">
<template #append> % </template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="责任人:" props="chargeUser">
<el-input
v-model="tableList.chargeUser"
placeholder="请输入责任人"
clearable
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="完成项目总投资:" prop="completeTotalInvest">
<el-input v-model="tableList.completeTotalInvest" :min="0">
<template #append> 万元 </template>
</el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="24">
<el-form-item
label="当月完成海绵相关投资:"
prop="completeSpongeInvest"
>
<el-input v-model="tableList.completeSpongeInvest" :min="0">
<template #append> 万元 </template>
</el-input>
</el-form-item>
</el-col> -->
<el-col :span="24">
<el-form-item
label="完成海绵相关投资:"
prop="completeSpongeInvest"
>
<el-input v-model="tableList.completeSpongeInvest" :min="0">
<template #append> 万元 </template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="项目开始日期:">
<el-date-picker
v-model="tableList.startTime"
type="date"
style="width: 100%"
placeholder="项目开始日期"
:size="size"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="项目结束日期:">
<el-date-picker
v-model="tableList.endTime"
type="date"
style="width: 100%"
placeholder="项目结束日期"
:size="size"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
<div class="TabBody" v-show="tabsNum == 2">
<el-table
:data="tableList.details"
style="width: 100%"
row-key="id"
:tree-props="{ children }"
>
<el-table-column prop="nodeName" label="一级节点" width="180" align="center"/>
<el-table-column prop="planStartTime" label="计划日期起" align="center" width="120">
<template #default="{ row }">
{{ row.planStartTime.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column prop="planEndTime" label="计划日期止" align="center" width="120">
<template #default="{ row }">
{{ row.planEndTime.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column prop="actualFinishStartTime" label="完成开始日期" align="center" width="120">
<template #default="{ row }">
{{ row.actualFinishStartTime.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column prop="actualFinishEndTime" label="完成结束日期" align="center" width="120">
<template #default="{ row }">
{{ row.actualFinishEndTime.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column prop="workContent" label="工作内容" align="center" width="160">
<template #default="{ row }">
<el-tooltip placement="top">
<template #content>
<span style="white-space: pre-wrap;">{{ row.workContent }}</span>
</template>
<div class="ellipsis">
<span>{{ row.workContent }}</span>
</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="estimatedWorkHours" label="预计工时" align="center" >
<template #default="{ row }">
{{ row.estimatedWorkHours||0 }}H
</template>
</el-table-column>
<el-table-column prop="manHour" label="工时" align="center" >
<template #default="{ row }">
{{ row.manHour||0 }}H
</template>
</el-table-column>
<el-table-column prop="schedule" label="进度" align="center">
<template #default="{ row }">
<span>{{row.schedule ||0}}</span>%
</template>
</el-table-column>
<el-table-column
prop="plannedFundsMonth"
label="计划资金"
align="center"
>
<template #default="{ row }">
<span>{{ row.plannedFundsMonth || 0 }}</span>
</template>
</el-table-column>
<el-table-column
prop="actualUseFunds"
label="实际使用资金"
align="center"
width="110"
>
<template #default="{ row }">
<span>{{ row.actualUseFunds || 0 }}</span>
</template>
</el-table-column>
<el-table-column
prop="capitalDescription"
align="center"
width="160"
label="资金描述"
>
<template #default="{ row }">
<el-tooltip placement="top">
<template #content>
<span style="white-space: pre-wrap;">{{ row.capitalDescription }}</span>
</template>
<div class="ellipsis">
<span>{{ row.capitalDescription }}</span>
</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
prop="planDescription"
align="center"
width="160"
label="进度描述"
>
<template #default="{ row }">
<el-tooltip placement="top">
<template #content>
<span style="white-space: pre-wrap;">{{ row.planDescription }}</span>
</template>
<div class="ellipsis">
<span>{{ row.planDescription }}</span>
</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="outputData" label="资料描述" align="center" width="160">
<template #default="{ row }">
<span>{{row.outputData}}</span>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" width="160"/>
<el-table-column prop="fileSaveRequestList" label="附件" align="center" width="200">
<template #default="{ row }">
<div class="file-list">
<div
class="file ellipsis"
v-for="file in row.fileSaveRequestList"
@click="handlePreview(file)"
>
<span>{{ file.name }}</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script setup name="Post">
import {
projectInfoList,
projectCompanyList,
projectPlanTemplateList,
getProjectStatistics,
} from "@/api/project/tenderReview";
import { getToken } from "@/utils/auth";
import barEcharts from "./barEcharts.vue";
import { projectInfoGroup, userList } from "@/api/projectInformation";
import { stateOption } from "@/utils/common";
import { selectProjectEchartByYear } from "@/api/home";
import { projectTypeList } from "@/api/xmbglishi";
import { ElMessageBox } from "element-plus";
const { proxy } = getCurrentInstance();
const { contract_type, contract_status, project_status, build_status } =
proxy.useDict(
"contract_type",
"contract_status",
"project_status",
"build_status"
);
let { tableList } = defineProps(["tableList"]);
const tabsNum = ref(1);
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
postCode: undefined,
postName: undefined,
status: undefined,
timer: "",
},
FenJieJiHuaData: [],
});
const { queryParams, form, rules, FenJieJiHuaData } = toRefs(data);
const ProjectListData = ref([]);
const tenderExaminationData = ref([]);
const JiaFangList = ref([]);
const uploadHeader = ref({
Authorization: "Bearer " + getToken(),
});
const Emits = defineEmits(["closed"]);
const projectTypDate = ref([]);
const DetailData=ref({})
const data1 = ref({
xData: [],
yData: [],
type: "pie",
text:'(%)',
center: ["24%", "35%"],
padding: [0, 0, 0, 0],
tittle: "建设进度完成情况",
ctext:'总进度',
ctextText:'',
position: "center",
itemStyle: {
normal: {
color: function (colors) {
var colorList = ["#75bedc", "#ef6567"];
return colorList[colors.dataIndex];
},
},
},
});
const data2 = ref({
xData: [],
yData: [],
type: "pie",
ctext:'项目总投资',
ctextText:'',
text:'(万元)',
center: ["24%", "35%"],
padding: [0, 0, 0, 0],
tittle: "完成项目总投资情况",
position: "right",
itemStyle: {
normal: {
color: function (colors) {
var colorList = ["#75bedc", "#ef6567"];
return colorList[colors.dataIndex];
},
},
},
});
const data3 = ref({
xData: [],
yData: [],
type: "pie",
ctext:'海绵总投资',
ctextText:'',
text:'(万元)',
center: ["24%", "35%"],
padding: [0, 0, 0, 0],
tittle: "完成海绵相关投资情况",
position: "right",
itemStyle: {
normal: {
color: function (colors) {
var colorList = ["#75bedc", "#ef6567"];
return colorList[colors.dataIndex];
},
},
},
});
const tableData = ref([]);
const isChart2 = ref(false);
const personList = ref([]);
/**获取所有的项目数据 */
function loadProjerctListData() {
projectInfoList().then((response) => {
ProjectListData.value = response.data;
});
}
/**获取所有公司的列表信息 */
function loadAllGongSiData(params) {
projectCompanyList().then((response) => {
JiaFangList.value = response.data;
});
}
const projectTypeListM = async () => {
let { data } = await projectTypeList();
projectTypDate.value = data;
};
const userListM = async () => {
let { data } = await userList();
personList.value = data;
};
// 项目类型、项目建设状态、项目状态的统计
const selectProjectEchartByYearM = async (p) => {
data1.value.xData = [
{ name: "已完成", value: tableList.totalProgress.replace("%", "")*1||0 },
{ name: "未完成", value: 100 -tableList.totalProgress.replace("%", "")*1},
];
data2.value.xData = [
{ name: "完成项目投资", value:tableList.completeTotalInvest*1|| 0 },
{ name: "未完成投资", value: (DetailData.value.totalInvest*1-tableList.completeTotalInvest*1)|| 0 },
];
data3.value.xData = [
{ name: "完成海绵投资", value: tableList.completeSpongeInvest*1 || 0 },
{name: "未完成海绵投资",value: (DetailData.value.spongeInvest*1-tableList.completeSpongeInvest*1) || 0,},
];
data1.value.ctextText=100
data2.value.ctextText=DetailData.value.totalInvest*1||0
data3.value.ctextText=DetailData.value.spongeInvest*1||0
isChart2.value = true;
};
let tableDate = ref({
FileUpSrc: "/api" + "/system/upload",
imgsUrl: [],
spongeInvestAmountMonth: 0,
investAmountMoneyMonth: 0,
spongeInvestAmountMonth: 0,
investAmountMoney: 0,
spongeInvestAmount: 0,
});
async function systemUploadM(p) {
if (p.length > 0) {
let formData = new FormData();
formData.append("file", p[0].raw);
let {
data: { originalName, url },
} = await systemUpload(formData);
tableDate.value.imgsUrl = [url];
}
let array = {
reportTime: Date.parse(reportTime.value),
};
delete tableDate.value.id;
progressSaveM({ ...tableDate.value, ...array });
}
//建设进度数据
let isDisabled = ref(true);
let progressNum = ref(0);
// 上传照片
let isRequired = ref(false);
let reportTime = ref(new Date());
// 项目状态变更
const stateChange = (v) => {
if (v > 4) {
isDisabled.value = false;
isRequired.value = true;
} else {
isDisabled.value = true;
isRequired.value = false;
}
};
const progressSaveM = async (data) => {
let { code } = await progressSave(data);
if (code == 200) {
Emits("closed");
}
};
const ruleFormRef = ref();
const getProjectStatisticsM = async (id) => {
let { data } = await getProjectStatistics(id);
DetailData.value = data;
console.log("DetailData", DetailData)
selectProjectEchartByYearM({ year: "2023", searchModel: "typeTotal" });
};
function handlePreview(file) {
console.log(file);
return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
() => window.open(file.url),
() => false
);
}
onMounted(() => {
console.log("tableList", tableList)
projectTypeListM();
userListM();
loadProjerctListData();
loadAllGongSiData();
getProjectStatisticsM(tableList.projectNo);
});
</script>
<style scoped lang="scss">
.biaoti {
font-weight: 900;
font-size: 18px;
margin: 10px 0;
width: 100%;
height: 40px;
line-height: 40px;
}
.readonlyClass :deep(.el-input__wrapper) {
background: #f0f0f0 !important;
user-select: none !important;
}
.HTMoney {
width: 100%;
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}
.JiHuaHeader {
width: 100%;
height: 40px;
.HeaderListDiv {
width: 33%;
text-align: center;
float: left;
height: 40px;
line-height: 40px;
border: 1px solid #ccc;
color: black;
font-weight: 600;
.EditInput {
border: none !important;
:deep(.el-input__wrapper) {
background: #f0f0f000 !important;
border: none !important;
box-shadow: none !important;
}
}
}
.HeaderListDiv2 {
width: 25%;
}
}
#DiaLogBox {
:deep(.el-form-item) {
padding: 1.5px 0;
}
.TabsTop {
width: 100%;
height: 36px;
margin-bottom: 14px;
.TabsList {
width: 120px;
text-align: center;
height: 36px;
line-height: 34px;
float: left;
box-sizing: border-box;
border: 1px solid #409eff;
color: #409eff;
cursor: pointer;
&:nth-child(1) {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
&:nth-child(2) {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
.TabsListActive {
background-color: #409eff;
color: white;
}
}
.TabBody {
width: 100%;
height: calc(100% - 50px);
// 基础信息
.LeftBox1 {
width: 560px;
height: 100%;
float: left;
margin-left: 80px;
.HTNo {
width: 560px;
text-align: center;
font-size: 16px;
}
.HTMoney1 {
width: 170px;
height: 60px;
float: left;
text-align: center;
.JENum {
width: 100%;
height: 40px;
font-size: 26px;
font-weight: 400;
color: #409eff;
}
.JEName {
width: 100%;
height: 40px;
font-size: 16px;
color: black;
}
}
}
.LeftBox2 {
width: calc(100% - 640px);
height: 100%;
float: left;
background: white;
overflow: auto;
font-size: 0;
.InfoList {
display: inline-block;
width: 50%;
height: 42px;
border: 1px solid #d8ddef;
box-sizing: border-box;
// margin-left: 1%;
.InfoListLable {
height: 40px;
line-height: 40px;
width: 100px;
float: left;
background-color: #f3f7ff;
box-sizing: border-box;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #666666;
text-align: center;
}
.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: #333333;
text-align: right;
padding-right: 10px;
}
}
.InfoList2 {
width: 100%;
height: 82px;
.InfoListLable {
height: 100%;
height: 80px;
line-height: 80px;
}
.InfoListvalue {
height: 100%;
height: 80px;
}
}
.InfoList3 {
width: 100%;
min-height: 60px;
height: auto;
overflow: 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;
}
}
}
.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: #333333;
margin: 0;
}
}
}
.echarts {
margin: 90px 50px;
}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.file {
color: #0f69ff;
cursor: pointer;
}
</style>