zhangzengfei
2023-09-05 51ecc231aa4f73a5071e188b4528ab59d730b07f
src/pages/vindicate/index/App.vue
@@ -21,32 +21,14 @@
      @refreshPercent="getLeftPer"
      ref="view_1"
    ></systemClean>
    <updateSettings
      v-if="activePage == 0"
      style="width: 100%"
      ref="view_0"
    ></updateSettings>
    <updateSettings v-if="activePage == 0" style="width: 100%" ref="view_0"></updateSettings>
    <back-up v-if="activePage == 3" style="width: 100%"></back-up>
    <restartSettings
      v-if="activePage == 2"
      style="width: 100%"
      ref="view_2"
    ></restartSettings>
    <restartSettings v-if="activePage == 2" style="width: 100%" ref="view_2"></restartSettings>
    <sysInfo v-if="activePage == 4" style="width: 100%" ref="view_3"></sysInfo>
  </div>
  <div
    class="welcome-page"
    v-else
    ref="curPage"
    @click="showRecomand = false"
    @mouseup="mouseDownIndex = ''"
  >
    <div
      class="search-box"
      :class="showRecomand ? 'border-change' : ''"
      @click.stop
    >
  <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false" @mouseup="mouseDownIndex = ''">
    <div class="search-box" :class="showRecomand ? 'border-change' : ''" @click.stop>
      <!-- @blur="showRecomand = false" -->
      <el-input
        class="search-input"
@@ -61,17 +43,10 @@
      </el-input>
      <div class="search-res" v-if="showRecomand">
        <div
          class="res-bar"
          v-for="(item, index) in searchArrForShow"
          :key="index"
          @click="pickQuick(item.addr)"
        >
        <div class="res-bar" v-for="(item, index) in searchArrForShow" :key="index" @click="pickQuick(item.addr)">
          {{ item.name }}
        </div>
        <div class="no-res-bar" v-if="searchArrForShow.length == 0">
          没有找到与 {{ searchText }} 相关的结果
        </div>
        <div class="no-res-bar" v-if="searchArrForShow.length == 0">没有找到与 {{ searchText }} 相关的结果</div>
      </div>
      <div class="dummy-end" v-if="showRecomand" style="height: 14px"></div>
    </div>
@@ -95,13 +70,13 @@
</template>
<script>
import { freedisk } from "@/api/system";
import { getUrlKey } from "@/api/utils";
import systemClean from "../views/systemClean";
import updateSettings from "../views/updateSettings";
import BackUp from "../views/backUp";
import restartSettings from "../views/restartSettings";
import sysInfo from "../views/sysInfo";
import { freedisk } from "@/api/system"
import { getUrlKey } from "@/api/utils"
import systemClean from "../views/systemClean"
import updateSettings from "../views/updateSettings"
import BackUp from "../views/backUp"
import restartSettings from "../views/restartSettings"
import sysInfo from "../views/sysInfo"
export default {
  name: "settings",
  components: {
@@ -109,50 +84,50 @@
    updateSettings,
    BackUp,
    restartSettings,
    sysInfo,
    sysInfo
  },
  data() {
    return {
      menuArr: [
        {
          name: "更新设置",
          img_black: "/images/vindicate/更新设置-黑.png",
          img_white: "/images/vindicate/更新设置-白.png",
          img_welcome: "/images/vindicate/更新设置.png",
        },
        {
          name: "系统清理",
          img_black: "/images/vindicate/系统清理-黑.png",
          img_white: "/images/vindicate/系统清理-白.png",
          img_welcome: "/images/vindicate/系统清理.png",
        },
        // {
        //   name: "更新设置",
        //   img_black: "/images/vindicate/更新设置-黑.png",
        //   img_white: "/images/vindicate/更新设置-白.png",
        //   img_welcome: "/images/vindicate/更新设置.png",
        // },
        // {
        //   name: "系统清理",
        //   img_black: "/images/vindicate/系统清理-黑.png",
        //   img_white: "/images/vindicate/系统清理-白.png",
        //   img_welcome: "/images/vindicate/系统清理.png",
        // },
        {
          name: "重启设置",
          img_black: "/images/vindicate/重启设置-黑.png",
          img_white: "/images/vindicate/重启设置-白.png",
          img_welcome: "/images/vindicate/重启设置.png",
          img_welcome: "/images/vindicate/重启设置.png"
        },
        {
          name: "备份还原",
          img_black: "/images/vindicate/系统清理-黑.png",
          img_white: "/images/vindicate/系统清理-白.png",
          img_welcome: "/images/vindicate/系统清理.png",
          img_welcome: "/images/vindicate/系统清理.png"
        },
        {
          name: "系统信息",
          img_black: "/images/vindicate/系统信息-黑.png",
          img_white: "/images/vindicate/系统信息-白.png",
          img_welcome: "/images/vindicate/系统信息.png",
        },
          img_welcome: "/images/vindicate/系统信息.png"
        }
      ],
      searchArr: [
        { name: "系统设置", addr: [0] },
        { name: "系统更新", addr: [0, 0] },
        { name: "更新设置", addr: [0, 1] },
        { name: "系统清理", addr: [1] },
        // { name: "系统设置", addr: [0] },
        // { name: "系统更新", addr: [0, 0] },
        // { name: "更新设置", addr: [0, 1] },
        // { name: "系统清理", addr: [1] },
        { name: "重启设置", addr: [2] },
        { name: "系统信息", addr: [3] },
        { name: "系统信息", addr: [3] }
      ],
      activePage: 0,
      free: 0,
@@ -160,77 +135,74 @@
      showWelcome: true,
      searchText: "",
      showRecomand: false,
      mouseDownIndex: "",
    };
      mouseDownIndex: ""
    }
  },
  created() {
    let color = localStorage.getItem("--colorCard");
    let color = localStorage.getItem("--colorCard")
    if (color) {
      document.documentElement.style.setProperty("--colorCard", `${color}`);
      document.documentElement.style.setProperty("--colorCard", `${color}`)
    }
  },
  mounted() {
    const menu = getUrlKey("menu");
    const menu = getUrlKey("menu")
    if (menu) {
      this.activePage = this.menuArr.findIndex((x) => x.name == menu);
      this.activePage = this.menuArr.findIndex((x) => x.name == menu)
      // this.$nextTick(() => {
      //   this.$refs.netSettings.openRight(2);
      // });
    }
    this.getLeftPer();
    this.getLeftPer()
    window.addEventListener("message", (e) => {
      if (e.data.msg === "changeColor") {
        document.documentElement.style.setProperty(
          "--colorCard",
          `${e.data.color}`
        );
        document.documentElement.style.setProperty("--colorCard", `${e.data.color}`)
      }
      if (e.data.msg === "返回系统维护") {
        this.showWelcome = true;
        this.showWelcome = true
      }
    });
    })
  },
  methods: {
    openMenu(item, i) {
      this.activePage = i;
      this.activePage = i
    },
    getLeftPer() {
      freedisk().then((res) => {
        this.free = res.data.free;
        this.full = res.data.all;
      });
        this.free = res.data.free
        this.full = res.data.all
      })
    },
    pickQuick(addr) {
      if (addr.length == 1) {
        this.openWelcome(addr[0]);
        this.openWelcome(addr[0])
      } else {
        this.openWelcome(addr[0]);
        this.openWelcome(addr[0])
        this.$nextTick(() => {
          if (addr[0] == 1) {
            // addr[1] == 0
            //   ? this.changeSwitch("isNtp")
            //   : this.changeSwitch("isManual");
            return;
            return
          }
          this.$refs[`view_${addr[0]}`].openRight(addr[1]);
        });
          this.$refs[`view_${addr[0]}`].openRight(addr[1])
        })
      }
    },
    openWelcome(i) {
      this.showWelcome = false;
      this.openMenu(1, i);
    },
      this.showWelcome = false
      this.openMenu(1, i)
    }
  },
  computed: {
    searchArrForShow() {
      if (this.searchText == "") {
        return this.searchArr;
        return this.searchArr
      } else {
        return this.searchArr.filter((item) => {
          return item.name.indexOf(this.searchText.toUpperCase()) > -1;
        });
          return item.name.indexOf(this.searchText.toUpperCase()) > -1
        })
      }
    },
    }
  },
  watch: {
    showWelcome(newVal) {
@@ -238,22 +210,22 @@
        // 隐藏返回按按钮
        window.parent.postMessage(
          {
            msg: "hiddenBack",
            msg: "hiddenBack"
          },
          "*"
        );
        )
      } else {
        //显示返回按钮
        window.parent.postMessage(
          {
            msg: "showBack",
            msg: "showBack"
          },
          "*"
        );
        )
      }
    },
  },
};
    }
  }
}
</script>
<style lang="scss">
.welcome-page {
@@ -302,8 +274,7 @@
        line-height: 36px;
        outline: 0;
        padding: 0 20px;
        -webkit-transition: border-color 0.2s
          cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 100%;
        font-weight: bold;
@@ -522,5 +493,3 @@
  border-top: 2px solid #e1e0e6;
}
</style>