zzjv0

ZZJ

2021-09-24 758d6d078ef2fb99907a1a78de6548c542768b37

zzjv0

 public/apps.json

@@ -262,8 +262,8 @@
      "type": "2",
      "url": "/view/settings/",
      "title": "系统设置",
      "width": 1200,
      "height": 650,
      "width": 1024,
      "height": 768,
      "iconBlob": "",
      "icon": "../../images/app-mid/settings.png",
      "version": "1.0.0",

 public/css/common.scss

@@ -1,4 +1,5 @@


/*定位*/
.tl{text-align: left;}
.tc{text-align: center;}

 public/index.html

@@ -5,11 +5,13 @@
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="stylesheet" href="/public//css/globalVariable.css">
  <link rel="icon" type="image/png" href="<%= BASE_URL %>favicon.png" sizes="32x32" />
  <link rel="stylesheet" href="/fonts/alibaba/iconfont.css">
  <title><%= htmlWebpackPlugin.options.title %></title>

  <style>
    
    html,
    body {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
@@ -61,6 +63,11 @@
      color: #909399;
    }

    /* 全局变量 */
    :root {
    --colorCard:#4E94FF;
    } 

    /* reset */
    html {
      color: #000;

 src/assets/css/globalVariable.scss

New file
@@ -0,0 +1,4 @@
/* 全局变量 */
:root {
    --colorCard:#4E94FF;
} 

 src/pages/settings/index/index.vue

@@ -1414,11 +1414,11 @@
      }
    }
    .left-card-active {
      background-color: rgba(61, 104, 225, 1);
      background-color: var(--colorCard);
      color: #fff;
    }
    .left-card:hover {
      background-color: rgba(61, 104, 225, 1);
      background-color: var(--colorCard);
      color: #fff;
    }
  }
@@ -1474,7 +1474,7 @@
      }

      .account-card-active {
        background-color: rgba(61, 104, 225, 1);
        background-color: var(--colorCard);
        color: #fff;
      }
    }

 src/pages/settings/views/NetSettings.vue

@@ -591,11 +591,11 @@
      }

    }

    .menu-item-active {

      background-color: #3d68e1;

      background-color: var(--colorCard);

      color: white;

    }

    .menu-item:hover {

      background-color: #3d68e1;

      background-color: var(--colorCard);

      color: white;

    }

  }


 src/pages/settings/views/clusterManagement.vue

@@ -644,11 +644,11 @@
      padding: 0 20px;

    }

    .menu-item-active {

      background-color: #3d68e1;

      background-color: var(--colorCard);

      color: white;

    }

    .menu-item:hover {

      background-color: #3d68e1;

      background-color: var(--colorCard);

      color: white;

    }

  }


 src/pages/settings/views/deviceInfo.vue

@@ -3,43 +3,47 @@
    <div class="general-set">

      <div class="general-right">

        <div class="lang" >

          <div class="bar">

          <div class="general-title">

            <span class="iconfont">{{info}}</span>

            <span class="general-info">设备信息</span>

          </div>

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

          <div class=" info-bar">

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

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

          </div>

@@ -58,6 +62,7 @@
    return {

      min_len: 0,

      max_len: 0,

      info:"\ue6e8",

      fakeObj: {

        min: 0,

        max: 0,

@@ -122,7 +127,9 @@
  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  .general-center {

  background-color: #F2F2F7;



  /* .general-center {

    height: 100%;

    width: 280px;

    overflow: auto;

@@ -157,15 +164,54 @@
      background-color: #3d68e1;

      color: white;

    }

  } */

  .general-title {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom:10px ;

    height: 110px;

    background-color: #fff;

    .general-info {

      margin-left: 10px;

      font-size: 16px;

      color:#333 ;

      font-weight: 700;

    }

    .iconfont {

      margin-right: 10px;

      font-size: 40px;

    }

  }



   .general-right .lang .info-bar {

     display: flex;

     align-items: center;

    justify-content: space-between;

    margin-bottom:10px ;

    padding: 0 40px;

    height: 45px;

    color: #4F4F4F;

    font-size: 16px !important;

    font-weight: 700;

    background-color: #fff;

    .desc {

    color: #4F4F4F;

    font-size: 16px;

    font-weight: 700;

    }

    &:hover {

      background-color: #F8F8FF;

    }

  }

  
  .general-right {

    flex: 1;

    flex-basis: auto;

    overflow: auto;

    box-sizing: border-box;



    padding: 20px 40px;

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

    padding: 10px 15px !important;

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

      > .el-form-item__label:before,

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

      .el-form-item__label-wrap

@@ -431,7 +477,7 @@
          }

        }

      }

    }

    } */

  }

}

</style>


 src/pages/settings/views/generalSettings.vue

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

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

    <div class="general-set">

    <div class="general-seting">

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

        <div

          class="menu-item"

@@ -123,7 +123,7 @@
          <div class="save-btn" @click="submitAlarm">保存</div>

        </div>

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

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

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

          <div class="bar-group">

            <div

              class="bar"

@@ -133,32 +133,31 @@
              ref="soundBar"

            >

              <div class="left-part">

                <span

                  class="icon iconfont"

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

                  >&#xe6f5;</span

                >

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

              </div>

              <div class="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>

<!-- 
                  <i

                    v-if="!item.isPlay"

                    class="el-icon-video-play"

                    style=""

                  ></i>

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

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

                </span>

                <span

                  class="icon iconfont"

                  style="cursor: pointer; color: indianred"

                  class="icon iconfont del"

                  style="cursor: pointer;"

                  @click="removeSound(item)"

                  >&#xe6cb;</span

                  >{{delspan}}</span

                >

              </div>

            </div>

          </div>

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

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

            <el-upload

              class="upload-demo"

              drag

@@ -166,14 +165,11 @@
              :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 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">

@@ -202,6 +198,7 @@
                class="entity-img"

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

                :key="i"

                @click="colorCard(item.color)"

              >

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

              </div>

@@ -254,6 +251,10 @@
export default {

  data() {

    return {

      playSpan:"\ue6e8",

      playSpan2:"\ue6e8",

      delspan:"\ue6e8",

      warnSpn:"\ue6e8",

      curPlayingIndex: null,

      showUpload: false,

      activeIcons: 0,

@@ -287,9 +288,9 @@
      },

      isPlay: false,

      realIconList: [

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

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

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

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

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

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

      ],

      flatIconList: [

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

@@ -429,11 +430,18 @@
      this.activeIcons = i;

    },

    removeSound(item) {

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

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",

      }).then(() => {

      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(() => {

        deleteSound({

          id: item.id,

        }).then(

@@ -455,10 +463,10 @@
    },

    clickSound(item, i) {

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

        x.style.backgroundColor = "rgba(248, 248, 248, 1)";

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

      });

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

        "rgba(233, 233, 233, 1)";

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

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

    },

    submitAlarm() {

      saveAlarmConfig({

@@ -474,15 +482,21 @@
        }

      });

    },

    colorCard(color) {

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

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

    }

  },

};

</script>

<style lang="scss">



<style scoped lang="scss">



.all {

  width: 100%;

}



.general-set {

.general-seting {

  height: 100%;

  display: flex;

  flex-direction: row;

@@ -491,39 +505,43 @@
  box-sizing: border-box;

  .general-center {

    height: 100%;

    width: 280px;

    width: 300px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    border-right: 5px solid #f8f8f8;

    padding: 24px 10px;

    border-right: 4px solid #F2F2F7;

    background-color: #FBFAFF;



    


    .menu-item {

      background-color: #f8f8f8;

      height: 50px;

      margin-bottom: 10px;

      border-radius: 10px;

      line-height: 50px;

      
      height: 56px;

      margin-bottom: 4px;

      border-radius: 8px;

      line-height: 56px;

      box-sizing: border-box;

      font-size: 14px;

      padding: 0 20px;

      font-size: 16px;

      padding-left: 15px;

      cursor: pointer;

      display: flex;

      .iconfont {

        margin-right: 8px;

        margin: 0 17px;

        font-size: 24px !important;

      }

      .title {

        font-size: 15px;

        font-size: 16px;

        font-weight: 700;

      }

    }

    .menu-item-active {

      background-color: #3d68e1;

      color: white;

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

      color: white !important;

    }

    .menu-item:hover {

      background-color: #3d68e1;

      color: white;

    }

   /*  .menu-item:hover {

      background-color: #F2F2F7;

    } */

  }

  .general-right {

    flex: 1;

@@ -531,7 +549,7 @@
    overflow: auto;

    box-sizing: border-box;



    padding: 20px 40px;

    padding: 10px 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)

@@ -573,36 +591,35 @@
        text-align: left;

        margin-bottom: 5px;

      }

       .voice-title {

        justify-content: center !important;

        font-weight: 700 ;

      }

      .bar-group {

        overflow: auto;

        height: 100%;

        height: 520px;

      }

      .bar {

        height: 44px;

        height: 48px;

        background-color: #f8f8f8;

        border-radius: 10px;

        line-height: 44px;

        line-height: 48px;

        box-sizing: border-box;

        padding: 0 30px 0 20px;

        padding: 0 20px 0 20px;

        font-weight: 700;

        display: flex;

        justify-content: space-between;

        margin-bottom: 10px;

        .left-part {

          .icon {

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

            font-size: 16px;

            margin-right: 5px;

          }

        }

        margin-bottom: 2px;

        border: 2px solid #fff;

        .name {

          font-size: 15px;

        }

          font-size: 14px;

        }     
        .btns {

          width: 50px;

          width: 52px;

          display: flex;

          justify-content: space-between;

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

          .el-icon-video-pause {

         /*  .el-icon-video-pause {

            cursor: pointer;

            font-size: 23px;

            vertical-align: middle;

@@ -613,6 +630,12 @@
            font-size: 23px;

            vertical-align: middle;

            color: #409eff;

          } */

          span {

            color: #333

          }

          .del:hover {

          color:#FC4958;

          }

        }

        .desc {

@@ -620,11 +643,11 @@
          color: rgba(134, 134, 134, 1);

        }

      }

      .bar:hover {

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

      }

      /* .bar:hover {

        border: 2px solid #4E94FF !important;

      } */

      .add-group {

        margin: 10px auto;

        margin: 54px auto;

        width: fit-content;

      }

      .upload-demo {

@@ -644,7 +667,7 @@
        cursor: pointer;

        width: fit-content;

        .icon {

          font-size: 32px;

          font-size: 40px;

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

        }

      }

@@ -800,4 +823,110 @@
    }

  }

}

.v-modal {

  opacity:0.35 !important;

  border-radius: 8px !important;

}



.el-message-box {

position: absolute;

width: 420px;

height: 210px;

left: 302px;

top: 279px;



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;



::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;

}



.info-click {

  color: #4E94FF;

  text-decoration: underline;

}



}



.des {

  position: absolute;

      top: 78px;

    left: 109px;

  z-index: 999;

  color: #4F4F4F;

  font-weight: bold;

  font-size: 12px;

}



</style>



<style lang="scss">

.el-message-box {

  .warn-icon {

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

    font-size: 50px;

    margin-top:26px ;

  }

  .warn-title {

    font-weight: bold;

    font-size: 16px;

    margin: 5px;

  }

  .warn-dec {

    font-weight: bold;

    font-size: 14px;

    color:  #828282;

  }

    .el-message-box__btns {

    display: flex;

    justify-content: center;

    margin-top: 10px;

    button {

      width: 175px;

      height: 40px;

      border-radius: 25px;

      span {

        font-size: 16px;

        font-weight: 700;

      }

    }

    button:first-child {

      background-color: #E0E0E0;

      span {

         color: #333333;

      }

    }

    button:last-child {

      background-color: #4E94FF !important;

      span { 
         color: #fff;

      }

    }

  }

}

</style>


 src/pages/settings/views/keyboardLanguage.vue

@@ -16,7 +16,7 @@
      </div>

      <div class="language-right">

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

          <div class="title">语言列表</div>

          <div class="bar title">语言列表</div>

          <div

            class="bar"

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

@@ -26,14 +26,14 @@
            <span class="name">{{ item.Name }}</span>

            <span

              class="icon iconfont"

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

              style="color: #4E94FF;font-size:16px;"

              v-show="activeLang == item.Lang"

              >&#xe6f1;</span

            >

          </div>

        </div>

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

          <div class="title">键盘布局</div>

          <div class="title bar">键盘布局</div>

          <div

            class="bar"

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

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

            <span

              class="icon iconfont"

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

              style="color: #4E94FF;font-size:16px;"

              v-show="activeKb == item.id"

              >&#xe6f1;</span

            >

@@ -155,6 +155,7 @@
}



.kb-content {

  font-weight: 700;

  height: 100%;

  display: flex;

  flex-direction: row;

@@ -163,37 +164,39 @@
  box-sizing: border-box;

  .kb-center {

    height: 100%;

    width: 280px;

    width: 300px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    border-right: 5px solid #f8f8f8;

    padding: 24px 10px 0px 10px;

    background-color: #FBFAFF;

    border-right: 4px solid #F2F2F7;

    .menu-item {

      background-color: #f8f8f8;

      height: 50px;

      margin-bottom: 10px;

    /*   background-color: #F2F2F7; */

      height: 56px;

      margin-bottom: 4px;

      border-radius: 8px;

      line-height: 50px;

      line-height: 56px;

      box-sizing: border-box;

      font-size: 14px;

      padding: 0 20px;cursor: pointer;

      display: flex;

      align-items: center;

      color: #333;

      .title {

        font-size: 15px;

        font-size: 16px;

        font-weight: 700;

      }

      .iconfont {

        margin-right: 8px;

        font-size: 18px;

        margin: 15px;

        font-size: 24px;

      }

    }

    .menu-item-active {

      background-color: #3d68e1;

      background-color: var(--colorCard);

      color: white;

    }

    .menu-item:hover {

      background-color: #3d68e1;

      background-color: var(--colorCard);

      color: white;

    }

  }

@@ -203,7 +206,7 @@
    overflow: auto;

    box-sizing: border-box;

    position: relative;

    padding: 20px 40px;

    padding: 10px;

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

      > .el-form-item__label:before,

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

@@ -236,29 +239,30 @@
      max-width: none !important;

    }

    .lang {

      .title {

        height: 30px;

        line-height: 30px;

        font-size: 16px;

        margin-bottom: 10px;

      }

      .bar {

        height: 48px;

        background-color: #f8f8f8;

        border-radius: 10px;

        border-radius: 8px;

        line-height: 50px;

        box-sizing: border-box;

        padding: 0 20px;

        box-sizing: content-box;

        padding: 0 15px 0 20px;

        display: flex;

        justify-content: space-between;

        cursor: pointer;

        margin-bottom: 12px;

        margin-bottom: 4px;

        border: 2px solid #f8f8f8;

        .name{

               font-size: 15px;

               font-size: 14px;

        }

      }

      .bar:hover{

            background-color: #e9e9e9;

            border: 2px solid #4E94FF;

      }

      .title {

         cursor:default ;

        font-size: 16px;

       justify-content: center;

       border: 2px solid #f8f8f8 !important;

      }

    }

    .save-btn {


 src/pages/vindicate/index/App.vue

@@ -52,6 +52,12 @@
      full: 0,
    };
  },
  created() {
    let color = localStorage.getItem('--colorCard')
    if(color) {
      document.documentElement.style.setProperty('--colorCard',`${color}`)
    } 
  },
  mounted() {
    const menu = getUrlKey("menu");
    if (menu) {
@@ -125,7 +131,7 @@
    }
    .left-card-active {
      color: #fff;
      background-color: #4E94FF;
      background-color: var(--colorCard);
      .icon_black {
      visibility: hidden;
      }
@@ -139,7 +145,7 @@
    }
   
    .left-card:hover {
      background-color: #4E94FF;
      background-color: var(--colorCard);
      color: #fff;
      .iconfont {
        color: #333333;

 src/pages/vindicate/views/backUp.vue

@@ -184,11 +184,11 @@
    }

    .menu-item-active {

      color: #fff;

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

      background-color: var(--colorCard);

    }

    .menu-item:hover {

      color: #fff;

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

      background-color: var(--colorCard);

    }

  }

  .backup-right {


 src/pages/vindicate/views/updateSettings.vue

@@ -364,7 +364,7 @@
      }

    }

    .menu-item-active {     

      background-color: #4E94FF;

      background-color: var(--colorCard);

       .iconfont {

          color: #fff !important;

        }

@@ -373,7 +373,7 @@
        }

    }

    .menu-item:hover {   

      background-color: #4E94FF;

      background-color: var(--colorCard);

       .iconfont {

          color: #fff;

        }


 vue.config.js

@@ -125,5 +125,12 @@
        changeOrigin: true, //开启代理
      }
    }
  }
  },
  /* css:{
    loaderOptions:{
      scss:{
        prependData:`@import"@/assets/css/globalVariable.scss"`
      }
    }
  } */
}