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
-              >&nbsp;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
-              >&nbsp;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">&#xe646;</span>
+              <span class="icon iconfont" @click.stop="showUpload = !showUpload"
+                >&#xe646;</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'">&#xe6f1;</span>
+              <span
+                class="icon iconfont"
+                :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'"
+                >&#xe6f1;</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'">&#xe6f1;</span>
+              <span
+                class="icon iconfont"
+                :class="activeIcons == 1 ? 'icon-active' : 'icon-normal'"
+                >&#xe6f1;</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" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺0闊�?")
+            h("span", { class: "warn-dec" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺0闊�?"),
           ]
         ),
         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