feat: 我的园区，开发区详情

src/types/api/myParkDevelopDetail.ts

+import type { Enterprise, ListInfo } from '../common';
+
 /**
  * 我的园区-开发区详情
  */
@@ -21,7 +23,7 @@ export interface MyParkDevelopDetailResp {
   /** 开发区简介 */
   description: string;
   /** 重点企业详情 */
-  enterpriseList: string[];
+  enterprise: ListInfo<Enterprise>[];
   /** 环评要求 */
   environmentalEquirements: string;
   /** 产业基金 */

src/views/user/MyDevelopDetail.vue

 <!-- 我的园区-开发区详情 -->
 <template>
-  <div>develop</div>
+  <div v-if="detail" class="bg-[#F8F8F8]">
+    <div class="bg-white p-5">
+      <div class="flex items-center">
+        <div>
+          <img class="h-5 w-[14px]" src="@/assets/images/icon-arrow_left.png" />
+        </div>
+        <div class="ml-2 text-2xl font-medium text-[#1A1A1A]">{{ detail.name }}</div>
+      </div>
+      <div class="mt-6 flex items-center space-x-[30px] text-sm leading-[22px] text-[#4D4D4D]">
+        <div class="flex items-center">
+          <div>发布人：</div>
+          <div>XXX</div>
+        </div>
+        <div class="flex items-center">
+          <div>发布时间：</div>
+          <div>{{ detail.createTime }}</div>
+        </div>
+        <div class="flex items-center">
+          <div>更新时间：</div>
+          <div>{{ detail.updateTime }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="park-tabs mt-5">
+      <ElTabs v-model="currentTab" class="bg-white">
+        <ElTabPane label="开发区信息" :name="DetailType.industrial">
+          <div class="space-y-8 bg-white py-3">
+            <DetailInfoCell title="基本信息" :show-title-icon="false">
+              <DetailInfo :infos="handleInfos(baseInfo)"></DetailInfo>
+            </DetailInfoCell>
+            <DetailInfoCell
+              v-if="detail.imgUrlList?.length"
+              title="开发区图片"
+              :show-title-icon="false"
+            >
+              <div class="flex flex-wrap gap-4 px-[18px]">
+                <CommonImage
+                  v-for="img of detail.imgUrlList"
+                  :key="img"
+                  class="h-[124px] w-[124px]"
+                  :src="img"
+                ></CommonImage>
+              </div>
+            </DetailInfoCell>
+            <DetailInfoCell title="联系人" :show-title-icon="false">
+              <DetailInfo :infos="handleInfos(contactInfo)"></DetailInfo>
+            </DetailInfoCell>
+            <DetailInfoCell title="产业基础" :show-title-icon="false">
+              <DetailInfo :infos="handleInfos(industryBase)"></DetailInfo>
+            </DetailInfoCell>
+
+            <DetailInfoCell title="重点企业" :show-title-icon="false">
+              <DetailInfoTab v-model="importantEnterpriseIndex" :tabs="importantEnterpriseTabs">
+                <DetailInfo :infos="importantEnterprise[importantEnterpriseIndex]"></DetailInfo>
+              </DetailInfoTab>
+            </DetailInfoCell>
+            <DetailInfoCell title="入驻要求" :show-title-icon="false">
+              <DetailInfo :infos="handleInfos(joinRequired)"></DetailInfo>
+            </DetailInfoCell>
+            <DetailInfoCell title="要素成本" :show-title-icon="false">
+              <DetailInfo :infos="handleInfos(elementCost)"></DetailInfo>
+            </DetailInfoCell>
+            <DetailInfoCell title="其他要素" :show-title-icon="false">
+              <DetailInfo :infos="handleInfos(otherElement)"></DetailInfo>
+            </DetailInfoCell>
+            <DetailInfoCell title="产业支持" :show-title-icon="false">
+              <DetailInfo :infos="handleInfos(industrySupports)"></DetailInfo>
+            </DetailInfoCell>
+            <DetailInfoCell title="产业基金" :show-title-icon="false">
+              <DetailInfo :infos="handleInfos(industryFund)"></DetailInfo>
+            </DetailInfoCell>
+          </div>
+        </ElTabPane>
+        <ElTabPane label="土地信息" :name="DetailType.carrier">
+          <div class="bg-[#F8F8F8]">
+            <ElTable :data="carrierList">
+              <ElTableColumn prop="buildingNumber" label="楼号"></ElTableColumn>
+              <ElTableColumn prop="structure" label="建筑结构"></ElTableColumn>
+              <ElTableColumn prop="area" label="建筑面积"></ElTableColumn>
+              <ElTableColumn prop="floorNumber" label="层数"></ElTableColumn>
+              <ElTableColumn prop="floorHigh" label="层高"></ElTableColumn>
+              <ElTableColumn prop="singleArea" label="单层面积"></ElTableColumn>
+              <ElTableColumn prop="distance" label="柱距"></ElTableColumn>
+              <ElTableColumn prop="elevatorType" label="电梯类型"></ElTableColumn>
+              <ElTableColumn prop="fireProtectionLevel" label="消防等级"></ElTableColumn>
+              <ElTableColumn prop="fireResistant" label="耐火等级"></ElTableColumn>
+            </ElTable>
+
+            <ListPagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              class="mt-5"
+              :total="0"
+            ></ListPagination>
+          </div>
+        </ElTabPane>
+      </ElTabs>
+    </div>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { useDetail } from '@/composable/useDetail.ts';
+import { RequestUrl } from '@/types/api.ts';
+import CommonImage from '@/components/common/CommonImage.vue';
+import { DetailType } from '@/types/enum.ts';
+import { computed, ref } from 'vue';
+import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
+import type { Info, Infos } from '@/components/detail/DetailInfo.vue';
+import ListPagination from '@/components/list/ListPagination.vue';
+import type { MyParkDevelopDetailResp } from '@/types/api/myParkDevelopDetail';
+import { useInfoTab } from '@/composable/useInfoTab.ts';
+import DetailInfoTab from '@/components/detail/DetailInfoTab.vue';
+import type { Enterprise } from '@/types/common';
+
+const { detail, initDetail } = useDetail<MyParkDevelopDetailResp>(
+  RequestUrl.myParkIndustrialDetail,
+);
+
+const pageSize = ref(10);
+const currentPage = ref(1);
+
+const currentTab = ref(DetailType.industrial);
+
+/** 基本信息 */
+const baseInfo = computed(() => {
+  if (detail.value) {
+    const { type, levelName, address, planArea, description } = detail.value;
+    const result: Infos = [
+      [
+        {
+          name: '开发区类型',
+          value: type,
+        },
+        {
+          name: '所属地区',
+          // todo
+          value: '',
+        },
+      ],
+      [
+        {
+          name: '开发区级别',
+          value: levelName,
+        },
+        {
+          name: '详细地址',
+          value: address,
+        },
+      ],
+      [
+        {
+          name: '规划面积',
+          value: planArea,
+        },
+        {
+          name: '出租率',
+          // todo
+          value: '',
+        },
+      ],
+      [
+        {
+          name: '开发区简介',
+          value: description,
+          oneline: true,
+        },
+      ],
+    ];
+
+    return result;
+  } else {
+    return [];
+  }
+});
+
+/** 联系人 */
+const contactInfo = computed(() => {
+  if (detail.value) {
+    const { contactPerson, contactPhone, organization } = detail.value;
+    const result: Infos = [
+      [
+        {
+          name: '招商对接人',
+          value: contactPerson,
+        },
+        {
+          name: '联系方式',
+          value: contactPhone,
+        },
+      ],
+      [
+        {
+          name: '所属机构',
+          value: organization,
+        },
+      ],
+    ];
+
+    return result;
+  } else {
+    return [];
+  }
+});
+
+/** 产业基础 */
+const industryBase = computed(() => {
+  if (detail.value) {
+    const { investmentDetails, primaryIndustry } = detail.value;
+    const result: Infos = [
+      [
+        {
+          name: '主导产业',
+          value: primaryIndustry,
+          oneline: true,
+        },
+      ],
+      ...(investmentDetails?.map<Info[]>(({ details }) => [
+        {
+          name: '招商方向',
+          value: details,
+          oneline: true,
+        },
+      ]) || []),
+    ];
+
+    return result;
+  } else {
+    return [];
+  }
+});
+
+const joinRequired = computed(() => {
+  if (detail.value) {
+    const {
+      investmentAmountTotal,
+      investmentStrength,
+      taxationStrength,
+      averageOutputValue,
+      buildingPeriod,
+      valueAddedEnergy,
+      environmentalEquirements,
+      prohibitedDirectory,
+      prohibitedDirectoryUrlList,
+    } = detail.value;
+    const result: Infos = [
+      [
+        {
+          name: '总投资额',
+          value: investmentAmountTotal,
+          unit: '亿元',
+        },
+        {
+          name: '亩均投资额',
+          value: investmentStrength,
+          unit: '万/亩',
+        },
+      ],
+      [
+        {
+          name: '亩均税收',
+          value: taxationStrength,
+          unit: '万/亩',
+        },
+        {
+          name: '亩均年产值',
+          value: averageOutputValue,
+          unit: '万/亩',
+        },
+      ],
+      [
+        {
+          name: '建设周期',
+          value: buildingPeriod,
+          unit: '月',
+        },
+        {
+          name: '能评要求',
+          value: valueAddedEnergy,
+          unit: 'tce/万元',
+        },
+      ],
+      [
+        {
+          name: '环评要求',
+          value: environmentalEquirements,
+        },
+        {
+          name: '其他入驻要求',
+          // todo
+          value: '',
+        },
+      ],
+      [
+        {
+          name: '禁限目录',
+          value: prohibitedDirectory,
+        },
+      ],
+      ...(prohibitedDirectoryUrlList
+        ? prohibitedDirectoryUrlList.map((i) => {
+            return [
+              {
+                name: '禁限目录附件',
+                value: i,
+              },
+            ];
+          })
+        : []),
+    ];
+
+    return result;
+  } else {
+    return [];
+  }
+});
+
+/** 要素成本 */
+const elementCost = computed(() => {
+  if (detail.value) {
+    const {
+      landCost,
+      laborCost,
+      substationLevel,
+      sewageWaterPrice,
+      sewageWaterType,
+      industrialWaterPrice,
+      industrialElectricity,
+    } = detail.value;
+    const result: Infos = [
+      [
+        {
+          name: '土地成本',
+          value: landCost,
+          unit: '万元/亩',
+        },
+        {
+          name: '人力成本',
+          value: laborCost,
+          unit: '元/月',
+        },
+      ],
+      [
+        {
+          name: '工业用电',
+          value: industrialElectricity,
+          unit: '元/度',
+        },
+      ],
+      [
+        {
+          name: '变电站级别',
+          value: substationLevel?.join(',') || '',
+        },
+        {
+          name: '供电类型',
+          // todo
+          value: '',
+        },
+      ],
+      [
+        {
+          name: '污水处理级别',
+          value: sewageWaterType,
+        },
+        {
+          name: '工业用水单价',
+          value: industrialWaterPrice,
+          unit: '元/吨',
+        },
+      ],
+      [
+        {
+          name: '污水处理价格',
+          value: sewageWaterPrice,
+          unit: '元/吨',
+        },
+      ],
+    ];
+
+    return result;
+  } else {
+    return [];
+  }
+});
+
+/** 其他要素 */
+const otherElement = computed(() => {
+  if (detail.value) {
+    const { naturalGasPrice, heatingPrice, steamPrice } = detail.value;
+    const result: Infos = [
+      [
+        {
+          name: '非居民供暧单价',
+          value: heatingPrice,
+          unit: '元/m³',
+        },
+        {
+          name: '蒸汽单价',
+          value: steamPrice,
+          unit: '元/m³',
+        },
+      ],
+      [
+        {
+          name: '天然气单价',
+          value: naturalGasPrice,
+          unit: '元/m³',
+        },
+      ],
+    ];
+
+    return result;
+  } else {
+    return [];
+  }
+});
+
+/** 产业支持 */
+const industrySupports = computed(() => {
+  if (detail.value) {
+    return [];
+  } else {
+    return [];
+  }
+});
+
+/** 产业基金 */
+const industryFund = computed(() => {
+  if (detail.value) {
+    const result: Infos =
+      detail.value.fundList
+        ?.map(({ investmentDirection, name, scale }) => {
+          return [
+            [
+              {
+                name: '基金名称',
+                value: name,
+              },
+              {
+                name: '基金规模',
+                value: scale,
+              },
+            ],
+            [
+              {
+                name: '投资方向',
+                value: investmentDirection,
+                oneline: true,
+              },
+            ],
+          ];
+        })
+        .flat() || [];
+
+    return result;
+  } else {
+    return [];
+  }
+});
+
+/** 重点企业 */
+const [importantEnterpriseIndex, importantEnterpriseTabs, importantEnterprise] =
+  useInfoTab<Enterprise>(
+    ({ enterpriseName, track }) => {
+      return [
+        {
+          name: '企业名称',
+          value: enterpriseName,
+        },
+        {
+          name: '所属赛道',
+          value: track,
+        },
+      ];
+    },
+    computed(() => detail.value?.enterprise || []),
+  );
+
+const carrierList = computed(() => {
+  // const startIndex = (currentPage.value - 1) * pageSize.value;
+  // return detail.value?.carrierInfoList.slice(startIndex, startIndex + pageSize.value) || [];
+  return [];
+});
+
+const handleInfos = (infos: Infos) => {
+  return infos.map((list) => {
+    return list.map((i) => {
+      return {
+        ...i,
+        smallMode: true,
+      };
+    });
+  });
+};
+
+initDetail();
+</script>

src/views/user/MyIndustrialDetail.vue

@@ -30,7 +30,21 @@
             <DetailInfoCell title="基本信息" :show-title-icon="false">
               <DetailInfo :infos="handleInfos(baseInfo)"></DetailInfo>
             </DetailInfoCell>
-            <DetailInfoCell title="联系方式" :show-title-icon="false">
+            <DetailInfoCell
+              v-if="detail.imgUrlList?.length"
+              title="产业园图片"
+              :show-title-icon="false"
+            >
+              <div class="flex flex-wrap gap-4 px-[18px]">
+                <CommonImage
+                  v-for="img of detail.imgUrlList"
+                  :key="img"
+                  class="h-[124px] w-[124px]"
+                  :src="img"
+                ></CommonImage>
+              </div>
+            </DetailInfoCell>
+            <DetailInfoCell title="联系人" :show-title-icon="false">
               <DetailInfo :infos="handleInfos(contactInfo)"></DetailInfo>
             </DetailInfoCell>
             <DetailInfoCell title="产业基础" :show-title-icon="false">
@@ -93,6 +107,7 @@
 import { useDetail } from '@/composable/useDetail.ts';
 import { RequestUrl } from '@/types/api.ts';
 import type { MyParkIndustrialDetailResp } from '@/types/api/myParkIndustrialDetail.ts';
+import CommonImage from '@/components/common/CommonImage.vue';
 import { DetailType } from '@/types/enum.ts';
 import { computed, ref } from 'vue';
 import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';