- <template>
- <Transition name="slide-fade">
- <!-- <div class="pmpSitNewDialogw" v-if="allDate.constructionPurpose"> -->
- <div class="pmpSitNewDialogw">
- <div class="title">
- <span class="text">{{ allDate.projectName }}</span>
- <el-icon class="icon_clas" size="22" @click="dclosed">
- <Close />
- </el-icon>
- </div>
- <div class="content">
- <div class="left_content">
- <div>
- <div class="timage">
- 建设目的
- <div class="text_x" :title="allDate.constructionPurpose">{{ allDate.constructionPurpose }}</div>
- </div>
- </div>
- <div>
- <div class="timage">
- 建设完成情况
- <div class="text_x" :title="allDate.constructionAchievements">{{ allDate.constructionAchievements }}</div>
- </div>
- </div>
- <div>
- <el-button @click="qitxiangq" class="timage qtxq">其他详情 </el-button>
- </div>
- </div>
- <div class="right_content">
- <el-image
- class="img_age"
- v-if="allImages?.postConstructionFileList?.length > 0"
- :zoom-rate="1.2"
- :max-scale="7"
- :preview-src-list="srcList"
- :min-scale="0.2"
- :src="allImages?.postConstructionFileList[0]?.url"
- alt=""
- :title="allDate.projectOverview"
- />
-
- <el-empty :image-size="30" v-else />
- <div class="text_x image_e" style="height: auto">现场照片</div>
- </div>
- </div>
- </div>
- </Transition>
- <el-dialog class="pmpSitNewDialog" v-model="daLigoShow" :title="allDate.projectName" :align-center="true" width="47.6%" draggable>
- <el-tabs v-model="editableTabsValue" :stretch="true" @tab-click="TabsChange">
- <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name"> </el-tab-pane>
- <keep-alive>
- <component :is="componentId"></component>
- </keep-alive>
- </el-tabs>
- </el-dialog>
- </template>
- <script setup name="gongChengPingJia">
- import { ref, reactive, toRefs, onMounted } from 'vue';
-
- import xianchangtup from '@/assets/images/Sponge_screen/xianchangtup.png';
- import XiangXiXinXi from './XiangXiXinXi.vue';
- import jianseduibi from './jianseduibi.vue';
- import xmsgt from './xmsgt.vue';
- import bus from '@/bus';
- import { projectInfoNewById } from '@/api/project/projectInformationNew';
- import { selectProjectImageList } from '@/api/sponeScreen/gcpjApi';
-
- const emnits = defineEmits();
- const allDate = ref({});
- const daLigoShow = ref(false);
- const editableTabsValue = ref('xxxx');
- const componentId = ref(XiangXiXinXi);
- const srcList = ref([]);
- const editableTabs = ref([
- { name: 'xxxx', title: '详细信息' },
- { name: 'jsdb', title: '项目成果展示' },
- { name: 'xmsgt', title: '项目施工图' },
- ]);
- const props = defineProps({
- fullScreen: {
- type: Boolean,
- default: false,
- },
- allDateList: {
- type: Object,
- },
- });
- function dclosed() {
- editableTabsValue.value = 'xxxx';
- emnits('closed', false);
- }
- function qitxiangq() {
- daLigoShow.value = true;
- projectInfoNew(allDate.value.id);
- }
- async function projectInfoNew(p) {
- let { data } = await projectInfoNewById(p);
- bus.emit('getProjectDate', data);
- }
- function TabsChange({ props: { name } }) {
- projectInfoNew(allDate.value.id);
- switch (name) {
- case 'xxxx':
- componentId.value = XiangXiXinXi;
- break;
- case 'jsdb':
- componentId.value = jianseduibi;
- break;
- case 'xmsgt':
- componentId.value = xmsgt;
- break;
- }
- }
- const allImages = ref({});
- async function selectProjectImage(p) {
- let { data } = await selectProjectImageList(p);
- allImages.value = data[0];
- srcList.value = [data[0]?.postConstructionFileList[0]?.url];
- }
-
- onMounted(() => {
- if (props?.allDateList) {
- allDate.value = props.allDateList;
- selectProjectImage({ projectNo: props.allDateList.projectNo });
- }
-
- bus.on('mapClick', row => {
- allDate.value = row;
- setTimeout(() => {
- selectProjectImage({ projectNo: row.projectNo });
- if (!allDate.value.constructionPurpose) {
- daLigoShow.value = true;
- projectInfoNew(allDate.value.id);
- }
- }, 200);
- });
- });
- </script>
- <style lang="scss">
- .pmpSitNewDialogw{
- width: 550px;
- height: 330px;
- position: absolute;
- top: 10px;
- left: 485px;
- z-index: 100;
- background: linear-gradient(0deg, #005CBA 0%, #000F26 100%);
- opacity: 9;
- border-radius: 14px;
- .title {
- width: 100%;
- height: 40px;
- background: url('@/assets/images/Sponge_screen/qipaotankuan.png') no-repeat;
- background-size: 100% 100%;
- position: relative;
- display: flex;
- border-radius: 8px;
- align-items: center;
-
- .icon_clas {
- position: absolute;
- right: 6px;
- top: 10px;
- }
-
- .text {
- font-size: 16px;
- font-weight: bold;
- color: #fff;
- display: inline-block;
- margin-left: 10px;
- }
-
- .image {
- text-align: center;
- }
- }
- .content {
- padding: 10px;
- display: flex;
- display: flex;
- div {
- flex: 1;
- }
- .left_content {
- // display: flex;
- // flex-direction: column;
- // height: 330px;
- > div {
- margin-bottom: 15px;
- &:last-of-type {
- margin-bottom: 0;
- }
- }
- }
-
- .timage {
- background: linear-gradient(90deg, #005CBA 0%, rgba(0,92,186,0) 100%);
- height: 96px;
- color: #fff;
- font-size: 17px;
- font-weight: bold;
- padding: 0 10px;
- }
-
- .qtxq {
- height: 36px;
- }
-
- .text_x {
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- overflow-y: scroll;
- height: 70px;
- cursor: pointer;
- }
- .image_e {
- text-align: center;
- }
- }
- }
- // ::-webkit-scrollbar {
- // width: 0;
- // // height: 10px;
- // }
- .slide-fade-enter-active {
- transition: all 0.3s ease-out;
- }
-
- .slide-fade-leave-active {
- transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
- }
-
- .slide-fade-enter-from,
- .slide-fade-leave-to {
- transform: translateX(20px);
- opacity: 0;
- }
-
- .img_age {
- width: 100%;
- height: 247px;
- }
-
- </style>