From b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期三, 23 四月 2025 13:35:06 +0800
Subject: [PATCH] UA 整理提交
---
src/views/device/keys/index.vue | 491 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 375 insertions(+), 116 deletions(-)
diff --git a/src/views/device/keys/index.vue b/src/views/device/keys/index.vue
index efa4d05..c5a7303 100644
--- a/src/views/device/keys/index.vue
+++ b/src/views/device/keys/index.vue
@@ -1,180 +1,417 @@
<script setup name="KeyManage">
-import { ref, onMounted, reactive, computed } from 'vue';
+import { ref, onMounted, reactive, computed, watchEffect, nextTick } from 'vue';
import addEdit from './addEdit.vue';
+import { storeToRefs } from "pinia";
import useElement from "@/hooks/useElement.js";
-import store from '@/store';
+import { useUserStore } from '@/store/user.js';
+const userStore = useUserStore();
+const { urole, permits } = storeToRefs(userStore);
-import { Search, Plus } from "@element-plus/icons-vue";
+import useWebSocket from "@/hooks/useWebsocket.js";
+import isHasPermit from '@/utils/isHasPermit';
+
+const { sendData, message: listMessage } = useWebSocket("lockRt");
+import useStation from "@/hooks/useStationList.js";
+const { stationName1, stationName2, stationName3, stationName4,
+ stationList1, stationList2, stationList3, stationList4,
+} = useStation();
+
import {
- getAllKeyList,
- addKey,
- delKey,
+ addCard,
+ cancleIdCard,
+ delCard,
} from '@/api/keys.js';
-const dialogTitle = ref('娣诲姞閽ュ寵');
const addEditVisible = ref(false);
const background = ref(true);
const disabled = ref(false);
+const dialogTitle = ref('');
+const rowCardList = ref([]);
-const isAdd = ref(false);
+const isUnbind = ref(false);
const { $loading, $message, $confirm } = useElement();
-const pageCurr = ref(1);
-const pageSize = ref(10);
-const total = ref(0);
+const page = reactive({
+ pageNum: 1,
+ pageSize: 20,
+ total: 0,
+ });
+const tableData = ref([]);
const datas = reactive({
- tableData: [],
- keyInfo: {},
+ tableData: [],
+ keyInfo: {},
});
-const urole = computed(() => {
- return store.user().urole;
+const rowLockId = ref('');
+
+function sendMessage() {
+ let params = {
+ lockName: filter.name.trim() || undefined,
+ lockState: filter.state,
+ // 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,
+ };
+ sendData(
+ JSON.stringify(params)
+ );
+}
+
+watchEffect(() => {
+ let _total = 0;
+ let _list = [];
+ if (listMessage.value) {
+ const {
+ code,
+ data,
+ data2
+ } = JSON.parse(listMessage.value);
+
+ if (code && data) {
+ let { list, total } = data2;
+ _list = list.map(v => {
+ let cardList = [];
+ let lockIdcard = v.lockIdcard;
+ if (lockIdcard) {
+ for (let i = 1; i <= 100; i++) {
+ if (lockIdcard[`card${i}`] != '0') {
+ cardList.push(lockIdcard[`card${i}`]);
+ }
+ }
+ }
+ 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;
+ v.cardList = cardList.join(',');
+ return v;
+ });
+ _total = total;
+ }
+ }
+ tableData.value = _list;
+ page.total = _total;
});
function onOk() {
- addEditVisible.value = false;
- getList();
+ addEditVisible.value = false;
+ sendMessage();
}
function onCanel() {
- addEditVisible.value = false;
+ addEditVisible.value = false;
}
+// 鏄惁鏈夋帶鍒舵潈闄�
+let isCanControl = isHasPermit("control_permit", permits.value);
const filter = reactive({
- keyName: '',
- userName: ''
-});
+ name: "",
+ state: undefined,
+ type: undefined,
+ });
-function add() {
- dialogTitle.value = '娣诲姞閽ュ寵';
- datas.keyInfo = {};
- addEditVisible.value = true;
-}
function del(scope) {
- $confirm('鍒犻櫎璇ラ挜鍖�', () => {
- let loading = $loading();
- delKey(scope.row.keyId).then((res) => {
- let { code, data } = res;
- if (code && data) {
- $message({
- type: 'success',
- message: '鍒犻櫎鎴愬姛!'
- });
- getList();
- } else {
- $message({
- type: 'error',
- message: '鍒犻櫎澶辫触!'
- });
- }
+ $confirm('鍒犻櫎璇ラ挜鍖�', () => {
+ let loading = $loading();
+ delKey(scope.row.keyId).then((res) => {
+ let { code, data } = res;
+ if (code && data) {
+ $message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ });
+ sendMessage();
+ } else {
+ $message({
+ type: 'error',
+ message: '鍒犻櫎澶辫触!'
+ });
+ }
+ loading.close();
+ });
+ });
+}
+
+function bindCard(scope) {
+ console.log('scope', scope, '=============');
+ isUnbind.value = false;
+ dialogTitle.value = '缁戝畾鐢靛瓙鍗�';
+ rowCardList.value = scope.row.cardList.split(',');
+ rowLockId.value = scope.row.lockId;
+ addEditVisible.value = true;
+
+}
+
+function unBindCard(scope) {
+ console.log('scope', scope, '=============');
+ isUnbind.value = true;
+dialogTitle.value = '瑙ｇ粦鐢靛瓙鍗�';
+ rowCardList.value = scope.row.cardList.split(',');
+ rowLockId.value = scope.row.lockId;
+ addEditVisible.value = true;
+
+}
+
+function clearCard(scope) {
+ console.log('scope', scope, '=============');
+ let { lockId } = scope.row;
+ let loading = $loading();
+ cancleIdCard(lockId).then((res) => {
+ let { code, data } = res;
loading.close();
- });
+ if (code && data) {
+ // console.log(data);
+ $message.success('鎿嶄綔鎴愬姛');
+ } else {
+ $message.error('鎿嶄綔澶辫触');
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ loading.close();
});
}
function edit(scope) {
- dialogTitle.value = '缂栬緫閽ュ寵';
- datas.keyInfo = scope.row;
- // console.log('edit', scope.row, '=============');
-
- addEditVisible.value = true;
+ dialogTitle.value = '缂栬緫閽ュ寵';
+ datas.keyInfo = scope.row;
+ // console.log('edit', scope.row, '=============');
+
+ addEditVisible.value = true;
}
-function getList() {
- // keyName, pageNum, pageSize, uname
- let params = {
- pageNum: pageCurr.value,
- pageSize: pageSize.value,
- keyName: filter.keyName || undefined,
- uname: filter.userName || undefined
- };
-
- let loading = $loading();
- getAllKeyList(params).then((res) => {
- let { code, data, data2 } = res;
- let _total = 0;
- let _list = [];
- if (code && data) {
- let { list, total } = data2;
- _list = list.map(v => {
- v.type = { 1: 'ID閽ュ寵', 2: '鏈烘閽ュ寵' }[v.keyType];
- return v;
- });
- _total = total;
- }
- datas.tableData = _list;
- total.value = _total;
- loading.close();
- })
- .catch((err) => {
- console.log(err);
- loading.close();
- });
-
-}
function handleSizeChange(val) {
- pageSize.value = val;
- getList();
+ pageSize.value = val;
+ sendMessage();
}
function handleCurrentChange(val) {
- pageCurr.value = val;
- getList();
+ pageCurr.value = val;
+ sendMessage();
}
onMounted(() => {
- getList();
+ sendMessage();
});
-
-
</script>
<template>
<div class="page-wrapper">
- <div class="page-header">
- </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="add"
+ >娣诲姞閽ュ寵</el-button
+ >
+ | -->
<div class="tools-filter">
<div class="tools-filter-item">
- <div class="filter-label">閽ュ寵鍚嶇О锛�</div>
+ <div class="filter-label">鐪侊細</div>
<div class="filter-content">
- <el-input v-model="filter.keyName" size="small" @input="getList"></el-input>
+ <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-label">甯傦細</div>
<div class="filter-content">
- <el-input v-model="filter.userName" size="small" @input="getList"></el-input>
+ <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-input
+ @input="sendMessage"
+ placeholder="璇疯緭鍏ラ攣鍏峰悕绉�..."
+ v-model="filter.name"
+ size="small"
+ ></el-input>
</div>
</div>
</div>
- <el-button type="primary" size="small" :icon="Search" @click="getList">鏌ヨ</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 :data="datas.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="uname" align="center" label="淇濈浜�" width="180" />
- <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" />
- <el-table-column align="center" fixed="right" label="鎿嶄綔" width="180" v-if="urole > 0">
+ <el-table
+ :data="tableData"
+ border
+ style="width: 100%; height: 100%"
+ >
+ <el-table-column fixed="left" type="index" width="50" />
+ <el-table-column
+ prop="stationName"
+ align="center"
+ label="鏈烘埧鍚嶇О"
+ min-width="260"
+ />
+ <el-table-column
+ prop="lockName"
+ align="center"
+ label="閿佸叿鍚嶇О"
+ width="180"
+ />
+ <el-table-column
+ prop="lockAddress"
+ align="center"
+ label="閿佸叿鍦板潃"
+ width="180"
+ />
+ <el-table-column prop="ID" label="閿両D" width="120" />
+ <el-table-column
+ prop="lockIp"
+ align="center"
+ label="IP"
+ width="180"
+ />
+ <el-table-column
+ prop="modelStr"
+ align="center"
+ label="鎺у埗妯″紡"
+ width="180"
+ />
+ <el-table-column
+ prop="onlineState"
+ align="center"
+ label="鍦ㄧ嚎鐘舵��"
+ width="180"
+ />
+ <el-table-column
+ prop="blStateStr"
+ align="center"
+ label="钃濈墮鐘舵��"
+ width="180"
+ />
+ <el-table-column
+ prop="cardList"
+ align="center"
+ label="宸茬粦瀹氱數瀛愬崱鍙�"
+ min-width="340"
+ />
+ <el-table-column
+ align="center"
+ fixed="right"
+ label="鎿嶄綔"
+ width="340"
+ v-if="urole > 0"
+ >
<template #default="scope">
- <el-button type="primary" size="small" @click="edit(scope)">缂栬緫</el-button>
- <el-button type="danger" size="small" @click="del(scope)">鍒犻櫎</el-button>
+ <!-- <el-button type="danger" size="small"
+ v-if="isAdmin && 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"
+ size="small"
+ v-if="isCanControl && scope.row.lockOnline == 1"
+ @click="bindCard(scope)"
+ >缁戝畾鐢靛瓙鍗�</el-button
+ >
+ <el-button
+ type="danger"
+ size="small"
+ v-if="isCanControl && scope.row.lockOnline == 1"
+ @click="unBindCard(scope)"
+ >瑙ｇ粦鐢靛瓙鍗�</el-button
+ >
+ <el-button
+ type="danger"
+ size="small"
+ v-if="isCanControl && scope.row.lockOnline == 1"
+ @click="clearCard(scope)"
+ >娓呯┖鐢靛瓙鍗�</el-button
+ >
</template>
</el-table-column>
</el-table>
@@ -184,22 +421,44 @@
<div class="page-content-page">
<div class="page-tool"></div>
<div class="el-page-container">
- <el-pagination v-model:current-page="pageCurr" v-model:page-size="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="total"
- @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+ <el-pagination
+ v-model:current-page="page.pageNum"
+ 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>
+ </yc-card>
</div>
<div class="page-footer"></div>
<!-- 寮圭獥 -->
- <el-dialog :title="dialogTitle" v-model="addEditVisible" top="0" :close-on-click-modal="false" class="dialog-center"
- width="700px" center>
- <add-edit v-if="addEditVisible" @success="onOk" :info="datas.keyInfo" @cancel="onCanel"></add-edit>
- </el-dialog>
+ <el-dialog
+ :title="dialogTitle"
+ v-model="addEditVisible"
+ top="0"
+ :close-on-click-modal="false"
+ class="dialog-center"
+ width="700px"
+ center
+ >
+ <add-edit
+ v-if="addEditVisible"
+ :isUnbind="isUnbind"
+ :lockId="rowLockId"
+ @success="onOk"
+ :list="rowCardList"
+ @cancel="onCanel"
+ ></add-edit>
+ </el-dialog>
</div>
</template>
--
Gitblit v1.9.1