From 3576cb1b19e6e70d4bbc704fe3b73f8752b75c93 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 08 六月 2022 17:48:52 +0800
Subject: [PATCH] settings: fix removeEventListener arguments
---
src/pages/settings/views/generalSettings.vue | 334 +++++++++++++++++++++++-------------------------------
1 files changed, 143 insertions(+), 191 deletions(-)
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index 4e668a0..ba82a4d 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -9,9 +9,7 @@
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>
@@ -107,12 +105,7 @@
</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> -->
@@ -136,28 +129,13 @@
></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>
@@ -166,9 +144,7 @@
<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>
@@ -176,11 +152,7 @@
<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"
@@ -193,14 +165,11 @@
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>
@@ -208,18 +177,10 @@
<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>
@@ -227,18 +188,10 @@
<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>
@@ -265,9 +218,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 {
@@ -282,12 +235,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,
@@ -303,7 +256,7 @@
webVersion: "",
disks: "",
memory: "",
- activeBg: 0,
+ activeBg: 0
},
isPlay: false,
realIconList: [
@@ -313,7 +266,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" },
@@ -322,12 +275,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: [
@@ -339,225 +292,227 @@
{ 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();
- 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.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
}
- const e = this.$refs.curPage;
- e.addEventListener("click", (e) => {
- if (this.showUpload) {
- this.showUpload = false;
- }
- });
+
+ this.eventAudio.addEventListener("ended", endedHandle, false)
+ this.$refs.curPage.addEventListener("click", clickHandle, false)
},
beforeDestroy() {
- this.$refs.curPage.removeEventListener("click");
+ this.eventAudio.removeEventListener("ended", endedHandle, false)
+ this.$refs.curPage.removeEventListener("click", 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
+ 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);
+ 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">
@@ -623,11 +578,8 @@
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 {
--
Gitblit v1.8.0