系统设置修改

heyujie

2021-07-10 c83e653ebaef064b0741c1f35cf6576762ccbc68

 src/pages/settings/views/generalSettings.vue

@@ -1,22 +1,20 @@
<template>

  <div class="all">

    <div class="cluster-content">

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

        <div class="menu-item" @click="openRight('basic')">

          <div>设备信息</div>

        </div>

        <div class="menu-item" @click="openRight('video')">

          <div>事件录像时长</div>

        </div>

        <div class="menu-item" @click="openRight('sound')">

          <div>事件声音</div>

        </div>

        <div class="menu-item" @click="openRight('personalise')">

          <div>个性化设置</div>

    <div class="general-set">

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

        <div

          class="menu-item"

          :class="activePage == i ? 'menu-item-active' : ''"

          @click="openRight(i)"

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

          :key="i"

        >

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

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

        </div>

      </div>

      <div class="cluster-right">

        <div class="lang" v-if="activePage == 'basic'">

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

          <div class="bar">

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

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

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

          </div>

        </div>

        <div class="lang" v-if="activePage == 'video'">

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

          <div class="min-dur">

            <div class="title">视频截取最短时长</div>

            <div class="entity">

@@ -77,8 +75,9 @@
                controls-position="right"

                :min="0"

                :max="100"

                size="mini"

              ></el-input-number>&nbsp;s

                size="small"

              ></el-input-number

              >&nbsp;s

            </div>

          </div>

          <div class="min-dur">

@@ -99,16 +98,18 @@
                controls-position="right"

                :min="0"

                :max="100"

                size="mini"

              ></el-input-number>&nbsp;s

                size="small"

              ></el-input-number

              >&nbsp;s

            </div>

          </div>



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

        </div>

        <div class="lang" v-if="activePage == 'sound'">

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

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

          <div

          <div class="bar-group">

             <div

            class="bar"

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

            :key="i"

@@ -116,13 +117,19 @@
            ref="soundBar"

          >

            <div class="left-part">

              <span class="icon iconfont">&#xe646;</span>

              <span class="icon iconfont" style="margin-right:12px;">&#xe6f5;</span>

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

            </div>

            <div class="btns">

              <span class="icon iconfont">&#xe646;</span>

              <span class="icon iconfont" @click="removeSound(item)">&#xe646;</span>

              <span @click="togglePlay(item, i)">

                <i v-if="!item.isPlay" class="el-icon-video-play" style=""></i>

                <i v-else class="el-icon-video-pause"></i>

              </span>

              <span class="icon iconfont" style="cursor:pointer;" @click="removeSound(item)"

                >&#xe6cb;</span

              >

            </div>

          </div>

          </div>

          <div class="add-group">

            <el-upload

@@ -140,32 +147,46 @@
                <br />仅支持mp3/wma等格式

              </div>

            </el-upload>

            <div v-show="!showUpload"></div>

            <div v-show="!showUpload" class="upload-demo"></div>

            <div class="add-btn">

              <span class="icon iconfont" @click="showUpload = !showUpload">&#xe646;</span>

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

                >&#xe646;</span

              >

            </div>

          </div>

        </div>



        <div class="lang" v-if="activePage == 'personalise'">

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

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



          <div class="min-dur" style="cursor:pointer;" @click="selectIcons(0)">

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

            <div class="title">扁平写实图标</div>

            <div class="entity">

              <div class="entity-img" v-for="(item, i) in realIconList" :key="i"></div>

              <div

                class="entity-img"

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

                :key="i"

              ></div>

            </div>

          </div>

          <div class="min-dur" style="cursor:pointer;" @click="selectIcons(1)">

          <div class="min-dur" style="cursor: pointer" @click="selectIcons(1)">

            <div class="title">扁平化图标</div>

            <div class="entity">

              <div class="entity-img" v-for="(item, i) in flatIconList" :key="i"></div>

              <div

                class="entity-img"

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

                :key="i"

              ></div>

            </div>

          </div>

          <div class="title">桌面背景主题</div>

          <div class="min-dur" style="padding-top:25px;">

          <div class="min-dur" style="padding-top: 25px">

            <div class="bg-list">

              <div class="bg-img" v-for="(item, i) in tableBGList" :key="i"></div>

              <div

                class="bg-img"

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

                :key="i"

              ></div>

            </div>

          </div>

        </div>

@@ -179,21 +200,26 @@
import { uploadSound, getSoundList, deleteSound } from "@/api/event";

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



import { isIPv4 } from "@/scripts/validate";



export default {

  data() {

    return {

      isHighClass: false,

      inWifiDetail: false,

      curPlayingIndex: null,

      inWireDetail: false,

      showUpload: false,

      alarmConf: {

        min_video_len: 10,

        max_video_len: 15,

      },

      menuArr: [

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

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

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

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

      ],

      soundList: [],

      activePage: "basic",

      activePage: 0,

      eventAudio: new Audio(),

      deviceInfo: {

        cpu: "",

        runningTime: "",

@@ -206,6 +232,7 @@
        disks: "",

        memory: "",

      },

      isPlay: false,

      realIconList: [{}, {}, {}],

      flatIconList: [{}, {}, {}],

      tableBGList: [{}, {}, {}],

@@ -214,11 +241,35 @@
  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;

      }

    });

  },

  beforeDestroy() { },

  props: ["barName"],

  beforeDestroy() {},

  methods: {

    togglePlay(item, i) {

      debugger;

      if (this.curPlayingIndex !== null) {

        this.eventAudio.pause();

        this.soundList[this.curPlayingIndex].isPlay = false;

        if (this.curPlayingIndex === i) {

          this.curPlayingIndex = null;

          return;

        }

      }

      this.curPlayingIndex = i;

      this.eventAudio.src = "http://" + item.path;

      if (item.isPlay) {

        this.eventAudio.pause();

      } else {

        this.eventAudio.play();

      }

      item.isPlay = !item.isPlay;

    },

    getDeviceInfo() {

      getDevInfo().then((res) => {

        let info = res.data.deviceInfo;

@@ -234,8 +285,8 @@
        this.deviceInfo.disks = "( " + info.disk + ") ";

        this.deviceInfo.memory =

          (info.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB";

        this.alarmConf.min_video_len = basic.min_video_len

        this.alarmConf.max_video_len = basic.max_video_len

        this.alarmConf.min_video_len = basic.min_video_len;

        this.alarmConf.max_video_len = basic.max_video_len;

      });

    },



@@ -244,6 +295,9 @@
        .then((res) => {

          if (res.success) {

            this.soundList = res.data;

            this.soundList.forEach((x) => {

              this.$set(x, "isPlay", false);

            });

          }

        })

        .catch((e) => console.log(e));

@@ -263,43 +317,41 @@
        this.getSounds();

      });

    },

    openRight(typ) {

      this.activePage = typ;

      // if (typ == "sound") {

      //   this.getSounds();

      // }

    openRight(i) {

      this.activePage = i;

    },

    wifiControl(val) { },

    wifiControl(val) {},

    checkWifi() {

      this.inWifiDetail = true;

    },

    checkWire(item) {

      this.inWireDetail = true;

    },

    selectIcons(typ) {



    },

    selectIcons(typ) {},

    removeSound(item) {

      this.$confirm('您是否确认删除事件声音', '删除事件声音', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      this.$confirm("您是否确认删除事件声音", "删除事件声音", {

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",

      }).then(() => {

        deleteSound({

          id: item.id

        }).then((res) => {

          if (res.success) {

            this.getSounds()

            this.$message({

              type: 'success',

              message: '删除成功!'

            });

            this.showUpload = false

          id: item.id,

        }).then(

          (res) => {

            if (res.success) {

              this.getSounds();

              this.$message({

                type: "success",

                message: "删除成功!",

              });

              this.showUpload = false;

            }

          },

          (err) => {

            this.$message.error(err.msg);

          }

        }, err => {

          this.$message.error(err.msg)

        })

      })

        );

      });

    },

    clickSound(item, i) {

      this.$refs["soundBar"].forEach((x) => {

@@ -326,14 +378,14 @@
  width: 100%;

}



.cluster-content {

.general-set {

  height: 100%;

  display: flex;

  flex-direction: row;

  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  .cluster-center {

  .general-center {

    height: 100%;

    width: 280px;

    overflow: auto;

@@ -342,18 +394,31 @@
    padding: 10px;

    border-right: 5px solid #f8f8f8;



    // background-color: lavender;

    .menu-item {

      background-color: #f8f8f8;

      height: 40px;

      height: 50px;

      margin-bottom: 10px;

      border-radius: 8px;

      line-height: 40px;

      border-radius: 10px;

      line-height: 50px;

      box-sizing: border-box;

      font-size: 14px;

      padding: 0 20px;

      cursor: pointer;

      display: flex;

      justify-content: space-between;

      .iconfont {

        margin-right: 12px;

      }

      .title {

        font-size: 16px;

      }

    }

    .menu-item-active {

      background-color: #3d68e1;

      color: white;

    }

    .menu-item:hover {

      background-color: #3d68e1;

      color: white;

    }

  }

  .cluster-right {

@@ -404,6 +469,10 @@
        text-align: left;

        margin-bottom: 5px;

      }

      .bar-group{

        height: 280px;

    overflow: auto;

      }

      .bar {

        height: 50px;

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

@@ -414,7 +483,6 @@
        display: flex;

        justify-content: space-between;

        margin-bottom: 10px;

        cursor: pointer;

        .left-part {

          .icon {

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

@@ -430,6 +498,18 @@
          display: flex;

          justify-content: space-between;

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

          .el-icon-video-pause {

            cursor: pointer;

            font-size: 23px;

            vertical-align: middle;

            color: #409eff;

          }

          .el-icon-video-play {

            cursor: pointer;

            font-size: 23px;

            vertical-align: middle;

            color: #409eff;

          }

        }

        .desc {

          font-size: 14px;

@@ -440,12 +520,14 @@
        background-color: rgba(233, 233, 233, 1);

      }

      .add-group {

        margin-top: 50px;

        margin-top: 20px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

      }

      .upload-demo {

        height: 180px;

        transition: all .3s;

        .el-upload-dragger {

          width: 290px;

        }

@@ -454,8 +536,9 @@
        height: 40px;

        line-height: 40px;

        margin-top: 10px;

        cursor: pointer;

        .icon {

          font-size: 30px;

          font-size: 32px;

          color: rgba(61, 104, 225, 1);

        }

      }

@@ -497,16 +580,12 @@
          flex: 1;

          margin: 0 20px 0 6px;

        }

        .el-input-number--mini {

          width: 80px;

        }

        .el-input-number.is-controls-right[class*="mini"] [class*="increase"],

        .el-input-number.is-controls-right[class*="mini"] [class*="decrease"] {

          width: 23px;

        .el-input-number--small {

          width: 100px;

        }

        .el-input-number.is-controls-right .el-input__inner {

          padding-left: 13px;

          padding-right: 37px;

          padding-left: 16px;

          // padding-right: 37px;

        }

        #cut_min_duration {

          .el-slider__bar {