proofreadtime.vue

<template>
  <div style="padding-left: 28px;">
    <el-form ref="form" label-width="100px">
      <!-- 手动校时 -->
      <div class="lineBox big" hidden>
        <el-radio v-model="typeRadio" label="1">手动校时</el-radio>
      </div>
      <div class="radioContent" hidden>
        <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" hidden></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: "2",
      ntpRadio: "1",
      timeArr: ["", "", "", "", ""],
      ntpPort: "",
      weekMinutes: "",
      activeName: "first",
      systemTime: "",
      syncTime: false,
      computerTime: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      dev_unid: localStorage.getItem("dev_unid"),
      device_id: sessionStorage.getItem("device_id"),
      serverAdr: ""
    };
  },
  components: {},
  mounted() {
    this.timer();
    this.getDevTimes();
    this.getNtpTimes();
  },
  methods: {
    handleClick(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>