From feaf0a9778879ef211c5587a513ba4cbdabb52d0 Mon Sep 17 00:00:00 2001 From: ZZJ <10913410+zzj2100@user.noreply.gitee.com> Date: 星期四, 23 六月 2022 17:42:58 +0800 Subject: [PATCH] bug修复 --- src/pages/settings/views/generalSettings.vue | 351 ++++++++++++++++++++++++++++++++------------------------- 1 files changed, 197 insertions(+), 154 deletions(-) diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue index db07d76..35190ce 100644 --- a/src/pages/settings/views/generalSettings.vue +++ b/src/pages/settings/views/generalSettings.vue @@ -9,7 +9,9 @@ v-for="(item, i) in menuArr" :key="i" > - <span class="iconfont" :style="`font-size:${item.size}px;`">{{ item.icon }}</span> + <span class="iconfont" :style="`font-size:${item.size}px;`">{{ + item.icon + }}</span> <span class="title">{{ item.name }}</span> </div> </div> @@ -18,12 +20,12 @@ <div class="min-dur"> <div class="title">鎶撴媿鍓嶅綍鍍忔椂闀�</div> <div class="entity"> - <div class="sec">{{ min_video_len }}s</div> + <div class="sec">0s</div> <div class="block"> <el-slider v-model="fakeObj.min" id="cut_min_duration" - :min="5 / 1.2" + :min="0" :max="100" :step="5 / 1.2" @input="min_len = min_video_len" @@ -33,38 +35,28 @@ :format-tooltip="formatTooltip" ></el-slider> </div> + <div class="sec">120s</div> <el-input-number v-model="min_len" @change="fakeObj.min = +(min_len / 1.2)" - :min="5" + :min="0" :step="5" :max="120" step-strictly size="small" ></el-input-number - > s --> - - <el-input-number - v-model="min_len" - @change="fakeObj.min = +(min_len / 1.2)" - :min="5" - :step="5" - :max="120" - step-strictly - size="small" - ></el-input-number - > s + >s </div> </div> <div class="min-dur"> <div class="title">鎶撴媿鍚庡綍鍍忔椂闀�</div> <div class="entity"> - <div class="sec">{{ max_video_len }} s</div> + <div class="sec">0s</div> <div class="block"> <el-slider v-model="fakeObj.max" id="cut_max_duration" - :min="5 / 1.2" + :min="0" @input="max_len = max_video_len" :max="100" :step="5 / 1.2" @@ -73,10 +65,11 @@ :show-tooltip="true" ></el-slider> </div> + <div class="sec">120s</div> <el-input-number v-model="max_len" @change="fakeObj.max = +(max_len / 1.2)" - :min="5" + :min="0" :step="5" step-strictly :max="120" @@ -105,7 +98,12 @@ </div> <div class="sound-btns"> <span @click="togglePlay(item, i)"> - <span class="iconfont" v-if="!item.isPlay" style="cursor: pointer">{{ playSpan }}</span> + <span + class="iconfont" + v-if="!item.isPlay" + style="cursor: pointer" + >{{ playSpan }}</span + > <!-- <span class="iconfont" v-else style="cursor: pointer">{{ playSpan2 }}</span> --> @@ -129,13 +127,28 @@ ></i> <i v-else class="el-icon-video-pause"></i> --> </span> - <span class="icon iconfont del" style="cursor: pointer" @click="removeSound(item)">{{ delspan }}</span> + <span + class="icon iconfont del" + style="cursor: pointer" + @click="removeSound(item)" + >{{ delspan }}</span + > </div> </div> </div> <div v-if="showUpload" @click.stop> - <el-upload class="upload-demo" drag action="" :http-request="uploadSound" :show-file-list="false"> - <div class="info">璇峰皢澹伴煶浜嬩欢鏂囦欢鎷栨嫿鍒版澶勶紝鎴�<span class="info-click">鐐瑰嚮涓婁紶</span></div> + <el-upload + class="upload-demo" + drag + action="" + :http-request="uploadSound" + :show-file-list="false" + > + <div class="info"> + 璇峰皢澹伴煶浜嬩欢鏂囦欢鎷栨嫿鍒版澶勶紝鎴�<span class="info-click" + >鐐瑰嚮涓婁紶</span + > + </div> <div class="des" v-if="showUpload" @click.stop> 浠呮敮鎸乵p3銆亀av绛夋牸寮� </div> @@ -144,7 +157,9 @@ <div class="add-group"> <div class="add-btn"> - <span class="icon iconfont" @click.stop="showUpload = !showUpload"></span> + <span class="icon iconfont" @click.stop="showUpload = !showUpload" + ></span + > </div> </div> </div> @@ -152,7 +167,11 @@ <div class="self-setting" v-if="activePage == 2"> <div class="top-title">棰滆壊涓婚</div> <div class="color-bar"> - <div v-for="(item, index) in colorList" :key="index" style="border: none"> + <div + v-for="(item, index) in colorList" + :key="index" + style="border: none" + > <div class="color-option" v-if="universalColor != index" @@ -165,11 +184,14 @@ v-else :style="{ cursor: 'pointer', - border: `2px solid ${item.color}` + border: `2px solid ${item.color}`, }" @click="colorCard(item.color, index)" > - <div :style="{ backgroundColor: item.color }" class="color-option-content"></div> + <div + :style="{ backgroundColor: item.color }" + class="color-option-content" + ></div> </div> </div> </div> @@ -177,10 +199,18 @@ <div class="icon-bar" style="cursor: pointer" @click="selectIcons(0)"> <div class="bar-title"> <span class="title">闈㈡�ч鏍�</span> - <span class="icon iconfont" :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'"></span> + <span + class="icon iconfont" + :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'" + ></span + > </div> <div class="entity"> - <div class="entity-img" v-for="(item, i) in realIconList" :key="i"> + <div + class="entity-img" + v-for="(item, i) in realIconList" + :key="i" + > <img :src="item.url" alt="" /> </div> </div> @@ -188,10 +218,18 @@ <div class="icon-bar" style="cursor: pointer" @click="selectIcons(1)"> <div class="bar-title"> <span class="title">绠�绾﹂鏍�</span> - <span class="icon iconfont" :class="activeIcons == 1 ? 'icon-active' : 'icon-normal'"></span> + <span + class="icon iconfont" + :class="activeIcons == 1 ? 'icon-active' : 'icon-normal'" + ></span + > </div> <div class="entity"> - <div class="entity-img" v-for="(item, i) in flatIconList" :key="i"> + <div + class="entity-img" + v-for="(item, i) in flatIconList" + :key="i" + > <img :src="item.url" alt="" /> </div> </div> @@ -218,9 +256,9 @@ </template> <script> -import { saveAlarmConfig, getDevInfo } from "@/api/system" -import { uploadSound, getSoundList, deleteSound } from "@/api/event" -import { updateUser } from "@/api/user" +import { saveAlarmConfig, getDevInfo } from "@/api/system"; +import { uploadSound, getSoundList, deleteSound } from "@/api/event"; +import { updateUser } from "@/api/user"; export default { data() { return { @@ -235,12 +273,12 @@ max_len: 0, fakeObj: { min: 0, - max: 0 + max: 0, }, menuArr: [ { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue74f", size: 20 }, { name: "浜嬩欢澹伴煶", icon: "\ueb5e", size: 16 }, - { name: "涓�у寲璁剧疆", icon: "\ue750", size: 18 } + { name: "涓�у寲璁剧疆", icon: "\ue750", size: 18 }, ], soundList: [], activePage: 0, @@ -256,7 +294,7 @@ webVersion: "", disks: "", memory: "", - activeBg: 0 + activeBg: 0, }, isPlay: false, realIconList: [ @@ -266,7 +304,7 @@ { url: "/images/settings/闈㈡�у浘鏍�/4瀹夊叏甯芥娴�.png" }, { url: "/images/settings/闈㈡�у浘鏍�/5濂旇窇.png" }, { url: "/images/settings/闈㈡�у浘鏍�/6杞﹁締妫�娴�.png" }, - { url: "/images/settings/闈㈡�у浘鏍�/7鎶界儫.png" } + { url: "/images/settings/闈㈡�у浘鏍�/7鎶界儫.png" }, ], flatIconList: [ { url: "/images/settings/绠�绾﹀浘鏍�/1浠板崸妫�娴�.png" }, @@ -275,12 +313,12 @@ { url: "/images/settings/绠�绾﹀浘鏍�/4瀹夊叏甯芥娴�.png" }, { url: "/images/settings/绠�绾﹀浘鏍�/5濂旇窇.png" }, { url: "/images/settings/绠�绾﹀浘鏍�/6杞﹁締妫�娴�.png" }, - { url: "/images/settings/绠�绾﹀浘鏍�/7鎶界儫.png" } + { url: "/images/settings/绠�绾﹀浘鏍�/7鎶界儫.png" }, ], tableBGList: [ { name: "background", url: "/images/desktop/background.png" }, { name: "message", url: "/images/desktop/message.png" }, - { name: "weather", url: "/images/desktop/weather.png" } + { name: "weather", url: "/images/desktop/weather.png" }, ], universalColor: "", colorList: [ @@ -292,227 +330,229 @@ { name: 6, color: "#61E2EB" }, { name: 7, color: "#4E94FF" }, { name: 8, color: "#8E8CD8" }, - { name: 9, color: "#4C4A48" } - ] - } + { name: 9, color: "#4C4A48" }, + ], + }; }, mounted() { - this.getDeviceInfo() - this.getSounds() - const url = this.curUser.backgroundpic - this.activeIcons = this.curUser.useIconType - 1 + this.getDeviceInfo(); + this.getSounds(); + const url = this.curUser.backgroundpic; + this.activeIcons = this.curUser.useIconType - 1; this.universalColor = this.colorList.findIndex((x) => { - return x.color == localStorage.getItem("--colorCard") - }) + return x.color == localStorage.getItem("--colorCard"); + }); if (url) { this.activeBg = this.tableBGList.findIndex((x) => { - return x.url == url - }) + return x.url == url; + }); } else { - this.activeBg = 0 + this.activeBg = 0; } - this.eventAudio.addEventListener("ended", this.endedHandle, false) - this.$refs.curPage.addEventListener("click", this.clickHandle, false) + this.eventAudio.addEventListener("ended", this.endedHandle, false); + this.$refs.curPage.addEventListener("click", this.clickHandle, false); }, beforeDestroy() { - this.eventAudio.removeEventListener("ended", this.endedHandle, false) - this.$refs.curPage.removeEventListener("click", this.clickHandle, false) + this.eventAudio.removeEventListener("ended", this.endedHandle, false); + this.$refs.curPage.removeEventListener("click", this.clickHandle, false); }, computed: { min_video_len() { - return Math.round(this.fakeObj.min * 1.2) + return Math.round(this.fakeObj.min * 1.2); }, max_video_len() { - return Math.round(this.fakeObj.max * 1.2) + return Math.round(this.fakeObj.max * 1.2); }, curUser() { - return JSON.parse(sessionStorage.getItem("userInfo")) - } + return JSON.parse(sessionStorage.getItem("userInfo")); + }, }, methods: { endedHandle() { - let _this = this + let _this = this; if (_this.curPlayingIndex !== null && _this.soundList.length) { - _this.soundList[_this.curPlayingIndex].isPlay = false - _this.curPlayingIndex = null + _this.soundList[_this.curPlayingIndex].isPlay = false; + _this.curPlayingIndex = null; } }, clickHandle() { - let _this = this + let _this = this; if (this.showUpload) { - this.showUpload = false + this.showUpload = false; } }, formatTooltip(v) { - return Math.round(v * 1.2) + return Math.round(v * 1.2); }, pickBg(item, i) { - this.activeBg = i - let message = "changeBackground?" + item.name - window.parent.postMessage({ msg: message }, "*") + this.activeBg = i; + let message = "changeBackground?" + item.name; + window.parent.postMessage({ msg: message }, "*"); updateUser({ id: this.curUser.id, - backgroundpic: item.url + backgroundpic: item.url, }).then((res) => { if (res.success) { - sessionStorage.setItem("userInfo", JSON.stringify(res.data)) - debugger - this.$message.success(res.msg) + sessionStorage.setItem("userInfo", JSON.stringify(res.data)); + debugger; + this.$message.success(res.msg); } - }) - this.$forceUpdate() + }); + this.$forceUpdate(); }, togglePlay(item, i) { if (this.curPlayingIndex !== null) { - this.eventAudio.pause() - this.soundList[this.curPlayingIndex].isPlay = false + this.eventAudio.pause(); + this.soundList[this.curPlayingIndex].isPlay = false; if (this.curPlayingIndex === i) { - this.curPlayingIndex = null - return + this.curPlayingIndex = null; + return; } } - this.curPlayingIndex = i - this.eventAudio.src = "http://" + item.path + this.curPlayingIndex = i; + this.eventAudio.src = "http://" + item.path; if (item.isPlay) { - this.eventAudio.pause() + this.eventAudio.pause(); } else { - this.eventAudio.play() + this.eventAudio.play(); } - item.isPlay = !item.isPlay + item.isPlay = !item.isPlay; }, getDeviceInfo() { getDevInfo().then((res) => { - let info = res.data.deviceInfo - let basic = res.data - this.deviceInfo.cpu = info.cpu[0].modelName - this.deviceInfo.runningTime = this.secondsFormat(info.host.uptime) - this.deviceInfo.server_id = basic.server_id - this.deviceInfo.deviceModel = basic.deviceModel - this.deviceInfo.deviceDesc = basic.deviceDesc - this.deviceInfo.masterVersion = basic.masterVersion - this.deviceInfo.channelCount = basic.channelCount - this.deviceInfo.webVersion = "V2.0.0" - this.deviceInfo.disks = "( " + info.disk + ") " - this.deviceInfo.memory = (info.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB" - this.fakeObj.min = basic.min_video_len / 1.2 - this.fakeObj.max = basic.max_video_len / 1.2 - }) + let info = res.data.deviceInfo; + let basic = res.data; + this.deviceInfo.cpu = info.cpu[0].modelName; + this.deviceInfo.runningTime = this.secondsFormat(info.host.uptime); + this.deviceInfo.server_id = basic.server_id; + this.deviceInfo.deviceModel = basic.deviceModel; + this.deviceInfo.deviceDesc = basic.deviceDesc; + this.deviceInfo.masterVersion = basic.masterVersion; + this.deviceInfo.channelCount = basic.channelCount; + this.deviceInfo.webVersion = "V2.0.0"; + this.deviceInfo.disks = "( " + info.disk + ") "; + this.deviceInfo.memory = + (info.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB"; + this.fakeObj.min = basic.min_video_len / 1.2; + this.fakeObj.max = basic.max_video_len / 1.2; + }); }, getSounds() { getSoundList().then((res) => { if (res.success) { - this.soundList = res.data + this.soundList = res.data; this.soundList.forEach((x) => { - this.$set(x, "isPlay", false) - }) + this.$set(x, "isPlay", false); + }); } - }) + }); }, secondsFormat(s) { - var day = (s / (24 * 3600)) | 0 - var hour = ((s - day * 24 * 3600) / 3600) | 0 - var minute = ((s - day * 24 * 3600 - hour * 3600) / 60) | 0 - var second = s - day * 24 * 3600 - hour * 3600 - minute * 60 - return day + "澶� " + hour + "灏忔椂 " + minute + "鍒� " + second + "绉�" + var day = (s / (24 * 3600)) | 0; + var hour = ((s - day * 24 * 3600) / 3600) | 0; + var minute = ((s - day * 24 * 3600 - hour * 3600) / 60) | 0; + var second = s - day * 24 * 3600 - hour * 3600 - minute * 60; + return day + "澶� " + hour + "灏忔椂 " + minute + "鍒� " + second + "绉�"; }, uploadSound(params) { - let param = new FormData() - param.append("file", params.file) + let param = new FormData(); + param.append("file", params.file); uploadSound(param).then( (res) => { - this.$message.success("涓婁紶鎴愬姛") - this.showUpload = false - this.getSounds() + this.$message.success("涓婁紶鎴愬姛"); + this.showUpload = false; + this.getSounds(); }, (err) => { - this.$message.error("澹伴煶涓婁紶澶辫触") + this.$message.error("澹伴煶涓婁紶澶辫触"); } - ) + ); }, openRight(i) { - this.activePage = i + this.activePage = i; }, selectIcons(i) { - this.activeIcons = i + this.activeIcons = i; updateUser({ id: this.curUser.id, - iconType: i + 1 + iconType: i + 1, }).then((res) => { if (res.success) { - window.parent.postMessage({ msg: "AppUpdate" }, "*") - sessionStorage.setItem("userInfo", JSON.stringify(res.data)) - debugger - this.$message.success(res.msg) + window.parent.postMessage({ msg: "AppUpdate" }, "*"); + sessionStorage.setItem("userInfo", JSON.stringify(res.data)); + debugger; + this.$message.success(res.msg); } - }) + }); }, removeSound(item) { - const h = this.$createElement + const h = this.$createElement; const icon = this.$msgbox({ title: "", message: h( "div", { - style: "display: flex; flex-direction: column; justify-content: center; align-items: center;" + style: + "display: flex; flex-direction: column; justify-content: center; align-items: center;", }, [ h("span", { class: "icon iconfont warn-icon" }, `${this.warnSpn}`), h("span", { class: "warn-title" }, "鍒犻櫎浜嬩欢澹伴煶 "), - h("span", { class: "warn-dec" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺0闊�?") + h("span", { class: "warn-dec" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺0闊�?"), ] ), showCancelButton: true, confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷" + cancelButtonText: "鍙栨秷", }).then(() => { deleteSound({ - id: item.id + id: item.id, }).then( (res) => { if (res.success) { - this.getSounds() + this.getSounds(); this.$message({ type: "success", - message: "鍒犻櫎鎴愬姛!" - }) - this.showUpload = false + message: "鍒犻櫎鎴愬姛!", + }); + this.showUpload = false; } }, (err) => { - this.$message.error(err.msg) + this.$message.error(err.msg); } - ) - }) + ); + }); }, clickSound(item, i) { this.$refs["soundBar"].forEach((x) => { - x.style = "border: 2px solid #FFF;" - }) - this.$refs["soundBar"][i].style = "border: 2px solid #4E94FF;" + x.style = "border: 2px solid #FFF;"; + }); + this.$refs["soundBar"][i].style = "border: 2px solid #4E94FF;"; }, submitAlarm() { 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: "淇濆瓨鎴愬姛" - }) + message: "淇濆瓨鎴愬姛", + }); } - }) + }); }, colorCard(color, index) { - this.universalColor = index - document.documentElement.style.setProperty("--colorCard", `${color}`) - localStorage.setItem("--colorCard", `${color}`) - window.parent.postMessage({ msg: "changeColor", color }, "*") - } - } -} + this.universalColor = index; + document.documentElement.style.setProperty("--colorCard", `${color}`); + localStorage.setItem("--colorCard", `${color}`); + window.parent.postMessage({ msg: "changeColor", color }, "*"); + }, + }, +}; </script> <style scoped lang="scss"> @@ -578,8 +618,11 @@ border-top: 4px solid #f2f2f7; padding: 6px 18px 10px 10px; - .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before, - .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before { + .el-form-item.is-required:not(.is-no-asterisk) + > .el-form-item__label:before, + .el-form-item.is-required:not(.is-no-asterisk) + .el-form-item__label-wrap + > .el-form-item__label:before { display: none; } .el-select { @@ -725,13 +768,13 @@ .sec { min-width: 30px; line-height: 80px; - margin-right: 10px; + color: #333; font-size: 8px; } .block { flex: 1; - margin: 0 20px 0 6px; + margin: 0 0px 0 6px; } .el-input-number--small { width: 100px; -- Gitblit v1.8.0