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
              class="u-button"
              :show="dataShow"
              mode="datetime"
              @cancel="dataShow = false"
              @confirm="selectStartTime"
              v-model="StartTime"
            ></uni-datetime-picker>
            <uni-datetime-picker
              class="u-button"
              :show="dataShow1"
              mode="datetime"
              @cancel="dataShow1 = false"
              @confirm="selectEndTime"
              v-model="EndTime"
            ></uni-datetime-picker>
            <u-button
              type="primary"
              text="查询"
              @click="checkHistoryData"
              class="btn"
            ></u-button>
          </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 class="time">
                <view style="margin: 20rpx 30rpx">
                  <text style="font-weight: bold">{{ item.createTime }}</text>
                </view>
              </view>
              <view class="content flcard">
                <view class="datacard user">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{ item.realname }}</text>
                  </view>
                  <view class="text-info">用户</view>
                </view>
                <view class="split"></view>
                <view class="datacard device">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{ item.devicename }}</text>
                  </view>
                  <view class="text-info">操作设备</view>
                </view>
                <view class="split"></view>
                <view class="datacard record">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{ item.strremark }}</text>
                  </view>
                  <view class="text-info">操作记录</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>
.u-button {
  border-radius: 5px;
  border: 1px solid #2299fe;
  font-weight: bold;
}
.btn {
  width: 80px;
  background: linear-gradient(to right, #338afe, #07b4ff, #338afe) !important;
  border-radius: 5px;
}
.content {
  margin-top: 20rpx;
  background-image: url("/static/operation/operateData.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.split {
  width: 2%;
  height: 120rpx;
  margin-right: 9%;
  background-image: url("/static/operation/operateSplit.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.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-size: 16px;
  font-weight: bold;
  text-align: center;
}
.text-info {
  margin: 20rpx 20rpx;
  font-size: 14px;
  font-weight: 500;
  color: #657497;
}
.itemback {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.datacard {
  width: 45%;
  float: left;
  height: 120rpx;
  border-radius: 10px;
}
.time {
  background: url(/static/operation/timeBg.png);
  background-size: 100% 100%;
  background-position: right;
  background-repeat: no-repeat;
}
</style>