source/src/js/components/searchAlarm.js

import React from 'react';
import '../../css/style.css'
import '../../../config';
import axios from "axios"; //导入axios
import JSZip from 'jszip';
import saveAs from 'file-saver';
import { Row, Col, DatePicker, Checkbox, Pagination, Button, Modal } from 'antd';
const { RangePicker } = DatePicker;
let plainOptions = []
class SearchAlarm extends React.Component {
	constructor(props) {
		super(props);
        this.state={
           startTime : '',
		   endTime : '',
		   
		   currentPage: 1,
		   totalPage:1,
		   defaultPageSize:28,
		   data:[],
		   
		   indeterminate: false,
		   checkAll: false,
		   checkedList: [],
		   
		   couldClick:true,
		   
		   previewVisible: false,
			previewImage: '',
			previewTitle: '',
        };
    }
	
	// 时间
	onTimeChange = (value,dateString) => {
	  let that = this;
	  this.setState({
		  startTime:dateString[0],
		  endTime:dateString[1]
	  },function(){
		  console.log(that.state.startTime)
		  console.log(that.state.endTime)
	  })
	}
	
	onOk = (value) => {
	  // 开始查询【日期选择】
	  let that = this
	  this.setState({
		  couldClick:false
	  },function(){
		  that.queryImg()
	  })
	}
	queryImg = () =>{
	    let that = this
		plainOptions = []
		axios.post(global.constants.commonUrl+'/syImgMs/queryImg', 
		{
		  'request':'queryImg',
		  'reqInfo':{
			  'dateTimeS':this.state.startTime,
			  'dateTimeE':this.state.endTime,
			  'curPage':this.state.currentPage,
			  'pageNum':this.state.defaultPageSize
		  }
		})
		.then(function (response) {
			var resList = response['data']['resInfo']['imgList']
			that.setState({
			  data:[],
			  indeterminate: false,
			  checkAll: false,
			  checkedList: [],
			  totalPage: response['data']['resInfo']['totalPages']
			});
			that.getImgData(resList,0)
		})
		.catch(function (error) {
			//console.log(error);
		});
	}
	getImgData = (resList, currI) =>{
		var that = this
		if(currI == resList.length){
			that.setState({
			    couldClick:true
			})
			return;
		}
		else{
			axios.post(global.constants.commonUrl+'/syImgMs/getImgData', 
			{
			  'request':'getImgData',
			  'reqInfo':{
				  'imgId':resList[currI]['id']
			  }
			})
			.then(function (response) {
				var nowData = response['data']['resInfo']
				var stateData = that.state.data
				stateData.push({
					'id': nowData['id'],
					'name': nowData['name'],
					'time': nowData['time'],
					'ext': nowData['ext'],
					'data': nowData['data']
				})
				that.setState({
				  data:stateData
				});
				plainOptions.push(nowData['id'])
				that.getImgData(resList, currI+1)
			})
			.catch(function (error) {
				//console.log(error);
			});
		}
	}
	
	// 下载
	onCheckBoxChange =  checkedList => {
		this.setState({
			checkedList,
			indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
			checkAll: checkedList.length === plainOptions.length,
		});
	};
	onChange = checkedList => {
		this.setState({
			checkedList,
			indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
			checkAll: checkedList.length === plainOptions.length,
		});
	};
	onCheckAllChange = e => {
		let that = this
		this.setState({
			checkedList: e.target.checked ? plainOptions : [],
			indeterminate: false,
			checkAll: e.target.checked,
		},function(){
			console.log(that.state.checkedList)
		});
	};
	clickBtn = e =>{
		console.log(this.state.checkedList)
		var checkedList = this.state.checkedList
		var data = this.state.data
		var zip = new JSZip();
		for(var i=0;i<checkedList.length;i++){
			for(var j=0;j<data.length;j++){
				if(checkedList[i] == data[j]['id']){
					var imgUrl	= 'data:image/' + data[j]['ext'] + ';base64,'+ data[j]['data']
					var img = zip.folder("images"); 
					img.file(data[j]['name'], data[j]['data'], {base64: true});
					break;
				}		
			}
		}
		zip.generateAsync({type:"blob"})
		.then(function(content) {
			saveAs(content, "pictures.zip");
		});
	}
	
	// 页码
	onPageChange = page => {
		// 更新新页数据 后端交互
		let that = this
		if(that.state.couldClick){
			that.setState({
			  currentPage: page
			},function(){
				that.queryImg()
			});
		}
    };
	
	
	// 图片放大
	handleCancel = () => this.setState({ previewVisible: false });
	handlePreview = (e) => {
		  this.setState({
		    previewImage: e.target.src,
		    previewVisible: true,
		    previewTitle:  e.target.name,
		  });
		  
		  
	};
    render() {
		let { data, currentPage, totalPage, defaultPageSize, previewVisible, previewImage, previewTitle } = this.state
		let that = this
		
        return (
			<div style={{
				width:'100%',
				position:'relative'
			}}> 
				<div style={{
					padding:'20px 0',
				}}>
					<RangePicker
					  showTime={{ format: 'HH:mm' }}
					  format="YYYY-MM-DD HH:mm"
					  onChange={this.onTimeChange}
					  onOk={this.onOk}
					/>
					    <Checkbox
							indeterminate={this.state.indeterminate}
							onChange={this.onCheckAllChange}
							checked={this.state.checkAll}
							style={{
								margin:'0 20px',
								color:'white'
							}}
					    >
						   Check all
					    </Checkbox>
					    <Button type="primary" onClick={this.clickBtn} style={{
							margin:'0 20px'
						}}>downLoad</Button>
				</div>
				<div style={{
					height:'calc(100% - 105px)',
					top:'80px',
					width:'calc(100% - 20px)',
					margin:'0 10px'
				}}>					
					{
						data.length==0?null:
							<Checkbox.Group style={{ width: '100%' }} onChange={that.onCheckBoxChange} value={this.state.checkedList}>
								{
									data.map((item)=>{
									//console.log(item)
									return  <div key={item.id} style={{ width: 249, height:190, border:'1px solid rgba(255, 255, 255, 0.3)', margin:'10px', float:'left', position:'relative'}}>
											   <img style={{width:'100%', height:'140px'}}
													onClick = {this.handlePreview}
													name = {item.name}
											   src={
												   'data:image/' + item['ext'] + ';base64,'+ item['data']
											   }/>
											    <div style={{
													height:'50px',
													display:'flex',
													flexDirection:'column',
													color:'white',
													justifyContent:'center',
													alignItems:'center'
												}}>
													<span> 时间 </span>
													<span> {item.time} </span>
											    </div>
											  
											   <Checkbox style={{
												   position:'absolute',
												   top:'-8px',
												   right:'-8px'
											   }} value={item.id} defaultChecked ></Checkbox>
											</div>
									})
								}
							</Checkbox.Group>
					}
				</div>
				<Pagination hideOnSinglePage={true} showTitle={false} current={currentPage} onChange={this.onPageChange} pageSize={defaultPageSize} total={totalPage*defaultPageSize} />
				
				
				<Modal
				  visible={previewVisible}
				  title={previewTitle}
				  footer={null}
				  onCancel={this.handleCancel}
				>
				  <img alt="example" style={{ width: '100%' }} src={previewImage} />
				</Modal>
			</div>
        );
    }
};
export default SearchAlarm