新：切页要求重新加载

Yang Xiaoxiao
1 parent 51d94662
Showing 3 changed files with 74 additions and 62 deletions
show/src/bundle.js
source/src/bundle.js
source/src/js/components/searchAlarm.js
@@ -9,29 +9,31 @@ import { Row, Col, DatePicker, Checkbox, Pagination, Button, Modal } from &#39;antd&#39;
 const { RangePicker } = DatePicker;
  
 let plainOptions = []
+
+// 20200604该需求 需要翻页删所有数据【但！获得一张图片时间过久！超过10秒，所以加以下变量】
+let querList0604_ = []
+
 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: '',
+					 endTime : '',
+					 
+					 currentPage: 1,
+					 totalPage:1,
+					 defaultPageSize:28,
+					 data:[],
+					 
+					 indeterminate: false,
+					 checkAll: false,
+					 checkedList: [],
+					 
+					 previewVisible: false,
+					 previewImage: '',
+					 previewTitle: ''
         };
-    }
+  }
  
 	// 时间
 	onTimeChange = (value,dateString) => {
@@ -48,15 +50,18 @@ class SearchAlarm extends React.Component {
 	onOk = (value) => {
 	  // 开始查询【日期选择】
 	  let that = this
-	  this.setState({
-		  couldClick:false
-	  },function(){
-		  that.queryImg()
-	  })
+		
+		that.setState({
+			data:[]
+		},function(){
+			that.queryImg()
+		})
+		
 	}
 	queryImg = () =>{
-	    let that = this
+	  let that = this
 		plainOptions = []
+		querList0604_ = []
 		axios.post(global.constants.commonUrl+'/syImgMs/queryImg', 
 		{
 		  'request':'queryImg',
@@ -69,12 +74,14 @@ class SearchAlarm extends React.Component {
 		})
 		.then(function (response) {
 			var resList = response['data']['resInfo']['imgList']
+			querList0604_ = response['data']['resInfo']['imgList']
+
 			that.setState({
 			  data:[],
 			  indeterminate: false,
 			  checkAll: false,
 			  checkedList: [],
-			  totalPage: response['data']['resInfo']['totalPages']
+			  totalPage: response['data']['resInfo']['totalPages'],
 			});
 			that.getImgData(resList,0)
 		})
@@ -83,13 +90,11 @@ class SearchAlarm extends React.Component {
 		});
 	}
 	getImgData = (resList, currI) =>{
+		console.log(querList0604_)
+
 		var that = this
-		if(currI == resList.length){
-			that.setState({
-			    couldClick:true
-			})
+		if(currI == resList.length)
 			return;
-		}
 		else{
 			axios.post(global.constants.commonUrl+'/syImgMs/getImgData', 
 			{
@@ -99,20 +104,29 @@ class SearchAlarm extends React.Component {
 			  }
 			})
 			.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)
+				console.log(querList0604_)
+				console.log(response)
+					var nowData = response['data']['resInfo']
+					var stateData = that.state.data
+					
+					//0604防止旧查询旧数据出现 需验证querList0604_ 此次得来的图片id应该在querList0604_中，querList0604_始终保持最新查询所得的数据列表
+					for(var i=0;i<querList0604_.length;i++){
+						if(querList0604_[i]['id'] == nowData['id']){
+							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)
+							break;
+						}
+					}
 			})
 			.catch(function (error) {
 				//console.log(error);
@@ -171,14 +185,14 @@ class SearchAlarm extends React.Component {
 	onPageChange = page => {
 		// 更新新页数据 后端交互
 		let that = this
-		if(that.state.couldClick){
-			that.setState({
-			  currentPage: page
-			},function(){
-				that.queryImg()
-			});
-		}
-    };
+
+		that.setState({
+			currentPage: page,
+			data:[]
+		},function(){
+			that.queryImg()
+		});
+  };
  
  
 	// 图片放大
@@ -189,10 +203,8 @@ class SearchAlarm extends React.Component {
 		    previewVisible: true,
 		    previewTitle:  e.target.name,
 		  });
-		  
-		  
 	};
-    render() {
+  render() {
 		let { data, currentPage, totalPage, defaultPageSize, previewVisible, previewImage, previewTitle } = this.state
 		let that = this
  
@@ -241,9 +253,9 @@ class SearchAlarm extends React.Component {
 											   <img style={{width:'100%', height:'140px'}}
 													onClick = {this.handlePreview}
 													name = {item.name}
-											   src={
-												   'data:image/' + item['ext'] + ';base64,'+ item['data']
-											   }/>
+													src={
+														 'data:image/' + item['ext'] + ';base64,'+ item['data']
+													}/>
 											    <div style={{
 													height:'50px',
 													display:'flex',