Vent-App/pages/operation/operationModel.vue

<template>
  <view class="container">
    <!-- 建议放在外层 -->
    <u-navbar
      title="操作历史"
      @leftClick="devicemenuShow"
      :safeAreaInsetTop="true"
    >
      <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="flcard">
          <div class="btns">
            <u-button
              type="primary"
              shape="circle"
              :text="StartTime ? StartTime : '起始时间'"
              @click="dataShow = true"
            ></u-button>
            <u-button
              type="primary"
              shape="circle"
              :text="EndTime ? EndTime : '结束时间'"
              @click="dataShow1 = true"
            ></u-button>
            <u-icon
              size="30"
              color="#3c9cff"
              name="search"
              @click="checkHistoryData"
            ></u-icon>
          </div>
          <u-datetime-picker
            :show="dataShow"
            mode="datetime"
            @cancel="dataShow = false"
            @confirm="selectStartTime"
            v-model="dataTime"
          ></u-datetime-picker>
          <u-datetime-picker
            :show="dataShow1"
            mode="datetime"
            @cancel="dataShow1 = false"
            @confirm="selectEndTime"
            v-model="dataTime"
          ></u-datetime-picker>
        </div>
        <u-list>
          <u-list-item
            class="itemback"
            v-for="(item, index) in historyData"
            :key="index"
          >
            <view>
              <view class="content flcard">
                <view class="datacard user">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{ item.realname }}</text>
                  </view>
                  <view style="margin: 20rpx 20rpx; font-size: small"
                    >用户</view
                  >
                </view>
                <view class="datacard device">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{ item.devicename }}</text>
                  </view>
                  <view style="margin: 20rpx 20rpx; font-size: small"
                    >操作设备</view
                  >
                </view>
                <view class="datacard record">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{ item.strremark }}</text>
                  </view>
                  <view style="margin: 20rpx 20rpx; font-size: small"
                    >操作记录</view
                  >
                </view>
                <view class="datacard time">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{ item.createTime }}</text>
                  </view>
                  <view style="margin: 20rpx 20rpx; font-size: small"
                    >操作时间</view
                  >
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
      </view>
    </view>
  </view>
</template>

<script>
import DeviceMenu from "./devicemenu/devicemenu.vue";
import api from "@/api/api";
import dayjs from "dayjs";
export default {
  data() {
    return {
      menushow: false,
      TabCur: "gate",
      dataShow: false,
      dataShow1: false,
      dataTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      deviceType: "gate", //设备类型
      StartTime: "",
      EndTime: "",
      historyData: [],
    };
  },
  components: {
    DeviceMenu,
  },
  props: ["showColum"],
  watch: {
    showColum(data) {
      this.colums = data;
      console.log(this.colums);
    },
  },
  created() {
    this.colums = this.showColum;
    const startTime =new Date().getTime() - 3600 * 1000 * 24 * 30;
    const endTime = new Date();
    this.StartTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
    this.EndTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
    this.checkHistoryData();
  },
  mounted() {},
  methods: {
    //选择起始时间
    selectStartTime(e) {
      const startTime = e.value;
      const formattedTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
      this.StartTime = formattedTime;
      this.dataShow = false;
    },
    //选择起始时间
    selectEndTime(e) {
      const endTime = e.value;
      const formattedTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
      this.EndTime = formattedTime;
      this.dataShow1 = false;
    },
    devicemenuShow(e) {
      this.menushow = !this.menushow;
    },
    menuClick(id) {
      this.TabCur = id;
      this.deviceType = this.TabCur;
      this.menushow = false;
    },
    //查询历史数据
    checkHistoryData() {
      const params = {
        createTime_begin: this.StartTime,
        createTime_end: this.EndTime,
        pageNo: 1,
        pageSize: 10000,
        devicetype: this.deviceType + "*",
      };
      new Promise((resolve, reject) => {
        api
          .getOpreateHistory(params)
          .then((response) => {
            if (response.data.code == 200) {
              this.historyData = response.data.result.records;
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
  },
  destroyed() {},
};
</script>

<style>
.main {
  display: flex;
  flex-direction: column;
}
.menupage {
  position: absolute;
  z-index: 2;
  /* top: 40rpx; */
  height: calc(100% - 40rpx);
  width: 100%;
}
.btns {
  display: flex;
}
.flcard {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.text-style {
  color: #3787fe;
  font-weight: bold;
}

.itemback {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.datacard {
  width: 48%;
  margin: 1%;
  float: left;
  height: 120rpx;
  border-radius: 10px;
}
.time {
  background: url(/static/operation/operationTime.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.record {
  background: url(/static/operation/operationRecord.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.user {
  background: url(/static/operation/user.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.device {
  background: url(/static/operation/operationDevice.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
</style>