| | |
| | | @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" |
| | |
| | | </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> |
| | |
| | | </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: { |
| | |
| | | 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, |
| | |
| | | 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) { |
| | |
| | | // 隐藏返回按按钮 |
| | | window.parent.postMessage( |
| | | { |
| | | msg: "hiddenBack", |
| | | msg: "hiddenBack" |
| | | }, |
| | | "*" |
| | | ); |
| | | ) |
| | | } else { |
| | | //显示返回按钮 |
| | | window.parent.postMessage( |
| | | { |
| | | msg: "showBack", |
| | | msg: "showBack" |
| | | }, |
| | | "*" |
| | | ); |
| | | ) |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss"> |
| | | .welcome-page { |
| | |
| | | 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; |
| | |
| | | border-top: 2px solid #e1e0e6; |
| | | } |
| | | </style> |
| | | |
| | | |