<script setup>
|
import { ref, onMounted, nextTick } from "vue";
|
import { getLockHisWithReal } from '@/api/lockManager.js';
|
import { Search } from '@element-plus/icons-vue';
|
|
import stepLine from '@/components/echarts/stepLine.vue';
|
|
import moment from 'moment';
|
|
const props = defineProps({
|
lockId: {
|
type: Number,
|
required: true
|
}
|
});
|
|
const startTime = ref('');
|
const endTime = ref('');
|
|
const list = ref([]);
|
const open_num = ref(0);
|
const close_num = ref(0);
|
const nowopen_num = ref(0);
|
const nowclose_num = ref(0);
|
|
const chart = ref();
|
|
function getRecord() {
|
console.log('id', props.lockId, '=============');
|
|
getLockHisWithReal(props.lockId, '2022-01-01 00:00:00', '2027-12-31 23:59:59').then((res) => {
|
let { code, data, data2 } = res;
|
let _list = [];
|
let _open_num = 0;
|
let _close_num = 0;
|
let _nowopen_num = 0;
|
let _nowclose_num = 0;
|
if (code && data) {
|
// console.log(data2);
|
|
_list = data2.hisList;
|
_open_num = data2.openNum;
|
_close_num = data2.closeNum;
|
_nowopen_num = data2.nowopenNum;
|
_nowclose_num = data2.nowcloseNum;
|
}
|
|
list.value = _list;
|
open_num.value = _open_num;
|
close_num.value = _close_num;
|
nowopen_num.value = _nowopen_num;
|
nowclose_num.value = _nowclose_num;
|
|
updateChart();
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
|
}
|
|
function updateChart() {
|
let _list = list.value;
|
let labels = [], datas = [];
|
_list.forEach(v => {
|
labels.push(v.recordTime);
|
datas.push(v.lockState);
|
})
|
chart.value.updateChart(labels, datas);
|
}
|
|
onMounted(() => {
|
console.log('record mount', '=============');
|
|
endTime.value = moment().format('YYYY-MM-DD');
|
startTime.value = moment().subtract(7, 'days').format('YYYY-MM-DD');
|
|
console.log('time', startTime.value, endTime.value, '=============');
|
|
getRecord();
|
});
|
|
|
</script>
|
|
<template>
|
<div class="page">
|
<!-- 时间段 -->
|
<div class="filter">
|
<div class="label">起始时间</div>
|
<div class="value">
|
<el-date-picker v-model="startTime" @change="getRecord" value-format="YYYY-MM-DD" type="date" size="small"
|
placeholder="" />
|
</div>
|
<div class="label">截止时间</div>
|
<div class="value">
|
<el-date-picker v-model="endTime" type="date" value-format="YYYY-MM-DD" size="small" @change="getRecord"
|
placeholder="" />
|
</div>
|
<el-button type="primary" size="small" :icon="Search" @click="getRecord">查询</el-button>
|
</div>
|
<!-- 图表 -->
|
<div class="main">
|
<div class="chart-wrap">
|
<step-line ref="chart"></step-line>
|
</div>
|
</div>
|
<!-- 统计 -->
|
<div class="footer">
|
<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 class="item">
|
<div class="label">当天开启</div>
|
<div class="value">{{ nowopen_num }}</div>
|
</div>
|
<div class="item">
|
<div class="label">当天关闭</div>
|
<div class="value">{{ nowclose_num }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page {
|
height: 100%;
|
padding: 8px;
|
display: flex;
|
flex-direction: column;
|
background: #012581;
|
|
.filter {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
color: #fff;
|
|
.label {
|
margin-right: 8px;
|
|
&::after {
|
content: ":";
|
}
|
}
|
|
.value {
|
margin-right: 1em;
|
}
|
}
|
|
.main {
|
flex: 1;
|
margin-top: 20px;
|
position: relative;
|
|
.chart-wrap {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
|
.footer {
|
display: flex;
|
justify-content: center;
|
|
.item {
|
background: #0ff;
|
width: 10em;
|
height: 4em;
|
border-radius: 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
padding: 6px;
|
font-size: 20px;
|
& + .item {
|
margin-left: 20px;
|
}
|
.label {
|
line-height: 1.6;
|
}
|
|
.value {
|
background: #000;
|
border-radius: 6px;
|
line-height: 1.6;
|
text-align: right;
|
color: #0ff;
|
padding-right: 0.6em;
|
}
|
}
|
}
|
}
|
</style>
|
