修复系统设置菜单交互

zhangzengfei

2023-09-06 dface8e086f20da29a22c6a5e61bc7b1aefaa984

 src/pages/settings/index/index.vue

@@ -2,11 +2,10 @@
  <div class="container" v-if="!showWelcome">
    <div class="container-left">
      <div
        class="left-card"
        :class="activeIndex == i ? 'left-card-active' : ''"
        v-for="(item, i) in menuArr"
        :key="i"
        @click="openMenu(i)"
        :class="activeIndex == item.name ? 'left-card-active left-card' : 'left-card'"
        @click="openMenu(item.name)"
      >
        <img :src="item.blackIcon" class="b" alt="" />
        <img :src="item.whiteIcon" class="w" alt="" />
@@ -14,8 +13,8 @@
      </div>
    </div>

    <div class="container-center" v-if="activeIndex == 0">
      <div class="account-left" v-if="activeIndex == 0">
    <div class="container-center" v-if="activeIndex == '账户'">
      <div class="account-left">
        <div
          class="account-list"
          :class="{ 'account-list-scroll': account_list_scroll }"
@@ -46,8 +45,8 @@
    </div>
    <div
      class="container-right"
      v-if="activeIndex == 0 || activeIndex == 1"
      :class="activeIndex == 0 ? 'container-right-for-account' : ''"
      v-if="activeIndex == '账户' || activeIndex == '日期时间'"
      :class="activeIndex == '账户' ? 'container-right-for-account' : ''"
    >
      <div class="account-right" v-if="activeIndex == 0">
        <div class="account-content" v-if="inAccountDetail == false && isAddAccount == false">
@@ -212,7 +211,7 @@
        </div>
      </div>

      <div class="datetime-right" v-if="activeIndex == 1">
      <div class="datetime-right" v-if="activeIndex == '日期时间'">
        <div class="datetime-left">
          <div class="device-time">
            <div class="title">
@@ -409,13 +408,13 @@
      </div>
    </div>

    <clusterManagement v-if="activeIndex == 2" ref="view_2" style="width: 100%"></clusterManagement>
    <netSettings ref="view_3" v-if="activeIndex == 3" style="width: 100%"></netSettings>
    <keyboardLanguage ref="view_4" v-if="activeIndex == 4" style="width: 100%"></keyboardLanguage>
    <generalSettings ref="view_5" v-if="activeIndex == 5" style="width: 100%"></generalSettings>
    <deviceInfo v-if="activeIndex == 6" style="width: 100%" ref="view_6"></deviceInfo>
    <Authorization v-if="activeIndex == 7" style="width: 100%" ref="view_7"> </Authorization>
    <WebManage v-if="activeIndex == 8"></WebManage>
    <clusterManagement v-if="activeIndex == '集群管理'" ref="view_2" style="width: 100%"></clusterManagement>
    <netSettings ref="网络设置" v-if="activeIndex == '网络设置'" style="width: 100%"></netSettings>
    <keyboardLanguage ref="键盘和语言" v-if="activeIndex == '键盘和语言'" style="width: 100%"></keyboardLanguage>
    <generalSettings ref="通用设置" v-if="activeIndex == '通用设置'" style="width: 100%"></generalSettings>
    <deviceInfo v-if="activeIndex == '设备信息'" style="width: 100%" ref="view_6"></deviceInfo>
    <Authorization v-if="activeIndex == '授权管理'" style="width: 100%" ref="view_7"> </Authorization>
    <WebManage v-if="activeIndex == '域名管理'"></WebManage>
  </div>
  <div class="welcome-page" v-else ref="curPage" @mouseup="mouseDownIndex = ''">
    <div class="search-box" :class="showRecomand ? 'border-change' : ''" @click.stop>
@@ -441,9 +440,9 @@
    <div class="nav-items">
      <div
        class="nav-child"
        @click="openWelcome(i)"
        @mousedown="mouseDownIndex = i"
        :class="mouseDownIndex === i ? 'nav-child-active' : ''"
        @click="openWelcome(item.name)"
        @mousedown="mouseDownIndex = item.name"
        :class="mouseDownIndex === item.name ? 'nav-child-active' : ''"
        v-for="(item, i) in menuArr"
        :key="i"
      >
@@ -544,22 +543,22 @@
      timezone: "",
      showRecomand: false,
      searchArr: [
        { name: "账户", addr: [0] },
        { name: "通用设置", addr: [5] },
        { name: "时间录像时长", addr: [5, 0] },
        { name: "事件声音", addr: [5, 1] },
        { name: "个性化设置", addr: [5, 2] },
        { name: "集群管理", addr: [2] },
        { name: "网络设置", addr: [3] },
        { name: "无线网络", addr: [3, 1] },
        { name: "有线网络", addr: [3, 2] },
        { name: "设备信息", addr: [6] },
        { name: "日期时间", addr: [1] },
        { name: "NTP校时", addr: [1, 0] },
        { name: "手动校时", addr: [1, 1] },
        { name: "键盘和语言", addr: [4] },
        { name: "系统语言", addr: [4, 0] },
        { name: "键盘管理", addr: [4, 1] }
        // { name: "账户", addr: [0] },
        // { name: "通用设置", addr: [5] },
        // { name: "时间录像时长", addr: [5, 0] },
        // { name: "事件声音", addr: [5, 1] },
        // { name: "个性化设置", addr: [5, 2] },
        { name: "集群管理", addr: ["集群管理"] },
        { name: "网络设置", addr: ["网络设置"] },
        { name: "无线网络", addr: ["网络设置", 1] },
        { name: "有线网络", addr: ["网络设置", 2] },
        { name: "设备信息", addr: ["设备信息"] },
        { name: "日期时间", addr: ["日期时间"] },
        { name: "NTP校时", addr: ["日期时间", 0] },
        { name: "手动校时", addr: ["日期时间", 1] },
        { name: "键盘和语言", addr: ["键盘和语言"] },
        { name: "系统语言", addr: ["键盘和语言", 0] },
        { name: "键盘管理", addr: ["键盘和语言", 1] }
      ],
      inputNickName: "",
      showHourInput: false,
@@ -583,74 +582,85 @@
      settime: "",
      weekday: "",
      menuArr: [
        // {
        //   name: "账户",
        //   icon: "\ue6de",
        //   imgUrl: "/images/settings/账户-蓝.png",
        //   blackIcon: "/images/settings/黑色一级icon/账户.png",
        //   whiteIcon: "/images/settings/白色一级icon/账户.png",
        // },
        {
          name: "账户",
          icon: "\ue6de",
          imgUrl: "/images/settings/账户-蓝.png",
          blackIcon: "/images/settings/黑色一级icon/账户.png",
          whiteIcon: "/images/settings/白色一级icon/账户.png",
          hidden: true
        },
        {
          name: "日期时间",
          icon: "\ue6ff",
          imgUrl: "/images/settings/时间日期.png",
          blackIcon: "/images/settings/黑色一级icon/时间信息.png",
          whiteIcon: "/images/settings/白色一级icon/时间日期.png"
          whiteIcon: "/images/settings/白色一级icon/时间日期.png",
          hidden: false
        },
        {
          name: "集群管理",
          icon: "\ue6df",
          imgUrl: "/images/settings/集群管理.png",
          blackIcon: "/images/settings/黑色一级icon/集群管理.png",
          whiteIcon: "/images/settings/白色一级icon/集群管理.png"
          whiteIcon: "/images/settings/白色一级icon/集群管理.png",
          hidden: false
        },
        {
          name: "网络设置",
          icon: "\ue6dd",
          imgUrl: "/images/settings/网络设置.png",
          blackIcon: "/images/settings/黑色一级icon/网络设置.png",
          whiteIcon: "/images/settings/白色一级icon/网络设置.png"
          whiteIcon: "/images/settings/白色一级icon/网络设置.png",
          hidden: false
        },
        {
          name: "键盘和语言",
          icon: "\ue6dc",
          imgUrl: "/images/settings/键盘和语言.png",
          blackIcon: "/images/settings/黑色一级icon/键盘和语言.png",
          whiteIcon: "/images/settings/白色一级icon/键盘和语言.png"
          whiteIcon: "/images/settings/白色一级icon/键盘和语言.png",
          hidden: false
        },
        {
          name: "通用设置",
          icon: "\ue6db",
          imgUrl: "/images/settings/通用设置.png",
          blackIcon: "/images/settings/黑色一级icon/通用设置.png",
          whiteIcon: "/images/settings/白色一级icon/通用设置.png"
          whiteIcon: "/images/settings/白色一级icon/通用设置.png",
          hidden: true
        },
        // {
        //   name: "设备信息",
        //   icon: "\ue756",
        //   imgUrl: "/images/settings/设备信息.png",
        //   blackIcon: "/images/settings/黑色一级icon/设备信息.png",
        //   whiteIcon: "/images/settings/白色一级icon/设备信息.png",
        // },
        {
          name: "设备信息",
          icon: "\ue756",
          imgUrl: "/images/settings/设备信息.png",
          blackIcon: "/images/settings/黑色一级icon/设备信息.png",
          whiteIcon: "/images/settings/白色一级icon/设备信息.png",
          hidden: false
        },
        {
          name: "授权管理",
          icon: "\ue7e9;",
          imgUrl: "/images/settings/授权管理.png",
          blackIcon: "/images/settings/黑色一级icon/授权管理.png",
          whiteIcon: "/images/settings/白色一级icon/授权管理.png"
          whiteIcon: "/images/settings/白色一级icon/授权管理.png",
          hidden: false
        },
        {
          name: "域名管理",
          icon: "\ue6db",
          imgUrl: "/images/settings/通用设置.png",
          blackIcon: "/images/settings/黑色一级icon/通用设置.png",
          whiteIcon: "/images/settings/白色一级icon/通用设置.png"
          whiteIcon: "/images/settings/白色一级icon/通用设置.png",
          hidden: false
        }
      ],
      ].filter((item) => {
        return !item.hidden
      }),
      accountArr: [],
      jpgArr: [],
      isNtp: false,
      activeIndex: 0,
      activeIndex: "日期时间",
      clockTimer: null,
      inputHour: "",
      inputMin: "",
@@ -1033,11 +1043,13 @@
    },
    openMenu(i) {
      this.activeIndex = i
      if (this.activeIndex == 1) {
      if (this.activeIndex == "日期时间") {
        this.initClockConf()
      }
      console.log(this.activeIndex)
    },
    openWelcome(i) {
      console.log("welcome", i)
      this.showWelcome = false
      this.openMenu(i)
    },
@@ -1106,10 +1118,10 @@
      } else {
        this.openWelcome(addr[0])
        this.$nextTick(() => {
          if (addr[0] == 1) {
          if (addr[0] == "日期时间") {
            return
          }
          this.$refs[`view_${addr[0]}`].openRight(addr[1])
          this.$refs[`${addr[0]}`].openRight(addr[1])
        })
      }
    },