Vent-App/pages/warndata/warndata.vue

<template>
  <view class="container">
    <u-navbar
      title="预警分析"
      :safeAreaInsetTop="false"
      style="margin-top: 30px"
      left-icon=""
    >
    </u-navbar>
    <view class="main">
      <view class="flcard">
        <text class="text-style">通风监测预警</text>
      </view>
      <view class="flcard">
        <view class="datacard demo-layout bg-purple-light">
          <view style="margin-top: 10rpx">
            <text class="text-style1">{{ windData.zongjinfeng }}</text>
          </view>
          <view style="margin-top: 10rpx">总进风量(m³/min):</view>
        </view>
        <view class="datacard demo-layout bg-purple-light">
          <view style="margin-top: 10rpx">
            <text class="text-style1">{{ windData.zonghuifeng }}</text>
          </view>
          <view style="margin-top: 10rpx">总回风量(m³/min):</view>
        </view>
        <view class="datacard demo-layout bg-purple-light">
          <view style="margin-top: 10rpx">
            <text class="text-style1">{{ xufengliang }}</text>
          </view>
          <view style="margin-top: 10rpx">总需风量(m³/min):</view>
        </view>
      </view>
      <view class="flcard">
        <text class="text-style">火灾监测预警</text>
      </view>
      <view class="flcard">
        <view class="firecontainer">
          <view class="title">
            <span class="firetext">外因火灾</span>
          </view>
          <view class="firecard"> </view>
        </view>
        <view class="firecontainer">
          <view class="title">
            <span class="firetext">内因火灾</span>
          </view>
          <view class="firecard"> </view>
        </view>
      </view>
      <view class="flcard">
        <text class="text-style">粉尘监测预警</text>
      </view>
      <view class="flcard">
        <text class="u-collapse-content"
          >众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text
        >
      </view>
      <view class="flcard">
        <text class="text-style">瓦斯监测预警</text>
      </view>
      <view class="flcard">
        <view class="firecontainer">
          <view class="title">
            <span class="firetext" v-if="gasDevice.length > 0">{{ gasDevice[0].systemname }}</span>
          </view>
          <view class="firecard"> </view>
        </view>
        <view class="firecontainer">
          <view class="title">
            <span class="firetext"	v-if="gasDevice.length > 0">{{ gasDevice[1].systemname }}</span>
          </view>
          <view class="firecard"> </view>
        </view>
      </view>
      <view class="flcard">
        <text class="text-style">设备监测预警</text>
      </view>
      <view class="flcard demo-layout bg-purple-light">
        <view class="deviceCard">
          <view
            class="item-container"
            v-for="(item, index) in devicekindData"
            :key="index"
          >
            <view class="item">
              <text style="margin-right: 10px">{{ item.name }}</text>
              <text>{{ item.status }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
export default {
  props: {},
  watch: {},
  data() {
    return {
      windData: [],
      devicekindData: [],
      fireData: [],
      gasData: [],
      gasDevice: [],
      xufengliang: "", //总需风量
    };
  },
  mounted() {
    this.getWranInfo();
  },
  methods: {
    //获取预警信息
    getWranInfo() {
      new Promise((resolve, reject) => {
        api
          .getWarnInfo()
          .then((response) => {
            if (response.data.code == 200) {
              this.windData = response.data.result.ventInfo;
              this.devicekindData = response.data.result.info.devicekindInfo;
              this.fireData = response.data.result.info.sysInfo.fireS;
              this.gasData = response.data.result.info.sysInfo.gasS;
              this.gasDevice = this.gasData.devices;
              console.log(this.gasDevice, "数据");
              this.xufengliang = this.windData.sysdata.xufengliang;
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
  },
};
</script>

<style scoped>
>>> .u-navbar--fixed {
  margin-top: 20px;
}
.main {
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
}
.text-style {
  font-weight: bold;
}
.flcard {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.datacard {
  width: 32.5%;
  margin: 1px;
  float: left;
  height: 100rpx;
  text-align: center;
  border-radius: 10px;
  background: url(/static/model/windM3.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
}
.datacard1 {
  width: 100%;
  margin: 2px;
  float: left;
  height: 200rpx;
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
}
.title {
  width: 100%;
  height: 50rpx;
  background: url(/static/warndata/title.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex; /* 将父级元素设置为 Flex 容器 */
  align-items: center; /* 垂直居中子元素 */
}
.firecard {
  width: 100%;
  margin: 1px;
  float: left;
  height: 100rpx;
  text-align: center;
  border-radius: 10px;
  margin-top: 10px;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
  background-repeat: repeat;
}
.deviceCard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 10rpx;
}

.item-container {
  height: 100px;
  background-image: url(/static/warndata/window.png);
  background-size: 100% 60%;
  background-repeat: no-repeat;
}
.item {
  margin-left: 70px;
  margin-top: 36px;
}
.firetext {
  margin: 20px;
}
.text-style1 {
  color: #3787fe;
  font-size: large;
}
.firecontainer {
  margin-top: 10px;
}
</style>