Newer
Older
KaiFengPC / src / views / sponeScreen / projectHM / gongchenkanbani_comp / qipao.vue
@lyj lyj on 25 Jun 6 KB 工程考核弹框
  1. <template>
  2. <Transition name="slide-fade">
  3. <!-- <div class="pmpSitNewDialogw" v-if="allDate.constructionPurpose"> -->
  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="allDate.constructionPurpose">{{ allDate.constructionPurpose }}</div>
  17. </div>
  18. </div>
  19. <div>
  20. <div class="timage">
  21. 建设完成情况
  22. <div class="text_x" :title="allDate.constructionAchievements">{{ allDate.constructionAchievements }}</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-image
  31. class="img_age"
  32. v-if="allImages?.postConstructionFileList?.length > 0"
  33. :zoom-rate="1.2"
  34. :max-scale="7"
  35. :preview-src-list="srcList"
  36. :min-scale="0.2"
  37. :src="allImages?.postConstructionFileList[0]?.url"
  38. alt=""
  39. :title="allDate.projectOverview"
  40. />
  41.  
  42. <el-empty :image-size="30" v-else />
  43. <div class="text_x image_e" style="height: auto">现场照片</div>
  44. </div>
  45. </div>
  46. </div>
  47. </Transition>
  48. <el-dialog class="pmpSitNewDialog" v-model="daLigoShow" :title="allDate.projectName" :align-center="true" width="47.6%" draggable>
  49. <el-tabs v-model="editableTabsValue" :stretch="true" @tab-click="TabsChange">
  50. <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name"> </el-tab-pane>
  51. <keep-alive>
  52. <component :is="componentId"></component>
  53. </keep-alive>
  54. </el-tabs>
  55. </el-dialog>
  56. </template>
  57. <script setup name="gongChengPingJia">
  58. import { ref, reactive, toRefs, onMounted } from 'vue';
  59.  
  60. import xianchangtup from '@/assets/images/Sponge_screen/xianchangtup.png';
  61. import XiangXiXinXi from './XiangXiXinXi.vue';
  62. import jianseduibi from './jianseduibi.vue';
  63. import xmsgt from './xmsgt.vue';
  64. import bus from '@/bus';
  65. import { projectInfoNewById } from '@/api/project/projectInformationNew';
  66. import { selectProjectImageList } from '@/api/sponeScreen/gcpjApi';
  67.  
  68. const emnits = defineEmits();
  69. const allDate = ref({});
  70. const daLigoShow = ref(false);
  71. const editableTabsValue = ref('xxxx');
  72. const componentId = ref(XiangXiXinXi);
  73. const srcList = ref([]);
  74. const editableTabs = ref([
  75. { name: 'xxxx', title: '详细信息' },
  76. { name: 'jsdb', title: '项目成果展示' },
  77. { name: 'xmsgt', title: '项目施工图' },
  78. ]);
  79. const props = defineProps({
  80. fullScreen: {
  81. type: Boolean,
  82. default: false,
  83. },
  84. allDateList: {
  85. type: Object,
  86. },
  87. });
  88. function dclosed() {
  89. editableTabsValue.value = 'xxxx';
  90. emnits('closed', false);
  91. }
  92. function qitxiangq() {
  93. daLigoShow.value = true;
  94. projectInfoNew(allDate.value.id);
  95. }
  96. async function projectInfoNew(p) {
  97. let { data } = await projectInfoNewById(p);
  98. bus.emit('getProjectDate', data);
  99. }
  100. function TabsChange({ props: { name } }) {
  101. projectInfoNew(allDate.value.id);
  102. switch (name) {
  103. case 'xxxx':
  104. componentId.value = XiangXiXinXi;
  105. break;
  106. case 'jsdb':
  107. componentId.value = jianseduibi;
  108. break;
  109. case 'xmsgt':
  110. componentId.value = xmsgt;
  111. break;
  112. }
  113. }
  114. const allImages = ref({});
  115. async function selectProjectImage(p) {
  116. let { data } = await selectProjectImageList(p);
  117. allImages.value = data[0];
  118. srcList.value = [data[0]?.postConstructionFileList[0]?.url];
  119. }
  120.  
  121. onMounted(() => {
  122. if (props?.allDateList) {
  123. allDate.value = props.allDateList;
  124. selectProjectImage({ projectNo: props.allDateList.projectNo });
  125. }
  126.  
  127. bus.on('mapClick', row => {
  128. allDate.value = row;
  129. setTimeout(() => {
  130. selectProjectImage({ projectNo: row.projectNo });
  131. if (!allDate.value.constructionPurpose) {
  132. daLigoShow.value = true;
  133. projectInfoNew(allDate.value.id);
  134. }
  135. }, 200);
  136. });
  137. });
  138. </script>
  139. <style lang="scss">
  140. .pmpSitNewDialogw{
  141. width: 550px;
  142. height: 330px;
  143. position: absolute;
  144. top: 10px;
  145. left: 485px;
  146. z-index: 100;
  147. background: linear-gradient(0deg, #005CBA 0%, #000F26 100%);
  148. opacity: 9;
  149. border-radius: 14px;
  150. .title {
  151. width: 100%;
  152. height: 40px;
  153. background: url('@/assets/images/Sponge_screen/qipaotankuan.png') no-repeat;
  154. background-size: 100% 100%;
  155. position: relative;
  156. display: flex;
  157. border-radius: 8px;
  158. align-items: center;
  159.  
  160. .icon_clas {
  161. position: absolute;
  162. right: 6px;
  163. top: 10px;
  164. }
  165.  
  166. .text {
  167. font-size: 16px;
  168. font-weight: bold;
  169. color: #fff;
  170. display: inline-block;
  171. margin-left: 10px;
  172. }
  173.  
  174. .image {
  175. text-align: center;
  176. }
  177. }
  178. .content {
  179. padding: 10px;
  180. display: flex;
  181. display: flex;
  182. div {
  183. flex: 1;
  184. }
  185. .left_content {
  186. // display: flex;
  187. // flex-direction: column;
  188. // height: 330px;
  189. > div {
  190. margin-bottom: 15px;
  191. &:last-of-type {
  192. margin-bottom: 0;
  193. }
  194. }
  195. }
  196.  
  197. .timage {
  198. background: linear-gradient(90deg, #005CBA 0%, rgba(0,92,186,0) 100%);
  199. height: 96px;
  200. color: #fff;
  201. font-size: 17px;
  202. font-weight: bold;
  203. padding: 0 10px;
  204. }
  205.  
  206. .qtxq {
  207. height: 36px;
  208. }
  209.  
  210. .text_x {
  211. font-family: Source Han Sans CN;
  212. font-weight: 400;
  213. font-size: 14px;
  214. color: #ffffff;
  215. overflow-y: scroll;
  216. height: 70px;
  217. cursor: pointer;
  218. }
  219. .image_e {
  220. text-align: center;
  221. }
  222. }
  223. }
  224. // ::-webkit-scrollbar {
  225. // width: 0;
  226. // // height: 10px;
  227. // }
  228. .slide-fade-enter-active {
  229. transition: all 0.3s ease-out;
  230. }
  231.  
  232. .slide-fade-leave-active {
  233. transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  234. }
  235.  
  236. .slide-fade-enter-from,
  237. .slide-fade-leave-to {
  238. transform: translateX(20px);
  239. opacity: 0;
  240. }
  241.  
  242. .img_age {
  243. width: 100%;
  244. height: 247px;
  245. }
  246.  
  247. </style>