ai-search-piclist
Advanced tools
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);
| 参数 | 类型 | 说明 | 必填 |
|---|---|---|---|
| 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 | 请求数据的传参 | 否 |
FAQs
We found that ai-search-piclist demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.