feat: 开发区详情，要素成本展示

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     CommonHeader: typeof import('./src/components/common/CommonHeader.vue')['default']
+    DetailInfo: typeof import('./src/components/detail/DetailInfo.vue')['default']
     DetailInfoCell: typeof import('./src/components/detail/DetailInfoCell.vue')['default']
     DetailMain: typeof import('./src/components/detail/DetailMain.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']

src/components/detail/DetailInfo.vue

+<template>
+  <div v-if="infos.length > 0">
+    <div v-for="(line, index) of infos" :key="index" class="min-h-10 flex">
+      <div v-for="col in line" :key="col.name" class="flex flex-1 text-xs text-[#1A1A1A]">
+        <div class="flex w-[160px] items-center bg-[#FAFAFC] px-[30px] py-[10px] leading-5">
+          {{ col.name }}
+        </div>
+        <div
+          class="flex items-center px-[30px] py-[10px] leading-5 outline outline-1 outline-[#FAFAFC]"
+          :class="line.length > 1 || !col.oneline ? 'w-[303px]' : 'flex-1'"
+        >
+          {{ handleValue(col) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { haveValue } from '@/utils/filters.ts';
+
+export interface Info {
+  name: string;
+  value: string | number;
+  unit?: string;
+  /** 是否独占一行 */
+  oneline?: boolean;
+}
+export type Infos = Info[][] | [];
+withDefaults(
+  defineProps<{
+    infos: Infos;
+  }>(),
+  {
+    infos: () => [],
+  },
+);
+
+const handleValue = (col: Info) => {
+  const { value, unit = '' } = col;
+  return haveValue(value) ? value.toString() + unit : '';
+};
+</script>

src/components/detail/DetailInfoCell.vue

 <!-- 详情页下方信息块 -->
 <template>
-  <section class="bg-white p-4 shadow">
-    <h2 v-if="title">{{ title }}</h2>
+  <section class="bg-white">
+    <h2 v-if="title" class="flex h-8 items-center">
+      <div class="h-[18px] w-[3px] rounded-[30px] bg-[#C0322B]"></div>
+      <div class="ml-[13px] font-yahei text-xl font-bold leading-8 tracking-[2px] text-[#1A1A1A]">
+        {{ title }}
+      </div>
+    </h2>
     <div v-if="toListText" class="flex justify-end text-xs" @click="handleToList">更多</div>
-    <div>
+    <div class="mt-5">
       <slot></slot>
     </div>
   </section>

src/types/api/developZoneDetail.ts

+import type { AuthStatus } from '../enum';
+
 /**
  * 开发区详情
  */
 export interface DevelopZoneDetailResp {
+  /** 详细地址 */
+  address: string;
+  /** 亩均年产值（单位：万/亩） */
+  averageOutputValue: string;
+  /** 投资周期（月） */
+  buildingPeriod: number;
+  /** 市code */
+  cityCode: string;
+  /** 市 */
+  cityName: string;
+  /** 招商对接人 */
+  contactPerson: string;
+  /** 联系电话 */
+  contactPhone: string;
+  /** 开发区简介 */
+  description: string;
+  /** 重点企业详情 */
+  enterpriseList: string[];
+  /** 环评要求 */
+  environmentalEquirements: string;
+  /** 产业基金 */
+  fundList: {
+    /** 投资方向 */
+    investmentDirection: string;
+    /** 基金名称 */
+    name: string;
+    /** 基金规模（亿元） */
+    scale: string;
+  }[];
+  /** 供暖单价（元/m³） */
+  heatingPrice: string;
+  /** 主键id */
+  id: number;
+  /** 轮播图 */
+  imgUrlList: string[];
+  /** 工业用电（元/㎡/天） */
+  industrialElectricity: string;
+  /** 工业用水单价（元/吨） */
+  industrialWaterPrice: string;
+  /** 总投资额（亿元） */
+  investmentAmountTotal: number;
+  /** 招商方向 */
+  investmentDetails: {
+    /** 招商类型 */
+    code: number;
+    /** 招商类型名称 */
+    codeName: string;
+    /** 招商详情 */
+    details: string;
+  }[];
+  /** 亩均投资强度（单位：万/亩） */
+  investmentStrength: string;
+  /** 人力成本（元/月） */
+  laborCost: number;
+  /** 土地成本（万元/亩） */
+  landCost: number;
+  /** 土地分页信息 */
+  landPageList: {
+    /** 面积（亩） */
+    area: number;
+    /** */
+    cityCode: string;
+    /** */
+    cityName: string;
+    /** id */
+    id: number;
+    /** 首屏图片 */
+    imgUrl: string;
+    /** */
+    landType: number;
+    /** 地块名称 */
+    name: string;
+    /** 价格 */
+    price: number;
+    /** */
+    provinceCode: string;
+    /** */
+    provinceName: string;
+    /** */
+    regionCode: string;
+    /** */
+    regionName: string;
+    /** */
+    typeName: string;
+  }[];
+  /** 纬度（坐标系gcj02） */
+  latitude: number;
+  /** 开发区级别 */
+  levelCode: string;
+  /** 开发区级别名称 */
+  levelName: string;
+  /** 经度（坐标系gcj02） */
+  longitude: number;
+  /** 开发区名称 */
   name: string;
+  /** 天然气单价（元/m³） */
+  naturalGasPrice: string;
+  /** 开发区内产业园列表 */
+  parkPageList: {
+    /** 城市code */
+    cityCode: string;
+    /** 城市 */
+    cityName: string;
+    /** 占地面积（单位：亩） */
+    coverArea: number;
+    /** 主键id */
+    id: number;
+    /** 图片链接 */
+    imgUrl: string;
+    /** 招商方向 */
+    investmentDirection: [];
+    /** 园区级别 */
+    levelCode: string;
+    /** 园区级别名称 */
+    levelName: string;
+    /** 园区名称 */
+    name: string;
+    /** 省份code */
+    provinceCode: string;
+    /** 省份 */
+    provinceName: string;
+    /** 区/县code */
+    regionCode: string;
+    /** 区/县 */
+    regionName: string;
+    /** 认证状态（1-未认证；2-认证中；3-已认证；4-已拒绝） */
+    status: AuthStatus;
+    /** 认证状态名称（1-未认证；2-认证中；3-已认证；4-已拒绝） */
+    statusName: string;
+  }[];
+  /** 规划面积（平方公里） */
+  planArea: number;
+  /** 产业政策详情 */
+  policyList: string[];
+  /** 主导产业 */
+  primaryIndustry: string;
+  /** 禁限目录 */
+  prohibitedDirectory: string;
+  /** 省code */
+  provinceCode: string;
+  /** 省 */
+  provinceName: string;
+  /** 区/县code */
+  regionCode: string;
+  /** 区/县 */
+  regionName: string;
+  /** 污水处理价格（元/吨） */
+  sewageWaterPrice: number;
+  /** 污水处理类别 */
+  sewageWaterType: string;
+  /** 星级开发区附加信息 */
+  starObjectExtensionInfoMap: {
+    /** */
+    additionalProperties1: {
+      /** */
+      coverUrl: string;
+      /** */
+      title: string;
+      /** */
+      titleIntroduce: string;
+    };
+  };
+  /** 蒸汽价格（元/m³） */
+  steamPrice: string;
+  /** 变电站级别 */
+  substationLevel: string[];
+  /** 亩均税收（单位：万/亩） */
+  taxationStrength: string;
+  /** 开发区类型 */
+  type: string;
+  /** 能评要求（单位：tce/万元） */
+  valueAddedEnergy: string;
 }

src/views/develop/DevelopZoneDetail.vue

 <!-- 开发区详情 -->
 <template>
-  <div v-if="detail">
+  <div v-if="detail" class="main-width mx-auto py-5">
     <div>{{ detail.name }}</div>
     <div class="space-y-4">
       <DetailInfoCell>
         <DetailMain></DetailMain>
       </DetailInfoCell>
-      <DetailInfoCell title="开发区简介"></DetailInfoCell>
-      <DetailInfoCell title="产业情况"></DetailInfoCell>
-      <DetailInfoCell title="基本信息"></DetailInfoCell>
-      <DetailInfoCell title="要素成本"></DetailInfoCell>
+      <DetailInfoCell title="开发区简介">
+        <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
+          {{ detail.description }}
+        </div>
+      </DetailInfoCell>
+      <DetailInfoCell title="要素成本">
+        <DetailInfo :infos="requireds"></DetailInfo>
+      </DetailInfoCell>
       <DetailInfoCell title="入驻要求"></DetailInfoCell>
       <DetailInfoCell title="重点企业"></DetailInfoCell>
       <DetailInfoCell title="产业政策"></DetailInfoCell>
@@ -23,15 +27,93 @@
 
 <script lang="ts" setup>
 import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
+import DetailInfo, { type Infos } from '@/components/detail/DetailInfo.vue';
 import DetailMain from '@/components/detail/DetailMain.vue';
 import { useDetail } from '@/composable/useDetail.ts';
 import { RequestUrl } from '@/types/api.ts';
 import type { DevelopZoneDetailResp } from '@/types/api/developZoneDetail';
+import { computed } from 'vue';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { detail, detailId, initDetail } = useDetail<DevelopZoneDetailResp>(
   RequestUrl.developZoneDetail,
 );
 
+const requireds = computed(() => {
+  if (detail.value) {
+    const {
+      steamPrice,
+      naturalGasPrice,
+      laborCost,
+      landCost,
+      industrialElectricity,
+      industrialWaterPrice,
+      substationLevel,
+      sewageWaterPrice,
+      heatingPrice,
+    } = detail.value;
+    const result: Infos = [
+      [
+        {
+          name: '土地成本',
+          value: landCost,
+          unit: '万元/亩',
+        },
+        {
+          name: '人力成本',
+          value: laborCost,
+          unit: '元/月',
+        },
+      ],
+      [
+        {
+          name: '工业用电',
+          value: industrialElectricity,
+          unit: '元/㎡/天',
+        },
+        {
+          name: '变电站级别',
+          value: substationLevel?.join?.(','),
+        },
+      ],
+      [
+        {
+          name: '工业用水',
+          value: industrialWaterPrice,
+          unit: '元/吨',
+        },
+        {
+          name: '污水处理价格',
+          value: sewageWaterPrice,
+          unit: '元/吨',
+        },
+      ],
+      [
+        {
+          name: '天然气单价',
+          value: naturalGasPrice,
+          unit: '元/m³',
+        },
+        {
+          name: '蒸汽单价',
+          value: steamPrice,
+          unit: '元/m³',
+        },
+      ],
+      [
+        {
+          name: '供暧单价',
+          value: heatingPrice,
+          unit: '元/m³',
+        },
+      ],
+    ];
+
+    return result;
+  } else {
+    return [];
+  }
+});
+
 initDetail();
 </script>

src/views/industrial-park/IndustrialParkDetail.vue

 <!-- 产业园详情 -->
 <template>
-  <div v-if="detail">
+  <div v-if="detail" class="p-5">
     <div>{{ detail.name }}</div>
     <div class="space-y-4">
       <DetailInfoCell>
         <DetailMain></DetailMain>
       </DetailInfoCell>
-      <DetailInfoCell title="产业园简介"></DetailInfoCell>
-      <DetailInfoCell title="入驻要求"></DetailInfoCell>
+      <DetailInfoCell title="产业园简介">
+        <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
+          {{ detail.description }}
+        </div>
+      </DetailInfoCell>
+      <DetailInfoCell title="入驻要求">
+        <DetailInfo :infos="[]"></DetailInfo>
+      </DetailInfoCell>
       <DetailInfoCell title="要素成本"></DetailInfoCell>
       <DetailInfoCell title="产业支持"></DetailInfoCell>
       <DetailInfoCell title="产业政策"></DetailInfoCell>
@@ -20,6 +26,7 @@
 </template>
 
 <script lang="ts" setup>
+import DetailInfo from '@/components/detail/DetailInfo.vue';
 import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
 import DetailMain from '@/components/detail/DetailMain.vue';
 import { useDetail } from '@/composable/useDetail.ts';