DemoTable

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AechiveCard } from 'ai-search-aechivecard';
import {data, fields} from './dataSource';

class App extends Component {
  render() {
    return (
      <div>
        <AechiveCard hlList={data.record.highlight}  data={data} fields={fields} />
        <AechiveCard hlList={data.record.highlight} confUrl={'/mock/akDCghOZ1/aechivecard'} queryBody={{id: 1}} fields={fields} />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

props

| 参数 | 类型 | 说明 | 必填 | | :----------- | :--------------: | -----------: | ---- | | data | object | 传入的数据 | 否 | | fields | object |传入的展示数据对应的字段 | 否 | | width | string | 头像图片宽度 | 否 | | collectionClick | Function | 收藏点击事件 | 否 | | confUrl | string | 请求数据的url | 否 | | queryBody | object | 请求数据的传参 | 否 | | label | object | 标签配置项 | 否 | | supplementImgList | array | 外部传入的img数据用于合并轮播图数据（需保持Item数据格式一致 | 否 |

data示例

  {
  avatarUrl: 'https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg',
  dataType: 'archive',
  recordType: 'person',
  identifier: 362330199112138300,
  record: {
    highlight: [
      '362330199112138274',
      '男',
      '江西',
      '18270320870',
      '游城',
      '163',
    ],
    baseInfo: {
      hjd: '游城乡高坊村163号',
      jg: '江西省波阳县',
      jzd: '',
      lxfs: '15970302955,18270320870,18270320870',
      whcd: '小学教育',
    },
    list: [
      {
        recordType: 'face',
        identifier: '362330199112138300',
        record: {
          xm: '姓名',
          sfzhm: '身份证号码',
          dmyxsd: '99',
          gdJd: '高德经度',
          gdWd: '高德维度',
          ossUrl: 'https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif',
          dxwyid: '高德经度',
          cxsj: '2020/10/23 12:12:12',
          dz: '浙江省杭州市西湖区转塘街道阿里云飞天园',
          highlight: [
            '新疆',
            '男人',
            '戴眼镜',
            '新疆3',
            '男人3',
            '戴眼镜3',
          ],
        },
        score: 0.85,
      },
      {
        recordType: 'face',
        identifier: '362330199112138300',
        record: {
          xm: '姓名',
          sfzhm: '身份证号码',
          dmyxsd: '99',
          gdJd: '高德经度',
          gdWd: '高德维度',
          ossUrl: 'https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg',
          dxwyid: '高德经度',
          cxsj: '2020/10/23 12:12:12',
          dz: '浙江省杭州市西湖区转塘街道阿里云飞天园',
          highlight: [
            '新疆',
            '男人',
            '戴眼镜',
            '新疆3',
            '男人3',
            '戴眼镜3',
          ],
        },
        score: 0.85,
      },
      {
        recordType: 'face',
        identifier: '362330199112138300',
        record: {
          xm: '姓名',
          sfzhm: '身份证号码',
          dmyxsd: '99',
          gdJd: '高德经度',
          gdWd: '高德维度',
          ossUrl: 'https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg',
          dxwyid: '高德经度',
          cxsj: '2020/10/23 12:12:12',
          dz: '浙江省杭州市西湖区转塘街道阿里云飞天园',
          highlight: [
            '新疆',
            '男人',
            '戴眼镜',
            '新疆3',
            '男人3',
            '戴眼镜3',
          ],
        },
        score: 0.85,
      },
      {
        recordType: 'body',
        identifier: null,
        record: {
          xm: '姓名',
          sfzhm: '身份证号码',
          dmyxsd: '99',
          gdJd: '高德经度',
          gdWd: '高德维度',
          ossUrl: 'https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg',
          dxwyid: '高德经度',
          cxsj: '出现时间',
          dz: '地址',
          highlight: [
            '新疆',
            '男人',
            '戴眼镜',
            '新疆3',
            '男人3',
            '戴眼镜3',
          ],
        },
        score: 0.8,
      },
      {
        recordType: 'face',
        identifier: '362330199112138300',
        record: {
          xm: '姓名',
          sfzhm: '身份证号码',
          dmyxsd: '99',
          gdJd: '高德经度',
          gdWd: '高德维度',
          ossUrl: 'https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg',
          dxwyid: '高德经度',
          cxsj: '出现时间',
          dz: '地址',
          highlight: [
            '新疆',
            '男人',
            '戴眼镜',
            '新疆3',
            '男人3',
            '戴眼镜3',
          ],
        },
        score: 0.75,
      },
      {
        recordType: 'body',
        identifier: null,
        record: {
          xm: '姓名',
          sfzhm: '身份证号码',
          dmyxsd: '99',
          gdJd: '高德经度',
          gdWd: '高德维度',
          ossUrl: 'https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg',
          dxwyid: '高德经度',
          cxsj: '出现时间',
          dz: '地址',
        },
        score: 0.8,
      },
      {
        recordType: 'face',
        identifier: '362330199112138300',
        record: {
          xm: '姓名',
          sfzhm: '身份证号码',
          dmyxsd: '99',
          gdJd: '高德经度',
          gdWd: '高德维度',
          ossUrl: 'https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg',
          dxwyid: '高德经度',
          cxsj: '出现时间',
          dz: '地址',
          highlight: [
            '新疆',
            '男人',
            '戴眼镜',
            '新疆3',
            '男人3',
            '戴眼镜3',
          ],
        },
        score: 0.75,
      },
      {
        recordType: 'body',
        identifier: null,
        record: {
          xm: '姓名',
          sfzhm: '身份证号码',
          dmyxsd: '99',
          gdJd: '高德经度',
          gdWd: '高德维度',
          ossUrl: 'https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg',
          dxwyid: '高德经度',
          cxsj: '出现时间',
          dz: '地址',
          highlight: [
            '新疆',
            '男人',
            '戴眼镜',
            '新疆3',
            '男人3',
            '戴眼镜3',
          ],
        },
        score: 0.8,
      },
    ],
    lables: [
      {
        lablesName: '流动人口',
        lablesWeight: 90,
        zjhm: '362330199112138274',
      },
      {
        lablesName: '凌晨or上午上网2天',
        lablesWeight: 80,
        zjhm: '362330199112138274',
      },
      {
        lablesName: '凌晨or上午上网占比50.00%',
        lablesWeight: 50,
        zjhm: '362330199112138274',
      },
    ],
    labels: [
      {
        labelName: '与吸毒人员出行次数', // 标签名称
        labelType: 2, // 标签类型 1布尔类型，2统计类型 3占比类型 4直接展示类型
        expression: '与吸毒人员出行value次', // 表达式
        labelValue: '1', // 标签值
        displayValue: '与吸毒人员出行1次', //
        orderNum: 2,
        labelDesc: '出行记录',
        remarks: null,
        zjhm: '1243',
        cphm: null,
        lgdm: null,
        labelCategoryId: 1,
        categoryCode: 'ryjbxx',
        categoryName: '人员基本信息',
        parentCategoryId: '0',
        moduleCode: 'xdry',
      },
      {
        labelName: '凌晨上网占比',
        labelType: 3,
        expression: '凌晨上网占比value',
        labelValue: '0.6',
        displayValue: '凌晨上网占比60%',
        orderNum: 1,
        labelDesc: '上网记录',
        remarks: null,
        zjhm: '1243',
        cphm: null,
        lgdm: null,
        labelCategoryId: 1,
        categoryCode: 'ryjbxx',
        categoryName: '人员基本信息',
        parentCategoryId: '0',
        moduleCode: 'swzb',
      },
      {
        labelName: '凌晨上网占比',
        labelType: 3,
        expression: '凌晨上网占比value',
        labelValue: '0.6',
        displayValue: '凌晨上网占比70%',
        orderNum: 1,
        labelDesc: '上网记录',
        remarks: null,
        zjhm: '1243',
        cphm: null,
        lgdm: null,
        labelCategoryId: 1,
        categoryCode: 'ryjbxx',
        categoryName: '人员基本信息',
        parentCategoryId: '0',
        moduleCode: 'swzb1',
      },
    ],
    overview: {
      blls: null,
      cwnl: '',
      gxwl: '',
      sftz: '',
      xwph: '',
    },
    recentBehavior: {
      jqcl: null,
      jqkd: null,
      jqrl: null,
      jqsw: null,
    },
    title: {
      age: '29',
      hyzk: '未婚',
      mz: '汉族',
      xb: '男性',
      xm: '李刚',
      zjhm: '362330199112138274',
    },
  },
  score: 1,
};

config示例

{
  queryParams: {
    subjectCode: 'recordType',
    idValueCode: 'identifier',
  },
  avatarDataCode: 'list',
  avatar: {
    dataCode: 'record',
    imgCode: 'ossUrl',
    detail: {
      imgCode: 'ossUrl',
      SimilarityCode: {
        value: 'dmyxsd',
        label: '相似度',
      },
      timeCode: {
        value: 'cxsj',
        label: '抓拍时间',
      },
      addressCode: {
        value: 'dz',
        label: '抓拍时间',
      },
    },
  },
  collectionCode: 'collection', // 收藏字段
  titleCode: 'title',
  highlCode: 'highlight',
  labelCode: 'labels',
  title: [
    {
      value: 'xm',
    },
    {
      type: 'link',
      value: 'zjhm',
      onClick: (data: any) => {
        console.log(data, 'data');
      },
    },
    {
      value: 'xb',
    },
    {
      type: 'text',
      value: 'age',
    },
    {
      value: 'mz',
    },
    {
      value: 'hyzk',
    },
  ],
  content: [
    {
      name: '基本信息',
      value: 'baseInfo',
      list: [
        {
          value: 'lxfs',
          label: '手机号：',
          fmt: (text: string) => {
            return text.split(',');
          },
          onClick: (data: any) => {
            console.log(data);
          },
          type: 'link',
        },
        {
          value: 'jg',
          label: '籍 贯：',
          type: 'text',
        },
        {
          value: 'whcd',
          label: '文化程度：',
          type: 'text',
        },
        {
          value: 'jzd',
          label: '居住地址：',
          type: 'text',
        },
        {
          value: 'hjd',
          label: '户籍地址：',
          type: 'text',
        },
      ],
    },
    {
      name: '近期人脸',
      type: 'pic',
      value: 'list',
      extra: {
        name: '查看详情 》',
      },
      dataCode: 'record',
      imgCode: 'ossUrl',
      timeCode: 'cxsj',
      adressCode: 'dz',
    },
    {
      name: '基本信息',
      value: 'baseInfo',
      list: [
        {
          value: 'lxfs',
          label: '手机号：',
          fmt: (text: string) => {
            return text.split(',');
          },
          type: 'link',
        },
        {
          value: 'jg',
          label: '籍 贯：',
        },
        {
          value: 'whcd',
          label: '文化程度：',
        },
        {
          value: 'jzd',
          label: '居住地址：',
        },
        {
          value: 'hjd',
          label: '户籍地址：',
        },
      ],
    },
  ],
  btnGroup: {
    left: [
      {
        value: 'rlss',
        name: '人脸搜索',
        onClick: (data: any) => {
          console.log(data);
        },
      },
      {
        value: 'ckdaxq',
        type: 'primary',
        name: '查看档案详情',
        onClick: (data: any) => {
          console.log(data);
        },
      },
    ],
    right: [
      {
        type: 'link',
        value: 'dwxx',
        name: '多维信息',
        onClick: (data: any) => {
          console.log(data);
        },
      },
      {
        type: 'link',
        value: 'xwgj',
        name: '行为轨迹',
        onClick: (data: any) => {
          console.log(data);
        },
      },
      {
        type: 'link',
        value: 'sfrh',
        name: '身份融合',
        onClick: (data: any) => {
          console.log(data);
        },
      },
      {
        type: 'link',
        value: 'gxfx',
        name: '关系分析',
        onClick: (data: any) => {
          console.log(data);
        },
      },
      {
        type: 'link',
        value: 'rylj',
        name: '人员劣迹',
        onClick: (data: any) => {
          console.log(data);
        },
      },
    ],
  },
  topButton: [
    {
      value: 'yjbk',
      name: '一键布控',
      onClick: (data: any) => {
        console.log(data);
      },
    },
    {
      value: 'ypfx',
      name: '研判分析',
      onClick: (data: any) => {
        console.log(data);
      },
    },
  ],
};