ai-search-picitem

DemoTable

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { PicItem } from 'ai-search-picitem';
 
const data = {
      "recordType":"face",
      "identifier":"362330199112138300",
      "record":{
          "xm":"沈小雨",
          "sfzhm":"4111121212121313133",
          "dmyxsd":"99",
          "gdJd":"高德经度",
          "gdWd":"高德维度",
          "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
          "dxwyid":"高德经度",
          "cxsj":"2020/08/20 17:01:02",
          "dz":"杭州市杭州市杭州市杭州市杭州市杭州市杭州市杭州市杭州市",
          "highlight":[
              "新疆",
              "男人",
              "戴眼镜",
              "新疆3",
              "男人3",
              "戴眼镜3"
          ]
      },
      "score":0.85
  }
  const normalData = {
                "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                "age":"29",
                "hyzk":"未婚",
                "mz":"汉族",
                "xb":"男性",
                "xm":"李刚",
                "zjhm":"362330199112138274"
          }
  const 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"
    },
  ]
 
  const fields = {
    hlightCode: 'highlight',
    imgCode: 'ossUrl',
    SimilarityCode: 'dmyxsd',
    nameCode: {
      value: 'xm',
      onClick: () => {
        console.log('456')
      }
    },
    certCode: {
      value: 'sfzhm',
      onClick: () => {
        console.log('123')
      }
    },
    timeCode: 'cxsj',
    addressCode: 'dz',
  }
 
  const normalFields = {
    imgCode: 'ossUrl',
    nameCode: {
      value: 'xm',
      onClick: () => {
        console.log('456')
      }
    },
    certCode: {
      value: 'zjhm',
      onClick: () => {
        console.log('123')
      }
    },
    genderCode: 'xb',
  }
 
 
 
class App extends Component {
  render() {
    return (
      <div>
        <PicItem id="picitem" onClick={() => {console.log('789')}} fields={fields} data={data.record} renderTag={<div>123321</div>} index={'01'} dateText='明天'/>
        <PicItem type='normal' labels={labels} onClick={() => {console.log('789')}} fields={normalFields} data={normalData} />
      </div>
    );
  }
}
 
ReactDOM.render((
  <App />
), mountNode);

参数	类型	说明	必填
onClick	function	图片点击事件	是
id	string	domId	否
className	string	类名	否
data	object	传入的数据	是
fields	object	传入的展示数据对应的字段	是
width	string	图片宽度	否
height	string	图片高度	否
renderTag	ReactDom	渲染tag	否
index	string	number	序号
dateText	string	序号旁文案	否
labels	array	标签数据	否