proofreadtime.vue

<template>
	<div style="padding-left: 28px;">
		<el-form ref="form"  label-width="100px">
			<!-- 手动校时 -->
			<div class="lineBox big">
				<el-radio v-model="typeRadio" label="1">手动校时</el-radio>
			</div>
			<div class="radioContent">
				<div class="lineBox">
					<el-form-item label="当前时间:">
						<span>{{computerTime}}</span>
					</el-form-item>
				</div>
				<div class="lineBox">
					<el-form-item label="设备时间:">
						<el-date-picker
						:disabled="typeRadio=='2'"
						v-model="systemTime"
						value-format="yyyy-MM-dd HH:mm:ss"
						type="datetime"
						placeholder="选择日期时间">
						</el-date-picker>
						<span style="margin-left: 30px;"> <el-checkbox v-model="syncTime" @change="syncTimeFun" :disabled="typeRadio=='2'">与计算机时间同步</el-checkbox></span>
						<el-button type="primary" size="small" class="primaryButton rightButton" :disabled="typeRadio=='2'" @click="manualClick">校时</el-button>
					</el-form-item>
				</div>
			</div>
			<div class="line"></div>
			<!-- NTP校时 -->
			<div class="lineBox big">
				<el-radio v-model="typeRadio" label="2">NTP校时</el-radio>
			</div>
			<div class="radioContent">
				<div class="lineBox">
					<el-form-item label="服务器地址:">
						<span class="inputBox">
							<el-input placeholder="请输入服务器地址" v-model="serverAdr" :disabled="typeRadio=='1'"></el-input>
						</span>
					</el-form-item>
				</div>
				<div class="lineBox">
					<el-form-item label="NTP端口:">
						<span class="inputBox">
							<el-input placeholder="请输入NTP端口" v-model="ntpPort" :disabled="typeRadio=='1'"></el-input>
						</span>
					</el-form-item>
				</div>
				<div class="lineBox">
					<el-radio v-model="ntpRadio" label="1" :disabled="typeRadio=='1'">定时校时</el-radio>
				</div>
				<el-form ref="inlineform"  label-width="100px" inline>
					<div class="lineBox">
						<el-form-item label="每天:">
							<el-time-select
							:disabled="typeRadio=='1'||ntpRadio=='2'"
							  v-model="timeArr[0]"
							  value-format="HH:mm"
							  placeholder="选择时间">
							</el-time-select>
						</el-form-item>
						<el-form-item label="每天:">
							<el-time-select
							:disabled="typeRadio=='1'||ntpRadio=='2'"
							value-format="HH:mm"
							v-model="timeArr[1]"
							placeholder="选择时间">
							</el-time-select>
						</el-form-item>
						<el-form-item label="每天:">
							<el-time-select
							:disabled="typeRadio=='1'||ntpRadio=='2'"
							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="typeRadio=='1'||ntpRadio=='2'"
							v-model="timeArr[3]"
							value-format="HH:mm"
							placeholder="选择时间">
							</el-time-select>
						</el-form-item>
						<el-form-item label="每天:">
							<el-time-select
							:disabled="typeRadio=='1'||ntpRadio=='2'"
							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>
					</div>
				</el-form>
				<div class="lineBox">
					<el-radio v-model="ntpRadio" label="2" :disabled="typeRadio=='1'">周期校时</el-radio>
				</div>
				<div class="lineBox">
					<el-form-item label="每隔:">
						<span class="inputBox" style="width: 60px;">
							<el-input placeholder="" v-model.number="weekMinutes" :disabled="typeRadio=='1'||ntpRadio=='1'"></el-input>
						</span>
						<span style="margin-left: 14px;">秒，自动进行校时</span>
						<el-button type="primary" size="small" class="primaryButton rightButton" :disabled="typeRadio=='1'" @click="saveClick">保存设置</el-button>
					</el-form-item>
				</div>
			</div>
		</el-form>
	</div>
</template>
<script>
	export default {
		data(){
			return{
				typeRadio:'1',
				ntpRadio:'1',
				timeArr:['','','','',''],
				ntpPort:'',
				weekMinutes:'',
				activeName: 'first',
				systemTime:'',
				syncTime:false,
				computerTime:this.$moment().format("YYYY-MM-DD HH:mm:ss"),
				dev_unid:sessionStorage.getItem('dev_unid'),
				device_id:sessionStorage.getItem('device_id'),
				serverAdr:''
			}
		},
		components:{},
		mounted(){
			this.timer();
			this.getDevTimes();
			this.getNtpTimes();
		},
		methods:{
			handleClick(tab, event) {
			console.log(tab, event);
		  },
		  timer(){
			  setInterval(()=>{
				  this.computerTime=this.$moment().format("YYYY-MM-DD HH:mm:ss")
			  },1000)
		  },
		  getDevTimes () {
			  this.$api.ops.getDevsTime({
			  },this.dev_unid,this.device_id).then(res=>{
				  if (res.ecode != undefined && res.ecode != 200) {
				  	//console.log('获取设备时间失败！' + utcTimes.enote);
				  	this.$message({
				  		type: 'error',
				  		message: '获取设备时间失败！' + res.enote
				  	});
				  } else {
				  	if(res && typeof res === 'string') {
						//先转utc格式
						let date = this.$moment.utc(res).format();
						//再utc时间转本地时间
				  		this.systemTime = this.$moment(date)
							.local()
							.format("YYYY-MM-DD HH:mm:ss");
				  	}
				  }
			  })
		  },
		  syncTimeFun(){
			  if(this.syncTime){
				  this.systemTime=this.computerTime;
			  }
		  },
		  manualClick() {
			  let time=this.$moment(this.systemTime).utc().format("YYYY-MM-DD HH:mm:ss");
			  this.$api.ops.manualTime({
				  time:time
			  },this.dev_unid,this.device_id).then(res=>{
				  	if(res.ecode != 200) {
				  		this.$message({
				  			type: 'error',
				  			message: '手动校时失败!' + res.enote
				  		})
				  	} else {
				  		this.$message({
				  			type: 'success',
				  			message: '手动校时成功!'
				  		})
				  	}
			  })
		  	
		  },
		  getNtpTimes () {
		  	//获取ntp校时配置
				this.$api.ops.getNtp({
				},this.dev_unid,this.device_id).then(res=>{
					if(res.ecode != undefined && res.ecode != 200) {
						this.$message({
							type: 'error',
							message: '获取NTP校时失败!' + res.enote
						});
					} else {
						if(res.enable_ntp == 1) {
							this.typeRadio = '2';
							this.serverAdr = res.ntp_server_ip;
							this.ntpPort = res.ntp_server_port;
							console.log('获取NTP时间:', res.timing_times)
							this.timeArr=res.timing_times;
							this.weekMinutes = res.timing_interval;
							if(res.timing_policy == "fix"){
								this.ntpRadio = '1';
							}
							if(res.timing_policy == "interval"){
								this.ntpRadio = '2';
							}
						} else {
							this.typeRadio = '1';
						}
					}
				}).catch(err => {
					console.log('获取ntp校时设置异常:', err.message);
				});
		  },
		  saveClick() {
				if(this.serverAdr != "" &&this.ntpPort  != ""){
					let timing_policy=''
					if(this.ntpRadio=='1'){
						//如果定时校时
						timing_policy='fix'
						//数组去空值
						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;
					    }
					}else if(this.ntpRadio=='2'){
						  //周期校时
						  timing_policy='interval'
						if(this.weekMinutes === '') {
							this.$message({
								type: 'warning',
								message: '未设置周期时间!'
							})
							return;
						}
					}
					let ntpTimingData = {
						device_id: this.device_id,
						enable_ntp: 1,
						ntp_server_ip: this.serverAdr,
						ntp_server_port: this.ntpPort,
						timing_policy: timing_policy,
						timing_times: this.timeArr,
						timing_interval: this.weekMinutes
					}
					this.ntpTimeSet(ntpTimingData);
				}else {
					this.$message({
						type: 'warning',
						message: '服务器地址以及ntp端口不能为空!'
					})
				}
			},
			ntpTimeSet(data){
				this.$api.ops.ntpTime(data,this.dev_unid,this.device_id).then(res=>{
						if(res.ecode == 200){
							this.$message({
								type: 'success',
								message: 'NTP校时成功!'
							})
						} else {
							this.$message({
								type: 'error',
								message: 'NTP校时失败!' + res.enote
							})
						}
				}).catch(err => {
					console.log('ntp校时异常:', error.message)
				});
			}
		},
	}
</script>
<style lang="scss" scoped>
	.line{
		height:1px;
		background:rgba(232,232,232,1);
		margin-top: 18px;
		margin-bottom: 15px;
	}
	.lineBox{
		padding: 12px 0 12px 50px;
	}
	.radioContent{
		    margin-left: 24px;
	}
	.rightButton{
		float: right;
		margin-right: 20%;
	}
	.inputBox{
		width: 220px;
	}
</style>