UA 整理提交

he wei

2025-04-23 b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf

 src/views/device/realtime/lockRecord.vue

@@ -1,15 +1,19 @@
<script setup>
   import { ref, onMounted, nextTick } from "vue";
   import { getLockHisWithReal } from '@/api/lockManager.js';
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({
      lockId: {
         type: Number,
   lockList: {
      type: Array,
         required: true
      }
   });
@@ -23,12 +27,37 @@
   const nowopen_num = ref(0);
   const nowclose_num = ref(0);

const lockId = ref('');

   const chart = ref();

   function getRecord() {
      console.log('id', props.lockId, '=============');
watch(
   () => props.lockList,
   () => {
      lockId.value = props.lockList[0]?.lockId;
      getRecord();
   },
);

      getLockHisWithReal(props.lockId, '2022-01-01 00:00:00', '2027-12-31 23:59:59').then((res) => {
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;
@@ -69,6 +98,34 @@
    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', '=============');

@@ -79,25 +136,61 @@

      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,7 +200,29 @@
    </div>
    <!-- 统计 -->
    <div class="footer">
      <div class="item">
      <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>
@@ -122,7 +237,7 @@
      <div class="item">
        <div class="label">当天关闭</div>
        <div class="value">{{ nowclose_num }}</div>
      </div>
        </div> -->
    </div>
  </div>
</template>
@@ -133,7 +248,7 @@
  padding: 8px;
  display: flex;
  flex-direction: column;
  background: #012581;
  background: #072d44;

  .filter {
    display: flex;
@@ -173,30 +288,32 @@
    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;

      // 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;
      // }
    }
  }
}