batch_upgrade.vue

<template>
  <div class="innnerBox">
	   <el-col :span="22">
		    <el-form ref="form" label-width="80px" inline>
			  <el-form-item label="运维设备">
				<span class="selectBox">
				   <el-select placeholder="请选择" :popper-append-to-body=false v-model="devSeled">
					 <el-option :value="item.value" :label='item.label' v-for="item in devOpt"></el-option>
					</el-select>
				</span>
			  </el-form-item>
			</el-form>
		</el-col>
		   <el-col :span="2">
			   <div style="margin-bottom: 6px;padding-top: 3px;">
					<el-button type="success" class="block" @click="batchUpdate">批量升级</el-button>
				</div>
		   </el-col>
		  <div  style="">
			  <el-table
			       :data="tableData"
			       height="574"
				   stripe
				   border
			      @selection-change="handleSelectionChange">
			      <el-table-column
			        type="selection"
			        align="center"
			        width="55">
			      </el-table-column>
			       <el-table-column
			         prop="device_name"
			          align="center"
			         label="设备名称">
			       </el-table-column>
			         <el-table-column
			         prop="in_ip"
			          align="center"
			         label="内网IP">
			       </el-table-column>
			       <el-table-column
			         prop="out_ip"
			          align="center"
			         label="外网IP">
			       </el-table-column>
			       <el-table-column
			         prop="software_version"
			          align="center"
			         label="当前版本">
			       </el-table-column>
			       <el-table-column
			         prop="RefinedFeature_text"
					   align="center"
			         label="升级状态">
					 <template slot-scope="scope">
						 <span :style="{ color: scope.row.styleC }" :class="{ 'span-progress': scope.row.spanClass }">{{ scope.row.state }}</span>
						 <strong id="bar" :style="{ width: scope.row.styleW }">{{ scope.row.fileText }}</strong> 
					 </template>
			       </el-table-column>
			       <el-table-column
			        align="center"
			         label="操作">
			         <template slot-scope="scope">
			         	<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false>
			         		<span class="icon-fanxing-xiugai editIcon"   @click="detailFun(scope.$index, scope.row)"></span>
			         	</el-tooltip>
			         </template>
			       </el-table-column>
			  </el-table>
				<div style="margin-top: 28px;">
					<el-pagination
					style="float: right;"
					  background
					  prev-text="上一页"
					  next-text="下一页"
					   :page-sizes="[30, 50, 100, 200]"
					  layout="prev, pager, next,sizes"
					  :current-page="page"
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					  :total="total">
					</el-pagination>
					<div style="clear: both;"></div>
				</div>
		  </div>
		  <el-dialog
		  	title="批量上传"
		  	:visible.sync="addVisible"
		  	width="450px">
		  	<div>
		  		<el-form label-position="left" label-width="120px">
		  			<el-form-item label="添加文件">
		  			<el-upload
		  				ref="upload"
		  				action="uploadUrl"
		  				:http-request="httpRequest"
		  				:multiple=false
						:limit="1"
						:on-exceed="handleExceed"
		  				name="file"
		  				:auto-upload="false">
		  				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
		  				<!-- <div slot="tip" class="el-upload__tip">只能上传视频文件</div> -->
		  			</el-upload>
		  			</el-form-item>
		  		</el-form>
		  	</div>
		  	<span slot="footer" class="dialog-footer">
		  		<el-button @click="addVisible=false">取 消</el-button>
		  		<el-button type="primary" @click="save">上 传</el-button>
		  	</span>
		  </el-dialog>
  </div>
</template>
<script>
	export default {
		data(){
			return{
				uploadUrl:'',
				file:[],
				addVisible:false,
				tableData:[],
				total:0,
				page:1,
				pageSize:30,
				selectcheck:[],
				devOpt:[],
				devSeled:'',
				flag:true,
				updating:false
			}
		},
		components:{},
		mounted(){
			this.getDevs();
		},
		methods:{
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			// 自定义的上传函数
			httpRequest(param) {
				console.log(param)
				if(param.filename) {
					let modalFileExt = param.filename.slice(-7);
					if(modalFileExt !== '.tar.gz') {
						this.$message({
							type: 'warning',
							message: '仅支持"*.tar.gz"文件'
						})
						return false;
					}
				}else{
					this.$message({
						type: 'warning',
						message: '请选择文件'
					})
					return false;
				}
					this.flag = true
					for (let i = 0; i < this.selectcheck.length; i++) {
						const upgradeSoftWare = this.selectcheck[i].upgradeSoftWare;
						let isOk = false
						for (let j = 0; j < upgradeSoftWare.length; j++) {
							const ele = upgradeSoftWare[j];
							let ary =  param.filename.split('_')
							console.log(ele.softWareName==ary[0])
							console.log(ele.platType==ary[1])
							if (ele.platType==ary[1]&&ele.softWareName==ary[0]) {
								isOk = true
								break;
							}
						}
						console.log('isok'+isOk)
						if (!isOk) {
							this.flag = false
							break
						}
					}
					if(flag){
						this.file=[];
					// 一般情况下是在这里创建FormData对象，但我们需要上传多个文件，为避免发送多次请求，因此在这里只进行文件的获取，param可以拿到文件上传的所有信息
						this.file.push(param.file)
					}else{
						this.$alert('该升级包不能应用于所有选中的节点，请重新选择', '提示', {
							confirmButtonText: '确定',
						});
						return false
					}
				
			},
			save(){
				this.$refs.upload.submit(); // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
				// 最重要的就是这段代码
				if(this.flag){
// 						var upData = new FormData() // 首先创建FormData对象
// 							this.file.forEach(function (file) {
// 								upData.append('file', file); // 因为要上传多个文件，所以需要遍历一下才行
// 							upData.append('name', file.name);
// 							upData.append('vchan_type', 'vfile');
// 							upData.append('vchan_refid', new Date().getTime());
// 							})
// 					this.$api.resource.uploadFile(upData,this.devsId).then(res=>{
// 						console.log(res)
// 					})
console.log('上传')
				}
					
				
			},
			handleSelectionChange(obj){
			   this.selectcheck = obj;
			},
			handleSizeChange(val) {
				this.pageSize=val;
				this.getData();
			},
			handleCurrentChange(val) {
				this.page=val;
				this.getData();
			  },
			query(){
				this.getData();
			},
			getDevs(){
				this.$api.resource.devs({}).then(res=>{
					if(res.length > 0) {
						this.devOpt = res.map((v, i) => {
							return {
								value: v.dev_unid,
								label: '运维设备' + (++i)
							}
						});
						this.devSeled = this.devOpt[0].value;
						this.getData();
					} else {
						// this.$message({
						// 	message: '运维为空!',
						// 	type: 'error'
						// })
						console.log('未发现运维!')
						return false;
					}
				})
			},
			getData(){
				this.tableData=[];
				let offset = (this.page - 1) * this.pageSize;
				let search_params = {
					limit: this.pageSize,
					offset: offset,
					is_leaf:0
				}
				this.$api.resource.getDevsName(search_params,this.devSeled
				).then((res)=>{
					this.total=res.total_num;
					this.tableData = res.list_data;
						this.tableData.forEach(info => {
							info.styleC = '#fff';	// 升级状态文字颜色
							info.spanClass = false;	// 升级状态文字class
							info.state = '暂无';	// 升级状态文字
							info.styleW = '0%';	// 升级状态进度条宽度
							info.fileText = '';	// 升级状态进度条文字
							info.unchangeCount = 90;
							info.progressQueryErrorTime = {};	// 记录失败设备
						})
				}).catch((err)=>{
					
				})
			},
			
			
			/* 开始升级 */
			modalUpdateClick: function () {
				//区别备注
				if(this.updating) {
					this.$message({
						message: '程序正在升级中..',
						type: 'warning'
					});
					return;
				}
						this.updating = true;
						let localUpd = JSON.parse(window.localStorage.getItem('upgradeInfo'));
						//获取选中id组
						let localDevId = JSON.parse(window.localStorage.getItem('deviceArr'));
						console.log('升级之前看有没有未完成升级的:', localUpd)
						if(localUpd && localDevId) {
							this.queryProgress(localUpd);
							this.$message({
								type: 'info',
								message: '有设备正在升级中...请等待升级完成再进行下次升级!'
							})
							return;
						}
						// 筛选正在升级的...
						// 保存一份升级设备ID
						window.localStorage.setItem('deviceArr', JSON.stringify(this.checkedIndex));
						let UpdateArr = JSON.parse(window.localStorage.getItem('deviceArr'));
						console.log('本地UpdateArr:', UpdateArr)
						this.updateEle = false;
						// 初始化状态
						for(var i = 0, len = UpdateArr.length; i < len; i++) {
							this.modalUpdInfo.forEach(ele => {
								if(ele.device_id === UpdateArr[i]) {
									// console.log('筛选相同元素:', ele);
									ele.spanClass = true;
									ele.state = '暂无进度';
									ele.styleW = '1%';
									ele.styleC = '#fff'
								}
							})
						}
						this.updateEle = true;
						// 上传文件
						let modalFormData = new FormData();
						let ele_files = document.getElementById('modalUpgradeFile');
						modalFormData.append('list[0].file', ele_files.files[0]);
						let fxChildIds = UpdateArr.toString();
						let modalFormConfig = {
							headers: {
								'Content-Type': 'multipart/form-data',
								'authorization': window.localStorage.getItem('atoken')
							},
							onUploadProgress: progressEvent => {
								var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%';
								// console.log('complete:', complete)
								this.updateEle = false;
								for(var i = 0, len = UpdateArr.length; i < len; i++) {
									this.modalUpdInfo.forEach(ele => {
										if(ele.device_id === UpdateArr[i]) {
											// console.log('筛选相同元素:', ele);
											ele.fileText = complete;
											ele.styleW = complete;
										}
									})
								}
								this.updateEle = true;
							}
						};
						modalFormData.append('list[0].fx_device_ids', fxChildIds);
						let childUpdUrl = this.IP + '/api/v1/devconf_fx/devs/'+ this.dev_unid +'/fx_devs/upfile';
						this.updateEle = false;
						for(var i = 0, len = UpdateArr.length; i < len; i++) {
							this.modalUpdInfo.forEach(ele => {
								if(ele.device_id === UpdateArr[i]) {
									ele.state = '文件上传中';
								}
							})
						}
						// 发送http请求
						this.modalUpdHttp(childUpdUrl, modalFormData, modalFormConfig, fxChildIds);
						this.updateEle = true;
			},
			/* 升级程序 */
			modalUpdHttp: function (childUpdUrl, modalFormData, myFormConfig, fxChildIds) {
				this.$http.post(childUpdUrl, modalFormData, myFormConfig, fxChildIds)
				.then(res => {
					let childUpdRes = res.data;
					if(childUpdRes.ecode != 200) {
						this.updateEle = false;
						this.$message({
							type: 'error',
							message: '文件上传失败!'
						});
						for(var i = 0, len = fxChildIds.split(',').length; i < len; i++) {
							this.updInfo.forEach(ele => {
								if(ele.device_id === fxChildIds.split(',')[i]) {
									ele.state = '文件上传失败!';
									ele.spanClass = false;
									ele.styleW = '0%';
									ele.styleC = '#0f0'
									ele.fileText = ''
								}
							})
						}
						console.log('文件上传失败!' + childUpdRes.enote);
						this.updateEle = true;
					} else {
						this.updateEle = false;
						for(var i = 0, len = fxChildIds.split(',').length; i < len; i++) {
							this.updInfo.forEach(ele => {
								if(ele.device_id === fxChildIds.split(',')[i]) {
									ele.state = '文件上传成功!';
									ele.spanClass = false;
									ele.styleW = '0%';
									ele.styleC = '#fff'
									ele.fileText = '';
								}
							})
						}
						// 保存在本地
						window.localStorage.setItem('upgradeInfo', JSON.stringify(fxChildIds));
						this.updFlag = true;
						this.queryProgress(fxChildIds);
						this.updateEle = true;
					}
				})
			},
			/* 查询升级进度 */
			queryProgress(dev_ids) {
				console.log('升级的设备ID:', dev_ids);
				if(dev_ids === '' || dev_ids == undefined) {
					// let localUpdInfo = window.localStorage.getItem('upgradeInfo');
					// if(localUpdInfo || localUpdInfo == undefined){
						window.localStorage.removeItem('upgradeInfo');
					// }
					clearTimeout(this.updTimer);
					this.updFlag = false;
					console.log('暂无升级的设备');
					return;
				} else {
					this.$http({
						method: 'get',
						url: this.IP + '/api/v1/devconf_fx/devs/' + this.dev_unid + '/fx_devs/upgrade/progress?s=' + new Date().getTime(),
						headers: {
							'authorization': window.localStorage.getItem('atoken')
						},
						params: {
							fx_device_ids: dev_ids
						}
					}).then(res => {
						let progressRes = res.data;
						console.log('progressRes:', progressRes)
						this.newIds = dev_ids;
						this.updTab(this.newIds, progressRes);
						this.updTimer = setTimeout(() => {
							// console.log('查询进度开关: ' + this.updFlag)
							if(this.updFlag) {
								// console.log('更新查询进度的设备ID有:', this.newIds)
								this.queryProgress(this.newIds);
							}
						},1000);
					}).catch(err => {
						console.log('查询升级进度异常:', err.message);
					});
				}
			},
			detailFun(index,row){
				
			},
			batchUpdate(){
				if(this.selectcheck.length==0){
					this.$message({
						type: 'warning',
						message: '请选择需要升级的行!'
					})
					return false
				}
				this.addVisible=true;
			},
		},
	}
</script>
<style lang="scss" scoped>
</style>