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

ZZJ

2022-01-26 1e09a7a01a6c1888e1a2a832eb007fb8c2b653a0

 src/pages/settings/views/generalSettings.vue

@@ -58,7 +58,7 @@
            <span class="desc">{{ deviceInfo.runningTime }}</span>

          </div>

        </div> -->

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

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

          <div class="min-dur">

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

            <div class="entity">

@@ -73,10 +73,11 @@
                  @input="min_len = min_video_len"

                  show-stops

                  :show-tooltip="true"

                  tooltip-class="toolClass"

                  :format-tooltip="formatTooltip"

                ></el-slider>

              </div>

              <el-input-number

              <!-- <el-input-number

                v-model="min_len"

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

                controls-position="right"

@@ -86,7 +87,17 @@
                step-strictly

                size="small"

              ></el-input-number

              >&nbsp;s

              >&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

            </div>

          </div>

          <div class="min-dur">

@@ -109,7 +120,6 @@
              <el-input-number

                v-model="max_len"

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

                controls-position="right"

                :min="5"

                :step="5"

                step-strictly

@@ -117,16 +127,19 @@
                size="small"

              ></el-input-number

              >&nbsp;s

              
            </div>

          </div>



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

        </div>

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

          <div class="bar title voice-title" style="border: 2px solid #fff;">事件声音</div>

          <div class="bar title voice-title" style="border: 2px solid #fff">

            事件声音

          </div>

          <div class="bar-group">

            <div

              class="bar"

              class="general-bar"

              v-for="(item, i) in soundList"

              :key="i"

              @click="clickSound(item, i)"

@@ -135,12 +148,20 @@
              <div class="left-part">

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

              </div>

              <div class="btns">

              <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-else style="cursor: pointer">{{

                    playSpan2

                  }}</span> -->



                   <span class="iconfont" v-if="!item.isPlay" style="cursor: pointer;">{{playSpan}}</span>

                   <span class="iconfont" v-else style="cursor: pointer;">{{playSpan2}}</span>

<!-- 
                  <img v-else src="/images/settings/暂停.png" alt="" style="width:16px;hight:16px;cursor: pointer;margin-top:15px;">

                  <!-- 
                  <i

                    v-if="!item.isPlay"

                    class="el-icon-video-play"

@@ -150,14 +171,14 @@
                </span>

                <span

                  class="icon iconfont del"

                  style="cursor: pointer;"

                  style="cursor: pointer"

                  @click="removeSound(item)"

                  >{{delspan}}</span

                  >{{ delspan }}</span

                >

              </div>

            </div>

          </div>

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

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

            <el-upload

              class="upload-demo"

              drag

@@ -165,11 +186,16 @@
              :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>

            </el-upload>          
              <div class="info">

                请将声音事件文件拖拽到此处，或<span class="info-click"

                  >点击上传</span

                >

              </div>

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

                仅支持mp3、wav等格式

              </div>

            </el-upload>

          </div>





          <div class="add-group">

            <div class="add-btn">

@@ -186,16 +212,17 @@
            <div

            v-for="(item,index) in colorList"

            :key="index"   

            style="border:none;"

            >

            <div class="color-option"

            v-if="universalColor != index"

            :style="{cursor: pointer,backgroundColor:item.color}"

            :style="{cursor: 'pointer',backgroundColor:item.color}"

            @click="colorCard(item.color,index)"

            />    



            <div class="color-option color-option-active"

            v-else

            :style="{cursor: pointer,border:`2px solid ${item.color}`}"

            :style="{cursor: 'pointer',border:`2px solid ${item.color}`}"

            @click="colorCard(item.color,index)">

           <div 

           :style="{backgroundColor:item.color}"

@@ -271,14 +298,16 @@
<script>

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

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



import {

  updateUser,

} from "@/api/user";

export default {

  data() {

    return {

      playSpan:"\ue6e8",

      playSpan2:"\ue6e8",

      delspan:"\ue6e8",

      warnSpn:"\ue6e8",

      playSpan: "\ue75e",

      playSpan2: "\ue75f",

      delspan: "\ue715",

      warnSpn: "\ue71c",

      curPlayingIndex: null,

      showUpload: false,

      activeIcons: 0,

@@ -290,9 +319,9 @@
      },

      menuArr: [

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

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

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

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

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

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

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

      ],

      soundList: [],

      activePage: 0,

@@ -312,9 +341,9 @@
      },

      isPlay: false,

      realIconList: [

        { url: "/images/settings/日志管理.png",color:"green" },

        { url: "/images/settings/实时监控.png",color:"yellow" },

        { url: "/images/settings/数据可视化.png",color:"pink" },

        { url: "/images/settings/日志管理.png", color: "green" },

        { url: "/images/settings/实时监控.png", color: "yellow" },

        { url: "/images/settings/数据可视化.png", color: "pink" },

      ],

      flatIconList: [

        { url: "/images/settings/数据推送.png" },

@@ -322,9 +351,9 @@
        { url: "/images/settings/系统设置.png" },

      ],

      tableBGList: [

        { name: "background", url: "/images/settings/background.png" },

        { name: "message", url: "/images/settings/数据推送.png" },

        { name: "weather", url: "/images/settings/系统设置.png" },

        { name: "background", url: "/images/desktop/background.png" },

        { name: "message", url: "/images/desktop/message.png" },

        { name: "weather", url: "/images/desktop/weather.png" },

      ],

      universalColor:'',

      colorList: [

@@ -350,11 +379,12 @@
        _this.curPlayingIndex = null;

      }

    });

    const url = localStorage.getItem("backgroundPic");

    const url = this.curUser.backgroundpic;

    this.activeIcons = this.curUser.useIconType-1

    if (url) {

      const arr = url.split("/");

      // const arr = url.split("/");

      this.activeBg = this.tableBGList.findIndex((x) => {

        return x.url.includes(arr[arr.length - 1]);

        return x.url == url;

      });

    } else {

      this.activeBg = 0;

@@ -376,6 +406,10 @@
    max_video_len() {

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

    },

    curUser() {

      const info = JSON.parse(sessionStorage.getItem("userInfo"));

      return info;

    },

  },

  methods: {

    formatTooltip(v) {

@@ -384,12 +418,16 @@
    pickBg(item, i) {

      this.activeBg = i;

      let message = "changeBackground?" + item.name;

      window.parent.postMessage(

        {

          msg: message,

        },

        "*"

      );

      window.parent.postMessage(  {msg: message, }, "*" );

      updateUser({

        id: this.curUser.id,

        backgroundpic: item.url,

      }).then((res) => {

        if (res.success) {

          sessionStorage.setItem("userInfo", JSON.stringify(res.data))

          this.$message.success(res.msg);

        }

      });

      this.$forceUpdate()

    },

    togglePlay(item, i) {

@@ -465,20 +503,37 @@
    },

    selectIcons(i) {

      this.activeIcons = i;

      updateUser({

        id: this.curUser.id,

        iconType: i+1,

      }).then((res) => {

        if (res.success) {

          window.parent.postMessage({ msg: "AppUpdate" }, "*");

          sessionStorage.setItem("userInfo", JSON.stringify(res.data))

          this.$message.success(res.msg);

        }

      });

    },

    removeSound(item) {

      const h = this.$createElement;

      const icon = 
      this.$msgbox({

          message: h('div', {style: 'display: flex;  flex-direction: column; justify-content: center; align-items: center;'}, [

            h('span',{class:'iconfont warn-icon'},`${this.warnSpn}`),

            h('span', {class:'warn-title'}, '删除事件声音 '),

            h('span', {class:'warn-dec'}, '您是否确认删除事件声音?')

          ]),

          showCancelButton: true,

          confirmButtonText: '确定',

          cancelButtonText: '取消',

        }).then(() => {

      const icon = this.$msgbox({

        title: "",

        message: h(

          "div",

          {

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

          ]

        ),

        showCancelButton: true,

        confirmButtonText: "确定",

        cancelButtonText: "取消",

      }).then(() => {

        deleteSound({

          id: item.id,

        }).then(

@@ -502,8 +557,7 @@
      this.$refs["soundBar"].forEach((x) => {

        x.style = "border: 2px solid #FFF;";

      });

      this.$refs["soundBar"][i].style =

        "border: 2px solid #4E94FF;";

      this.$refs["soundBar"][i].style = "border: 2px solid #4E94FF;";

    },

    submitAlarm() {

      saveAlarmConfig({

@@ -523,13 +577,13 @@
      this.universalColor = index

      document.documentElement.style.setProperty('--colorCard',`${color}`)

      localStorage.setItem('--colorCard',`${color}`)

      window.parent.postMessage({msg:'changeColor',color},'*')

    }

  },

};

</script>



<style scoped lang="scss">



.all {

  width: 100%;

}

@@ -541,20 +595,22 @@
  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  .el-input__inner {

 height: 24px !important;

}

  .general-center {

    height: 100%;

    width: 300px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 24px 10px;

    border-right: 4px solid #F2F2F7;

    background-color: #FBFAFF;



    


    padding: 10px 10px;

    padding-top: 6px;

    border-right: 4px solid #f2f2f7;

    border-top: 4px solid #f2f2f7;

    border-left: 4px solid #f2f2f7;

    background-color: #fbfaff;

    .menu-item {

      
      height: 56px;

      margin-bottom: 4px;

      border-radius: 8px;

@@ -587,8 +643,9 @@
    overflow: auto;

    box-sizing: border-box;

    background-color: rgb(251, 250, 255);

    border-top: 4px solid #f2f2f7;



    padding: 10px 18px 10px 10px;

    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)

@@ -602,7 +659,7 @@
    .el-form-item {

      margin-bottom: 10px;

      height: 50px;

      background: #f8f8f8;

      background: #F2F2F7;

      padding: 4px 20px;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

@@ -630,35 +687,42 @@
        text-align: left;

        margin-bottom: 5px;

      }

       .voice-title {

      .bar.title.voice-title {

        justify-content: center !important;

        font-weight: 700 ;

      }

        text-align: center;

        font-weight: 700;

        border: none;

        background: #F2F2F7;

        border-radius: 8px;

        height: 48px;

        margin-bottom: 4px;

        border:2px solid #F2F2F7 !important;    
       }

      .bar-group {

        overflow: auto;

        height: 400px;

      }

      .bar {

        height: 48px;

        background-color: #f8f8f8;

        border-radius: 10px;

        line-height: 48px;

        box-sizing: border-box;

        padding: 0 20px 0 20px;

        font-weight: 700;

        display: flex;

        justify-content: space-between;

        margin-bottom: 2px;

        border: 2px solid #fff;

        .name {

          font-size: 14px;

        }     
        .btns {

          width: 52px;

        height: calc(100% - 100px);

        .general-bar {

          height: 48px;

          background: #F2F2F7;

          border-radius: 10px;

          line-height: 48px;

          box-sizing: border-box;

          padding: 0 20px 0 20px;

          font-weight: 700;

          display: flex;

          justify-content: space-between;

          color: rgba(191, 191, 191, 1);

         /*  .el-icon-video-pause {

          margin-bottom: 2px;

          border:2px solid #F2F2F7;

          margin-bottom: 4px;

          .name {

            font-size: 14px;

          }

          .sound-btns {

            width: 52px;

            display: flex;

            justify-content: space-between;

            color: rgba(191, 191, 191, 1);

            /*  .el-icon-video-pause {

            cursor: pointer;

            font-size: 23px;

            vertical-align: middle;

@@ -670,18 +734,20 @@
            vertical-align: middle;

            color: #409eff;

          } */

          span {

            color: #333

            span {

              color: #333;

            }

            .del:hover {

              color: #fc4958;

            }

          }

          .del:hover {

          color:#FC4958;

          .desc {

            font-size: 14px;

            color: rgba(134, 134, 134, 1);

          }

        }

        .desc {

          font-size: 14px;

          color: rgba(134, 134, 134, 1);

        }

      }



      /* .bar:hover {

        border: 2px solid #4E94FF !important;

      } */

@@ -713,24 +779,25 @@
      .min-dur {

        box-sizing: border-box;

        padding: 0 20px;

        background-color: rgba(248, 248, 248, 1);

        background-color: #F2F2F7;

        height: 105px;

        margin-bottom: 20px;

        margin-bottom: 4px;

        border-radius: 15px;

        .title {

          color: #333;

          height: 45px;

          line-height: 45px;



          text-align: left;

          box-sizing: border-box;

          padding: 0 6px;

          font-size: 14px;

          font-size: 16px;

          font-weight: 700;

        }

      }



      .min-dur:hover {

      /* .min-dur:hover {

        background-color: rgba(233, 233, 233, 1);

      }

      } */



      .entity {

        display: flex;

@@ -741,8 +808,8 @@
          min-width: 30px;

          line-height: 80px;

          margin-right: 10px;

          color: rgba(120, 120, 120, 1);

          font-size: 14px;

          color:#333 ;

          font-size: 8px;

        }

        .block {

          flex: 1;

@@ -781,15 +848,16 @@
    }

    .save-btn {

      background-color: var(--colorCard);

      width: 240px;

      width: 180px;

      height: 40px;

      margin: 0 auto;

      border-radius: 10px;

      border-radius: 25px;

      color: #fff;

      line-height: 40px;

      cursor: pointer;

      font-size: 14px;

      margin-top: 20px;

      font-size: 16px;

      font-weight: 700;

      margin-top: 55px;

    }

    .self-setting {

      .top-title {

@@ -825,7 +893,7 @@
          height: 30px;

          border-radius:50% ;

          background-color: #fff;

          padding: 3px;

          padding: 4px;

          .color-option-content {

            width: 100%;

            height: 100%;

@@ -906,88 +974,104 @@
  }

}

.v-modal {

  opacity:0.35 !important;

  opacity: 0.35 !important;

  border-radius: 8px !important;

}



.el-message-box {

position: absolute;

width: 420px;

height: 210px;

left: 302px;

top: 279px;

  position: absolute;

  width: 420px;

  height: 210px;

  left: 302px;

  top: 279px;



background: #FFFFFF;

border-radius: 8px;

  background: #ffffff;

  border-radius: 8px;

}



.upload-demo {

top: 452px;

left: 2px !important;

width: 452px;

height: 150px;

background: #FFFFFF;

box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);

border-radius: 8px;

  top: 452px;

  left: 2px !important;

  width: 452px;

  height: 150px;

  background: #ffffff;

  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);

  border-radius: 8px;



::v-deep .el-upload-dragger {

display: flex;

justify-content: center;

align-items: center;

overflow: visible;

width: 340px;

height: 72px;

margin-top:30px ;

}





.info {



font-weight: bold;

font-size: 14px;

color: #828282;

}

  ::v-deep .el-upload-dragger {

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: visible;

    width: 340px;

    height: 72px;

    margin-top: 30px;

  }



.info-click {

  color: var(--colorCard);

  text-decoration: underline;

}



  .info-click {

    color: #4e94ff;

    text-decoration: underline;

  }

}



.des {

  position: absolute;

      top: 78px;

    left: 109px;

  top: 78px;

  left: 109px;

  z-index: 999;

  color: #4F4F4F;

  color: #4f4f4f;

  font-weight: bold;

  font-size: 12px;

}



</style>



<style lang="scss">

.el-message-box {

  padding-bottom: 20px !important;

  border-radius: 8px !important;

  .el-message-box__content {

    color: #333333;

    padding: 0;

    font-size: 14px;

  }

  .warn-icon {

    color:rgba(254, 109, 104, 1) ;

    font-size: 50px;

    margin-top:26px ;

    color: #fe6d68;

    font-size: 40px;

    margin-top: 11px;

  }

  .warn-title {

    font-weight: bold;

    font-size: 16px;

    margin: 5px;

    margin: 6px;

    line-height: 22px;

  }

  .warn-dec {

    font-weight: bold;

    font-size: 14px;

    color:  #828282;

    color: #828282;

    line-height: 20px;

  }

    .el-message-box__btns {

  .el-message-box__headerbtn {

    top: 12px;

  }

  .el-message-box__headerbtn .el-message-box__close {

    color: #333333;

    font-weight: bold;

  }

  .el-message-box__btns {

    display: flex;

    justify-content: center;

    margin-top: 10px;

    margin-top: 20px;

    .el-button:focus,

    .el-button:hover {

      background-color: none;

      border: none;

    }

    button {

      width: 175px;

      height: 40px;

@@ -996,15 +1080,19 @@
        font-size: 16px;

        font-weight: 700;

      }

      &:hover {

        border: 1px solid var(--colorCard) !important;

      }

    }

    button:first-child {

      background-color: #E0E0E0;

      background-color: #e0e0e0;

      span {

         color: #333333;

        color: #333333;

      }

    }

    button:last-child {

      background-color: var(--colorCard) !important;

      border: 1px solid var(--colorCard) !important;

      span { 

         color: #fff;

      }

@@ -1012,3 +1100,119 @@
  }

}

</style>



<style>



.videoTime .el-slider__button {

  margin-top: -25px !important;

  border: none !important;

  
}



.videoTime .el-slider__button::after {

  display: block;

  position: relative;

content: "\e75d";

  color: var(--colorCard);

  font-family: "iconfont" !important;

  font-size: 16px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



.videoTime .el-tooltip {

background-color: #F2F2F7 !important;

  border: none !important;

}



.videoTime .el-slider__runway {

  background-color: #fff !important;

  height: 3px !important;

}



.videoTime .el-slider__stop {

  background-color: #C4C4C4 !important;

  height: 3px !important;

  width: 8px !important;

  border-radius:0 !important;

}



.videoTime .el-slider__bar {

  z-index: 999999999 !important;

  background-color: var(--colorCard) !important;

}



.videoTime .el-input-number.el-input-number--small {

  width: 90px;

  height: 24px !important;

  border-radius: 4px;

  line-height: 24px !important;

  font-weight: 700 !important;

}





.videoTime .el-input-number.el-input-number--small .el-input__inner {

font-size: 12px !important;

height: 24px !important;

}



.el-input-number__decrease {

color: #333 !important;

/* top: 4px !important; */

 height: 22px !important;

 width: 20px !important;

 line-height: 22px  !important;

}



/* .el-input-number__decrease:hover i{

  color: var(--colorCard);

} */



.el-input-number__increase {

color: #333 !important;

 /* top: 4px !important; */

 height: 22px !important;

 width: 24px !important;

 line-height: 22px  !important;

}



.el-input-number__increase:hover i{

 /*  color: var(--colorCard); */

 color: #4E94FF;

}









/* .el-tooltip__popper {

  font-size: 12px !important;

  background-color: transparent !important;

  color:var(--colorCard) !important;

}



.popper__arrow::after {

  border-color: transparent !important;

  border: none !important;

}



.popper__arrow:after {

  border-bottom-color: green !important;

}



.popper__arrow:after {

  border-top-color: pink !important;

}



.toolClass {

  border: none !important;

}



.toolClass {

  border: none !important;

}



.el-slider__button::after {

  border: none !important;

} */

</style>