From 1e09a7a01a6c1888e1a2a832eb007fb8c2b653a0 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 26 一月 2022 11:06:27 +0800
Subject: [PATCH] Merge branch 'bhomebus' of http://192.168.5.5:10010/r/web/vue-smart-ai into bhomebus
---
src/pages/settings/views/generalSettings.vue | 418 +++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 335 insertions(+), 83 deletions(-)
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index 5fdca0a..4b6f2a1 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -58,7 +58,7 @@
<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">
@@ -73,10 +73,11 @@
@input="min_len = min_video_len"
show-stops
:show-tooltip="true"
+ tooltip-class="toolClass"
:format-tooltip="formatTooltip"
></el-slider>
</div>
- <el-input-number
+ <!-- <el-input-number
v-model="min_len"
@change="fakeObj.min = +(min_len / 1.2)"
controls-position="right"
@@ -86,7 +87,17 @@
step-strictly
size="small"
></el-input-number
- > s
+ > 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
</div>
</div>
<div class="min-dur">
@@ -109,7 +120,6 @@
<el-input-number
v-model="max_len"
@change="fakeObj.max = +(max_len / 1.2)"
- controls-position="right"
:min="5"
:step="5"
step-strictly
@@ -117,6 +127,7 @@
size="small"
></el-input-number
> s
+
</div>
</div>
@@ -145,9 +156,11 @@
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"
@@ -194,15 +207,41 @@
</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="icon iconfont"
- style="color: #3d68e1; font-size: 18px"
- v-show="activeIcons == 0"
+ :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'"
></span
>
</div>
@@ -211,7 +250,6 @@
class="entity-img"
v-for="(item, i) in realIconList"
:key="i"
- @click="colorCard(item.color)"
>
<img :src="item.url" alt="" />
</div>
@@ -222,8 +260,7 @@
<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 +274,14 @@
</div>
</div>
</div>
+
<div class="top-title">妗岄潰鑳屾櫙涓婚</div>
<div class="bg-bar">
<div class="bg-list">
<div
- class="bg-img"
- :class="activeBg == i ? 'bg-list-active' : ''"
v-for="(item, i) in tableBGList"
+ class="bg-img"
+ :class="activeBg == i ? 'bg-list-active' : ''"
:key="i"
@click="pickBg(item, i)"
>
@@ -260,13 +298,15 @@
<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,
@@ -279,9 +319,9 @@
},
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,
@@ -311,10 +351,22 @@
{ url: "/images/settings/绯荤粺璁剧疆.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() {
@@ -327,11 +379,12 @@
_this.curPlayingIndex = null;
}
});
- const url = localStorage.getItem("backgroundPic");
+ const url = this.curUser.backgroundpic;
+ this.activeIcons = this.curUser.useIconType-1
if (url) {
- const arr = url.split("/");
+ // 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;
@@ -353,6 +406,10 @@
max_video_len() {
return Math.round(this.fakeObj.max * 1.2);
},
+ curUser() {
+ const info = JSON.parse(sessionStorage.getItem("userInfo"));
+ return info;
+ },
},
methods: {
formatTooltip(v) {
@@ -361,12 +418,17 @@
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))
+ this.$message.success(res.msg);
+ }
+ });
+ this.$forceUpdate()
},
togglePlay(item, i) {
if (this.curPlayingIndex !== null) {
@@ -441,6 +503,16 @@
},
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))
+ this.$message.success(res.msg);
+ }
+ });
},
removeSound(item) {
const h = this.$createElement;
@@ -501,10 +573,12 @@
}
});
},
- colorCard(color) {
- document.documentElement.style.setProperty("--colorCard", `${color}`);
- localStorage.setItem("--colorCard", `${color}`);
- },
+ colorCard(color,index) {
+ this.universalColor = index
+ document.documentElement.style.setProperty('--colorCard',`${color}`)
+ localStorage.setItem('--colorCard',`${color}`)
+ window.parent.postMessage({msg:'changeColor',color},'*')
+ }
},
};
</script>
@@ -521,16 +595,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 +633,19 @@
background-color: var(--colorCard) !important;
color: white !important;
}
- /* .menu-item:hover {
+ .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 +659,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 +687,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 +712,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;
}
@@ -684,30 +773,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;
@@ -718,8 +808,8 @@
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;
@@ -757,34 +847,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 +916,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 +943,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 +954,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;
}
}
}
@@ -874,11 +1008,10 @@
margin-top: 30px;
}
- .info {
- font-weight: bold;
- font-size: 14px;
- color: #828282;
- }
+.info-click {
+ color: var(--colorCard);
+ text-decoration: underline;
+}
.info-click {
color: #4e94ff;
@@ -947,6 +1080,9 @@
font-size: 16px;
font-weight: 700;
}
+ &:hover {
+ border: 1px solid var(--colorCard) !important;
+ }
}
button:first-child {
background-color: #e0e0e0;
@@ -955,12 +1091,128 @@
}
}
button:last-child {
- background-color: #4e94ff !important;
- border-color: #4e94ff !important;
- span {
- color: #fff;
+ background-color: var(--colorCard) !important;
+ border: 1px solid var(--colorCard) !important;
+ span {
+ color: #fff;
}
}
}
}
</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__decrease:hover i{
+ color: var(--colorCard);
+} */
+
+.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;
+}
+
+
+
+
+/* .el-tooltip__popper {
+ font-size: 12px !important;
+ background-color: transparent !important;
+ color:var(--colorCard) !important;
+}
+
+.popper__arrow::after {
+ border-color: transparent !important;
+ border: none !important;
+}
+
+.popper__arrow:after {
+ border-bottom-color: green !important;
+}
+
+.popper__arrow:after {
+ border-top-color: pink !important;
+}
+
+.toolClass {
+ border: none !important;
+}
+
+.toolClass {
+ border: none !important;
+}
+
+.el-slider__button::after {
+ border: none !important;
+} */
+</style>
--
Gitblit v1.8.0