设备权限管理

ZZJ

2022-01-28 f577c196420715d92a4dfbb11b41a2f311d0cf68

设备权限管理

 public/images/settings/ÊÚȨ¹ÜÀí.png

 src/pages/settings/components/AuthorizationManagement.vue

@@ -1,10 +1,136 @@
<template>

  <div class="AuthorizationManagement">AuthorizationManagement</div>

  <div class="AuthorizationManagement">

    <div class="content">

      <div class="title">设备授权管理</div>



      <div class="formArea">

        <div class="formHeader">

          <div class="headerItem">授权设备ID</div>

          <div class="headerItem">授权时间</div>

          <div class="headerItem">解除授权</div>

        </div>



        <div class="formBody">

          <div

            class="formItem"

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

            :key="index"

          >

            <div class="id">

              {{ item.id }}

            </div>



            <div class="time">

              {{ item.time }}

            </div>



            <div class="unbind iconfont" @click="isShowUnbindBox = true">

              &#xe7e8;

            </div>

          </div>

        </div>

      </div>

    </div>



    <UnbindBox

      v-if="isShowUnbindBox"

      @close="isShowUnbindBox = false"

    ></UnbindBox>

  </div>

</template>



<script>

export default {};

import UnbindBox from "@/pages/settings/components/UnbindBox";



export default {

  data() {

    return {

      isShowUnbindBox: false,

      authorizationList: [

        {

          id: "DSVAD010120190621",

          time: "2019-08-02 12:43:43",

        },

        {

          id: "DSVAD010120190621",

          time: "2019-08-02 12:43:43",

        },

        {

          id: "DSVAD010120190621",

          time: "2019-08-02 12:43:43",

        },

        {

          id: "DSVAD010120190621",

          time: "2019-08-02 12:43:43",

        },

      ],

    };

  },

  components: {

    UnbindBox,

  },

};

</script>



<style>

<style lang="scss" scoped>

.AuthorizationManagement {

  position: relative;



  .content {

    width: 456px;

    margin: 0 auto;

  }



  .title {

    height: 48px;

    font-size: 16px;

    line-height: 48px;

    color: #4f4f4f;

    font-weight: bold;

    background: #f2f2f7;

    border-radius: 8px;

    margin-bottom: 4px;

  }



  .formArea {

    overflow: hidden;

    margin-top: 4px;

    background: #f2f2f7;



    .formHeader {

      margin: 8px 30px 10px 30px;

      display: flex;

      justify-content: space-between;

      font-size: 14px;

      color: #666;

    }



    .formBody {

      padding-bottom: 8px;

      border-radius: 8px;

    }



    .formItem {

      box-sizing: border-box;

      padding-left: 10px;

      padding-right: 42px;

      margin: 0 20px 8px 20px;

      display: flex;

      height: 32px;

      justify-content: space-between;

      align-items: center;

      font-size: 12px;

      color: #333;

      font-weight: 700;

      background-color: #fff;

      border-radius: 20px;



      .unbind {

        font-size: 24px;

        color: rgb(78, 148, 255);

        cursor: pointer;

      }

    }

  }

}

</style>

 src/pages/settings/components/AuthorizationSetting.vue

@@ -1,10 +1,204 @@
<template>

  <div class="AuthorizationSetting">AuthorizationSetting</div>

  <div class="AuthorizationSetting">

    <div class="content">

      <div class="title">设备授权配置</div>



      <el-form

        :model="settingForm"

        :rules="rules"

        ref="joinForm"

        class="join-form"

      >

        <el-form-item>

          <div class="row">

            <div class="item-title">设备授权管理方式</div>

            <div class="inputContain">

              <el-select

                v-model="settingForm.authorizationType"

                placeholder="请选择"

                size="small"

                :popper-append-to-body="false"

              >

                <el-option

                  v-for="item in typeOptions"

                  :key="item.value"

                  :label="item.label"

                  :value="item.value"

                ></el-option>

              </el-select>

            </div>

          </div>

        </el-form-item>



        <el-form-item prop="password" v-if="settingForm.authorizationType == 1">

          <div class="row">

            <div class="item-title">授权密钥</div>

            <div class="inputContain">

              <el-input

                v-model="settingForm.password"

                placeholder="请输入6位授权密钥"

                maxlength="6"

                show-password

              ></el-input>

            </div>

          </div>

        </el-form-item>

      </el-form>



      <div class="save">保存</div>

    </div>

  </div>

</template>



<script>

export default {};

export default {

  data() {

    return {

      settingForm: {

        authorizationType: 0,

        password: "",

      },

      typeOptions: [

        {

          label: "始终允许",

          value: 0,

        },

        {

          label: "密码校验",

          value: 1,

        },

      ],

      rules: {

        password: [

          { min: 6, max: 6, message: "长度为6个字符", trigger: "blur" },

        ],

      },

    };

  },

};

</script>



<style>

<style lang="scss" scoped>

.AuthorizationSetting {

  position: relative;



  .content {

    width: 456px;

    margin: 0 auto;

  }



  .title {

    height: 48px;

    font-size: 16px;

    line-height: 48px;

    color: #4f4f4f;

    font-weight: bold;

    background: #f2f2f7;

    border-radius: 8px;

    margin-bottom: 4px;

  }



  .row {

    margin: 0 auto;

    height: 48px;

    margin-bottom: 4px;

    background-color: #f2f2f7;

    border-radius: 8px;



    line-height: 48px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #f2f2f7;

    border-radius: 8px;

    padding: 0 20px;



    .item-title {

      font-size: 14px;

      color: #4f4f4f;

      font-weight: 700;

    }



    .el-select ::v-deep {

      width: 280px;

      height: 32px;



      input {

        border-radius: 20px;

        border-color: #fff;

        padding-left: 20px;

        font-size: 12px;

        color: #333;

        font-weight: 700;

      }



      .popper__arrow,

      .popper__arrow::after {

        display: none;

      }



      .el-select-dropdown {

        top: 30px;

        height: 84px;

        box-shadow: 0px 4px 12px rgba(5, 95, 230, 0.25);

        border-radius: 8px;



        .el-select-dropdown__item {

          font-size: 12px;

          font-weight: 400;

          color: #333;



          &.selected {

            span {

              color: #4e94ff;

            }

          }

        }

      }

    }



    .el-input ::v-deep {

      width: 280px;

      height: 32px;



      input {

        height: 32px;

        border-radius: 20px;

        border-color: #fff;

        padding-left: 20px;

        font-size: 12px;

        color: #333;

        font-weight: 700;



        &::-webkit-input-placeholder {

          /* WebKit browsers */

          color: #828282;

          font-weight: normal;

          font-size: 12px;

        }

      }

    }

  }



  .save {

    position: absolute;

    top: 375px;

    left: 50%;

    margin-left: -94px;

    width: 188px;

    height: 40px;

    background: #4e94ff;

    border-radius: 25px;

    font-weight: bold;

    font-size: 16px;

    line-height: 40px;

    color: #fff;

    text-align: center;

    cursor: pointer;

  }



  .el-form-item {

    margin-bottom: 0;

  }

}

</style>

 src/pages/settings/components/UnbindBox.vue

New file
@@ -0,0 +1,145 @@
<template>

  <div class="UnbindBox">

    <div class="iconfont warn">&#xe7eb;</div>

    <div class="title">请确认是否解除设备授权？</div>

    <div class="des">如需继续，请输入管理员密码，然后点击“确认”按钮</div>

    <el-input

      placeholder="请输入管理员密码"

      v-model="password"

      show-password

      :class="{ isWrong: isWrong }"

    ></el-input>

    <div class="wrong" v-if="isWrong">密码输入错误，请重新输入</div>



    <div class="btns">

      <div class="cancel" @click="close">取消</div>

      <div class="confirm">确认</div>

    </div>



    <div class="close iconfont" @click="close">&#xe72b;</div>

  </div>

</template>



<script>

export default {

  data() {

    return {

      isWrong: false,

      password: "",

    };

  },

  methods: {

    close() {

      this.$emit("close");

    },

  },

};

</script>



<style lang="scss" scoped>

.UnbindBox {

  position: fixed;

  top: 50%;

  left: 50%;

  margin-top: -166px;

  margin-left: -210px;

  width: 420px;

  height: 332px;

  text-align: center;

  background-color: #fff;



  .warn {

    margin-top: 40px;

    margin-bottom: 10px;

    font-size: 40px;

    color: rgb(254, 109, 104);

  }



  .title {

    margin-bottom: 20px;

    font-weight: bold;

    font-size: 16px;

    color: #4f4f4f;

  }



  .des {

    text-align: start;

    margin: 0 auto;

    margin-bottom: 6px;

    width: 360px;

    font-size: 12px;

    color: #666666;

  }



  .el-input {

    width: 360px;

    height: 40px;



    ::v-deep input {

      border-color: #d4d6d9;

      border-radius: 20px;



      &::-webkit-input-placeholder {

        font-size: 12px;

        color: #999999;

      }

    }



    &.isWrong ::v-deep input {

      border-color: #fe6d68;

    }

  }



  .wrong {

    width: 360px;

    text-align: start;

    margin: 0 auto;

    margin-top: 4px;

    font-size: 12px;

    color: #fe6d68;

  }



  .btns {

    display: flex;

    justify-content: center;

    margin: 0 auto;

    margin-top: 50px;

    width: 360px;



    .cancel {

      width: 175px;

      height: 40px;

      background: #e0e0e0;

      border-radius: 25px;



      font-weight: bold;

      font-size: 16px;

      line-height: 40px;

      color: #333333;

      cursor: pointer;

    }



    .confirm {

      width: 175px;

      height: 40px;

      background: #4e94ff;

      border-radius: 25px;



      font-weight: bold;

      font-size: 16px;

      line-height: 40px;

      color: #fff;

      cursor: pointer;

    }

  }



  .close {

    position: absolute;

    top: 12px;

    right: 12px;

    font-size: 12px;

    color: #333333;

    cursor: pointer;

  }

}

</style>

 src/pages/settings/index/index.vue

@@ -836,7 +836,7 @@
        {
          name: "授权管理",
          icon: "\ue7e9;",
          imgUrl: "/images/settings/设备信息.png",
          imgUrl: "/images/settings/授权管理.png",
          blackIcon: "/images/settings/黑色一级icon/授权管理.png",
          whiteIcon: "/images/settings/白色一级icon/授权管理.png",
        },

 src/pages/settings/views/Authorization.vue

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

        </div>

      </div>

      <div class="AuthorizationRight"></div>

      <div class="AuthorizationRight">

        <AuthorizationSetting v-if="activePage == 0"></AuthorizationSetting>

        <AuthorizationManagement

          v-if="activePage == 1"

        ></AuthorizationManagement>

      </div>

    </div>

  </div>

</template>



<script>

import AuthorizationManagement from "@/pages/settings/components/AuthorizationManagement";

import AuthorizationSetting from "@/pages/settings/components/AuthorizationSetting";

export default {

  components: {

    AuthorizationSetting,

    AuthorizationManagement,

  },

  data() {

    return {

      activePage: 0,

@@ -90,5 +101,15 @@
      background-color: #f2f2f7;

    }

  }



  .AuthorizationRight {

    flex: 1;

    overflow: auto;

    box-sizing: border-box;

    padding: 10px;

    padding-top: 6px;

    border-top: 4px solid #f2f2f7;

    background-color: #fbfaff;

  }

}

</style>