Merge branch 'bhomebus' of http://192.168.5.5:10010/r/vue-smart-ai into bho...

heyujie

2021-09-18 19c028e4292283ebdfae0cf436f23fd00a47eb56

 src/pages/settings/views/generalSettings.vue

@@ -1,5 +1,5 @@
<template>

  <div class="all">

  <div class="all" ref="curPage">

    <div class="general-set">

      <div class="general-center" ref="left">

        <div

@@ -9,12 +9,14 @@
          v-for="(item, i) in menuArr"

          :key="i"

        >

          <span class="iconfont">{{ item.icon }}</span>

          <span class="iconfont" :style="`font-size:${item.size}px;`">{{

            item.icon

          }}</span>

          <span class="title">{{ item.name }}</span>

        </div>

      </div>

      <div class="general-right">

        <div class="lang" v-if="activePage == 0">

        <!-- <div class="lang" v-if="activePage == 0">

          <div class="bar">

            <span class="name">设备ID</span>

            <span class="desc">{{ deviceInfo.server_id }}</span>

@@ -55,32 +57,33 @@
            <span class="name">运行时间</span>

            <span class="desc">{{ deviceInfo.runningTime }}</span>

          </div>

        </div>

        <div class="lang" v-if="activePage == 1">

        </div> -->

        <div class="lang" v-if="activePage == 0">

          <div class="min-dur">

            <div class="title">抓拍前录像时长</div>

            <div class="entity">

              <div class="sec">

                {{min_video_len }}s

              </div>

              <div class="sec">{{ min_video_len }}s</div>

              <div class="block">

                <el-slider

                  v-model="fakeObj.min"

                  id="cut_min_duration"

                  :min="5 / 1.2"

                  :max="100"

                  @input="min_len=min_video_len"

                  :show-tooltip="false"

                  :step="5 / 1.2"

                  @input="min_len = min_video_len"

                  show-stops

                  :show-tooltip="true"

                  :format-tooltip="formatTooltip"

                ></el-slider>

                <!-- show-stops

                  :step="5/1.2" -->

              </div>

              <el-input-number

                v-model="min_len"

                @change="fakeObj.min=+((min_len/1.2))"

                @change="fakeObj.min = +(min_len / 1.2)"

                controls-position="right"

                :min="5"

                :step="5"

                :max="120"

                step-strictly

                size="small"

              ></el-input-number

              >&nbsp;s

@@ -89,22 +92,27 @@
          <div class="min-dur">

            <div class="title">抓拍后录像时长</div>

            <div class="entity">

              <div class="sec">  {{ max_video_len }} s</div>

              <div class="sec">{{ max_video_len }} s</div>

              <div class="block">

                <el-slider

                  v-model="fakeObj.max"

                  id="cut_max_duration"

                  :min="5 / 1.2"

                  @input="max_len=max_video_len"

                  @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="max_len"

                @change="fakeObj.max=+((max_len/1.2))"

                @change="fakeObj.max = +(max_len / 1.2)"

                controls-position="right"

                :min="5"

                :step="5"

                step-strictly

                :max="120"

                size="small"

              ></el-input-number

@@ -114,7 +122,7 @@


          <div class="save-btn" @click="submitAlarm">保存</div>

        </div>

        <div class="lang" v-if="activePage == 2">

        <div class="lang" v-if="activePage == 1">

          <div class="title">事件声音</div>

          <div class="bar-group">

            <div

@@ -150,31 +158,33 @@
              </div>

            </div>

          </div>

          <el-upload

            class="upload-demo"

            drag

            action="https://jsonplaceholder.typicode.com/posts/"

            :http-request="uploadSound"

            v-show="showUpload"

            :show-file-list="false"

          >

            <i class="el-icon-upload"></i>

            <div class="el-upload__text">

              事件声音文件拖到此处，或

              <em>点击上传</em>

              <br />仅支持mp3/wma等格式

            </div>

          </el-upload>

          <div v-if="showUpload" @click.stop>

            <el-upload

              class="upload-demo"

              drag

              action=""

              :http-request="uploadSound"

              :show-file-list="false"

            >

              <i class="el-icon-upload"></i>

              <div class="el-upload__text">

                事件声音文件拖到此处，或

                <em>点击上传</em>

                <br />仅支持mp3/wma等格式

              </div>

            </el-upload>

          </div>



          <div class="add-group">

            <div class="add-btn">

              <span class="icon iconfont" @click="showUpload = !showUpload"

              <span class="icon iconfont" @click.stop="showUpload = !showUpload"

                >&#xe646;</span

              >

            </div>

          </div>

        </div>



        <div class="self-setting" v-if="activePage == 3">

        <div class="self-setting" v-if="activePage == 2">

          <div class="top-title">图标主题</div>



          <div class="icon-bar" style="cursor: pointer" @click="selectIcons(0)">

@@ -240,7 +250,6 @@
<script>

import { saveAlarmConfig, getDevInfo } from "@/api/system";

import { uploadSound, getSoundList, deleteSound } from "@/api/event";

import config from "../../../../package.json";



export default {

  data() {

@@ -248,21 +257,17 @@
      curPlayingIndex: null,

      showUpload: false,

      activeIcons: 0,

      // alarmConf: {

      //   min_video_len: 10,

      //   max_video_len: 15,

      // },

      min_len:10,

      max_len:15,

      fakeObj:{

        min:10,

        max:15

      min_len: 0,

      max_len: 0,

      fakeObj: {

        min: 0,

        max: 0,

      },

      menuArr: [

        { name: "设备信息", icon: "\ue933" },

        { name: "事件录像时长", icon: "\ue6f3" },

        { name: "事件声音", icon: "\ue6e1" },

        { name: "个性化设置", icon: "\ue756" },

        // { name: "设备信息", icon: "\ue933" ,size:18},

        { name: "事件录像时长", icon: "\ue6f3", size: 20 },

        { name: "事件声音", icon: "\ue6e1", size: 16 },

        { name: "个性化设置", icon: "\ue756", size: 18 },

      ],

      soundList: [],

      activePage: 0,

@@ -308,16 +313,37 @@
        _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() {

    this.$refs.curPage.removeEventListener("click");

  },

  computed: {

    min_video_len(){

      return +((this.fakeObj.min* 1.2).toFixed(0))

    min_video_len() {

      return Math.round(this.fakeObj.min * 1.2);

    },

    max_video_len(){

      return +((this.fakeObj.max* 1.2).toFixed(0))

    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;

@@ -357,13 +383,12 @@
        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.min_len = basic.min_video_len

        this.fakeObj.min = +((basic.min_video_len/1.2).toFixed(0));

        this.fakeObj.max = +((basic.max_video_len/1.2).toFixed(0));

        this.fakeObj.min = basic.min_video_len / 1.2;

        this.fakeObj.max = basic.max_video_len / 1.2;

      });

    },

    getSounds() {

@@ -389,6 +414,7 @@
      uploadSound(param).then(

        (res) => {

          this.$message.success("上传成功");

          this.showUpload = false;

          this.getSounds();

        },

        (err) => {

@@ -435,13 +461,12 @@
        "rgba(233, 233, 233, 1)";

    },

    submitAlarm() {

      debugger;

      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: "保存成功",

@@ -485,10 +510,10 @@
      cursor: pointer;

      display: flex;

      .iconfont {

        margin-right: 12px;

        margin-right: 8px;

      }

      .title {

        font-size: 16px;

        font-size: 15px;

      }

    }

    .menu-item-active {

@@ -607,7 +632,6 @@
        transition: all 0.5s;

        position: absolute;

        bottom: -40px;



        left: calc(50% - 145px);

        .el-upload-dragger {

          width: 290px;

@@ -757,12 +781,11 @@
          .bg-img {

            margin-right: 12px;

            cursor: pointer;

            width: 120px;

            // width: 120px;

            height: 80px;

            border: 2px solid transparent;

            img {

              width: 120px;

              border-radius: 5px;



              height: 100%;

            }

          }