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" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺０闊�?")
+ h("span", { class: "warn-dec" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺０闊�?"),
]
),
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