<template>
<div class="details">
<el-form ref="ruleForm" :model="form">
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
>
<el-tab-pane label="基础信息" name="1">
<div class="pl20">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目类别:" prop="projectTypeName" class="mb5">
<span>{{ form.projectTypeName }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目名称:" prop="projectName" class="mb5">
<span>{{ form.projectName }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="建设类别:" prop="buildCategory" class="mb5">
<span>{{ findText('build_category', form.buildCategory) }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属排水分区:" prop="drainagePartition" class="mb5">
<span>{{ findText('drainage_partition', form.drainagePartition) }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目起止日期:" prop="time" class="mb5">
<span>{{ form.time }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规划条件:" prop="planCondition" class="mb5">
<span>{{ form.planCondition }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目库类型:" prop="projectLibraryType" class="mb5">
<span>{{ findText('project_library_type', form.projectLibraryType) }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="任务类型:" prop="taskType" class="mb5">
<span>{{ findText('task_type', form.taskType) }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="项目概况:" prop="projectOverview" class="mb5">
<span>{{ form.projectOverview }}</span>
</el-form-item>
</el-row>
<el-row>
<div>项目位置：</div>
<div class="mapBox">
<MapBox ref="mapBoxRef" :isShowTool="false" :isShowSearch="false"></MapBox>
</div>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane label="项目内容" name="2">
<el-card class="box-card" shadow="never" v-for="(item, index) in projectContentList">
<template #header>
<div class="card-header">
<span>{{ item.label }}</span>
</div>
</template>
<el-table :data="form[`list${index + 2}`]">
<el-table-column
v-for="it in item.list"
:label="it.propertyName"
align="center"
:prop="it.propertyKey"
/>
</el-table>
</el-card>
</el-tab-pane>
<el-tab-pane label="项目投资" name="3">
<div class="pl20">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="投资批复文件名称（已批复项目填写）:" prop="investFileName" class="mb5">
<span>{{ form.investFileName }}</span>
<span v-if="fileInfo.name">{{ fileInfo.name }}</span>
<el-button v-if="fileInfo.name" type="primary" link class="ml10" @click="handlePreview(fileInfo)">预览</el-button>
<el-button v-if="fileInfo.name" type="primary" link class="ml10" @click="downloadClick(fileInfo)">下载</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目总投资（含主体工程）（万元）:" prop="totalInvest" class="mb5">
<span>{{ form.totalInvest }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="地方政府投资（万元）" prop="govermentInvest" class="mb5">
<span>{{ form.govermentInvest }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="社会资本投入（万元）:" prop="socialInvest" class="mb5">
<span>{{ form.socialInvest }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="海绵相关投资（不含主体工程）（万元）" prop="spongeInvest" class="mb5">
<span>{{ form.spongeInvest }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目运作模式:" prop="projectOperationPattern" class="mb5">
<span>{{ findText('project_operation_pattern', form.projectOperationPattern) }}</span>
</el-form-item>
</el-col>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane label="责任部门" name="4">
<div class="pl20">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="责任部门:" prop="chargeDepartment" class="mb5">
<span>{{ form.chargeDepartment }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="责任人:" prop="chargeUser" class="mb5">
<span>{{ form.chargeUser }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="联系方式:" prop="phone" class="mb5">
<span>{{ form.phone }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设计单位:" prop="designUnit" class="mb5">
<span>{{ projectCompanyList.find(item => item.id === form.designUnit)?.unitName || '' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="施工单位:" prop="constructUnit" class="mb5">
<span>{{ projectCompanyList.find(item => item.id === form.constructUnit)?.unitName || '' }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="运维单位:" prop="operationUnit" class="mb5">
<span>{{ projectCompanyList.find(item => item.id === form.operationUnit)?.unitName || '' }}</span>
</el-form-item>
</el-col>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane label="建设进度" name="5">
<div class="pl20">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="建设状态:" prop="buildStatus" class="mb5">
<span>{{ findText('build_status', form.buildStatus) }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="建设进度:" prop="projectProgress" class="mb5">
<div style="width: 100%">
<el-progress :percentage="form.projectProgress" />
</div>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="完成项目总投资（含主体工程）（万元）:" prop="accomplishTotalInvest" class="mb5">
<span>{{ form.accomplishTotalInvest }}</span>
</el-form-item>
<el-form-item label="完成海绵相关投资（不含主体工程）（万元）:" prop="accomplishSpongeInvest" class="mb5">
<span>{{ form.accomplishSpongeInvest }}</span>
</el-form-item>
<el-form-item label="建设过程中照片:" class="mb5">
<div class="img_box" v-if="constractionFlieList.length">
<div class="img" v-for="item in constractionFlieList">
<img :src="item.url" alt="">
</div>
</div>
</el-form-item>
<el-form-item label="建设完成后照片:" class="mb5">
<div class="img_box" v-if="postConstractionFlieList.length">
<div class="img" v-for="item in postConstractionFlieList">
<img :src="item.url" alt="">
</div>
</div>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label="项目立项" name="6">
<el-form-item label="项目立项时间:" prop="startTime" class="mb5">
<span>{{ form.startTime }}</span>
</el-form-item>
<el-form-item label="可研批复文件:" prop="name29" class="mb5" v-if="form.fileGroup.pro_project_approval">
<div class="fileListBox">
<span>{{ form.fileGroup.pro_project_approval[0].filieDescription }}</span>
<div class="fileList">
<div class="file" v-for="file in form.fileGroup.pro_project_approval[0].fileList">
<span>{{ file.name }}</span>
<el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
<el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
</div>
</div>
</div>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="规划许可" name="7">
<div class="pl20">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="项目面积:" prop="projectArea" class="mb5">
<span>{{ form.projectArea + 'm²' }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="用地类型:" prop="spongeLandType" class="mb5">
<span>{{ findText('sponge_land_type', form.spongeLandType) }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="绿地率:" prop="greenRate" class="mb5">
<span>{{ form.greenRate }}</span>
</el-form-item>
</el-col>
</el-row>
</div>
<el-divider content-position="left">建设目标</el-divider>
<div class="pl20">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="年径流总量控制率:" prop="annualRunoffTotalControlRate" class="mb5">
<span>{{ form.annualRunoffTotalControlRate }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="年径流污染去除率:" prop="annualRunoffPollutionControlRate" class="mb5">
<span>{{ form.annualRunoffPollutionControlRate }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="硬化地面率:" prop="hardGroundRate" class="mb5">
<span>{{ form.hardGroundRate }}</span>
</el-form-item>
</el-col>
</el-row>
</div>
<el-divider content-position="left">规划阶段资料</el-divider>
<div class="pl20" v-if="form.fileGroup.planning_stage && planning_stage?.length">
<el-form-item
:label="planning_stage.find(it => it.value === item.dictData)?.label || ''"
prop="name29"
class="mb5"
v-for="item in form.fileGroup.planning_stage"
>
<div class="fileListBox">
<span style="margin-right: 10px">{{ item.filieDescription }}</span>
<div class="fileList">
<div class="file" v-for="file in item.fileList">
<span>{{ file.name }}</span>
<el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
<el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
</div>
</div>
</div>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label="施工许可" name="8">
<div class="pl20" v-if="form.fileGroup.construction_permits && construction_permits?.length">
<el-form-item
:label="construction_permits.find(it => it.value === item.dictData)?.label || ''"
prop="name29"
class="mb5"
v-for="item in form.fileGroup.construction_permits"
>
<div class="fileListBox">
<span style="margin-right: 10px">{{ item.filieDescription }}</span>
<div class="fileList">
<div class="file" v-for="file in item.fileList">
<span>{{ file.name }}</span>
<el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
<el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
</div>
</div>
</div>
</el-form-item>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="工程建设" name="9">
<el-table :data="form.list7">
<el-table-column label="巡查记录编号" align="center" prop="projectTypeId" show-overflow-tooltip />
<el-table-column label="巡检人" align="center" prop="projectName" show-overflow-tooltip />
<el-table-column label="巡检日期" align="center" prop="buildCategory" show-overflow-tooltip />
<el-table-column label="项目整体进度描述" align="center" prop="drainagePartition" show-overflow-tooltip />
<el-table-column label="图片" align="center" prop="time" show-overflow-tooltip />
<el-table-column label="问题数量" align="center" prop="planCondition" show-overflow-tooltip />
<el-table-column label="操作" align="center" show-overflow-tooltip>
<template #default="{ row }">
<el-button type="primary" link>查看</el-button>
</template>
</el-table-column>
</el-table>
<pagination class="pagination" :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
</el-tab-pane> -->
<el-tab-pane label="竣工验收" name="10">
<el-divider content-position="left">建设内容</el-divider>
<div class="pl20">
<el-form-item label="建设指标达成情况:" prop="achievementTarget" class="mb5">
<span>{{ form.achievementTarget }}</span>
</el-form-item>
<el-form-item label="海绵设施类型及规模:" prop="spongeTypeScale" class="mb5">
<span>{{ form.spongeTypeScale }}</span>
</el-form-item>
<el-form-item label="其他情况说明:" prop="otherDescription" class="mb5">
<span>{{ form.otherDescription }}</span>
</el-form-item>
</div>
<el-divider content-position="left">验收资料</el-divider>
<div class="pl20" v-if="form.fileGroup.acceptance_material && acceptance_material?.length">
<el-form-item
:label="acceptance_material.find(it => it.value === item.dictData)?.label || ''"
prop="name29"
class="mb5"
v-for="item in form.fileGroup.acceptance_material"
>
<div class="fileListBox">
<span style="margin-right: 10px">{{ item.filieDescription }}</span>
<div class="fileList">
<div class="file" v-for="file in item.fileList">
<span>{{ file.name }}</span>
<el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
<el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
</div>
</div>
</div>
</el-form-item>
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { projectInfoNewDetail, getFileLIst, getProjectCompanyList } from '@/api/projectInformationNew'
import { inheritAttr } from '@/utils/v3'
import { useDicts } from '@/hooks'
import MapBox from '@/components/Map'
const { proxy } = getCurrentInstance()
const { findText } = useDicts(proxy)
const { planning_stage } = proxy.useDict('planning_stage')
const { construction_permits } = proxy.useDict('construction_permits')
const { acceptance_material } = proxy.useDict('acceptance_material')
const props = defineProps({
curRow: {
type: Object,
default: () => ({})
},
types: {
type: Array,
default: () => ([])
},
buildCategory: {
type: Array,
default: () => ([])
},
projectLibraryType: {
type: Array,
default: () => ([])
},
projectContentType: {
type: Array,
default: () => ([])
}
})
const { curRow } = props
const activeName = ref('1')
const form = reactive({
projectTypeId: '',
projectTypeName: '',
projectName: '',
buildCategory: '',
drainagePartition: '',
time: '',
planCondition: '',
projectLibraryType: '',
taskType: '',
projectOverview: '',
projectLocation: '',
investFileName: '',
totalInvest: '',
govermentInvest: '',
socialInvest: '',
spongeInvest: '',
projectOperationPattern: '',
chargeDepartment: '',
chargeUser: '',
phone: '',
designUnit: '',
constructUnit: '',
operationUnit: '',
buildStatus: '',
projectProgress: 10,
accomplishTotalInvest: '',
accomplishSpongeInvest: '',
startTime: '',
fileGroup: {},
name29: '',
projectArea: '',
spongeLandType: '',
greenRate: '',
annualRunoffTotalControlRate: '',
annualRunoffPollutionControlRate: '',
hardGroundRate: '',
achievementTarget: '',
spongeTypeScale: '',
otherDescription: '',
})
const projectItemDescriptionConfigList = ref([])
const projectContentList = ref([])
const fileInfo = reactive({
extension: '',
name: '',
originalName: '',
refField: 'postConstraction',
refType: 'projectInfoNew',
size: '',
url: ''
})
const fileInfo1 = reactive({
extension: '',
name: '',
originalName: '',
refField: 'postConstraction',
refType: 'projectInfoNew',
size: '',
url: ''
})
const fileInfo2 = reactive({
extension: '',
name: '',
originalName: '',
refField: 'postConstraction',
refType: 'projectInfoNew',
size: '',
url: ''
})
const fileList = ref([])
const constractionFlieList = computed(() => {
return fileList.value.filter(item => item.refField === 'constraction')
})
const postConstractionFlieList = computed(() => {
return fileList.value.filter(item => item.refField === 'postConstraction')
})
const projectCompanyList = ref([])
const getDetail = async () => {
const res = await projectInfoNewDetail(curRow.projectNo)
if(res?.code !== 200) return
console.log(res.data)
inheritAttr(res.data, form)
const item = props.types.find(it => it.id === form.projectTypeId)
form.projectTypeName = item?.projectTypeName || ''
form.time = res.data.startTime + '至' + res.data.endTime
viewMap(form.projectLocation)
projectItemDescriptionConfigList.value = res?.data?.projectItemDescriptionList || []
console.log(projectItemDescriptionConfigList)
projectContentList.value = props.projectContentType.slice(0, 3).map((item, i) => {
const list = projectItemDescriptionConfigList.value.filter(it => it.projectContentType === item.value)
const obj = {}
for (const item of list) {
obj[item.propertyKey] = item.propertyValue
}
form[`list${i + 2}`] = [obj]
return {
list: JSON.parse(JSON.stringify(list)),
label: item.label
}
})
getFileInfo(res.data.id, 'projectInfoNew', 'investmentApproval', (data) => {
console.log(data)
form.fileName = data?.[0]?.name || ''
if(data?.[0]) {
fileInfo.extension = data[0].extension
fileInfo.name = data[0].name
fileInfo.originalName = data[0].originalName
fileInfo.size = data[0].size
fileInfo.url = data[0].url
}
})
fileList.value = res.data.sysFileList || []
}
const viewMap = (projectLocation) => {
let data = [];
if(projectLocation.includes('POINT')) {
data = [
{
type: NewFiberMap.Enum.VectorType.SPECIAL_CIRCLE,
id: 'point',
style: {
radius: 10,
clampToGround: false,
material: 'rgba(255, 0, 0, 1)'
},
geometrys: projectLocation,
},
];
} else if(projectLocation.includes('POLYLINE')) {
data = [
{
type: NewFiberMap.Enum.VectorType.POLYLINE,
id: 'line',
geometrys: projectLocation,
style: {
width: 5,
material: "rgba(255,0,0,1)",
clampToGround: true,
},
},
]
} else if(projectLocation.includes('POLYGON')) {
data = [
{
type: NewFiberMap.Enum.VectorType.POLYGON,
style: { material: "rgba(255,0,0,1)", color: "rgba(255,0,0,1)" },
geometrys: projectLocation,
id: 'area'
},
]
}
if (data.length) {
setTimeout(() => {
let geojson = NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson(data);
toCenterByGeoJson(geojson);
newfiberMap.geojsonToMap(geojson);
}, 500)
}
}
const toCenterByGeoJson = (geojson) => {
let coords = turf.getCoords(geojson.features[0].geometry).flat();
let flag = geojson.features.length == 1 && coords.length == 2;
if (!!geojson.features.length && !flag) {
newfiberMap.getMap().camera.flyTo({destination: new Cesium.Rectangle.fromDegrees(...turf.bbox(turf.transformScale(turf.bboxPolygon(turf.bbox(geojson)), 2)))});
} else {
newfiberMap.setCenter({
"roll": 0.01658908985506884,
"pitch": -87.24924906709752,
"heading": 5.026928271138224,
"lng": coords[0],
"lat": coords[1],
"height": 943.5996932813425
})
}
}
const getFileInfo = async (id, refType, refField, callback) => {
const res = await getFileLIst({ refId: id, refType, refField })
if(res?.code !== 200) return
callback && callback(res.data)
}
const downloadClick = (file) => {
const a = document.createElement('a')
a.href = file.url
a.download = file.name
a.style.display = 'none'
document.body.appendChild(a)
console.log(a.download);
a.click() // 点击下载
document.body.removeChild(a) // 下载完成移除元素
}
const handlePreview = (file) => {
proxy.$modal
.confirm(`下载此文件: ${file.name}？`)
.then(() => {
window.open(file.url)
})
}
const getProjectCompanyLists =async () => {
const res = await getProjectCompanyList()
if(res?.code !== 200) return
projectCompanyList.value = res?.data || []
}
onMounted(async () => {
await getProjectCompanyLists()
getDetail()
})
</script>
<style lang="scss" scoped>
.details {
.pl20 {
padding-left: 20px;
}
.mb5 {
margin-bottom: 5px;
}
.ml10 {
margin-left: 10px;
}
.box-card {
margin-top: 10px;
&:first-of-type {
margin-top: 0;
}
}
::v-deep(.pagination) {
height: 52px;
margin-top: 10px;
.el-pagination {
right: 20px;
}
}
}
.mapBox {
width: 100%;
height: 400px;
}
.fileListBox {
display: flex;
}
.img_box {
display: flex;
flex-wrap: wrap;
.img {
width: 178px;
height: 178px;
margin-right: 10px;
}
img {
width: 100%;
height: 100%;
}
}
</style>
