| | |
| | | <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(); |
| | | |
| | |
| | | // 当前编辑的锁对象 |
| | | 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, |
| | | }; |
| | |
| | | ); |
| | | } |
| | | |
| | | 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; |
| | |
| | | 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; |
| | | }); |
| | | |
| | | |
| | |
| | | } = scope; |
| | | editLock.value = row; |
| | | addEditTitle.value = '修改锁具'; |
| | | isBatch.value = false; |
| | | isAdd.value = false; |
| | | addEditVisible.value = true; |
| | | } |
| | |
| | | |
| | | function add() { |
| | | isAdd.value = true; |
| | | isBatch.value = false; |
| | | addEditVisible.value = true; |
| | | } |
| | | |
| | | function batchAdd() { |
| | | isAdd.value = true; |
| | | isBatch.value = true; |
| | | addEditVisible.value = true; |
| | | } |
| | | |
| | |
| | | let { |
| | | row |
| | | } = scope; |
| | | $confirm("远程打开该锁具", () => { |
| | | $confirmPwdDo(() => { |
| | | let loading = $loading(); |
| | | lockOpen(scope.row.lockId).then((res) => { |
| | | let { code, data } = res; |
| | |
| | | }); |
| | | |
| | | }); |
| | | |
| | | } |
| | | |
| | | function del(id) { |
| | |
| | | }); |
| | | |
| | | } |
| | | |
| | | 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"> |
| | |
| | | <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> |
| | |
| | | <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> |