<script setup name="Realtime">
|
import { ref, onMounted, reactive, computed, watchEffect } from "vue";
|
import lockRecord from "./lockRecord.vue";
|
import useWebSocket from "@/hooks/useWebsocket.js";
|
|
import useElement from "@/hooks/useElement.js";
|
|
const { $loading, $message, $confirm } = useElement();
|
const { sendData, message: listMessage } = useWebSocket("real");
|
|
const currentAreaId = ref();
|
const tableData = ref([]);
|
const pageNum = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
const offline_num = ref(0);
|
const online_num = ref(0);
|
const sum = ref(0);
|
const open_num = ref(0);
|
const close_num = ref(0);
|
const unLoad_num = ref(0);
|
const recordVisible = ref(false);
|
const recordTitle = ref('开启关闭记录');
|
const currLockId = ref();
|
|
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) {
|
let {
|
pageInfo,
|
offLineNum,
|
unLoadNum,
|
sumLinf,
|
openNum,
|
onlineNum,
|
closeNum
|
} = JSON.parse(listMessage.value)?.data2;
|
|
offline_num.value = offLineNum;
|
online_num.value = onlineNum;
|
sum.value = sumLinf;
|
open_num.value = openNum;
|
close_num.value = closeNum;
|
unLoad_num.value = unLoadNum;
|
|
_total = pageInfo.total;
|
tableData.value = pageInfo.list.map(v => ({
|
...v,
|
onlineState: ['离线', '在线'][v.lockOnline],
|
state: { '-1': '未安装', 0: '已闭锁', 1: '已开锁' }[v.lockState],
|
openTime: v.lockState == 1 ? v.lastUpdateTime : '--',
|
closeTime: v.lockState == 0 ? v.lastUpdateTime : '--',
|
}));
|
}
|
|
total.value = _total;
|
});
|
|
function test() {
|
|
}
|
|
function viewRecord(data) {
|
console.log(data);
|
let { row } = data;
|
recordTitle.value = `开启关闭记录 - ${row.areaPath} ${row.lockName}`;
|
currLockId.value = row.lockId;
|
recordVisible.value = true;
|
}
|
|
function sendMessage() {
|
let params = {
|
areaId: currentAreaId.value,
|
pageNum: pageNum.value,
|
pageSize: pageSize.value,
|
};
|
sendData(JSON.stringify(params));
|
}
|
function handleSizeChange(val) {
|
pageSize.value = val;
|
sendMessage();
|
}
|
|
function handleCurrentChange(val) {
|
pageNum.value = val;
|
sendMessage();
|
}
|
</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-content">
|
<hdw-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-tools">
|
<div class="item">
|
<div class="label">设备总数量</div>
|
<div class="value">{{ sum }}</div>
|
</div>
|
<div class="item">
|
<div class="label">在线数量</div>
|
<div class="value">{{ online_num }}</div>
|
</div>
|
<div class="item">
|
<div class="label">离线数量</div>
|
<div class="value">{{ offline_num }}</div>
|
</div>
|
<div class="item">
|
<div class="label">未安装数量</div>
|
<div class="value">{{ unLoad_num }}</div>
|
</div>
|
<div class="item">
|
<div class="label">已开锁</div>
|
<div class="value">{{ open_num }}</div>
|
</div>
|
<div class="item">
|
<div class="label">已关闭</div>
|
<div class="value">{{ close_num }}</div>
|
</div>
|
</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 prop="lockId" label="锁具ID" width="180" />
|
<el-table-column prop="lockName" label="锁具名称" width="180" />
|
<el-table-column prop="areaPath" label="关联区域" />
|
<el-table-column prop="onlineState" label="在线状态" width="180" />
|
<el-table-column prop="state" label="状态" width="180" />
|
<el-table-column prop="openTime" label="开启时间" width="180" />
|
<el-table-column prop="closeTime" label="关闭时间" width="180" />
|
<el-table-column align="center" fixed="right" label="操作" width="200">
|
<template #default="scope">
|
<el-button type="primary" size="small" :disabled="scope.row.lockState == -1"
|
@click="viewRecord(scope)">历史开启关闭记录</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="pageNum" v-model:page-size="pageSize"
|
:page-sizes="[10,20, 40, 60, 80, 100, 200, 300, 400]" size="small"
|
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
|
@current-change="handleCurrentChange" />
|
</div>
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</hdw-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"
|
@ok="okHandle"></add-edit>
|
</el-dialog>
|
<!-- 开闭锁记录 -->
|
<el-dialog class="dialog-record" v-model="recordVisible" :close-on-click-modal="false"
|
style="display: flex; flex-direction: column; padding: 16px 0 0; height: 500px; width: 1100px;">
|
<template #header>
|
<div class="dialog-title">
|
{{ recordTitle }}
|
</div>
|
</template>
|
<lock-record v-if="recordVisible" :lockId="currLockId"></lock-record>
|
</el-dialog>
|
</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 {
|
border-top: 1px solid var(--border-light-color);
|
box-sizing: border-box;
|
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;
|
}
|
}
|
}
|
|
.page-content-tools {
|
display: flex;
|
|
.item {
|
display: flex;
|
align-items: center;
|
|
&+.item {
|
margin-left: 20px;
|
}
|
|
.label {
|
&::after {
|
content: ":";
|
}
|
}
|
|
.value {
|
margin-left: 8px;
|
font-weight: bold;
|
color: #090;
|
font-size: 18px;
|
}
|
}
|
}
|
|
.dialog-title {
|
color: #000;
|
font-size: 16px;
|
padding-left: 0.8em;
|
}
|
|
:deep(.el-dialog__body) {
|
flex: 1;
|
}
|
</style>
|
