<script setup>
|
import { ref, onMounted, nextTick, watch } from "vue";
|
import { getLockHisWithReal, exportHis } from '@/api/lockManager.js';
|
import { Search } from '@element-plus/icons-vue';
|
|
import stepLine from '@/components/echarts/stepLine.vue';
|
import valuePanel2 from '@/views/dashboard/components/valuePanel2.vue';
|
|
import moment from 'moment';
|
import useElement from "@/hooks/useElement.js";
|
|
const { $loading, $message, $confirm } = useElement();
|
|
const props = defineProps({
|
lockList: {
|
type: Array,
|
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 lockId = ref('');
|
|
const chart = ref();
|
|
watch(
|
() => props.lockList,
|
() => {
|
lockId.value = props.lockList[0]?.lockId;
|
getRecord();
|
},
|
);
|
|
function getRecord() {
|
// console.log('id', props.lockList, '=============');
|
let _lockId = lockId.value;
|
if (!_lockId) {
|
return;
|
}
|
|
if (!startTime.value) {
|
$message.error('请选择开始时间');
|
return;
|
}
|
|
if (!endTime.value) {
|
$message.error('请选择结束时间');
|
return;
|
}
|
|
|
getLockHisWithReal(_lockId, startTime.value + ' 00:00:00', endTime.value + ' 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);
|
}
|
|
async function exportExcel() {
|
if (!lockId.value) {
|
$message.error('请选择锁具');
|
return;
|
}
|
if (!startTime.value) {
|
$message.error('请选择开始时间');
|
return;
|
}
|
|
if (!endTime.value) {
|
$message.error('请选择结束时间');
|
return;
|
}
|
let loading = $loading();
|
let res = await exportHis(lockId.value, startTime.value + ' 00:00:00', endTime.value + ' 23:59:59');
|
loading.close();
|
const nameList = res.headers["content-disposition"];
|
const fileName = nameList.split("=")[1];
|
let blob = res.data;
|
let url = window.URL.createObjectURL(blob);
|
let a = document.createElement("a");
|
a.href = url;
|
a.download = decodeURIComponent(fileName);
|
a.click();
|
window.URL.revokeObjectURL(url);
|
}
|
|
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-select
|
v-model="lockId"
|
clearable
|
filterable
|
placeholder="请选择"
|
@change="getRecord"
|
size="small"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in lockList"
|
:key="'list3_' + idx"
|
:label="item.lockName"
|
:value="item.lockId"
|
/>
|
</el-select>
|
</div>
|
<div class="label">起始时间</div>
|
<div class="value">
|
<el-date-picker
|
v-model="startTime"
|
:clearable="false"
|
@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"
|
:clearable="false"
|
value-format="YYYY-MM-DD"
|
size="small"
|
@change="getRecord"
|
placeholder=""
|
/>
|
</div>
|
<el-button type="primary" size="small" :icon="Search" @click="getRecord"
|
>查询</el-button
|
>
|
<el-button type="primary" size="small" @click="exportExcel"
|
>导出</el-button
|
>
|
</div>
|
<!-- 图表 -->
|
<div class="main">
|
<div class="chart-wrap">
|
<step-line ref="chart"></step-line>
|
</div>
|
</div>
|
<!-- 统计 -->
|
<div class="footer">
|
<value-panel2
|
class="item"
|
label="开启次数"
|
:value="open_num"
|
></value-panel2>
|
<value-panel2
|
class="item"
|
label="关闭次数"
|
:value="close_num"
|
></value-panel2>
|
<value-panel2
|
class="item"
|
color="#efa10b"
|
label="当天开启"
|
:value="nowopen_num"
|
></value-panel2>
|
<value-panel2
|
class="item"
|
color="#efa10b"
|
label="当天关闭"
|
:value="nowclose_num"
|
></value-panel2>
|
<!-- <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: #072d44;
|
|
.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>
|
