Jan 10, 2025 11 min read 投资理财

买房焦虑，打造成都二手房交易行情大屏-实现篇

各位道友好呀，我是 “星辰编程理财”，上篇《买房焦虑，打造成都二手房交易行情大屏-需求篇》梳理了房地产下行的逻辑、当前的环境政策，还定制了数据指标和数据源。今天，咱们就来看看如何实现这个成都二手房交易行情大屏，我会给大家讲讲技术选型、步骤、主要逻辑，但技术细节咱就点到为止，不往技术细节的深坑里扎。

整体选型

在实现这个成都二手房交易行情大屏之前，我得先给大家介绍一下iStock Shell，这是一个我开源的金融数据查询工具，虽然还没完全完善，但我相信随着需求的驱动，它会越来越好用，具体介绍请点击去官网查看。这次大屏功能实现将iStock Shell作为底层框架，在这基础上实现一个cdesfhq（成都二手房行情）的查询命令。
在实现过程中，我遇到了两个堵点：

二手房数据入库：这些数据来自第三方平台，如房小团、贝壳等，需要入库才能被前端使用。而iStock Shell目前的设计思路是重前端、轻后端，大量业务逻辑交给前端处理，即iStock Shell的Web Worker层。
大屏组件：需要开发一个通用大屏组件去消费处理后的数据，整理出来需要卡片（card）组件、图表（chart）组件、大屏容器（data-grid）。目前已有chart组件，但card和data-grid还需要动手去实现。

棘手的数据入库

说到底，消费第三方数据就两条路：一是直接把数据 “原封不动” 送到前端；二是费点周折，处理好数据入库，再按需从库里捞出来给前端。第一种，iStock Shell轻松就能 hold 住，没啥大问题。第二种难点在于，得安排一堆定时任务去抓数据、入库，要是简单对付下当前业务，随便写写代码也能糊弄过去，但要想用轻巧代码实现规模化、标准化，还得前后端一体化，这难度就上去了。

数据查询分析这块，数据来源五花八门，但入库无非手动、自动两种方式。手动入库，得弄个数据管理界面让人操作；自动入库，就得有标准化接口或方法。顺着这个思路找，Airtable 最先进入我的选型视野，后来越研究越深入，发现 teable 非常符合我的需求，就它了，就这样成了我的数据管理工具。

至于定时任务咋实现、遵循啥标准、咋管理，我这找了很久的方案没合适的，要是各位道友有方案，欢迎来讨论交流。考虑到这定时任务也不是当下成都二手房交易行情大屏的 “刚需”，这项目时间拖得够久了，于是我先把大屏搞出来，后面再慢慢琢磨定时任务的方案。

大致实现步骤

组件实现

组件的实现相对简单，按照正常的开发需求流程来走。iStock Shell用 pnpm + 单一仓库模式管理，咱就在 src/packages/shell-ui/src 目录下新建组件目录，动手开干就完事儿。

部署数据管理服务

使用teable作为数据管理服务，它提供了容器化部署方案，非常方便，部署时可以参考该文档。teable提供Restful API接口，可以非常方便的增、删、改、查数据。

部署参考文件docker-compose.yml：

version: '3.1'

services:
  teable:
    container_name: teable
    image: ghcr.nju.edu.cn/teableio/teable:latest
    restart: always
    ports:
      - '5175:3000'
    volumes:
      - /root/data/teable/data:/app/.assets:rw
    env_file:
      - .env
    environment:
      - NEXT_ENV_IMAGES_ALL_REMOTE=true
    networks:
      - teable
    depends_on:
      teable-db-migrate:
        condition: service_completed_successfully
      teable-cache:
        condition: service_healthy
    healthcheck:
      test: ['CMD', 'curl', '-f', 'http://localhost:3000/health']
      start_period: 5s
      interval: 5s
      timeout: 3s
      retries: 3

  teable-db:
    container_name: postgres
    image: postgres:15.4
    restart: always
    ports:
      - '42345:5432'
    volumes:
      - /root/data/teable/db:/var/lib/postgresql/data:rw
    environment:
      - POSTGRES_DB=${POSTGRES_DB}
      - POSTGRES_USER=${POSTGRES_USER}
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
    networks:
      - teable
    healthcheck:
      test: ['CMD-SHELL', "sh -c 'pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}'"]
      interval: 10s
      timeout: 3s
      retries: 3

  teable-db-migrate:
    container_name: teable-db-migrate
    image: ghcr.nju.edu.cn/teableio/teable-db-migrate:latest
    environment:
      - PRISMA_DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
    networks:
      - teable
    depends_on:
      teable-db:
        condition: service_healthy

  teable-cache:
    container_name: redis
    image: redis:7.2.4
    restart: always
    expose:
      - '6379'
    volumes:
      - /root/data/teable/cache:/data:rw
    networks:
      - teable
    command: redis-server --appendonly yes --requirepass ${REDIS_PASSWORD}
    healthcheck:
      test: ['CMD', 'redis-cli', '--raw', 'incr', 'ping']
      interval: 10s
      timeout: 3s
      retries: 3

networks:
  teable:
    name: teable-network

volumes:
  teable-db: {}
  teable-data: {}
  teable-cache: {}

配置文件.env，自行修改填写：

# replace the default password
POSTGRES_PASSWORD=
REDIS_PASSWORD=
SECRET_KEY=

# replace the following with a publicly accessible address
PUBLIC_ORIGIN=

# ---------------------

# Postgres
POSTGRES_HOST=teable-db
POSTGRES_PORT=5432
POSTGRES_DB=teable
POSTGRES_USER=teable

# Redis
REDIS_HOST=teable-cache
REDIS_PORT=6379
REDIS_DB=0

# App
PRISMA_DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
BACKEND_CACHE_PROVIDER=redis
BACKEND_CACHE_REDIS_URI=redis://default:${REDIS_PASSWORD}@${REDIS_HOST}:${REDIS_PORT}/${REDIS_DB}

# email
BACKEND_MAIL_HOST=
BACKEND_MAIL_PORT=465
BACKEND_MAIL_SECURE=true
BACKEND_MAIL_SENDER=
BACKEND_MAIL_SENDER_NAME=
BACKEND_MAIL_AUTH_USER=
BACKEND_MAIL_AUTH_PASS=

初始化命令开发

接下来，我们来实现成都二手房交易行情的命令。在项目根目录执行istock cmd init，初始化命令开发，然后按照提示填写相关信息即可。

PS D:\project\myself\istock-shell> istock cmd init
? 在哪个命令域下开发命令？ cdfc
? 您期望命令相关文件名为？(文件名用-符号分割) cdesf
cdfc命令域文件夹创建成功
初始化命令开发已完成

初始化完成后，src/worker/domains/cdfc目录下已经有了相关初始化文件。iStock Shell把业务逻辑拆成了三层（Model、Service、Controller），开发方式类似Nestjs框架，不过它是在 Web Worker 里施展拳脚。

模型定义

创建cdfcjysj.model.ts和cdfceshqsj.model.ts文件，在cdfcjysj.model.ts和cdfceshqsj.model.ts中，我们定义了数据类型。这些model不仅是对数据类型的描述，如果需要存本地数据库，也是对数据库表的描述文件。
cdfcjysj.model.ts：

import { BaseModel, Model } from '@istock/iswork';

// 成都房产交易数据
@Model('cdfcjysj')
export class CdfcjysjModel extends BaseModel {
  时间!: string;
  类型!: '新房' | '二手房';
  区域类型!: '全市' | '中心城区' | '郊区新城';
  套!: number;
  面积!: number;
}

cdfceshqsj.model.ts：

import { BaseModel, Model } from '@istock/iswork';

// 成都房产二手行情数据
@Model('cdfceshqsj')
export class CdfceshqsjModel extends BaseModel {
  时间!: string;
  数据类型!:
    | '新增挂牌均价'
    | '新增挂牌中位数'
    | '涨价房源占比'
    | '涨价房源幅度'
    | '成交均价'
    | '成交中位数'
    | '平均成交周期'
    | '降价房源占比'
    | '降价房源幅度'
    | '新增挂牌量'
    | '成交量'
    | '存量挂牌';

  值!: number;
  单位!: string;
  数据源!: '房小团' | '数据源';
}

业务逻辑实现

在cdesf.service.ts中，我们需要实现主要的业务逻辑。值得重点关注的地方：

使用模型提供的run方法调用teable提供的Restful API接口，如：CdfcjysjModel.run。
ChartService是一个全局的提供者，可以直接依赖注入到本服务（CdesfService）里面使用。ChartService服务实例提供generateChartConfig方法把数据转换为图表组件所需要的配置数据，调用方式this.chartService.generateChartConfig，具体使用方法请查看chart.service.ts及chart.base.service.ts文件源码。

cdesf.service.ts（部分核心代码）：

import { Injectable, type TModelData } from '@istock/iswork';
import { isNumber, toLocaleDateString } from '@istock/util';
import dayjs from 'dayjs';
import isoWeek from 'dayjs/plugin/isoWeek';
import { CdfcjysjModel } from './cdfcjysj.model';
import { CdfceshqsjModel } from './cdfceshqsj.model';
import { ChartService } from '../../global/chart/chart.service';
import { type TChartOptions } from '../../global/chart/chart.base.service';
import { EChartType } from '@domains/global/chart/chart.cmd';

type TCdfcjysjResponse = {
  records: Array<{
    fields: TModelData<CdfcjysjModel>;
  }>;
};

type TCdfceshqsjResponse = {
  records: Array<{
    fields: TModelData<CdfceshqsjModel>;
  }>;
};

type TTableQuery = {
  filter?: Record<string, any>;
  orderBy?: Array<Record<string, any>>;
};

type TDataGridCard = { title: string; list: Array<{ name: string; value: string; description?: string }> };

@Injectable()
export class CdesfService {
  constructor(private readonly chartService: ChartService) {
    dayjs.extend(isoWeek);
  }

  /**
   * 获取数据单位
   * @param list
   * @private
   */
  #getListDataUnit(list: Array<TModelData<CdfceshqsjModel>>) {
    // ...
  }

  /**
   * 对比或环比转百分比
   * @param num1
   * @param num2
   * @private
   */
  #toPercentageFormat(num1: number | string, num2: number | string) {
    // ...
  }

  /**
   * 获取交易量数据
   * @param query
   * @param tableId
   */
  async getHouseTradeData(query: TTableQuery = {}, tableId: string = 'tblpAzrLGogn42iVjuq') {
    const response = await CdfcjysjModel.run<TCdfcjysjResponse>(`/api/table/${tableId}/record`, {
      method: 'get',
      query: {
        fieldKeyType: 'name',
        take: 1000,
        ...query,
      },
    });
    return response.records.map((record) => record.fields);
  }

  /**
   * 获取二手交易数据
   * @param query
   * @param tableId
   */
  async getOldHouseTradeData(query: TTableQuery = {}, tableId: string = 'tblVvH7U9z7UJn8v6E5') {
    const response = await CdfceshqsjModel.run<TCdfceshqsjResponse>(`/api/table/${tableId}/record`, {
      method: 'get',
      query: {
        fieldKeyType: 'name',
        take: 1000,
        ...query,
      },
    });
    return response.records.map((record) => record.fields);
  }

  /**
   * 获取整个大屏数据
   */
  async getHouseDataGridData() {
    const [monthTradeData, monthOldHouseTradeData, weekOldHouseTradeData]: [
      Array<TModelData<CdfcjysjModel>>,
      Array<TModelData<CdfceshqsjModel>>,
      Array<TModelData<CdfceshqsjModel>>,
    ] = await Promise.all([
      this.getHouseTradeData({
        filter: {
          conjunction: 'and',
          filterSet: [
            { fieldId: 'fldMBBgvSSurOxULC8b', operator: 'is', value: '二手房' },
            { fieldId: 'fldMMxxENoRejGm6l7G', operator: 'is', value: '全市' },
          ],
        },
        orderBy: [{ fieldId: 'fldvd5o55rIJD3RCQaJ', order: 'desc' }],
      }),
      this.getOldHouseTradeData({
        orderBy: [{ fieldId: 'fldyFiNVC3JNtbm87Cb', order: 'desc' }],
      }),
      this.getOldHouseTradeData(
        {
          orderBy: [{ fieldId: 'fldF3RiarNlFpB3sQsD', order: 'desc' }],
        },
        'tbl4q2BqKL2tq9pk1xD'
      ),
    ]);
    const cards = this.getHouseDataGridCards(monthTradeData, monthOldHouseTradeData, weekOldHouseTradeData);
    const charts = this.getHouseDataGridCharts(
      [...monthTradeData].reverse(),
      [...monthOldHouseTradeData].reverse(),
      [...weekOldHouseTradeData].reverse()
    );
    return {
      cards,
      charts,
    };
  }

  /**
   * 获取卡片数据
   * @param monthTradeData
   * @param monthOldHouseTradeData
   * @param weekOldHouseTradeData
   */
  getHouseDataGridCards(
    monthTradeData: Array<TModelData<CdfcjysjModel>>,
    monthOldHouseTradeData: Array<TModelData<CdfceshqsjModel>>,
    weekOldHouseTradeData: Array<TModelData<CdfceshqsjModel>>
  ): TDataGridCard[] {
    // ...
    const cards: TDataGridCard[] = [
      {
        title: '价',
        list: [],
      },
      {
        title: '量',
        list: [],
      },
      {
        title: '周转',
        list: [],
      },
      {
        title: '回报',
        list: [],
      },
      {
        title: '长期人口',
        list: [],
      },
    ];
    // ...
    return cards;
  }

  /**
   * 获取图表数据
   * @param monthTradeData
   * @param monthOldHouseTradeData
   * @param weekOldHouseTradeData
   */
  getHouseDataGridCharts(
    monthTradeData: Array<TModelData<CdfcjysjModel>>,
    monthOldHouseTradeData: Array<TModelData<CdfceshqsjModel>>,
    weekOldHouseTradeData: Array<TModelData<CdfceshqsjModel>>
  ): TChartOptions[] {
    const colorRange = ['#c94400', '#744f36'];
    const lineChildren = [
      { type: 'line', encode: { shape: 'smooth' } },
      { type: 'point', encode: { shape: 'point' }, tooltip: false },
    ];
    const 月价格走势列表 = monthOldHouseTradeData
      .filter((item) => ['成交均价', '新增挂牌均价'].includes(item.数据类型))
      .map((item) => {
        if (item.时间) item.时间 = toLocaleDateString(new Date(item.时间), 'YYYYMM');
        return { 时间: item.时间, 价格: item.值, 数据类型: item.数据类型 };
      });
 
    const 月成交均价图表: TChartOptions = this.chartService.generateChartConfig(
      {
        数据: 月价格走势列表,
        横轴: '时间',
        纵轴: '价格',
        类别: '数据类型',
        配置: {
          title: {
            title: '月成交均价走势',
          },
          type: 'view',
          scale: { color: { range: colorRange } },
          height: 400,
          children: lineChildren,
        },
      },
      EChartType.Line
    );
    // ...
    return [
      { options: 周量走势图表 },
      { options: 月成交均价图表 },
      { options: 月成交量图表 },
      { options: 涨价降价占比图表 },
    ];
  }
}

命令配置

在cdesf.cmd.ts文件中，我们对命令如何使用进行了描述。命令配置描述为TControllerMethodCmdRoute类型。
cdfcjysj.model.ts：

import { type TControllerMethodCmdRoute } from '@istock/iswork';

const 成都二手房: TControllerMethodCmdRoute = {
  name: '成都二手房行情',
  cmd: 'cdesfhq',
  usage: 'cdesfhq',
  options: {},
  arguments: [],
  description: '成都二手房行情，数据来自房小团、贝壳。',
  remarks: '',
  example: 'cdesfhq',
};
export default {
  成都二手房,
};

控制逻辑

在cdesf.controller.ts中，我们定义了getDataGrid方法将业务逻辑与命令配置绑定起来，然后返回定义ShDataGrid和ShText这两个组件接收消费数据。

cdesf.controller.ts：

import { CmdRoute, Controller, Method } from '@istock/iswork';
import { CdesfService } from './cdesf.service';
import cmdJson from './cdesf.cmd';

@Controller({
  alias: 'cdesf',
})
export class CdesfController {
  constructor(private readonly cdesfService: CdesfService) {}

  @CmdRoute(cmdJson.成都二手房)
  @Method({
    alias: cmdJson.成都二手房.cmd,
  })
  async getDataGrid() {
    const dataGrid = await this.cdesfService.getHouseDataGridData();
    return {
      output: [
        {
          component: 'ShDataGrid',
          props: {
            ...dataGrid,
          },
        },
        {
          component: 'ShText',
          props: {
            texts: [
              {
                type: 'warning',
                text: '注：主要展示数据来源于成都房小团，卡片中的“周新增挂牌量”和图表中的“周成交量/新增挂牌量走势”数据来自贝壳。数据仅提供参考，不构成任何建议。',
                tag: 'span',
              },
            ],
          },
        },
      ],
    };
  }
}

引用

在datasource-register.ts注册cdfcjysj.model.ts和cdfceshqsj.model.ts模型。将模型绑定到对应数据源上。

新建cdfc.domain.ts文件作为该命令的应用域入口文件，最后cdfc.domain.ts需要导入到root.domain.ts根应用域。

import { Domain } from '@istock/iswork';
import { CdesfController } from './cdesf/cdesf.controller';
import { CdesfService } from './cdesf/cdesf.service';

@Domain({
  name: 'cdfc',
  viewName: '成都房产',
  providers: [CdesfService],
  controllers: [CdesfController],
})
export class CdfcDomain {}

至此，开发完成！

实现效果

在成都房产应用域下(输入命令yyjr cdfc)，再输入cdesfhq命令，查看成都二手房交易行情。效果如下：

最后

说实话，成都的楼市确实让人看不懂，让人焦虑。通过本文开发提供的cdesfhq命令，希望能帮助你更深入地理解成都楼市，为你的决策提供有力的支持。如果这篇文章能给你带来一些启发和帮助，是莫大的荣幸与欣慰。另外如有任何问题或想法，欢迎留言交流。

整体选型

棘手的数据入库

大致实现步骤

组件实现

部署数据管理服务

初始化命令开发

模型定义

业务逻辑实现

命令配置

控制逻辑

引用

实现效果

最后

You might also like...

买房焦虑，打造成都二手房交易行情大屏-需求篇

三十年四次总规对比看成都巨变

用TS手把手实现可转债双低轮动策略

炒股十年，我写了一个金融数据查询命令终端

30分钟开发Vue 3插入客制化脚本插件