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">
                  <u--text :text="item.strinstallpos"></u--text>
                </u-col>
              </u-row>
              <u-row gutter="5" customStyle="margin-bottom: 10px">
                <u-col span="2" style="margin-right: 15rpx">
                  <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="2">
                  <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.warnLevel_str }}</span>
                  </div>
                </u-col>
                <u-col span="3"> </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']"
                  v-show="showitem.appShow == 1"
                >
                  <view
                    class="content"
                    :style="{
                      backgroundImage:
                        showitem.monitorcode === 'frontRearDP' ||
                        showitem.monitorcode === 'frontRearDifference'
                          ? 'url(\'../../../../static/model/Pa.png\')'
                          : showitem.monitorcode === 'sourcePressure'
                          ? 'url(\'../../../../static/model/MPa.png\')'
                          : showitem.monitorcode === 'frontGateOpen'
                          ? 'url(\'../../../../static/model/doorNet.png\')'
                          : showitem.monitorcode === 'rearGateOpen'
                          ? 'url(\'../../../../static/model/doorNet.png\')'
                          : showitem.monitorcode === 'warnFlag'
                          ? 'url(\'../../../../static/model/9432.png\')'
                          : showitem.monitorcode === 'netStatus'
                          ? 'url(\'../../../../static/model/9431.png\')'
                          : showitem.monitorcode === 'm3'
                          ? 'url(\'../../../../static/model/windM3.png\')'
                          : showitem.monitorcode === 'fsectarea'
                          ? 'url(\'../../../../static/model/duanArea.png\')'
                          : showitem.monitorcode === 'incipientWindSpeed1' ||
                            showitem.monitorcode === 'incipientWindSpeed2' ||
                            showitem.monitorcode === 'incipientWindSpeed3' ||
                            showitem.monitorcode === 'va'
                          ? 'url(\'../../../../static/model/fengsu.png\')'
                          : 'url(\'\')',
                      backgroundSize: '100% 100%',
                    }"
                  >
                    <view
                      v-show="
                        showitem.monitorcode != 'strinstallpos' &&
                        showitem.monitorcode != 'netStatus' &&
                        showitem.monitorcode != 'warnFlag' &&
                        showitem.monitorcode != 'readTime' &&
                        showitem.monitorcode != ''
                      "
                    >
                      <view
                        v-if="showitem.datatype == 1"
                        class="demo-layout bg-purple-light"
                        style="margin-top: 10rpx; color: #3787fe"
                        >{{ item[showitem.monitorcode] }}</view
                      >
                      <view
                        v-if="showitem.datatype == 2"
                        class="demo-layout bg-purple-light"
                        style="color: #3787fe"
                        >{{ item.readData[showitem.monitorcode] }}</view
                      >
                      <view
                        class="demo-layout bg-purple-light"
                        style="margin-top: 10px; color: #677799"
                        >{{ showitem.des }}</view
                      >
                    </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);
    },
    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.rearGateOpen == 1) {
                  item.readData.rearGateOpen = "打开";
                } else {
                  item.readData.rearGateOpen = "关闭";
                }
              });
            } 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 = true;
    },
    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: 90%;
  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 {
  width: 30%;
  margin: 1%;
  float: left;
  height: 100rpx;
  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)
  );
}
.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: #42c000;
  line-height: 50rpx;
  font-size: 14px;
  width: 120rpx;
  height: 50rpx;
  display: inline-block;
  background-color: rgba(226, 250, 214);
}
.icon-style {
  margin: 15rpx;
  width: 14px;
  height: 14px;
}
</style>