Vent-App/pages/warndata/warndata.vue

<template name="warndata">
  <view class="container">
    <u-navbar
      title="预警分析"
      :safeAreaInsetTop="false"
      style="margin-top: 30px"
      leftIcon=""
    >
    </u-navbar>
    <view class="main">
      <u-collapse @change="change" @close="close" @open="open">
        <u-collapse-item
          title="通风监测预警"
          name="wind"
          class="text-style flcard"
        >
          <view class="">
            <view class="datacard demo-layout bg-purple-light">
              <view style="margin-top: 10rpx">
                <text class="text-style">{{ 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-style">{{ 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-style">{{
                  windData.sysdata.xufengliang
                }}</text>
              </view>
              <view style="margin-top: 10rpx">总需风量(m³/min):</view>
            </view>
            <!-- <view class="datacard1 demo-layout bg-purple-light">
				<view style="margin-top: 10rpx">
				  <text class="text-style">aaaaaaaaaaaaa</text>
				</view>
				<view style="margin-top: 10rpx">测试:</view>
			</view> -->
          </view>
        </u-collapse-item>
        <u-collapse-item
          title="设备监测预警"
          name="device"
          class="text-style flcard"
        >
          <view class="demo-layout bg-purple-light">
            <view style="margin-top: 10rpx">
              <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>
        </u-collapse-item>
        <u-collapse-item
          title="火灾监测预警"
          name="fire"
          class="text-style 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>
        </u-collapse-item>
        <u-collapse-item
          title="粉尘监测预警"
          name="dust"
          class="text-style flcard"
        >
          <text class="u-collapse-content"
            >众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text
          >
        </u-collapse-item>
        <u-collapse-item
          title="瓦斯监测预警"
          name="gas"
          class="text-style flcard"
        >
          <view class="firecontainer">
            <view class="title">
              <span class="firetext">{{ gasData.devices[0].systemname }}</span>
            </view>
            <view class="firecard"> </view>
          </view>
          <view class="firecontainer">
            <view class="title">
              <span class="firetext">{{ gasData.devices[1].systemname }}</span>
            </view>
            <view class="firecard"> </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
  </view>
</template>

<script>
import { log } from "../../plugin/uni-simple-router/helpers/warn";
import api from "@/api/api";
export default {
  name: "warndata",
  props: {
    cur: String,
  },
  watch: {},
  data() {
    return {
      windData: [],
      devicekindData: [],
      fireData: [],
      gasData: [],
    };
  },
  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;
            } 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 {
  margin-top: 20rpx;
  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);
}

.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-style {
  color: #3787fe;
  font-size: large;
}
.firecontainer {
  margin-top: 10px;
}
</style>