- <template>
- <!-- 详细信息 -->
- <div class="XiangXiXinXi">
- <div class="xiangxinfo">
- <div v-for="i in xmxxList" :key="i.props" class="label_xnmx">
- <div class="title_class">
- <div class="top">{{ i.label }}</div>
- <div class="content">
- <span v-if="i.props == 'constructUnit' || i.props == 'designUnit'">
- {{ projectCompanyList.find(item => item.id === projectData[i.props])?.unitName || '' }}
- </span>
- <span v-else-if="i.props == 'projectTypeId'">
- {{ projectTypes.find(it => it.id === projectData.projectTypeId)?.projectTypeName || '' }}
- </span>
- <span v-else-if="i.props == 'buildCategory'">
- {{ findText('build_category', projectData.buildCategory) }}
- </span>
- <span v-else :title="projectData[i.props]">
- {{ projectData[i.props] }}
- </span>
- </div>
- </div>
- </div>
- </div>
-
- <div class="projectMb xiangxinfo">
- <span class="title">项目设计方案</span>
- </div>
- <div class="xiangxinfo xmzb">
- <div v-for="i in projectData.sysFilehmzp" class="filePreview">
- <div @click="previewPdf(i.url)">{{ i.originalName }}</div>
- </div>
- </div>
-
- <div class="projectMb xiangxinfo">
- <span class="title">项目设计参数</span>
- </div>
- <div class="xiangxinfo xmzb">
- <div v-for="i in xmmbList" :key="i.id" class="label_xnmx">
- <div class="title_class">
- <div class="top">{{ i.propertyName }}</div>
- <div class="content">
- <span :title="i.propertyValue">
- {{ i.propertyValue }}
- </span>
- </div>
- </div>
- </div>
- </div>
-
- <div class="projectMb">
- <span class="title">项目总体工程量</span>
- </div>
- <div class="xiangxinfo xmzb">
- <div v-for="i in xmxtgcl" :key="i.id" class="label_xnmx">
- <div class="title_class">
- <div class="top">{{ i.propertyName }}</div>
- <div class="content">
- <span :title="i.propertyValue">
- {{ i.propertyValue }}
- </span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup name="XiangXiXinXi">
- import { inject } from 'vue';
- import { getProjectCompanyList, projectTypeList } from '@/api/sponeScreen/gcpjApi';
-
- import { useDicts } from '@/hooks';
- import bus from '@/bus';
- const { proxy } = getCurrentInstance();
- const { project_content_type, build_category } = useDicts(proxy);
- const projectCompanyList = ref([]);
- const projectTypes = ref([]);
- const xmxxList = ref([
- { label: '项目名称', props: 'projectName' },
- { label: '立项时间', props: 'startTime' },
- { label: '建设类别', props: 'buildCategory' },
- { label: '工程类型', props: 'projectTypeId' },
- { label: '施工单位', props: 'constructUnit' },
- // { label: '代建单位', props: 'designUnit' },
- { label: '设计单位', props: 'designUnit' },
- // { label: '建设面积(㎡)', props: 'projectArea' },
- ]);
- const xmxtgcl = ref([]);
- const xmxtUrl = ref([]);
- const xmmbList = ref([]);
- const dicts = {
- build_category,
- project_content_type,
- };
- const findText = (prop, type) => {
- const item = dicts[prop].value.find(it => it.value === type);
- return item?.label || '';
- };
- const projectData = ref({});
- const getProjectCompanyLists = async () => {
- const res = await getProjectCompanyList();
- if (res?.code !== 200) return;
- projectCompanyList.value = res?.data || [];
- };
- const getProjectTypeList = async () => {
- const res = await projectTypeList({ status: '0' });
- if (res?.code !== 200) return;
- projectTypes.value = res?.data || [];
- };
-
- // 文件预览
- function previewPdf(url) {
- window.open(url);
- }
-
- onMounted(() => {
- bus.on('getProjectData', v => {
- projectData.value = v;
- xmmbList.value = v.projectItemDescriptionList.filter(it => it.projectContentType === 'design_parameter');
- xmxtgcl.value = v.projectItemDescriptionList.filter(it => it.projectContentType === 'total_engineering_quantity');
- getProjectCompanyLists();
- getProjectTypeList();
- });
- });
- onBeforeUnmount(() => {
- bus.off('getProjectData');
- });
- </script>
-
- <style lang="scss" scoped>
- .XiangXiXinXi {
- display: flex;
- flex-direction: column;
- overflow: auto;
- overflow-x: hidden;
- height: 100%;
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 15px;
- color: #8be5ff;
-
- .xiangxinfo {
- display: flex;
- flex-wrap: wrap;
- font-size: 12px;
- // justify-content: center;
- .hmzp {
- cursor: pointer;
- font-size: 15px;
- }
- .label_xnmx {
- width: 32.3%;
- height: 60px;
- margin: 10px 5px;
- border: 1px solid #17b4e7;
-
- .title_class {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- .top,
- .title_class {
- height: 30px;
- width: 100%;
- background: rgba(23, 180, 231, 0.5);
- line-height: 30px;
- text-align: center;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- }
-
- .content {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- width: 100%;
- margin: 3px;
- text-align: center;
- }
- }
- }
- }
-
- .projectMb {
- margin: 10px 0px;
- width: 100%;
- height: 36px;
- line-height: 36px;
- text-indent: 24px;
- background: rgba(23, 180, 231, 0.5);
- }
- }
-
- .title {
- font-size: 16px;
- font-weight: 700;
- color: #fff;
- }
-
- .xmzb {
- .label_xnmx {
- flex: 1 !important;
- }
- .filePreview {
- font-size: 15px;
- div {
- margin-right: 15px;
- }
- }
- }
- </style>