From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/pages/settings/views/generalSettings.vue | 501 +++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 336 insertions(+), 165 deletions(-) diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue index 5fdca0a..2cd47a2 100644 --- a/src/pages/settings/views/generalSettings.vue +++ b/src/pages/settings/views/generalSettings.vue @@ -16,88 +16,47 @@ </div> </div> <div class="general-right"> - <!-- <div class="lang" v-if="activePage == 0"> - <div class="bar"> - <span class="name">璁惧ID</span> - <span class="desc">{{ deviceInfo.server_id }}</span> - </div> - <div class="bar"> - <span class="name">璁惧鍨嬪彿</span> - <span class="desc">{{ deviceInfo.deviceModel }}</span> - </div> - <div class="bar"> - <span class="name">璁惧绫诲瀷</span> - <span class="desc">{{ deviceInfo.deviceDesc }}</span> - </div> - <div class="bar"> - <span class="name">閫氶亾涓暟</span> - <span class="desc">{{ deviceInfo.channelCount }}</span> - </div> - <div class="bar"> - <span class="name">涓绘帶鐗堟湰</span> - <span class="desc">{{ deviceInfo.masterVersion }}</span> - </div> - <div class="bar"> - <span class="name">web鐗堟湰</span> - <span class="desc">{{ deviceInfo.webVersion }}</span> - </div> - <div class="bar"> - <span class="name">纭洏淇℃伅</span> - <span class="desc">{{ deviceInfo.disks }}</span> - </div> - <div class="bar"> - <span class="name">CPU</span> - <span class="desc">{{ deviceInfo.cpu }}</span> - </div> - <div class="bar"> - <span class="name">鍐呭瓨</span> - <span class="desc">{{ deviceInfo.memory }}</span> - </div> - <div class="bar"> - <span class="name">杩愯鏃堕棿</span> - <span class="desc">{{ deviceInfo.runningTime }}</span> - </div> - </div> --> - <div class="lang" v-if="activePage == 0"> + <div class="lang videoTime" v-if="activePage == 0"> <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" show-stops :show-tooltip="true" + tooltip-class="toolClass" :format-tooltip="formatTooltip" ></el-slider> </div> + <div class="sec" style="margin: 0 20px">120s</div> <el-input-number v-model="min_len" @change="fakeObj.min = +(min_len / 1.2)" - controls-position="right" - :min="5" + :min="0" :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" @@ -106,11 +65,11 @@ :show-tooltip="true" ></el-slider> </div> + <div class="sec" style="margin: 0 20px">120s</div> <el-input-number v-model="max_len" @change="fakeObj.max = +(max_len / 1.2)" - controls-position="right" - :min="5" + :min="0" :step="5" step-strictly :max="120" @@ -145,9 +104,21 @@ style="cursor: pointer" >{{ playSpan }}</span > - <span class="iconfont" v-else style="cursor: pointer">{{ + <!-- <span class="iconfont" v-else style="cursor: pointer">{{ playSpan2 - }}</span> + }}</span> --> + + <img + v-else + src="/images/settings/鏆傚仠.png" + alt="" + style=" + width: 16px; + hight: 16px; + cursor: pointer; + margin-top: 15px; + " + /> <!-- <i v-if="!item.isPlay" @@ -172,6 +143,7 @@ action="" :http-request="uploadSound" :show-file-list="false" + style="bottom: -94px; left: calc(50% - 217px)" > <div class="info"> 璇峰皢澹伴煶浜嬩欢鏂囦欢鎷栨嫿鍒版澶勶紝鎴�<span class="info-click" @@ -194,15 +166,43 @@ </div> <div class="self-setting" v-if="activePage == 2"> - <div class="top-title">鍥炬爣涓婚</div> + <div class="top-title">棰滆壊涓婚</div> + <div class="color-bar"> + <div + v-for="(item, index) in colorList" + :key="index" + style="border: none" + > + <div + class="color-option" + v-if="universalColor != index" + :style="{ cursor: 'pointer', backgroundColor: item.color }" + @click="colorCard(item.color, index)" + /> + <div + class="color-option color-option-active" + v-else + :style="{ + cursor: 'pointer', + border: `2px solid ${item.color}`, + }" + @click="colorCard(item.color, index)" + > + <div + :style="{ backgroundColor: item.color }" + class="color-option-content" + ></div> + </div> + </div> + </div> + <div class="top-title">鍥炬爣涓婚</div> <div class="icon-bar" style="cursor: pointer" @click="selectIcons(0)"> <div class="bar-title"> - <span class="title">鎵佸钩鍐欏疄鍥炬爣</span> + <span class="title">闈㈡�ч鏍�</span> <span class="icon iconfont" - style="color: #3d68e1; font-size: 18px" - v-show="activeIcons == 0" + :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'" ></span > </div> @@ -211,7 +211,6 @@ class="entity-img" v-for="(item, i) in realIconList" :key="i" - @click="colorCard(item.color)" > <img :src="item.url" alt="" /> </div> @@ -219,11 +218,10 @@ </div> <div class="icon-bar" style="cursor: pointer" @click="selectIcons(1)"> <div class="bar-title"> - <span class="title">鎵佸钩鍖栧浘鏍�</span> + <span class="title">绠�绾﹂鏍�</span> <span class="icon iconfont" - style="color: #3d68e1; font-size: 18px" - v-show="activeIcons == 1" + :class="activeIcons == 1 ? 'icon-active' : 'icon-normal'" ></span > </div> @@ -237,13 +235,14 @@ </div> </div> </div> + <div class="top-title">妗岄潰鑳屾櫙涓婚</div> <div class="bg-bar"> <div class="bg-list"> <div + v-for="(item, i) in tableBGList" class="bg-img" :class="activeBg == i ? 'bg-list-active' : ''" - v-for="(item, i) in tableBGList" :key="i" @click="pickBg(item, i)" > @@ -260,13 +259,13 @@ <script> import { saveAlarmConfig, getDevInfo } from "@/api/system"; import { uploadSound, getSoundList, deleteSound } from "@/api/event"; - +import { updateUser } from "@/api/user"; export default { data() { return { - playSpan: "\ue6e8", - playSpan2: "\ue6e8", - delspan: "\ue6e8", + playSpan: "\ue75e", + playSpan2: "\ue75f", + delspan: "\ue715", warnSpn: "\ue71c", curPlayingIndex: null, showUpload: false, @@ -278,10 +277,9 @@ max: 0, }, menuArr: [ - // { name: "璁惧淇℃伅", icon: "\ue933" ,size:18}, - { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue6f3", size: 20 }, - { name: "浜嬩欢澹伴煶", icon: "\ue6e1", size: 16 }, - { name: "涓�у寲璁剧疆", icon: "\ue756", size: 18 }, + { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue74f", size: 20 }, + { name: "浜嬩欢澹伴煶", icon: "\ueb5e", size: 16 }, + { name: "涓�у寲璁剧疆", icon: "\ue750", size: 18 }, ], soundList: [], activePage: 0, @@ -301,50 +299,64 @@ }, isPlay: false, realIconList: [ - { url: "/images/settings/鏃ュ織绠$悊.png", color: "green" }, - { url: "/images/settings/瀹炴椂鐩戞帶.png", color: "yellow" }, - { url: "/images/settings/鏁版嵁鍙鍖�.png", color: "pink" }, + { url: "/images/settings/闈㈡�у浘鏍�/1浠板崸妫�娴�.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/2涓綋闈欐.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/3瀹夊叏璀︽垝.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/4瀹夊叏甯芥娴�.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/5濂旇窇.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/6杞﹁締妫�娴�.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/7鎶界儫.png" }, ], flatIconList: [ - { url: "/images/settings/鏁版嵁鎺ㄩ��.png" }, - { url: "/images/settings/鏁版嵁鏍堥厤缃�.png" }, - { url: "/images/settings/绯荤粺璁剧疆.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/1浠板崸妫�娴�.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/2涓綋闈欐.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/3瀹夊叏璀︽垝.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/4瀹夊叏甯芥娴�.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/5濂旇窇.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/6杞﹁締妫�娴�.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/7鎶界儫.png" }, ], tableBGList: [ - { name: "background", url: "/images/settings/background.png" }, - { name: "message", url: "/images/settings/鏁版嵁鎺ㄩ��.png" }, - { name: "weather", url: "/images/settings/绯荤粺璁剧疆.png" }, + { name: "background", url: "/images/desktop/background.png" }, + { name: "message", url: "/images/desktop/message.png" }, + { name: "weather", url: "/images/desktop/weather.png" }, + ], + universalColor: "", + colorList: [ + { name: 1, color: "#FC6B9E" }, + { name: 2, color: "#F38F56" }, + { name: 3, color: "#FDD33A" }, + { name: 4, color: "#53D999" }, + { name: 5, color: "#21CDB2" }, + { name: 6, color: "#61E2EB" }, + { name: 7, color: "#4E94FF" }, + { name: 8, color: "#8E8CD8" }, + { name: 9, color: "#4C4A48" }, ], }; }, mounted() { this.getDeviceInfo(); this.getSounds(); - let _this = this; - this.eventAudio.addEventListener("ended", () => { - if (_this.curPlayingIndex !== null && _this.soundList.length) { - _this.soundList[_this.curPlayingIndex].isPlay = false; - _this.curPlayingIndex = null; - } + const url = this.curUser.backgroundpic; + this.activeIcons = this.curUser.useIconType - 1; + this.universalColor = this.colorList.findIndex((x) => { + return x.color == localStorage.getItem("--colorCard"); }); - const url = localStorage.getItem("backgroundPic"); if (url) { - const arr = url.split("/"); this.activeBg = this.tableBGList.findIndex((x) => { - return x.url.includes(arr[arr.length - 1]); + return x.url == url; }); } else { this.activeBg = 0; } - const e = this.$refs.curPage; - e.addEventListener("click", (e) => { - if (this.showUpload) { - this.showUpload = false; - } - }); + + this.eventAudio.addEventListener("ended", this.endedHandle, false); + this.$refs.curPage.addEventListener("click", this.clickHandle, false); }, beforeDestroy() { - this.$refs.curPage.removeEventListener("click"); + this.eventAudio.removeEventListener("ended", this.endedHandle, false); + this.$refs.curPage.removeEventListener("click", this.clickHandle, false); }, computed: { min_video_len() { @@ -353,20 +365,42 @@ max_video_len() { return Math.round(this.fakeObj.max * 1.2); }, + curUser() { + return JSON.parse(sessionStorage.getItem("userInfo")); + }, }, methods: { + endedHandle() { + let _this = this; + if (_this.curPlayingIndex !== null && _this.soundList.length) { + _this.soundList[_this.curPlayingIndex].isPlay = false; + _this.curPlayingIndex = null; + } + }, + clickHandle() { + let _this = this; + if (this.showUpload) { + this.showUpload = false; + } + }, formatTooltip(v) { return Math.round(v * 1.2); }, pickBg(item, i) { this.activeBg = i; let message = "changeBackground?" + item.name; - window.parent.postMessage( - { - msg: message, - }, - "*" - ); + window.parent.postMessage({ msg: message }, "*"); + updateUser({ + id: this.curUser.id, + backgroundpic: item.url, + }).then((res) => { + if (res.success) { + sessionStorage.setItem("userInfo", JSON.stringify(res.data)); + debugger; + this.$message.success(res.msg); + } + }); + this.$forceUpdate(); }, togglePlay(item, i) { if (this.curPlayingIndex !== null) { @@ -432,7 +466,7 @@ this.getSounds(); }, (err) => { - this.$message.error("澹伴煶涓婁紶澶辫触"); + this.$message.error(err.msg); } ); }, @@ -441,6 +475,17 @@ }, selectIcons(i) { this.activeIcons = i; + updateUser({ + id: this.curUser.id, + 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); + } + }); }, removeSound(item) { const h = this.$createElement; @@ -501,9 +546,11 @@ } }); }, - colorCard(color) { + colorCard(color, index) { + this.universalColor = index; document.documentElement.style.setProperty("--colorCard", `${color}`); localStorage.setItem("--colorCard", `${color}`); + window.parent.postMessage({ msg: "changeColor", color }, "*"); }, }, }; @@ -521,16 +568,21 @@ flex: 1; flex-basis: auto; box-sizing: border-box; + .el-input__inner { + height: 24px !important; + } .general-center { height: 100%; width: 300px; overflow: auto; box-sizing: border-box; flex-shrink: 0; - padding: 24px 10px; + padding: 10px 10px; + padding-top: 6px; border-right: 4px solid #f2f2f7; + border-top: 4px solid #f2f2f7; + border-left: 4px solid #f2f2f7; background-color: #fbfaff; - .menu-item { height: 56px; margin-bottom: 4px; @@ -554,17 +606,19 @@ background-color: var(--colorCard) !important; color: white !important; } - /* .menu-item:hover { - background-color: #F2F2F7; - } */ + .menu-item:hover { + background-color: #f2f2f7; + } } .general-right { flex: 1; flex-basis: auto; overflow: auto; box-sizing: border-box; + background-color: rgb(251, 250, 255); + border-top: 4px solid #f2f2f7; - padding: 10px 18px 10px 10px; + 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) @@ -578,7 +632,7 @@ .el-form-item { margin-bottom: 10px; height: 50px; - background: #f8f8f8; + background: #f2f2f7; padding: 4px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -606,16 +660,23 @@ text-align: left; margin-bottom: 5px; } - .voice-title { + .bar.title.voice-title { justify-content: center !important; + text-align: center; font-weight: 700; + border: none; + background: #f2f2f7; + border-radius: 8px; + height: 48px; + margin-bottom: 4px; + border: 2px solid #f2f2f7 !important; } .bar-group { overflow: auto; - height: 520px; + height: calc(100% - 100px); .general-bar { height: 48px; - background-color: #f8f8f8; + background: #f2f2f7; border-radius: 10px; line-height: 48px; box-sizing: border-box; @@ -624,7 +685,8 @@ display: flex; justify-content: space-between; margin-bottom: 2px; - border: 2px solid #fff; + border: 2px solid #f2f2f7; + margin-bottom: 4px; .name { font-size: 14px; } @@ -633,18 +695,7 @@ display: flex; justify-content: space-between; color: rgba(191, 191, 191, 1); - /* .el-icon-video-pause { - cursor: pointer; - font-size: 23px; - vertical-align: middle; - color: #409eff; - } - .el-icon-video-play { - cursor: pointer; - font-size: 23px; - vertical-align: middle; - color: #409eff; - } */ + span { color: #333; } @@ -684,30 +735,31 @@ width: fit-content; .icon { font-size: 40px; - color: rgba(61, 104, 225, 1); + color: var(--colorCard); } } .min-dur { box-sizing: border-box; padding: 0 20px; - background-color: rgba(248, 248, 248, 1); + background-color: #f2f2f7; height: 105px; - margin-bottom: 20px; + margin-bottom: 4px; border-radius: 15px; .title { + color: #333; height: 45px; line-height: 45px; - text-align: left; box-sizing: border-box; padding: 0 6px; - font-size: 14px; + font-size: 16px; + font-weight: 700; } } - .min-dur:hover { + /* .min-dur:hover { background-color: rgba(233, 233, 233, 1); - } + } */ .entity { display: flex; @@ -717,13 +769,13 @@ .sec { min-width: 30px; line-height: 80px; - margin-right: 10px; - color: rgba(120, 120, 120, 1); - font-size: 14px; + + color: #333; + font-size: 8px; } .block { flex: 1; - margin: 0 20px 0 6px; + margin: 0 0px 0 6px; } .el-input-number--small { width: 100px; @@ -757,34 +809,67 @@ } } .save-btn { - background-color: #3d68e1; - width: 240px; + background-color: var(--colorCard); + width: 180px; height: 40px; margin: 0 auto; - border-radius: 10px; + border-radius: 25px; color: #fff; line-height: 40px; cursor: pointer; - font-size: 14px; - margin-top: 20px; + font-size: 16px; + font-weight: 700; + margin-top: 55px; } .self-setting { .top-title { + text-align: left; font-size: 16px; - height: 30px; - line-height: 30px; margin-bottom: 10px; + font-weight: 700; + margin-top: 20px; } - .icon-bar:hover { + /* .icon-bar:hover { background-color: rgba(233, 233, 233, 1); + } */ + .color-bar { + display: flex; + justify-content: center; + align-items: center; + width: 412px; + height: 96px; + background-color: #fff; + border-radius: 8px; + padding-left: 7px; + .color-option { + margin-right: 12px; + width: 30px; + height: 30px; + border-radius: 50%; + } + + .color-option-active { + box-sizing: border-box; + margin-right: 12px; + width: 30px; + height: 30px; + border-radius: 50%; + background-color: #fff; + padding: 4px; + .color-option-content { + width: 100%; + height: 100%; + border-radius: 50%; + } + } } .icon-bar { cursor: pointer; - background-color: rgba(248, 248, 248, 1); box-sizing: border-box; - padding: 15px 25px; - border-radius: 12px; - margin-bottom: 12px; + padding: 15px 13px 14px 20px; + background: #f2f2f7; + border-radius: 8px; + margin-bottom: 10px; .bar-title { line-height: 20px; height: 20px; @@ -793,10 +878,20 @@ justify-content: space-between; .title { font-size: 14px; + font-weight: 700; + } + .icon-active { + font-size: 16px; + color: var(--colorCard); + } + .icon-normal { + font-size: 16px; + color: #e0e0e0; } } .entity { display: flex; + margin-left: 5px; .entity-img { background-color: rgba(248, 248, 248, 1); width: 50px; @@ -810,7 +905,7 @@ } } .bg-bar { - background-color: rgba(248, 248, 248, 1); + background-color: #f2f2f7; box-sizing: border-box; padding: 15px 25px; border-radius: 12px; @@ -821,18 +916,19 @@ margin-right: 12px; cursor: pointer; // width: 120px; - height: 80px; + height: 66px; border: 2px solid transparent; img { border-radius: 5px; height: 100%; } } - .bg-img:hover { + /* .bg-img:hover { border: 2px solid yellow; - } + } */ .bg-list-active { - border: 2px solid yellow; + border: 2px solid var(--colorCard); + border-radius: 8px; } } } @@ -856,8 +952,6 @@ } .upload-demo { - top: 452px; - left: 2px !important; width: 452px; height: 150px; background: #ffffff; @@ -874,10 +968,9 @@ margin-top: 30px; } - .info { - font-weight: bold; - font-size: 14px; - color: #828282; + .info-click { + color: var(--colorCard); + text-decoration: underline; } .info-click { @@ -907,7 +1000,7 @@ font-size: 14px; } .warn-icon { - color: #fe6d68; + color: var(--colorCard); font-size: 40px; margin-top: 11px; } @@ -933,7 +1026,7 @@ .el-message-box__btns { display: flex; justify-content: center; - margin-top: 20px; + margin: 20px; .el-button:focus, .el-button:hover { background-color: none; @@ -947,6 +1040,9 @@ font-size: 16px; font-weight: 700; } + &:hover { + border: 1px solid var(--colorCard) !important; + } } button:first-child { background-color: #e0e0e0; @@ -955,8 +1051,8 @@ } } button:last-child { - background-color: #4e94ff !important; - border-color: #4e94ff !important; + background-color: var(--colorCard) !important; + border: 1px solid var(--colorCard) !important; span { color: #fff; } @@ -964,3 +1060,78 @@ } } </style> + +<style> +.videoTime .el-slider__button { + margin-top: -25px !important; + border: none !important; +} + +.videoTime .el-slider__button::after { + display: block; + position: relative; + content: "\e75d"; + color: var(--colorCard); + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.videoTime .el-tooltip { + background-color: #f2f2f7 !important; + border: none !important; +} + +.videoTime .el-slider__runway { + background-color: #fff !important; + height: 3px !important; +} + +.videoTime .el-slider__stop { + background-color: #c4c4c4 !important; + height: 3px !important; + width: 8px !important; + border-radius: 0 !important; +} + +.videoTime .el-slider__bar { + z-index: 999999999 !important; + background-color: var(--colorCard) !important; +} + +.videoTime .el-input-number.el-input-number--small { + width: 90px; + height: 24px !important; + border-radius: 4px; + line-height: 24px !important; + font-weight: 700 !important; +} + +.videoTime .el-input-number.el-input-number--small .el-input__inner { + font-size: 12px !important; + height: 24px !important; +} + +.el-input-number__decrease { + color: #333 !important; + /* top: 4px !important; */ + height: 22px !important; + width: 20px !important; + line-height: 22px !important; +} + +.el-input-number__increase { + color: #333 !important; + /* top: 4px !important; */ + height: 22px !important; + width: 24px !important; + line-height: 22px !important; +} + +.el-input-number__increase:hover i { + /* color: var(--colorCard); */ + color: #4e94ff; +} +</style> \ No newline at end of file -- Gitblit v1.8.0