门禁授权

src/views/Access/components/dataStatistics.vue

+<template>
+  <div>数据统计</div>
+</template>
+
+<script>
+export default {
+  name: 'DataStatistics'
+}
+</script>
+
+<style scoped>
+
+</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>