Skip to content

E
east-nanjing-new
Commit bd773424 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

接入左右两个板块的数据接口

parent e03e192f
Show whitespace changes
Inline Side-by-side
Showing with 288 additions and 92 deletions
src/ajax/api.ts
View file @ bd773424
...@@ -140,4 +140,8 @@ export default { ...@@ -140,4 +140,8 @@ export default {
GET_DISCOVER_STATISTICS: GET_DISCOVER_STATISTICS:
'/service-special-nandong/public/discover/category/count', // 发现数据 '/service-special-nandong/public/discover/category/count', // 发现数据
GET_DISCOVER_COUNT: '/service-special-nandong/public/discover/count', // 今日及历史发现数 GET_DISCOVER_COUNT: '/service-special-nandong/public/discover/count', // 今日及历史发现数
/** 来福士 */
GET_RAFFLES: '/service-special-nandong/public/lfss', // 来福士列表
GET_RAFFLES_RENT: '/service-special-nandong/public/lfsRents', // 来福士租金
} }
src/view/raffles/index.vue
View file @ bd773424
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
<!-- TODO 添加地图 --> <!-- TODO 添加地图 -->
<Title area="title"> 南东城运 </Title> <Title area="title"> 南东城运 </Title>
<m-animate enter="fadeInLeft" leave="fadeOutLeft"> <m-animate enter="fadeInLeft" leave="fadeOutLeft">
<LeftSection area="left" /> <LeftSection :info="rafflesDetail" area="left" />
</m-animate> </m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight"> <m-animate enter="fadeInRight" leave="fadeOutRight">
<RightSection area="right" /> <RightSection :info="rafflesDetail" area="right" />
</m-animate> </m-animate>
</m-grid> </m-grid>
</template> </template>
...@@ -20,6 +20,17 @@ ...@@ -20,6 +20,17 @@
import Title from './title.vue' import Title from './title.vue'
import LeftSection from './left.vue' import LeftSection from './left.vue'
import RightSection from './right.vue' import RightSection from './right.vue'
import { ajax, api } from '@/ajax'
import { ref } from 'vue'
const rafflesDetail = ref<any>({})
ajax
.get({
url: api.GET_RAFFLES,
})
.then((res) => {
rafflesDetail.value = res?.data?.content?.[0] || {}
})
</script> </script>
<style lang="stylus" scoped></style> <style lang="stylus" scoped></style>
src/view/raffles/left.vue
View file @ bd773424
...@@ -15,46 +15,85 @@ ...@@ -15,46 +15,85 @@
</div> </div>
</m-card> </m-card>
<m-card title="设计稿图片" mode="2"> <m-card title="设计稿图片" mode="2">
<div class="photos"> <div v-if="photos[0].length > 0" class="photos">
<img v-for="(_, i) in new Array(6).fill(1)" :key="i" :src="mock1" /> <img v-for="src in photos[0].slice(0, 6)" :key="src" :src="src" />
</div> </div>
<m-empty v-else />
</m-card> </m-card>
<m-card title="原始图片" mode="2"> <m-card title="原始图片" mode="2">
<div class="photos"> <div v-if="photos[1].length > 0" class="photos">
<img v-for="(_, i) in new Array(6).fill(1)" :key="i" :src="mock2" /> <img v-for="src in photos[1].slice(0, 6)" :key="src" :src="src" />
</div> </div>
<m-empty v-else />
</m-card> </m-card>
<m-card title="现状图片" mode="2"> <m-card title="现状图片" mode="2">
<div class="photos"> <div v-if="photos[2].length > 0" class="photos">
<img v-for="(_, i) in new Array(6).fill(1)" :key="i" :src="mock3" /> <img v-for="src in photos[2].slice(0, 6)" :key="src" :src="src" />
</div> </div>
<m-empty v-else />
</m-card> </m-card>
<m-card title="修缮历史" mode="2"> <m-card title="修缮历史" mode="2">
修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史 <template v-if="photos[3]">
{{ photos[3] }}
</template>
<m-empty v-else />
</m-card> </m-card>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import mock1 from '@/assets/images/mock1.png' import { computed, defineProps } from 'vue'
import mock2 from '@/assets/images/mock2.png' import type { PropType } from 'vue'
import mock3 from '@/assets/images/mock3.png'
const basicInfo = [ const props = defineProps({
{ label: '现名称', value: '来福士商业大楼' }, info: {
{ label: '原名称', value: '来福士' }, type: Object as PropType<{ [key: string]: any }>,
{ label: '保护编号', value: '56465' }, required: true,
{ label: '建造者', value: '待考' },
{ label: '批次', value: '第三批' },
{ label: '设计者', value: '待考' },
{ label: '保护类别', value: '三类' },
{ label: '施工者', value: '待考' },
{ label: '现使用性质', value: '商业' },
{ label: '原使用性质', value: '商业' },
{
label: '描述',
value: '描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容',
}, },
] })
const basicInfo = computed(() => {
const {
originalName = '', //原名称
currentName = '', //现名称
protectNo = '', //保护编号
batch = '', //批次
protectLevel = '', //保护类别
originalUseKind = '', //原使用性质
currentUseKind = '', //现使用性质
build = '', //建造者
design = '', //设计者
construct = '', //施工者
description = '', //描述
} = props?.info || {}
return [
{ label: '现名称', value: currentName },
{ label: '原名称', value: originalName },
{ label: '保护编号', value: protectNo },
{ label: '建造者', value: build },
{ label: '批次', value: batch },
{ label: '设计者', value: design },
{ label: '保护类别', value: protectLevel },
{ label: '施工者', value: construct },
{ label: '现使用性质', value: currentUseKind },
{ label: '原使用性质', value: originalUseKind },
{ label: '描述', value: description },
]
})
const photos = computed(() => {
const {
designPhoto = '', //设计图片
originalPhoto = '', //原始图片
currentPhoto = '', //现状图片
repairHistory = '', //修缮历史
} = props?.info || {}
return [
(designPhoto && designPhoto?.split(',')) || [],
(originalPhoto && originalPhoto?.split(',')) || [],
(currentPhoto && currentPhoto?.split(',')) || [],
repairHistory,
]
})
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
...@@ -96,7 +135,8 @@ const basicInfo = [ ...@@ -96,7 +135,8 @@ const basicInfo = [
flex 1 flex 1
.photos .photos
display flex display flex
justify-content space-between
>img >img
width 15% width 15%
&+img
margin-left 2%
</style> </style>
src/view/raffles/right.vue
View file @ bd773424
...@@ -52,9 +52,10 @@ ...@@ -52,9 +52,10 @@
</div> </div>
<div> <div>
<p class="sub-title">网红门店</p> <p class="sub-title">网红门店</p>
<div class="stores"> <div v-if="storeList.length > 0" class="stores">
<img v-for="(item, i) in stores" :key="i" :src="item" /> <img v-for="(item, i) in storeList" :key="i" :src="item" />
</div> </div>
<m-empty v-else />
</div> </div>
</div> </div>
</m-card> </m-card>
...@@ -84,31 +85,55 @@ ...@@ -84,31 +85,55 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import store1 from '@/assets/images/store1.png' import { ajax, api } from '@/ajax'
import store2 from '@/assets/images/store2.png' import { computed, defineProps, ref } from 'vue'
import store3 from '@/assets/images/store3.png' import type { PropType } from 'vue'
import store4 from '@/assets/images/store4.png'
import store5 from '@/assets/images/store5.png'
import store6 from '@/assets/images/store6.png'
import store7 from '@/assets/images/store7.png'
import store8 from '@/assets/images/store8.png'
import store9 from '@/assets/images/store9.png'
import store10 from '@/assets/images/store10.png'
const sumList = [ const props = defineProps({
{ name: '商业租金', value: 3341, unit: '元/㎡/月', color: 'gold' }, info: {
{ name: '餐饮租金', value: 2715, unit: '元/㎡/月', color: 'gold' }, type: Object as PropType<{ [key: string]: any }>,
required: true,
},
})
const sumList = computed(() => {
const {
lfsBusinessRent = 0, //来福士商业租金
lfsFoodRent = 0, //来福士餐饮租金
districtAvgBusinessRent = 0, //区平均商业租金
streetAvgBusinessRent = 0, //街道平均商业租金
lfsAvgBusinessRent = 0, //来福士平均商业租金
} = props?.info || {}
return [
{
name: '商业租金',
value: lfsBusinessRent,
unit: '元/㎡/月',
color: 'gold',
},
{ name: '餐饮租金', value: lfsFoodRent, unit: '元/㎡/月', color: 'gold' },
{ {
name: '区平均租金', name: '区平均租金',
value: 1568, value: districtAvgBusinessRent,
unit: '元/㎡/月', unit: '元/㎡/月',
color: 'gold', color: 'gold',
dot: 'gold', dot: 'gold',
}, },
{ name: '街道平均租金', value: 953, unit: '元/㎡/月', dot: '#6DD400' }, {
{ name: '来福士平均租金', value: 986, unit: '元/㎡/月', dot: '#32C5FF' }, name: '街道平均租金',
] value: streetAvgBusinessRent,
const chartData = { unit: '元/㎡/月',
dot: '#6DD400',
},
{
name: '来福士平均租金',
value: lfsAvgBusinessRent,
unit: '元/㎡/月',
dot: '#32C5FF',
},
]
})
const chartData = ref({
dimensions: [ dimensions: [
{ name: 'month', displayName: '月份' }, { name: 'month', displayName: '月份' },
{ name: 'rent1', displayName: '区平均租金' }, { name: 'rent1', displayName: '区平均租金' },
...@@ -129,26 +154,137 @@ const chartData = { ...@@ -129,26 +154,137 @@ const chartData = {
{ month: '11月', rent1: 1000, rent2: 1200, rent3: 1200 }, { month: '11月', rent1: 1000, rent2: 1200, rent3: 1200 },
{ month: '12月', rent1: 1000, rent2: 1200, rent3: 900 }, { month: '12月', rent1: 1000, rent2: 1200, rent3: 900 },
], ],
} })
const pieData = { ajax
.get({
url: api.GET_RAFFLES_RENT,
})
.then((res) => {
const {
lfsRent1 = 0,
lfsRent2 = 0,
lfsRent3 = 0,
lfsRent4 = 0,
lfsRent5 = 0,
lfsRent6 = 0,
lfsRent7 = 0,
lfsRent8 = 0,
lfsRent9 = 0,
lfsRent10 = 0,
lfsRent11 = 0,
lfsRent12 = 0,
} = res?.data?.content?.[0] || {}
const {
districtAvgBusinessRent = 0, //区平均商业租金
streetAvgBusinessRent = 0, //街道平均商业租金
} = props?.info || {}
chartData.value = {
dimensions: [
{ name: 'month', displayName: '月份' },
{ name: 'rent1', displayName: '区平均租金' },
{ name: 'rent2', displayName: '街道平均租金' },
{ name: 'rent3', displayName: '来福士平均租金' },
],
source: [
{
month: '1月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent1,
},
{
month: '2月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent2,
},
{
month: '3月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent3,
},
{
month: '4月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent4,
},
{
month: '5月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent5,
},
{
month: '6月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent6,
},
{
month: '7月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent7,
},
{
month: '8月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent8,
},
{
month: '9月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent9,
},
{
month: '10月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent10,
},
{
month: '11月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent11,
},
{
month: '12月',
rent1: districtAvgBusinessRent,
rent2: streetAvgBusinessRent,
rent3: lfsRent12,
},
],
}
})
const pieData = computed(() => {
const {
entertainment = 0, //休闲娱乐
parentChildren = 0, //亲子
food = 0, //餐饮
beauty = 0, //丽人
shopping = 0, //购物
} = props?.info || {}
return {
dimensions: [ dimensions: [
{ name: 'name', displayName: '分类' }, { name: 'name', displayName: '分类' },
{ name: 'value', displayName: '数量' }, { name: 'value', displayName: '数量' },
], ],
source: [ source: [
{ name: '休闲娱乐', value: 22 }, { name: '休闲娱乐', value: entertainment },
{ name: '亲子', value: 20 }, { name: '亲子', value: parentChildren },
{ name: '美食', value: 24 }, { name: '美食', value: food },
{ name: '丽人', value: 10 }, { name: '丽人', value: beauty },
{ name: '购物', value: 24 }, { name: '购物', value: shopping },
], ],
} }
})
const option = { const option = {
color: ['gold', '#6DD400', '#32C5FF'], color: ['gold', '#6DD400', '#32C5FF'],
yAxis: {
min: 400,
max: 1600,
},
legend: { legend: {
right: '1%', right: '1%',
}, },
...@@ -207,28 +343,33 @@ const pieOption = { ...@@ -207,28 +343,33 @@ const pieOption = {
}, },
], ],
} }
const stores = [ const storeList = computed(() => {
store1, const { stores = '' } = props?.info || {}
store2, return (stores && stores?.split(',')) || []
store3, })
store4,
store5,
store6,
store7,
store8,
store9,
store10,
]
const table1 = [ const table1 = computed(() => {
{ name: '面积', value: '950㎡' }, const {
{ name: '办公平均租金', value: '1200元/㎡/月' }, officeArea = 0, //办公楼面积
] officeAvgRent = 0, //办公楼平均租金
const table2 = [ } = props?.info || {}
{ name: '面积', value: '950㎡' }, return [
{ name: '商业平均租金', value: '1200元/㎡/月' }, { name: '面积', value: `${officeArea}㎡` },
{ name: '餐饮平均租金', value: '1200元/㎡/月' }, { name: '办公平均租金', value: `${officeAvgRent}元/㎡/月` },
] ]
})
const table2 = computed(() => {
const {
businessArea = 0, //商业楼面积
businessAvgRent = 0, //商业楼平均租金
foodAvgRent = 0, //餐饮平均租金
} = props?.info || {}
return [
{ name: '面积', value: `${businessArea}㎡` },
{ name: '商业平均租金', value: `${businessAvgRent}元/㎡/月` },
{ name: '餐饮平均租金', value: `${foodAvgRent}元/㎡/月` },
]
})
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
......
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