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/realtime/lockRecord.vue | 339 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 228 insertions(+), 111 deletions(-)
diff --git a/src/views/device/realtime/lockRecord.vue b/src/views/device/realtime/lockRecord.vue
index e8e4841..1badce1 100644
--- a/src/views/device/realtime/lockRecord.vue
+++ b/src/views/device/realtime/lockRecord.vue
@@ -1,103 +1,196 @@
<script setup>
- import { ref, onMounted, nextTick } from "vue";
- import { getLockHisWithReal } from '@/api/lockManager.js';
- import { Search } from '@element-plus/icons-vue';
+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 stepLine from '@/components/echarts/stepLine.vue';
+import valuePanel2 from '@/views/dashboard/components/valuePanel2.vue';
- import moment from 'moment';
+import moment from 'moment';
+import useElement from "@/hooks/useElement.js";
- const props = defineProps({
- lockId: {
- type: Number,
- required: true
- }
- });
+const { $loading, $message, $confirm } = useElement();
- const startTime = ref('');
- const endTime = ref('');
+const props = defineProps({
+ lockList: {
+ type: Array,
+ required: true
+ }
+});
- const list = ref([]);
- const open_num = ref(0);
- const close_num = ref(0);
- const nowopen_num = ref(0);
- const nowclose_num = ref(0);
+const startTime = ref('');
+const endTime = ref('');
- const chart = ref();
+const list = ref([]);
+const open_num = ref(0);
+const close_num = ref(0);
+const nowopen_num = ref(0);
+const nowclose_num = ref(0);
- function getRecord() {
- console.log('id', props.lockId, '=============');
+const lockId = ref('');
- 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);
+const chart = ref();
- _list = data2.hisList;
- _open_num = data2.openNum;
- _close_num = data2.closeNum;
- _nowopen_num = data2.nowopenNum;
- _nowclose_num = data2.nowcloseNum;
- }
+watch(
+ () => props.lockList,
+ () => {
+ lockId.value = props.lockList[0]?.lockId;
+ getRecord();
+ },
+);
- 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 getRecord() {
+ // console.log('id', props.lockList, '=============');
+ let _lockId = lockId.value;
+ if (!_lockId) {
+ return;
}
- 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);
- }
+ if (!startTime.value) {
+ $message.error('璇烽�夋嫨寮�濮嬫椂闂�');
+ return;
+ }
- 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();
- });
+ 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" @change="getRecord" value-format="YYYY-MM-DD" type="date" size="small"
- placeholder="" />
+ <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" value-format="YYYY-MM-DD" size="small" @change="getRecord"
- placeholder="" />
+ <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" :icon="Search" @click="getRecord"
+ >鏌ヨ</el-button
+ >
+ <el-button type="primary" size="small" @click="exportExcel"
+ >瀵煎嚭</el-button
+ >
</div>
<!-- 鍥捐〃 -->
<div class="main">
@@ -107,22 +200,44 @@
</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>
+ <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>
@@ -133,7 +248,7 @@
padding: 8px;
display: flex;
flex-direction: column;
- background: #012581;
+ background: #072d44;
.filter {
display: flex;
@@ -173,31 +288,33 @@
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 {
+
+ // 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;
- }
+ // .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>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1