ai-search-picdetail
v1.0.9
Published
图片详情轮播图
Downloads
10
Readme
DemoTable
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { PicDetail } from 'ai-search-picdetail';
import { data, fields, infoData, infoFields, changeData } from './dataSource';
class App extends Component {
render() {
return (
<div>
<PicDetail fields={fields} data={data.imageList} dataConfig={changeData} showIndex={2} />
<PicDetail fields={infoFields} data={infoData} showIndex={2} />
<PicDetail fields={fields} dataConfig={changeData} confUrl={'/mock/akDCghOZ1/picdetail'} queryBody={{id: 1}} />
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);props
| 参数 | 类型 | 说明 | 必填 | | :----------- | :--------------: | -----------: | ---- | | data | object | 传入的数据 | 否 | | fields | object |传入的展示数据对应的字段 | 否 | | confUrl | string | 请求数据的url | 否 | | queryBody | object | 请求数据的传参 | 否 | | showIndex | number | 首次展示传入下标的图片 | 否 | | dataConfig | function | 改变数据的函数 | 否 | | maxNum | number | 最大展示数量 | 7 |
data示例
{
"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":[
"流动人口",
"流动人口testtesttesttesttest1",
"流动人口testtesttesttesttest2",
"流动人口testtesttesttesttest3",
"流动人口testtesttesttesttest4",
"凌晨or上午上网2天",
"凌晨or上午上网占比50.00%"
],
"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/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"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/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"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/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"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/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"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/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"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/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
}
]
}config示例
{
imgCode: 'ossUrl',
SimilarityCode: {
value: 'dmyxsd',
label: '相似度',
},
timeCode: {
value: 'cxsj',
label: '抓拍时间',
},
addressCode: {
value: 'dz',
label: '抓拍时间',
}
}