桌面开始菜单

heyujie

2021-07-22 eca3bc0ecb283d9e9402441c6ed3e3580621990f

桌面开始菜单

 src/pages/desktop/index/App.vue

@@ -83,7 +83,6 @@
  },
  methods: {
    onJumpToDock(item){
      debugger
      this.$refs.dock_model.onJumpToDock(item)
    },
    onChangeBg(v){

 src/pages/desktop/index/components/Tools.vue

@@ -15,23 +15,33 @@
        />
      </div>

      <div class="fast-path" :class="showFastPath?'fast-path-show':''" @click.stop>
      <div
        class="fast-path"
        :class="showFastPath ? 'fast-path-show' : ''"
        @click.stop
      >
        <div class="top">
          <img src="" alt="" />
          <span class="username">{{userInfo.username}}</span>
          <img :src="`data:image/png;base64,${userInfo.headpic}`" alt="" />

          <span class="username">{{ userInfo.username }}</span>
        </div>
        <div class="link-list">
          <div class="list-item" v-for="(x, i) in linkList" :key="i" @click="clickFastPath(x.name)">
          <div
            class="list-item"
            v-for="(x, i) in linkList"
            :key="i"
            @click="clickFastPath(x.name)"
          >
            {{ x.name }}
          </div>
        </div>
        <div class="bot">
          <div class="set" @click="gotoSet">
            <span class="icon iconfont">{{"\ue60f"}}</span>
            <span class="icon iconfont">{{ "\ue60f" }}</span>
            <span>设置</span>
          </div>
          <div class="exit" @click="toLogout">
            <span class="icon iconfont">{{"\ue60f"}}</span>
            <span class="icon iconfont">{{ "\ue60f" }}</span>
            <span>退出</span>
          </div>
        </div>
@@ -174,7 +184,11 @@
      notificationCenterVisible: false,
      notificationCenterMessageCount: 0,
      userInfo: {},
      linkList: [{name: "文档中心"}, {name: "系统监控器"}, { name: "日志管理" }],
      linkList: [
        { name: "文档中心" },
        { name: "系统监控器" },
        { name: "日志管理" },
      ],
      showPasswdForm: false,
      rules: {
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
@@ -183,7 +197,7 @@
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      showFastPath:false,
      showFastPath: false,
      passwdForm: {
        oldPwd: "",
        newPwd: "",
@@ -207,13 +221,13 @@
    ];
  },
  mounted() {
    document.addEventListener("click",(e) => {
    document.addEventListener("click", (e) => {
      // debugger
      // this.showFastPath=false
      if (this.showFastPath) {
        this.showFastPath=false
        this.showFastPath = false;
      }
    })
    });
  },
  methods: {
    submitForm(formName) {
@@ -260,7 +274,7 @@
    },

    togglePreference() {
      this.showFastPath = !this.showFastPath
      this.showFastPath = !this.showFastPath;
      this.$store.state.desktop.frames.forEach((frame) => {
        this.$store.commit("desktop/addMinDock", {
          id: frame.id,
@@ -287,23 +301,20 @@
        this.$store.commit("desktop/refreshFrame", dock);
      }
    },
    clickFastPath(name){
      debugger
      this.$emit("jumpToDock", name)

    clickFastPath(name) {
      this.$emit("jumpToDock", name);
    },
    gotoSet(){
      this.$emit("jumpToDock", "系统设置")

    gotoSet() {
      this.$emit("jumpToDock", "系统设置");
    },
    toolHover(dock) {
      //this.$parent.screenShot(dock)
    },
    toLogout() {
      let _this = this;
      this.$confirm("确定退出登录吗？","提示", {
      this.$confirm("确定退出登录吗？", "提示", {
        // center: true,
        type:"warning",
        type: "warning",
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure",
      })
@@ -430,74 +441,67 @@
  top: 55px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 1);
  transition: .2s;
  transition: 0.2s;
  display: none;
  .top{
        display: -webkit-box;
    display: -ms-flexbox;
  padding-top: 5px;
  box-sizing: border-box;
  .top {
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    /* justify-content: space-evenly; */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 70px;
    box-sizing: border-box;
    padding: 0 30px;
    img{
              height: 50px;
        width: 50px;
background-color: bisque;
        border-radius: 50%;
    img {
      height: 50px;
      width: 50px;
      background-color: bisque;
      border-radius: 50%;
    }
    .username{
    width: fit-content;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    margin-left: 10px;
    .username {
      width: fit-content;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      margin-left: 15px;
    }
  }
  .link-list{
        height: 180px;
  .link-list {
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .list-item{
          display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 25px;
    height: 25px;cursor: pointer;
    margin: 5px;
    .list-item {
      display: flex;
      width: 90%;
      box-sizing: border-box;
      padding: 0 20px;
      border-radius: 5px;
      font-size: 14px;
      line-height: 25px;
      height: 25px;
      cursor: pointer;
      margin: 5px;
    }
    .list-item:hover{
    background-color: rgba(231, 231, 231, 1);
    .list-item:hover {
      background-color: rgba(231, 231, 231, 1);
    }
  }
  .bot{
        position: absolute;
  .bot {
    position: absolute;
    bottom: 0;
    height: 60px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    .set,.exit{
          display: flex;
    align-items: center;
    width: 28%;
    justify-content: space-evenly;
    font-size: 14px;
    cursor: pointer;
    .set,
    .exit {
      display: flex;
      align-items: center;
      width: 28%;
      justify-content: space-evenly;
      font-size: 14px;
      cursor: pointer;
    }

  }
}

@@ -512,7 +516,7 @@
}

.fast-path-show {
  animation: move linear .2s 1;
  animation: move linear 0.2s 1;
  display: block;
}


 src/pages/desktop/index/components/ToolsEntry.vue

@@ -133,7 +133,6 @@


        if (msg.indexOf("changeBackground")>-1) {

        const name = e.data.msg.split("?")[1]

        debugger

        _this.$emit("changeBg", `/images/desktop/${name}.png`)

      }

      }

@@ -156,8 +155,6 @@
      return result

    },

    onJumpToDock(name){

      debugger



      let togo 

      this.carousels.forEach(arr => {

        arr.forEach(x => {


 src/pages/index/App.vue

@@ -139,7 +139,6 @@
              background: 'rgba(0, 0, 0, 0.7)'
            })
            this.testLogin()
            // return false
          } else {
            this.nullRule = {}
          }
@@ -170,9 +169,7 @@
        })
    },
    async getLoginUserData() {
      debugger
      let res = await getLoginUserData()
      debugger
      if (res.success) {
        sessionStorage.setItem('userInfo', JSON.stringify(res.data))
        this.$notify.success("登录成功！")

 src/pages/settings/components/BasicSetting.vue

New file
@@ -0,0 +1,1143 @@
<template>
  <div class="s-basic-setting">
    <el-tabs
      id="e-basic-setting"
      v-model="activeName"
      v-loading="loading"
      :element-loading-text="loadingText"
      type="border-card"
    >
      <!-- 本机信息 -->
      <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%"
          class="menu-css"
          @open="menuOpen"
          @close="menuClose"
        >
          <!-- 本机信息 -->
          <el-submenu index="0">
            <template slot="title">
              <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-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-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-form-item>
                  </el-col>
                </el-row>

                <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>
                    </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>
                    </el-form-item>
                  </el-col>
                </el-row>

                <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>
                    </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>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="mt15 mb10 save-btn">
                  <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>
            </template>
            <el-menu-item-group class="item-group desc-info">
              <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>
                </el-col>
                <!-- <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">设备编号</div>
                  <div class="xiangqing-info">{{sysinfo.deviceNum}}</div>
                </el-col>-->
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">设备型号</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>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">通道个数</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>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">web版本</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>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">CPU</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>
                </el-col>
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">运行时间</div>
                  <div class="xiangqing-info">{{ sysinfo.uptime }}</div>
                </el-col>
              </el-row>
            </el-menu-item-group>
          </el-submenu>
          <!-- 事件录像时长 -->
          <el-submenu index="2">
            <template slot="title">
              <b class="tree-font">事件录像时长</b>
            </template>
            <el-menu-item-group class="item-group">
              <el-form
                label-width="150px"
                class="alarmSetting"
                style="padding-left: 5px; padding-right: 5px"
              >
                <el-form-item label="视频截取最短时长" style="width: 724px">
                  <el-slider
                    id="cut_min_duration"
                    @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="min_len"
                    @change="fakeObj.min = +(min_len / 1.2)"
                    controls-position="right"
                    :min="5"
                    :max="120"
                    size="small"
                  ></el-input-number
                  >&nbsp;s
                </el-form-item>
                <el-form-item label="视频截取最长时长" style="width: 724px">
                  <el-slider
                    id="cut_max_duration"
                    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="max_len"
                    @change="fakeObj.max = +(max_len / 1.2)"
                    controls-position="right"
                    :min="5"
                    :max="120"
                    size="small"
                  ></el-input-number
                  >&nbsp;s
                </el-form-item>
                <div class="mt15 mb10 save-btn">
                  <el-button type="primary" @click="submitAlarm" size="small"
                    >保存</el-button
                  >
                </div>
              </el-form>
            </el-menu-item-group>
          </el-submenu>
          <!-- 对外服务IP 改名为外部网络(新tab)-->
        </el-menu>
      </el-tab-pane>

      <!-- 时间配置 -->
      <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 class="time-type">NTP校时</div>
            <div style="padding: 10px 0px">
              <el-radio v-model="syncType" label="1">NTP校时</el-radio>
            </div>
          </div>

          <el-form-item label="服务器地址">
            <ip-input
              :ip="ntpServer"
              @on-blur="ntpServer = arguments[0]"
              :disabled="syncType === '2'"
            ></ip-input>
          </el-form-item>

          <el-form-item label="校时时间间隔" style="width: 41.3%">
            <el-input-number
              v-model.number="timeInterval"
              :min="1"
              :max="60"
              placeholder="请输入"
              size="small"
              :controls="false"
              :disabled="syncType === '2'"
            ></el-input-number
            >&nbsp;&nbsp;&nbsp;分钟
            <el-button
              type="text"
              style="position: absolute; left: 330px"
              :disabled="syncType === '2'"
              @click="testNTP"
              :loading="ntpTestLoading"
              >测试</el-button
            >
          </el-form-item>

          <div style="text-align: left; padding: 10px 0px">
            <div class="time-type">手动校时</div>
            <div style="padding: 10px 0px">
              <el-radio v-model="syncType" label="2">手动校时</el-radio>
            </div>
          </div>

          <el-form-item label="设置时间">
            <el-date-picker
              v-model="settime"
              type="datetime"
              placeholder="选择日期时间"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              :disabled="syncType === '1'"
            ></el-date-picker>
            <el-checkbox
              v-model="settimeRadio"
              style="margin-left: 12px"
              @change="syncBrowser"
              :disabled="syncType === '1'"
              >同步本计算机时间</el-checkbox
            >
          </el-form-item>

          <el-col :span="12" style="padding-right: 40px">
            <el-form-item>
              <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')"
      >
        <cluster-management></cluster-management>
      </el-tab-pane>
      <!-- <el-tab-pane label="外部访问" name="fourth">
        <el-menu
          :default-openeds="openeds"
          background-color="#fff"
          text-color="#303133"
          active-text-color="#409EFF"
          style="height: 100%;"
          class="menu-css"
          @open="menuOpen"
          @close="menuClose"
        >
          <el-submenu index="0">
            <template slot="title">
              <b class="tree-font">外部访问设置</b>
            </template>
            <el-menu-item-group class="item-group">
              <el-form :model="sysinfo" :rules="rules" ref="sysinfo" label-width="100px">
                <div class="flex-box">
                  <label>设置外部IP</label>
                  <div style="width:300px;">
                    <ip-input :ip="ipServer.ip" @on-blur="ipServer.ip = arguments[0]"></ip-input>
                  </div>
                  <el-checkbox label="选用本机IP" size="small" style="margin-left: 20px"></el-checkbox>
                </div>
                <div class="flex-box">
                  <label>域名</label>
                  <el-input size="small" v-model="ipServer.localhost"></el-input>
                </div>
                <div class="flex-box">
                  <label>本地文件端口</label>
                  <el-input size="small" v-model="ipServer.localFilePort"></el-input>
                </div>
                <div class="mt15 mb10 save-btn">
                  <el-button type="primary" @click="submitSysinfo" size="small">保存</el-button>
                </div>
              </el-form>
            </el-menu-item-group>
          </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>
      <el-tab-pane
        label="广播设置"
        name="broadcast"
        v-if="isShow('settings:broadcast')"
      >
        <radio-set v-if="activeName === 'broadcast'"></radio-set>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getDevInfo,
  getAlarmConfig,
  saveDevInfo,
  saveAlarmConfig,
  getClockInfo,
  saveClockInfo,
  testNTPserver,
  getResourceConfig,
  saveResourceConfig,
} from "@/api/system";

import { isPort, isIPv4 } from "@/scripts/validate";
import ipInput from "@/components/subComponents/IPInput";
import TimeZones from "@/Pool/TimeZones";

import ClusterManagement from "./ClusterManagement";
import AuthorityManagement from "./AuthorityManagement";
import RadioSet from "./RadioSet";
import config from "../../../../package.json";

export default {
  name: "BasicSettings",
  components: {
    ipInput,
    ClusterManagement,
    AuthorityManagement,
    RadioSet,
  },
  computed: {
    min_video_len() {
      return Math.round(this.fakeObj.min * 1.2);
    },
    max_video_len() {
      return Math.round(this.fakeObj.max * 1.2);
    },
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
      ) {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        return loginName === "superadmin" || loginName === "basic";
      }
      return false;
    },
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus();
      },
    },
  },
  data() {
    return {
      loading: true,
      loadingText: "",
      gutter: 10,
      activeName: "sysInfo",
      timezone: "",
      syncType: "1",
      ntpServer: "",
      equipmentTime: "",
      NYPport: "",
      settime: "",
      timeInterval: 10,
      settimeRadio: false,
      clockTimer: null,
      browserTimer: null,
      timestamp: 0,
      sysinfo: {},
      alarmConf: {},
      min_len: 0,
      max_len: 0,
      fakeObj: {
        min: 0,
        max: 0,
      },
      originNetConfig: {
        ip: "",
        gw: "",
        mask: "",
        dns: "",
      },
      rules: {
        ip: [
          {
            required: true,
            message: "请输入IP地址",
            trigger: "change",
          },
          { validator: isIPv4, trigger: "change" },
        ],
        ServerIp: [
          {
            required: true,
            message: "请输入IP地址",
            trigger: "change",
          },
          { validator: isIPv4, trigger: "change" },
        ],
        ServerPort: [
          {
            required: true,
            message: "请输入端口",
            trigger: "change",
          },
          { validator: isPort, trigger: "change" },
        ],
        GbServerPort: [
          {
            required: true,
            message: "请输入端口",
            trigger: "change",
          },
          { validator: isPort, trigger: "change" },
        ],
        gateway: [
          {
            required: true,
            message: "请输入网关",
            trigger: "change",
          },
          { validator: isIPv4, trigger: "change" },
        ],
        dns: [
          {
            required: true,
            message: "请输入dns地址",
            trigger: "change",
          },
          { validator: isIPv4, trigger: "change" },
        ],
        server_name: [
          { required: true, message: "请输入名称", trigger: "change" },
        ],
        subMask: [
          {
            required: true,
            message: "请输入子网掩码",
            trigger: "change",
          },
          { validator: isIPv4, trigger: "change" },
        ],
      },
      openeds: ["0"],
      ipServer: {
        diyOrLocalIP: "1",
        ip: "",
        localhost: "",
        localFilePort: "",
      },
      locationCity: {
        province: "",
        city: "",
        county: "",
        provinceOptions: [],
        cityOptions: [],
        countyOptions: [],
      },
      webPort: 0,
      ntpTestLoading: false,
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
    };
  },
  created() {
    if (this.isShow("settings:sysInfo")) {
      this.activeName = "sysInfo";
    } else if (this.isShow("settings:timeSet")) {
      this.activeName = "timeSet";
    } else if (this.isShow("settings:cluster")) {
      this.activeName = "cluster";
    } else if (this.isShow("settings:permission")) {
      this.activeName = "permission";
    } else if (this.isShow("settings:broadcast")) {
      this.activeName = "broadcast";
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initSysinfo();
      // this.initAlarmConf();
      this.initResourceConfig();
      this.initClockConf();
      //this.markStartTime();
    });
  },
  beforeDestroy() {
    clearTimeout(this.clockTimer);
    clearInterval(this.browserTimer);
  },
  methods: {
    formatTooltip(v){
      return Math.round(v*1.2)
    },
    isShow(authority) {
      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.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;

              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;
          }

          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    secondsFormat(s) {
      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) => {
        if (rsp && rsp.success) {
          this.timezone = rsp.data.time_zone;
          if (!ntpTest) {
            this.syncType = rsp.data.ntp ? "1" : "2";
          }
          if (rsp.data.ntp) {
            this.ntpServer = rsp.data.ntp_server;
            this.timeInterval = rsp.data.interval;
          }
          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.clockTimer = setTimeout(() => {
        this.runClock();
      }, 1000);
    },
    initAlarmConf() {
      // getAlarmConfig().then(rsp => {
      //   if (rsp && rsp.success) {
      //     this.alarmConf = rsp.data;
      //   }
      // });
    },
    initResourceConfig() {
      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;
        }
      });
    },
    syncBrowser(enable) {
      if (!enable) {
        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);
      }
    },
    markStartTime() {
      let timestamp = new Date().getTime() / 1000;
      this.settime = this.formatTime(timestamp, "Y-M-D h:m:s");
    },
    submitSysinfo() {
      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) {
              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.$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: "本机信息保存成功",
                      });
                    }
                    this.initSysinfo();
                    this.loading = false;
                  })
                  .catch((err) => {
                    this.loading = false;
                    clearTimeout(changeIPTimer);
                    this.$notify({
                      type: "error",
                      message: "保存失败",
                    });
                  });
              })
              .catch((err) => {});
          } else {
            saveDevInfo(this.sysinfo).then((rsp) => {
              if (rsp && rsp.success) {
                this.$notify({
                  type: "success",
                  message: "本机信息保存成功",
                });
                this.initSysinfo();
              }
            });

            if (this.sysinfo.server_port !== this.webPort) {
              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);
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    checkTimeZone(val) {},
    submitClock() {
      if (this.syncType === "1") {
        if (this.ntpServer === "") {
          this.$notify({
            type: "error",
            message: "NTP 服务器地址不能为空",
          });
          return false;
        } else if (this.timeInterval === "") {
          this.timeInterval = 1;
        }
      } else {
        if (this.settime === "") {
          this.$notify({
            type: "error",
            message: "设置时间不能为空",
          });
          return false;
        }
      }
      let requestBody = {
        timeZone: this.timezone,
        ntp: this.syncType === "1",
        ntpServer: this.ntpServer,
        interval: this.timeInterval,
        newTime: this.settime,
      };
      saveClockInfo(requestBody).then((rsp) => {
        if (rsp && rsp.success) {
          this.$notify({
            type: "success",
            message: "设置成功",
          });
        }
        this.initClockConf();
      });
    },
    testNTP() {
      this.ntpTestLoading = true;
      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: "时间同步失败,请检查服务器ip",
          });
          this.ntpTestLoading = false;
        });
    },
    submitAlarm() {
      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: "保存成功",
          });
        }
      });
    },
    // 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 returnArr = [];

      var date = new Date(number * 1000);
      returnArr.push(date.getFullYear());
      returnArr.push(this.formatNumber(date.getMonth() + 1));
      returnArr.push(this.formatNumber(date.getDate()));

      returnArr.push(this.formatNumber(date.getHours()));
      returnArr.push(this.formatNumber(date.getMinutes()));
      returnArr.push(this.formatNumber(date.getSeconds()));

      for (var i in returnArr) {
        format = format.replace(formateArr[i], returnArr[i]);
      }
      return format;
    },

    //数据转化
    formatNumber(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",
    //   });
    // },
    //校验域名
    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);
    },
  },
};
</script>
<style lang="scss">
.s-basic-setting {
  width: 100%;
  height: 100%;
  .el-form {
    width: 1000px;

    // margin-left: -80px;
    .el-form-item {
      text-align: left;
      &.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
        margin-left: -8px;
      }
      .el-button {
        float: right;
      }

      .el-form-item__content {
        text-align: left;
        input {
          max-width: 360px;
        }
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 216px;
        }
        .el-checkbox__label {
          padding-left: 5px;
        }
      }

      .el-form-item__label {
        text-align: left;
      }
    }
  }
  .alarmSetting {
    .el-input {
      width: 100%;
      // padding-right: 10px;
    }
    .el-select {
      max-width: 113px;
    }
    .el-slider {
      width: calc(100% - 120px);
      display: inline-block;
      padding-right: 30px;
      box-sizing: border-box;
      vertical-align: middle;
    }
    .el-input-number {
      width: 100px;
      display: inline-block;
      .el-input {
        width: 100%;
      }
    }
  }

  .time-type {
    height: 25px;
    width: 413px;
    line-height: 28px;
    padding: 3px 23px;
    font-size: 14px;
    font-weight: 600;
    background-color: #e4e6ed;
  }

  #cut_min_duration {
    .el-slider__bar {
      background-color: #3d68e1;
    }
    .el-slider__button {
      width: 10px;
      height: 10px;
      border: 4px solid #3d68e1;
    }
  }

  #cut_max_duration {
    .el-slider__bar {
      background-color: #ff9e6e;
    }
    .el-slider__button {
      width: 10px;
      height: 10px;
      border: 4px solid #ff9e6e;
    }
  }
  .menu-css,
  .el-menu {
    border-right: none;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 10px;
    background-color: #ffffff;
    .el-submenu__title {
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      color: #303133;
      padding: 0 20px;
      list-style: none;
      cursor: pointer;
      position: relative;
      -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
      transition: border-color 0.3s, background-color 0.3s, color 0.3s;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      white-space: nowrap;
    }
    .tree-font {
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #222222;
      text-align: left;
    }
    li {
      text-align: left;
      .el-submenu__title {
        // border-bottom: solid 1px #e6e6e6;
        padding-left: 10px !important;
        background-color: #e4e6ed !important;
        border-radius: 2px;
        .el-submenu__icon-arrow {
          position: absolute;
          top: 50%;
          right: auto;
          left: 135px;
          margin-top: -7px;
          -webkit-transition: -webkit-transform 0.3s;
          transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
          transition: transform 0.3s, -webkit-transform 0.3s;
          font-size: 12px;
        }
      }
    }
  }
  .save-btn {
    text-align: right;
    position: relative;
    right: 40px;
  }
}
</style>
<style lang="scss" scoped>
.flex-box {
  display: flex;
  height: 50px;
  label {
    width: 120px;
  }
  .el-input {
    width: 300px;
  }
}
.desc-info {
  margin-bottom: 14px;
  .flex-box {
    height: 40px;
    line-height: 40px;
    .xiangqin-label {
      width: 80px;
    }
  }
}
.menu-css,
.el-menu {
  border-right: none;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #ffffff;

  .tree-font {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #222222;
    text-align: left;
  }
  li {
    text-align: left;
    .el-submenu__title {
      .el-submenu__icon-arrow {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -7px;
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
        font-size: 12px;
      }
    }
  }
}
</style>

 src/pages/settings/views/generalSettings.vue

@@ -60,27 +60,25 @@
          <div class="min-dur">

            <div class="title">抓拍前录像时长</div>

            <div class="entity">

              <div class="sec">

                {{min_video_len }}s

              </div>

              <div class="sec">{{ min_video_len }}s</div>

              <div class="block">

                <el-slider

                  v-model="fakeObj.min"

                  id="cut_min_duration"

                  :min="5 / 1.2"

                  :max="100"

                  @input="min_len=min_video_len"

                  :show-tooltip="false"

                  :max="100" :step="5 / 1.2"

                  @input="min_len = min_video_len"

                  show-stops

                  :show-tooltip="true"

                  :format-tooltip="formatTooltip"

                ></el-slider>

                <!-- show-stops

                  :step="5/1.2" -->

              </div>

              <el-input-number

                v-model="min_len"

                @change="fakeObj.min=+((min_len/1.2))"

                @change="fakeObj.min = +(min_len / 1.2)"

                controls-position="right"

                :min="5"

                :max="120"

                :min="5" :step="5"

                :max="120" step-strictly

                size="small"

              ></el-input-number

              >&nbsp;s

@@ -89,22 +87,24 @@
          <div class="min-dur">

            <div class="title">抓拍后录像时长</div>

            <div class="entity">

              <div class="sec">  {{ max_video_len }} s</div>

              <div class="sec">{{ max_video_len }} s</div>

              <div class="block">

                <el-slider

                  v-model="fakeObj.max"

                  id="cut_max_duration"

                  :min="5 / 1.2"

                  @input="max_len=max_video_len"

                  :max="100"

                  :show-tooltip="false"

                  @input="max_len = max_video_len"

                  :max="100" :step="5 / 1.2"

                  show-stops

                  :format-tooltip="formatTooltip"

                  :show-tooltip="true"

                ></el-slider>

              </div>

              <el-input-number

                v-model="max_len"

                @change="fakeObj.max=+((max_len/1.2))"

                @change="fakeObj.max = +(max_len / 1.2)"

                controls-position="right"

                :min="5"

                :min="5" :step="5" step-strictly

                :max="120"

                size="small"

              ></el-input-number

@@ -248,15 +248,11 @@
      curPlayingIndex: null,

      showUpload: false,

      activeIcons: 0,

      // alarmConf: {

      //   min_video_len: 10,

      //   max_video_len: 15,

      // },

      min_len:10,

      max_len:15,

      fakeObj:{

        min:10,

        max:15

      min_len: 0,

      max_len: 0,

      fakeObj: {

        min: 0,

        max: 0,

      },

      menuArr: [

        { name: "设备信息", icon: "\ue933" },

@@ -310,14 +306,17 @@
    });

  },

  computed: {

    min_video_len(){

      return +((this.fakeObj.min* 1.2).toFixed(0))

    min_video_len() {

      return Math.round(this.fakeObj.min * 1.2);

    },

    max_video_len(){

      return +((this.fakeObj.max* 1.2).toFixed(0))

    max_video_len() {

      return Math.round(this.fakeObj.max * 1.2);

    },

  },

  methods: {

    formatTooltip(v) {

      return Math.round(v * 1.2);

    },

    pickBg(item, i) {

      this.activeBg = i;

      let message = "changeBackground?" + item.name;

@@ -361,9 +360,8 @@
        this.deviceInfo.disks = "( " + info.disk + ") ";

        this.deviceInfo.memory =

          (info.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB";

        this.min_len = basic.min_video_len

        this.fakeObj.min = +((basic.min_video_len/1.2).toFixed(0));

        this.fakeObj.max = +((basic.max_video_len/1.2).toFixed(0));

        this.fakeObj.min = basic.min_video_len / 1.2;

        this.fakeObj.max = basic.max_video_len / 1.2;

      });

    },

    getSounds() {

@@ -435,13 +433,12 @@
        "rgba(233, 233, 233, 1)";

    },

    submitAlarm() {

      debugger;

      saveAlarmConfig({

        min_video_len: this.min_video_len,

        max_video_len:  this.max_video_len

        max_video_len: this.max_video_len,

      }).then((res) => {

        if (res && res.success) {

          this.getDeviceInfo()

          this.getDeviceInfo();

          this.$notify({

            type: "success",

            message: "保存成功",


 src/pages/syslog/views/operationLog.vue

@@ -350,7 +350,8 @@
        display: flex;

        align-items: baseline;

        width: fit-content;

        margin-right: 20px;    min-width: 120px;

        margin-right: 20px;

        min-width: 120px;

        .name {

          margin-right: 5px;

          min-width: fit-content;

@@ -378,9 +379,10 @@
    }

  }

  .el-pagination {

    padding: 20px 5px;    height: 100%;

    box-sizing: border-box;    background-color: white;



    padding: 20px 5px;

    height: 100%;

    box-sizing: border-box;

    background-color: white;

  }

}

</style>


 src/pages/syslog/views/pollingLog.vue

@@ -11,7 +11,7 @@
          <div class="opts">

            <div class="opt" @click="openDialog">选择摄像机</div>

          </div>

          <div class="pick-num">已选（{{pickNum}}）</div>

          <div class="pick-num">已选 : {{ pickNum }}</div>

        </div>

        <div class="search">

          <el-input

@@ -77,11 +77,22 @@
        ></el-table-column>

        <el-table-column

          :align="'center'"

          prop="procName"

          prop="minute"

          label="轮询时长（分）"

        ></el-table-column>

      </el-table>

    </div>



    <el-pagination

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page="page"

      :page-sizes="[15, 30, 50, 100]"

      :page-size="15"

      layout="total, sizes, prev, pager, next, jumper"

      :total="total"

    >

    </el-pagination>



    <el-dialog

      title="选择摄像机"

@@ -142,7 +153,7 @@
      dialogVisible: false,

      procID: "",

      procName: "",

      pickNum:0

      pickNum: 0,

    };

  },

  mounted() {

@@ -151,6 +162,14 @@
    this.getOptions();

  },

  methods: {

    handleSizeChange(val) {

      this.pageSize = val;

      this.getOperationLog();

    },

    handleCurrentChange(val) {

      this.page = val;

      this.getOperationLog();

    },

    cancelShow() {

      this.dialogVisible = false;

      this.pickAllNot();

@@ -163,7 +182,7 @@
    },

    confirmCamera() {

      const selectedIDs = this.$refs.cameraTree.getCheckedKeys();

      this.pickNum = selectedIDs.length

      this.pickNum = selectedIDs.length;

      this.procID = selectedIDs.join(",");

      this.getScheduleLog();

      this.dialogVisible = false;

@@ -279,15 +298,17 @@
        display: flex;

        justify-content: space-between;

        align-items: center;

        .title,.pick-num {

        .title,

        .pick-num {

          margin-right: 10px;

          font-size: 14px;

          min-width: fit-content;

        }

        .opts {

          display: flex;

          justify-content: space-between;

          .opt {

            width: fit-content;

            width: 70px;

            height: 32px;

            padding: 0 15px;

            border-radius: 4px;

@@ -327,6 +348,7 @@
    border-radius: 5px;

    padding: 12px;

    background-color: white;

    
    .tableBox {

      th {

        padding: 0 !important;

@@ -340,5 +362,11 @@
      }

    }

  }

  .el-pagination {

    padding: 20px 5px;

    height: 100%;

    box-sizing: border-box;

    background-color: white;

  }

}

</style>