he wei
2025-04-23 b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf
src/views/device/locks/index.vue
@@ -1,29 +1,35 @@
<script setup name="LockManage">
   import { ref, onMounted, reactive, computed, watchEffect } from "vue";
   // import const_theme from "@/utils/const/const_theme";
   import store from "@/store";
   import { ref, onMounted, reactive, computed, watchEffect, nextTick } from "vue";
   import useStation from "@/hooks/useStationList.js";
   const { stationName1, stationName2, stationName3, stationName4,
      stationList1, stationList2, stationList3, stationList4,
   } = useStation();
   import { Search, Plus } from "@element-plus/icons-vue";
   // import HdwTree from "@/components/HdwTree/index.vue";
   import {
      getAllLockInf,
      delLock,
      lockOpen,
    openLockBl,
    closeLockBl
   } from '@/api/lockManager.js';
  import { storeToRefs } from "pinia";
import { useUserStore } from '@/store/user.js';
const userStore = useUserStore();
const { urole, permits } = storeToRefs(userStore);
   import useWebSocket from "@/hooks/useWebsocket.js";
  import isHasPermit from '@/utils/isHasPermit';
   import addEdit from './addEdit.vue';
   import useElement from "@/hooks/useElement.js";
   const { $loading, $message, $confirm } = useElement();
   const { $loading, $message, $confirm, $confirmPwdDo } = useElement();
   const { sendData, message: listMessage } = useWebSocket("lockRt");
   const disabled = ref(false);
   const background = ref(false);
   const addEditVisible = ref(false);
   const isAdd = ref(false);
   const isBatch = ref(false);
   const currentAreaId = ref();
@@ -48,26 +54,27 @@
   // 当前编辑的锁对象
   const editLock = ref();
   const isAdmin = computed(() => store.user().urole > 0);
  // 是否有控制权限
let isCanControl = isHasPermit("control_permit", permits.value);
   onMounted(() => {
      // setTimeout(() => {
      //    console.log('onMounted', stationName1, stationName2, stationName3, stationName4, '=============');
      // }, 2000);
    sendMessage();
   });
   // function handleChangeTheme(val) {
   //   console.log(val);
   //   store.settings().changeSetting({
   //     key: "theme",
   //     value: val,
   //   });
   // }
   function sendMessage() {
      let params = {
         areaId: currentAreaId.value,
         lockName: filter.name.trim() || undefined,
         lockState: filter.state,
         lockType: filter.type,
         // lockType: filter.type,
      stationName1: stationName1.value || undefined,
      stationName2: stationName2.value || undefined,
      stationName3: stationName3.value || undefined,
      stationName4: stationName4.value || undefined,
         pageNum: page.pageNum,
         pageSize: page.pageSize,
      };
@@ -76,12 +83,6 @@
      );
   }
   function itemClickHandler(item) {
      console.log(item, '====item', item.data);
      // areaId lockName lockState lockType pageNum pageSize
      currentAreaId.value = item.data.id;
      sendMessage();
   }
   watchEffect(() => {
      let _total = 0;
@@ -89,26 +90,26 @@
      if (listMessage.value) {
         const {
            code,
        data,
            data,
            data2
         } = JSON.parse(listMessage.value);
    if (code && data) {
      let { list, total } = data2;
      _list = list.map(v => {
        v.state = { '-1': '未安装', 0: '已闭锁', 1: '已开锁' }[v.lockState];
        v.onlineState = { 0: '离线', 1: '在线' }[v.lockOnline];
        v.type = { 1: '蓝牙锁', 2: 'ID锁', 3: '实体锁' }[v.lockType];
        v.modelStr = v.model == 1 ? '在线模式' : '离线模式';
        v.blStateStr = v.blState == 0 ? '蓝牙关闭' : '蓝牙开启';
        v.ID = v.lockId % 10000000;
        return v;
      });
      _total = total;
    }
         if (code && data) {
            let { list, total } = data2;
            _list = list.map(v => {
               v.state = { 0: '已闭锁', 1: '已开锁' }[v.lockState];
               v.onlineState = { 0: '离线', 1: '在线' }[v.lockOnline];
               // v.type = { 1: '蓝牙锁', 2: 'ID锁', 3: '实体锁' }[v.lockType];
               v.modelStr = v.model == 1 ? '在线模式' : '离线模式';
               v.blStateStr = v.blState == 0 ? '蓝牙关闭' : '蓝牙开启';
               v.ID = v.lockId % 10000000;
               return v;
            });
            _total = total;
         }
      }
    tableData.value = _list;
    page.total = _total;
      tableData.value = _list;
      page.total = _total;
   });
@@ -129,7 +130,6 @@
      } = scope;
      editLock.value = row;
      addEditTitle.value = '修改锁具';
      isBatch.value = false;
      isAdd.value = false;
      addEditVisible.value = true;
   }
@@ -141,13 +141,11 @@
   function add() {
      isAdd.value = true;
      isBatch.value = false;
      addEditVisible.value = true;
   }
   function batchAdd() {
      isAdd.value = true;
      isBatch.value = true;
      addEditVisible.value = true;
   }
@@ -162,7 +160,7 @@
      let {
         row
      } = scope;
      $confirm("远程打开该锁具", () => {
    $confirmPwdDo(() => {
         let loading = $loading();
         lockOpen(scope.row.lockId).then((res) => {
            let { code, data } = res;
@@ -180,6 +178,7 @@
            });
      });
   }
   function del(id) {
@@ -200,25 +199,102 @@
         });
   }
  function openBl(scope) {
    $confirmPwdDo(() => {
      let loading = $loading();
      openLockBl(
        scope.row.lockId
      ).then((res) => {
        let { code, data } = res;
        loading.close();
        if (code && data) {
          console.log(data);
          $message.success("操作成功");
          sendMessage();
        } else {
          $message.error("操作失败");
        }
      })
        .catch((err) => {
          loading.close();
          console.log(err);
        });
    });
}
function closeBl(scope) {
  $confirmPwdDo(() => {
    let loading = $loading();
    closeLockBl(
      scope.row.lockId
    ).then((res) => {
      let { code, data } = res;
      loading.close();
      if (code && data) {
        console.log(data);
        $message.success("操作成功");
        sendMessage();
      } else {
        $message.error("操作失败");
      }
    })
      .catch((err) => {
        loading.close();
        console.log(err);
      });
  });
}
</script>
<template>
  <div class="page-wrapper">
    <div class="page-header">
      <div class="hdw-card-container">
        <hdw-card title="区域列表" is-full>
          <hdw-tree @item-click="itemClickHandler"></hdw-tree>
        </hdw-card>
      </div>
    </div>
    <div class="page-header"></div>
    <div class="page-content">
      <hdw-card is-full>
      <yc-card is-full>
        <div class="page-content-wrapper">
          <div class="page-content-tools">
            <el-button type="primary" size="small" :icon="Plus" @click="add">添加</el-button>
            <el-button type="primary" size="small" :icon="Plus" @click="batchAdd">批量添加</el-button>
            <el-button type="primary" size="small" @click="add"><svg-icon icon-class="add"></svg-icon>添加</el-button>
            <!-- <el-button type="primary" size="small" :icon="Plus" @click="batchAdd">批量添加</el-button> -->
            |
            <div class="tools-filter">
              <div class="tools-filter-item">
                <div class="filter-label">省:</div>
                <div class="filter-content">
                  <el-select v-model="stationName1" clearable  placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
                    style="width: 180px">
                    <el-option v-for="(item, idx) in stationList1" :key="'province_' + idx" :label="item" :value="item" />
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">市:</div>
                <div class="filter-content">
                  <el-select v-model="stationName2" clearable  placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
                    style="width: 180px">
                    <el-option v-for="(item, idx) in stationList2" :key="'city_' + idx" :label="item" :value="item" />
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">区县:</div>
                <div class="filter-content">
                  <el-select v-model="stationName3" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
                    style="width: 180px">
                    <el-option v-for="(item, idx) in stationList3" :key="'list2_' + idx" :label="item" :value="item" />
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">机房:</div>
                <div class="filter-content">
                  <el-select v-model="stationName4" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
                    style="width: 180px">
                    <el-option v-for="(item, idx) in stationList4" :key="'list3_' + idx" :label="item" :value="item" />
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">锁具名称:</div>
                <div class="filter-content">
@@ -231,68 +307,37 @@
                  <el-select v-model="filter.state" placeholder="请选择" @change="sendMessage" size="small"
                    style="width: 180px">
                    <el-option label="--请选择--" value="" />
                    <el-option label="未安装" :value="-1" />
                    <el-option label="闭锁" :value="0" />
                    <el-option label="开锁" :value="1" />
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">锁具类型:</div>
                <div class="filter-content">
                  <el-select v-model="filter.type" @change="sendMessage" placeholder="请选择" size="small"
                    style="width: 180px">
                    <el-option label="--请选择--" value="" />
                    <el-option label="蓝牙锁" :value="1" />
                    <el-option label="ID锁" :value="2" />
                    <el-option label="实体锁" :value="3" />
                  </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" @click="sendMessage">查询</el-button>
            <el-button type="primary" size="small" @click="sendMessage"><svg-icon icon-class="search"></svg-icon>查询</el-button>
          </div>
          <div class="page-content-table">
            <div class="pos-rel">
              <div class="pos-abs">
                <el-table stripe :data="tableData" border style="width: 100%; height: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column type="index" fixed="left" width="50" />
                  <el-table-column prop="type" label="类型" width="180" />
                  <el-table-column prop="lockName" label="锁具名称" width="180" />
                  <el-table-column prop="ID" label="锁ID" width="120" />
                  <el-table-column prop="areaPath" label="关联区域" min-width="180" />
                  <el-table-column prop="stationName" label="机房" min-width="180" />
                  <el-table-column prop="modelStr" label="控制模式" width="180" />
                  <el-table-column prop="onlineState" label="在线状态" width="180" />
                  <el-table-column prop="state" label="安装状态" width="180" />
                  <!-- <el-table-column prop="state" label="安装状态" width="180" /> -->
                  <el-table-column prop="blStateStr" label="蓝牙状态" width="180" />
                  <!-- <el-table-column prop="lockImg" label="锁具图片" width="180" /> -->
                  <!-- <el-table-column prop="address" label="地址" /> -->
                  <el-table-column align="center" fixed="right" label="操作" width="300">
                    <template #default="scope">
                      <el-button type="danger" size="small"
                        v-if="isAdmin && scope.row.lockOnline == 1 && scope.row.lockState == 0"
                        v-if="isCanControl && scope.row.lockOnline == 1 && scope.row.lockState == 0"
                        @click="open(scope)">远程开锁</el-button>
                      <el-button type="primary" v-if="scope.row.blState == 0" size="small" @click="edit(scope)">开启蓝牙</el-button>
                      <el-button type="primary" v-else size="small" @click="edit(scope)">关闭蓝牙</el-button>
                      <el-button type="primary" v-if="isCanControl && scope.row.blState == 0" size="small"
                        @click="openBl(scope)">开启蓝牙</el-button>
                      <el-button type="primary" v-if="isCanControl && scope.row.blState == 1" size="small" @click="closeBl(scope)">关闭蓝牙</el-button>
                      <el-button type="primary" size="small" @click="edit(scope)">编辑</el-button>
                      <el-button type="danger" size="small" @click="confirmDel(scope)">删除</el-button>
                    </template>
@@ -312,12 +357,12 @@
            <div class="page-tool"></div>
          </div>
        </div>
      </hdw-card>
      </yc-card>
    </div>
    <div class="page-footer"></div>
    <!-- 编辑 新建 -->
    <el-dialog v-model="addEditVisible" :title="addEditTitle" width="500" align-center :close-on-click-modal="false">
      <add-edit v-if="addEditVisible" :isBatch="isBatch" :info="editLock" :isAdd="isAdd" @close="addEditVisible = false"
    <el-dialog v-model="addEditVisible" :title="addEditTitle" width="640" align-center :close-on-click-modal="false">
      <add-edit v-if="addEditVisible" :info="editLock" :isAdd="isAdd" @close="addEditVisible = false"
        @ok="okHandle"></add-edit>
    </el-dialog>
  </div>