Browse Source

二维码

master
wenlele 2 years ago
parent
commit
ec2f907588
  1. 31
      api/app/lib/controllers/projectRegime/projectSituation.js
  2. 3
      api/app/lib/routes/projectRegime/index.js
  3. 3
      api/log/development.log
  4. 12
      web/client/src/sections/projectRegime/actions/projectSituation.js
  5. 91
      web/client/src/sections/projectRegime/components/pointModel.js
  6. 80
      web/client/src/sections/projectRegime/containers/point.js
  7. 86
      web/client/src/sections/projectRegime/containers/qrCode.js
  8. 1
      web/client/src/utils/webapi.js

31
api/app/lib/controllers/projectRegime/projectSituation.js

@ -211,6 +211,36 @@ async function delPosition (ctx, next) {
}
async function qrCodeShow (ctx, next) {
try {
const models = ctx.fs.dc.models;
let userInfo = ctx.fs.api.userInfo;
const { projectId, name } = ctx.query;
let options = {
where: {
qrCode: { $ne: null }
},
}
if (projectId) {
options.where.projectId = projectId
}
if (name) {
options.where.name = { $like: `%${name}%` }
}
let res = await models.Point.findAndCountAll(options)
ctx.status = 200;
ctx.body = res
} catch (error) {
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
ctx.status = 400;
ctx.body = {
"message": "获取二维码列表失败"
}
}
}
module.exports = {
projectList,
@ -219,4 +249,5 @@ module.exports = {
addPosition,
position,
delPosition,
qrCodeShow
}

3
api/app/lib/routes/projectRegime/index.js

@ -22,4 +22,7 @@ module.exports = function (app, router, opts) {
app.fs.api.logAttr['DEL/delPosition/:id'] = { content: '删除点位', visible: false };
router.del('/delPosition/:id', projectSituation.delPosition);
app.fs.api.logAttr['GET/qrCodeShow'] = { content: '获取二维码列表', visible: false };
router.get('/qrCodeShow', projectSituation.qrCodeShow);
}

3
api/log/development.log

@ -3849,3 +3849,6 @@ notNull Violation: project.describe cannot be null
2023-01-16 20:45:57.174 - debug: [FS-LOGGER] Init.
2023-01-16 20:45:57.417 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2023-01-16 20:45:57.418 - info: [FS-AUTH] Inject auth and api mv into router.
2023-01-17 09:24:14.329 - debug: [FS-LOGGER] Init.
2023-01-17 09:24:15.116 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2023-01-17 09:24:15.117 - info: [FS-AUTH] Inject auth and api mv into router.

12
web/client/src/sections/projectRegime/actions/projectSituation.js

@ -76,3 +76,15 @@ export function delPosition (id) {
});
}
export function qrCodeShow (query) {
return (dispatch) => basicAction({
type: 'get',
query,
dispatch,
actionType: 'GET_QR_CODE',
url: ApiTable.qrCodeShow,
msg: { error: '获取二维码列表失败', },
});
}

91
web/client/src/sections/projectRegime/components/pointModel.js

@ -0,0 +1,91 @@
import React, { useState } from 'react';
import { Button, Form, Input, Modal, Select, DatePicker } from 'antd';
const { TextArea } = Input;
import { connect } from 'react-redux';
import Uploads from '$components/Uploads';
import { useEffect } from 'react';
import moment from 'moment';
const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, qrCodeId }) => {
const { projectRegime } = actions
const [form] = Form.useForm();
useEffect(() => {
// console.log(modelData);
}, [])
return (
<Modal
title={modelData.id ? '编辑点位' : '新增点位'}
width={570}
open={true}
onOk={() => {
form.validateFields().then(r => {
dispatch(projectRegime.addPosition({
...r,
id: modelData?.id,
projectId: qrCodeId
})).then(res => {
if (res.success) {
success()
}
})
})
}}
onCancel={() => {
close()
}}
>
<Form
style={{}}
form={form}
labelAlign='right'
labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}
onFinish={r => {
}}
>
<Form.Item label='点位名称' name="name" style={{}}
initialValue={modelData?.name}
rules={[{ required: true, message: '请输入点位名称' },]}
>
<Input placeholder="请输入点位名称" allowClear />
</Form.Item>
<div style={{}}>
{/* /^\d+$|^\d*\.\d+$/g */}
<Form.Item label="所在地区:" labelCol={{ span: 11 }} labelAlign='right' name="longitude" initialValue={modelData?.longitude} style={{ display: 'inline-block', width: 'calc(60% - 30px)', }}
rules={[{ required: true, message: '请输入横坐标', },]}
>
<Input placeholder="经度支持数字" />
</Form.Item>
~
<Form.Item name="latitude" initialValue={modelData?.latitude} style={{ display: 'inline-block', width: 'calc(40% + 15px)', }}
rules={[{ required: true, message: '请输入纵坐标', },]}
>
<Input placeholder="维度支持数字" />
</Form.Item>
</div>
<Form.Item name='describe' label="描述"
initialValue={modelData?.describe}
rules={[{ required: true, message: '请输入描述内容', },]}>
<TextArea />
</Form.Item>
</Form>
</Modal>
);
};
function mapStateToProps (state) {
const { auth, global } = state;
return {
user: auth.user,
actions: global.actions,
};
}
export default connect(mapStateToProps)(ProjectAddModel);

80
web/client/src/sections/projectRegime/containers/point.js

@ -5,7 +5,7 @@ const { TextArea } = Input;
import moment from "moment";
import '../style.less';
import { push } from 'react-router-redux';
import ProjectAddModel from '../components/projectAddModel'
import PointModel from '../components/pointModel'
import { Model } from 'echarts';
@ -28,7 +28,7 @@ const Information = (props) => {
var QRCode = require('qrcode')
const qrCodeId = props?.match?.params?.id
useEffect(() => {
console.log(props?.match?.params?.id);
@ -37,7 +37,7 @@ const Information = (props) => {
const projectList = (obj) => {
const { limit, page } = obj
dispatch(projectRegime.positionList({ limit, page, projectId: props?.match?.params?.id })).then(res => {
dispatch(projectRegime.positionList({ limit, page, projectId: qrCodeId })).then(res => {
// console.log(res)
if (res.success) {
let data = []
@ -194,82 +194,22 @@ const Information = (props) => {
}}
/>
{
<Modal
title={modelData.id ? '编辑点位' : '新增点位'}
width={570}
open={addModel}
onOk={() => {
form.validateFields().then(r => {
dispatch(projectRegime.addPosition({
...r,
id: modelData?.id,
projectId: props?.match?.params?.id
})).then(res => {
if (res.success) {
setAddModel(false)
setModelData({})
setQuery({ limit: 10, page: 0 });
projectList({ limit: 10, page: 0 })
}
})
})
}}
onCancel={() => {
setAddModel(false)
setModelData({})
}}
>
<Form
style={{}}
form={form}
labelAlign='right'
labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}
onFinish={r => {
}}
>
<Form.Item label='点位名称' name="name" style={{}}
initialValue={modelData?.name}
rules={[{ required: true, message: '请输入点位名称' },]}
>
<Input placeholder="请输入点位名称" allowClear />
</Form.Item>
<div style={{}}>
{/* /^\d+$|^\d*\.\d+$/g */}
<Form.Item label="所在地区:" labelCol={{ span: 11 }} labelAlign='right' name="longitude" initialValue={modelData?.longitude} style={{ display: 'inline-block', width: 'calc(60% - 30px)', }}
rules={[{ required: true, message: '请输入横坐标', },]}
>
<Input placeholder="经度支持数字" />
</Form.Item>
~
<Form.Item name="latitude" initialValue={modelData?.latitude} style={{ display: 'inline-block', width: 'calc(40% + 15px)', }}
rules={[{ required: true, message: '请输入纵坐标', },]}
>
<Input placeholder="维度支持数字" />
</Form.Item>
</div>
<Form.Item name='describe' label="描述"
initialValue={modelData?.describe}
rules={[{ required: true, message: '请输入描述内容', },]}>
<TextArea />
</Form.Item>
</Form>
</Modal>
}
{/* {
addModel ?
<ProjectAddModel
firmList={firmList}
<PointModel
modelData={modelData}
qrCodeId={qrCodeId}
close={() => {
setAddModel(false)
setModelData({})
}}
success={() => {
setAddModel(false)
setModelData({})
setQuery({ limit: 10, page: 0 });
projectList({ limit: 10, page: 0 })
}}
/> : ""
} */}
}
</>
)
}

86
web/client/src/sections/projectRegime/containers/qrCode.js

@ -5,6 +5,7 @@ import moment from "moment";
import '../style.less';
import ProjectAddModel from '../components/projectAddModel'
import { Model } from 'echarts';
import { login } from '../../auth/actions/auth';
const QrCode = (props) => {
const { dispatch, actions, user, loading } = props
@ -28,44 +29,41 @@ const QrCode = (props) => {
setFirmList(res.payload.data?.rows?.map(v => ({ value: v.id, label: v.name })))
}
})
projectList({})
}, [])
const projectList = (obj) => {
const { limit, page, companyId, name, type } = obj
dispatch(projectRegime.getProjectList({ limit, page, companyId, name, type })).then(res => {
// console.log(res)
const { projectId, name } = obj
dispatch(projectRegime.qrCodeShow({ projectId, name })).then(res => {
if (res.success) {
settableList(res.payload.data?.rows?.map(v => ({ ...v, key: v.id })))
setLimits(res.payload.data?.count)
settableList(res.payload.data?.rows)
}
})
}
console.log(firmList);
return (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 10px' }}>
<Form
style={{ display: 'flex', }}
onFinish={r => {
projectList(r)
setSearch(r)
}}
>
<Form.Item
label='所属公司'
name="companyId"
style={{ marginRight: 16, minWidth: 180 }}
initialValue={firmList[0]?.name}
label='结构物名称'
name="projectId"
style={{ marginRight: 16, width: 240 }}
// initialValue={firmList[0]?.name}
>
<Select allowClear placeholder="全部" options={firmList} />
<Select allowClear placeholder="请选择结构物名称" options={firmList} />
</Form.Item>
<Form.Item
label='项目名称'
label='点位名称'
name="name"
style={{ marginRight: 16, minWidth: 180 }}
style={{ marginRight: 16, width: 260 }}
>
<Input placeholder="请输入项目名称" allowClear />
<Input placeholder="请输入点位名称" allowClear />
</Form.Item>
<Form.Item wrapperCol={{}}>
<Button type="primary" htmlType="submit">
@ -73,10 +71,58 @@ const QrCode = (props) => {
</Button>
</Form.Item>
</Form>
<Button onClick={() => {
console.log(45513);
setAddModel(true)
}}>新建项目</Button>
<div >
{
tableList?.map(v => {
return <div key={v.name + v.id}
style={{ display: 'inline-block', margin: '0 10px 10px 0', border: '1px solid #3c383824' }} >
<div style={{
display: 'flex', flexDirection: 'column', padding: '6px 0',
marginLeft: 20, width: 220, borderBottom: '1px solid #3c383824'
}}>
<span>结构物名称{firmList?.filter(u => u.value == v.projectId)[0]?.label}</span>
<span>结构物名称{v.name}</span>
</div>
<img src={v.qrCode} style={{ display: 'inline-block', width: 260 }} />
<div style={{
width: 260, height: 60, background: '#e1d4d42e', display: 'flex',
justifyContent: 'center', alignItems: 'center', borderTop: '1px solid #3c383824'
}}>
{/* <a href={`${v.qrCode + '?filename=' + encodeURIComponent(v.name)}.png`}> */}
<Button type="primary" onClick={() => {
const aa = (v) => {
const img = new Image(),
canvas = $('.canas'),
ctx = canvas[0].getContext('2d')
img.crossOrigin = 'anonymous'
img.onload = function () {
const w = 460, h = 490
canvas.attr({ width: w, height: h })
ctx.drawImage(img, 0, 0)
ctx.beginPath()
ctx.font = 'dcscsdcsd'
ctx.fillStyle = '#000'
ctx.fillText('5315', w, h)
ctx.closePath()
const save_link = document.createElement('a')
save_link.href = canvas[0].toDataURl('image/png')
save_link.download = 'dcscds.png'
document.body.appendChild(save_link)
save_link.click()
save_link.remove()
}
img.src = v
}
aa(v.qrCode)
}}>下载二维码</Button>
{/* </a> */}
</div>
</div>
}
)
}
</div>
</>

1
web/client/src/utils/webapi.js

@ -97,6 +97,7 @@ export const ApiTable = {
//点位
position: 'position',
delPosition: 'delPosition/{id}',
qrCodeShow: 'qrCodeShow',
//视频接入配置
siteList: 'siteList',

Loading…
Cancel
Save