备份还原ui新

heyujie

2022-02-09 211cd7469ebc7df813ffd320c90f64fd1c2f1aee

 src/pages/settings/views/generalSettings.vue

@@ -16,48 +16,6 @@
        </div>

      </div>

      <div class="general-right">

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

          <div class="bar">

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

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

          </div>

          <div class="bar">

            <span class="name">设备型号</span>

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

          </div>

          <div class="bar">

            <span class="name">设备类型</span>

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

          </div>

          <div class="bar">

            <span class="name">通道个数</span>

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

          </div>

          <div class="bar">

            <span class="name">主控版本</span>

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

          </div>

          <div class="bar">

            <span class="name">web版本</span>

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

          </div>

          <div class="bar">

            <span class="name">硬盘信息</span>

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

          </div>

          <div class="bar">

            <span class="name">CPU</span>

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

          </div>

          <div class="bar">

            <span class="name">内存</span>

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

          </div>

          <div class="bar">

            <span class="name">运行时间</span>

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

          </div>

        </div> -->

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

          <div class="min-dur">

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

@@ -77,18 +35,6 @@
                  :format-tooltip="formatTooltip"

                ></el-slider>

              </div>

              <!-- <el-input-number

                v-model="min_len"

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

               
              <el-input-number 

              v-model="min_len" 

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

@@ -97,7 +43,8 @@
              :max="120" 

              step-strictly

              size="small"

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

              ></el-input-number

              >&nbsp;s

            </div>

          </div>

          <div class="min-dur">

@@ -127,7 +74,6 @@
                size="small"

              ></el-input-number

              >&nbsp;s

              
            </div>

          </div>



@@ -156,18 +102,17 @@
                    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"

                    style=""

                  ></i>

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

                  <img

                    v-else

                    src="/images/settings/暂停.png"

                    alt=""

                    style="

                      width: 16px;

                      hight: 16px;

                      cursor: pointer;

                      margin-top: 15px;

                    "

                  />

                </span>

                <span

                  class="icon iconfont del"

@@ -212,29 +157,31 @@
            <div

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

            :key="index"   

            style="border:none;"

              style="border: none"

            >

            <div class="color-option"

              <div

                class="color-option"

            v-if="universalColor != index"

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

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

            />    



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

              <div

                class="color-option color-option-active"

            v-else

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

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

                :style="{

                  cursor: 'pointer',

                  border: `2px solid ${item.color}`,

                }"

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

              >

           <div 

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

           class="color-option-content">

           </div>

  
                  class="color-option-content"

                ></div>

            </div>

          </div>

          </div>



          


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

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

            <div class="bar-title">

@@ -298,9 +245,7 @@
<script>

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

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

import {

  updateUser,

} from "@/api/user";

import { updateUser } from "@/api/user";

export default {

  data() {

    return {

@@ -318,7 +263,6 @@
        max: 0,

      },

      menuArr: [

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

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

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

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

@@ -355,7 +299,7 @@
        { name: "message", url: "/images/desktop/message.png" },

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

      ],

      universalColor:'',

      universalColor: "",

      colorList: [

        {name:1 ,color:"#FC6B9E"},

        {name:2 ,color:"#F38F56"},

@@ -366,7 +310,7 @@
        {name:7 ,color:"#4E94FF"},

        {name:8 ,color:"#8E8CD8"},

        {name:9 ,color:"#4C4A48"},

      ]

      ],

    };

  },

  mounted() {

@@ -380,17 +324,11 @@
      }

    });

    const url = this.curUser.backgroundpic;

    this.activeIcons = this.curUser.useIconType-1

    this.universalColor = this.colorList.findIndex((x) => {

      return x.color == localStorage.getItem("--colorCard")

    })

    if (url) {

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

        return x.url == url;

      });

    } else {

      this.activeBg = 0;

    }

    this.activeIcons = this.curUser.useIconType - 1;

    this.universalColor = this.colorList.findIndex(

      (x) => x.color == localStorage.getItem("--colorCard")

    );

    this.activeBg = url ? this.tableBGList.findIndex((x) => x.url == url) : 0;

    const e = this.$refs.curPage;

    e.addEventListener("click", (e) => {

      if (this.showUpload) {

@@ -409,8 +347,7 @@
      return Math.round(this.fakeObj.max * 1.2);

    },

    curUser() {

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

      return info;

      return JSON.parse(sessionStorage.getItem("userInfo"));

    },

  },

  methods: {

@@ -420,18 +357,17 @@
    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))

          debugger

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

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

        }

      });

      this.$forceUpdate()

      this.$forceUpdate();

    },

    togglePlay(item, i) {

      if (this.curPlayingIndex !== null) {

@@ -512,8 +448,8 @@
      }).then((res) => {

        if (res.success) {

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

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

          debugger

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

          debugger;

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

        }

      });

@@ -578,11 +514,11 @@
      });

    },

    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>

@@ -638,7 +574,7 @@
      color: white !important;

    }

    .menu-item:hover {

      background-color: #F2F2F7;

      background-color: #f2f2f7;

    }

  }

  .general-right {

@@ -663,7 +599,7 @@
    .el-form-item {

      margin-bottom: 10px;

      height: 50px;

      background: #F2F2F7;

      background: #f2f2f7;

      padding: 4px 20px;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

@@ -696,18 +632,18 @@
        text-align: center;

        font-weight: 700;

        border: none;

        background: #F2F2F7;

        background: #f2f2f7;

        border-radius: 8px;

        height: 48px;

        margin-bottom: 4px;

        border:2px solid #F2F2F7 !important;    
        border: 2px solid #f2f2f7 !important;

       }

      .bar-group {

        overflow: auto;

        height: calc(100% - 100px);

        .general-bar {

          height: 48px;

          background: #F2F2F7;

          background: #f2f2f7;

          border-radius: 10px;

          line-height: 48px;

          box-sizing: border-box;

@@ -716,7 +652,7 @@
          display: flex;

          justify-content: space-between;

          margin-bottom: 2px;

          border:2px solid #F2F2F7;

          border: 2px solid #f2f2f7;

          margin-bottom: 4px;

          .name {

            font-size: 14px;

@@ -726,18 +662,7 @@
            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;

          } */



            span {

              color: #333;

            }

@@ -783,7 +708,7 @@
      .min-dur {

        box-sizing: border-box;

        padding: 0 20px;

        background-color: #F2F2F7;

        background-color: #f2f2f7;

        height: 105px;

        margin-bottom: 4px;

        border-radius: 15px;

@@ -871,9 +796,7 @@
        font-weight: 700;

        margin-top: 20px;

      }

  /*     .icon-bar:hover {

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

      } */



      .color-bar {

        display: flex;

        justify-content: center;

@@ -909,7 +832,7 @@
        cursor: pointer;

        box-sizing: border-box;

        padding: 15px 13px 14px 20px;

        background: #F2F2F7;

        background: #f2f2f7;

        border-radius: 8px;

        margin-bottom: 10px;

        .bar-title {

@@ -928,7 +851,7 @@
          }

          .icon-normal {

            font-size: 16px;

            color: #E0E0E0;

            color: #e0e0e0;

          }

        }

        .entity {

@@ -947,7 +870,7 @@
        }

      }

      .bg-bar {

        background-color: #F2F2F7;

        background-color: #f2f2f7;

        box-sizing: border-box;

        padding: 15px 25px;

        border-radius: 12px;

@@ -1044,7 +967,7 @@
    font-size: 14px;

  }

  .warn-icon {

    color: #fe6d68;

    color: var(--colorCard);

    font-size: 40px;

    margin-top: 11px;

  }

@@ -1070,7 +993,7 @@
  .el-message-box__btns {

    display: flex;

    justify-content: center;

    margin-top: 20px;

    margin: 20px;

    .el-button:focus,

    .el-button:hover {

      background-color: none;

@@ -1106,11 +1029,9 @@
</style>



<style>



.videoTime .el-slider__button {

  margin-top: -25px !important;

  border: none !important;

  
}



.videoTime .el-slider__button::after {

@@ -1126,7 +1047,7 @@
}



.videoTime .el-tooltip {

background-color: #F2F2F7 !important;

  background-color: #f2f2f7 !important;

  border: none !important;

}



@@ -1136,7 +1057,7 @@
}



.videoTime .el-slider__stop {

  background-color: #C4C4C4 !important;

  background-color: #c4c4c4 !important;

  height: 3px !important;

  width: 8px !important;

  border-radius:0 !important;

@@ -1155,7 +1076,6 @@
  font-weight: 700 !important;

}





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

font-size: 12px !important;

height: 24px !important;

@@ -1169,10 +1089,6 @@
 line-height: 22px  !important;

}



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

  color: var(--colorCard);

} */



.el-input-number__increase {

color: #333 !important;

 /* top: 4px !important; */

@@ -1183,40 +1099,6 @@


.el-input-number__increase:hover i{

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

 color: #4E94FF;

  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>