sytemSet.vue

<template>
	<div style="padding-left: 28px;">
		<el-form ref="form"  label-width="86px">
			<!-- 恢复出厂设置 -->
			<div class="lineBox big">
				<i class="el-icon-share"></i>恢复出厂设置
			</div>
			<div class="radioContent">
				<div class="lineBox">
					<el-button type="primary" size="small" class="primaryButton" @click="reset">恢复出厂设置</el-button>
				</div>
				<div class="lineBox">
					<span class="tip">恢复出厂设置说明：完全恢复设备参数到出厂设置</span>
				</div>
			</div>
			<div class="line"></div>
			<!-- 数据备份 -->
			<div class="lineBox big">
				<i class="el-icon-share"></i>数据备份
			</div>
			<div class="radioContent">
				<div class="lineBox">
					<span class="upTit">参数导入</span><span class="upTit2">选择导入文件</span>
					<div class="upInput"><el-input v-model="selectFilename"></el-input></div>
					<span style="display: inline-block;">
						<el-upload
						class="upload-demo"
						ref="upload"
						:on-change="fileChange"
						:multiple="false"
						:show-file-list="false"
						action="https://jsonplaceholder.typicode.com/posts/"
						:auto-upload="false">
						<el-button slot="trigger" size="small" type="primary" class="primaryButton upButton">浏览</el-button>
						<el-button size="small" type="primary" @click="submitUpload" plain class="plainButton">参数导入</el-button>
						</el-upload>
					</span>
				</div>
				<div class="lineBox">
					<span class="upTit">参数导出</span><span class="upTit2"><el-button size="small" type="primary" class="primaryButton">参数导出</el-button></span>
				</div>
			</div>
			
			<div class="line"></div>
			<div class="lineBox big">
				<i class="el-icon-share"></i>重启设置
			</div>
			<div class="radioContent">
				<div class="lineBox">
					<el-button size="small" type="primary" class="primaryButton" @click="manualRebootClick">手动重启</el-button>
				</div>
				<div class="lineBox">
					 <el-checkbox v-model="openRestart">开启定时重启</el-checkbox>
				</div>
				<el-form ref="inlineform"  label-width="100px" inline>
					<div class="lineBox">
						<el-form-item label="每天:">
							<el-time-select
							  :disabled="!openRestart"
							  v-model="timeArr[0]"
							  value-format="HH:mm"
							  placeholder="选择时间">
							</el-time-select>
						</el-form-item>
						<el-form-item label="每天:">
							<el-time-select
							:disabled="!openRestart"
							v-model="timeArr[1]"
							value-format="HH:mm"
							placeholder="选择时间">
							</el-time-select>
						</el-form-item>
						<el-form-item label="每天:">
							<el-time-select
							:disabled="!openRestart"
							v-model="timeArr[2]"
							value-format="HH:mm"
							placeholder="选择时间">
							</el-time-select>
						</el-form-item>
					</div>
					<div class="lineBox">
						<el-form-item label="每天:">
							<el-time-select
							:disabled="!openRestart"
							v-model="timeArr[3]"
							value-format="HH:mm"
							placeholder="选择时间">
							</el-time-select>
						</el-form-item>
						<el-form-item label="每天:">
							<el-time-select
							:disabled="!openRestart"
							v-model="timeArr[4]"
							value-format="HH:mm"
							placeholder="选择时间">
							</el-time-select>
						</el-form-item>
						<el-form-item label=" ">
							<span>自动进行校时(可设置多个时间点，不得超过5个)</span>
						</el-form-item>
						<el-form-item label=" ">
							<el-button type="primary" size="small" class="primaryButton rightButton" :disabled="!openRestart" @click="intervalRebootClick">保存</el-button>
						</el-form-item>

					</div>
				</el-form>
			</div>
		</el-form>
	</div>
</template>
<script>
	export default {
		data(){
			return{
				openRestart:false,
				selectFilename:'',
				timeArr:[],
				file:null,
				dev_unid:localStorage.getItem('dev_unid'),
				device_id:sessionStorage.getItem('device_id'),
			}
		},
		components:{},
		mounted(){
			this.getRebootSetting();
		},
		methods:{
			getRebootSetting() {
				if(this.dev_unid != '' && this.device_id != ''){
					this.$api.ops.getRebootSetting({},this.dev_unid,this.device_id).then(res=>{
						if(!res.ecode){
							if(res.enabled == 1){
								this.openRestart = true;
								this.timeArr=res.reboot_time
							}
						} else {
							this.$message({
								type: 'error',
								message: res.enote
							})
						}
					})
				}else{
					this.$message({
						type: 'info',
						message: '未找到设备ID，请重新登录'
					});
				}
			},
		  submitUpload(){
			  let importFileExt = this.file.name.substr(this.file.name.lastIndexOf('.'));
			  if(importFileExt !== ".zip"){
				  this.$message({
					type: 'warning',
					message: '只支持"*.zip"文件'
				  })
				  return;
			  }
			  	this.$refs.upload.submit(); // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
			  	// 最重要的就是这段代码
			  		var importParams = new FormData() // 首先创建FormData对象
					importParams.append('file',this.file);
			  	this.$api.ops.importParams(importParams,this.dev_unid,this.device_id).then(res=>{
					if(res.ecode != undefined && res.ecode != 200) {
						this.$message({
							type: 'error',
							message: '导入失败!' + res.enote
						})
					} else {
						this.$message({
							type: 'success',
							message: '导入成功!'
						})
					}
				})
		  },
		  fileChange(file,fileList){
			  this.selectFilename=file.name;
			  this.file=file;
		  },
		  reset(){
			this.$confirm('此操作将恢复出厂设置, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				if(this.dev_unid != '' && this.device_id != ''){
					this.$api.ops.factoryReset({},this.dev_unid,this.device_id).then(res=>{
						if(res.ecode == 200){
							this.$message({
								type: 'success',
								message: '恢复出厂设置成功!'
							})
						} else {
							this.$message({
								type: 'error',
								message: '恢复出厂设置失败!' + res.enote
							})
						}
					})
				}else{
					this.$message({
						type: 'info',
						message: '未找到设备ID，请重新登录'
					});
				}
			}).catch(() => {
				this.$message({
				type: 'info',
				message: '已取消'
				});          
			});
			
		  },
		  exportFileClick(){
			  if(this.dev_unid != '' && this.device_id != ''){
				  this.$api.ops.exportParams({},this.dev_unid,this.device_id).then(res=>{
					if(res.ecode && res.ecode != 200) {
						this.$message({
							type: 'error',
							message: res.enote
						})
					} else {
						let exportFileUrl = res.file_path;
						window.location.href = exportFileUrl;
					}
					
				  })
			  }else{
			  	this.$message({
			  		type: 'info',
			  		message: '未找到设备ID，请重新登录'
			  	});
			  }
			  
		  },
		  manualRebootClick () {
			  this.$confirm('此操作将重启设备, 是否继续?', '提示', {
			  	confirmButtonText: '确定',
			  	cancelButtonText: '取消',
			  	type: 'warning'
			  }).then(() => {
			  	if(this.dev_unid != '' && this.device_id != ''){
			  		this.$api.ops.manualReboot({},this.dev_unid,this.device_id).then(res=>{
			  			if(res.ecode == 200){
			  				this.$message({
			  					type: 'success',
			  					message: '重启成功!'
			  				})
			  			} else {
			  				this.$message({
			  					type: 'error',
			  					message: '重启失败!' + res.enote
			  				})
			  			}
			  		})
			  	}else{
			  		this.$message({
			  			type: 'info',
			  			message: '未找到设备ID，请重新登录'
			  		});
			  	}
			  }).catch(() => {
			  	this.$message({
			  	type: 'info',
			  	message: '已取消'
			  	});          
			  });
		  },
		  intervalRebootClick(){
			//数组去空值
			let arr=[];
			this.timeArr.forEach(item=>{
				if(item!=""&&typeof(item)!="undefined"){
					arr.push(item)
				}
			})
			if(new Set(arr).size !== arr.length){
			　　this.$message({
					type: 'error',
					message: '定时时间重复，请重新选择'
				});
				return false;
			}
			  	let autoRebootParams = {
			  		enabled: 1,
			  		reboot_policy: "day",
			  		reboot_time: this.timeArr
			  	}
				this.$api.ops.intervalReboot(autoRebootParams,this.dev_unid,this.device_id).then(res=>{
					
						if(res.ecode == 200){
							this.$message({
								type: 'success',
								message: '自动重启配置成功！!'
							})
							this.getRebootSetting();
						} else {
						}
					
				})
			  
		  }
		},
	}
</script>
<style lang="scss" scoped>
	.upButton{
		margin-right: 10px;
	}
	.upTit{
		margin-right: 44px;
	}
	.upTit2{
		margin-right: 6px;
	}
	.upInput{
		display: inline-block;
		width: 250px;
		margin:0 12px;
	}
	.tip{
		font-size:14px;
		color:rgba(0,0,0,0.25);
	}
	.line{
		height:1px;
		background:rgba(232,232,232,1);
		margin-top: 18px;
		margin-bottom: 15px;
	}
	.lineBox{
		padding: 12px 0 12px 50px;
	}
	.radioContent{
		    margin-left: 38px;
	}
	.rightButton{
		float: right;
		margin-right: 20%;
	}
	.inputBox{
		width: 220px;
	}
	.big i{
		font-size: 18px;
		color: #CCCCCC;
		margin-right:22px;
	}
</style>