Vent-App/pages/warndata/warndata.vue

<template>
  <view class="container">
    <u-navbar
      :title="titleName"
      :bgStatusImage="backPic0"
      :bgImage="backPic"
      :safeAreaInsetTop="true"
      left-icon=""
      @leftClick="menuShow"
    >
      <view class="u-nav-slot" slot="left" v-if="!isShowDetail">
        <u-icon name="arrow-left" size="20"> </u-icon>
      </view>
    </u-navbar>

    <view class="menupage">
      <view class="main" v-if="isShowDetail">
        <view class="flcard" v-if="isShow1">
          <view class="typeBar">
            <view class="icon-vent">
              <text class="text-style">通风监测预警</text>
            </view>
            <u-icon @click="toggleIsShow1" name="arrow-up-fill"></u-icon>
          </view>
        </view>
        <view class="flcard" v-else>
          <view class="typeBar">
            <text class="text-style">通风监测预警</text>
            <u-icon @click="toggleIsShow1" name="arrow-down-fill"></u-icon>
          </view>
        </view>
        <view class="flcard" @click="getDetail('vent')" v-show="isShow1">
          <view class="datacard demo-layout bg-purple-light">
            <view style="margin-top: 10rpx">
              <text class="text-style1">{{ windData.zongjinfeng }}</text>
            </view>
            <view class="nameStyle" style="margin-top: 10rpx; margin-left: 5px"
              >总进风量(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 class="nameStyle" style="margin-top: 10rpx; margin-left: 5px"
              >总回风量(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 class="nameStyle" style="margin-top: 10rpx; margin-left: 5px"
              >总需风量(m³/min)</view
            >
          </view>
        </view>
        <view class="flcard" v-if="isShow2">
          <view class="typeBar">
            <view class="icon-vent">
              <text class="text-style">火灾监测预警</text>
            </view>
            <u-icon @click="toggleIsShow2" name="arrow-up-fill"></u-icon>
          </view>
        </view>
        <view class="flcard" v-else>
          <view class="typeBar">
            <text class="text-style">火灾监测预警</text>
            <u-icon @click="toggleIsShow2" name="arrow-down-fill"></u-icon>
          </view>
        </view>
        <view class="flcard" v-show="isShow2" @click="getDetail('fire')">
          <view class="firecontainer">
            <view class="title">
              <span class="firetext">内因火灾</span>
            </view>
            <view class="fire-style">
              <view
                v-for="(item, index) in internalInfo"
                :key="index"
                class="fire-item1"
                v-if="item && Object.keys(item).length > 0"
              >
                <view class="firecard">
                  <text
                    :class="
                      item.Maxlevel > 0 ? 'red-text-style' : 'text-style1'
                    "
                    >{{ item.value
                    }}{{
                      item.code === "o2val" ||
                      item.code === "co2val" ||
                      item.code === "ch4val" ||
                      item.code === "smokeval"
                        ? "(%)"
                        : item.code === "fmax" ||
                          item.code === "temperature" ||
                          item.code === "fireval"
                        ? "(℃)"
                        : "(ppm)"
                    }}
                  </text>
                  <view class="nameStyle" style="margin-top: 10rpx">{{
                    item.monitorcode
                  }}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="firecontainer">
            <view class="title">
              <span class="firetext">外因火灾</span>
            </view>
            <view class="fire-style">
              <view
                v-for="(item, index) in externalInfo"
                :key="index"
                class="fire-item1"
              >
                <view class="firecard">
                  <text
                    :class="
                      item.Maxlevel > 0 ? 'red-text-style' : 'text-style1'
                    "
                    >{{ item.value
                    }}{{
                      item.code === "o2val" ||
                      item.code === "co2val" ||
                      item.code === "ch4val" ||
                      item.code === "smokeval"
                        ? "(%)"
                        : item.code === "fmax" ||
                          item.code === "temperature" ||
                          item.code === "fireval"
                        ? "(℃)"
                        : "(ppm)"
                    }}
                  </text>
                  <view class="nameStyle" style="margin-top: 10rpx">{{
                    item.monitorcode
                  }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="flcard" v-if="isShow3">
          <view class="typeBar">
            <view class="icon-vent">
              <text class="text-style">粉尘监测预警</text>
            </view>
            <u-icon @click="toggleIsShow3" name="arrow-up-fill"></u-icon>
          </view>
        </view>
        <view class="flcard" v-else>
          <view class="typeBar">
            <text class="text-style">粉尘监测预警</text>
            <u-icon @click="toggleIsShow3" name="arrow-down-fill"></u-icon>
          </view>
        </view>
        <view class="flcard" v-show="isShow3" @click="getDetail('dust')">
          <view style="display: flex">
            <view class="dustcard">
              <view class="demo-layout bg-purple-light">
                <view style="margin-top: 10rpx">
                  <text class="text-style1">{{ dustTotalcount }}</text>
                </view>
                <view class="nameStyle" style="margin: 10rpx">测点数量</view>
              </view>
              <view class="dust-right"> </view>
            </view>
            <view class="dustcard">
              <view class="demo-layout bg-purple-light">
                <view style="margin-top: 10rpx">
                  <text class="text-style1">{{ dustLevelstatus }}</text>
                </view>
                <view class="nameStyle" style="margin: 10rpx">当前状态</view>
              </view>
              <view class="dust-right"> </view>
            </view>
          </view>
        </view>

        <view class="flcard" v-if="isShow4">
          <view class="typeBar">
            <view class="icon-vent">
              <text class="text-style">瓦斯监测预警</text>
            </view>
            <u-icon @click="toggleIsShow4" name="arrow-up-fill"></u-icon>
          </view>
        </view>
        <view class="flcard" v-else>
          <view class="typeBar">
            <text class="text-style">瓦斯监测预警</text>
            <u-icon @click="toggleIsShow4" name="arrow-down-fill"></u-icon>
          </view>
        </view>
        <view class="flcard" v-show="isShow4" @click="getDetail('gas')">
          <view class="firecontainer">
            <view class="title">
              <span class="firetext" v-if="gasDevice.length > 0"
                >安全监测系统监测点</span
              >
            </view>
          </view>
          <view class="safe-container">
            <view
              class="safecard"
              v-for="(item, index) in gasDevice"
              :key="index"
            >
              <view class="left" style="margin-top: 20rpx; float: left">
                <text class="text-style1">{{ item.gasNumber }}</text>
                <view class="nameStyle" style="margin: 10rpx">{{
                  item.systemname
                }}</view>
              </view>
              <view class="right"> </view>
            </view>
          </view>
          <view class="firecontainer">
            <view class="title">
              <span class="firetext" v-if="gasDevice.length > 0"
                >瓦斯抽采系统监测点</span
              >
            </view>
            <view class="gascontainer">
              <view
                class="gascard"
                v-for="(item, index) in gasDevice"
                :key="index"
              >
                <view class="left" style="margin-top: 20rpx; float: left">
                  <text class="text-style1">{{ item.pumpNumber }}</text>
                  <view class="nameStyle" style="margin: 10rpx">{{
                    item.systemname
                  }}</view>
                </view>
                <view class="gas-right"> </view>
              </view>
            </view>
          </view>
        </view>
        <view class="flcard" v-if="isShow5">
          <view class="typeBar">
            <view class="icon-vent">
              <text class="text-style">设备监测预警</text>
            </view>
            <u-icon @click="toggleIsShow5" name="arrow-up-fill"></u-icon>
          </view>
        </view>
        <view class="flcard" v-else>
          <view class="typeBar">
            <text class="text-style">设备监测预警</text>
            <u-icon @click="toggleIsShow5" name="arrow-down-fill"></u-icon>
          </view>
        </view>
        <view
          class="flcard demo-layout bg-purple-light"
          v-show="isShow5"
          @click="getDetail('device')"
        >
          <view class="deviceCard">
            <view
              class="item-container"
              v-for="(item, index) in devicekindData"
              :key="index"
            >
              <view
                class="item"
                :style="{ backgroundImage: itemBackground(item) }"
              >
                <view class="deviceItem">
                  <text class="nameStyle" style="margin-right: 10px">{{
                    item.name
                  }}</text>
                  <text style="font-weight: bold">{{ item.status }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="main" v-else>
        <ventDetail v-if="Type == 'vent'"></ventDetail>
        <deviceDetail v-if="Type == 'device'"></deviceDetail>
        <fireDetail v-if="Type == 'fire'"></fireDetail>
        <dustDetail v-if="Type == 'dust'"></dustDetail>
        <gasDetail v-if="Type == 'gas'"></gasDetail>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import ventDetail from "./components/vent-detail.vue";
import deviceDetail from "./components/device-detail.vue";
import fireDetail from "./components/fire-detail.vue";
import dustDetail from "./components/dust-detail.vue";
import gasDetail from "./components/gas-detail.vue";

export default {
  props: {},
  watch: {},
  data() {
    return {
      backPic0: "url(/static/topnavbar0.png)",
      backPic: "url(../../static/topnavbar.png)",
      titleName: "预警分析",
      isShowDetail: true,
      detailComponent: null,
      windData: {},
      devicekindData: [],
      fireData: [],
      gasData: [],
      dustData: [],
      dustTotalcount: 0,
      dustLevelstatus: "",
      gasDevice: [],
      externalInfo: [],
      internalInfo: [],
      xufengliang: "", //总需风量
      imageMap: {
        atomizing: "atomizing.png",
        ballvalve: "ballvalve.png",
        dedustefan: "dedustefan.png",
        drilling: "drilling.png",
        dustdev: "dustdev.png",
        fanlocal: "fanlocal.png",
        fanmain: "fanmain.png",
        forcFan: "forcFan.png",
        gasmonitor: "gasmonitor.png",
        gate: "gate.png",
        location: "location.png",
        nitrogen: "nitrogen.png",
        pulping: "pulping.png",
        pump: "pump.png",
        rebroadcast: "rebroadcast.png",
        safetymonitor: "safetymonitor.png",
        spary: "spary.png",
        unit: "unit.png",
        window: "window.png",
        windrect: "windrect.png",
        wintest: "wintest.png",
      },
      dustMap: {
        alarm: "报警",
        blue: "低风险",
        orange: "重大风险",
        red: "较大风险",
        yellow: "一般风险",
      },
      isShow1: true,
      isShow2: true,
      isShow3: false,
      isShow4: false,
      isShow5: false,
      Type: "", // 当前点击的类型
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getWarnInfo();
    });
  },
  components: {
    ventDetail,
    deviceDetail,
    fireDetail,
    dustDetail,
    gasDetail,
  },
  methods: {
    //获取预警信息
    getWarnInfo() {
      return 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;
              const externalInfo1 = this.fireData.summaryInfo.external;
              const internalInfo1 = this.fireData.summaryInfo.internal;
              for (let key in externalInfo1) {
                if (!externalInfo1.hasOwnProperty(key)) continue;
                const item = externalInfo1[key];
                // 跳过空对象（如 ch4val: {}）
                if (Object.keys(item).length === 0) continue;
                if (item.code == "coval") {
                  item.monitorcode = "一氧化碳";
                } else if (item.code == "ch4val") {
                  item.monitorcode = "甲烷";
                } else if (item.code == "o2val") {
                  item.monitorcode = "氧气";
                } else if (item.code == "co2val") {
                  item.monitorcode = "二氧化碳";
                } else if (item.code == "fmax") {
                  item.monitorcode = "温度";
                } else if (item.code == "chval") {
                  item.monitorcode = "乙炔";
                } else if (item.code == "ch2val") {
                  item.monitorcode = "乙烯";
                } else if (item.code == "temperature") {
                  item.monitorcode = "温度";
                } else if (item.code == "gasval") {
                  item.monitorcode = "瓦斯";
                } else if (item.code == "fireval") {
                  item.monitorcode = "温度";
                } else if (item.code == "smokeval") {
                  item.monitorcode = "烟雾";
                }
              }
              for (let key in internalInfo1) {
                if (!internalInfo1.hasOwnProperty(key)) continue;
                const item = internalInfo1[key];
                // 跳过空对象（如 ch4val: {}）
                if (Object.keys(item).length === 0) continue;
                if (item.code == "coval") {
                  item.monitorcode = "一氧化碳";
                } else if (item.code == "ch4val") {
                  item.monitorcode = "甲烷";
                } else if (item.code == "o2val") {
                  item.monitorcode = "氧气";
                } else if (item.code == "co2val") {
                  item.monitorcode = "二氧化碳";
                } else if (item.code == "chval") {
                  item.monitorcode = "乙炔";
                } else if (item.code == "ch2val") {
                  item.monitorcode = "乙烯";
                } else if (item.code == "fmax") {
                  item.monitorcode = "温度";
                } else if (item.code == "temperature") {
                  item.monitorcode = "温度";
                } else if (item.code == "gasval") {
                  item.monitorcode = "瓦斯";
                } else if (item.code == "fireval") {
                  item.monitorcode = "温度";
                } else if (item.code == "smokeval") {
                  item.monitorcode = "烟雾";
                }
              }
              this.externalInfo = externalInfo1;
              this.internalInfo = internalInfo1;
              this.gasData = response.data.result.info.sysInfo.gasS;
              this.gasDevice = this.gasData.devices;
              this.xufengliang = this.windData.sysdata.xufengliang;
              this.dustTotalcount =
                response.data.result.info.devicekindInfo.dusting.totalcount;
              this.dustLevelstatus =
                response.data.result.info.devicekindInfo.dusting.levelstatus;
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //返回监测首页
    menuShow() {
      this.isShowDetail = true;
    },
    //跳转监测详情
    getDetail(data) {
      this.isShowDetail = false;
      this.Type = data; // 将当前点击的类型存储到 Type 中
    },
    toggleIsShow1() {
      this.isShow1 = !this.isShow1; // 切换 isShow 的值
    },
    toggleIsShow2() {
      this.isShow2 = !this.isShow2; // 切换 isShow 的值
    },
    toggleIsShow3() {
      this.isShow3 = !this.isShow3; // 切换 isShow 的值
    },
    toggleIsShow4() {
      this.isShow4 = !this.isShow4; // 切换 isShow 的值
    },
    toggleIsShow5() {
      this.isShow5 = !this.isShow5; // 切换 isShow 的值
    },
  },
  computed: {
    itemBackground() {
      return (item) => {
        const defaultImage = "unit.png";
        const imageName = this.imageMap[item.code] || defaultImage;
        return `url('/static/warndata/${imageName}')`;
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.nameStyle {
  color: #7484a4;
  font-size: 15px;
}
.container {
  display: flex;
  flex-direction: column;
}

.main {
  margin-top: 90px;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  background: #f1f5f6;
  /* 内容区域顶部留出导航栏的高度 */
}

.text-style {
  font-weight: bold;
}

.flcard {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}

.datacard {
  width: 32.5%;
  margin: 1px;
  float: left;
  height: 74px;
  line-height: 27px;
  border-radius: 5px;
  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)
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right;
}
.dustcard {
  width: 47%;
  border-radius: 10px;
  margin: 10px;
  display: flex;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
  flex-direction: row;
  justify-content: space-between;
}
.dust-right {
  margin-right: 10px;
  width: 60px;
  height: 60px;
  background: url(/static/warndata/dust.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.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 {
  position: relative;
  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%;
  padding: 10px;
  float: left;
  text-align: center;
  border-radius: 10px;
}

.deviceCard {
  margin-top: 10rpx;
}

.item {
  position: relative;
  width: 100%;
  height: 80px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.deviceItem {
  position: absolute;
  width: 76%;
  top: 76%;
  left: 63%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.firetext {
  margin: 20px;
}

.text-style1 {
  color: #3787fe;
  font-weight: bold;
  font-size: 17px;
  margin-left: 5px;
}

.red-text-style1 {
  color: #ff0000;
  font-weight: bold;
  font-size: 16px;
}

.firecontainer {
  margin-top: 10px;
}

.fire-style {
  display: flex;
  flex-wrap: wrap;
}

.fire-item1 {
  width: 45%;
  margin: 16rpx;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08)
  );
}

.gascontainer {
  display: flex;
}

.gascard {
  width: 47%;
  border-radius: 10px;
  margin: 10px;
  display: flex;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
  flex-direction: row;
  justify-content: space-between;
}
.gas-right {
  margin-right: 10px;
  width: 60px;
  height: 60px;
  background: url(/static/warndata/gas.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.safecard {
  width: 47%;
  border-radius: 10px;
  margin: 10px;
  display: flex;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
  flex-direction: row;
  justify-content: space-between;
}
.safe-container {
  display: flex;
  width: 100%;
  height: 70px;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.right {
  margin-right: 10px;
  width: 60px;
  height: 60px;
  background: url(/static/warndata/safety.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.icon-style {
  margin-right: 8px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
}

.typeBar {
  display: flex;
  justify-content: space-between;

  .icon-vent {
    display: flex;

    .u-icon--right {
      margin: 0px 5px;
    }
  }
}
</style>