Newer
Older
KaiFengPC / src / views / sponeScreen / projectHM / gongchenkanbani_comp / XiangXiXinXi.vue
@zhangdeliang zhangdeliang on 16 Dec 5 KB update
  1. <template>
  2. <!-- 详细信息 -->
  3. <div class="XiangXiXinXi">
  4. <div class="xiangxinfo">
  5. <div v-for="i in xmxxList" :key="i.props" class="label_xnmx">
  6. <div class="title_class">
  7. <div class="top">{{ i.label }}</div>
  8. <div class="content">
  9. <span v-if="i.props == 'constructUnit' || i.props == 'designUnit'">
  10. {{ projectCompanyList.find(item => item.id === projectData[i.props])?.unitName || '' }}
  11. </span>
  12. <span v-else-if="i.props == 'projectTypeId'">
  13. {{ projectTypes.find(it => it.id === projectData.projectTypeId)?.projectTypeName || '' }}
  14. </span>
  15. <span v-else-if="i.props == 'buildCategory'">
  16. {{ findText('build_category', projectData.buildCategory) }}
  17. </span>
  18. <span v-else :title="projectData[i.props]">
  19. {{ projectData[i.props] }}
  20. </span>
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25.  
  26. <div class="projectMb xiangxinfo">
  27. <span class="title">项目设计方案</span>
  28. </div>
  29. <div class="xiangxinfo xmzb">
  30. <div v-for="i in projectData.sysFilehmzp" class="filePreview">
  31. <div @click="previewPdf(i.url)">{{ i.originalName }}</div>
  32. </div>
  33. </div>
  34.  
  35. <div class="projectMb xiangxinfo">
  36. <span class="title">项目设计参数</span>
  37. </div>
  38. <div class="xiangxinfo xmzb">
  39. <div v-for="i in xmmbList" :key="i.id" class="label_xnmx">
  40. <div class="title_class">
  41. <div class="top">{{ i.propertyName }}</div>
  42. <div class="content">
  43. <span :title="i.propertyValue">
  44. {{ i.propertyValue }}
  45. </span>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50.  
  51. <div class="projectMb">
  52. <span class="title">项目总体工程量</span>
  53. </div>
  54. <div class="xiangxinfo xmzb">
  55. <div v-for="i in xmxtgcl" :key="i.id" class="label_xnmx">
  56. <div class="title_class">
  57. <div class="top">{{ i.propertyName }}</div>
  58. <div class="content">
  59. <span :title="i.propertyValue">
  60. {{ i.propertyValue }}
  61. </span>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </template>
  68. <script setup name="XiangXiXinXi">
  69. import { inject } from 'vue';
  70. import { getProjectCompanyList, projectTypeList } from '@/api/sponeScreen/gcpjApi';
  71.  
  72. import { useDicts } from '@/hooks';
  73. import bus from '@/bus';
  74. const { proxy } = getCurrentInstance();
  75. const { project_content_type, build_category } = useDicts(proxy);
  76. const projectCompanyList = ref([]);
  77. const projectTypes = ref([]);
  78. const xmxxList = ref([
  79. { label: '项目名称', props: 'projectName' },
  80. { label: '立项时间', props: 'startTime' },
  81. { label: '建设类别', props: 'buildCategory' },
  82. { label: '工程类型', props: 'projectTypeId' },
  83. { label: '施工单位', props: 'constructUnit' },
  84. // { label: '代建单位', props: 'designUnit' },
  85. { label: '设计单位', props: 'designUnit' },
  86. // { label: '建设面积(㎡)', props: 'projectArea' },
  87. ]);
  88. const xmxtgcl = ref([]);
  89. const xmxtUrl = ref([]);
  90. const xmmbList = ref([]);
  91. const dicts = {
  92. build_category,
  93. project_content_type,
  94. };
  95. const findText = (prop, type) => {
  96. const item = dicts[prop].value.find(it => it.value === type);
  97. return item?.label || '';
  98. };
  99. const projectData = ref({});
  100. const getProjectCompanyLists = async () => {
  101. const res = await getProjectCompanyList();
  102. if (res?.code !== 200) return;
  103. projectCompanyList.value = res?.data || [];
  104. };
  105. const getProjectTypeList = async () => {
  106. const res = await projectTypeList({ status: '0' });
  107. if (res?.code !== 200) return;
  108. projectTypes.value = res?.data || [];
  109. };
  110.  
  111. // 文件预览
  112. function previewPdf(url) {
  113. window.open(url);
  114. }
  115.  
  116. onMounted(() => {
  117. bus.on('getProjectData', v => {
  118. projectData.value = v;
  119. xmmbList.value = v.projectItemDescriptionList.filter(it => it.projectContentType === 'design_parameter');
  120. xmxtgcl.value = v.projectItemDescriptionList.filter(it => it.projectContentType === 'total_engineering_quantity');
  121. getProjectCompanyLists();
  122. getProjectTypeList();
  123. });
  124. });
  125. onBeforeUnmount(() => {
  126. bus.off('getProjectData');
  127. });
  128. </script>
  129.  
  130. <style lang="scss" scoped>
  131. .XiangXiXinXi {
  132. display: flex;
  133. flex-direction: column;
  134. overflow: auto;
  135. overflow-x: hidden;
  136. height: 100%;
  137. font-family: Source Han Sans CN;
  138. font-weight: 400;
  139. font-size: 15px;
  140. color: #8be5ff;
  141.  
  142. .xiangxinfo {
  143. display: flex;
  144. flex-wrap: wrap;
  145. font-size: 12px;
  146. // justify-content: center;
  147. .hmzp {
  148. cursor: pointer;
  149. font-size: 15px;
  150. }
  151. .label_xnmx {
  152. width: 32.3%;
  153. height: 60px;
  154. margin: 10px 5px;
  155. border: 1px solid #17b4e7;
  156.  
  157. .title_class {
  158. display: flex;
  159. flex-direction: column;
  160. align-items: center;
  161.  
  162. .top,
  163. .title_class {
  164. height: 30px;
  165. width: 100%;
  166. background: rgba(23, 180, 231, 0.5);
  167. line-height: 30px;
  168. text-align: center;
  169. overflow: hidden;
  170. text-overflow: ellipsis;
  171. white-space: nowrap;
  172. font-family: Source Han Sans CN;
  173. font-weight: 400;
  174. font-size: 14px;
  175. color: #ffffff;
  176. }
  177.  
  178. .content {
  179. white-space: nowrap;
  180. text-overflow: ellipsis;
  181. overflow: hidden;
  182. width: 100%;
  183. margin: 3px;
  184. text-align: center;
  185. }
  186. }
  187. }
  188. }
  189.  
  190. .projectMb {
  191. margin: 10px 0px;
  192. width: 100%;
  193. height: 36px;
  194. line-height: 36px;
  195. text-indent: 24px;
  196. background: rgba(23, 180, 231, 0.5);
  197. }
  198. }
  199.  
  200. .title {
  201. font-size: 16px;
  202. font-weight: 700;
  203. color: #fff;
  204. }
  205.  
  206. .xmzb {
  207. .label_xnmx {
  208. flex: 1 !important;
  209. }
  210. .filePreview {
  211. font-size: 15px;
  212. div {
  213. margin-right: 15px;
  214. }
  215. }
  216. }
  217. </style>