鸿蒙智能电子锁前端项目
whychdw
2024-10-14 9a3d84b683030eb05537078661025e2fb3288b40
内容提交
5个文件已修改
663 ■■■■■ 已修改文件
components.d.ts 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/device/key/index.vue 180 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/device/lock/index.vue 91 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/general/authorize/index.vue 192 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/general/log/index.vue 198 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
components.d.ts
@@ -30,11 +30,13 @@
    ElInput: typeof import('element-plus/es')['ElInput']
    ElMenu: typeof import('element-plus/es')['ElMenu']
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
    ElTable: typeof import('element-plus/es')['ElTable']
src/views/device/key/index.vue
@@ -1,15 +1,191 @@
<script lang="ts">
import { defineComponent } from 'vue';
import HdwCard from '@/components/HdwCard/index.vue';
export default defineComponent({
  name: 'KeyManage'
  name: 'KeyManage',
  components: { HdwCard },
  data() {
    return {
      tableData: [
        {
          type: '蓝牙',
          keyName: '测试1',
          keyNumber: '--369078',
          userName: '源畅科技',
          bluetoothAddr: '',
          createTime: '2024-08-14 17:01:56'
        }
      ],
      filter: {
        keyName: '',
        userName: ''
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    };
  },
  methods: {
  }
});
</script>
<script lang="ts" setup>
import {
  Search,
  Plus
} from '@element-plus/icons-vue';
import HdwTree from '@/components/HdwTree/index.vue';
</script>
<template>
  <div>钥匙管理</div>
  <div class="page-wrapper">
    <div class="page-header">
      <div class="hdw-card-container">
        <hdw-card title="区域列表" is-full>
          <hdw-tree></hdw-tree>
        </hdw-card>
      </div>
    </div>
    <div class="page-content">
      <hdw-card is-full>
        <div class="page-content-wrapper">
          <div class="page-content-tools">
            <el-button type="primary" size="small" :icon="Plus">添加钥匙</el-button>
            |
            <div class="tools-filter">
              <div class="tools-filter-item">
                <div class="filter-label">钥匙名称:</div>
                <div class="filter-content">
                  <el-input v-model="filter.keyName" size="small"></el-input>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">员工名称:</div>
                <div class="filter-content">
                  <el-input v-model="filter.userName" size="small"></el-input>
                </div>
              </div>
            </div>
            <el-button type="primary" size="small" :icon="Search">查询</el-button>
          </div>
          <div class="page-content-table">
            <div class="pos-rel">
              <div class="pos-abs">
                <el-table :data="tableData" border style="width: 100%; height: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="type" align="center" label="钥匙类型" width="120" />
                  <el-table-column prop="keyName" align="center" label="钥匙名称" width="180" />
                  <el-table-column prop="keyNumber" align="center" label="钥匙编号" width="180" />
                  <el-table-column prop="userName" align="center" label="员工名称" width="180" />
                  <el-table-column prop="bluetoothAddr" label="蓝牙地址" />
                  <el-table-column prop="createTime" label="创建时间" width="180" />
                  <el-table-column align="center" fixed="right" label="操作" width="180">
                    <template #default>
                      <el-button type="primary" size="small">编辑</el-button>
                      <el-button type="danger" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="page-content-page">
            <div class="page-tool"></div>
            <div class="el-page-container">
              <el-pagination
                  v-model:current-page="page.currentPage"
                  v-model:page-size="page.pageSize"
                  :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
                  size="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
            <div class="page-tool"></div>
          </div>
        </div>
      </hdw-card>
    </div>
    <div class="page-footer"></div>
  </div>
</template>
<style scoped lang="scss">
.page-wrapper {
  display: flex;
  flex-direction: row;
  padding: 8px;
  height: 100%;
  .page-content {
    flex: 1;
  }
}
.page-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .page-content-tools {
    padding-bottom: 8px;
  }
  .page-content-table {
    flex: 1;
    margin-left: -8px;
    margin-right: -8px;
  }
  .page-content-page {
    padding: 8px 8px 0 8px;
    text-align: center;
    .el-page-container {
      display: inline-block;
      padding: 0 16px;
    }
    .page-tool {
      display: inline-block;
    }
  }
}
.hdw-card-container {
  width: 240px;
  padding-right: 8px;
  height: 100%;
}
.pos-rel {
  position: relative;
  width: 100%;
  height: 100%;
  .pos-abs {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
.tools-filter {
  display: inline-block;
  font-size: 14px;
  .tools-filter-item {
    display: inline-block;
    margin-right: 8px;
    .filter-label {
      display: inline-block;
    }
    .filter-content {
      display: inline-block;
    }
  }
}
</style>
src/views/device/lock/index.vue
@@ -15,6 +15,11 @@
          installState: '未安装'
        }
      ],
      filter: {
        name: '',
        state: 0,
        type: 0
      },
      page: {
        currentPage: 1,
        pageSize: 20,
@@ -37,29 +42,61 @@
</script>
<template>
  <div class="lock-wrapper">
    <div class="lock-header">
  <div class="page-wrapper">
    <div class="page-header">
      <div class="hdw-card-container">
        <hdw-card title="区域列表" is-full>
          <hdw-tree></hdw-tree>
        </hdw-card>
      </div>
    </div>
    <div class="lock-content">
    <div class="page-content">
      <hdw-card is-full>
        <div class="lock-content-wrapper">
          <div class="lock-content-tools">
            <el-button type="primary" size="small" :icon="Search">查询</el-button>
            <el-button type="success" size="small" :icon="Plus">添加</el-button>
            <el-button type="success" size="small" :icon="Plus">批量添加</el-button>
        <div class="page-content-wrapper">
          <div class="page-content-tools">
            <el-button type="primary" size="small" :icon="Plus">添加</el-button>
            <el-button type="primary" size="small" :icon="Plus">批量添加</el-button>
            |
            <div class="tools-filter">
              <div class="tools-filter-item">
                <div class="filter-label"></div>
                <div class="filter-content"></div>
                <div class="filter-label">锁具名称:</div>
                <div class="filter-content">
                  <el-input v-model="filter.name" size="small"></el-input>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">锁具状态:</div>
                <div class="filter-content">
                  <el-select
                      v-model="filter.state"
                      placeholder="请选择"
                      size="small"
                      style="width: 180px"
                  >
                    <el-option label="--请选择--" :value="0"/>
                    <el-option label="未安装" :value="1"/>
                    <el-option label="已安装" :value="2"/>
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">锁具类型:</div>
                <div class="filter-content">
                  <el-select
                      v-model="filter.type"
                      placeholder="请选择"
                      size="small"
                      style="width: 180px">
                    <el-option label="--请选择--" :value="0"/>
                    <el-option label="无源" :value="1"/>
                    <el-option label="蓝牙" :value="2"/>
                  </el-select>
                </div>
              </div>
            </div>
            <el-button type="primary" size="small" :icon="Search">查询</el-button>
          </div>
          <div class="lock-content-table">
          <div class="page-content-table">
            <div class="pos-rel">
              <div class="pos-abs">
                <el-table :data="tableData" border style="width: 100%; height: 100%">
@@ -80,7 +117,7 @@
              </div>
            </div>
          </div>
          <div class="lock-content-page">
          <div class="page-content-page">
            <div class="page-tool"></div>
            <div class="el-page-container">
              <el-pagination
@@ -101,34 +138,34 @@
        </div>
      </hdw-card>
    </div>
    <div class="lock-footer"></div>
    <div class="page-footer"></div>
  </div>
</template>
<style scoped lang="scss">
.lock-wrapper {
.page-wrapper {
  display: flex;
  flex-direction: row;
  padding: 8px;
  height: 100%;
  .lock-content {
  .page-content {
    flex: 1;
  }
}
.lock-content-wrapper {
.page-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .lock-content-tools {
  .page-content-tools {
    padding-bottom: 8px;
  }
  .lock-content-table {
  .page-content-table {
    flex: 1;
    margin-left: -8px;
    margin-right: -8px;
  }
  .lock-content-page {
  .page-content-page {
    padding: 8px 8px 0 8px;
    text-align: center;
    .el-page-container {
@@ -142,7 +179,7 @@
}
.hdw-card-container {
  width: 320px;
  width: 240px;
  padding-right: 8px;
  height: 100%;
}
@@ -160,4 +197,18 @@
    height: 100%;
  }
}
.tools-filter {
  display: inline-block;
  font-size: 14px;
  .tools-filter-item {
    display: inline-block;
    margin-right: 8px;
    .filter-label {
      display: inline-block;
    }
    .filter-content {
      display: inline-block;
    }
  }
}
</style>
src/views/general/authorize/index.vue
@@ -1,15 +1,203 @@
<script lang="ts">
import { defineComponent } from 'vue';
import HdwCard from '@/components/HdwCard/index.vue';
export default defineComponent({
  name: 'AuthManage'
  name: 'AuthManage',
  components: { HdwCard },
  data() {
    return {
      tableData: [
        {
          userName: 'whyc',
          authKey: '四楼蓝牙锁1',
          authLock: '机柜蓝牙锁',
          authTimeStart: '2024-10-11 14:25:51',
          authTimeEnd: '2024-10-12 14:25:51',
          jobDes: '测试',
          state: '通过'
        }
      ],
      filter: {
        name: '',
        state: 0,
        type: 0
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    };
  },
  methods: {
  }
});
</script>
<script lang="ts" setup>
import {
  Search,
  Plus
} from '@element-plus/icons-vue';
import HdwTree from '@/components/HdwTree/index.vue';
</script>
<template>
  <div>授权管理</div>
  <div class="page-wrapper">
    <div class="page-header">
      <div class="hdw-card-container">
        <hdw-card title="区域列表" is-full>
          <hdw-tree></hdw-tree>
        </hdw-card>
      </div>
    </div>
    <div class="page-content">
      <hdw-card is-full>
        <div class="page-content-wrapper">
          <div class="page-content-tools">
            <el-button type="primary" size="small" :icon="Plus">添加授权</el-button>
            |
            <div class="tools-filter">
              <div class="tools-filter-item">
                <div class="filter-label">授权人员:</div>
                <div class="filter-content">
                  <el-input v-model="filter.name" size="small"></el-input>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">授权状态:</div>
                <div class="filter-content">
                  <el-select
                      v-model="filter.state"
                      placeholder="请选择"
                      size="small"
                      style="width: 180px"
                  >
                    <el-option label="--请选择--" :value="0"/>
                    <el-option label="未安装" :value="1"/>
                    <el-option label="已安装" :value="2"/>
                  </el-select>
                </div>
              </div>
            </div>
            <el-button type="primary" size="small" :icon="Search">查询</el-button>
          </div>
          <div class="page-content-table">
            <div class="pos-rel">
              <div class="pos-abs">
                <el-table :data="tableData" border style="width: 100%; height: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="userName" align="center" label="授权人员" width="120" />
                  <el-table-column prop="authKey" align="center" label="授权钥匙" width="120" />
                  <el-table-column prop="authLock" align="center" label="授权锁具" width="120" />
                  <el-table-column prop="authTimeStart" align="center" label="授权时限开始" width="180" />
                  <el-table-column prop="authTimeEnd" align="center" label="授权时限结束" width="180" />
                  <el-table-column prop="jobDes" align="center" min-width="180" label="任务说明" />
                  <el-table-column prop="state" align="center" label="状态" width="80" />
                  <el-table-column align="center" fixed="right" label="操作" width="180">
                    <template #default>
                      <el-button type="primary" size="small">编辑</el-button>
                      <el-button type="danger" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="page-content-page">
            <div class="page-tool"></div>
            <div class="el-page-container">
              <el-pagination
                  v-model:current-page="page.currentPage"
                  v-model:page-size="page.pageSize"
                  :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
                  size="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
            <div class="page-tool"></div>
          </div>
        </div>
      </hdw-card>
    </div>
    <div class="page-footer"></div>
  </div>
</template>
<style scoped lang="scss">
.page-wrapper {
  display: flex;
  flex-direction: row;
  padding: 8px;
  height: 100%;
  .page-content {
    flex: 1;
  }
}
.page-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .page-content-tools {
    padding-bottom: 8px;
  }
  .page-content-table {
    flex: 1;
    margin-left: -8px;
    margin-right: -8px;
  }
  .page-content-page {
    padding: 8px 8px 0 8px;
    text-align: center;
    .el-page-container {
      display: inline-block;
      padding: 0 16px;
    }
    .page-tool {
      display: inline-block;
    }
  }
}
.hdw-card-container {
  width: 240px;
  padding-right: 8px;
  height: 100%;
}
.pos-rel {
  position: relative;
  width: 100%;
  height: 100%;
  .pos-abs {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
.tools-filter {
  display: inline-block;
  font-size: 14px;
  .tools-filter-item {
    display: inline-block;
    margin-right: 8px;
    .filter-label {
      display: inline-block;
    }
    .filter-content {
      display: inline-block;
    }
  }
}
</style>
src/views/general/log/index.vue
@@ -1,15 +1,209 @@
<script lang="ts">
import { defineComponent } from 'vue';
import HdwCard from '@/components/HdwCard/index.vue';
export default defineComponent({
  name: 'LogManage'
  name: 'LogManage',
  components: { HdwCard },
  data() {
    return {
      tableData: [
        {
          areaName: '武汉源畅科技',
          userName: '源畅科技',
          keyName: '测试',
          lockName: '机柜蓝牙锁',
          type: '开锁操作',
          state: '成功',
          openType: '蓝牙',
          time: '2024-08-14 17:13:09'
        }
      ],
      filter: {
        userName: '',
        timeRange: '',
        type: 0
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    };
  },
  methods: {
  }
});
</script>
<script lang="ts" setup>
import {
  Search
} from '@element-plus/icons-vue';
import HdwTree from '@/components/HdwTree/index.vue';
</script>
<template>
  <div>日志管理</div>
  <div class="page-wrapper">
    <div class="page-header">
      <div class="hdw-card-container">
        <hdw-card title="区域列表" is-full>
          <hdw-tree></hdw-tree>
        </hdw-card>
      </div>
    </div>
    <div class="page-content">
      <hdw-card is-full>
        <div class="page-content-wrapper">
          <div class="page-content-tools">
            <div class="tools-filter">
              <div class="tools-filter-item">
                <div class="filter-label">操作人:</div>
                <div class="filter-content">
                  <el-input v-model="filter.userName" size="small"></el-input>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">操作时间:</div>
                <div class="filter-content">
                  <el-date-picker
                      v-model="filter.timeRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      size="small"
                  />
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">操作类型:</div>
                <div class="filter-content">
                  <el-select
                      v-model="filter.type"
                      placeholder="请选择"
                      size="small"
                      style="width: 180px"
                  >
                    <el-option label="--请选择--" :value="0"/>
                    <el-option label="开关门日志" :value="1"/>
                    <el-option label="报警日志" :value="2"/>
                  </el-select>
                </div>
              </div>
            </div>
            <el-button type="primary" size="small" :icon="Search">查询</el-button>
          </div>
          <div class="page-content-table">
            <div class="pos-rel">
              <div class="pos-abs">
                <el-table :data="tableData" border style="width: 100%; height: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="areaName" align="center" label="区域名称" width="180" />
                  <el-table-column prop="userName" align="center" label="操作人" width="120" />
                  <el-table-column prop="keyName" align="center" label="钥匙名称" width="120" />
                  <el-table-column prop="lockName" align="center" label="锁具名称" min-width="180" />
                  <el-table-column prop="type" align="center" label="操作类型" width="180" />
                  <el-table-column prop="state" align="center" width="120" label="状态" />
                  <el-table-column prop="openType" align="center" label="开锁方式" width="120" />
                  <el-table-column prop="time" align="center" label="操作时间" width="180" />
                </el-table>
              </div>
            </div>
          </div>
          <div class="page-content-page">
            <div class="page-tool"></div>
            <div class="el-page-container">
              <el-pagination
                  v-model:current-page="page.currentPage"
                  v-model:page-size="page.pageSize"
                  :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
                  size="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
            <div class="page-tool"></div>
          </div>
        </div>
      </hdw-card>
    </div>
    <div class="page-footer"></div>
  </div>
</template>
<style scoped lang="scss">
.page-wrapper {
  display: flex;
  flex-direction: row;
  padding: 8px;
  height: 100%;
  .page-content {
    flex: 1;
  }
}
.page-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .page-content-tools {
    padding-bottom: 8px;
  }
  .page-content-table {
    flex: 1;
    margin-left: -8px;
    margin-right: -8px;
  }
  .page-content-page {
    padding: 8px 8px 0 8px;
    text-align: center;
    .el-page-container {
      display: inline-block;
      padding: 0 16px;
    }
    .page-tool {
      display: inline-block;
    }
  }
}
.hdw-card-container {
  width: 240px;
  padding-right: 8px;
  height: 100%;
}
.pos-rel {
  position: relative;
  width: 100%;
  height: 100%;
  .pos-abs {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
.tools-filter {
  display: inline-block;
  font-size: 14px;
  .tools-filter-item {
    display: inline-block;
    margin-right: 8px;
    .filter-label {
      display: inline-block;
    }
    .filter-content {
      display: inline-block;
    }
  }
}
</style>