Vent-App/pages/history/history.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-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="StartTime"
            ></uni-datetime-picker>
            <uni-datetime-picker
              :show="dataShow1"
              mode="datetime"
              @cancel="dataShow1 = false"
              @confirm="selectEndTime"
              v-model="EndTime"
            ></uni-datetime-picker>
          </div>
          <div class="btns" style="margin-top: 10px">
            <u-button
              type="primary"
              :text="deviceName ? deviceName : '选择设备'"
              @click="deviceShow = true"
            ></u-button>
            <u-button
              type="primary"
              :text="lable ? lable : '间隔时间'"
              @click="show = true"
            ></u-button>
            <u-button
              type="primary"
              text="查询"
              @click="checkHistory"
            ></u-button>
          </div>
          <u-picker
            :show="deviceShow"
            :columns="[devices]"
            @cancel="deviceShow = false"
            @confirm="selectDevice"
            keyName="strinstallpos"
          >
          </u-picker>
          <u-picker
            :show="show"
            :columns="timeColumns"
            @cancel="show = false"
            keyName="label"
            @confirm="selectSkipTime"
          ></u-picker>
        </div>
        <u-list
          :class="{ emptyhistory: historyData.length === 0 }"
          class="historycontainer"
        >
          <template v-if="historyData.length > 0">
            <u-list-item
              class="itemback"
              v-for="(item, index) in historyData"
              :key="index"
            >
              <u-row gutter="5" customStyle="margin-bottom: 10px">
                <u-col span="24">
                  <u--text :text="item.ginstallpos"></u--text>
                </u-col>
              </u-row>
              <u-row gutter="5" customStyle="margin-bottom: 10px">
                <u-col span="2" style="margin-right: 15rpx">
                  <div v-if="item.netStatus == 0" class="error-tag1">
                    <image
                      src="/static/model/connectFalse.svg"
                      alt=""
                      class="icon-style"
                    />
                    <span style="float: right">断开</span>
                  </div>
                  <div v-else class="success-tag">
                    <image
                      src="/static/model/connectTrue.svg"
                      alt=""
                      class="icon-style"
                    />
                    <span style="float: right">连接</span>
                  </div>
                </u-col>
                <u-col span="2"> </u-col>
                <u-col span="3"> </u-col>
                <u-col span="5">
                  <u--text class="timetext" :text="item.ttime"></u--text>
                </u-col>
              </u-row>
              <div
                class="datacard"
                v-for="(showitem, index) in currentHistory"
                v-show="showitem.appshow == 1"
                :key="showitem.id + index"
              >
                <div class="content">
                  <view
                    v-if="showitem.datatype == 1"
                    class="demo-layout bg-purple-light"
                    style="margin-top: 60rpx; color: #3787fe"
                  >
                    {{
                      item[showitem.monitorcode] == null ||
                      item[showitem.monitorcode] == ""
                        ? "--"
                        : item[showitem.monitorcode]
                    }}
                  </view>
                  <view
                    v-else-if="showitem.datatype == 2"
                    class="demo-layout bg-purple-light"
                    style="margin-top: 60rpx; color: #3787fe"
                  >
                    {{
                      item.readData[showitem.monitorcode] == null ||
                      item.readData[showitem.monitorcode] == ""
                        ? "--"
                        : item.readData[showitem.monitorcode]
                    }}
                  </view>
                  <view
                    class="demo-layout bg-purple-light"
                    style="color: #3787fe"
                    >{{ showitem.des }}</view
                  >
                </div>
              </div>
            </u-list-item>
          </template>
          <template v-else>
            <div class="empty-message">数据为空</div>
          </template>
        </u-list>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import dayjs from "dayjs";
import DeviceMenu from "../../pages/device/devicemenu/devicemenu";
import uniDatetimePicker from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
export default {
  data() {
    return {
      menushow: false,
      TabCur: "gate",
      curlist: [],
      colums: [],
      deviceList: {},
      startDate: null,
      endDate: null,
      show: false,
      deviceShow: false,
      dataShow: false,
      dataShow1: false,
      StartTime: "", //起始时间
      EndTime: "", //结束时间
      devices: [], //设备类型数组
      deviceName: "", //设备名称
      timeS: "", //间隔时间
      lable: "", //间隔时间
      timeColumns: [
        [
          {
            label: "1秒",
            value: "1",
          },
          {
            label: "5秒",
            value: "2",
          },
          {
            label: "10秒",
            value: "3",
          },
          {
            label: "30秒",
            value: "4",
          },
          {
            label: "1分钟",
            value: "5",
          },
          {
            label: "10分钟",
            value: "6",
          },
          {
            label: "30分钟",
            value: "7",
          },
          {
            label: "1小时",
            value: "8",
          },
        ],
      ],
      deviceID: "", //设备ID
      //deviceType: "", //设备类型
      skip: 8, //时间间隔
      dataTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      historyData: [], //历史数据
      loading: false, // 是否正在加载数据
      hasMoreData: true, // 是否还有更多数据可以加载
      pageNo: 1, // 当前页码（用于请求数据时分页）
    };
  },
  components: {
    DeviceMenu,
    uniDatetimePicker,
  },
  props: ["showColum", "deviceType"],
  watch: {
    deviceType: {
      async handler(data) {
        if (data) {
          this.TabCur = data;
          console.log(this.TabCur, "设备");
          this.curlist = this.deviceList[this.TabCur];
          if (this.curlist == null) {
            this.curlist = [];
          }
          // 选择设备分类，重新获取数据
          await this.loadData(this.TabCur);
          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");
  },
  mounted() {
    // this.TabCur = deviceType;
    this.loadData(this.TabCur);
  },

  computed: {
    currentHistory() {
      return this.colums[this.TabCur + "_history"] || [];
    },
  },
  methods: {
    loadData(type) {
      new Promise((resolve, reject) => {
        api
          .getDeviceMonitor({
            devicetype: type,
            pagetype: "normal",
            filterParams: {},
          })
          .then((response) => {
            if (response.data.code == 200) {
              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
              this.curlist = this.deviceList[type];
              this.setData(this.curlist);
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    //选择设备选择器  保存对应的id
    setData(data) {
      this.devices = [];
      data.forEach((element) => {
        const deviceObj = {
          id: element.deviceID,
          strinstallpos: element.strinstallpos,
          type: element.deviceType,
        };
        this.devices.push(deviceObj);
      });
    },
    //选择设备  点击确定按钮  保存id
    selectDevice(e) {
      this.deviceID = e.value[0].id;
      this.TabCur = e.value[0].type;
      this.deviceName = e.value[0].strinstallpos;
      this.deviceShow = false;
    },
    //选择起始时间
    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;
    },
    //选择间隔时间
    selectSkipTime(e) {
      this.skip = e.value[0].value;
      this.lable = e.value[0].label;
      this.show = false;
    },
    //查询历史数据 getDeviceHistory
    checkHistory() {
      // debugger;
      const params = {
        ttime_begin: this.StartTime,
        ttime_end: this.EndTime,
        gdeviceid: this.deviceID,
        skip: this.skip,
        pageNo: this.pageNo,
        pageSize: 10,
        strtype: this.TabCur,
      };
      new Promise((resolve, reject) => {
        api
          .getDeviceHistory(params)
          .then((response) => {
            debugger;
            if (response.data.code == 200) {
              const infolist = response.data.result;
              this.historyData = infolist.datalist.records;
              this.historyData.forEach((item) => {
                if (item.readData.frontGateOpen == 1) {
                  item.readData.frontGateOpen = "打开";
                } else {
                  item.readData.frontGateOpen = "关闭";
                }
                if (item.readData.rearGateOpen == 1) {
                  item.readData.rearGateOpen = "打开";
                } else {
                  item.readData.rearGateOpen = "关闭";
                }
                if (item.readData.midGateOpen == 1) {
                  item.readData.midGateOpen = "打开";
                } else {
                  item.readData.midGateOpen = "关闭";
                }
              });
              this.pageNo = response.data.result.datalist.current;
              // if (infolist.length == 0 && this.pageNo == 1) {
              //   // console.log('首次加载没数据');
              //   this.noData = false;
              //   this.historyData = [];
              // } else if (infolist.length < 3 && this.pageNo == 1) {
              //   // console.log('首次加载有数据，但少于4条');
              //   this.noData = true;
              //   this.historyData = infolist;
              // } else if (infolist.length !== 0 && this.pageNo == 1) {
              //   // console.log('首次加载有数据');
              //   this.noData = false;
              //   this.historyData = infolist;
              // } else if (infolist.length !== 0 && this.pageNo > 1) {
              //   // console.log('上拉加载更多数据');
              //   this.noData = false;
              //   this.historyData = this.historyData.concat(infolist);
              // } else if (infolist.length == 0 && this.pageNo > 1) {
              //   // console.log('上拉加载没有更多数据了');
              //   this.noData = true;
              // }
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    async loadMoreData() {
      if (this.loading || !this.hasMoreData) return;
      this.loading = true;
      try {
        // 如果新数据为空，则表示没有更多数据了
        if (this.historyData.length === 0) {
          this.hasMoreData = false;
        } else {
          // 将新数据追加到数据列表中
          this.historyData = [...this.historyData, ...newData];
          // 更新页码以便下次加载下一页数据
          this.pageNo += 1;
        }
      } catch (error) {
        // 处理请求错误
        console.error("加载数据失败:", error);
      } finally {
        // 无论请求成功还是失败，都要将加载状态设置为false
        this.loading = false;
      }
    },
    devicemenuShow(e) {
      this.menushow = !this.menushow;
      console.log(this.menushow, "dainjichengg成都多大事");
    },
    menuClick(id) {
      this.TabCur = id;
      console.log(this.TabCur);
      // 显示该分类的数据
      this.curlist = this.deviceList[this.TabCur];
      if (this.curlist == null) {
        this.curlist = [];
      }
      // 选择设备分类，重新获取数据
      this.loadData(this.TabCur);
      this.menushow = false;
    },
  },
  destroyed() {
    // 停止定时器
  },
  onReachBottom() {
    // uni-app提供的页面滚动到底部钩子函数
    console.log("上拉加载更多数据");
    this.loadMoreData();
  },
};
</script>

<style lang="scss" scoped>
.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;
}
.content {
  width: 100%;
  display: flex;
  height: 290rpx;
  flex-direction: column;
}
.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;
}
.btns > * {
  margin-right: 10px; /* 根据需要调整间距大小 */
}

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

.flcard {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.itemback {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.datacard {
  width: 30%;
  margin: 1%;
  float: left;
  height: 190rpx;
  text-align: center;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
}
.error-tag {
  border-radius: 10%;
  display: inline-block;
  color: #e90000;
  line-height: 50rpx;
  font-size: 14px;
  text-align: center;
  width: 120rpx;
  height: 50rpx;
  background-color: rgba(233, 0, 0, 0.2);
}
.error-tag1 {
  border-radius: 10%;
  display: inline-block;
  color: #696969;
  line-height: 50rpx;
  font-size: 14px;
  text-align: center;
  width: 120rpx;
  height: 50rpx;
  background-color: rgba(105, 105, 105, 0.2);
}
.success-tag {
  border-radius: 10%;
  color: #42c000;
  line-height: 50rpx;
  font-size: 14px;
  width: 120rpx;
  height: 50rpx;
  display: inline-block;
  background-color: rgba(226, 250, 214);
}
.icon-style {
  margin: 15rpx;
  width: 14px;
  height: 14px;
}
</style>