Vent-App/pages/home/home.vue

<template>
  <view class="container">
    <view v-if="!menushow" class="main">
      <view class="u-page">
        <u-list :class="{ empty: curlist.length === 0 }">
          <template v-if="curlist.length > 0">
            <u-list-item
              class="itemback"
              v-for="(item, index) in curlist"
              :key="index"
            >
              <div @tap="openNewPage(item)">
                <u-row gutter="5" customStyle="margin-bottom: 10px">
                  <u-col span="24">
                    <image
                      style="position: absolute; width: 18px; height: 18px"
                      class="icon"
                      :src="getIcon(TabCur)"
                      alt="Icon"
                    />
                    <span class="title">{{ item.strinstallpos }}</span>
                  </u-col>
                </u-row>
                <u-row gutter="5" customStyle="margin-bottom: 10px">
                  <u-col span="3" style="margin-right: 5rpx">
                    <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="4">
                    <div v-if="item.warnFlag == 0" class="success-tag">
                      <image
                        src="/static/model/alarmTrue.svg"
                        alt=""
                        class="icon-style"
                      />
                      <span style="float: right">连接</span>
                    </div>
                    <div v-else class="error-tag">
                      <image
                        src="/static/model/alarmFalse.svg"
                        alt=""
                        class="icon-style"
                      />
                      <span style="float: right">断开</span>
                    </div>
                  </u-col>
                  <u-col span="5">
                    <u--text class="timetext" :text="item.readTime"></u--text>
                  </u-col>
                </u-row>
                <view v-if="colums[TabCur + '_monitor'] != null">
                  <view
                    class="datacard"
                    v-for="(showitem, index) in colums[TabCur + '_monitor']"
                    :key="index"
                    v-show="
                      showitem.appShow == 1 &&
                      showitem.monitorcode != 'strinstallpos' &&
                      showitem.monitorcode != 'netStatus' &&
                      showitem.monitorcode != 'warnFlag' &&
                      showitem.monitorcode != 'readTime' &&
                      showitem.monitorcode != ''
                    "
                  >
                    <view
                      :class="TabCur"
                      style="padding-top: 10rpx; padding-bottom: 10rpx"
                    >
                      <view
                        v-if="
                          showitem.datatype == 1 &&
                          showitem.monitorcode == 'doorUse'
                        "
                        class="demo-layout bg-purple-light"
                        style="
                          margin-top: 10rpx;
                          color: #3787fe;
                          font-size: 30rpx;
                          margin-top: 5rpx;
                        "
                      >
                        {{
                          item[showitem.monitorcode] == "2"
                            ? "行人"
                            : item[showitem.monitorcode] == "1"
                            ? "行车"
                            : "-"
                        }}
                      </view>
                      <view
                        v-else-if="showitem.datatype == 1"
                        class="demo-layout bg-purple-light"
                        style="
                          margin-top: 10rpx;
                          color: #3787fe;
                          font-size: 30rpx;
                          margin-top: 5rpx;
                        "
                      >
                        {{
                          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="
                          color: #3787fe;
                          font-size: 30rpx;
                          margin-top: 5rpx;
                        "
                      >
                        {{
                          item.readData[showitem.monitorcode] == null ||
                          item.readData[showitem.monitorcode] == ""
                            ? "-"
                            : item.readData[showitem.monitorcode]
                        }}
                      </view>

                      <view
                        class="demo-layout bg-purple-light"
                        style="
                          margin-top: 6rpx;
                          color: #677799;
                          margin-bottom: 5rpx;
                        "
                      >
                        {{ showitem.des }}
                      </view>
                    </view>
                  </view>
                </view>
              </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";
export default {
  data() {
    return {
      menushow: false,
      TabCur: "gate",
      curlist: [],
      deviceList: {},
      colums: {},
      typeList: [], //详情页展示数据
    };
  },
  props: ["showColum", "deviceType"],
  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;
  },
  async mounted() {
    await this.loadData(this.TabCur);
    this.startTimer();
  },
  methods: {
    startTimer() {
      // 每隔一段时间执行某个操作
      this.timer = setInterval(async () => {
        // 执行定时任务
        await this.loadData(this.deviceType);
        console.log("定时任务执行中...");
      }, 5000);
    },
    stopTimer() {
      // 停止定时器
      clearInterval(this.timer);
    },
    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",
            filterParams: {},
          })
          .then((response) => {
            if (response.data.code == 200) {
              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
              this.curlist = this.deviceList[type];
              this.curlist.forEach((item) => {
                if (item.readData.frontGateOpen == 1) {
                  item.readData.frontGateOpen = "打开";
                } else {
                  item.readData.frontGateOpen = "关闭";
                }
                if (item.readData.midGateOpen == 1) {
                  item.readData.midGateOpen = "打开";
                } else {
                  item.readData.midGateOpen = "关闭";
                }
                if (item.readData.rearGateOpen == 1) {
                  item.readData.rearGateOpen = "打开";
                } else {
                  item.readData.rearGateOpen = "关闭";
                }
                if (item.readData.midGateOpen == 1) {
                  item.readData.midGateOpen = "打开";
                } else {
                  item.readData.midGateOpen = "关闭";
                }
              });
            } 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: "detail",
        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);
      this.getShowList(this.TabCur).then(() => {
        if (this.typeList.length > 0) {
          this.$destroy();
          uni.navigateTo({
            url: `/pages/home/detail/autodoor/autodoor${reqparams}`,
          });
        }
      });
    },
  },
  destroyed() {
    // 停止定时器
    this.stopTimer();
  },
};
</script>

<style>
.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: #333;
}
>>> .u-navbar--fixed {
  /* margin-top: 20px; */
}
.main {
  /* margin-top: 100rpx; */
  display: flex;
  flex-direction: column;
}

.card {
  background-color: #ffffff;
  margin: auto;
  margin-top: 20rpx;
  width: 10%;
  height: 280rpx;
  border: 1rpx solid #000000;
  border-radius: 20rpx;
}

.menupage {
  position: absolute;
  z-index: 2;
  width: 100%;
}

.timetext {
  text-align: right;
  float: right;
}

.itemback {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}

.datacard .content {
  width: 30rpx;
  height: 30rpx;
  left: 0rpx;
  top: 0rpx;
  position: absolute;
}

.datacard {
  border-radius: 10rpx;
  border: rgba(55, 135, 254, 0.28);
  width: 30%;
  margin: 1%;
  float: left;
  height: 105rpx;
  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)
  );
}

.datacard .gate {
  background: linear-gradient(
    to right,
    rgba(75, 135, 254, 0.08),
    rgba(24, 184, 255, 0.08),
    rgba(80, 161, 237, 0.08)
  );
}

.datacard .window {
  background: linear-gradient(
    to right,
    rgba(55, 125, 254, 0.08),
    rgba(4, 164, 255, 0.08),
    rgba(60, 131, 237, 0.08)
  );
}

.datacard .windrect {
  background: linear-gradient(
    to right,
    rgba(85, 125, 254, 0.08),
    rgba(34, 164, 255, 0.08),
    rgba(90, 131, 237, 0.08)
  );
}

.error-tag {
  border-radius: 10%;
  display: inline-block;
  color: #e90000;
  line-height: 50rpx;
  font-size: 14px;
  text-align: center;
  float: left;
  width: 180rpx;
  height: 50rpx;
  padding-right: 30rpx;
  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;
  margin-top: 10rpx;
  float: left;
  width: 120rpx;
  height: 50rpx;
  background-color: rgba(105, 105, 105, 0.2);
}

.success-tag {
  border-radius: 10%;
  color: #42c000;
  line-height: 25px;
  font-size: 14px;
  width: 60px;
  height: 26px;
  padding-right: 15px;
  background-color: rgba(226, 250, 214);
}

.icon-style {
  margin: 7px;
  width: 14px;
  height: 14px;
}

.title {
  margin-left: 40rpx;
  float: left;
  font-size: 28rpx;
  font-weight: 400;
}
</style>