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>
                <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="6">
                    <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" @click="toggleWarn()">
                      <image
                        v-show="!isWarnVisible"
                        src="/static/model/alarmFalse.svg"
                        alt=""
                        class="icon-style"
                      />
                      <span
                        v-show="isWarnVisible"
                        style="text-overflow: ellipsis; text-algin: center"
                        >{{ item.warnDes }}</span
                      >
                    </div>
                  </u-col>
                  <u-col span="3">
                    <u--text class="timetext" :text="item.readTime"></u--text>
                  </u-col>
                </u-row>
                <view v-if="TabCur != 'fanmain' && TabCur != 'fanlocal'">
                  <div @tap="openNewPage(item)">
                    <view
                      class="datacard"
                      v-for="(showitem, index) in deviceShowList"
                      :key="index"
                      v-show="
                        showitem.appShow == 1 &&
                        showitem.monitorcode != 'strinstallpos' &&
                        showitem.monitorcode != 'netStatus' &&
                        showitem.monitorcode != 'warnFlag' &&
                        showitem.monitorcode != 'readTime'
                      "
                    >
                      <view
                        :class="TabCur"
                        style="
                          padding-top: 10rpx;
                          padding-bottom: 10rpx;
                          display: flex;
                          flex-direction: column;
                          align-items: center;
                          height: 100%;
                        "
                      >
                        <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: 20rpx;
                          "
                        >
                          {{
                            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: 20rpx;
                          "
                        >
                          {{
                            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: 20rpx;
                          "
                        >
                          {{
                            item.readData[showitem.monitorcode] == null ||
                            item.readData[showitem.monitorcode] == ""
                              ? "-"
                              : item.readData[showitem.monitorcode]
                          }}
                        </view>

                        <view
                          class="demo-layout bg-purple-light"
                          style="
                            margin-top: 20rpx;
                            color: #677799;
                            margin-top: 20rpx;
                          "
                        >
                          {{ showitem.des }}
                        </view>
                      </view>
                    </view>
                  </div>
                </view>

                <div class="fanContent" @tap="openNewPage(item)" v-else>
                  <div class="top">
                    <view>主机</view>
                    <view
                      class="datacard"
                      v-for="(showitem, index) in deviceShowList"
                      :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;
                          display: flex;
                          flex-direction: column;
                          align-items: center;
                          height: 100%;
                        "
                      >
                        <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: 20rpx;
                          "
                        >
                          {{
                            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: 20rpx;
                          "
                        >
                          {{
                            item[
                              showitem.monitorcode.startsWith("Fan")
                                ? showitem.monitorcode.replace(/^Fan/, "Fan1")
                                : showitem.monitorcode
                            ] !== undefined &&
                            item[
                              showitem.monitorcode.startsWith("Fan")
                                ? showitem.monitorcode.replace(/^Fan/, "Fan1")
                                : showitem.monitorcode
                            ] !== null
                              ? item[
                                  showitem.monitorcode.startsWith("Fan")
                                    ? showitem.monitorcode.replace(
                                        /^Fan/,
                                        "Fan1"
                                      )
                                    : showitem.monitorcode
                                ]
                              : "-"
                          }}
                        </view>
                        <view
                          v-else-if="showitem.datatype == 2"
                          class="demo-layout bg-purple-light"
                          style="
                            color: #3787fe;
                            font-size: 30rpx;
                            margin-top: 20rpx;
                          "
                        >
                          {{
                            item.readData[
                              showitem.monitorcode.startsWith("Fan")
                                ? showitem.monitorcode.replace(/^Fan/, "Fan1")
                                : showitem.monitorcode
                            ] !== undefined &&
                            item.readData[
                              showitem.monitorcode.startsWith("Fan")
                                ? showitem.monitorcode.replace(/^Fan/, "Fan1")
                                : showitem.monitorcode
                            ] !== null
                              ? item.readData[
                                  showitem.monitorcode.startsWith("Fan")
                                    ? showitem.monitorcode.replace(
                                        /^Fan/,
                                        "Fan1"
                                      )
                                    : showitem.monitorcode
                                ]
                              : "-"
                          }}
                        </view>

                        <view
                          class="demo-layout bg-purple-light"
                          style="
                            margin-top: 20rpx;
                            color: #677799;
                            margin-top: 20rpx;
                          "
                        >
                          {{ showitem.des }}
                        </view>
                      </view>
                    </view>
                  </div>
                  <div class="bottom">
                    <view>备机</view>
                    <view
                      class="datacard"
                      v-for="(showitem, index) in deviceShowList"
                      :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;
                          display: flex;
                          flex-direction: column;
                          align-items: center;
                          height: 100%;
                        "
                      >
                        <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: 20rpx;
                          "
                        >
                          {{
                            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: 20rpx;
                          "
                        >
                          {{
                            item[
                              showitem.monitorcode.startsWith("Fan")
                                ? showitem.monitorcode.replace(/^Fan/, "Fan2")
                                : showitem.monitorcode
                            ] !== undefined &&
                            item[
                              showitem.monitorcode.startsWith("Fan")
                                ? showitem.monitorcode.replace(/^Fan/, "Fan2")
                                : showitem.monitorcode
                            ] !== null
                              ? item[
                                  showitem.monitorcode.startsWith("Fan")
                                    ? showitem.monitorcode.replace(
                                        /^Fan/,
                                        "Fan2"
                                      )
                                    : showitem.monitorcode
                                ]
                              : "-"
                          }}
                        </view>
                        <view
                          v-else-if="showitem.datatype == 2"
                          class="demo-layout bg-purple-light"
                          style="
                            color: #3787fe;
                            font-size: 30rpx;
                            margin-top: 20rpx;
                          "
                        >
                          {{
                            item.readData[
                              showitem.monitorcode.startsWith("Fan")
                                ? showitem.monitorcode.replace(/^Fan/, "Fan2")
                                : showitem.monitorcode
                            ] !== undefined &&
                            item.readData[
                              showitem.monitorcode.startsWith("Fan")
                                ? showitem.monitorcode.replace(/^Fan/, "Fan2")
                                : showitem.monitorcode
                            ] !== null
                              ? item.readData[
                                  showitem.monitorcode.startsWith("Fan")
                                    ? showitem.monitorcode.replace(
                                        /^Fan/,
                                        "Fan2"
                                      )
                                    : showitem.monitorcode
                                ]
                              : "-"
                          }}
                        </view>

                        <view
                          class="demo-layout bg-purple-light"
                          style="
                            margin-top: 20rpx;
                            color: #677799;
                            margin-top: 20rpx;
                          "
                        >
                          {{ showitem.des }}
                        </view>
                      </view>
                    </view>
                  </div>
                </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 { computed } from "vue";
export default {
  data() {
    return {
      menushow: false,
      TabCur: "gate",
      curlist: [],
      deviceList: {},
      colums: {},
      typeList: [], //详情页展示数据
      deviceShowList: [], //设备展示字段
      isWarnVisible: false,
    };
  },
  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;
    const key = this.TabCur + "_monitor";
    this.deviceShowList = this.colums[key];
    this.loadData("gate");
  },
  async mounted() {
    await this.loadData(this.TabCur);
    this.startTimer();
  },
  methods: {
    toggleWarn() {
      console.log("测试");
      this.isWarnVisible = !this.isWarnVisible;
    },
    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",
          })
          .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}`,
          });
        }
      });
      //   this.$destroy();
      //   uni.navigateTo({
      //     url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
      //   });
      // },
    },
  },
  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;
}
.fanContent {
  display: flex;
  flex-direction: column;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.top,
.bottom {
  flex: 1; /* 各占 50% */
}
.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: 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)
  );
}

.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;
  width: 240rpx;
  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;
  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>