<script setup name="History">
|
import { ref, onMounted, reactive, computed, watch, watchEffect, onActivated } from "vue";
|
import lockRecord from "@/views/device/realtime/lockRecord.vue";
|
import useWebSocket from "@/hooks/useWebsocket.js";
|
import stationList from '@/components/stationList.vue';
|
import useElement from "@/hooks/useElement.js";
|
|
import { useRoute, useRouter } from "vue-router";
|
const router = useRouter();
|
const route = useRoute();
|
|
const { $loading, $message, $confirm } = useElement();
|
import { getLockByStationId } from "@/api/station.js";
|
import { getStationBaojiInfo } from "@/api/station.js";
|
|
const baojiId = ref();
|
const stationId = ref();
|
const lockList = ref([]);
|
const lockId = ref('');
|
const queryFlag = ref(0);
|
|
function itemClickHandler(item) {
|
console.log(item, '====item', item);
|
const [_baojiId, _stationId] = item.id.split('-');
|
// TODO
|
// areaId lockName lockState lockType pageNum pageSize
|
baojiId.value = _baojiId;
|
stationId.value = _stationId;
|
getStationInfo();
|
getList();
|
}
|
|
const stationName = ref('');
|
|
|
function getStationInfo() {
|
getStationBaojiInfo({
|
baojiId: baojiId.value,
|
stationId: stationId.value
|
}).then((res) => {
|
let { code, data, data2, data3 } = res;
|
if (code && data) {
|
console.log(data);
|
stationName.value = data2.stationName + ' ' + data3.baojiName;
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
|
}
|
|
function getList() {
|
getLockByStationId(baojiId.value, stationId.value).then((res) => {
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
lockList.value = list;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
|
}
|
|
function goRealtime() {
|
router.push({
|
path: '/device/realtime',
|
query: {
|
stationId: stationId.value,
|
baojiId: baojiId.value,
|
flag: Math.random()
|
}
|
});
|
}
|
|
const tree = ref(null);
|
|
// watch(
|
// () => route.query,
|
// () => {
|
// if (route.query.stationId && route.query.baojiId) {
|
// baojiId.value = route.query.baojiId;
|
// stationId.value = route.query.stationId;
|
// tree.value.setCurrent(baojiId.value + '-' + stationId.value);
|
// }
|
// },
|
// { immediate: true }
|
// );
|
|
|
|
onActivated(() => {
|
if (queryFlag.value == route.query.flag) {
|
return;
|
}
|
queryFlag.value = route.query.flag || 0;
|
|
if (route.query.stationId && route.query.baojiId) {
|
baojiId.value = route.query.baojiId;
|
stationId.value = route.query.stationId;
|
tree.value.setCurrent(baojiId.value + '-' + stationId.value);
|
}
|
if (route.query.lockId) {
|
lockId.value = route.query.lockId;
|
}
|
console.log('baojiId, stationId', baojiId.value, stationId.value, '=============his');
|
|
|
});
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-header">
|
<div class="hdw-card-container">
|
<yc-card title="区域列表" is-full>
|
<hdw-tree ref="tree" @item-click="itemClickHandler"></hdw-tree>
|
</yc-card>
|
</div>
|
</div>
|
<div class="page-content">
|
<yc-card is-full>
|
<div class="page-content-wrapper">
|
<div class="p-title">
|
{{ stationName }}
|
<div class="btn-grp">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="实时监测"
|
placement="bottom"
|
>
|
<div class="btn" @click="goRealtime">
|
<svg-icon icon-class="realtime"></svg-icon>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
<div class="page-content-table">
|
<lock-record :lockList="lockList" :lockId="lockId"></lock-record>
|
</div>
|
</div>
|
</yc-card>
|
</div>
|
<div class="page-footer"></div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.p-title {
|
background: #0ff;
|
color: #000;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 36px;
|
border-radius: 6px;
|
margin-bottom: 8px;
|
font-weight: 700;
|
position: relative;
|
|
.btn-grp {
|
position: absolute;
|
right: 10px;
|
|
.btn {
|
cursor: pointer;
|
}
|
}
|
}
|
|
.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: 320px;
|
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>
|
