Newer
Older
KaiFengPC / src / views / project / projectInformation / details.vue
@jimengfei jimengfei on 31 Jul 25 KB updata
  1. <template>
  2. <div class="details">
  3. <el-form ref="ruleForm" :model="form">
  4. <el-tabs v-model="activeName" type="card" class="demo-tabs">
  5. <el-tab-pane label="基础信息" name="1">
  6. <div class="pl20">
  7. <el-row :gutter="20">
  8. <el-col :span="12">
  9. <el-form-item label="项目类别:" prop="projectTypeName" class="mb5">
  10. <span>{{ form.projectTypeName }}</span>
  11. </el-form-item>
  12. </el-col>
  13. <el-col :span="12">
  14. <el-form-item label="项目名称:" prop="projectName" class="mb5">
  15. <span>{{ form.projectName }}</span>
  16. </el-form-item>
  17. </el-col>
  18. </el-row>
  19. <el-row :gutter="20">
  20. <el-col :span="12">
  21. <el-form-item label="建设类别:" prop="buildCategory" class="mb5">
  22. <span>{{ findText('build_category', form.buildCategory) }}</span>
  23. </el-form-item>
  24. </el-col>
  25. <el-col :span="12">
  26. <!-- <el-form-item label="所属排水分区:" prop="drainagePartition" class="mb5">
  27. <span>{{ findText('project_drainage_zone', form.drainagePartition) }}</span>
  28. </el-form-item> -->
  29. <el-form-item label="所属排水分区:" prop="drainagePartitionName" class="mb5">
  30. <span>{{ form.drainagePartitionName }}</span>
  31. </el-form-item>
  32. </el-col>
  33. </el-row>
  34. <el-row :gutter="20">
  35. <el-col :span="12">
  36. <el-form-item label="项目起止日期:" prop="time" class="mb5">
  37. <span>{{ form.time }}</span>
  38. </el-form-item>
  39. </el-col>
  40. <el-col :span="12">
  41. <el-form-item label="规划条件:" prop="planCondition" class="mb5">
  42. <span>{{ form.planCondition }}</span>
  43. </el-form-item>
  44. </el-col>
  45. </el-row>
  46. <el-row :gutter="20">
  47. <el-col :span="12">
  48. <el-form-item label="项目库类型:" prop="projectLibraryType" class="mb5">
  49. <span>{{ findText('project_library_type', form.projectLibraryType) }}</span>
  50. </el-form-item>
  51. </el-col>
  52. <el-col :span="12">
  53. <el-form-item label="任务类型:" prop="taskType" class="mb5">
  54. <span>{{ findText('task_type', form.taskType) }}</span>
  55. </el-form-item>
  56. </el-col>
  57. </el-row>
  58. <el-row>
  59. <el-form-item label="项目概况:" prop="projectOverview" class="mb5">
  60. <span>{{ form.projectOverview }}</span>
  61. </el-form-item>
  62. </el-row>
  63. <el-row>
  64. <el-form-item label="项目位置:" prop="projectLocationName" class="mb5">
  65. <span>{{ form.projectLocationName }}</span>
  66. </el-form-item>
  67. </el-row>
  68. <el-row>
  69. <div class="mapBox">
  70. <MapBox
  71. style="position: relative; width: 100%; height: 99.5%"
  72. :initJson="`/static/libs/mapbox/style/floodOneMap.json`"
  73. :isNeedInput="false"
  74. :isCanClick="false"
  75. :previousPoint="previousPoint"
  76. :previousPointName="previousPointName"
  77. ></MapBox>
  78. </div>
  79. </el-row>
  80. </div>
  81. </el-tab-pane>
  82. <el-tab-pane label="项目内容" name="2">
  83. <el-card class="box-card" shadow="never" v-for="(item, index) in projectContentList">
  84. <template #header>
  85. <div class="card-header">
  86. <span>{{ item.label }}</span>
  87. </div>
  88. </template>
  89. <el-table :data="form[`list${index + 2}`]">
  90. <el-table-column v-for="it in item.list" :label="it.propertyName" :prop="it.propertyKey" />
  91. </el-table>
  92. </el-card>
  93. </el-tab-pane>
  94. <el-tab-pane label="项目投资" name="3">
  95. <div class="pl20">
  96. <el-row :gutter="20">
  97. <el-col :span="12">
  98. <el-form-item label="投资批复文件名称(已批复项目填写):" prop="investFileName" class="mb5">
  99. <span>{{ form.investFileName }}</span>
  100. <span v-if="fileInfo.name">{{ fileInfo.name }}</span>
  101. <el-button v-if="fileInfo.name" type="primary" link class="ml10" @click="handlePreview(fileInfo)">预览</el-button>
  102. <el-button v-if="fileInfo.name" type="primary" link class="ml10" @click="downloadClick(fileInfo)">下载</el-button>
  103. </el-form-item>
  104. </el-col>
  105. </el-row>
  106. <el-row :gutter="20">
  107. <el-col :span="12">
  108. <el-form-item label="项目总投资(含主体工程)(万元):" prop="totalInvest" class="mb5">
  109. <span>{{ form.totalInvest }}</span>
  110. </el-form-item>
  111. </el-col>
  112. <el-col :span="12">
  113. <el-form-item label="地方政府投资(万元)" prop="govermentInvest" class="mb5">
  114. <span>{{ form.govermentInvest }}</span>
  115. </el-form-item>
  116. </el-col>
  117. </el-row>
  118. <el-row :gutter="20">
  119. <el-col :span="12">
  120. <el-form-item label="社会资本投入(万元):" prop="socialInvest" class="mb5">
  121. <span>{{ form.socialInvest }}</span>
  122. </el-form-item>
  123. </el-col>
  124. <el-col :span="12">
  125. <el-form-item label="海绵相关投资(不含主体工程)(万元)" prop="spongeInvest" class="mb5">
  126. <span>{{ form.spongeInvest }}</span>
  127. </el-form-item>
  128. </el-col>
  129. </el-row>
  130. <el-row :gutter="20">
  131. <el-col :span="12">
  132. <el-form-item label="项目运作模式:" prop="projectOperationPattern" class="mb5">
  133. <span>{{ findText('project_operation_pattern', form.projectOperationPattern) }}</span>
  134. </el-form-item>
  135. </el-col>
  136. </el-row>
  137. </div>
  138. </el-tab-pane>
  139. <el-tab-pane label="责任部门" name="4">
  140. <div class="pl20">
  141. <el-row :gutter="20">
  142. <el-col :span="12">
  143. <el-form-item label="责任部门:" prop="chargeDepartment" class="mb5">
  144. <span>{{ form.chargeDepartment }}</span>
  145. </el-form-item>
  146. </el-col>
  147. <el-col :span="12">
  148. <el-form-item label="责任人:" prop="chargeUser" class="mb5">
  149. <span>{{ form.chargeUser }}</span>
  150. </el-form-item>
  151. </el-col>
  152. </el-row>
  153. <el-row :gutter="20">
  154. <el-col :span="12">
  155. <el-form-item label="联系方式:" prop="phone" class="mb5">
  156. <span>{{ form.phone }}</span>
  157. </el-form-item>
  158. </el-col>
  159. <el-col :span="12">
  160. <el-form-item label="设计单位:" prop="designUnit" class="mb5">
  161. <span>{{ projectCompanyList.find(item => item.id === form.designUnit)?.unitName || '' }}</span>
  162. </el-form-item>
  163. </el-col>
  164. </el-row>
  165. <el-row :gutter="20">
  166. <el-col :span="12">
  167. <el-form-item label="施工单位:" prop="constructUnit" class="mb5">
  168. <span>{{ projectCompanyList.find(item => item.id === form.constructUnit)?.unitName || '' }}</span>
  169. </el-form-item>
  170. </el-col>
  171. <el-col :span="12">
  172. <el-form-item label="运维单位:" prop="operationUnit" class="mb5">
  173. <span>{{ projectCompanyList.find(item => item.id === form.operationUnit)?.unitName || '' }}</span>
  174. </el-form-item>
  175. </el-col>
  176. </el-row>
  177. </div>
  178. </el-tab-pane>
  179. <el-tab-pane label="建设进度" name="5">
  180. <div class="pl20">
  181. <el-row :gutter="20">
  182. <el-col :span="12">
  183. <el-form-item label="建设状态:" prop="buildStatus" class="mb5">
  184. <span>{{ findText('build_status', form.buildStatus) }}</span>
  185. </el-form-item>
  186. </el-col>
  187. </el-row>
  188. <el-row :gutter="20">
  189. <el-col :span="12">
  190. <el-form-item label="建设进度:" prop="projectProgress" class="mb5">
  191. <div style="width: 100%">
  192. <el-progress :percentage="form.projectProgress" />
  193. </div>
  194. </el-form-item>
  195. </el-col>
  196. </el-row>
  197. <el-form-item label="完成项目总投资(含主体工程)(万元):" prop="accomplishTotalInvest" class="mb5">
  198. <span>{{ form.accomplishTotalInvest }}</span>
  199. </el-form-item>
  200. <el-form-item label="完成海绵相关投资(不含主体工程)(万元):" prop="accomplishSpongeInvest" class="mb5">
  201. <span>{{ form.accomplishSpongeInvest }}</span>
  202. </el-form-item>
  203. <el-form-item label="建设过程中照片:" class="mb5">
  204. <div class="img_box" v-if="constractionFlieList.length">
  205. <div class="img" v-for="item in constractionFlieList">
  206. <img :src="item.url" alt="" />
  207. </div>
  208. </div>
  209. </el-form-item>
  210. <el-form-item label="建设完成后照片:" class="mb5">
  211. <div class="img_box" v-if="postConstractionFlieList.length">
  212. <div class="img" v-for="item in postConstractionFlieList">
  213. <img :src="item.url" alt="" />
  214. </div>
  215. </div>
  216. </el-form-item>
  217. </div>
  218. </el-tab-pane>
  219. <el-tab-pane label="项目立项" name="6">
  220. <el-form-item label="项目立项时间:" prop="startTime" class="mb5">
  221. <span>{{ form.startTime }}</span>
  222. </el-form-item>
  223. <el-form-item label="可研批复文件:" prop="name29" class="mb5" v-if="form.fileGroup.pro_project_approval">
  224. <div class="fileListBox">
  225. <span>{{ form.fileGroup.pro_project_approval[0].filieDescription }}</span>
  226. <div class="fileList">
  227. <div class="file" v-for="file in form.fileGroup.pro_project_approval[0].fileList">
  228. <span>{{ file.name }}</span>
  229. <el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
  230. <el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
  231. </div>
  232. </div>
  233. </div>
  234. </el-form-item>
  235. </el-tab-pane>
  236. <el-tab-pane label="规划许可" name="7">
  237. <div class="pl20">
  238. <el-row :gutter="20">
  239. <el-col :span="8">
  240. <el-form-item label="项目面积:" prop="projectArea" class="mb5">
  241. <span>{{ form.projectArea + 'm²' }}</span>
  242. </el-form-item>
  243. </el-col>
  244. <el-col :span="8">
  245. <el-form-item label="用地类型:" prop="spongeLandType" class="mb5">
  246. <span>{{ findText('sponge_land_type', form.spongeLandType) }}</span>
  247. </el-form-item>
  248. </el-col>
  249. <el-col :span="8">
  250. <el-form-item label="绿地率:" prop="greenRate" class="mb5">
  251. <span>{{ form.greenRate }}</span>
  252. </el-form-item>
  253. </el-col>
  254. </el-row>
  255. </div>
  256. <el-divider content-position="left">建设目标</el-divider>
  257. <div class="pl20">
  258. <el-row :gutter="20">
  259. <el-col :span="8">
  260. <el-form-item label="年径流总量控制率:" prop="annualRunoffTotalControlRate" class="mb5">
  261. <span>{{ form.annualRunoffTotalControlRate }}</span>
  262. </el-form-item>
  263. </el-col>
  264. <el-col :span="8">
  265. <el-form-item label="年径流污染去除率:" prop="annualRunoffPollutionControlRate" class="mb5">
  266. <span>{{ form.annualRunoffPollutionControlRate }}</span>
  267. </el-form-item>
  268. </el-col>
  269. <el-col :span="8">
  270. <el-form-item label="硬化地面率:" prop="hardGroundRate" class="mb5">
  271. <span>{{ form.hardGroundRate }}</span>
  272. </el-form-item>
  273. </el-col>
  274. </el-row>
  275. </div>
  276. <el-divider content-position="left">规划阶段资料</el-divider>
  277. <div class="pl20" v-if="form.fileGroup.planning_stage && planning_stage?.length">
  278. <el-form-item
  279. :label="planning_stage.find(it => it.value === item.dictData)?.label || ''"
  280. prop="name29"
  281. class="mb5"
  282. v-for="item in form.fileGroup.planning_stage"
  283. >
  284. <div class="fileListBox">
  285. <span style="margin-right: 10px">{{ item.filieDescription }}</span>
  286. <div class="fileList">
  287. <div class="file" v-for="file in item.fileList">
  288. <span>{{ file.name }}</span>
  289. <el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
  290. <el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
  291. </div>
  292. </div>
  293. </div>
  294. </el-form-item>
  295. </div>
  296. </el-tab-pane>
  297. <el-tab-pane label="施工许可" name="8">
  298. <div class="pl20" v-if="form.fileGroup.construction_permits && construction_permits?.length">
  299. <el-form-item
  300. :label="construction_permits.find(it => it.value === item.dictData)?.label || ''"
  301. prop="name29"
  302. class="mb5"
  303. v-for="item in form.fileGroup.construction_permits"
  304. >
  305. <div class="fileListBox">
  306. <span style="margin-right: 10px">{{ item.filieDescription }}</span>
  307. <div class="fileList">
  308. <div class="file" v-for="file in item.fileList">
  309. <span>{{ file.name }}</span>
  310. <el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
  311. <el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
  312. </div>
  313. </div>
  314. </div>
  315. </el-form-item>
  316. </div>
  317. </el-tab-pane>
  318. <!-- <el-tab-pane label="工程建设" name="9">
  319. <el-table :data="form.list7">
  320. <el-table-column label="巡查记录编号" prop="projectTypeId" show-overflow-tooltip />
  321. <el-table-column label="巡检人" prop="projectName" show-overflow-tooltip />
  322. <el-table-column label="巡检日期" prop="buildCategory" show-overflow-tooltip />
  323. <el-table-column label="项目整体进度描述" prop="drainagePartition" show-overflow-tooltip />
  324. <el-table-column label="图片" prop="time" show-overflow-tooltip />
  325. <el-table-column label="问题数量" prop="planCondition" show-overflow-tooltip />
  326. <el-table-column label="操作" show-overflow-tooltip>
  327. <template #default="{ row }">
  328. <el-button type="primary" link>查看</el-button>
  329. </template>
  330. </el-table-column>
  331. </el-table>
  332. <pagination class="pagination" :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
  333. </el-tab-pane> -->
  334. <el-tab-pane label="竣工验收" name="10">
  335. <el-divider content-position="left">建设内容</el-divider>
  336. <div class="pl20">
  337. <el-form-item label="建设指标达成情况:" prop="achievementTarget" class="mb5">
  338. <span>{{ form.achievementTarget }}</span>
  339. </el-form-item>
  340. <el-form-item label="海绵设施类型及规模:" prop="spongeTypeScale" class="mb5">
  341. <span>{{ form.spongeTypeScale }}</span>
  342. </el-form-item>
  343. <el-form-item label="其他情况说明:" prop="otherDescription" class="mb5">
  344. <span>{{ form.otherDescription }}</span>
  345. </el-form-item>
  346. </div>
  347. <el-divider content-position="left">验收资料</el-divider>
  348. <div class="pl20" v-if="form.fileGroup.acceptance_material && acceptance_material?.length">
  349. <el-form-item
  350. :label="acceptance_material.find(it => it.value === item.dictData)?.label || ''"
  351. prop="name29"
  352. class="mb5"
  353. v-for="item in form.fileGroup.acceptance_material"
  354. >
  355. <div class="fileListBox">
  356. <span style="margin-right: 10px">{{ item.filieDescription }}</span>
  357. <div class="fileList">
  358. <div class="file" v-for="file in item.fileList">
  359. <span>{{ file.name }}</span>
  360. <el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
  361. <el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
  362. </div>
  363. </div>
  364. </div>
  365. </el-form-item>
  366. </div>
  367. </el-tab-pane>
  368. </el-tabs>
  369. </el-form>
  370. </div>
  371. </template>
  372.  
  373. <script setup>
  374. import { projectInfoNewDetail, getFileLIst, getProjectCompanyList } from '@/api/project/projectInformationNew';
  375. import { inheritAttr } from '@/utils/v3';
  376. import { useDicts } from '@/hooks';
  377. import MapBox from '@/components/mapBoxSelectPosition/mapBoxSelectPosition.vue';
  378. const { proxy } = getCurrentInstance();
  379. const { findText } = useDicts(proxy);
  380. const { planning_stage } = proxy.useDict('planning_stage');
  381. const { construction_permits } = proxy.useDict('construction_permits');
  382. const { acceptance_material } = proxy.useDict('acceptance_material');
  383. const props = defineProps({
  384. curRow: {
  385. type: Object,
  386. default: () => ({}),
  387. },
  388. types: {
  389. type: Array,
  390. default: () => [],
  391. },
  392. buildCategory: {
  393. type: Array,
  394. default: () => [],
  395. },
  396. projectLibraryType: {
  397. type: Array,
  398. default: () => [],
  399. },
  400. projectContentType: {
  401. type: Array,
  402. default: () => [],
  403. },
  404. });
  405. const { curRow } = props;
  406. const activeName = ref('1');
  407. const form = reactive({
  408. projectTypeId: '',
  409. projectTypeName: '',
  410. projectName: '',
  411. buildCategory: '',
  412. drainagePartition: '',
  413. time: '',
  414. planCondition: '',
  415. projectLibraryType: '',
  416. taskType: '',
  417. projectOverview: '',
  418. projectLocation: '',
  419. projectLocationName: '',
  420. investFileName: '',
  421. totalInvest: '',
  422. govermentInvest: '',
  423. socialInvest: '',
  424. spongeInvest: '',
  425. projectOperationPattern: '',
  426. chargeDepartment: '',
  427. chargeUser: '',
  428. phone: '',
  429. designUnit: '',
  430. constructUnit: '',
  431. operationUnit: '',
  432. buildStatus: '',
  433. projectProgress: 10,
  434. accomplishTotalInvest: '',
  435. accomplishSpongeInvest: '',
  436. startTime: '',
  437. fileGroup: {},
  438. name29: '',
  439. projectArea: '',
  440. spongeLandType: '',
  441. greenRate: '',
  442. annualRunoffTotalControlRate: '',
  443. annualRunoffPollutionControlRate: '',
  444. hardGroundRate: '',
  445. achievementTarget: '',
  446. spongeTypeScale: '',
  447. otherDescription: '',
  448. drainagePartitionName: '',
  449. });
  450.  
  451. const projectItemDescriptionConfigList = ref([]);
  452. const projectContentList = ref([]);
  453. const previousPoint = ref('');
  454. const previousPointName = ref('');
  455. const fileInfo = reactive({
  456. extension: '',
  457. name: '',
  458. originalName: '',
  459. refField: 'postConstraction',
  460. refType: 'projectInfoNew',
  461. size: '',
  462. url: '',
  463. });
  464.  
  465. const fileInfo1 = reactive({
  466. extension: '',
  467. name: '',
  468. originalName: '',
  469. refField: 'postConstraction',
  470. refType: 'projectInfoNew',
  471. size: '',
  472. url: '',
  473. });
  474.  
  475. const fileInfo2 = reactive({
  476. extension: '',
  477. name: '',
  478. originalName: '',
  479. refField: 'postConstraction',
  480. refType: 'projectInfoNew',
  481. size: '',
  482. url: '',
  483. });
  484. const fileList = ref([]);
  485. const constractionFlieList = computed(() => {
  486. return fileList.value.filter(item => item.refField === 'constraction');
  487. });
  488. const postConstractionFlieList = computed(() => {
  489. return fileList.value.filter(item => item.refField === 'postConstraction');
  490. });
  491. const projectCompanyList = ref([]);
  492.  
  493. const getDetail = async () => {
  494. const res = await projectInfoNewDetail(curRow.projectNo);
  495. if (res?.code !== 200) return;
  496. console.log(res.data, 'ressssss');
  497. form.drainagePartitionName = res.data.drainagePartitionName;
  498. previousPoint.value = res.data.projectLocation;
  499. previousPointName.value = res.data.projectName;
  500. inheritAttr(res.data, form);
  501. const item = props.types.find(it => it.id === form.projectTypeId);
  502. form.projectTypeName = item?.projectTypeName || '';
  503. form.time = res.data.startTime + '至' + res.data.endTime;
  504. viewMap(form.projectLocation);
  505. projectItemDescriptionConfigList.value = res?.data?.projectItemDescriptionList || [];
  506. console.log(projectItemDescriptionConfigList);
  507. projectContentList.value = props.projectContentType.slice(0, 3).map((item, i) => {
  508. const list = projectItemDescriptionConfigList.value.filter(it => it.projectContentType === item.value);
  509. const obj = {};
  510. for (const item of list) {
  511. obj[item.propertyKey] = item.propertyValue;
  512. }
  513. form[`list${i + 2}`] = [obj];
  514. return {
  515. list: JSON.parse(JSON.stringify(list)),
  516. label: item.label,
  517. };
  518. });
  519.  
  520. getFileInfo(res.data.id, 'projectInfoNew', 'investmentApproval', data => {
  521. console.log(data);
  522. form.fileName = data?.[0]?.name || '';
  523. if (data?.[0]) {
  524. fileInfo.extension = data[0].extension;
  525. fileInfo.name = data[0].name;
  526. fileInfo.originalName = data[0].originalName;
  527. fileInfo.size = data[0].size;
  528. fileInfo.url = data[0].url;
  529. }
  530. });
  531.  
  532. fileList.value = res.data.sysFileList || [];
  533. };
  534.  
  535. const viewMap = projectLocation => {
  536. let data = [];
  537. if (projectLocation.includes('POINT')) {
  538. data = [
  539. {
  540. type: NewFiberMap.Enum.VectorType.SPECIAL_CIRCLE,
  541. id: 'point',
  542. style: {
  543. radius: 10,
  544. clampToGround: false,
  545. material: 'rgba(255, 0, 0, 1)',
  546. },
  547. geometrys: projectLocation,
  548. },
  549. ];
  550. } else if (projectLocation.includes('LINE')) {
  551. data = [
  552. {
  553. type: NewFiberMap.Enum.VectorType.POLYLINE,
  554. id: 'line',
  555. geometrys: projectLocation,
  556. style: {
  557. width: 5,
  558. material: 'rgba(255,0,0,1)',
  559. clampToGround: true,
  560. },
  561. },
  562. ];
  563. } else if (projectLocation.includes('POLYGON')) {
  564. data = [
  565. {
  566. type: NewFiberMap.Enum.VectorType.POLYGON,
  567. style: { material: 'rgba(255,0,0,1)', color: 'rgba(255,0,0,1)' },
  568. geometrys: projectLocation,
  569. id: 'area',
  570. },
  571. ];
  572. }
  573. if (data.length) {
  574. setTimeout(() => {
  575. let geojson = NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson(data);
  576. toCenterByGeoJson(geojson);
  577. newfiberMap.geojsonToMap(geojson);
  578. }, 500);
  579. }
  580. };
  581.  
  582. const toCenterByGeoJson = geojson => {
  583. let coords = turf.getCoords(geojson.features[0].geometry).flat();
  584. let flag = geojson.features.length == 1 && coords.length == 2;
  585. if (!!geojson.features.length && !flag) {
  586. newfiberMap.getMap().camera.flyTo({
  587. destination: new Cesium.Rectangle.fromDegrees(...turf.bbox(turf.transformScale(turf.bboxPolygon(turf.bbox(geojson)), 2))),
  588. });
  589. } else {
  590. newfiberMap.setCenter({
  591. roll: 0.01658908985506884,
  592. pitch: -87.24924906709752,
  593. heading: 5.026928271138224,
  594. lng: coords[0],
  595. lat: coords[1],
  596. height: 943.5996932813425,
  597. });
  598. }
  599. };
  600.  
  601. const getFileInfo = async (id, refType, refField, callback) => {
  602. const res = await getFileLIst({ refId: id, refType, refField });
  603. if (res?.code !== 200) return;
  604. callback && callback(res.data);
  605. };
  606.  
  607. const downloadClick = file => {
  608. const a = document.createElement('a');
  609. a.href = file.url;
  610. a.download = file.name;
  611. a.style.display = 'none';
  612. document.body.appendChild(a);
  613. console.log(a.download);
  614. a.click(); // 点击下载
  615. document.body.removeChild(a); // 下载完成移除元素
  616. };
  617.  
  618. const handlePreview = file => {
  619. proxy.$modal.confirm(`预览此文件: ${file.name}?`).then(() => {
  620. window.open(file.url);
  621. });
  622. };
  623.  
  624. const getProjectCompanyLists = async () => {
  625. const res = await getProjectCompanyList();
  626. if (res?.code !== 200) return;
  627. projectCompanyList.value = res?.data || [];
  628. };
  629.  
  630. onMounted(async () => {
  631. await getProjectCompanyLists();
  632. getDetail();
  633. console.log(props, 'props111111');
  634. });
  635. </script>
  636.  
  637. <style lang="scss" scoped>
  638. .details {
  639. .pl20 {
  640. padding-left: 20px;
  641. }
  642. .mb5 {
  643. margin-bottom: 5px;
  644. }
  645.  
  646. .ml10 {
  647. margin-left: 10px;
  648. }
  649.  
  650. .box-card {
  651. margin-top: 10px;
  652. &:first-of-type {
  653. margin-top: 0;
  654. }
  655. }
  656.  
  657. :deep(.pagination) {
  658. height: 52px;
  659. margin-top: 10px;
  660. .el-pagination {
  661. right: 20px;
  662. }
  663. }
  664. }
  665. .mapBox {
  666. width: 100%;
  667. height: 400px;
  668. }
  669.  
  670. .fileListBox {
  671. display: flex;
  672. }
  673. .img_box {
  674. display: flex;
  675. flex-wrap: wrap;
  676. .img {
  677. width: 178px;
  678. height: 178px;
  679. margin-right: 10px;
  680. }
  681. img {
  682. width: 100%;
  683. height: 100%;
  684. }
  685. }
  686. </style>