From 19c028e4292283ebdfae0cf436f23fd00a47eb56 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期六, 18 九月 2021 16:31:54 +0800
Subject: [PATCH] Merge branch 'bhomebus' of http://192.168.5.5:10010/r/vue-smart-ai into bhomebus
---
src/pages/settings/views/generalSettings.vue | 578 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 396 insertions(+), 182 deletions(-)
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index 753211b..ba74441 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -1,22 +1,22 @@
<template>
- <div class="all">
- <div class="cluster-content">
- <div class="cluster-center" ref="left">
- <div class="menu-item" @click="openRight('basic')">
- <div>璁惧淇℃伅</div>
- </div>
- <div class="menu-item" @click="openRight('video')">
- <div>浜嬩欢褰曞儚鏃堕暱</div>
- </div>
- <div class="menu-item" @click="openRight('sound')">
- <div>浜嬩欢澹伴煶</div>
- </div>
- <div class="menu-item" @click="openRight('personalise')">
- <div>涓�у寲璁剧疆</div>
+ <div class="all" ref="curPage">
+ <div class="general-set">
+ <div class="general-center" ref="left">
+ <div
+ class="menu-item"
+ :class="activePage == i ? 'menu-item-active' : ''"
+ @click="openRight(i)"
+ v-for="(item, i) in menuArr"
+ :key="i"
+ >
+ <span class="iconfont" :style="`font-size:${item.size}px;`">{{
+ item.icon
+ }}</span>
+ <span class="title">{{ item.name }}</span>
</div>
</div>
- <div class="cluster-right">
- <div class="lang" v-if="activePage == 'basic'">
+ <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>
@@ -57,50 +57,64 @@
<span class="name">杩愯鏃堕棿</span>
<span class="desc">{{ deviceInfo.runningTime }}</span>
</div>
- </div>
- <div class="lang" v-if="activePage == 'video'">
+ </div> -->
+ <div class="lang" v-if="activePage == 0">
<div class="min-dur">
- <div class="title">瑙嗛鎴彇鏈�鐭椂闀�</div>
+ <div class="title">鎶撴媿鍓嶅綍鍍忔椂闀�</div>
<div class="entity">
- <div class="sec">{{ alarmConf.min_video_len }}s</div>
+ <div class="sec">{{ min_video_len }}s</div>
<div class="block">
<el-slider
- v-model="alarmConf.min_video_len"
+ v-model="fakeObj.min"
id="cut_min_duration"
- :min="0"
+ :min="5 / 1.2"
:max="100"
- :show-tooltip="false"
+ :step="5 / 1.2"
+ @input="min_len = min_video_len"
+ show-stops
+ :show-tooltip="true"
+ :format-tooltip="formatTooltip"
></el-slider>
</div>
<el-input-number
- v-model="alarmConf.min_video_len"
+ v-model="min_len"
+ @change="fakeObj.min = +(min_len / 1.2)"
controls-position="right"
- :min="0"
- :max="100"
- size="mini"
+ :min="5"
+ :step="5"
+ :max="120"
+ step-strictly
+ size="small"
></el-input-number
> s
</div>
</div>
<div class="min-dur">
- <div class="title">瑙嗛鎴彇鏈�闀挎椂闀�</div>
+ <div class="title">鎶撴媿鍚庡綍鍍忔椂闀�</div>
<div class="entity">
- <div class="sec">{{ alarmConf.max_video_len }}s</div>
+ <div class="sec">{{ max_video_len }} s</div>
<div class="block">
<el-slider
- v-model="alarmConf.max_video_len"
+ v-model="fakeObj.max"
id="cut_max_duration"
- :min="0"
+ :min="5 / 1.2"
+ @input="max_len = max_video_len"
:max="100"
- :show-tooltip="false"
+ :step="5 / 1.2"
+ show-stops
+ :format-tooltip="formatTooltip"
+ :show-tooltip="true"
></el-slider>
</div>
<el-input-number
- v-model="alarmConf.max_video_len"
+ v-model="max_len"
+ @change="fakeObj.max = +(max_len / 1.2)"
controls-position="right"
- :min="0"
- :max="100"
- size="mini"
+ :min="5"
+ :step="5"
+ step-strictly
+ :max="120"
+ size="small"
></el-input-number
> s
</div>
@@ -108,31 +122,48 @@
<div class="save-btn" @click="submitAlarm">淇濆瓨</div>
</div>
- <div class="lang" v-if="activePage == 'sound'">
+ <div class="lang" v-if="activePage == 1">
<div class="title">浜嬩欢澹伴煶</div>
- <div
- class="bar"
- v-for="(item, i) in soundList"
- :key="i"
- @click="clickSound(item, i)"
- ref="soundBar"
- >
- <div class="left-part">
- <span class="icon iconfont"></span>
- <span class="name">{{ item.name }}</span>
- </div>
- <div class="btns">
- <span class="icon iconfont"></span>
- <span class="icon iconfont" @click="removeSound(item)"></span>
+ <div class="bar-group">
+ <div
+ class="bar"
+ v-for="(item, i) in soundList"
+ :key="i"
+ @click="clickSound(item, i)"
+ ref="soundBar"
+ >
+ <div class="left-part">
+ <span
+ class="icon iconfont"
+ style="margin-right: 12px; color: dodgerblue"
+ ></span
+ >
+ <span class="name">{{ item.name }}</span>
+ </div>
+ <div class="btns">
+ <span @click="togglePlay(item, i)">
+ <i
+ v-if="!item.isPlay"
+ class="el-icon-video-play"
+ style=""
+ ></i>
+ <i v-else class="el-icon-video-pause"></i>
+ </span>
+ <span
+ class="icon iconfont"
+ style="cursor: pointer; color: indianred"
+ @click="removeSound(item)"
+ ></span
+ >
+ </div>
</div>
</div>
- <div class="add-group">
+ <div v-if="showUpload" @click.stop>
<el-upload
class="upload-demo"
drag
- action="https://jsonplaceholder.typicode.com/posts/"
+ action=""
:http-request="uploadSound"
- v-show="showUpload"
:show-file-list="false"
>
<i class="el-icon-upload"></i>
@@ -142,46 +173,72 @@
<br />浠呮敮鎸乵p3/wma绛夋牸寮�
</div>
</el-upload>
- <div v-show="!showUpload"></div>
+ </div>
+
+ <div class="add-group">
<div class="add-btn">
- <span class="icon iconfont" @click="showUpload = !showUpload"
+ <span class="icon iconfont" @click.stop="showUpload = !showUpload"
></span
>
</div>
</div>
</div>
- <div class="lang" v-if="activePage == 'personalise'">
- <div class="title">鍥炬爣涓婚</div>
+ <div class="self-setting" v-if="activePage == 2">
+ <div class="top-title">鍥炬爣涓婚</div>
- <div class="min-dur" style="cursor:pointer;" @click="selectIcons(0)">
- <div class="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"
+ ></span
+ >
+ </div>
<div class="entity">
<div
class="entity-img"
v-for="(item, i) in realIconList"
:key="i"
- ></div>
+ >
+ <img :src="item.url" alt="" />
+ </div>
</div>
</div>
- <div class="min-dur" style="cursor:pointer;" @click="selectIcons(1)">
- <div class="title">鎵佸钩鍖栧浘鏍�</div>
+ <div class="icon-bar" style="cursor: pointer" @click="selectIcons(1)">
+ <div class="bar-title">
+ <span class="title">鎵佸钩鍖栧浘鏍�</span>
+ <span
+ class="icon iconfont"
+ style="color: #3d68e1; font-size: 18px"
+ v-show="activeIcons == 1"
+ ></span
+ >
+ </div>
<div class="entity">
<div
class="entity-img"
v-for="(item, i) in flatIconList"
:key="i"
- ></div>
+ >
+ <img :src="item.url" alt="" />
+ </div>
</div>
</div>
- <div class="title">妗岄潰鑳屾櫙涓婚</div>
- <div class="min-dur" style="padding-top:25px;">
+ <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"
:key="i"
- ></div>
+ @click="pickBg(item, i)"
+ >
+ <img :src="item.url" alt="" />
+ </div>
</div>
</div>
</div>
@@ -192,24 +249,29 @@
<script>
import { saveAlarmConfig, getDevInfo } from "@/api/system";
-import { uploadSound, getSoundList ,deleteSound} from "@/api/event";
-import config from "../../../../package.json";
-
-import { isIPv4 } from "@/scripts/validate";
+import { uploadSound, getSoundList, deleteSound } from "@/api/event";
export default {
data() {
return {
- isHighClass: false,
- inWifiDetail: false,
- inWireDetail: false,
+ curPlayingIndex: null,
showUpload: false,
- alarmConf: {
- min_video_len: 10,
- max_video_len: 15,
+ activeIcons: 0,
+ min_len: 0,
+ max_len: 0,
+ fakeObj: {
+ min: 0,
+ max: 0,
},
+ menuArr: [
+ // { name: "璁惧淇℃伅", icon: "\ue933" ,size:18},
+ { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue6f3", size: 20 },
+ { name: "浜嬩欢澹伴煶", icon: "\ue6e1", size: 16 },
+ { name: "涓�у寲璁剧疆", icon: "\ue756", size: 18 },
+ ],
soundList: [],
- activePage: "basic",
+ activePage: 0,
+ eventAudio: new Audio(),
deviceInfo: {
cpu: "",
runningTime: "",
@@ -221,20 +283,95 @@
webVersion: "",
disks: "",
memory: "",
+ activeBg: 0,
},
- realIconList: [{}, {}, {}],
- flatIconList: [{}, {}, {}],
- tableBGList: [{}, {}, {}],
+ isPlay: false,
+ realIconList: [
+ { url: "/images/settings/鏃ュ織绠＄悊.png" },
+ { url: "/images/settings/瀹炴椂鐩戞帶.png" },
+ { url: "/images/settings/鏁版嵁鍙鍖�.png" },
+ ],
+ flatIconList: [
+ { url: "/images/settings/鏁版嵁鎺ㄩ��.png" },
+ { url: "/images/settings/鏁版嵁鏍堥厤缃�.png" },
+ { url: "/images/settings/绯荤粺璁剧疆.png" },
+ ],
+ tableBGList: [
+ { name: "background", url: "/images/settings/background.png" },
+ { name: "message", url: "/images/settings/鏁版嵁鎺ㄩ��.png" },
+ { name: "weather", url: "/images/settings/绯荤粺璁剧疆.png" },
+ ],
};
},
mounted() {
this.getDeviceInfo();
- this.getSounds();
-
+ 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 = localStorage.getItem("backgroundPic");
+ if (url) {
+ const arr = url.split("/");
+ this.activeBg = this.tableBGList.findIndex((x) => {
+ return x.url.includes(arr[arr.length - 1]);
+ });
+ } else {
+ this.activeBg = 0;
+ }
+ const e = this.$refs.curPage;
+ e.addEventListener("click", (e) => {
+ if (this.showUpload) {
+ this.showUpload = false;
+ }
+ });
},
- beforeDestroy() {},
- props: ["barName"],
+ beforeDestroy() {
+ this.$refs.curPage.removeEventListener("click");
+ },
+ computed: {
+ min_video_len() {
+ return Math.round(this.fakeObj.min * 1.2);
+ },
+ max_video_len() {
+ return Math.round(this.fakeObj.max * 1.2);
+ },
+ },
methods: {
+ formatTooltip(v) {
+ return Math.round(v * 1.2);
+ },
+ pickBg(item, i) {
+ this.activeBg = i;
+ let message = "changeBackground?" + item.name;
+ window.parent.postMessage(
+ {
+ msg: message,
+ },
+ "*"
+ );
+ },
+ togglePlay(item, i) {
+ if (this.curPlayingIndex !== null) {
+ this.eventAudio.pause();
+ this.soundList[this.curPlayingIndex].isPlay = false;
+ if (this.curPlayingIndex === i) {
+ this.curPlayingIndex = null;
+ return;
+ }
+ }
+ this.curPlayingIndex = i;
+ this.eventAudio.src = "http://" + item.path;
+ if (item.isPlay) {
+ this.eventAudio.pause();
+ } else {
+ this.eventAudio.play();
+ }
+ item.isPlay = !item.isPlay;
+ },
getDeviceInfo() {
getDevInfo().then((res) => {
let info = res.data.deviceInfo;
@@ -246,23 +383,23 @@
this.deviceInfo.deviceDesc = basic.deviceDesc;
this.deviceInfo.masterVersion = basic.masterVersion;
this.deviceInfo.channelCount = basic.channelCount;
- this.deviceInfo.webVersion = "V" + config.version;
+ this.deviceInfo.webVersion = "V2.0.0";
this.deviceInfo.disks = "( " + info.disk + ") ";
this.deviceInfo.memory =
(info.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB";
- this.alarmConf.min_video_len = basic.min_video_len
- this.alarmConf.max_video_len = basic.max_video_len
+ 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;
- }
- })
- .catch((e) => console.log(e));
+ getSoundList().then((res) => {
+ if (res.success) {
+ this.soundList = res.data;
+ this.soundList.forEach((x) => {
+ this.$set(x, "isPlay", false);
+ });
+ }
+ });
},
secondsFormat(s) {
var day = (s / (24 * 3600)) | 0;
@@ -274,48 +411,47 @@
uploadSound(params) {
let param = new FormData();
param.append("file", params.file);
- uploadSound(param).then((res) => {
- console.log(res.data);
- this.getSounds();
- });
+ uploadSound(param).then(
+ (res) => {
+ this.$message.success("涓婁紶鎴愬姛");
+ this.showUpload = false;
+ this.getSounds();
+ },
+ (err) => {
+ this.$message.error("澹伴煶涓婁紶澶辫触");
+ }
+ );
},
- openRight(typ) {
- this.activePage = typ;
- // if (typ == "sound") {
- // this.getSounds();
- // }
+ openRight(i) {
+ this.activePage = i;
},
- wifiControl(val) {},
- checkWifi() {
- this.inWifiDetail = true;
+ selectIcons(i) {
+ this.activeIcons = i;
},
- checkWire(item) {
- this.inWireDetail = true;
- },
- selectIcons(typ){
-
- },
- removeSound(item){
- this.$confirm('鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺０闊�', '鍒犻櫎浜嬩欢澹伴煶', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- deleteSound({
- id:item.id
- }).then((res) => {
+ removeSound(item) {
+ this.$confirm("鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺０闊�", "鍒犻櫎浜嬩欢澹伴煶", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }).then(() => {
+ deleteSound({
+ id: item.id,
+ }).then(
+ (res) => {
if (res.success) {
- this.getSounds()
- this.$message({
- type: 'success',
- message: '鍒犻櫎鎴愬姛!'
- });
- this.showUpload=false
+ this.getSounds();
+ this.$message({
+ type: "success",
+ message: "鍒犻櫎鎴愬姛!",
+ });
+ this.showUpload = false;
}
- },err=>{
- this.$message.error(err.msg)
- })
- })
+ },
+ (err) => {
+ this.$message.error(err.msg);
+ }
+ );
+ });
},
clickSound(item, i) {
this.$refs["soundBar"].forEach((x) => {
@@ -325,8 +461,12 @@
"rgba(233, 233, 233, 1)";
},
submitAlarm() {
- saveAlarmConfig(this.alarmConf).then((res) => {
+ saveAlarmConfig({
+ min_video_len: this.min_video_len,
+ max_video_len: this.max_video_len,
+ }).then((res) => {
if (res && res.success) {
+ this.getDeviceInfo();
this.$notify({
type: "success",
message: "淇濆瓨鎴愬姛",
@@ -342,14 +482,14 @@
width: 100%;
}
-.cluster-content {
+.general-set {
height: 100%;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
- .cluster-center {
+ .general-center {
height: 100%;
width: 280px;
overflow: auto;
@@ -358,29 +498,40 @@
padding: 10px;
border-right: 5px solid #f8f8f8;
- // background-color: lavender;
.menu-item {
background-color: #f8f8f8;
- height: 40px;
+ height: 50px;
margin-bottom: 10px;
- border-radius: 8px;
- line-height: 40px;
+ border-radius: 10px;
+ line-height: 50px;
box-sizing: border-box;
font-size: 14px;
padding: 0 20px;
+ cursor: pointer;
display: flex;
- justify-content: space-between;
+ .iconfont {
+ margin-right: 8px;
+ }
+ .title {
+ font-size: 15px;
+ }
+ }
+ .menu-item-active {
+ background-color: #3d68e1;
+ color: white;
+ }
+ .menu-item:hover {
+ background-color: #3d68e1;
+ color: white;
}
}
- .cluster-right {
+ .general-right {
flex: 1;
flex-basis: auto;
overflow: auto;
- // background-color: rgba(240, 242, 245, 1);
box-sizing: border-box;
- position: relative;
+
padding: 20px 40px;
- // .create-new .join-exist {
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
@@ -413,6 +564,8 @@
max-width: none !important;
}
.lang {
+ position: relative;
+ height: calc(83% - 0px);
.title {
height: 35px;
line-height: 35px;
@@ -420,17 +573,20 @@
text-align: left;
margin-bottom: 5px;
}
+ .bar-group {
+ overflow: auto;
+ height: 100%;
+ }
.bar {
- height: 50px;
- background-color: rgba(248, 248, 248, 1);
+ height: 44px;
+ background-color: #f8f8f8;
border-radius: 10px;
- line-height: 50px;
+ line-height: 44px;
box-sizing: border-box;
padding: 0 30px 0 20px;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
- cursor: pointer;
.left-part {
.icon {
color: rgba(191, 191, 191, 1);
@@ -446,6 +602,18 @@
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;
+ }
}
.desc {
font-size: 14px;
@@ -456,12 +624,15 @@
background-color: rgba(233, 233, 233, 1);
}
.add-group {
- margin-top: 50px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ margin: 10px auto;
+ width: fit-content;
}
.upload-demo {
+ -webkit-transition: all 0.3s;
+ transition: all 0.5s;
+ position: absolute;
+ bottom: -40px;
+ left: calc(50% - 145px);
.el-upload-dragger {
width: 290px;
}
@@ -469,9 +640,11 @@
.add-btn {
height: 40px;
line-height: 40px;
- margin-top: 10px;
+ margin: 0 auto;
+ cursor: pointer;
+ width: fit-content;
.icon {
- font-size: 30px;
+ font-size: 32px;
color: rgba(61, 104, 225, 1);
}
}
@@ -513,16 +686,11 @@
flex: 1;
margin: 0 20px 0 6px;
}
- .el-input-number--mini {
- width: 80px;
- }
- .el-input-number.is-controls-right[class*="mini"] [class*="increase"],
- .el-input-number.is-controls-right[class*="mini"] [class*="decrease"] {
- width: 23px;
+ .el-input-number--small {
+ width: 100px;
}
.el-input-number.is-controls-right .el-input__inner {
- padding-left: 13px;
- padding-right: 37px;
+ padding-left: 16px;
}
#cut_min_duration {
.el-slider__bar {
@@ -557,30 +725,76 @@
border-radius: 10px;
color: #fff;
line-height: 40px;
+ cursor: pointer;
font-size: 14px;
margin-top: 20px;
}
- }
-
- .lang {
- .min-dur {
- .bg-list {
- display: flex;
- .bg-img {
- background-color: aquamarine;
- width: 100px;
- height: 60px;
- margin-right: 10px;
+ .self-setting {
+ .top-title {
+ font-size: 16px;
+ height: 30px;
+ line-height: 30px;
+ margin-bottom: 10px;
+ }
+ .icon-bar:hover {
+ background-color: rgba(233, 233, 233, 1);
+ }
+ .icon-bar {
+ cursor: pointer;
+ background-color: rgba(248, 248, 248, 1);
+ box-sizing: border-box;
+ padding: 15px 25px;
+ border-radius: 12px;
+ margin-bottom: 12px;
+ .bar-title {
+ line-height: 20px;
+ height: 20px;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: space-between;
+ .title {
+ font-size: 14px;
+ }
+ }
+ .entity {
+ display: flex;
+ .entity-img {
+ background-color: rgba(248, 248, 248, 1);
+ width: 50px;
+ height: 50px;
+ margin-right: 10px;
+ img {
+ width: 50px;
+ height: 50px;
+ }
+ }
}
}
- .entity {
- display: flex;
-
- .entity-img {
- background-color: aquamarine;
- width: 50px;
- height: 50px;
- margin-right: 10px;
+ .bg-bar {
+ background-color: rgba(248, 248, 248, 1);
+ box-sizing: border-box;
+ padding: 15px 25px;
+ border-radius: 12px;
+ margin-bottom: 12px;
+ .bg-list {
+ display: flex;
+ .bg-img {
+ margin-right: 12px;
+ cursor: pointer;
+ // width: 120px;
+ height: 80px;
+ border: 2px solid transparent;
+ img {
+ border-radius: 5px;
+ height: 100%;
+ }
+ }
+ .bg-img:hover {
+ border: 2px solid yellow;
+ }
+ .bg-list-active {
+ border: 2px solid yellow;
+ }
}
}
}
--
Gitblit v1.8.0