ai-search-piclist v1.0.21

DemoTable

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { PicList } from 'ai-search-piclist';

const multipleData = {
            "highlight":[
                "362330199112138274"
            ],
            "zpList":[

            ],
            "baseInfo":{
                "hjd":"游城乡高坊村163号",
                "jg":"江西省波阳县",
                "jzd":"",
                "lxfs":"15970302955,18270320870",
                "whcd":"小学教育"
            },
            "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"
                        },
                        
                    ],
            "title":{
                "age":"29",
                "hyzk":"未婚",
                "mz":"汉族",
                "xb":"男性",
                "xm":"李刚",
                "zjhm":"362330199112138274"
            },
            "imageList":[
                {
                    "recordType":"face",
                    "identifier":"362330199112138300",
                    "record":{
                        "xm":"姓名",
                        "sfzhm":"身份证号码",
                        "dmyxsd":"99",
                        "gdJd":"高德经度",
                        "gdWd":"高德维度",
                        "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                        "dxwyid":"高德经度",
                        "cxsj":"出现时间",
                        "dz":"地址地址地址地址地址地址地址地址"
                    },
                    "score":0.75
                },
                {
                    "recordType":"face",
                    "identifier":"362330199112138300",
                    "record":{
                        "xm":"姓名",
                        "sfzhm":"身份证号码",
                        "dmyxsd":"99",
                        "gdJd":"高德经度",
                        "gdWd":"高德维度",
                        "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                        "dxwyid":"高德经度",
                        "cxsj":"出现时间",
                        "dz":"地址地址地址地址地址地址地址地址"
                    },
                    "score":0.75
                },
                {
                    "recordType":"face",
                    "identifier":"362330199112138300",
                    "record":{
                        "xm":"姓名",
                        "sfzhm":"身份证号码",
                        "dmyxsd":"99",
                        "gdJd":"高德经度",
                        "gdWd":"高德维度",
                        "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                        "dxwyid":"高德经度",
                        "cxsj":"出现时间",
                        "dz":"地址地址地址地址地址地址地址地址"
                    },
                    "score":0.75
                },
                {
                    "recordType":"face",
                    "identifier":"362330199112138300",
                    "record":{
                        "xm":"姓名",
                        "sfzhm":"身份证号码",
                        "dmyxsd":"99",
                        "gdJd":"高德经度",
                        "gdWd":"高德维度",
                        "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                        "dxwyid":"高德经度",
                        "cxsj":"出现时间",
                        "dz":"地址地址地址地址地址地址地址地址"
                    },
                    "score":0.75
                },
                {
                    "recordType":"face",
                    "identifier":"362330199112138300",
                    "record":{
                        "xm":"姓名",
                        "sfzhm":"身份证号码",
                        "dmyxsd":"99",
                        "gdJd":"高德经度",
                        "gdWd":"高德维度",
                        "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                        "dxwyid":"高德经度",
                        "cxsj":"出现时间",
                        "dz":"地址地址地址地址地址地址地址地址"
                    },
                    "score":0.75
                },
                {
                    "recordType":"face",
                    "identifier":"362330199112138300",
                    "record":{
                        "xm":"姓名",
                        "sfzhm":"身份证号码",
                        "dmyxsd":"99",
                        "gdJd":"高德经度",
                        "gdWd":"高德维度",
                        "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                        "dxwyid":"高德经度",
                        "cxsj":"出现时间",
                        "dz":"地址地址地址地址地址地址地址地址"
                    },
                    "score":0.75
                },
                {
                    "recordType":"face",
                    "identifier":"362330199112138300",
                    "record":{
                        "xm":"姓名",
                        "sfzhm":"身份证号码",
                        "dmyxsd":"99",
                        "gdJd":"高德经度",
                        "gdWd":"高德维度",
                        "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                        "dxwyid":"高德经度",
                        "cxsj":"出现时间",
                        "dz":"地址地址地址地址地址地址地址地址"
                    },
                    "score":0.75
                },
                {
                    "recordType":"face",
                    "identifier":"362330199112138300",
                    "record":{
                        "xm":"姓名",
                        "sfzhm":"身份证号码",
                        "dmyxsd":"99",
                        "gdJd":"高德经度",
                        "gdWd":"高德维度",
                        "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                        "dxwyid":"高德经度",
                        "cxsj":"出现时间",
                        "dz":"地址地址地址地址地址地址地址地址"
                    },
                    "score":0.75
                },
                {
                    "recordType":"face",
                    "identifier":"362330199112138300",
                    "record":{
                        "xm":"姓名",
                        "sfzhm":"身份证号码",
                        "dmyxsd":"99",
                        "gdJd":"高德经度",
                        "gdWd":"高德维度",
                        "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                        "dxwyid":"高德经度",
                        "cxsj":"出现时间",
                        "dz":"地址地址地址地址地址地址地址地址"
                    },
                    "score":0.75
                },
                {
                    "recordType":"face",
                    "identifier":"362330199112138300",
                    "record":{
                        "xm":"姓名",
                        "sfzhm":"身份证号码",
                        "dmyxsd":"99",
                        "gdJd":"高德经度",
                        "gdWd":"高德维度",
                        "ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
                        "dxwyid":"高德经度",
                        "cxsj":"出现时间",
                        "dz":"地址地址地址地址地址地址地址地址"
                    },
                    "score":0.75
                }
            ]
        }

const data = {
            "dataType":"image",
            "highlight":[
                "新疆",
                "男人",
                "戴眼镜",
                "新疆3",
                "男人3",
                "戴眼镜3"
            ],
            "list":[
                {
                    "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.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
                }
            ]
        };

const fields = {
  normal: {
    imgCode: 'ossUrl',
    SimilarityCode: 'dmyxsd',
    nameCode: {
      value: 'xm',
      onClick: () => {
        console.log('456')
      }
    },
    certCode: {
      value: 'sfzhm',
      onClick: () => {
        console.log('123')
      }
    },
    timeCode: 'cxsj',
    addressCode: 'dz',
  },
  multiple: {
    labelCode: 'labels',
    firstCode: 'title',
    picListCode: 'imageList',
    firstPicFields: {
      imgCode: 'ossUrl',
      nameCode: {
        value: 'xm',
        onClick: () => {
          console.log('456')
        }
      },
      certCode: {
        value: 'zjhm',
        onClick: () => {
          console.log('123')
        }
      },
      genderCode: 'xb',
    },
    picListFields: {
      imgCode: 'ossUrl',
      SimilarityCode: 'dmyxsd',
      nameCode: {
        value: 'xm',
        onClick: () => {
          console.log('456')
        }
      },
      certCode: {
        value: 'sfzhm',
        onClick: () => {
          console.log('123')
        }
      },
      timeCode: 'cxsj',
      addressCode: 'dz',
    }
  }
}



class App extends Component {
  render() {
    return (
      <div style={{width: '1000px'}}>
        <PicList moreClick={() => {console.log('123')}} fields={fields.normal} data={data.list} picClick={()=> {console.log('456')}} />
        <PicList moreClick={() => {console.log('123')}} fields={fields.normal} confUrl={'/mock/akDCghOZ1/piclist'} queryBody={{id: 1}} picClick={()=> {console.log('456')}} />
        <PicList
          type='multiple'
          moreClick={() => {console.log('123')}}
          fields={fields.multiple}
          data={multipleData}
          picClick={()=> {console.log('456')}}
        />
        <PicList
          type='multiple'
          moreClick={() => {console.log('123')}}
          fields={fields.multiple}
          confUrl={'/mock/akDCghOZ1/multiplepiclist'}
          queryBody={{id: 1}}
          picClick={()=> {console.log('456')}}
        />
      </div>
    );
  }
}

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

props