Vent-App/pages/home/home.vue

<template>
  <view class="container">
    <view v-if="!menushow" class="main">
      <view class="u-page">
        <view :class="{ empty: showList.length === 0 }">
          <template v-if="showList.length > 0">
            <view v-for="(item, index) in showList" :key="index">
              <view class="device-card">
                <!-- 标题 -->
                <view class="card-title-row">
                  <text class="card-title">{{ item.strinstallpos }}</text>
                </view>
                <view class="card-divider"></view>

                <!-- 状态标签行 -->
                <view class="status-row">
                  <view class="status-left">
                    <view
                      v-if="item.netStatus == 0"
                      class="status-tag tag-offline"
                    >
                      <image
                        src="/static/model/connectFalse.svg"
                        class="tag-icon"
                      />
                      <text>断开</text>
                    </view>
                    <view v-else class="status-tag tag-online">
                      <image
                        src="/static/model/connectTrue.svg"
                        class="tag-icon"
                      />
                      <text>连接</text>
                    </view>

                    <view
                      v-if="item.warnFlag == 0"
                      class="status-tag tag-normal"
                    >
                      <image
                        src="/static/model/alarmTrue.svg"
                        class="tag-icon"
                      />
                      <text>正常</text>
                    </view>
                    <view
                      v-else
                      class="status-tag tag-warn"
                      @click="toggleWarn()"
                    >
                      <image
                        src="/static/model/alarmFalse.svg"
                        class="tag-icon"
                      />
                      <text class="warn-text">{{ item.warnDes }}</text>
                    </view>
                  </view>

                  <view v-if="hasDoorUse" class="door-use-btn">
                    <text>{{ getDoorUseText(item.doorUse) }}</text>
                  </view>
                </view>

                <!-- 普通设备数据 -->
                <view
                  v-if="TabCur != 'fanmain' && TabCur != 'fanlocal'"
                  class="data-grid"
                  @tap="openNewPage(item)"
                >
                  <view
                    class="datacard"
                    v-for="(showitem, sIndex) in deviceShowList"
                    :key="sIndex"
                    v-show="isDataField(showitem)"
                  >
                    <view class="data-icon">
                      <view class="data-icon-glass">
                        <!-- <u-icon
                          :name="getFieldIcon(showitem.monitorcode)"
                          color="#ffffff"
                          size="14"
                        ></u-icon> -->
                        <image
                          class="icon-top"
                          :src="getIcon1(showitem.monitorcode)"
                          mode="aspectFit"
                        ></image>
                      </view>
                    </view>
                    <view class="data-text">
                      <text class="data-value">{{
                        getFieldValue(item, showitem)
                      }}</text>
                      <text class="data-label">{{ showitem.des }}</text>
                    </view>
                  </view>
                  <!-- 更新时间 -->
                  <view class="datacard" v-if="item.readTime">
                    <view class="data-icon">
                      <view class="data-icon-glass">
                        <image
                          class="icon-top"
                          src="/static/warndata/shijian.svg"
                          mode="aspectFit"
                        ></image>
                      </view>
                    </view>
                    <view class="data-text">
                      <text class="data-value">{{ item.readTime }}</text>
                      <text class="data-label">更新时间</text>
                    </view>
                  </view>
                </view>

                <!-- 风机设备：主机 / 备机 -->
                <view class="fanContent" @tap="openNewPage(item)" v-else>
                  <view class="fan-block">
                    <view class="fan-label"><text class="">主机</text></view>
                    <view class="data-grid">
                      <view
                        class="datacard"
                        v-for="(showitem, sIndex) in deviceShowList"
                        :key="'f1-' + sIndex"
                        v-show="isDataField(showitem)"
                      >
                        <view class="data-icon">
                          <view class="data-icon-glass">
                            <u-icon
                              :name="getFieldIcon(showitem.monitorcode)"
                              color="#ffffff"
                              size="14"
                            ></u-icon>
                          </view>
                        </view>
                        <view class="data-text">
                          <text class="data-value">{{
                            getFanFieldValue(item, showitem, 1)
                          }}</text>
                          <text class="data-label">{{ showitem.des }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="fan-block">
                    <view class="fan-label"><text class="">备机</text></view>
                    <view class="data-grid">
                      <view
                        class="datacard"
                        v-for="(showitem, sIndex) in deviceShowList"
                        :key="'f2-' + sIndex"
                        v-show="isDataField(showitem)"
                      >
                        <view class="data-icon">
                          <view class="data-icon-glass">
                            <u-icon
                              :name="getFieldIcon(showitem.monitorcode)"
                              color="#ffffff"
                              size="14"
                            ></u-icon>
                          </view>
                        </view>
                        <view class="data-text">
                          <text class="data-value">{{
                            getFanFieldValue(item, showitem, 2)
                          }}</text>
                          <text class="data-label">{{ showitem.des }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 更新时间 -->
                  <view class="data-grid" v-if="item.readTime">
                    <view class="datacard">
                      <view class="data-icon">
                        <view class="data-icon-glass">
                          <image
                            class="icon-top"
                            src="/static/warndata/shijian.svg"
                            mode="aspectFit"
                          ></image>
                        </view>
                      </view>
                      <view class="data-text">
                        <text class="data-value">{{ item.readTime }}</text>
                        <text class="data-label">更新时间</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="empty-message">数据为空</view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import { computed } from "vue";
export default {
  data() {
    return {
      deviceShow1: false,
      menushow: false,
      TabCur: "",
      curlist: [],
      deviceList: {},
      List: [],
      colums: {},
      typeList: [], //详情页展示数据
      deviceShowList: [], //设备展示字段
      isWarnVisible: false,
      deviceType1: "",
      devices1: [],
      showList: [],
    };
  },
  props: ["showColum", "deviceType"],
  computed: {
    hasDoorUse() {
      return (this.deviceShowList || []).some(
        (item) => item.appShow == 1 && item.monitorcode == "doorUse"
      );
    },
  },
  watch: {
    showColum(data) {
      this.colums = data;
    },
    deviceType: {
      async handler(data) {
        if (data) {
          this.TabCur = data;
          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;
    // this.deviceShowList = this.colums[key];
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    toggleWarn() {
      console.log("测试");
      this.isWarnVisible = !this.isWarnVisible;
    },
    isDataField(showitem) {
      return (
        showitem.appShow == 1 &&
        showitem.monitorcode != "strinstallpos" &&
        showitem.monitorcode != "netStatus" &&
        showitem.monitorcode != "warnFlag" &&
        showitem.monitorcode != "readTime" &&
        showitem.monitorcode != "doorUse" &&
        showitem.monitorcode != ""
      );
    },
    getDoorUseText(val) {
      if (val == "2") return "行人";
      if (val == "1") return "行车";
      if (val == "3") return "短路";
      return "-";
    },
    getFieldValue(item, showitem) {
      if (showitem.monitorcode == "doorUse") {
        return this.getDoorUseText(item[showitem.monitorcode]);
      }
      const val = item[showitem.monitorcode];
      if (val == null || val == "") return "-";
      return val;
    },
    getFanFieldValue(item, showitem, fanNo) {
      const code = showitem.monitorcode;
      let key = code;
      if (code.startsWith("fan")) {
        key = code.replace(/^fan/, "fan" + fanNo);
      } else if (code.startsWith("Fan")) {
        key = code.replace(/^Fan/, "Fan" + fanNo);
      }
      if (item[key] !== undefined && item[key] !== null) {
        return item[key];
      }
      return "-";
    },
    getFieldIcon(monitorcode) {
      const code = (monitorcode || "").toLowerCase();
      if (code.indexOf("gate") > -1 || code.indexOf("door") > -1) {
        return "grid-fill";
      }
      if (code.indexOf("press") > -1 || code.indexOf("pressure") > -1) {
        return "level";
      }
      if (code.indexOf("wind") > -1 || code.indexOf("speed") > -1) {
        return "reload";
      }
      return "list";
    },
    getIcon1(monitorcode) {
      const code = (monitorcode || "").toLowerCase();
      if (code.indexOf("frontarea") > -1) {
        return "/static/home/gfmj.svg";
      }
      if (code.indexOf("area") > -1) {
        return "/static/icon-new/dmj.svg";
      }
      if (
        code.indexOf("m3") > -1 ||
        code.indexOf("va") > -1 ||
        code.indexOf("forward") > -1
      ) {
        return "/static/icon-new/fl.svg";
      }
      if (code.indexOf("gate") > -1 || code.indexOf("door") > -1) {
        return "/static/icon-new/door-icon.svg";
      }
      if (
        code.indexOf("press") > -1 ||
        code.indexOf("pressure") > -1 ||
        code.indexOf("pa1") > -1 ||
        code.indexOf("pa2") > -1 ||
        code.indexOf("dp") > -1
      ) {
        return "/static/icon-new/qyyl-icon.svg";
      }
      return "/static/icon-new/dmj.svg";
    },
    startTimer() {
      // 避免重复创建定时器
      this.stopTimer();
      // 每隔一段时间执行某个操作
      this.timer = setInterval(async () => {
        // 执行定时任务
        await this.loadData(this.deviceType);
        console.log("定时任务执行中...");
      }, 5000);
    },
    stopTimer() {
      // 停止定时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    // 从详情页返回时：恢复轮询并立即刷新一次数据
    restartTimer() {
      this.startTimer();
      if (this.deviceType) {
        this.loadData(this.deviceType);
      }
    },
    getIcon(itemValue) {
      // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
      return "/static/sidebar/" + itemValue + ".svg";
    },
    getValueIcon(itemValue) {
      // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
      return "/static/sidebar/" + itemValue + ".svg";
    },
    loadData(type) {
      return new Promise((resolve, reject) => {
        api
          .getDeviceMonitor({
            devicetype: type,
            pagetype: "normal",
          })
          .then((response) => {
            if (response.data.code == 200) {
              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
              this.curlist = this.deviceList[type];
              const processedList = this.curlist.map((item) => {
                const { readData, ...baseFields } = item;
                return { ...baseFields, ...readData };
              });
              this.showList = processedList;
              this.showList.forEach((item) => {
                if (item.frontGateOpen == 1) {
                  item.frontGateOpen = "打开";
                } else {
                  item.frontGateOpen = "关闭";
                }
                if (item.midGateOpen == 1) {
                  item.midGateOpen = "打开";
                } else {
                  item.midGateOpen = "关闭";
                }
                if (item.rearGateOpen == 1) {
                  item.rearGateOpen = "打开";
                } else {
                  item.rearGateOpen = "关闭";
                }
                if (item.midGateOpen == 1) {
                  item.midGateOpen = "打开";
                } else {
                  item.midGateOpen = "关闭";
                }
                this.deviceType1 = item.deviceType;
                let original = this.TabCur;
                let newName = original.startsWith("sys_")
                  ? original.substring(4)
                  : original;
                const key = newName + "_monitor";
                const key1 = this.deviceType1 + "_monitor";
                if (this.showColum?.[key1]?.length > 0) {
                  this.deviceShowList = this.showColum[key1];
                  console.log(this.deviceShowList, "this.deviceShowList");
                } else {
                  this.deviceShowList = this.showColum[key] ?? [];
                  console.log(this.deviceShowList, "this.deviceShowList");
                }
              });
              if (this.TabCur == "sys_pulping") {
                this.loadNewData(this.curlist[0].deviceID);
              }
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            // console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    loadNewData(ID) {
      return new Promise((resolve, reject) => {
        api
          .getDeviceMonitor({
            devicetype: "sys",
            systemID: ID,
          })
          .then((response) => {
            if (response.data.code == 200) {
              this.curlist = [];
              this.List = response.data.result.msgTxt;
              this.List.forEach((item) => {
                if (item.type === "pulping_auto") {
                  this.curlist.push(item.datalist[0]);
                }
              });
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            // console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    devicemenuShow(e) {
      this.menushow = !this.menushow;
    },
    //获取app展示字段数据
    getShowList(type) {
      const params = {
        devicekind: type,
        pagetype: "monitor",
        pageNo: 1,
        pageSize: 100,
      };
      return new Promise((resolve, reject) => {
        api
          .getShowColumList(params)
          .then((response) => {
            if (response.data.code == 200) {
              this.typeList = response.data.result.records;
              resolve(response);
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    openNewPage(params) {
      const reqData = {
        id: params.deviceID,
        name: params.strinstallpos,
        type: this.TabCur,
      };
      const reqparams = uni.$u.queryParams(reqData);
      // const key = this.deviceType1 + "_monitor";
      if (this.deviceShowList.length > 0) {
        // 仅暂停轮询，不能 $destroy（否则返回后组件不再响应 deviceType 变化）
        this.stopTimer();
        uni.navigateTo({
          url: `/pages/home/detail/autodoor/autodoor${reqparams}`,
        });
      }
      //   this.$destroy();
      //   uni.navigateTo({
      //     url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
      //   });
      // },
    },
  },
  destroyed() {
    // 停止定时器
    this.stopTimer();
  },
};
</script>

<style scoped>
.container {
  min-height: 100%;
  /* background: #f4f7fd; */
}

.main {
  display: flex;
  flex-direction: column;
  /* background: #f4f7fd; */
}

.u-page {
  padding: 20rpx 24rpx;
  box-sizing: border-box;
}

.empty {
  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: #000;
}

/* ===== 设备卡片 ===== */
.device-card {
  background: #f9f9fb;
  border-radius: 20rpx;
  padding: 28rpx 24rpx 24rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid #fff;
}

.card-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  flex: 1;
  font-size: 28rpx;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-divider {
  height: 1rpx;
  background: #efeff0;
  margin: 20rpx 0;
}

/* ===== 状态行 ===== */
.status-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.status-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.status-tag {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 48rpx;
  padding: 0 16rpx;
  margin-right: 12rpx;
  margin-bottom: 4rpx;
  border-radius: 8rpx;
  border-width: 1rpx;
  border-style: solid;
  font-size: 24rpx;
  box-sizing: border-box;
}

.tag-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 8rpx;
  flex-shrink: 0;
}

.tag-offline {
  color: #888888;
  background: #f5f5f5;
  border-color: #d1d1d1;
}

.tag-online {
  color: #42c000;
  background: #e8f8e0;
  border-color: #a8e08a;
}

.tag-normal {
  color: #42c000;
  background: #e8f8e0;
  border-color: #a8e08a;
}

.tag-warn {
  color: #e90000;
  background: #ffebee;
  border-color: #ef9a9a;
  max-width: 280rpx;
}

.warn-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.door-use-btn {
  flex-shrink: 0;
  height: 48rpx;
  padding: 0 24rpx;
  border-radius: 8rpx;
  border: 1rpx solid #7eb6ff;
  background: #e0edfa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0065f8;
  font-size: 28rpx;
  font-weight: 500;
}

/* ===== 数据网格 ===== */
.data-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -6rpx;
}

.datacard {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 48%;
  margin: 6rpx;
  padding: 16rpx 12rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  background: linear-gradient(
    to bottom,
    rgba(175, 195, 252, 0.6) 0%,
    rgba(175, 195, 252, 0.1) 100%
  );
}

.data-icon {
  position: relative;
  width: 48rpx;
  height: 48rpx;
  border-radius: 10rpx;
  background: #2b7cff;
  box-shadow: 0 4rpx 10rpx rgba(43, 124, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10rpx;
}

.data-icon-glass {
  position: absolute;
  left: -5rpx;
  bottom: -5rpx;
  width: 43rpx;
  height: 43rpx;
  border-radius: 10rpx;
  background: transparent;
  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;
}

.icon-top {
  width: 30rpx;
  height: 28rpx;
}

.data-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.data-value {
  font-size: 28rpx;
  font-weight: 700;
  color: #0065f8;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-label {
  margin-top: 4rpx;
  font-size: 24rpx;
  color: #333333;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 风机 ===== */
.fanContent {
  display: flex;
  flex-direction: column;
}

.fan-block {
  margin-bottom: 12rpx;
}

.fan-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 28px;
  width: 100%;
  margin-bottom: 20rpx;
  padding-left: 30rpx;
  background: url("../../static/warndata/1-1.png") no-repeat center;
  background-size: 100% 100%;
}
.fan-label text {
  font-size: 24rpx;
  font-weight: 600;
  color: #000;
  margin: 4rpx 6rpx 8rpx;
}

.menupage {
  position: absolute;
  z-index: 2;
  width: 100%;
}
</style>