Vent-App/pages/operation/operation.vue

<template>
  <view class="container">
    <view v-if="!menushow" class="main">
      <view class="u-page">
        <div class="flcard">
          <div class="btns">
            <uni-datetime-picker
              :show="dataShow"
              mode="datetime"
              @cancel="dataShow = false"
              @confirm="selectStartTime"
              v-model="dataTime"
            ></uni-datetime-picker>
            <uni-datetime-picker
              :show="dataShow1"
              mode="datetime"
              @cancel="dataShow1 = false"
              @confirm="selectEndTime"
              v-model="dataTime"
            ></uni-datetime-picker>
            <u-icon
              size="30"
              color="#3c9cff"
              name="search"
              @click="checkHistoryData"
            ></u-icon>
          </div>
        </div>
        <u-list :class="{ emptyhistory: historyData.length === 0 }">
          <template v-if="historyData.length > 0">
            <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>
          </template>
          <template v-else>
            <view class="empty-message">暂无数据</view>
          </template>
        </u-list>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import dayjs from "dayjs";
import uniDatetimePicker from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
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: {
    uniDatetimePicker,
  },

  props: ["showColum", "deviceType"],
  watch: {
    showColum(data) {
      this.colums = data;
    },
    deviceType: {
      handler(data) {
        if (data) {
          this.TabCur = data;
          // 选择设备分类，重新获取数据
          this.$emit("setMenushow", {
            menushow: false,
          });
        }
      },
      immediate: true,
    },
  },
  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() {
    this.TabCur = this.deviceType;
  },
  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.menushow = false;
    },
    //查询历史数据
    checkHistoryData() {
      const params = {
        createTime_begin: this.StartTime,
        createTime_end: this.EndTime,
        pageNo: 1,
        pageSize: 10000,
        devicetype: this.TabCur + "*",
      };
      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>
.emptyhistory {
  background: url("/static/empty.png") no-repeat;
  background-size: 100% 50%;
}
.empty-message {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 80vh;
  color: #333;
}
.main {
  display: flex;
  flex-direction: column;
}
.menupage {
  position: absolute;
  z-index: 2;
  /* top: 40rpx; */
  height: calc(100% - 40rpx);
  width: 100%;
}
.btns {
  display: flex;
}
.btns > * {
  margin-right: 5px; /* 根据需要调整间距大小 */
}

/* 去除最后一个按钮的右边距 */
.btns > *:last-child {
  margin-right: 0;
}

.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>