Vent-App/pages/home/firstmodel.vue

<template>
  <view class="container">
    <!-- 建议放在外层 -->
    <u-navbar
      title="设备监测"
      @leftClick="devicemenuShow"
      :safeAreaInsetTop="false"
    >
      <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-show="!menushow" class="main">
      <view class="u-page">
        <u-list>
          <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">
                  <img
                    style="position: absolute; width: 35rpx; height: 35rpx"
                    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">
                    <img
                      src="'../../../../static/model/connectFalse.svg "
                      alt=""
                      class="icon-style"
                    />
                    <span style="float: right">断开</span>
                  </div>
                  <div v-else class="success-tag">
                    <img
                      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">
                    <img
                      src="'../../../../static/model/alarmTrue.svg "
                      alt=""
                      class="icon-style"
                    />
                    <span style="float: right">{{ item.warnLevel_str }}</span>
                  </div>
                  <div v-else class="error-tag">
                    <img
                      src="'../../../../static/model/alarmFalse.svg "
                      alt=""
                      class="icon-style"
                    />
                    <span style="float: right">{{ item.warnDes }}</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>
        </u-list>
      </view>
    </view>
  </view>
</template>

<script>
import DeviceMenu from "./devicemenu/devicemenu.vue";
import api from "@/api/api";
export default {
  data() {
    return {
      menushow: false,
      TabCur: "gate",
      curlist: [],
      deviceList: {},
      scrollLeft: 0,
      currentTab: 0,
      colums: {},
    };
  },
  components: {
    DeviceMenu,
  },
  props: ["showColum"],
  watch: {
    showColum(data) {
      this.colums = data;
      console.log(this.colums);
    },
  },
  created() {
    this.colums = this.showColum;
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      // 每隔一段时间执行某个操作
      this.timer = setInterval(() => {
        // 执行定时任务
        this.loadData(this.TabCur);
        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) {
      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);
          });
      });
    },
    tabSelect(e) {
      this.currentTab = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
    },
    devicemenuShow(e) {
      this.menushow = !this.menushow;
    },
    menuClick(id) {
      this.TabCur = id;
      // 显示该分类的数据
      this.curlist = this.deviceList[this.TabCur];

      if (this.curlist == null) {
        this.curlist = [];
      }
      // 选择设备分类，重新获取数据
      this.loadData(this.TabCur);
      this.menushow = false;
    },
    openNewPage(params) {
      this.$destroy();
      uni.navigateTo({
        url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
      });
    },
  },
  destroyed() {
    // 停止定时器
    this.stopTimer();
  },
};
</script>

<style>
.top-nav {
  height: 100rpx;
  line-height: 100rpx;
  background-color: #2aa9f3;
  color: #daaaa;
}

.top-nav2 {
  background-color: #ffffff;
}

.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;
  top: 40rpx;
  height: calc(100% - 40rpx);
  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: 50rpx;
  font-size: 14px;
  width: 120rpx;
  height: 50rpx;
  padding-right: 30rpx;
  background-color: rgba(226, 250, 214);
}

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

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