Vent-App/pages/history/Historymodel.vue

<template>
  <view class="container">
    <!-- 建议放在外层 -->
    <u-navbar
      title="历史数据"
      @leftClick="devicemenuShow"
      :safeAreaInsetTop="false"
    >
      <view class="u-nav-slot" slot="left">
        <u-icon name="list" size="20"> </u-icon>
      </view>
    </u-navbar>
    <!-- 侧边栏 -->
    <view v-show="menushow" class="menupage">
      <DeviceMenu @menuClick="menuClick"></DeviceMenu>
    </view>

    <!-- 历史数据列表页 -->
    <view v-show="!menushow" class="main">
      <view class="u-page">

        <div class="btns">
          <u-button type="primary" shape="circle" text="选择设备"></u-button>
          <u-button
            type="primary"
            shape="circle"
            text="选择间隔时间"
            @click="show = true"
          ></u-button>
        </div>
        <u-picker :show="show" :columns="columns" title="请选择设备"></u-picker>
        <u-picker
          :show="show"
          :columns="timeColumns"
          title="间隔时间"
        ></u-picker>
      </view>
    </view>
  </view>
</template>

<script>
import DeviceMenu from "./devicemenu/devicemenu.vue";
import api from "@/api/api";
export default {
  data() {
    return {
      menushow: false,
      TabCur: "gate",
      curlist: [],
      deviceList: {},
      scrollLeft: 0,
      currentTab: 0,
      startDate: null,
      endDate: null,
      show: false,
      columns: [["中国", "美国", "日本"]],
      timeColumns: [
        ["1s", "5s", "10s", "30s", "1分钟", "10分钟", "30分钟", "1小时"],
      ],
    };
  },
  components: {
    DeviceMenu,
  },
  props: ["showColum"],
  watch: {
    showColum(data) {
      this.colums = data;
      console.log(this.colums);
    },
  },
  created() {},
  mounted() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      // 每隔一段时间执行某个操作
      this.timer = setInterval(() => {
        // 执行定时任务
        console.log("定时任务执行中...");
      }, 5000);
    },
    stopTimer() {
      // 停止定时器
      clearInterval(this.timer);
    },
    tabSelect(e) {
      this.currentTab = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
    },
    devicemenuShow(e) {
      this.menushow = true;
    },
    menuClick(id) {
      // 显示该分类的数据
      this.menushow = false;
    },
  },
  destroyed() {
    // 停止定时器
  },
};
</script>

<style>
.top-nav {
  height: 100rpx;
  line-height: 100rpx;
  background-color: #2aa9f3;
  color: #daaaa;
}
.top-nav2 {
  background-color: #ffffff;
}
.main {
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
}
.menupage {
  position: absolute;
  z-index: 2;
  top: 40rpx;
  height: calc(100% - 40rpx);
  width: 100%;
}
.btns {
  display: flex;
}
</style>