Newer
Older
KaiFengPC / src / views / project / projectInformation / components / proImgCont.vue
@zhangdeliang zhangdeliang on 23 May 5 KB 初始化项目
  1. <template>
  2. <div class="water-analysis-page">
  3. <div class="top">
  4. <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  5. <el-tab-pane label="项目概况" name="first">
  6. <el-upload
  7. v-if="postList?.generalSituationFileList?.length == 0"
  8. :auto-upload="false"
  9. list-type="picture-card"
  10. v-model:file-list="postList.generalSituationFileList"
  11. class="upload-demo"
  12. action="/system/upload"
  13. :headers="uploadHeader"
  14. multiple
  15. :before-upload="handleBeforeUpload"
  16. >
  17. <template #trigger>
  18. <el-icon class="avatar-uploader-icon">
  19. <Plus />
  20. </el-icon>
  21. </template>
  22. </el-upload>
  23. <el-image
  24. v-else
  25. style="width: 100px; margin: 0 10px"
  26. v-for="i in postList.generalSituationFileList"
  27. :src="i.url"
  28. :zoom-rate="1"
  29. :initial-index="4"
  30. :preview-src-list="[i.url]"
  31. />
  32. </el-tab-pane>
  33. <el-tab-pane label="建设前" name="second">
  34. <el-upload
  35. v-if="postList?.preConstructionFileList?.length == 0"
  36. :auto-upload="false"
  37. list-type="picture-card"
  38. v-model:file-list="postList.preConstructionFileList"
  39. class="upload-demo"
  40. action="/system/upload"
  41. :headers="uploadHeader"
  42. multiple
  43. :before-upload="handleBeforeUpload"
  44. >
  45. <template #trigger>
  46. <el-icon class="avatar-uploader-icon">
  47. <Plus />
  48. </el-icon>
  49. </template>
  50. <template #tip> </template>
  51. </el-upload>
  52. <el-image
  53. v-else
  54. style="width: 100px; margin: 0 10px"
  55. v-for="i in postList.preConstructionFileList"
  56. :src="i.url"
  57. :zoom-rate="1"
  58. :initial-index="4"
  59. :preview-src-list="[i.url]"
  60. />
  61. </el-tab-pane>
  62. <el-tab-pane label="建设中" name="three">
  63. <el-upload
  64. v-if="postList?.underConstructionFileList?.length == 0"
  65. :auto-upload="false"
  66. list-type="picture-card"
  67. v-model:file-list="postList.underConstructionFileList"
  68. class="upload-demo"
  69. action="/system/upload"
  70. :headers="uploadHeader"
  71. multiple
  72. :before-upload="handleBeforeUpload"
  73. >
  74. <template #trigger>
  75. <el-icon class="avatar-uploader-icon">
  76. <Plus />
  77. </el-icon>
  78. </template>
  79. <template #tip> </template>
  80. </el-upload>
  81. <el-image
  82. v-else
  83. style="width: 100px; margin: 0 10px"
  84. v-for="i in postList.underConstructionFileList"
  85. :src="i.url"
  86. :zoom-rate="1"
  87. :initial-index="4"
  88. :preview-src-list="[i.url]"
  89. />
  90. </el-tab-pane>
  91. <el-tab-pane label="建设后" name="four">
  92. <el-upload
  93. v-if="postList?.postConstructionFileList?.length == 0"
  94. :auto-upload="false"
  95. v-model:file-list="postList.postConstructionFileList"
  96. class="upload-demo"
  97. :headers="uploadHeader"
  98. multiple
  99. list-type="picture-card"
  100. :before-upload="handleBeforeUpload"
  101. >
  102. <template #trigger>
  103. <el-icon class="avatar-uploader-icon">
  104. <Plus />
  105. </el-icon>
  106. </template>
  107. <template #tip> </template>
  108. </el-upload>
  109. <el-image
  110. v-else
  111. style="width: 100px; margin: 0 10px"
  112. v-for="i in postList.postConstructionFileList"
  113. :src="i.url"
  114. :zoom-rate="1"
  115. :initial-index="4"
  116. :preview-src-list="[i.url]"
  117. />
  118. </el-tab-pane>
  119. </el-tabs>
  120. </div>
  121. </div>
  122. </template>
  123. <script setup>
  124. import { getInfo } from '@/api/project/imgwh';
  125.  
  126. const emits = defineEmits();
  127. const typeList = inject('typeList1');
  128. const postList = ref([]);
  129. const activeName = ref('first');
  130.  
  131. const getInfoM = async p => {
  132. getInfo(p).then(({ data }) => {
  133. const arra = data.filter(i => {
  134. return i.id == typeList.value.id;
  135. });
  136. postList.value = arra[0];
  137. });
  138. };
  139.  
  140. function handleBeforeUpload(file) {
  141. if (file.name.length > 50) {
  142. proxy.$modal.msgError(`文件名称过长(50个字符以内),请先修改再上传!`);
  143. return false;
  144. }
  145. return true;
  146. }
  147.  
  148. onMounted(() => {
  149. getInfoM({ projectNo: typeList.value.projectNo, pageSize: 999999, pageNum: 1 });
  150. });
  151. </script>
  152. <style lang="scss" scoped>
  153. .water-analysis-page {
  154. padding: 20px;
  155. }
  156. .pagination {
  157. float: right;
  158. margin-top: 10px;
  159. }
  160. .iconCLass {
  161. :deep .el-input__wrapper {
  162. box-shadow: 0 0 0 0;
  163. }
  164. }
  165. .tabs {
  166. :deep .el-input__wrapper {
  167. box-shadow: 0 0 0 0;
  168. }
  169. }
  170. .LeftBox1 {
  171. // width: 280px;
  172. height: 100%;
  173.  
  174. .HTMoney1 {
  175. flex: 1;
  176. text-align: center;
  177. .JENum {
  178. height: 40px;
  179. font-size: 18px;
  180. font-weight: 400;
  181. color: #409eff;
  182. }
  183.  
  184. .JEName {
  185. width: 100%;
  186. height: 40px;
  187. font-size: 16px;
  188. color: black;
  189. }
  190. }
  191. .HTMoney2 {
  192. background: red;
  193. .JEName {
  194. color: #fff;
  195. }
  196. .JENum {
  197. color: #fff;
  198. }
  199. }
  200. }
  201. .Top_cont {
  202. display: flex;
  203. width: 80vw;
  204. justify-content: center;
  205. align-items: center;
  206. margin-bottom: 35px;
  207. }
  208. </style>