- <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('project_drainage_zone', form.drainagePartition) }}</span>
- </el-form-item> -->
- <el-form-item label="所属排水分区:" prop="drainagePartitionName" class="mb5">
- <span>{{ form.drainagePartitionName }}</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>
- <el-form-item label="项目位置:" prop="projectLocationName" class="mb5">
- <span>{{ form.projectLocationName }}</span>
- </el-form-item>
- </el-row>
- <el-row>
- <div class="mapBox">
- <MapBox
- style="position: relative; width: 100%; height: 99.5%"
- :initJson="`/static/libs/mapbox/style/floodOneMap.json`"
- :isNeedInput="false"
- :isCanClick="false"
- :previousPoint="previousPoint"
- :previousPointName="previousPointName"
- ></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" :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="巡查记录编号" prop="projectTypeId" show-overflow-tooltip />
- <el-table-column label="巡检人" prop="projectName" show-overflow-tooltip />
- <el-table-column label="巡检日期" prop="buildCategory" show-overflow-tooltip />
- <el-table-column label="项目整体进度描述" prop="drainagePartition" show-overflow-tooltip />
- <el-table-column label="图片" prop="time" show-overflow-tooltip />
- <el-table-column label="问题数量" prop="planCondition" show-overflow-tooltip />
- <el-table-column label="操作" 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 { projectInfoNewDetail, getFileLIst, getProjectCompanyList } from '@/api/project/projectInformationNew';
- import { inheritAttr } from '@/utils/v3';
- import { useDicts } from '@/hooks';
- import MapBox from '@/components/mapBoxSelectPosition/mapBoxSelectPosition.vue';
- 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: '',
- projectLocationName: '',
- 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: '',
- drainagePartitionName: '',
- });
-
- const projectItemDescriptionConfigList = ref([]);
- const projectContentList = ref([]);
- const previousPoint = ref('');
- const previousPointName = 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, 'ressssss');
- form.drainagePartitionName = res.data.drainagePartitionName;
- previousPoint.value = res.data.projectLocation;
- previousPointName.value = res.data.projectName;
- 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('LINE')) {
- 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();
- console.log(props, 'props111111');
- });
- </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;
- }
- }
-
- :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>