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

src/ajax/api.ts

@@ -140,4 +140,8 @@ export default {
   GET_DISCOVER_STATISTICS:
     '/service-special-nandong/public/discover/category/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

@@ -8,10 +8,10 @@
     <!-- TODO 添加地图 -->
     <Title area="title"> 南东城运 </Title>
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
-      <LeftSection area="left" />
+      <LeftSection :info="rafflesDetail" area="left" />
     </m-animate>
     <m-animate enter="fadeInRight" leave="fadeOutRight">
-      <RightSection area="right" />
+      <RightSection :info="rafflesDetail" area="right" />
     </m-animate>
   </m-grid>
 </template>
@@ -20,6 +20,17 @@
 import Title from './title.vue'
 import LeftSection from './left.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>
 
 <style lang="stylus" scoped></style>

src/view/raffles/left.vue

@@ -15,46 +15,85 @@
       </div>
     </m-card>
     <m-card title="设计稿图片" mode="2">
-      <div class="photos">
-        <img v-for="(_, i) in new Array(6).fill(1)" :key="i" :src="mock1" />
+      <div v-if="photos[0].length > 0" class="photos">
+        <img v-for="src in photos[0].slice(0, 6)" :key="src" :src="src" />
       </div>
+      <m-empty v-else />
     </m-card>
     <m-card title="原始图片" mode="2">
-      <div class="photos">
-        <img v-for="(_, i) in new Array(6).fill(1)" :key="i" :src="mock2" />
+      <div v-if="photos[1].length > 0" class="photos">
+        <img v-for="src in photos[1].slice(0, 6)" :key="src" :src="src" />
       </div>
+      <m-empty v-else />
     </m-card>
     <m-card title="现状图片" mode="2">
-      <div class="photos">
-        <img v-for="(_, i) in new Array(6).fill(1)" :key="i" :src="mock3" />
+      <div v-if="photos[2].length > 0" class="photos">
+        <img v-for="src in photos[2].slice(0, 6)" :key="src" :src="src" />
       </div>
+      <m-empty v-else />
     </m-card>
     <m-card title="修缮历史" mode="2">
-      修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史
+      <template v-if="photos[3]">
+        {{ photos[3] }}
+      </template>
+      <m-empty v-else />
     </m-card>
   </div>
 </template>
 
 <script lang="ts" setup>
-import mock1 from '@/assets/images/mock1.png'
-import mock2 from '@/assets/images/mock2.png'
-import mock3 from '@/assets/images/mock3.png'
-const basicInfo = [
-  { label: '现名称', value: '来福士商业大楼' },
-  { label: '原名称', value: '来福士' },
-  { label: '保护编号', value: '56465' },
-  { label: '建造者', value: '待考' },
-  { label: '批次', value: '第三批' },
-  { label: '设计者', value: '待考' },
-  { label: '保护类别', value: '三类' },
-  { label: '施工者', value: '待考' },
-  { label: '现使用性质', value: '商业' },
-  { label: '原使用性质', value: '商业' },
-  {
-    label: '描述',
-    value: '描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容',
+import { computed, defineProps } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  info: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
   },
-]
+})
+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>
 
 <style lang="stylus" scoped>
@@ -96,7 +135,8 @@ const basicInfo = [
       flex 1
 .photos
   display flex
-  justify-content space-between
   >img
     width 15%
+    &+img
+      margin-left 2%
 </style>

src/view/raffles/right.vue

@@ -52,9 +52,10 @@
         </div>
         <div>
           <p class="sub-title">网红门店</p>
-          <div class="stores">
-            <img v-for="(item, i) in stores" :key="i" :src="item" />
+          <div v-if="storeList.length > 0" class="stores">
+            <img v-for="(item, i) in storeList" :key="i" :src="item" />
           </div>
+          <m-empty v-else />
         </div>
       </div>
     </m-card>
@@ -84,31 +85,55 @@
 </template>
 
 <script lang="ts" setup>
-import store1 from '@/assets/images/store1.png'
-import store2 from '@/assets/images/store2.png'
-import store3 from '@/assets/images/store3.png'
-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'
+import { ajax, api } from '@/ajax'
+import { computed, defineProps, ref } from 'vue'
+import type { PropType } from 'vue'
 
-const sumList = [
-  { name: '商业租金', value: 3341, unit: '元/㎡/月', color: 'gold' },
-  { name: '餐饮租金', value: 2715, unit: '元/㎡/月', color: 'gold' },
+const props = defineProps({
+  info: {
+    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: '区平均租金',
-    value: 1568,
+      value: districtAvgBusinessRent,
       unit: '元/㎡/月',
       color: 'gold',
       dot: 'gold',
     },
-  { name: '街道平均租金', value: 953, unit: '元/㎡/月', dot: '#6DD400' },
-  { name: '来福士平均租金', value: 986, unit: '元/㎡/月', dot: '#32C5FF' },
-]
-const chartData = {
+    {
+      name: '街道平均租金',
+      value: streetAvgBusinessRent,
+      unit: '元/㎡/月',
+      dot: '#6DD400',
+    },
+    {
+      name: '来福士平均租金',
+      value: lfsAvgBusinessRent,
+      unit: '元/㎡/月',
+      dot: '#32C5FF',
+    },
+  ]
+})
+const chartData = ref({
   dimensions: [
     { name: 'month', displayName: '月份' },
     { name: 'rent1', displayName: '区平均租金' },
@@ -129,26 +154,137 @@ const chartData = {
     { month: '11月', rent1: 1000, rent2: 1200, rent3: 1200 },
     { 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: [
       { name: 'name', displayName: '分类' },
       { name: 'value', displayName: '数量' },
     ],
     source: [
-    { name: '休闲娱乐', value: 22 },
-    { name: '亲子', value: 20 },
-    { name: '美食', value: 24 },
-    { name: '丽人', value: 10 },
-    { name: '购物', value: 24 },
+      { name: '休闲娱乐', value: entertainment },
+      { name: '亲子', value: parentChildren },
+      { name: '美食', value: food },
+      { name: '丽人', value: beauty },
+      { name: '购物', value: shopping },
     ],
-}
+  }
+})
 const option = {
   color: ['gold', '#6DD400', '#32C5FF'],
-  yAxis: {
-    min: 400,
-    max: 1600,
-  },
   legend: {
     right: '1%',
   },
@@ -207,28 +343,33 @@ const pieOption = {
     },
   ],
 }
-const stores = [
-  store1,
-  store2,
-  store3,
-  store4,
-  store5,
-  store6,
-  store7,
-  store8,
-  store9,
-  store10,
-]
+const storeList = computed(() => {
+  const { stores = '' } = props?.info || {}
+  return (stores && stores?.split(',')) || []
+})
 
-const table1 = [
-  { name: '面积', value: '950㎡' },
-  { name: '办公平均租金', value: '1200元/㎡/月' },
-]
-const table2 = [
-  { name: '面积', value: '950㎡' },
-  { name: '商业平均租金', value: '1200元/㎡/月' },
-  { name: '餐饮平均租金', value: '1200元/㎡/月' },
-]
+const table1 = computed(() => {
+  const {
+    officeArea = 0, //办公楼面积
+    officeAvgRent = 0, //办公楼平均租金
+  } = props?.info || {}
+  return [
+    { name: '面积', value: `${officeArea}㎡` },
+    { 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>
 
 <style lang="stylus" scoped>