Skip to content

liyeyun
liyeyun
Commit b0989dac authored by 王玉鑫's avatar 王玉鑫
Browse files
Options

feat: 产业园详情信息

parent 11a4d316
Hide whitespace changes
Inline Side-by-side
Showing with 296 additions and 91 deletions
src/composable/useJoinRequired.ts 0 → 100644
View file @ b0989dac
import type { Infos } from '@/components/detail/DetailInfo.vue';
import type { DevelopZoneDetailResp } from '@/types/api/developZoneDetail';
import type { IndustrialParkDetailResp } from '@/types/api/industrialParkDetail';
import { computed, type Ref } from 'vue';
type Detail = (IndustrialParkDetailResp | DevelopZoneDetailResp) & {
// 开发区产业园名称不一样
prohibitedDirectory?: string;
prohibitDirectory?: string;
};
/**
* 详情页入驻要求, 开发区、产业园
*/
export function useJoinRequired<T extends Detail>(detail: Ref<T | null>) {
/** 入驻要求 */
const joinRequired = computed(() => {
if (detail.value) {
const {
investmentAmountTotal,
investmentStrength,
taxationStrength,
valueAddedEnergy,
averageOutputValue,
buildingPeriod,
prohibitedDirectory,
prohibitDirectory,
environmentalEquirements,
} = detail.value;
const result: Infos = [
[
{
name: '总投资额',
value: investmentAmountTotal,
unit: '亿元',
},
{
name: '亩均年产值',
value: averageOutputValue,
unit: '万/亩',
},
],
[
{
name: '亩均投资强度',
value: investmentStrength,
unit: '万/亩',
},
{
name: '亩均税收',
value: taxationStrength,
unit: '万/亩',
},
],
[
{
name: '建设周期',
value: buildingPeriod,
unit: '月',
},
{
name: '能评要求',
value: valueAddedEnergy,
unit: 'tce/万元',
},
],
[
{
name: '环评要求',
value: environmentalEquirements,
oneline: true,
},
],
[
{
name: '禁限目录',
value: prohibitedDirectory || prohibitDirectory || '',
oneline: true,
},
],
];
return result;
} else {
return [];
}
});
return { joinRequired };
}
src/types/api/industrialParkDetail.ts
View file @ b0989dac
import type { ListInfo, Policy } from '../common';
/**
* 产业园详情
*/
......@@ -31,7 +33,14 @@ export interface IndustrialParkDetailResp {
/** 总投资额（亿元） */
investmentAmountTotal: number;
/** 招商方向 */
investmentDetails: string;
investmentDetails: {
/** 招商类型 */
code: string;
/** 招商类型名称 */
codeName: string;
/** 招商详情 */
details: string;
}[];
/** 投资强度（单位：万/亩） */
investmentStrength: string;
/** 园区级别 */
......@@ -58,13 +67,7 @@ export interface IndustrialParkDetailResp {
type: string;
}[];
/** 产业政策 */
parkPolicy: {
type: string;
info: {
content: string;
type: string;
}[];
}[];
parkPolicy: ListInfo<Policy>[];
/** 主导产业 */
primaryIndustry: string;
/** 禁限目录 */
......
src/views/develop/DevelopZoneDetail.vue
View file @ b0989dac
......@@ -24,7 +24,7 @@
<DetailInfo :infos="industryPolicy[industryPolicyIndex]"></DetailInfo>
</DetailInfoTab>
</DetailInfoCell>
<DetailInfoCell title="产业基金">
<DetailInfoCell v-if="industryFund.length" title="产业基金">
<DetailInfo :infos="industryFund"></DetailInfo>
</DetailInfoCell>
<DetailInfoCell title="入驻要求">
......@@ -48,8 +48,10 @@ import { computed } from 'vue';
import DetailInfoTab from '@/components/detail/DetailInfoTab.vue';
import { useInfoTab } from '@/composable/useInfoTab.ts';
import type { Enterprise, Policy } from '@/types/common';
import { useJoinRequired } from '@/composable/useJoinRequired.ts';
const { detail, initDetail } = useDetail<DevelopZoneDetailResp>(RequestUrl.developZoneDetail);
const { joinRequired } = useJoinRequired<DevelopZoneDetailResp>(detail);
/** 重点企业 */
const [importantEnterpriseIndex, importantEnterpriseTabs, importantEnterprise] =
......@@ -196,77 +198,5 @@ const industryFund = computed(() => {
}
});
/** 入驻要求 */
const joinRequired = computed(() => {
if (detail.value) {
const {
investmentAmountTotal,
investmentStrength,
taxationStrength,
valueAddedEnergy,
averageOutputValue,
buildingPeriod,
prohibitedDirectory,
environmentalEquirements,
} = detail.value;
const result: Infos = [
[
{
name: '总投资额',
value: investmentAmountTotal,
unit: '亿元',
},
{
name: '亩均年产值',
value: averageOutputValue,
unit: '万/亩',
},
],
[
{
name: '亩均投资强度',
value: investmentStrength,
unit: '万/亩',
},
{
name: '亩均税收',
value: taxationStrength,
unit: '万/亩',
},
],
[
{
name: '建设周期',
value: buildingPeriod,
unit: '月',
},
{
name: '能评要求',
value: valueAddedEnergy,
unit: 'tce/万元',
},
],
[
{
name: '环评要求',
value: environmentalEquirements,
oneline: true,
},
],
[
{
name: '禁限目录',
value: prohibitedDirectory,
oneline: true,
},
],
];
return result;
} else {
return [];
}
});
initDetail();
</script>
src/views/industrial-park/IndustrialParkDetail.vue
View file @ b0989dac
<!-- 产业园详情 -->
<template>
<div v-if="detail" class="p-5">
<div v-if="detail" class="main-width mx-auto py-5">
<div>{{ detail.name }}</div>
<div class="space-y-4">
<DetailInfoCell>
......@@ -11,32 +11,214 @@
{{ detail.description }}
</div>
</DetailInfoCell>
<DetailInfoCell title="产业基础">
<DetailInfo :infos="industryBase"></DetailInfo>
</DetailInfoCell>
<DetailInfoCell title="入驻要求">
<DetailInfo :infos="[]"></DetailInfo>
</DetailInfoCell>
<DetailInfoCell title="要素成本"></DetailInfoCell>
<DetailInfoCell title="产业支持"></DetailInfoCell>
<DetailInfoCell title="产业政策"></DetailInfoCell>
<DetailInfoCell title="代表企业"></DetailInfoCell>
<DetailInfoCell title="园内配套信息"></DetailInfoCell>
<DetailInfoCell title="周边配套"></DetailInfoCell>
<DetailInfo :infos="joinRequired"></DetailInfo>
</DetailInfoCell>
<DetailInfoCell title="要素成本">
<DetailInfo :infos="elementCost"></DetailInfo>
</DetailInfoCell>
<DetailInfoCell v-if="industrySupports.length" title="产业支持">
<div class="flex flex-wrap gap-x-2">
<div
v-for="item of industrySupports"
:key="item"
class="flex h-8 items-center px-5 font-yahei text-sm leading-[22px] text-[#4D4D4D]"
>
{{ item }}
</div>
</div>
</DetailInfoCell>
<DetailInfoCell title="产业政策">
<DetailInfoTab v-model="industryPolicyIndex" :tabs="industryPolicyTabs">
<DetailInfo :infos="industryPolicy[industryPolicyIndex]"></DetailInfo>
</DetailInfoTab>
</DetailInfoCell>
<DetailInfoCell v-if="enterprises.length" title="代表企业">
<div class="flex flex-wrap gap-x-2">
<div
v-for="item of enterprises"
:key="item"
class="flex h-8 items-center px-5 font-yahei text-sm leading-[22px] text-[#4D4D4D]"
>
{{ item }}
</div>
</div>
</DetailInfoCell>
<DetailInfoCell v-if="detail.setUp.length" title="园内配套信息">
<div class="flex flex-wrap gap-x-5">
<div
v-for="item of detail.setUp || []"
:key="item"
class="flex h-[30px] items-center rounded-sm px-[14px] font-yahei text-sm leading-[22px] text-[#4D4D4D] outline outline-1 outline-[#E6E6E6]"
>
{{ item }}
</div>
</div>
</DetailInfoCell>
<DetailInfoCell title="配套设施"></DetailInfoCell>
<DetailInfoCell title="产业园内载体" to-list-text="更多产业园区"></DetailInfoCell>
</div>
</div>
</template>
<script lang="ts" setup>
import DetailInfo from '@/components/detail/DetailInfo.vue';
import DetailInfo, { type Info, type Infos } 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';
import { useInfoTab } from '@/composable/useInfoTab.ts';
import { useJoinRequired } from '@/composable/useJoinRequired.ts';
import { RequestUrl } from '@/types/api.ts';
import type { IndustrialParkDetailResp } from '@/types/api/industrialParkDetail';
import type { Policy } from '@/types/common';
import { computed } from 'vue';
import DetailInfoTab from '@/components/detail/DetailInfoTab.vue';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { detail, detailId, initDetail } = useDetail<IndustrialParkDetailResp>(
RequestUrl.industrialParkDetal,
);
const { joinRequired } = useJoinRequired<IndustrialParkDetailResp>(detail);
/** 产业政策 */
const [industryPolicyIndex, industryPolicyTabs, industryPolicy] = useInfoTab<Policy>(
({ name, content }) => {
return [
{
name: '政策名称',
value: name,
},
{
name: '政策内容',
value: content,
},
];
},
computed(() => detail.value?.parkPolicy || []),
);
/** 产业基础 */
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 elementCost = computed(() => {
if (detail.value) {
const {
rentPrice,
salePrice,
propertyPrice,
substationLevel,
electricityPrice,
industrialWater,
gas,
lifeSewagePrice,
nresidentsHeating,
steam,
} = detail.value;
const result: Infos = [
[
{
name: '出租单价',
value: rentPrice,
unit: '元/㎡/月',
},
{
name: '出售单价',
value: salePrice,
unit: '元/㎡/月',
},
],
[
{
name: '物业费单价',
value: propertyPrice,
unit: '元/㎡/天',
},
{
name: '工业用电',
value: electricityPrice,
unit: '元/度',
},
],
[
{
name: '工业用水',
value: industrialWater,
unit: '元/吨',
},
{
name: '变电站级别',
value: substationLevel,
},
],
[
{
name: '污水处理价格',
value: lifeSewagePrice,
unit: '元/吨',
},
{
name: '天然气单价',
value: gas,
unit: '元/m³',
},
],
[
{
name: '蒸汽单价',
value: steam,
unit: '元/m³',
},
{
name: '供暧单价',
value: nresidentsHeating,
unit: '元/m³',
},
],
];
return result;
} else {
return [];
}
});
/** 产业支持 */
const industrySupports = computed(() => {
return detail.value?.resources || [];
});
/** 代表企业 */
const enterprises = computed(() => {
return detail.value?.enterprise.split(',') || [];
});
initDetail();
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment