bug修复

ZZJ

2022-06-23 feaf0a9778879ef211c5587a513ba4cbdabb52d0

 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>

                仅支持mp3、wav等格式

              </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" }, "您是否确认删除事件声音?")

            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;