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">
        <!-- 一、查询条件：上为选择设备 / 间隔时间，下为时间查询 / 查询 -->
        <view class="query-card">
          <!-- 选择设备 / 间隔时间 -->
          <view class="query-row">
            <view class="query-btn" @click="deviceShow = true">
              {{ deviceName ? deviceName : "选择设备" }}
            </view>
            <view class="query-btn" @click="show = true">
              {{ lable ? lable : "间隔时间" }}
            </view>
          </view>
          <!-- 时间查询 + 查询按钮 -->
          <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="checkHistory">
              查询
            </view>
          </view>
          <u-picker
            :show="deviceShow"
            :columns="[devices]"
            @cancel="deviceShow = false"
            @confirm="selectDevice"
            keyName="strinstallpos"
          >
          </u-picker>
          <u-picker
            :show="deviceShow1"
            :columns="devices1"
            @cancel="deviceShow1 = false"
            @confirm="selectDevice1"
            keyName="label"
          ></u-picker>
          <u-picker
            :show="show"
            :columns="timeColumns"
            @cancel="show = false"
            keyName="label"
            @confirm="selectSkipTime"
          ></u-picker>
        </view>
        <u-list 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;color: #ddd;font-weight: bold;"
              >
                <u-col span="24">
                  <u--text :text="item.ginstallpos || item.devicePos"></u--text>
                </u-col>
              </u-row>
              <u-row gutter="5" customStyle="margin-bottom: 10px">
                <u-col span="4">
                  <div v-if="item.netStatus == 0" class="error-tag1">
                    <image
                      src="/static/model/connectFalse.svg"
                      alt=""
                      class="icon-style"
                    />
                    <span style="float: right; margin-right: 12rpx">断开</span>
                  </div>
                  <div v-else class="success-tag">
                    <image
                      src="/static/model/connectTrue.svg"
                      alt=""
                      class="icon-style"
                    />
                    <span style="float: right; margin-right: 20rpx">连接</span>
                  </div>
                </u-col>
              </u-row>
              <view class="data-grid">
                <view
                  class="datacard"
                  v-for="(showitem, sIndex) in deviceShowList"
                  :key="sIndex"
                  v-if="
                    showitem.appShow == 1 &&
                    showitem.monitorcode != 'strinstallpos' &&
                    showitem.monitorcode != 'gdevicename' &&
                    showitem.monitorcode != 'ginstallpos' &&
                    showitem.monitorcode != 'netStatus' &&
                    showitem.monitorcode != 'warnFlag' &&
                    showitem.monitorcode != 'gcreatetime' &&
                    showitem.monitorcode != 'ttime' &&
                    showitem.monitorcode != 'time'
                  "
                >
                  <view class="data-icon">
                    <view class="data-icon-glass">
                      <image
                        class="data-icon-img"
                        :src="getWindowIcon(showitem)"
                        mode="aspectFit"
                      ></image>
                    </view>
                  </view>
                  <view class="data-text">
                    <text class="data-value">{{
                      formatFieldValue(item, showitem)
                    }}</text>
                    <text class="data-label">{{ showitem.des }}</text>
                  </view>
                </view>
                <view class="datacard">
                  <view class="data-icon">
                    <view class="data-icon-glass">
                      <image
                        class="data-icon-img"
                        src="/static/warndata/shijian.svg"
                        mode="aspectFit"
                      ></image>
                    </view>
                  </view>
                  <view class="data-text">
                    <text class="data-value">{{
                      item.time || item.ttime || "-"
                    }}</text>
                    <text class="data-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 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,
      deviceShow1: false,
      dataShow: false,
      dataShow1: false,
      StartTime: "", //起始时间
      EndTime: "", //结束时间
      devices: [], //设备类型数组
      devices1: [
        [
          {
            label: "1#风机",
            value: "fan1",
          },
          {
            label: "2#风机",
            value: "fan2",
          },
        ],
      ], //子设备类型数组
      deviceName: "", //设备名称
      labelName: "", //子设备名称
      timeS: "", //间隔时间
      lable: "", //间隔时间
      timeColumns: [
        [
          {
            label: "1秒",
            value: "1",
            value1: "1s",
          },
          {
            label: "5秒",
            value: "2",
            value1: "5s",
          },
          {
            label: "10秒",
            value: "3",
            value1: "10s",
          },
          {
            label: "30秒",
            value: "4",
            value1: "30s",
          },
          {
            label: "1分钟",
            value: "5",
            value1: "1m",
          },
          {
            label: "10分钟",
            value: "6",
            value1: "10m",
          },
          {
            label: "30分钟",
            value: "7",
            value1: "30m",
          },
          {
            label: "1小时",
            value: "8",
            value1: "1h",
          },
        ],
      ],
      deviceID: "", //设备ID
      deviceType1: "", //设备类型
      skip: 8, //时间间隔
      interval: "1h", //时间间隔
      dataTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      historyData: [], //历史数据
      deviceShowList: [],
      loading: false, // 是否正在加载数据
      hasMoreData: true, // 是否还有更多数据可以加载
      pageNo: 1, // 当前页码（用于请求数据时分页）
      stationType: "plc1", // 站点类型（用于请求数据时的参数）
      strType: "", //设备小类
      sysId: "",
    };
  },
  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;
    if (this.TabCur.startsWith("sys_")) {
      this.loadNewData(this.TabCur);
    } else {
      this.loadData(this.TabCur);
    }
  },

  computed: {},
  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);
          });
      });
    },
    loadNewData(type) {
      return new Promise((resolve, reject) => {
        api
          .getSysList({
            strtype: type,
            pagetype: "normal",
          })
          .then((response) => {
            if (response.data.code == 200) {
              this.sysId = response.data.result.records[0].id;
              this.loadSysData({
                devicetype: "sys",
                systemID: this.sysId,
              });
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            // console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //加载场景类数据
    loadSysData(data) {
      new Promise((resolve, reject) => {
        api
          .getDeviceMonitor(data)
          .then((response) => {
            if (response.data.code == 200) {
              this.deviceList[this.TabCur] =
                response.data.result.msgTxt[0].datalist;
              this.curlist = this.deviceList[this.TabCur];
              this.setData(this.curlist);
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    //选择设备选择器  保存对应的id
    setData(data) {
      this.devices = [];
      data.forEach((element) => {
        const deviceObj = {
          // id: element.deviceID,
          ID: element.deviceID,
          strinstallpos: element.strinstallpos,
          type: element.deviceType,
          stationtype: element.stationtype,
          strtype: element.strtype,
        };
        this.devices.push(deviceObj);
      });
    },
    //选择设备  点击确定按钮  保存id
    selectDevice(e) {
      // this.deviceId = e.value[0].id;
      this.deviceID = e.value[0].ID;
      this.stationType = e.value[0].stationtype;
      this.strType = e.value[0].type;
      this.deviceType1 = e.value[0].type;
      this.deviceName = e.value[0].strinstallpos;
      this.deviceShow = false;
      let original = this.TabCur;
      let newName = original.startsWith("sys_")
        ? original.substring(4)
        : original;
      const key = newName + "_history";
      const key1 = this.deviceType1 + "_history";
      console.log(key1, "key1");
      if (this.showColum?.[key1]?.length > 0) {
        this.deviceShowList = this.showColum[key1];
      } else {
        this.deviceShowList = this.showColum[key] ?? [];
      }
    },
    selectDevice1(e) {
      this.deviceNum = e.value[0].value;
      this.labelName = e.value[0].label;
      this.deviceShow1 = false;
    },
    // 根据字段中文名或编码返回 static/window 内对应图标
    getWindowIcon(showitem) {
      const des = (showitem.des || "").toString();
      const code = (showitem.monitorcode || "").toString().toLowerCase();
      if (des.indexOf("气源") > -1) return "/static/window/SourcePressure.svg";
      if (des.indexOf("压差") > -1 || des.indexOf("压力") > -1)
        return "/static/window/Pressure.svg";
      if (des.indexOf("前窗开启面积") > -1)
        return "/static/window/WindowOpenArea.svg";
      if (des.indexOf("前窗风量") > -1)
        return "/static/window/WindowAirflow.svg";
      if (des.indexOf("后窗开启面积") > -1)
        return "/static/window/RearOpen.svg";
      if (des.indexOf("后窗风量") > -1) return "/static/window/AirFlow.svg";
      if (des.indexOf("开度") > -1) return "/static/window/MaxArea.svg";
      if (des.indexOf("面积") > -1) return "/static/window/AirArea.svg";
      if (code.indexOf("source") > -1 && code.indexOf("press") > -1)
        return "/static/window/SourcePressure.svg";
      if (code.indexOf("press") > -1 || code.indexOf("pressure") > -1)
        return "/static/window/Pressure.svg";
      if (code.indexOf("area") > -1) return "/static/window/AirArea.svg";
      if (
        code.indexOf("flow") > -1 ||
        code.indexOf("m3") > -1 ||
        code.indexOf("va") > -1
      )
        return "/static/window/AirFlow.svg";
      return "/static/window/Pressure.svg";
    },
    // 指标取值（doorUse 特殊处理）
    formatFieldValue(item, showitem) {
      if (showitem.monitorcode == "doorUse") {
        const val = item[showitem.monitorcode];
        if (val == "2") return "行人";
        if (val == "1") return "行车";
        if (val == "3") return "短路";
        return "-";
      }
      const val = item[showitem.monitorcode];
      if (val == null || val == "") return "-";
      return val;
    },
    //选择起始时间
    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.interval = e.value[0].value1;
      this.lable = e.value[0].label;
      this.show = false;
    },
    //查询历史数据 getDeviceHistory
    checkHistory() {
      this.historyData = []; // 清空历史数据
      if (this.stationType !== "redis") {
        this.getHistoryData();
      } else {
        this.getHistoryData2();
      }
    },
    // 查询历史数据
    getHistoryData() {
      const params = {
        ttime_begin: this.StartTime,
        ttime_end: this.EndTime,
        gdeviceid: this.deviceID,
        skip: this.skip,
        pageNo: this.pageNo,
        pageSize: 10,
        strtype: this.strType,
      };
      new Promise((resolve, reject) => {
        api
          .getDeviceHistory(params)
          .then((response) => {
            if (response.data.code == 200) {
              const infolist = response.data.result;
              const result = infolist.datalist.records;
              result.forEach((item) => {
                const newData = { ...item, ...item.readData };
                this.historyData.push(newData);
              });
              this.pageNo = response.data.result.datalist.current;
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    getHistoryData2() {
      const params = {
        startTime: this.StartTime,
        endTime: this.EndTime,
        deviceId: this.deviceID,
        interval: this.interval,
        isEmployee: this.TabCur.startsWith("vehicle") ? false : true,
        pageNum: 1,
        pageSize: 10,
        strtype:
          (this.TabCur.startsWith("sys_")
            ? this.TabCur.substring(4)
            : this.TabCur) + "*",
      };
      if (this.TabCur.startsWith("sys")) {
        params.sysId = this.sysId;
      }
      new Promise((resolve, reject) => {
        api
          .getDeviceHistory2(params)
          .then((response) => {
            if (response.data.code === 200) {
              const result1 = response.data.result;
              if (result1.records.length != 0) {
                this.historyData = result1.records;
              }
              // this.pageNo = response1.data.result.datalist.current;
            } 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;
    },
    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>
.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 + .query-row {
  margin-top: 20rpx;
}
.query-row > * {
  flex: 1;
  min-width: 0;
  margin-right: 20rpx;
}
.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 {
  height: 64rpx;
  line-height: 64rpx;
  padding: 0 8rpx;
  text-align: center;
  color: #2277fb;
  font-size: 24rpx;
  border: 1rpx solid #2277fb;
  border-radius: 8rpx;
  background: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.query-btn-query {
  flex: 0 0 auto;
  width: 128rpx;
  font-weight: 600;
  font-size: 26rpx;
  color: #ffffff;
  border: none;
  background: #2277fb;
}
.time-bg {
  background-color: #cce6fb;
  border-radius: 5px;
  height: 26px;
  line-height: 25px;
  text-align: center;
  float: right;
}
.timetext {
  text-align: center;
  color: #2591eb;
}
/* ===== 二、数据区（与查询条件分为两部分展示） ===== */
.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;
}
.content {
  width: 100%;
  display: flex;
  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%;
}
.flcard {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.itemback {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.data-grid {
  display: flex;
  flex-wrap: wrap;
}
.datacard {
  width: calc(50% - 8rpx);
  margin: 4rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16rpx 12rpx;
  border-radius: 12rpx;
  background: linear-gradient(
    to bottom,
    rgba(175, 195, 252, 0.6) 0%,
    rgba(175, 195, 252, 0.1) 100%
  );
}
.datacard-full {
  width: calc(100% - 8rpx);
}
.data-icon {
  position: relative;
  width: 56rpx;
  height: 56rpx;
  border-radius: 12rpx;
  background: #2b7cff;
  box-sizing: border-box;
  box-shadow: 0 4rpx 10rpx rgba(43, 124, 255, 0.22);
  flex-shrink: 0;
  margin-right: 12rpx;
}
.data-icon-glass {
  position: absolute;
  left: -6rpx;
  bottom: -6rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 12rpx;
  background: transparent;
  border: none;
  box-shadow: 0 0 0 0.6px #ffffff inset;
  box-sizing: border-box;
  backdrop-filter: blur(4rpx);
  -webkit-backdrop-filter: blur(4rpx);
  display: flex;
  align-items: center;
  justify-content: center;
}
.data-icon-img {
  width: 28rpx;
  height: 28rpx;
}
.data-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.data-value {
  font-size: 24rpx;
  font-weight: 700;
  color: #287bfb;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.data-label {
  margin-top: 4rpx;
  font-size: 22rpx;
  color: #000000;
  line-height: 1.3;
}
.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: #5acc1f;
  line-height: 50rpx;
  font-size: 14px;
  width: 148rpx;
  height: 50rpx;
  display: inline-block;
  border: 1rpx solid #ace392;
  box-sizing: border-box;
  background-color: rgba(226, 250, 214, 0.5);
}
.icon-style {
  margin: 15rpx;
  width: 14px;
  height: 14px;
}
</style>