ZZJ
2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3
src/pages/settings/components/BasicSetting.vue
@@ -8,13 +8,17 @@
      type="border-card"
    >
      <!-- 本机信息 -->
      <el-tab-pane label="本机信息" name="sysInfo" v-if="isShow('settings:sysInfo')">
      <el-tab-pane
        label="本机信息"
        name="sysInfo"
        v-if="isShow('settings:sysInfo')"
      >
        <el-menu
          :default-openeds="openeds"
          background-color="#fff"
          text-color="#303133"
          active-text-color="#409EFF"
          style="height: 100%;"
          style="height: 100%"
          class="menu-css"
          @open="menuOpen"
          @close="menuClose"
@@ -25,16 +29,29 @@
              <b class="tree-font">本机信息</b>
            </template>
            <el-menu-item-group class="item-group">
              <el-form :model="sysinfo" :rules="rules" ref="sysinfo" label-width="100px">
              <el-form
                :model="sysinfo"
                :rules="rules"
                ref="sysinfo"
                label-width="100px"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="名称" prop="server_name">
                      <el-input v-model="sysinfo.server_name" placeholder="服务器名称" size="small"></el-input>
                      <el-input
                        v-model="sysinfo.server_name"
                        placeholder="服务器名称"
                        size="small"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="端口" prop="server_port">
                      <el-input v-model="sysinfo.server_port" placeholder="WEB服务端口" size="small"></el-input>
                      <el-input
                        v-model="sysinfo.server_port"
                        placeholder="WEB服务端口"
                        size="small"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
@@ -42,12 +59,18 @@
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="IP" prop="ip">
                      <ip-input :ip="sysinfo.ip" @on-blur="sysinfo.ip = arguments[0]"></ip-input>
                      <ip-input
                        :ip="sysinfo.ip"
                        @on-blur="sysinfo.ip = arguments[0]"
                      ></ip-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="子网掩码" prop="subMask">
                      <ip-input :ip="sysinfo.subMask" @on-blur="sysinfo.subMask = arguments[0]"></ip-input>
                      <ip-input
                        :ip="sysinfo.subMask"
                        @on-blur="sysinfo.subMask = arguments[0]"
                      ></ip-input>
                    </el-form-item>
                  </el-col>
                </el-row>
@@ -55,23 +78,30 @@
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="网关" prop="gateway">
                      <ip-input :ip="sysinfo.gateway" @on-blur="sysinfo.gateway = arguments[0]"></ip-input>
                      <ip-input
                        :ip="sysinfo.gateway"
                        @on-blur="sysinfo.gateway = arguments[0]"
                      ></ip-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="DNS" prop="dns">
                      <ip-input :ip="sysinfo.dns" @on-blur="sysinfo.dns = arguments[0]"></ip-input>
                      <ip-input
                        :ip="sysinfo.dns"
                        @on-blur="sysinfo.dns = arguments[0]"
                      ></ip-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="mt15 mb10 save-btn">
                  <el-button type="primary" @click="submitSysinfo" size="small">保存</el-button>
                  <el-button type="primary" @click="submitSysinfo" size="small"
                    >保存</el-button
                  >
                </div>
              </el-form>
            </el-menu-item-group>
          </el-submenu>
          <!-- 详细信息 -->
          <el-submenu index="1">
            <template slot="title">
              <b class="tree-font">详细信息</b>
@@ -80,7 +110,7 @@
              <el-row :gutter="gutter">
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">设备ID</div>
                  <div class="xiangqing-info">{{sysinfo.server_id}}</div>
                  <div class="xiangqing-info">{{ sysinfo.server_id }}</div>
                </el-col>
                <!-- <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">设备编号</div>
@@ -88,39 +118,39 @@
                </el-col>-->
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">设备型号</div>
                  <div class="xiangqing-info">{{sysinfo.deviceModel}}</div>
                  <div class="xiangqing-info">{{ sysinfo.deviceModel }}</div>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">设备类型</div>
                  <div class="xiangqing-info">{{sysinfo.deviceDesc}}</div>
                  <div class="xiangqing-info">{{ sysinfo.deviceDesc }}</div>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">通道个数</div>
                  <div class="xiangqing-info">{{sysinfo.channelCount}}</div>
                  <div class="xiangqing-info">{{ sysinfo.channelCount }}</div>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">主控版本</div>
                  <div class="xiangqing-info">{{sysinfo.masterVersion}}</div>
                  <div class="xiangqing-info">{{ sysinfo.masterVersion }}</div>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">web版本</div>
                  <div class="xiangqing-info">{{sysinfo.webVersion}}</div>
                  <div class="xiangqing-info">{{ sysinfo.webVersion }}</div>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">硬盘信息</div>
                  <div class="xiangqing-info">{{sysinfo.disks}}</div>
                  <div class="xiangqing-info">{{ sysinfo.disks }}</div>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">CPU</div>
                  <div class="xiangqing-info">{{sysinfo.cpuInfo}}</div>
                  <div class="xiangqing-info">{{ sysinfo.cpuInfo }}</div>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">内存</div>
                  <div class="xiangqing-info">{{sysinfo.mem}}</div>
                  <div class="xiangqing-info">{{ sysinfo.mem }}</div>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">运行时间</div>
                  <div class="xiangqing-info">{{sysinfo.uptime}}</div>
                  <div class="xiangqing-info">{{ sysinfo.uptime }}</div>
                </el-col>
              </el-row>
            </el-menu-item-group>
@@ -134,38 +164,56 @@
              <el-form
                label-width="150px"
                class="alarmSetting"
                style="padding-left:5px;padding-right:5px;"
                style="padding-left: 5px; padding-right: 5px"
              >
                <el-form-item label="视频截取最短时长" style="width:724px;">
                <el-form-item label="视频截取最短时长" style="width: 724px">
                  <el-slider
                    id="cut_min_duration"
                    v-model="alarmConf.min_video_len"
                    :show-tooltip="false"
                    @input="min_len = min_video_len"
                    v-model="fakeObj.min"
                    :min="5 / 1.2"
                    :max="100"
                    :step="5 / 1.2"
                    show-stops
                    :show-tooltip="true"
                    :format-tooltip="formatTooltip"
                  ></el-slider>
                  <el-input-number
                    v-model="alarmConf.min_video_len"
                    v-model="min_len"
                    @change="fakeObj.min = +(min_len / 1.2)"
                    controls-position="right"
                    :min="0"
                    :max="100"
                    :min="5"
                    :max="120"
                    size="small"
                  ></el-input-number>&nbsp;s
                  ></el-input-number
                  >&nbsp;s
                </el-form-item>
                <el-form-item label="视频截取最长时长" style="width:724px">
                <el-form-item label="视频截取最长时长" style="width: 724px">
                  <el-slider
                    id="cut_max_duration"
                    v-model="alarmConf.max_video_len"
                    :show-tooltip="false"
                    v-model="fakeObj.max"
                    :min="5 / 1.2"
                    @input="max_len = max_video_len"
                    :max="100"
                    :step="5 / 1.2"
                    show-stops
                    :format-tooltip="formatTooltip"
                    :show-tooltip="true"
                  ></el-slider>
                  <el-input-number
                    v-model="alarmConf.max_video_len"
                    v-model="max_len"
                    @change="fakeObj.max = +(max_len / 1.2)"
                    controls-position="right"
                    :min="0"
                    :max="100"
                    :min="5"
                    :max="120"
                    size="small"
                  ></el-input-number>&nbsp;s
                  ></el-input-number
                  >&nbsp;s
                </el-form-item>
                <div class="mt15 mb10 save-btn">
                  <el-button type="primary" @click="submitAlarm" size="small">保存</el-button>
                  <el-button type="primary" @click="submitAlarm" size="small"
                    >保存</el-button
                  >
                </div>
              </el-form>
            </el-menu-item-group>
@@ -175,14 +223,18 @@
      </el-tab-pane>
      <!-- 时间配置 -->
      <el-tab-pane label="时间配置" name="timeSet" v-if="isShow('settings:timeSet')">
      <el-tab-pane
        label="时间配置"
        name="timeSet"
        v-if="isShow('settings:timeSet')"
      >
        <el-form label-width="100px">
          <el-form-item label="设备时间">
            {{ equipmentTime }}
          </el-form-item>
          <div style="text-align: left;padding: 10px 0px">
          <div style="text-align: left; padding: 10px 0px">
            <div class="time-type">NTP校时</div>
            <div style="padding: 10px 0px;">
            <div style="padding: 10px 0px">
              <el-radio v-model="syncType" label="1">NTP校时</el-radio>
            </div>
          </div>
@@ -190,12 +242,12 @@
          <el-form-item label="服务器地址">
            <ip-input
              :ip="ntpServer"
              @on-blur="ntpServer= arguments[0]"
              @on-blur="ntpServer = arguments[0]"
              :disabled="syncType === '2'"
            ></ip-input>
          </el-form-item>
          <el-form-item label="校时时间间隔" style="width: 41.3%;">
          <el-form-item label="校时时间间隔" style="width: 41.3%">
            <el-input-number
              v-model.number="timeInterval"
              :min="1"
@@ -204,19 +256,21 @@
              size="small"
              :controls="false"
              :disabled="syncType === '2'"
            ></el-input-number>&nbsp;&nbsp;&nbsp;分钟
            ></el-input-number
            >&nbsp;&nbsp;&nbsp;分钟
            <el-button
              type="text"
              style="position: absolute; left: 330px;"
              style="position: absolute; left: 330px"
              :disabled="syncType === '2'"
              @click="testNTP"
              :loading="ntpTestLoading"
            >测试</el-button>
              >测试</el-button
            >
          </el-form-item>
          <div style="text-align: left;padding: 10px 0px">
          <div style="text-align: left; padding: 10px 0px">
            <div class="time-type">手动校时</div>
            <div style="padding: 10px 0px;">
            <div style="padding: 10px 0px">
              <el-radio v-model="syncType" label="2">手动校时</el-radio>
            </div>
          </div>
@@ -232,22 +286,29 @@
            ></el-date-picker>
            <el-checkbox
              v-model="settimeRadio"
              style="margin-left: 12px;"
              style="margin-left: 12px"
              @change="syncBrowser"
              :disabled="syncType === '1'"
            >同步本计算机时间</el-checkbox>
              >同步本计算机时间</el-checkbox
            >
          </el-form-item>
          <el-col :span="12" style="padding-right: 40px;">
          <el-col :span="12" style="padding-right: 40px">
            <el-form-item>
              <el-button type="primary" @click="submitClock" size="small">保存</el-button>
              <el-button type="primary" @click="submitClock" size="small"
                >保存</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-tab-pane>
      <!-- 集群管理 -->
      <el-tab-pane label="集群管理" name="cluster" v-if="isShow('settings:cluster')">
      <el-tab-pane
        label="集群管理"
        name="cluster"
        v-if="isShow('settings:cluster')"
      >
        <cluster-management></cluster-management>
      </el-tab-pane>
      <!-- <el-tab-pane label="外部访问" name="fourth">
@@ -290,10 +351,20 @@
          </el-submenu>
        </el-menu>
      </el-tab-pane>-->
      <el-tab-pane label="权限管理" name="permission" v-if="isShow('settings:permission')">
        <authority-management v-if="activeName === 'permission'"></authority-management>
      <el-tab-pane
        label="权限管理"
        name="permission"
        v-if="isShow('settings:permission')"
      >
        <authority-management
          v-if="activeName === 'permission'"
        ></authority-management>
      </el-tab-pane>
      <el-tab-pane label="广播设置" name="broadcast" v-if="isShow('settings:broadcast')">
      <el-tab-pane
        label="广播设置"
        name="broadcast"
        v-if="isShow('settings:broadcast')"
      >
        <radio-set v-if="activeName === 'broadcast'"></radio-set>
      </el-tab-pane>
    </el-tabs>
@@ -315,12 +386,12 @@
import { isPort, isIPv4 } from "@/scripts/validate";
import ipInput from "@/components/subComponents/IPInput";
import TimeZones from "@/Pool/TimeZones"
import TimeZones from "@/Pool/TimeZones";
import ClusterManagement from "./ClusterManagement";
import AuthorityManagement from "./AuthorityManagement";
import RadioSet from "./RadioSet";
import config from '../../../../package.json'
import config from "../../../../package.json";
export default {
  name: "BasicSettings",
@@ -328,18 +399,17 @@
    ipInput,
    ClusterManagement,
    AuthorityManagement,
    RadioSet
    RadioSet,
  },
  computed: {
    // timeZoneOption() {
    //   let options = []
    //   TimeZones.forEach(zone => {
    //     options = options.concat(zone.utc.map(v => {
    //       return { value: v, label: v }
    //     }))
    //   })
    //   return options
    // },
    min_video_len() {
      // return +(this.fakeObj.min * 1.2).toFixed(0);
      return Math.round(this.fakeObj.min * 1.2);
    },
    max_video_len() {
      return Math.round(this.fakeObj.max * 1.2);
      // return +(this.fakeObj.max * 1.2).toFixed(0);
    },
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
@@ -348,16 +418,15 @@
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        return loginName === "superadmin" || loginName === "basic";
      }
      return false;
    },
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
        el.querySelector("input").focus();
      },
    },
  },
  data() {
    return {
@@ -378,72 +447,78 @@
      timestamp: 0,
      sysinfo: {},
      alarmConf: {},
      min_len: 0,
      max_len: 0,
      fakeObj: {
        min: 0,
        max: 0,
      },
      originNetConfig: {
        ip: "",
        gw: "",
        mask: "",
        dns: ""
        dns: "",
      },
      rules: {
        ip: [
          {
            required: true,
            message: "请输入IP地址",
            trigger: "change"
            trigger: "change",
          },
          { validator: isIPv4, trigger: "change" }
          { validator: isIPv4, trigger: "change" },
        ],
        ServerIp: [
          {
            required: true,
            message: "请输入IP地址",
            trigger: "change"
            trigger: "change",
          },
          { validator: isIPv4, trigger: "change" }
          { validator: isIPv4, trigger: "change" },
        ],
        ServerPort: [
          {
            required: true,
            message: "请输入端口",
            trigger: "change"
            trigger: "change",
          },
          { validator: isPort, trigger: "change" }
          { validator: isPort, trigger: "change" },
        ],
        GbServerPort: [
          {
            required: true,
            message: "请输入端口",
            trigger: "change"
            trigger: "change",
          },
          { validator: isPort, trigger: "change" }
          { validator: isPort, trigger: "change" },
        ],
        gateway: [
          {
            required: true,
            message: "请输入网关",
            trigger: "change"
            trigger: "change",
          },
          { validator: isIPv4, trigger: "change" }
          { validator: isIPv4, trigger: "change" },
        ],
        dns: [
          {
            required: true,
            message: "请输入dns地址",
            trigger: "change"
            trigger: "change",
          },
          { validator: isIPv4, trigger: "change" }
          { validator: isIPv4, trigger: "change" },
        ],
        server_name: [
          { required: true, message: "请输入名称", trigger: "change" }
          { required: true, message: "请输入名称", trigger: "change" },
        ],
        subMask: [
          {
            required: true,
            message: "请输入子网掩码",
            trigger: "change"
            trigger: "change",
          },
          { validator: isIPv4, trigger: "change" }
        ]
          { validator: isIPv4, trigger: "change" },
        ],
      },
      openeds: ["0"],
      ipServer: {
@@ -453,12 +528,12 @@
        localFilePort: "",
      },
      locationCity: {
        province: '',
        city: '',
        county: '',
        province: "",
        city: "",
        county: "",
        provinceOptions: [],
        cityOptions: [],
        countyOptions: []
        countyOptions: [],
      },
      webPort: 0,
      ntpTestLoading: false,
@@ -492,55 +567,64 @@
    clearInterval(this.browserTimer);
  },
  methods: {
    formatTooltip(v){
      return Math.round(v*1.2)
    },
    isShow(authority) {
      return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
      return (
        this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
      );
    },
    initSysinfo() {
      this.loadingText = "正在获取设备信息...";
      getDevInfo().then(rsp => {
        if (rsp && rsp.success) {
          this.sysinfo = rsp.data;
          this.sysinfo.gateway = this.sysinfo.gateway.trim();
          this.originNetConfig.ip = this.sysinfo.ip;
          this.originNetConfig.mask = this.sysinfo.subMask;
          this.originNetConfig.gw = this.sysinfo.gateway.trim();
          this.originNetConfig.dns = this.sysinfo.dns ? this.sysinfo.dns : "";
          this.alarmConf.min_video_len = rsp.data.min_video_len;
          this.alarmConf.max_video_len = rsp.data.max_video_len;
      getDevInfo()
        .then((rsp) => {
          if (rsp && rsp.success) {
            this.sysinfo = rsp.data;
            this.sysinfo.gateway = this.sysinfo.gateway.trim();
            this.originNetConfig.ip = this.sysinfo.ip;
            this.originNetConfig.mask = this.sysinfo.subMask;
            this.originNetConfig.gw = this.sysinfo.gateway.trim();
            this.originNetConfig.dns = this.sysinfo.dns ? this.sysinfo.dns : "";
            // this.alarmConf.min_video_len = rsp.data.min_video_len;
            // this.alarmConf.max_video_len = rsp.data.max_video_len;
            this.fakeObj.min = rsp.data.min_video_len / 1.2
            this.fakeObj.max = rsp.data.max_video_len / 1.2
            if (this.sysinfo.deviceInfo) {
              let devInfo = this.sysinfo.deviceInfo;
          if (this.sysinfo.deviceInfo) {
            let devInfo = this.sysinfo.deviceInfo;
              this.sysinfo.cpuInfo = devInfo.cpu[0].modelName;
              this.sysinfo.disks = "( " + devInfo.disk + ") ";
              this.sysinfo.mem =
                (devInfo.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB";
              // this.sysinfo.arch = devInfo.host.kernelArch;
              this.sysinfo.uptime = this.secondsFormat(devInfo.host.uptime);
            }
            this.sysinfo.cpuInfo = devInfo.cpu[0].modelName;
            this.sysinfo.disks = "( " + devInfo.disk + ") ";
            this.sysinfo.mem = (devInfo.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB";
            // this.sysinfo.arch = devInfo.host.kernelArch;
            this.sysinfo.uptime = this.secondsFormat(devInfo.host.uptime);
            if (!this.sysinfo.server_port) {
              this.sysinfo.server_port = 7003;
            }
            this.webPort = this.sysinfo.server_port;
            this.sysinfo.webVersion = "V" + config.version;
          }
          if (!this.sysinfo.server_port) {
            this.sysinfo.server_port = 7003;
          }
          this.webPort = this.sysinfo.server_port;
          this.sysinfo.webVersion = 'V' + config.version;
        }
        this.loading = false;
      }).catch(err => {
        this.loading = false;
      });
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    secondsFormat(s) {
      var day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
      var day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
      var hour = Math.floor((s - day * 24 * 3600) / 3600);
      var minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
      var second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
      return day + "天" + hour + "时" + minute + "分" + second + "秒";
    },
    initClockConf(ntpTest = false) {
      getClockInfo().then(rsp => {
      getClockInfo().then((rsp) => {
        if (rsp && rsp.success) {
          this.timezone = rsp.data.time_zone;
          if (!ntpTest) {
@@ -550,18 +634,18 @@
            this.ntpServer = rsp.data.ntp_server;
            this.timeInterval = rsp.data.interval;
          }
          this.timestamp = rsp.data.local_time
          this.timestamp = rsp.data.local_time;
          if (this.clockTimer === null) {
            this.runClock();
          }
        }
      })
      });
    },
    runClock() {
      this.equipmentTime = this.formatTime(++this.timestamp, 'Y-M-D h:m:s');
      this.equipmentTime = this.formatTime(++this.timestamp, "Y-M-D h:m:s");
      this.clockTimer = setTimeout(() => {
        this.runClock();
      }, 1000)
      }, 1000);
    },
    initAlarmConf() {
      // getAlarmConfig().then(rsp => {
@@ -571,90 +655,120 @@
      // });
    },
    initResourceConfig() {
      getResourceConfig().then(rsp => {
      getResourceConfig().then((rsp) => {
        if (rsp && rsp.success) {
          this.ipServer.diyOrLocalIP = rsp.data.ipType
          this.ipServer.ip = rsp.data.serviceIp
          this.ipServer.localhost = rsp.data.domain
          this.ipServer.localFilePort = rsp.data.filePort
          this.ipServer.diyOrLocalIP = rsp.data.ipType;
          this.ipServer.ip = rsp.data.serviceIp;
          this.ipServer.localhost = rsp.data.domain;
          this.ipServer.localFilePort = rsp.data.filePort;
        }
      })
      });
    },
    syncBrowser(enable) {
      if (!enable) {
        clearInterval(this.browserTimer)
        clearInterval(this.browserTimer);
      } else {
        this.browserTimer = setInterval(() => {
          let timestamp = new Date().getTime() / 1000;
          this.settime = this.formatTime(timestamp, 'Y-M-D h:m:s')
        }, 1000)
          this.settime = this.formatTime(timestamp, "Y-M-D h:m:s");
        }, 1000);
      }
    },
    markStartTime() {
      let timestamp = new Date().getTime() / 1000;
      this.settime = this.formatTime(timestamp, 'Y-M-D h:m:s')
      this.settime = this.formatTime(timestamp, "Y-M-D h:m:s");
    },
    submitSysinfo() {
      this.$refs["sysinfo"].validate(valid => {
      this.$refs["sysinfo"].validate((valid) => {
        if (valid) {
          if (this.sysinfo.ip !== this.originNetConfig.ip
            || this.sysinfo.subMask !== this.originNetConfig.mask
            || this.sysinfo.dns !== this.originNetConfig.dns
            || this.sysinfo.gateway !== this.originNetConfig.gw) {
          if (
            this.sysinfo.ip !== this.originNetConfig.ip ||
            this.sysinfo.subMask !== this.originNetConfig.mask ||
            this.sysinfo.dns !== this.originNetConfig.dns ||
            this.sysinfo.gateway !== this.originNetConfig.gw
          ) {
            if (this.sysinfo.ip !== this.originNetConfig.ip) {
              let newUri = location.protocol + "//" + this.sysinfo.ip + ":" + this.sysinfo.server_port;
              let newUri =
                location.protocol +
                "//" +
                this.sysinfo.ip +
                ":" +
                this.sysinfo.server_port;
              var changeIPTimer = setTimeout(() => {
                this.$alert('<strong>您已修改了服务器ip, 请重新登录</strong><a target="_parent" href="' + newUri + '"> ' + newUri + '<a/>', '提示', {
                  dangerouslyUseHTMLString: true
                });
              }, 10000)
                this.$alert(
                  '<strong>您已修改了服务器ip, 请重新登录</strong><a target="_parent" href="' +
                    newUri +
                    '"> ' +
                    newUri +
                    "<a/>",
                  "提示",
                  {
                    dangerouslyUseHTMLString: true,
                  }
                );
              }, 10000);
            }
            this.$confirm("确认需要修改服务器网络配置吗?", {
              center: true,
              cancelButtonClass: "comfirm-class-cancle",
              confirmButtonClass: "comfirm-class-sure"
            }).then(() => {
              this.loading = true;
              this.loadingText = "正在处理..."
              saveDevInfo(this.sysinfo).then(rsp => {
                if (rsp && rsp.success) {
                  this.$notify({
                    type: "success",
                    message: "本机信息保存成功"
              confirmButtonClass: "comfirm-class-sure",
            })
              .then(() => {
                this.loading = true;
                this.loadingText = "正在处理...";
                saveDevInfo(this.sysinfo)
                  .then((rsp) => {
                    if (rsp && rsp.success) {
                      this.$notify({
                        type: "success",
                        message: "本机信息保存成功",
                      });
                    }
                    this.initSysinfo();
                    this.loading = false;
                  })
                  .catch((err) => {
                    this.loading = false;
                    clearTimeout(changeIPTimer);
                    this.$notify({
                      type: "error",
                      message: "保存失败",
                    });
                  });
                }
                this.initSysinfo();
                this.loading = false;
              }).catch(err => {
                this.loading = false;
                clearTimeout(changeIPTimer)
                this.$notify({
                  type: "error",
                  message: "保存失败"
                });
              });
            }).catch(err => {
            });
              })
              .catch((err) => {});
          } else {
            saveDevInfo(this.sysinfo).then(rsp => {
            saveDevInfo(this.sysinfo).then((rsp) => {
              if (rsp && rsp.success) {
                this.$notify({
                  type: "success",
                  message: "本机信息保存成功"
                  message: "本机信息保存成功",
                });
                this.initSysinfo();
              }
            });
            if (this.sysinfo.server_port !== this.webPort) {
              let newUri = location.protocol + "//" + this.sysinfo.ip + ":" + this.sysinfo.server_port;
              let newUri =
                location.protocol +
                "//" +
                this.sysinfo.ip +
                ":" +
                this.sysinfo.server_port;
              var changeIPTimer = setTimeout(() => {
                this.$alert('<strong>您已修改了服务器端口, 请重新登录</strong><a target="_parent" href="' + newUri + '"> ' + newUri + '<a/>', '提示', {
                  dangerouslyUseHTMLString: true
                });
              }, 5000)
                this.$alert(
                  '<strong>您已修改了服务器端口, 请重新登录</strong><a target="_parent" href="' +
                    newUri +
                    '"> ' +
                    newUri +
                    "<a/>",
                  "提示",
                  {
                    dangerouslyUseHTMLString: true,
                  }
                );
              }, 5000);
            }
          }
        } else {
@@ -663,17 +777,15 @@
        }
      });
    },
    checkTimeZone(val) {
    },
    checkTimeZone(val) {},
    submitClock() {
      if (this.syncType === '1') {
      if (this.syncType === "1") {
        if (this.ntpServer === "") {
          this.$notify({
            type: "error",
            message: "NTP 服务器地址不能为空"
            message: "NTP 服务器地址不能为空",
          });
          return false
          return false;
        } else if (this.timeInterval === "") {
          this.timeInterval = 1;
        }
@@ -681,103 +793,107 @@
        if (this.settime === "") {
          this.$notify({
            type: "error",
            message: "设置时间不能为空"
            message: "设置时间不能为空",
          });
          return false
          return false;
        }
      }
      let requestBody = {
        timeZone: this.timezone,
        ntp: this.syncType === '1',
        ntp: this.syncType === "1",
        ntpServer: this.ntpServer,
        interval: this.timeInterval,
        newTime: this.settime
      }
      saveClockInfo(requestBody).then(rsp => {
        newTime: this.settime,
      };
      saveClockInfo(requestBody).then((rsp) => {
        if (rsp && rsp.success) {
          this.$notify({
            type: "success",
            message: "设置成功"
            message: "设置成功",
          });
        }
        this.initClockConf();
      })
      });
    },
    testNTP() {
      this.ntpTestLoading = true;
      testNTPserver({ server: this.ntpServer }).then(rsp => {
        if (rsp && rsp.success) {
          this.$notify({
            type: "success",
            message: "时间同步成功"
          });
        } else {
      testNTPserver({ server: this.ntpServer })
        .then((rsp) => {
          if (rsp && rsp.success) {
            this.$notify({
              type: "success",
              message: "时间同步成功",
            });
          } else {
            this.$notify({
              type: "error",
              message: "时间同步失败",
            });
          }
          this.ntpTestLoading = false;
          this.initClockConf(true);
        })
        .catch((err) => {
          this.$notify({
            type: "error",
            message: "时间同步失败"
            message: "时间同步失败,请检查服务器ip",
          });
        }
        this.ntpTestLoading = false;
        this.initClockConf(true);
      }).catch(err => {
        this.$notify({
          type: "error",
          message: "时间同步失败,请检查服务器ip"
          this.ntpTestLoading = false;
        });
        this.ntpTestLoading = false;
      })
    },
    submitAlarm() {
      saveAlarmConfig(this.alarmConf).then(rsp => {
      saveAlarmConfig({
        min_video_len: this.min_video_len,
        max_video_len: this.max_video_len,
      }).then((rsp) => {
        if (rsp && rsp.success) {
          this.$notify({
            type: "success",
            message: "保存成功"
            message: "保存成功",
          });
        }
      });
    },
    submitResource() {
      let regNum = /^[0-9]*$/;
      if (!this.vaildHost(this.ipServer.localhost)) {
        this.$notify({
          type: "warning",
          message: "请输入正确格式得域名!"
        })
        return false;
      }
      if (!regNum.test(this.ipServer.localFilePort)) {
        this.$notify({
          type: 'warning',
          message: "请输入正确的端口号!"
        })
        return false;
      }
      saveResourceConfig({
        domain: this.ipServer.localhost,
        ipType: this.ipServer.diyOrLocalIP,
        serviceIp: this.ipServer.ip,
        filePort: Number(this.ipServer.localFilePort)
      }).then(res => {
        if (res && res.success) {
          this.$notify({
            type: "success",
            message: "保存成功"
          });
        } else {
          this.$notify({
            type: "error",
            message: "保存失败"
          });
        }
      })
    },
    onIpBlur(e, ip) {
      console.log(e, ip);
    },
    // submitResource() {
    //   let regNum = /^[0-9]*$/;
    //   if (!this.vaildHost(this.ipServer.localhost)) {
    //     this.$notify({
    //       type: "warning",
    //       message: "请输入正确格式得域名!",
    //     });
    //     return false;
    //   }
    //   if (!regNum.test(this.ipServer.localFilePort)) {
    //     this.$notify({
    //       type: "warning",
    //       message: "请输入正确的端口号!",
    //     });
    //     return false;
    //   }
    //   saveResourceConfig({
    //     domain: this.ipServer.localhost,
    //     ipType: this.ipServer.diyOrLocalIP,
    //     serviceIp: this.ipServer.ip,
    //     filePort: Number(this.ipServer.localFilePort),
    //   }).then((res) => {
    //     if (res && res.success) {
    //       this.$notify({
    //         type: "success",
    //         message: "保存成功",
    //       });
    //     } else {
    //       this.$notify({
    //         type: "error",
    //         message: "保存失败",
    //       });
    //     }
    //   });
    // },
    // onIpBlur(e, ip) {
    //   console.log(e, ip);
    // },
    formatTime(number, format) {
      var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
      var formateArr = ["Y", "M", "D", "h", "m", "s"];
      var returnArr = [];
      var date = new Date(number * 1000);
@@ -795,39 +911,35 @@
      return format;
    },
    //数据转化
    //数据转化
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
      n = n.toString();
      return n[1] ? n : "0" + n;
    },
    menuOpen(event) {
    },
    menuClose(event) {
    },
    handleEdit(row) {
      console.log(row);
      row.edit = true;
    },
    handleCancel(row) {
      row.edit = false;
      console.log(row);
    },
    handleSave(row) {
      console.log(row);
      row.edit = false;
      this.$notify({
        message: "保存成功",
        type: "success"
      });
    },
    menuOpen(event) {},
    menuClose(event) {},
    // handleEdit(row) {
    //   console.log(row);
    //   row.edit = true;
    // },
    // handleCancel(row) {
    //   row.edit = false;
    //   console.log(row);
    // },
    // handleSave(row) {
    //   console.log(row);
    //   row.edit = false;
    //   this.$notify({
    //     message: "保存成功",
    //     type: "success",
    //   });
    // },
    //校验域名
    vaildHost(str) {
      let re = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
      return re.test(str)
      let re = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/;
      return re.test(str);
    },
  }
  },
};
</script>
<style lang="scss">