UA 整理提交

he wei

2025-04-23 b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf

 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>
</style>