修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/pages/settings/views/deviceInfo.vue

@@ -3,44 +3,48 @@
    <div class="general-set">

      <div class="general-right">

        <div class="lang" >

          <div class="bar">

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

          <div class="general-title">

            <img class="info-img" src="/images/settings/信息.png"/>

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

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

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

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

          <div class="info-bar">

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

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

          </div>

          <div class="bar">

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

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

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

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

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

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

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

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

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

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

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

          <div class=" info-bar">

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

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

          </div>

          <div class="bar">

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

          <div class=" info-bar">

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

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

          </div>

        </div>

@@ -50,7 +54,7 @@
</template>



<script>

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

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

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



export default {

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

      min_len: 0,

      max_len: 0,

      info:"\ue6e8",

      fakeObj: {

        min: 0,

        max: 0,

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

  flex-basis: auto;

  box-sizing: border-box;

  .general-center {

  background-color: #F2F2F7;



  .info-img {

    width: 40px;

  }



  /* .general-center {

    height: 100%;

    width: 280px;

    overflow: auto;

@@ -157,281 +168,61 @@
      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: 10px 15px !important;

  }



    padding: 20px 40px;

    .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

      > .el-form-item__label:before {

      display: none;

    }

    .el-select {

      width: 100%;

    }

    .el-form-item {

      margin-bottom: 10px;

      height: 50px;

      background: #f8f8f8;

      padding: 4px 20px;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

      border-radius: 10px;

      .el-form-item__label {

        text-align: left;

        line-height: 42px;

      }

    }

    .el-form-item__content {

      line-height: 40px;

      position: relative;

      font-size: 14px;

    }

    .ip-input-container {

      max-width: none !important;

    }

    .lang {

      position: relative;

      height: calc(83% - 0px);

      .title {

        height: 35px;

        line-height: 35px;

        font-size: 16px;

        text-align: left;

        margin-bottom: 5px;

      }

      .bar-group {

        overflow: auto;

        height: 100%;

      }

      .bar {

        height: 44px;

        background-color: #f8f8f8;

        border-radius: 10px;

        line-height: 44px;

        box-sizing: border-box;

        padding: 0 30px 0 20px;

        display: flex;

        justify-content: space-between;

        margin-bottom: 10px;

        .left-part {

          .icon {

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

            font-size: 16px;

            margin-right: 5px;

          }

        }

        .name {

          font-size: 15px;

        }

        .btns {

          width: 50px;

          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;

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

        }

      }

      .bar:hover {

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

      }

      .add-group {

        margin: 10px auto;

        width: fit-content;

      }

      .upload-demo {

        -webkit-transition: all 0.3s;

        transition: all 0.5s;

        position: absolute;

        bottom: -40px;

    .info-bar {

     border-radius: 8px;

   }



        left: calc(50% - 145px);

        .el-upload-dragger {

          width: 290px;

        }

      }

      .add-btn {

        height: 40px;

        line-height: 40px;

        margin: 0 auto;

        cursor: pointer;

        width: fit-content;

        .icon {

          font-size: 32px;

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

        }

      }

      .min-dur {

        box-sizing: border-box;

        padding: 0 20px;

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

        height: 105px;

        margin-bottom: 20px;

        border-radius: 15px;

        .title {

          height: 45px;

          line-height: 45px;



          text-align: left;

          box-sizing: border-box;

          padding: 0 6px;

          font-size: 14px;

        }

      }



      .min-dur:hover {

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

      }



      .entity {

        display: flex;

        align-items: center;

        height: 30px;



        .sec {

          min-width: 30px;

          line-height: 80px;

          margin-right: 10px;

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

          font-size: 14px;

        }

        .block {

          flex: 1;

          margin: 0 20px 0 6px;

        }

        .el-input-number--small {

          width: 100px;

        }

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

          padding-left: 16px;

        }

        #cut_min_duration {

          .el-slider__bar {

            background-color: #3d68e1;

          }

          .el-slider__button-wrapper .el-tooltip {

            width: 18px;

            height: 18px;

            border: 4px solid #3d68e1;

            box-sizing: border-box;

          }

        }



        #cut_max_duration {

          .el-slider__bar {

            background-color: #ff9e6e;

          }

          .el-slider__button-wrapper .el-tooltip {

            width: 18px;

            height: 18px;

            border: 4px solid #ff9e6e;

            box-sizing: border-box;

          }

        }

      }

    }

    .save-btn {

      background-color: #3d68e1;

      width: 240px;

      height: 40px;

      margin: 0 auto;

      border-radius: 10px;

      color: #fff;

      line-height: 40px;

      cursor: pointer;

      font-size: 14px;

      margin-top: 20px;

    }

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

            }

          }

        }

      }

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

                height: 80px;

            border: 2px solid transparent;

            img {

             border-radius: 5px;

    height: 100%;

            }

          }

          .bg-img:hover {

            border: 2px solid yellow;

          }

          .bg-list-active {

            border: 2px solid yellow;

          }

        }

      }

    }

   .info-bar .name {

    color: #4F4F4F;

  }

}

</style>