|
|
@ -1,34 +1,22 @@ |
|
|
import React, { useEffect, useState } from 'react'; |
|
|
import React, { useEffect, useState } from 'react'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { Spin, Card, Form, Input, Select, Button, Table, Modal, Popconfirm, Tooltip } from 'antd'; |
|
|
import { Button, Table, Popconfirm } from 'antd'; |
|
|
const { TextArea } = Input; |
|
|
|
|
|
import moment from "moment"; |
|
|
|
|
|
import '../style.less'; |
|
|
import '../style.less'; |
|
|
import { push } from 'react-router-redux'; |
|
|
|
|
|
import PointModel from '../components/pointModel' |
|
|
import PointModel from '../components/pointModel' |
|
|
import { Model } from 'qrcode'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Information = (props) => { |
|
|
const Information = (props) => { |
|
|
const { dispatch, actions, user, loading } = props |
|
|
const { dispatch, actions } = props |
|
|
const { projectRegime } = actions |
|
|
const { projectRegime } = actions |
|
|
const [firmList, setFirmList] = useState([]) |
|
|
|
|
|
const [tableList, settableList] = useState([]) |
|
|
const [tableList, settableList] = useState([]) |
|
|
const [addModel, setAddModel] = useState(false) |
|
|
const [addModel, setAddModel] = useState(false) |
|
|
const [modelData, setModelData] = useState({}) |
|
|
const [modelData, setModelData] = useState({}) |
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }) |
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }) |
|
|
const [limits, setLimits] = useState() |
|
|
const [limits, setLimits] = useState() |
|
|
const [search, setSearch] = useState({}) |
|
|
const [search, setSearch] = useState({}) |
|
|
const [isPicture, setIsPicture] = useState(false) |
|
|
|
|
|
const [pictureUrl, setPictureUrl] = useState() |
|
|
|
|
|
const [companyID, setCompanyId] = useState('') |
|
|
const [companyID, setCompanyId] = useState('') |
|
|
const [select, setSelect] = useState([]) |
|
|
const [select, setSelect] = useState([]) |
|
|
const [selec, setSelec] = useState() |
|
|
const [selec, setSelec] = useState() |
|
|
const [form] = Form.useForm(); |
|
|
const [qrCodeingIds, setQrCodeingIds] = useState(null) |
|
|
|
|
|
|
|
|
var QRCode = require('qrcode') |
|
|
|
|
|
const { createCanvas, loadImage, registerFont } = require('canvas') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const qrCodeId = props?.match?.params?.id |
|
|
const qrCodeId = props?.match?.params?.id |
|
|
|
|
|
|
|
|
@ -53,213 +41,143 @@ const Information = (props) => { |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const createQrCode = (name) => { |
|
|
const columns = [ |
|
|
let url = '' |
|
|
{ |
|
|
QRCode.toDataURL(name, { |
|
|
title: '序号', |
|
|
errorCorrectionLevel: 'low', |
|
|
dataIndex: 'index', |
|
|
type: 'image/png', |
|
|
key: 'index', |
|
|
quality: 0.3, |
|
|
render: (text, record, index) => index + 1 |
|
|
margin: 2, |
|
|
}, { |
|
|
maskPattern: 9, |
|
|
title: '点位名称', |
|
|
width: 400, |
|
|
dataIndex: 'name', |
|
|
color: { |
|
|
key: 'name', |
|
|
dark: "#000000ff", |
|
|
}, { |
|
|
light: "#ffffffff" |
|
|
title: '所在地区', |
|
|
|
|
|
dataIndex: 'position', |
|
|
|
|
|
key: 'position', |
|
|
|
|
|
render: (text, record, index) => { |
|
|
|
|
|
return record.longitude && record.latitude ? <div style={{ width: 100 }}>{record.longitude},{record.latitude}</div> : "--" |
|
|
} |
|
|
} |
|
|
}, function (err, v) { |
|
|
}, { |
|
|
url = v |
|
|
title: '描述', |
|
|
}) |
|
|
dataIndex: 'describe', |
|
|
return url |
|
|
key: 'describe', |
|
|
} |
|
|
render: (text, record, index) => record.describe || '--' |
|
|
|
|
|
}, { |
|
|
// const createQrCode = (name) => {
|
|
|
title: '操作', |
|
|
// const CW = 400, FONTSIZE = 30, FR = 2, CH = CW + FONTSIZE * FR;
|
|
|
dataIndex: 'operation', |
|
|
// let url = ''
|
|
|
key: 'operation', |
|
|
// // QRCode.toFile('F',name,
|
|
|
render: (text, record, index) => { |
|
|
// // {
|
|
|
return ( |
|
|
// // margin: 1,//二维码内边距，默认为4。单位px
|
|
|
<> |
|
|
// // height: CW,//二维码高度
|
|
|
<Button type="link" onClick={() => { |
|
|
// // width: CW,//二维码宽度
|
|
|
setAddModel(true) |
|
|
// // color: {
|
|
|
setModelData(record) |
|
|
// // dark: '#000', //
|
|
|
}}>编辑</Button> |
|
|
// // light: '#fff' //
|
|
|
<Popconfirm |
|
|
// // }
|
|
|
title={<div style={{ width: 184 }}>删除该点位后，与巡检计划关联的点位删除，对应的巡检记录删除，是否确认删除？</div>} |
|
|
// // });
|
|
|
position='topLeft' |
|
|
|
|
|
onConfirm={() => { |
|
|
// QRCode.toDataURL(name, {
|
|
|
dispatch(projectRegime.delPosition(record.id)).then(res => { |
|
|
// errorCorrectionLevel: 'low',
|
|
|
if (res.success) { |
|
|
// type: 'image/png',
|
|
|
if ((limits > 11 && tableList.length > 1) || limits < 11) { |
|
|
// quality: 0.3,
|
|
|
projectList({ ...query, ...search }) |
|
|
// margin: 2,
|
|
|
} else { |
|
|
// maskPattern: 9,
|
|
|
projectList({ limit: query?.limit, page: query?.page - 1, ...search }) |
|
|
// width: 400,
|
|
|
setQuery({ limit: query?.limit, page: query?.page - 1 }); |
|
|
// color: {
|
|
|
} |
|
|
// dark: "#000000ff",
|
|
|
|
|
|
// light: "#ffffffff"
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }, function (err, v) {
|
|
|
|
|
|
// url = v
|
|
|
|
|
|
// })
|
|
|
|
|
|
// // return url
|
|
|
|
|
|
|
|
|
|
|
|
// const canvas = createCanvas(CW, CH)
|
|
|
|
|
|
// const ctx = canvas.getContext('2d')
|
|
|
|
|
|
// ctx.clearRect(0, 0, CW, CH)
|
|
|
|
|
|
// ctx.fillStyle = 'rgba(255,255,255,1)'
|
|
|
|
|
|
// ctx.fillRect(0, 0, CW, CH)
|
|
|
|
|
|
// ctx.fillStyle = 'rgba(0,0,0,1)'
|
|
|
|
|
|
// ctx.font = `${FONTSIZE}px ZiTiQuanWeiJunHei`
|
|
|
|
|
|
// // ctx.font = `700 ${FONTSIZE}px `
|
|
|
|
|
|
// let image = loadImage(url)
|
|
|
|
|
|
// ctx.drawImage(image, 0, 0, CW, CW)
|
|
|
|
|
|
// const text = ctx.measureText(name)
|
|
|
|
|
|
// ctx.fillText(name, (CW - text.width) * 0.5, CH - FONTSIZE)
|
|
|
|
|
|
// canvas.toDataURL('image/png', (err, png) => {
|
|
|
|
|
|
// if (!err) {
|
|
|
|
|
|
// console.log(png);
|
|
|
|
|
|
// }
|
|
|
|
|
|
// })
|
|
|
|
|
|
// return url
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const columns = [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '序号', |
|
|
|
|
|
dataIndex: 'index', |
|
|
|
|
|
key: 'index', |
|
|
|
|
|
render: (text, record, index) => index + 1 |
|
|
|
|
|
}, { |
|
|
|
|
|
title: '点位名称', |
|
|
|
|
|
dataIndex: 'name', |
|
|
|
|
|
key: 'name', |
|
|
|
|
|
}, { |
|
|
|
|
|
title: '所在地区', |
|
|
|
|
|
dataIndex: 'position', |
|
|
|
|
|
key: 'position', |
|
|
|
|
|
render: (text, record, index) => { |
|
|
|
|
|
return record.longitude && record.latitude ? <div style={{ width: 100 }}>{record.longitude},{record.latitude}</div> : "--" |
|
|
|
|
|
} |
|
|
|
|
|
}, { |
|
|
|
|
|
title: '描述', |
|
|
|
|
|
dataIndex: 'describe', |
|
|
|
|
|
key: 'describe', |
|
|
|
|
|
render: (text, record, index) => record.describe || '--' |
|
|
|
|
|
}, { |
|
|
|
|
|
title: '操作', |
|
|
|
|
|
dataIndex: 'operation', |
|
|
|
|
|
key: 'operation', |
|
|
|
|
|
render: (text, record, index) => { |
|
|
|
|
|
return ( |
|
|
|
|
|
<div style={{ width: 224 }}> |
|
|
|
|
|
<Button type="link" onClick={() => { |
|
|
|
|
|
setAddModel(true) |
|
|
|
|
|
setModelData(record) |
|
|
|
|
|
console.log(record); |
|
|
|
|
|
}} |
|
|
|
|
|
|
|
|
|
|
|
>编辑</Button> |
|
|
|
|
|
<Popconfirm |
|
|
|
|
|
title={<div style={{ width: 184 }}>删除该点位后，与巡检计划关联的点位删除，对应的巡检记录删除，是否确认删除？</div>} |
|
|
|
|
|
position='topLeft' |
|
|
|
|
|
onConfirm={() => { |
|
|
|
|
|
dispatch(projectRegime.delPosition(record.id)).then(res => { |
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
if ((limits > 11 && tableList.length > 1) || limits < 11) { |
|
|
|
|
|
projectList({ ...query, ...search }) |
|
|
|
|
|
} else { |
|
|
|
|
|
projectList({ limit: query?.limit, page: query?.page - 1, ...search }) |
|
|
|
|
|
setQuery({ limit: query?.limit, page: query?.page - 1 }); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<Button type="link" danger >删除</Button> |
|
|
|
|
|
</Popconfirm> |
|
|
|
|
|
<Button type="link" onClick={() => { |
|
|
|
|
|
setQrCodeingIds([record.id]) |
|
|
|
|
|
dispatch(projectRegime.addPosition({ |
|
|
|
|
|
qrCode: true, |
|
|
|
|
|
id: record.id, |
|
|
|
|
|
}, true)).then(() => { |
|
|
|
|
|
setQrCodeingIds(null) |
|
|
|
|
|
}) |
|
|
|
|
|
}} loading={qrCodeingIds?.includes(record.id)}>二维码生成</Button> |
|
|
|
|
|
</> |
|
|
|
|
|
) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
<> |
|
|
|
|
|
<img src={selec} /> |
|
|
|
|
|
<div style={{ display: 'flex', marginBottom: 10 }}> |
|
|
|
|
|
<Button type="primary" onClick={() => { |
|
|
|
|
|
setAddModel(true) |
|
|
|
|
|
}}>新建点位</Button> |
|
|
|
|
|
<Button type="primary" style={{ marginLeft: 20 }} onClick={() => { |
|
|
|
|
|
if (select.length) { |
|
|
|
|
|
setQrCodeingIds(select.map(s => s.id)); |
|
|
|
|
|
select?.map((v, i) => { |
|
|
|
|
|
dispatch(projectRegime.addPosition({ |
|
|
|
|
|
qrCode: true, |
|
|
|
|
|
id: v.id, |
|
|
|
|
|
}, true)).then(() => { |
|
|
|
|
|
if (i === select.length - 1) { |
|
|
|
|
|
setQrCodeingIds(null); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
}} disabled={qrCodeingIds?.length}>一键生成二维码</Button> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<Table |
|
|
|
|
|
columns={columns} |
|
|
|
|
|
dataSource={tableList} |
|
|
|
|
|
pagination={{ |
|
|
|
|
|
current: query.page + 1, |
|
|
|
|
|
total: limits, |
|
|
|
|
|
showSizeChanger: true, |
|
|
|
|
|
showQuickJumper: true, |
|
|
|
|
|
pageSizeOptions: [10, 20, 50], |
|
|
|
|
|
showTotal: (total) => { |
|
|
|
|
|
return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / query?.limit)}页，${total}项`}</span> |
|
|
|
|
|
}, |
|
|
|
|
|
onChange: (page, pageSize) => { |
|
|
|
|
|
setQuery({ limit: pageSize, page: page - 1 }); |
|
|
|
|
|
projectList({ limit: pageSize, page: page - 1, ...search, companyId: companyID || search?.companyId }) |
|
|
|
|
|
} |
|
|
|
|
|
}} |
|
|
|
|
|
rowSelection={{ |
|
|
|
|
|
selectedRowKeys: select?.map(v => v.id) || [], |
|
|
|
|
|
onChange: (selectedRowKeys, selectedRows) => { |
|
|
|
|
|
setSelect(selectedRows) |
|
|
|
|
|
console.log(selectedRows); |
|
|
|
|
|
} |
|
|
|
|
|
}} |
|
|
|
|
|
/> |
|
|
|
|
|
{ |
|
|
|
|
|
addModel ? |
|
|
|
|
|
<PointModel |
|
|
|
|
|
modelData={modelData} |
|
|
|
|
|
qrCodeId={qrCodeId} |
|
|
|
|
|
close={() => { |
|
|
|
|
|
setAddModel(false) |
|
|
|
|
|
setModelData({}) |
|
|
}} |
|
|
}} |
|
|
> |
|
|
success={() => { |
|
|
<Button type="link" danger >删除</Button> |
|
|
setAddModel(false) |
|
|
</Popconfirm> |
|
|
setModelData({}) |
|
|
{/* <Button type="link" danger >二维码生成</Button> */} |
|
|
setQuery({ limit: 10, page: 0 }); |
|
|
<Button type="link" onClick={() => { |
|
|
projectList({ limit: 10, page: 0 }) |
|
|
let url = createQrCode('FS' + Date.now() + record.id) |
|
|
}} |
|
|
console.log(url); |
|
|
/> : "" |
|
|
dispatch(projectRegime.addPosition({ |
|
|
} |
|
|
qrCode: url, |
|
|
</> |
|
|
id: record.id, |
|
|
) |
|
|
}, true)) |
|
|
|
|
|
}} >二维码生成</Button> |
|
|
|
|
|
</div> |
|
|
|
|
|
) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
<> |
|
|
|
|
|
<img src={selec} /> |
|
|
|
|
|
|
|
|
|
|
|
<div style={{ display: 'flex', marginBottom: 10 }}> |
|
|
|
|
|
<Button type="primary" onClick={() => { |
|
|
|
|
|
setAddModel(true) |
|
|
|
|
|
}}>新建点位</Button> |
|
|
|
|
|
<Button type="primary" style={{ marginLeft: 20 }} onClick={() => { |
|
|
|
|
|
select?.map(v => { |
|
|
|
|
|
let url = createQrCode('FS' + Date.now() + v.id) |
|
|
|
|
|
console.log(url); |
|
|
|
|
|
dispatch(projectRegime.addPosition({ |
|
|
|
|
|
qrCode: url, |
|
|
|
|
|
id: v.id, |
|
|
|
|
|
}, true)) |
|
|
|
|
|
}) |
|
|
|
|
|
}}>一键生成二维码</Button> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<Table |
|
|
|
|
|
columns={columns} |
|
|
|
|
|
dataSource={tableList} |
|
|
|
|
|
pagination={{ |
|
|
|
|
|
current: query.page + 1, |
|
|
|
|
|
total: limits, |
|
|
|
|
|
showSizeChanger: true, |
|
|
|
|
|
showQuickJumper: true, |
|
|
|
|
|
pageSizeOptions: [10, 20, 50], |
|
|
|
|
|
showTotal: (total) => { |
|
|
|
|
|
return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / query?.limit)}页，${total}项`}</span> |
|
|
|
|
|
}, |
|
|
|
|
|
onChange: (page, pageSize) => { |
|
|
|
|
|
setQuery({ limit: pageSize, page: page - 1 }); |
|
|
|
|
|
projectList({ limit: pageSize, page: page - 1, ...search, companyId: companyID || search?.companyId }) |
|
|
|
|
|
} |
|
|
|
|
|
}} |
|
|
|
|
|
rowSelection={{ |
|
|
|
|
|
selectedRowKeys: select?.map(v => v.id) || [], |
|
|
|
|
|
onChange: (selectedRowKeys, selectedRows) => { |
|
|
|
|
|
setSelect(selectedRows) |
|
|
|
|
|
console.log(selectedRows); |
|
|
|
|
|
} |
|
|
|
|
|
}} |
|
|
|
|
|
/> |
|
|
|
|
|
{ |
|
|
|
|
|
addModel ? |
|
|
|
|
|
<PointModel |
|
|
|
|
|
modelData={modelData} |
|
|
|
|
|
qrCodeId={qrCodeId} |
|
|
|
|
|
close={() => { |
|
|
|
|
|
setAddModel(false) |
|
|
|
|
|
setModelData({}) |
|
|
|
|
|
}} |
|
|
|
|
|
success={() => { |
|
|
|
|
|
setAddModel(false) |
|
|
|
|
|
setModelData({}) |
|
|
|
|
|
setQuery({ limit: 10, page: 0 }); |
|
|
|
|
|
projectList({ limit: 10, page: 0 }) |
|
|
|
|
|
}} |
|
|
|
|
|
/> : "" |
|
|
|
|
|
} |
|
|
|
|
|
</> |
|
|
|
|
|
) |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
function mapStateToProps(state) { |
|
|
const { auth, global } = state; |
|
|
const { auth, global } = state; |
|
|
return { |
|
|
return { |
|
|
user: auth.user, |
|
|
user: auth.user, |
|
|
|
