鸿蒙智能电子锁前端项目
whychdw
2024-12-18 45b4ff5c0b824d2e5b51a6af3c44076d05f0214d
src/views/device/lock/index.vue
@@ -1,13 +1,23 @@
<script lang="ts">
import { defineComponent } from 'vue';
import HdwCard from '@/components/HdwCard/index.vue';
import const_theme from '@/utils/const/const_theme';
import store from '@/store';
export default defineComponent({
  name: 'LockManage',
  components: { HdwCard },
  data() {
    return {
      theme: store.settings().theme,
      themes: const_theme,
      tableData: [
        {
          type: '蓝牙',
          lockName: '机柜蓝牙锁3',
          associatedArea: '武汉源畅科技',
          installState: '未安装'
        },
        {
          type: '蓝牙',
          lockName: '机柜蓝牙锁3',
@@ -28,7 +38,13 @@
    };
  },
  methods: {
    handleChangeTheme(val) {
      console.log(val);
      store.settings().changeSetting({
        key: 'theme',
        value: val
      });
    }
  }
});
</script>
@@ -61,7 +77,7 @@
              <div class="tools-filter-item">
                <div class="filter-label">锁具名称:</div>
                <div class="filter-content">
                  <el-input v-model="filter.name" size="small"></el-input>
                  <el-input placeholder="请输入锁具名称..." v-model="filter.name" size="small"></el-input>
                </div>
              </div>
              <div class="tools-filter-item">
@@ -93,13 +109,28 @@
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">主题:</div>
                <div class="filter-content">
                  <el-select
                      v-model="theme"
                      placeholder="请选择"
                      size="small"
                      @change="handleChangeTheme"
                      style="width: 180px">
                    <el-option
                        v-for="item in themes" :key="item.label"
                        :label="item.label" :value="item.value"/>
                  </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 stripe :data="tableData" border style="width: 100%; height: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="type" label="类型" width="180" />
                  <el-table-column prop="lockName" label="锁具名称" width="180" />
@@ -161,6 +192,8 @@
    padding-bottom: 8px;
  }
  .page-content-table {
    border-top: 1px solid var(--border-light-color);
    box-sizing: border-box;
    flex: 1;
    margin-left: -8px;
    margin-right: -8px;