ai-search-piclist
v1.0.21
Published
图片列表展示组件
Downloads
45
Readme
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
| 参数 | 类型 | 说明 | 必填 | | :----------- | :--------------: | -----------: | ---- | | id | string | DomId | 否 | | type | string | multiple为多个可滑动展示 | 否 | | moreText | string | 右上角按钮文案 | 否 | | moreClick | function | 右上角按钮点击事件 | 否 | | className | string | 传入的类名 | 否 | | data | object | 传入的数据 | 否 | | fields | object |传入的展示数据对应的字段 | 否 | | picClick | function | 图片点击事件 | 否 | | width | string | 图片宽度 | 否 | | height | string | 图片高度 | 否 | | confUrl | string | 请求数据的url | 否 | | queryBody | object | 请求数据的传参 | 否 |