门禁授权

src/views/Access/components/dataStatistics.vue

+<template>
+  <div>数据统计</div>
+</template>
+
+<script>
+export default {
+  name: 'DataStatistics'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Access/components/empower.vue

+<template>
+  <div class="empower-module">
+    <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
+      <el-tab-pane label="常规授权" name="first">
+        <div class="search">
+          <el-form ref="queryForm" style="padding: 0 0 0 10px" class="formClass" :model="queryParams" :inline="true" label-width="auto">
+            <el-form-item label="用户信息" prop="username">
+              <el-input
+                v-model="queryParams.username"
+                placeholder="姓名/手机号"
+                clearable
+                :maxlength="30"
+              />
+            </el-form-item>
+            <el-form-item label="所属企业" prop="flag">
+              <el-select
+                v-model="queryParams.flag"
+                placeholder="请选择所属企业"
+                clearable
+              >
+                <el-option
+                  v-for="dict in enterpriseOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+              <el-button type="primary" style="padding: 8px 7px;" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="right-middle">
+          <div style="display: flex">
+            <div style="padding-right: 10px">
+              <div>
+                <span style="cursor: pointer" @click="choseAccessControldropdown">
+                  <span style="font-size: 20px">{{ accesName }}</span>
+                  <i v-if="isShowAccesRouteDropdown" class="el-icon-caret-top" />
+                  <i v-else class="el-icon-caret-bottom" />
+                </span>
+                <span class="notes">点击姓名可查看该用户的所有门禁权限状况</span>
+              </div>
+              <div v-show="isShowAccesRouteDropdown" class="AccessControlDropdown">
+                <el-input v-model="input3" size="small" placeholder="请输入内容" class="input-with-select">
+                  <el-button slot="append" icon="el-icon-search" />
+                </el-input>
+                <div v-for="(item,index) in accesDeopdownOptions" :key="index" class="AccessControlDropdownChild">
+                  <span @click="choseAcces(item)">{{ item.text }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex">
+            <div style="padding-right: 13px">
+              <el-button size="mini" type="primary" @click="choseEmpower">设置授权<i class="el-icon-arrow-right el-icon-caret-bottom" /></el-button>
+              <div v-show="isShowRouteDropdown" class="dropdown">
+                <div v-for="(item,index) in empowerData" :key="index" class="dropdownChild">
+                  <span>{{ item.text }}</span>
+                </div>
+              </div>
+            </div>
+            <div>
+              <el-button size="mini">自动授权规则</el-button>
+              <el-button size="mini">门禁卡关联</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="right-tableList">
+          <el-table
+            v-loading="loading"
+            style="padding-top: 15px"
+            :data="dataList"
+          >
+            <el-table-column type="selection" width="55" />
+            <el-table-column type="index" label="序号" width="50" />
+            <el-table-column label="人脸照片">
+              <template v-slot:default="scope">
+                {{ scope.row.businessId || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="姓名" prop="username" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                <span class="tableName" @click="clickListName">{{ scope.row.username || '-' }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="手机号码" prop="phone" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                {{ scope.row.phone || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="门禁卡号" prop="card" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                {{ scope.row.card || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="门禁名称" prop="doorName" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                {{ scope.row.doorName || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column width="120" label="开门权限" prop="flag">
+              <template slot-scope="scope">
+                <el-switch
+                  v-model="scope.row.flag"
+                  class="switchDisabledStyle"
+                  inactive-value="0"
+                  active-value="1"
+                  :width="75"
+                  active-text="已授权"
+                  inactive-text="未授权"
+                  @click.native="handleStatusChange(scope.row)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column width="120" label="临时授权" prop="flag">
+              <template slot-scope="scope">
+                <el-switch
+                  v-model="scope.row.flag2"
+                  class="switchDisabledStyle"
+                  inactive-value="0"
+                  active-value="1"
+                  :width="75"
+                  active-text="已授权"
+                  inactive-text="未授权"
+                  @click.native="handleStatusChange(scope.row)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column width="120" label="远程开门" prop="flag">
+              <template slot-scope="scope">
+                <el-switch
+                  v-model="scope.row.flag3"
+                  class="switchDisabledStyle"
+                  inactive-value="0"
+                  active-value="1"
+                  :width="75"
+                  active-text="已授权"
+                  inactive-text="未授权"
+                  @click.native="handleStatusChange(scope.row)"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="临时授权" name="second">
+        <div class="search">
+          <el-form ref="queryForm" style="padding: 0 0 0 10px" class="formClass" :model="queryParams" :inline="true" label-width="auto">
+            <el-form-item label="被授权人" prop="username">
+              <el-input
+                v-model="queryParams.username"
+                placeholder="姓名/手机号"
+                clearable
+                :maxlength="30"
+              />
+            </el-form-item>
+            <el-form-item label="授权门禁" prop="flag">
+              <el-select
+                v-model="queryParams.flag"
+                placeholder="请选择所属企业"
+                clearable
+              >
+                <el-option
+                  v-for="dict in enterpriseOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+              <el-button type="primary" style="padding: 8px 7px;" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
+            </el-form-item>
+            <div>
+              <el-button type="primary" style="padding: 8px 7px;" size="small" @click="addAuthorization">添加授权</el-button>
+              <el-button style="padding: 8px 7px;" size="small" @click="handleQuery">导出</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div class="right-tableList">
+          <el-table
+            style="padding-top: 15px"
+            :data="dataList2"
+          >
+            <el-table-column type="index" label="序号" width="50" />
+            <el-table-column width="120" label="用户信息">
+              <template v-slot:default="scope">
+                {{ scope.row.value || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column width="170" label="授权门禁" prop="value2" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                <span class="tableName" @click="clickListName">{{ scope.row.value2 || '-' }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column width="120" label="有效期" prop="value3" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                {{ scope.row.value3 || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column width="120" label="创建时间" prop="value4" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                {{ scope.row.value4 || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column width="120" label="创建者" prop="value5" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                {{ scope.row.value5 || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column width="120" label="创建者企业" prop="value6" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                {{ scope.row.value6 || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column width="120" label="授权状态" prop="value7" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                {{ scope.row.value7 || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="操作"
+              width="300"
+              fixed="right"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  v-hasPermi="['sys:user:update']"
+                  size="mini"
+                  type="text"
+                  style="color: #49cec9"
+                  @click="handleUpdate(scope.row)"
+                >发送临时通行短信</el-button>
+                <el-button
+                  v-hasPermi="['sys:user:resetPwd']"
+                  size="mini"
+                  type="text"
+                  @click="handleResetPwd(scope.row)"
+                >取消授权</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <!-- 详情dialog -->
+    <el-dialog class="empowerInfoDialog" :title="title" :visible.sync="infoDialog" width="900px" append-to-body>
+      <div class="dialogTop">
+        <div class="name">姓名:{{ '张三（123123123）' }}</div>
+        <div class="company">所属公司:{{ '上海报业集团' }}</div>
+      </div>
+      <div class="dialogContent">
+        <el-tabs v-model="infoActiveName" type="card" @tab-click="handleInfoTabClick">
+          <el-tab-pane label="门禁权限" name="first">
+            <div class="query">
+              <el-select
+                v-model="infoQueryParams.value"
+                clearable
+                disabled
+              >
+                <el-option
+                  v-for="dict in valueOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                />
+              </el-select>
+              <el-select
+                v-model="infoQueryParams.value2"
+                clearable
+              >
+                <el-option
+                  v-for="dict in value2Options"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                />
+              </el-select>
+            </div>
+            <div class="tableList">
+              <el-table
+                v-loading="infoLoading"
+                style="padding-top: 15px"
+                :data="infoDataList"
+              >
+                <el-table-column type="selection" width="55" />
+                <el-table-column type="index" label="序号" width="50" />
+                <el-table-column label="授权门禁" prop="value" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                    <span class="tableName" @click="clickListName">{{ scope.row.value || '-' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="开门权限" prop="value2" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                    {{ scope.row.value2 || '-' }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="临时授权权限" prop="value3" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                    {{ scope.row.value3 || '-' }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="远程开门权限" prop="value4" :show-overflow-tooltip="true">
+                  <template slot-scope="scope">
+                    {{ scope.row.value4 || '-' }}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="自动授权规则" name="second">自动授权规则</el-tab-pane>
+          <el-tab-pane label="权限变更记录" name="third">权限变更记录</el-tab-pane>
+          <el-tab-pane label="人脸照片状态" name="fourth">人脸照片状态</el-tab-pane>
+          <el-tab-pane label="门禁卡状态" name="fifth">门禁卡状态</el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-dialog>
+    <!--    临时授权，添加授权-->
+    <el-drawer
+      title="临时添加授权"
+      :visible.sync="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+    >
+      <div>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>用户信息</span>
+            <el-button type="text">添加</el-button>
+          </div>
+          <div>
+            <el-form ref="drawerForm" style="padding: 0 0 0 10px" class="formClass" :model="drawerForm" :inline="true" label-width="auto">
+              <el-form-item label="用户姓名" prop="username">
+                <el-input
+                  v-model="drawerForm.username"
+                  placeholder="请输入用户姓名"
+                  clearable
+                  :maxlength="30"
+                />
+              </el-form-item>
+              <el-form-item label="手机号码" prop="phone">
+                <el-input
+                  v-model="drawerForm.phone"
+                  placeholder="请输入手机号"
+                  clearable
+                  :maxlength="30"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>基础信息</span>
+          </div>
+          <div>
+            <el-form ref="drawerForm" style="padding: 0 0 0 10px" class="formClass" :model="drawerForm" :inline="true" label-width="auto">
+              <el-form-item label="授权门禁" prop="phone">
+                <el-select
+                  v-model="queryParams.flag"
+                  placeholder="请选择门禁"
+                  clearable
+                >
+                  <el-option
+                    v-for="dict in enterpriseOptions"
+                    :key="dict.dictValue"
+                    :label="dict.dictLabel"
+                    :value="dict.dictValue"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="起始时间" prop="date">
+                <el-date-picker
+                  v-model="drawerForm.date"
+                  type="datetime"
+                  placeholder="选择日期时间"
+                />
+              </el-form-item>
+              <el-form-item label="备注" prop="username">
+                <el-input
+                  v-model="drawerForm.username"
+                  placeholder="请输入备注"
+                  clearable
+                  :maxlength="30"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Empower',
+  data() {
+    return {
+      input3: '',
+      title: '用户常规授权详情',
+      infoDialog: false, // 详情dialog
+      infoActiveName: 'first',
+      // 详情页门禁权限筛选参数
+      infoQueryParams: {
+        value: '1',
+        value2: '1'
+      },
+      // 添加临时授权表单
+      drawerForm: {
+        username: '',
+        phone: '',
+        date: ''
+      },
+      drawer: false,
+      direction: 'rtl',
+      valueOptions: [{
+        dictValue: '1', dictLabel: '批量取消授权'
+      }],
+      value2Options: [
+        { dictValue: '1', dictLabel: '所有门禁' },
+        { dictValue: '2', dictLabel: '839号闸机右出' },
+        { dictValue: '3', dictLabel: '839号闸机右进' }
+      ],
+      // 总条数
+      total: 3,
+      // 详情页门禁权限列表总条数
+      infoTotal: 1,
+      // 列表数据
+      dataList: [
+        { username: '张三', phone: '123123123', card: '未绑定', doorName: '839号大堂闸机右出', flag: '0', flag2: '0', flag3: '0' },
+        { username: '张三', phone: '123123123', card: '未绑定', doorName: '839号大堂闸机右出', flag: '0', flag2: '0', flag3: '0' },
+        { username: '张三', phone: '123123123', card: '未绑定', doorName: '839号大堂闸机右出', flag: '0', flag2: '0', flag3: '0' }
+      ],
+      dataList2: [
+        { value: '张怡一平（123123123）', value2: '延安中路839大堂门禁', value3: '2023-04-20 08:42 - 2023-04-20 08:42', value4: '2023-04-20 08:42', value5: '唐均联', value6: '上海报业集团', value7: '已失效' },
+        { value: '张怡一平（123123123）', value2: '延安中路839大堂门禁', value3: '2023-04-20 08:42 - 2023-04-20 08:42', value4: '2023-04-20 08:42', value5: '唐均联', value6: '上海报业集团', value7: '已失效' },
+        { value: '张怡一平（123123123）', value2: '延安中路839大堂门禁', value3: '2023-04-20 08:42 - 2023-04-20 08:42', value4: '2023-04-20 08:42', value5: '唐均联', value6: '上海报业集团', value7: '已失效' }
+      ],
+      // 详情页门禁权限列表数据
+      infoDataList: [
+        { value: '延安中路839大堂门禁', value2: '有效', value3: '无效', value4: '无效' }
+      ],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      loading: false, // 列表loading
+      infoLoading: false, // 详情页门禁权限列表loading
+      accesName: '839号闸机右出', // 选择的门禁
+      isShowAccesRouteDropdown: false, // 控制（选择门禁）选择下拉框是否显示
+      isShowRouteDropdown: false, // 控制（设置授权按钮）选择下拉框是否显示
+      activeName: 'first',
+      accesDeopdownOptions: [
+        { text: '839号闸机右出' },
+        { text: '839号闸机右进' },
+        { text: '839号闸机左出' },
+        { text: '839号闸机左进' }
+      ],
+      empowerData: [
+        { text: '添加授权' },
+        { text: '取消授权' }
+      ],
+      enterpriseOptions: [
+        { dictValue: '0', dictLabel: '全部企业' },
+        { dictValue: '1', dictLabel: '企业1' },
+        { dictValue: '2', dictLabel: '企业2' },
+        { dictValue: '3', dictLabel: '企业3' }
+      ]
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    getList() {
+
+    },
+    /** 顶部tag签切换*/
+    handleTabClick() {
+      console.log('activeName', this.activeName)
+    },
+    /** 查询*/
+    handleQuery() {
+
+    },
+    /** 重置*/
+    resetQuery() {
+
+    },
+    /** 添加授权按钮点击*/
+    addAuthorization() {
+      this.drawer = true
+    },
+    /** 添加授权抽屉关闭提示*/
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done()
+        })
+        .catch(_ => {})
+    },
+    /** 设置授权按钮点击*/
+    choseEmpower() {
+      this.isShowRouteDropdown = !this.isShowRouteDropdown
+    },
+    /** 选择门禁的点击弹出下拉框*/
+    choseAccessControldropdown() {
+      this.isShowAccesRouteDropdown = !this.isShowAccesRouteDropdown
+    },
+    /** 门禁选择*/
+    choseAcces(item) {
+      this.accesName = item.text
+      this.isShowAccesRouteDropdown = !this.isShowAccesRouteDropdown
+    },
+    /** 列表名称点击（展开详情dialog）*/
+    clickListName() {
+      this.infoDialog = true
+    },
+    /** 详情页tag签切换*/
+    handleInfoTabClick() {
+
+    }
+  }
+}
+</script>
+<style lang="scss">
+.empowerInfoDialog{
+  .el-dialog__header {
+    border-bottom: 1px solid #d8dce5!important;
+  }
+  .dialogTop{
+    padding:25px 15px;
+    background-color: #ECF6FF;
+    .name{
+      color: black;
+      font-size: 17px;
+      font-weight: bold;
+      padding-bottom: 10px;
+    }
+    .company{
+
+    }
+  }
+  .dialogContent{
+    padding-top: 20px;
+    .query{
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 0 20px;
+    }
+  }
+}
+</style>
+<style scoped lang="scss">
+.empower-module{
+  .box-card{
+    margin: 20px;
+  }
+  ::v-deep .el-table__fixed-right {
+    top: 15px!important;
+    left: auto;
+    right: 0;
+  }
+.right-middle{
+  display: flex;
+  justify-content: space-between;
+  .notes{
+    color: #97a8be;
+    font-size: 15px;
+    line-height: 20px;
+  }
+  .AccessControlDropdown{
+    padding: 15px;
+    padding-top: 7px;
+    margin-top: 7px;
+    overflow: auto;
+    background-color: white;
+    transform-origin: center top;
+    z-index: 2433;
+    width: 200px;
+    position: absolute;
+    //top: 206px;
+    //left: 469px;
+    border: 1px solid #e5e5e5;
+    .AccessControlDropdownChild{
+      cursor: pointer;
+      padding: 5px;
+      border: 1px solid #e5e5e5;
+      border-radius: 5px;
+      margin: 5px;
+      &:hover {
+        color: #46BCF3;
+      }
+    }
+    ::v-deep .el-input__inner{
+      padding-right: 10px!important;
+    }
+  }
+  .dropdown{
+    padding-top: 7px;
+    margin-top: 7px;
+    overflow: auto;
+    background-color: white;
+    height: 80px;
+    transform-origin: center top;
+    z-index: 2433;
+    width: 92px;
+    position: absolute;
+    //top: 206px;
+    //left: 469px;
+    border: 1px solid #e5e5e5;
+    .dropdownChild{
+      cursor: pointer;
+      padding: 5px;
+      &:hover {
+        background-color: #d8dce5;
+      }
+    }
+  }
+}
+  .right-tableList{
+    .tableName{
+      color: #46BCF3;
+      cursor: pointer;
+    }
+  }
+  ::v-deep .el-switch__label {
+    position: absolute;
+    display: none;
+    color: #fff;
+  }
+  /*打开时文字位置设置*/
+  ::v-deep .el-switch__label--right {
+    z-index: 1;
+    right: 20px;
+  }
+  /*关闭时文字位置设置*/
+  ::v-deep .el-switch__label--left {
+    z-index: 1;
+    left: 20px;
+  }
+  /*显示文字*/
+  ::v-deep .el-switch__label.is-active {
+    display: block;
+  }
+  ::v-deep .el-switch .el-switch__core,
+  .el-switch .el-switch__label {
+    width: 55px;
+  }
+}
+</style>

src/views/Access/components/log.vue

+<template>
+  <div>日志</div>
+</template>
+
+<script>
+export default {
+  name: 'Log'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Access/components/manage.vue

+<template>
+  <div>管理</div>
+</template>
+
+<script>
+export default {
+  name: 'Manage'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Access/index.vue

+<template>
+  <div class="PublicAccessControl">
+    <el-row :gutter="10">
+      <el-col :span="4">
+        <div class="module-left">
+          <div class="left-top">
+            <div>请选择项目</div>
+            <i class="el-icon-edit" />
+          </div>
+          <el-form ref="queryForm" style="padding-top: 15px;padding-bottom: 10px" :model="leftQueryForm" :inline="true">
+            <el-input
+              v-model="leftQueryForm.input2"
+              placeholder="请输入"
+              prefix-icon="el-icon-search"
+            />
+          </el-form>
+          <div class="left-list">
+            <div
+              v-for="(item,index) in leftOptions"
+              :key="index"
+            >
+              <div class="left-listChild" :class="{'is-active':leftChose.name === item.name}">
+                <i class="el-icon-help" />
+                <div class="name" @click="choseLeftName(item)">{{ item.name }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <div class="module-right">
+          <div class="right-top">
+            <div class="module_title">公共门禁</div>
+            <el-button size="mini" type="primary">管理</el-button>
+          </div>
+          <div class="rightContent">
+            <el-card class="box-card">
+              <el-tabs v-model="activeName" @tab-click="handleClickTag">
+                <el-tab-pane label="门禁授权" name="first">
+                  <empower />
+                </el-tab-pane>
+                <el-tab-pane label="门禁管理" name="second">
+                  <manage />
+                </el-tab-pane>
+                <el-tab-pane label="门禁日志" name="third">
+                  <log />
+                </el-tab-pane>
+                <el-tab-pane label="数据统计" name="fourth">
+                  <data-statistics />
+                </el-tab-pane>
+              </el-tabs>
+            </el-card>
+
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import dataStatistics from '@/views/Access/components/dataStatistics.vue'
+import empower from '@/views/Access/components/empower.vue'
+import log from '@/views/Access/components/log.vue'
+import manage from '@/views/Access/components/manage.vue'
+export default {
+  name: 'Index',
+  components: { dataStatistics, empower, log, manage },
+  data() {
+    return {
+      activeName: 'first',
+      leftChose: {}, // 左侧树点击选择的对象
+      leftQueryForm: {
+        input2: ''
+      },
+      leftOptions: [
+        { name: '威海路755号' },
+        { name: '延安中路839号' }
+      ]
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+  },
+  methods: {
+    /** 左侧列表点击选择*/
+    choseLeftName(item) {
+      this.leftChose = item
+    },
+    /** 右侧tag签切换*/
+    handleClickTag() {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.PublicAccessControl{
+  padding: 20px;
+  .module-left{
+    padding: 0 10px;
+    border-right: 1px solid #d8dce5;
+    .left-top{
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 10px;
+      border-bottom: 1px dashed #d8dce5;
+    }
+    .left-list{
+      overflow-y: auto;
+      min-height: 70.6vh;
+      height: calc(100% - 48px);
+      background: rgb(255, 255, 255);
+      .left-listChild{
+        cursor: pointer;
+        display: flex;
+        align-items: baseline;
+        padding: 10px 0;
+        .name{
+          padding-left: 10px;
+        }
+        &:hover {
+          color: #46BCF2;
+        }
+      }
+      .is-active{
+        color: #46BCF2;
+      }
+    }
+  }
+  .module-right{
+    .right-top{
+      display: flex;
+      justify-content: space-between;
+    }
+    .rightContent{
+      padding-top: 8px;
+      .box-card {
+        overflow-y: auto;
+        min-height: 79.6vh;
+        height: calc(100% - 48px);
+        background: rgb(255, 255, 255);
+      }
+    }
+  }
+}
+</style>