Skip to content

B
biz.qingxiao.com
Commit 17c60bda authored by wangxuelai's avatar wangxuelai
Browse files
Options

'最新代码提交'

parent c59d928b
Hide whitespace changes
Inline Side-by-side
Showing with 585 additions and 5 deletions
index.html
View file @ 17c60bda
......@@ -11,8 +11,8 @@
<script src="js/console-polyfill.js"></script>
<![endif]-->
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XSZBZ-5LHCV-5I2P7-UQHPW-6456F-JBB3B"></script>
<link href="https://cdn.img.shangjiadao.cn/qingxiao/biz/dist/index.css?1569728171561" rel="stylesheet">
<script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/lib/vendor.dll.js?3" charset="utf-8"></script>
<link href="/dist/index.css?1570599447690" rel="stylesheet">
<script src="/lib/vendor.dll.js?3" charset="utf-8"></script>
<script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/console-polyfill.js?3" charset="utf-8"></script>
<script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es6-shim.min.js?3" charset="utf-8"></script>
<script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es5-shim.js?3" charset="utf-8"></script>
......@@ -24,7 +24,7 @@
<body>
<div id="root"></div>
<script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/dist/index.js?1569728171561" charset="utf-8"></script>
<script src="/dist/index.js?1570522299447691" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
src/models/clockmgt.js
View file @ 17c60bda
......@@ -170,6 +170,8 @@ export default {
tempUpdateShow: false,
tempsaveLoading: false,
tempScoreArr: [],
batchCommentImgObj: [{"src":"clock-test/consumer/111/2019-10-08/678683c05f05a35745222b8afbf679a9.jpg","size":119234,"type":"image","status":"fullfilled","id":"595"},{"src":"clock-test/member/12439/2019-07-04/407c79a7ae3de42d0252dea0fbade06a.jpg","size":254584,"type":"image","status":"fullfilled","id":"595"},{"src":"clock-test/consumer/111/2019-10-08/97d4d3af260e0b5065dfba3eaceca1cc.jpg","size":641062,"type":"image","status":"fullfilled","id":"595"},{"src":"clock-test/consumer/111/2019-10-08/016db47792b4b776b2f9500998802f4a.jpg","size":260486,"type":"image","status":"fullfilled","id":"596"},{"src":"clock-test/consumer/111/2019-10-08/06b1af93010b9cb28d393ca7c767e644.jpg","size":270145,"type":"image","status":"fullfilled","id":"596"},{"src":"clock-test/consumer/111/2019-10-08/5b9b2a440eb8690c9a86dfeab0daff70.jpg","size":63462,"type":"image","status":"fullfilled","id":"596"},{"src":"clock-test/consumer/111/2019-10-08/9c2681fac43ff5ec56576e0783e90a26.jpg","size":111134,"type":"image","status":"fullfilled","id":"596"}], // eslint-disable-line
currentdrawImage: '',
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
......@@ -549,7 +551,25 @@ export default {
});
},
* startBatchComment({ payload }, { call, put, select }) {
const { selectClockObj, batchCommentParams, tempArr } = yield select(state => state.clockmgt);
const {
selectClockObj, batchCommentParams, tempArr,
} = yield select(state => state.clockmgt);
const batchCommentImgObj = [];
for (const i in selectClockObj) {
if (selectClockObj[i].video) {
const images = JSON.parse(selectClockObj[i].video).filter(ele => ele.type == 'image');
images.forEach((ele) => {
const newEle = ele;
newEle.id = i;
batchCommentImgObj.push(newEle);
});
}
// batchCommentImgObj[i] = images;
}
let currentdrawImage = '';
if (batchCommentImgObj.length > 0) {
currentdrawImage = batchCommentImgObj[0].src;
}
const newTempScoreArr = JSON.parse(JSON.stringify(tempArr));
batchCommentParams.common = {
flag: '',
......@@ -576,9 +596,12 @@ export default {
message.error('请勾选需要点评的打卡内容', 1);
return;
}
console.log(JSON.stringify(batchCommentImgObj), 'batchCommentImgObj');
yield put({
type: 'updateState',
payload: {
currentdrawImage,
batchCommentImgObj: [...batchCommentImgObj],
tempScoreArr: [...newTempScoreArr],
batchcommentDrawerShow: true,
},
......
src/pages/clockmgt/drawimg.js 0 → 100644
View file @ 17c60bda
import React from 'react';
import { connect } from 'dva';
import { Modal, Popover, Spin } from 'antd';
import pageStyle from './drawimg.less';
import { timeCompare, imagify, videoPoster, voiceTimeFormat, audioorigin, formatTextB } from '../../utils/index';
class DrawImg extends React.Component {
constructor(props) {
super(props);
this.state = {
// date: '',
currentDrawImage: '',
canvasMaxWidth: 900,
canvasMaxHeight: 500,
batchCommentImgObj: [],
canvasSizeObj: {
width: 0,
height: 0,
},
action: 0, // 操作的动作 1 框选 2 圈选 3 箭头 4 涂鸦 5 文字 6 撤销 7 放大 8 缩小
imageLoading: false,
rectColor: '#F4330F',
circleColor: '#F4330F',
arrowColor: '#F4330F',
drawColor: '#F4330F',
textColor: '#F4330F',
};
}
componentDidMount() { // 挂载
const { batchCommentImgObj } = this.props;
const currentDrawImage = (batchCommentImgObj[0] && batchCommentImgObj[0].src) || '';
this.setState({
currentDrawImage,
batchCommentImgObj,
});
this.caculateImgWidth(currentDrawImage);
}
caculateImgWidth = (img) => {
const that = this;
if (img) {
const { canvasMaxHeight, canvasMaxWidth, imageLoading } = this.state;
this.setState({
imageLoading: true,
});
const currentImage = imagify(img);
const imgobj = new Image();
let imageWidth = 0;
let imageHeight = 0;
imgobj.src = currentImage;
imgobj.onload = () => {
imageHeight = imgobj.height;
imageWidth = imgobj.width;
if (imageHeight < canvasMaxHeight && imageWidth < canvasMaxWidth) {
that.setState({
canvasSizeObj: {
width: imageWidth,
height: imageHeight,
},
});
} else {
const compareRate = (canvasMaxWidth / canvasMaxHeight).toFixed(2);
const imageRate = (imageWidth / imageHeight).toFixed(2);
let canvasWidth = 0;
let canvasHeight = 0;
if (compareRate > imageRate) {
canvasHeight = canvasMaxHeight;
canvasWidth = canvasHeight * imageRate;
} else if (compareRate == imageRate) {
canvasWidth = canvasMaxWidth;
canvasHeight = canvasMaxHeight;
} else {
canvasWidth = canvasMaxWidth;
canvasHeight = canvasWidth / imageRate;
}
that.setState({
canvasSizeObj: {
width: canvasWidth,
height: canvasHeight,
},
});
}
this.setState({
imageLoading: false,
});
};
}
}
componentWillUnmount() { // 卸载
}
doaction = (action) => {
if (action == this.state.action) {
this.setState({
action: 0,
});
return;
}
switch (action) {
case 1:
case 2:
case 3:
case 4:
case 5:
this.setState({
action,
});
break;
case 6:
case 7:
case 8:
default:
break;
}
}
chooseImg = (obj) => {
const { src } = obj;
const { currentDrawImage } = this.state;
if (currentDrawImage == src) {
return;
}
this.setState({
currentDrawImage: src,
});
this.caculateImgWidth(src);
}
chooseActionColor = (color) => {
const { action } = this.state;
// rectColor: '#F4330F',
// circleColor: '#F4330F',
// arrowColor: '#F4330F',
// drawColor: '#F4330F',
// textColor: '#F4330F',
switch (action) {
case 1:
this.setState({
rectColor: color,
});
break;
case 2:
this.setState({
circleColor: color,
});
break;
case 3:
this.setState({
arrowColor: color,
});
break;
case 4:
this.setState({
drawColor: color,
});
break;
case 5:
this.setState({
textColor: color,
});
break;
default:
break;
}
}
render() {
const {
currentDrawImage,
canvasSizeObj,
batchCommentImgObj,
action,
imageLoading,
rectColor,
circleColor,
arrowColor,
drawColor,
textColor,
} = this.state;
let trueColor = '#F4330F';
switch (action) {
case 1:
trueColor = rectColor;
break;
case 2:
trueColor = circleColor;
break;
case 3:
trueColor = arrowColor;
break;
case 4:
trueColor = drawColor;
break;
case 5:
trueColor = textColor;
break;
default:
break;
}
const colorChooseBox = (
<div className={pageStyle.colorBox}>
<div onClick={() => this.chooseActionColor('#F4330F')} className={`${pageStyle.coloritem} ${pageStyle.redcoloritem} ${trueColor == '#F4330F' ? pageStyle.coloritemselected : ''}`}></div>
<div onClick={() => this.chooseActionColor('#FEBB46')} className={`${pageStyle.coloritem} ${pageStyle.yellowcoloritem} ${trueColor == '#FEBB46' ? pageStyle.coloritemselected : ''}`}></div>
<div onClick={() => this.chooseActionColor('#01B10A')} className={`${pageStyle.coloritem} ${pageStyle.greencoloritem} ${trueColor == '#01B10A' ? pageStyle.coloritemselected : ''}`}></div>
<div onClick={() => this.chooseActionColor('#1B7AFC')} className={`${pageStyle.coloritem} ${pageStyle.bluecoloritem} ${trueColor == '#1B7AFC' ? pageStyle.coloritemselected : ''}`}></div>
<div onClick={() => this.chooseActionColor('#945AFC')} className={`${pageStyle.coloritem} ${pageStyle.purplecoloritem} ${trueColor == '#945AFC' ? pageStyle.coloritemselected : ''}`}></div>
</div>
);
return (
<Modal
title="图片标记"
visible
width={1100}
height={700}
footer={null}
wrapClassName={pageStyle.drawModalBox}
bodyStyle={{ padding: 0 }}
>
<div className={pageStyle.drawModalContent} style={{ width: `${canvasSizeObj.width}px`, height: `${canvasSizeObj.height}px` }}>
<img alt="标记" src={imagify(currentDrawImage)} style={{ width: `${canvasSizeObj.width}px`, height: `${canvasSizeObj.height}px` }} className={pageStyle.drawimg} />
<canvas className={pageStyle.drawimgcanvas} id="drawimgcanvas" style={{ width: `${canvasSizeObj.width}px`, height: `${canvasSizeObj.height}px` }} />
{imageLoading &&
<div style={{ width: `${canvasSizeObj.width}px`, height: `${canvasSizeObj.height}px` }} className={pageStyle.imageLoading}><Spin size="large" /></div>
}
</div>
<div className={pageStyle.imagegallery}>
{batchCommentImgObj.map(ele => (
<div onClick={() => this.chooseImg(ele)} className={`${pageStyle.imageitembox} ${currentDrawImage == ele.src ? pageStyle.imageitemboxselecter : ''}`}>
<img className={pageStyle.imageitem} alt={ele.src} src={imagify(ele.src)} />
</div>
))}
</div>
<div className={pageStyle.drawoperatebox}>
<Popover content={colorChooseBox} overlayClassName="colorboxpopover" trigger="click" visible={action == 1}>
<div className={`${pageStyle.drawoperateitem} ${pageStyle.hoverdrawoperateitem}`} onClick={() => this.doaction(1)}>
<div className={`${pageStyle.iconbox} ${action == 1 ? pageStyle.iconboxselected : ''}`}>
<div className={pageStyle.rect} />
</div>
<div className={pageStyle.drawactionname}>框选</div>
</div>
</Popover>
<Popover content={colorChooseBox} overlayClassName="colorboxpopover" trigger="click" visible={action == 2}>
<div className={`${pageStyle.drawoperateitem} ${pageStyle.hoverdrawoperateitem}`} onClick={() => this.doaction(2)}>
<div className={`${pageStyle.iconbox} ${action == 2 ? pageStyle.iconboxselected : ''}`}>
<div className={pageStyle.circle} />
</div>
<div className={pageStyle.drawactionname}>圈选</div>
</div>
</Popover>
<Popover content={colorChooseBox} overlayClassName="colorboxpopover" trigger="click" visible={action == 3}>
<div className={`${pageStyle.drawoperateitem} ${pageStyle.hoverdrawoperateitem}`} onClick={() => this.doaction(3)}>
<div className={`${pageStyle.iconbox} ${action == 3 ? pageStyle.iconboxselected : ''}`}>
<div className={pageStyle.arrow} />
</div>
<div className={pageStyle.drawactionname}>箭头</div>
</div>
</Popover>
<Popover content={colorChooseBox} overlayClassName="colorboxpopover" trigger="click" visible={action == 4}>
<div className={`${pageStyle.drawoperateitem} ${pageStyle.hoverdrawoperateitem}`} onClick={() => this.doaction(4)}>
<div className={`${pageStyle.iconbox} ${action == 4 ? pageStyle.iconboxselected : ''}`}>
<div className={pageStyle.draw} />
</div>
<div className={pageStyle.drawactionname}>涂鸦</div>
</div>
</Popover>
<Popover content={colorChooseBox} overlayClassName="colorboxpopover" trigger="click" visible={action == 5}>
<div className={`${pageStyle.drawoperateitem} ${pageStyle.hoverdrawoperateitem}`} onClick={() => this.doaction(5)}>
<div className={`${pageStyle.iconbox} ${action == 5 ? pageStyle.iconboxselected : ''}`}>
<div className={pageStyle.text} />
</div>
<div className={pageStyle.drawactionname}>文字</div>
</div>
</Popover>
<div className={`${pageStyle.drawoperateitem} ${pageStyle.hoverdrawoperateitem}`} onClick={() => this.doaction(6)}>
<div className={`${pageStyle.iconbox} ${action == 6 ? pageStyle.iconboxselected : ''}`}>
<div className={pageStyle.reback} />
</div>
<div className={pageStyle.drawactionname}>撤销</div>
</div>
<div className={`${pageStyle.drawoperateitem} ${pageStyle.hoverdrawoperateitem}`} onClick={() => this.doaction(7)}>
<div className={`${pageStyle.iconbox} ${action == 7 ? pageStyle.iconboxselected : ''}`}>
<div className={pageStyle.tobig} />
</div>
<div className={pageStyle.drawactionname}>放大</div>
</div>
<div className={`${pageStyle.drawoperateitem} ${pageStyle.hoverdrawoperateitem}`} onClick={() => this.doaction(8)}>
<div className={`${pageStyle.iconbox} ${action == 8 ? pageStyle.iconboxselected : ''}`}>
<div className={pageStyle.tosmall} />
</div>
<div className={pageStyle.drawactionname}>缩小</div>
</div>
<div className={pageStyle.commonbtnbox}>
<div className={pageStyle.skipdrawbtn}>跳过涂鸦<br />直接批量打分</div>
<div className={pageStyle.drawcompletebtn}>完成</div>
</div>
</div>
</Modal>
);
}
}
DrawImg.propTypes = {
};
export default connect()(DrawImg);
src/pages/clockmgt/drawimg.less 0 → 100644
View file @ 17c60bda
@import '../../less/variables.less';
.drawModalBox {
.drawModalContent {
position: relative;
margin: 0 auto 40px;
.drawimg {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.drawimgcanvas {
position: relative;
z-index: 2;
}
.imageLoading {
position: absolute;
left: 0;
top: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0,0,0.5);
}
}
.imagegallery {
display: flex;
align-items: flex-end;
margin-bottom: 24px;
padding-left: 24px;
.imageitembox {
position: relative;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
margin-right: 10px;
cursor: pointer;
.imageitem {
max-width: 64px;
max-height: 64px;
}
&.imageitemboxselecter {
width: 78px;
height: 78px;
.imageitem {
max-width: 78px;
max-height: 78px;
}
}
}
}
.drawoperatebox {
background-color: #414141;
display: flex;
justify-content: space-between;
height: 80px;
padding-left: 24px;
.drawoperateitem {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 38px;
height: 80px;
&.hoverdrawoperateitem:hover {
.iconbox {
background-color: #000000;
&::after {
content: "";
display: block;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-width: 8px;
border-right-width: 8px;
border-top-color: transparent;
border-bottom-color: #000000;
border-left-color: transparent;
border-right-color: transparent;
position: absolute;
top: -10px;
left: 50%;
margin-left: -8px;
}
}
}
cursor: pointer;
.iconbox {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 1px;
position: relative;
&.iconboxselected {
background-color: #000000;
&::after {
content: "";
display: block;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-width: 8px;
border-right-width: 8px;
border-top-color: transparent;
border-bottom-color: #000000;
border-left-color: transparent;
border-right-color: transparent;
position: absolute;
top: -10px;
left: 50%;
margin-left: -8px;
}
}
.rect {
width: 24px;
height: 24px;
background-image: url('@{imagesroot}drawimage/rectunselect.png');
background-size: 100% 100%;
}
.circle {
width: 24px;
height: 24px;
background-image: url('@{imagesroot}drawimage/circleunselect.png');
background-size: 100% 100%;
}
.arrow {
width: 20px;
height: 20px;
background-image: url('@{imagesroot}drawimage/arrowunselect.png');
background-size: 100% 100%;
}
.draw {
width: 20px;
height: 20px;
background-image: url('@{imagesroot}drawimage/drawunselect.png');
background-size: 100% 100%;
}
.text {
width: 20px;
height: 20px;
background-image: url('@{imagesroot}drawimage/textunselect.png');
background-size: 100% 100%;
}
.reback {
width: 20px;
height: 20px;
background-image: url('@{imagesroot}drawimage/rebackunselect.png');
background-size: 100% 100%;
}
.tobig {
width: 20px;
height: 20px;
background-image: url('@{imagesroot}drawimage/tobigunselect.png');
background-size: 100% 100%;
}
.tosmall {
width: 20px;
height: 20px;
background-image: url('@{imagesroot}drawimage/tosmallunselect.png');
background-size: 100% 100%;
}
}
.drawactionname {
color: #DEDEDE;
font-size: 14px;
}
}
.commonbtnbox {
width: 173px;
display: flex;
.skipdrawbtn {
background-color: #D8D8D8;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
width: 98px;
text-align: center;
color: #808080;
font-weight: 500;
cursor: pointer;
}
.drawcompletebtn {
height: 80px;
width: 75px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #1890FF;
letter-spacing: 2px;
cursor: pointer;
}
}
}
}
:global {
.colorboxpopover {
.ant-popover-content {
.ant-popover-arrow {
border-right-color: #414141;
border-bottom-color: #414141;
}
.ant-popover-inner {
background-color: #414141;
}
}
}
}
.Popoverclass {
background-color: red;
}
.colorBox {
display: flex;
.coloritem {
width: 20px;
height: 20px;
border-radius: 2px;
margin-right: 12px;
&.coloritemselected {
border: 2px solid #fff;
}
cursor: pointer;
&.redcoloritem {
background-color: #F4330F;
}
&.yellowcoloritem {
background-color: #FEBB46;
}
&.greencoloritem {
background-color: #01B10A;
}
&.bluecoloritem {
background-color: #1B7AFC;
}
&.purplecoloritem {
background-color: #945AFC;
}
}
}
\ No newline at end of file
src/pages/clockmgt/index.js
View file @ 17c60bda
......@@ -8,6 +8,7 @@ import { pageIn, imagify, timeCompare, videoPoster, voiceTimeFormat, audioorigin
import CommentEditorBox from './commenteditorbox';
import ClockItem from './clockitem';
import ImagePreview from '../../components/ImagePreview';
import DrawImg from './drawimg';
import VideoPlay from '../../components/VideoPlay';
const { TabPane } = Tabs;
const { Option } = Select;
......@@ -668,6 +669,8 @@ class ClockMgt extends React.Component {
copyTempArr,
tempUpdateShow,
tempScoreArr,
// currentdrawImage,
batchCommentImgObj,
} = this.props;
return (
<div className={`${pageStyle.classmgtcontainer} clockmgtcontainer`}>
......@@ -983,6 +986,9 @@ class ClockMgt extends React.Component {
/>
}
<BackTop style={{ right: '10px' }} />
<DrawImg
batchCommentImgObj={batchCommentImgObj}
/>
</div>
);
}
......@@ -1035,6 +1041,8 @@ function mapStateToProps(state) {
copyTempArr,
tempUpdateShow,
tempScoreArr,
currentdrawImage,
batchCommentImgObj,
} = state.clockmgt;
const {
audio,
......@@ -1083,6 +1091,8 @@ function mapStateToProps(state) {
copyTempArr,
tempUpdateShow,
tempScoreArr,
currentdrawImage,
batchCommentImgObj,
};
}
export default connect(mapStateToProps)(ClockMgt);
......
yarn.lock
View file @ 17c60bda
......@@ -2537,7 +2537,7 @@ cli-width@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
clipboard@^2.0.0:
clipboard@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
dependencies:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment