Vent-App/pages/operation/operation.vue

<template>
  <view class="container">
    <view v-if="!menushow" class="main">
      <view class="u-page">
        <!-- 一、查询条件 -->
        <view class="query-card">
          <view class="query-row">
            <uni-datetime-picker
              class="query-item"
              type="datetime"
              :hideSecond="true"
              @confirm="selectStartTime"
              v-model="StartTime"
            >
              <view class="query-picker-inner">
                <u-icon name="calendar" size="16" color="#2277fb"></u-icon>
                <text class="query-picker-text">{{
                  StartTime ? StartTime.slice(0, 10) : "开始日期"
                }}</text>
              </view>
            </uni-datetime-picker>
            <uni-datetime-picker
              class="query-item"
              type="datetime"
              :hideSecond="true"
              @confirm="selectEndTime"
              v-model="EndTime"
            >
              <view class="query-picker-inner">
                <u-icon name="calendar" size="16" color="#2277fb"></u-icon>
                <text class="query-picker-text">{{
                  EndTime ? EndTime.slice(0, 10) : "结束日期"
                }}</text>
              </view>
            </uni-datetime-picker>
            <view class="query-btn query-btn-query" @click="checkHistoryData">
              查询
            </view>
          </view>
        </view>
        <!-- 二、数据列表 -->
        <u-list class="historycontainer">
          <template v-if="historyData.length > 0">
            <u-list-item
              class="itemback"
              v-for="(item, index) in historyData"
              :key="index"
            >
              <view class="record-time-row">
                <text class="record-time">{{ item.createTime }}</text>
              </view>
              <view class="record-grid">
                <view class="record-cell">
                  <view class="record-icon-box">
                    <image
                      class="record-icon"
                      src="/static/home/user.svg"
                      mode="aspectFit"
                    ></image>
                  </view>
                  <view class="record-cell-content">
                    <text class="record-value">{{ item.realname || "-" }}</text>
                    <text class="record-label">用户</text>
                  </view>
                </view>
                <view class="record-cell">
                  <view class="record-icon-box">
                    <image
                      class="record-icon"
                      src="/static/home/ctrldevice.svg"
                      mode="aspectFit"
                    ></image>
                  </view>
                  <view class="record-cell-content">
                    <text class="record-value">{{
                      item.devicename || "-"
                    }}</text>
                    <text class="record-label">操作设备</text>
                  </view>
                </view>
                <view class="record-cell">
                  <view class="record-icon-box">
                    <image
                      class="record-icon"
                      src="/static/home/ctrlLog.svg"
                      mode="aspectFit"
                    ></image>
                  </view>
                  <view class="record-cell-content">
                    <text class="record-value">{{
                      item.strremark || "-"
                    }}</text>
                    <text class="record-label">操作记录</text>
                  </view>
                </view>
              </view>
            </u-list-item>
          </template>
          <template v-else>
            <!-- 空数据状态 -->
            <view class="empty-box">
              <image
                class="empty-img"
                src="/static/empty.png"
                mode="widthFix"
              ></image>
              <text class="empty-text">数据为空</text>
            </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",
      // 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.checkHistoryData();
          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;
    },
    //选择起始时间
    selectEndTime(e) {
      const endTime = e.value;
      const formattedTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
      this.EndTime = formattedTime;
    },
    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 lang="scss" scoped>
.container {
  padding: 0 !important;
}
.u-page {
  padding: 20rpx 0;
  box-sizing: border-box;
}

/* ===== 一、查询条件 ===== */
.query-card {
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(41, 121, 255, 0.06);
  margin-bottom: 20rpx;
}
.query-row {
  display: flex;
  align-items: center;
}
.query-row > * {
  flex: 1;
  min-width: 0;
  margin-right: 16rpx;
}
.query-row > *:last-child {
  margin-right: 0;
}

.query-item {
  flex: 1;
  min-width: 0;
}
.query-picker-inner {
  height: 64rpx;
  padding: 0 12rpx;
  border: 1rpx solid #2277fb;
  border-radius: 8rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.query-picker-text {
  margin-left: 8rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #2277fb;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 查询按钮 */
.query-btn {
  flex: 0 0 auto;
  width: 128rpx;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  color: #ffffff;
  font-size: 26rpx;
  border-radius: 8rpx;
  background: #2277fb;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.query-btn-query {
  font-weight: 600;
}

/* ===== 二、数据区 ===== */
.historycontainer {
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(41, 121, 255, 0.06);
  overflow: hidden;
}
/* 空数据状态 */
.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx 40rpx;
}
.empty-img {
  width: 60%;
}
.empty-text {
  margin-top: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
}
.main {
  display: flex;
  flex-direction: column;
}
.itemback {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.record-time-row {
  margin-bottom: 12rpx;
  background: url("/static/operation/timeBg.png");
  background-size: 100% 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.record-time {
  display: inline-block;
  padding: 12rpx 30rpx;
  font-size: 26rpx;
  font-weight: 600;
  color: #2663ca;
}
.record-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.record-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: linear-gradient(
    to bottom,
    rgba(175, 195, 252, 0.6) 0%,
    rgba(175, 195, 252, 0.1) 100%
  );
  border-radius: 12rpx;
  padding: 16rpx 8rpx;
  box-sizing: border-box;
}
.record-cell + .record-cell {
  margin-top: 0;
  margin-left: 12rpx;
}
.record-icon-box {
  width: 48rpx;
  height: 48rpx;
  border-radius: 10rpx;
  background: #71a5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 8rpx;
  margin-bottom: 0;
}
.record-icon {
  width: 32rpx;
  height: 32rpx;
}
.record-cell-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.record-value {
  display: block;
  max-width: 100%;
  font-size: 24rpx;
  font-weight: 700;
  color: #2663ca;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-label {
  display: block;
  margin-top: 6rpx;
  font-size: 24rpx;
  color: #677799;
  line-height: 1.3;
}
</style>