Newer
Older
KaiFengPC / src / views / sponeScreen / projectHM / gongchenkanbani_comp / qipao.vue
@zhangdeliang zhangdeliang on 15 Jul 7 KB update
  1. <template>
  2. <!-- 海绵项目详情 -->
  3. <Transition name="slide-fade">
  4. <div class="pmpSitNewDialogw">
  5. <div class="title">
  6. <span class="text">{{ allDate.projectName }}</span>
  7. <el-icon class="icon_clas" size="22" @click="dclosed">
  8. <Close />
  9. </el-icon>
  10. </div>
  11. <div class="content">
  12. <div class="left_content">
  13. <div>
  14. <div class="timage">
  15. 建设规模及内容
  16. <div class="text_x" :title="BoxList.constructionAchievements">{{ BoxList.constructionAchievements }}</div>
  17. </div>
  18. </div>
  19. <div>
  20. <div class="timage">
  21. 项目概况
  22. <div class="text_x" :title="BoxList.projectOverview">{{ BoxList.projectOverview }}</div>
  23. </div>
  24. </div>
  25. <div>
  26. <el-button @click="qitxiangq" class="timage qtxq">其他详情 </el-button>
  27. </div>
  28. </div>
  29. <div class="right_content">
  30. <el-carousel trigger="click" height="247px" v-if="srcList.length > 0">
  31. <el-carousel-item v-for="item in srcList" :key="item">
  32. <el-image
  33. preview-teleported
  34. class="img_age"
  35. :src="item"
  36. :zoom-rate="1.2"
  37. :max-scale="7"
  38. :min-scale="0.2"
  39. :preview-src-list="srcList"
  40. :initial-index="4"
  41. />
  42. </el-carousel-item>
  43. </el-carousel>
  44. <el-empty :image-size="30" v-else />
  45.  
  46. <div class="text_x image_e" style="height: auto">完成照片</div>
  47. </div>
  48. </div>
  49. </div>
  50. </Transition>
  51. <!-- 海绵项目具体详情 -->
  52. <el-dialog class="pmpSitNewDialog" v-model="daLigoShow" :title="allDate.projectName" :align-center="true" width="47.6%" draggable>
  53. <el-tabs v-model="editableTabsValue" :stretch="true" @tab-click="TabsChange">
  54. <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name"> </el-tab-pane>
  55. <keep-alive>
  56. <component :is="componentId"></component>
  57. </keep-alive>
  58. </el-tabs>
  59. </el-dialog>
  60. </template>
  61. <script setup name="gongChengPingJia">
  62. import { ref, reactive, toRefs, onMounted } from 'vue';
  63. import XiangXiXinXi from './XiangXiXinXi.vue';
  64. import jianseduibi from './jianseduibi.vue';
  65. import xmsgt from './xmsgt.vue';
  66. import bus from '@/bus';
  67. import { projectInfoNewById } from '@/api/project/projectInformationNew';
  68. import { selectProjectImageList } from '@/api/sponeScreen/gcpjApi';
  69.  
  70. const emnits = defineEmits();
  71. const allDate = ref({});
  72. const BoxList = ref([]);
  73. const daLigoShow = ref(false);
  74. const editableTabsValue = ref('xxxx');
  75. const componentId = ref(XiangXiXinXi);
  76. const srcList = ref([]);
  77. const editableTabs = ref([
  78. { name: 'xxxx', title: '详细信息' },
  79. { name: 'xmsgt', title: '项目施工图' },
  80. { name: 'jsdb', title: '项目成果展示' },
  81. ]);
  82. const props = defineProps({
  83. fullScreen: {
  84. type: Boolean,
  85. default: false,
  86. },
  87. allDateList: {
  88. type: Object,
  89. },
  90. });
  91. function dclosed() {
  92. editableTabsValue.value = 'xxxx';
  93. emnits('closed', false);
  94. }
  95. function qitxiangq() {
  96. daLigoShow.value = true;
  97. console.log(allDate.value.id);
  98. // debugger;
  99. projectInfoNew(allDate.value.id);
  100. }
  101. async function projectInfoNew(p) {
  102. let { data } = await projectInfoNewById(p);
  103. bus.emit('getProjectDate', data);
  104. }
  105. function TabsChange({ props: { name } }) {
  106. projectInfoNew(allDate.value.id);
  107. switch (name) {
  108. case 'xxxx':
  109. componentId.value = XiangXiXinXi;
  110. break;
  111. case 'jsdb':
  112. componentId.value = jianseduibi;
  113. break;
  114. case 'xmsgt':
  115. componentId.value = xmsgt;
  116. break;
  117. }
  118. }
  119. const allImages = ref({});
  120. async function selectProjectImage(p) {
  121. let { data } = await selectProjectImageList(p);
  122. // console.log(data, 'datadatadata');
  123. BoxList.value = data[0];
  124. allImages.value = data[0];
  125. data[0]?.postConstructionFileList.forEach(i => {
  126. srcList.value.push(i.url);
  127. });
  128. console.log(srcList.value, 333);
  129. }
  130.  
  131. onMounted(() => {
  132. if (props?.allDateList) {
  133. allDate.value = props.allDateList;
  134. selectProjectImage({ projectNo: props.allDateList.projectNo });
  135. }
  136.  
  137. bus.on('mapClick', row => {
  138. allDate.value = row;
  139. setTimeout(() => {
  140. selectProjectImage({ projectNo: row.projectNo });
  141. if (!allDate.value.constructionPurpose) {
  142. daLigoShow.value = true;
  143. projectInfoNew(allDate.value.id);
  144. }
  145. }, 200);
  146. });
  147. });
  148. </script>
  149. <style lang="scss">
  150. .pmpSitNewDialogw {
  151. width: 550px;
  152. height: 330px;
  153. position: absolute;
  154. top: 10px;
  155. left: 485px;
  156. z-index: 1012;
  157. // background: linear-gradient(0deg, #005cba 0%, #000f26 100%);
  158. background: #003b6d;
  159. opacity: 9;
  160. border-radius: 14px;
  161.  
  162. .title {
  163. width: 100%;
  164. height: 40px;
  165. background: url('@/assets/images/Sponge_screen/qipaotankuan.png') no-repeat;
  166. background-size: 100% 100%;
  167. position: relative;
  168. display: flex;
  169. border-radius: 8px;
  170. align-items: center;
  171.  
  172. .icon_clas {
  173. position: absolute;
  174. right: 6px;
  175. top: 10px;
  176. }
  177.  
  178. .text {
  179. font-size: 17px;
  180. font-weight: bold;
  181. color: #fff;
  182. display: inline-block;
  183. margin-left: 20px;
  184. white-space: nowrap;
  185. text-overflow: ellipsis;
  186. overflow: hidden;
  187. width: 93%;
  188. }
  189.  
  190. .image {
  191. text-align: center;
  192. }
  193. }
  194.  
  195. .content {
  196. padding: 10px;
  197. display: flex;
  198. display: flex;
  199.  
  200. div {
  201. flex: 1;
  202. }
  203.  
  204. .left_content {
  205. // display: flex;
  206. // flex-direction: column;
  207. // height: 330px;
  208. > div {
  209. margin-bottom: 15px;
  210.  
  211. &:last-of-type {
  212. margin-bottom: 0;
  213. }
  214. }
  215. }
  216.  
  217. .timage {
  218. background: linear-gradient(90deg, #005cba 0%, rgba(0, 92, 186, 0) 100%);
  219. height: 96px;
  220. color: #fff;
  221. font-size: 17px;
  222. font-weight: bold;
  223. padding: 0 10px;
  224. }
  225.  
  226. .qtxq {
  227. height: 36px;
  228. }
  229.  
  230. .text_x {
  231. font-family: Source Han Sans CN;
  232. font-weight: 400;
  233. font-size: 14px;
  234. color: #ffffff;
  235. overflow-y: scroll;
  236. height: 70px;
  237. cursor: pointer;
  238. }
  239.  
  240. .image_e {
  241. text-align: center;
  242. }
  243. }
  244. }
  245. .pmpSitNewDialog {
  246. height: 680px;
  247. .el-dialog__header {
  248. width: 100%;
  249. height: 40px;
  250. background: url('@/assets/images/Sponge_screen/qipaotankuan.png') no-repeat;
  251. background-size: 100% 100%;
  252. position: relative;
  253. display: flex;
  254. border-radius: 8px;
  255. align-items: center;
  256.  
  257. .icon_clas {
  258. position: absolute;
  259. right: 6px;
  260. top: 10px;
  261. }
  262.  
  263. .el-dialog__headerbtn {
  264. position: absolute;
  265. top: -6px;
  266. }
  267.  
  268. .el-dialog__title {
  269. color: #fff;
  270. margin-left: 10px;
  271. margin-top: -9px;
  272. white-space: nowrap;
  273. text-overflow: ellipsis;
  274. overflow: hidden;
  275. width: 93%;
  276. }
  277. }
  278. .el-tabs__item {
  279. font-size: 16px !important;
  280. }
  281. }
  282.  
  283. .slide-fade-enter-active {
  284. transition: all 0.3s ease-out;
  285. }
  286.  
  287. .slide-fade-leave-active {
  288. transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  289. }
  290.  
  291. .slide-fade-enter-from,
  292. .slide-fade-leave-to {
  293. transform: translateX(20px);
  294. opacity: 0;
  295. }
  296.  
  297. .img_age {
  298. width: 300px;
  299. height: 227px;
  300. }
  301. </style>