22 changed files with 439 additions and 49 deletions
@ -0,0 +1,52 @@ |
|||||
|
/* eslint-disable*/ |
||||
|
'use strict'; |
||||
|
|
||||
|
module.exports = dc => { |
||||
|
const DataTypes = dc.ORM; |
||||
|
const sequelize = dc.orm; |
||||
|
const CameraRemark = sequelize.define("cameraRemark", { |
||||
|
id: { |
||||
|
type: DataTypes.INTEGER, |
||||
|
allowNull: false, |
||||
|
defaultValue: null, |
||||
|
comment: null, |
||||
|
primaryKey: true, |
||||
|
field: "id", |
||||
|
autoIncrement: true, |
||||
|
unique: "camera_remark_id_uindex" |
||||
|
}, |
||||
|
cameraId: { |
||||
|
type: DataTypes.INTEGER, |
||||
|
allowNull: false, |
||||
|
defaultValue: null, |
||||
|
comment: null, |
||||
|
primaryKey: false, |
||||
|
field: "camera_id", |
||||
|
autoIncrement: false, |
||||
|
references: { |
||||
|
key: "id", |
||||
|
model: "camera" |
||||
|
} |
||||
|
}, |
||||
|
remark: { |
||||
|
type: DataTypes.STRING, |
||||
|
allowNull: false, |
||||
|
defaultValue: null, |
||||
|
comment: null, |
||||
|
primaryKey: false, |
||||
|
field: "remark", |
||||
|
autoIncrement: false |
||||
|
} |
||||
|
}, { |
||||
|
tableName: "camera_remark", |
||||
|
comment: "", |
||||
|
indexes: [] |
||||
|
}); |
||||
|
dc.models.CameraRemark = CameraRemark; |
||||
|
|
||||
|
const Camera = dc.models.Camera; |
||||
|
CameraRemark.belongsTo(Camera, { foreignKey: 'cameraId', targetKey: 'id' }); |
||||
|
Camera.hasMany(CameraRemark, { foreignKey: 'cameraId', sourceKey: 'id' }); |
||||
|
|
||||
|
return CameraRemark; |
||||
|
}; |
||||
Binary file not shown.
@ -0,0 +1,137 @@ |
|||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||
|
import { connect } from "react-redux"; |
||||
|
import { Modal, Spin,Input } from "@douyinfe/semi-ui"; |
||||
|
import TextScroll from "../../../components/textScroll"; |
||||
|
|
||||
|
function remarksModal (props) { |
||||
|
const { |
||||
|
close, |
||||
|
visible, |
||||
|
rowId, |
||||
|
dispatch, |
||||
|
actions |
||||
|
} = props; |
||||
|
const { equipmentWarehouse } = actions; |
||||
|
const [ScrollList, setScrollList] = useState([{num:'01',value:''},{num:'02',value:''},{num:'03',value:''}]); //显示 |
||||
|
const [showScrollList, setShowScrollList] = useState([]); //显示 |
||||
|
const [roll,setroll] = useState(false); |
||||
|
const [showValueNum,setShowValueNum] = useState(0); |
||||
|
const valueNum = useRef(0); |
||||
|
|
||||
|
// useEffect(() => { |
||||
|
// setShowScrollList([ |
||||
|
// '周杰伦7月6日出专辑，请大家多多捧场备注', |
||||
|
// '111111111111111111111111111111111111111111111111111111' |
||||
|
// ]) |
||||
|
// }, []); |
||||
|
|
||||
|
function handleOk () { |
||||
|
//点击弹框确定 右边按钮 |
||||
|
dispatch( |
||||
|
equipmentWarehouse.postCameraRemark({ |
||||
|
cameraId:rowId, |
||||
|
remark:showScrollList |
||||
|
}) |
||||
|
).then((res) => { |
||||
|
close(); |
||||
|
}) |
||||
|
} |
||||
|
function handleAfterClose () { |
||||
|
//在关闭之后 |
||||
|
} |
||||
|
function handleCancel () { |
||||
|
close(); |
||||
|
//点击弹框取消 左边按钮 |
||||
|
} |
||||
|
function onChange(value,num){ |
||||
|
valueNum.current=0 |
||||
|
let myScrollList=ScrollList |
||||
|
myScrollList[num].value=value |
||||
|
setScrollList(myScrollList); |
||||
|
setShowScrollList([value]) |
||||
|
for (let index = 0; index < myScrollList.length; index++) { |
||||
|
if(myScrollList[index].value){ |
||||
|
valueNum.current=valueNum.current+1 |
||||
|
} |
||||
|
} |
||||
|
setShowValueNum(valueNum.current); |
||||
|
} |
||||
|
function onFocus(num){ |
||||
|
setShowScrollList([ScrollList[num].value]) |
||||
|
setroll(true) |
||||
|
} |
||||
|
function onBlur(){ |
||||
|
setShowScrollList([]) |
||||
|
let myScrollList = [] |
||||
|
for (let index = 0; index < ScrollList.length; index++) { |
||||
|
if(ScrollList[index].value){ |
||||
|
myScrollList.push(ScrollList[index].value) |
||||
|
} |
||||
|
} |
||||
|
setShowScrollList(myScrollList) |
||||
|
setroll(false) |
||||
|
} |
||||
|
return ( |
||||
|
<> |
||||
|
<Modal |
||||
|
title="备注管理" |
||||
|
okText="确定" |
||||
|
cancelText="取消" |
||||
|
visible={visible} |
||||
|
onOk={handleOk} |
||||
|
width={763} |
||||
|
afterClose={handleAfterClose} |
||||
|
onCancel={handleCancel} |
||||
|
> |
||||
|
<div style={{margin:"2px 14px 18px 29px",display:'flex'}}> |
||||
|
<div style={{width:394}}> |
||||
|
<div style={{display:'flex'}}> |
||||
|
<div style={{color:'#1859C1',fontWeight: 600}}>请添加备注信息</div> |
||||
|
<div>（{showValueNum}/3）</div> |
||||
|
</div> |
||||
|
<div style={{marginTop:8}}> |
||||
|
{ScrollList.map((item, index) => ( |
||||
|
<div key={index} style={{marginTop:12}}> |
||||
|
<Input |
||||
|
prefix={<div style={{color: 'rgba(0, 0, 0, 0.75)',margin:'0px 12px'}}>{item.num}</div>} |
||||
|
value={item.value} |
||||
|
onChange={(value)=>onChange(value,index)} |
||||
|
onFocus={()=>onFocus(index)} |
||||
|
onBlur={onBlur} |
||||
|
maxLength={25} |
||||
|
showClear></Input> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style={{width:306,marginLeft:20,position: ""}}> |
||||
|
<div style={{ position: "absolute",background:'rgba(0, 0, 0, 0.15)',width:306}}> |
||||
|
<TextScroll content={showScrollList} roll={roll} duration={6} /> |
||||
|
</div> |
||||
|
<video |
||||
|
id="cameraBanner" |
||||
|
autoPlay |
||||
|
loop |
||||
|
muted |
||||
|
style={{ width: 306,height:185, objectFit: "cover", }} |
||||
|
src="/assets/video/remarks.mp4" |
||||
|
type="video/mp4" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Modal> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
function mapStateToProps (state) { |
||||
|
const { auth, global, members, CameraKind, CameraAbility } = state; |
||||
|
return { |
||||
|
loading: members.isRequesting, |
||||
|
user: auth.user, |
||||
|
actions: global.actions, |
||||
|
CameraKind: CameraKind.data || [], |
||||
|
CameraAbility: CameraAbility.data || [], |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(remarksModal); |
||||
Loading…
Reference in new issue