all

heyujie

2021-07-21 b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1

 src/pages/settings/views/generalSettings.vue

@@ -13,7 +13,7 @@
          <span class="title">{{ item.name }}</span>

        </div>

      </div>

      <div class="cluster-right">

      <div class="general-right">

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

          <div class="bar">

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

@@ -58,46 +58,54 @@
        </div>

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

          <div class="min-dur">

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

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

            <div class="entity">

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

              <div class="sec">

                {{min_video_len }}s

              </div>

              <div class="block">

                <el-slider

                  v-model="alarmConf.min_video_len"

                  v-model="fakeObj.min"

                  id="cut_min_duration"

                  :min="0"

                  :min="5 / 1.2"

                  :max="100"

                  @input="min_len=min_video_len"

                  :show-tooltip="false"

                ></el-slider>

                <!-- show-stops

                  :step="5/1.2" -->

              </div>

              <el-input-number

                v-model="alarmConf.min_video_len"

                v-model="min_len"

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

                controls-position="right"

                :min="0"

                :max="100"

                :min="5"

                :max="120"

                size="small"

              ></el-input-number

              >&nbsp;s

            </div>

          </div>

          <div class="min-dur">

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

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

            <div class="entity">

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

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

              <div class="block">

                <el-slider

                  v-model="alarmConf.max_video_len"

                  v-model="fakeObj.max"

                  id="cut_max_duration"

                  :min="0"

                  :min="5 / 1.2"

                  @input="max_len=max_video_len"

                  :max="100"

                  :show-tooltip="false"

                ></el-slider>

              </div>

              <el-input-number

                v-model="alarmConf.max_video_len"

                v-model="max_len"

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

                controls-position="right"

                :min="0"

                :max="100"

                :min="5"

                :max="120"

                size="small"

              ></el-input-number

              >&nbsp;s

@@ -109,45 +117,55 @@
        <div class="lang" v-if="activePage == 2">

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

          <div class="bar-group">

             <div

            class="bar"

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

            :key="i"

            @click="clickSound(item, i)"

            ref="soundBar"

          >

            <div class="left-part">

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

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

            </div>

            <div class="btns">

              <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

              class="upload-demo"

              drag

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

              :http-request="uploadSound"

              v-show="showUpload"

              :show-file-list="false"

            <div

              class="bar"

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

              :key="i"

              @click="clickSound(item, i)"

              ref="soundBar"

            >

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

              <div class="el-upload__text">

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

                <em>点击上传</em>

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

              <div class="left-part">

                <span

                  class="icon iconfont"

                  style="margin-right: 12px; color: dodgerblue"

                  >&#xe6f5;</span

                >

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

              </div>

            </el-upload>

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

              <div class="btns">

                <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; color: indianred"

                  @click="removeSound(item)"

                  >&#xe6cb;</span

                >

              </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 class="add-group">

            <div class="add-btn">

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

                >&#xe646;</span

@@ -156,37 +174,61 @@
          </div>

        </div>



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

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

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

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



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

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

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

            <div class="bar-title">

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

              <span

                class="icon iconfont"

                style="color: #3d68e1; font-size: 18px"

                v-show="activeIcons == 0"

                >&#xe6f1;</span

              >

            </div>

            <div class="entity">

              <div

                class="entity-img"

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

                :key="i"

              ></div>

              >

                <img :src="item.url" alt="" />

              </div>

            </div>

          </div>

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

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

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

            <div class="bar-title">

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

              <span

                class="icon iconfont"

                style="color: #3d68e1; font-size: 18px"

                v-show="activeIcons == 1"

                >&#xe6f1;</span

              >

            </div>

            <div class="entity">

              <div

                class="entity-img"

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

                :key="i"

              ></div>

              >

                <img :src="item.url" alt="" />

              </div>

            </div>

          </div>

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

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

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

          <div class="bg-bar">

            <div class="bg-list">

              <div

                class="bg-img"

                :class="activeBg == i ? 'bg-list-active' : ''"

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

                :key="i"

              ></div>

                @click="pickBg(item, i)"

              >

                <img :src="item.url" alt="" />

              </div>

            </div>

          </div>

        </div>

@@ -203,13 +245,18 @@
export default {

  data() {

    return {

      inWifiDetail: false,

      curPlayingIndex: null,

      inWireDetail: false,

      showUpload: false,

      alarmConf: {

        min_video_len: 10,

        max_video_len: 15,

      activeIcons: 0,

      // alarmConf: {

      //   min_video_len: 10,

      //   max_video_len: 15,

      // },

      min_len:10,

      max_len:15,

      fakeObj:{

        min:10,

        max:15

      },

      menuArr: [

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

@@ -231,11 +278,24 @@
        webVersion: "",

        disks: "",

        memory: "",

        activeBg: 0,

      },

      isPlay: false,

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

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

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

      realIconList: [

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

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

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

      ],

      flatIconList: [

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

        { url: "/images/settings/数据栈配置.png" },

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

      ],

      tableBGList: [

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

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

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

      ],

    };

  },

  mounted() {

@@ -249,10 +309,26 @@
      }

    });

  },

  beforeDestroy() {},

  computed: {

    min_video_len(){

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

    },

    max_video_len(){

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

    },

  },

  methods: {

    pickBg(item, i) {

      this.activeBg = i;

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

      window.parent.postMessage(

        {

          msg: message,

        },

        "*"

      );

    },

    togglePlay(item, i) {

      debugger;

      if (this.curPlayingIndex !== null) {

        this.eventAudio.pause();

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

@@ -285,22 +361,20 @@
        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.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));

      });

    },



    getSounds() {

      getSoundList()

        .then((res) => {

          if (res.success) {

            this.soundList = res.data;

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

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

            });

          }

        })

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

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

        if (res.success) {

          this.soundList = res.data;

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

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

          });

        }

      });

    },

    secondsFormat(s) {

      var day = (s / (24 * 3600)) | 0;

@@ -312,22 +386,22 @@
    uploadSound(params) {

      let param = new FormData();

      param.append("file", params.file);

      uploadSound(param).then((res) => {

        console.log(res.data);

        this.getSounds();

      });

      uploadSound(param).then(

        (res) => {

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

          this.getSounds();

        },

        (err) => {

          this.$message.error("声音上传失败");

        }

      );

    },

    openRight(i) {

      this.activePage = i;

    },

    wifiControl(val) {},

    checkWifi() {

      this.inWifiDetail = true;

    selectIcons(i) {

      this.activeIcons = i;

    },

    checkWire(item) {

      this.inWireDetail = true;

    },

    selectIcons(typ) {},

    removeSound(item) {

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

        confirmButtonText: "确定",

@@ -361,8 +435,13 @@
        "rgba(233, 233, 233, 1)";

    },

    submitAlarm() {

      saveAlarmConfig(this.alarmConf).then((res) => {

      debugger;

      saveAlarmConfig({

        min_video_len: this.min_video_len,

        max_video_len:  this.max_video_len

      }).then((res) => {

        if (res && res.success) {

          this.getDeviceInfo()

          this.$notify({

            type: "success",

            message: "保存成功",

@@ -421,15 +500,13 @@
      color: white;

    }

  }

  .cluster-right {

  .general-right {

    flex: 1;

    flex-basis: auto;

    overflow: auto;

    // background-color: rgba(240, 242, 245, 1);

    box-sizing: border-box;

    position: relative;



    padding: 20px 40px;

    // .create-new .join-exist {

    .el-form-item.is-required:not(.is-no-asterisk)

      > .el-form-item__label:before,

    .el-form-item.is-required:not(.is-no-asterisk)

@@ -462,6 +539,8 @@
      max-width: none !important;

    }

    .lang {

      position: relative;

      height: calc(83% - 0px);

      .title {

        height: 35px;

        line-height: 35px;

@@ -469,15 +548,15 @@
        text-align: left;

        margin-bottom: 5px;

      }

      .bar-group{

        height: 280px;

    overflow: auto;

      .bar-group {

        overflow: auto;

        height: 100%;

      }

      .bar {

        height: 50px;

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

        height: 44px;

        background-color: #f8f8f8;

        border-radius: 10px;

        line-height: 50px;

        line-height: 44px;

        box-sizing: border-box;

        padding: 0 30px 0 20px;

        display: flex;

@@ -520,14 +599,16 @@
        background-color: rgba(233, 233, 233, 1);

      }

      .add-group {

        margin-top: 20px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        margin: 10px auto;

        width: fit-content;

      }

      .upload-demo {

        height: 180px;

        transition: all .3s;

        -webkit-transition: all 0.3s;

        transition: all 0.5s;

        position: absolute;

        bottom: -40px;



        left: calc(50% - 145px);

        .el-upload-dragger {

          width: 290px;

        }

@@ -535,8 +616,9 @@
      .add-btn {

        height: 40px;

        line-height: 40px;

        margin-top: 10px;

        margin: 0 auto;

        cursor: pointer;

        width: fit-content;

        .icon {

          font-size: 32px;

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

@@ -585,7 +667,6 @@
        }

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

          padding-left: 16px;

          // padding-right: 37px;

        }

        #cut_min_duration {

          .el-slider__bar {

@@ -620,30 +701,77 @@
      border-radius: 10px;

      color: #fff;

      line-height: 40px;

      cursor: pointer;

      font-size: 14px;

      margin-top: 20px;

    }

  }



  .lang {

    .min-dur {

      .bg-list {

        display: flex;

        .bg-img {

          background-color: aquamarine;

          width: 100px;

          height: 60px;

          margin-right: 10px;

    .self-setting {

      .top-title {

        font-size: 16px;

        height: 30px;

        line-height: 30px;

        margin-bottom: 10px;

      }

      .icon-bar:hover {

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

      }

      .icon-bar {

        cursor: pointer;

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

        box-sizing: border-box;

        padding: 15px 25px;

        border-radius: 12px;

        margin-bottom: 12px;

        .bar-title {

          line-height: 20px;

          height: 20px;

          margin-bottom: 10px;

          display: flex;

          justify-content: space-between;

          .title {

            font-size: 14px;

          }

        }

        .entity {

          display: flex;

          .entity-img {

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

            width: 50px;

            height: 50px;

            margin-right: 10px;

            img {

              width: 50px;

              height: 50px;

            }

          }

        }

      }

      .entity {

        display: flex;

      .bg-bar {

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

        box-sizing: border-box;

        padding: 15px 25px;

        border-radius: 12px;

        margin-bottom: 12px;

        .bg-list {

          display: flex;

          .bg-img {

            margin-right: 12px;

            cursor: pointer;

            width: 120px;

            border: 2px solid transparent;

            img {

              width: 120px;

              border-radius: 5px;



        .entity-img {

          background-color: aquamarine;

          width: 50px;

          height: 50px;

          margin-right: 10px;

              height: 100%;

            }

          }

          .bg-img:hover {

            border: 2px solid yellow;

          }

          .bg-list-active {

            border: 2px solid yellow;

          }

        }

      }

    }