Vent-App/pages/warndata/warndata.vue

<template>
  <view class="container">
    <u-navbar
      :title="titleName"
      :safeAreaInsetTop="true"
      :fixed="true"
      height="50px"
      bgColor="transparent"
      titleStyle="fw600 fs-18"
      leftIconColor="#303133"
      @leftClick="onLeftClick"
    >
      <view class="u-nav-slot" slot="left">
        <u-icon name="arrow-left" size="20" color="#303133"></u-icon>
      </view>
    </u-navbar>

    <view class="menupage">
      <view class="main" v-if="isShowDetail">
        <view class="warn-list">
          <!-- 通风监测预警 -->
          <view class="warn-section vent-section">
            <view class="vent-card">
              <view class="vent-card-header" @click.stop="toggleIsShow1">
                <text class="warn-card-title">通风监测预警</text>
                <view class="warn-card-action">
                  <text class="warn-action-text">{{
                    isShow1 ? "收起" : "展开"
                  }}</text>
                  <u-icon
                    :name="isShow1 ? 'arrow-up' : 'arrow-down'"
                    color="#1890ff"
                    size="14"
                  ></u-icon>
                </view>
              </view>
              <view v-show="isShow1">
                <view class="vent-card-divider"></view>
                <view class="vent-card-content" @click="getDetail('vent')">
                  <view class="vent-metrics-row">
                    <view class="vent-metric-card">
                      <text class="vent-metric-value">{{
                        windData.zongjinfeng || "--"
                      }}</text>
                      <text class="vent-metric-label">总进风量(m³/min)</text>
                    </view>
                    <view class="vent-metric-card">
                      <text class="vent-metric-value">{{
                        windData.zonghuifeng || "--"
                      }}</text>
                      <text class="vent-metric-label">总回风量(m³/min)</text>
                    </view>
                    <view class="vent-metric-card">
                      <text class="vent-metric-value">{{
                        xufengliang || "--"
                      }}</text>
                      <text class="vent-metric-label">总需风量(m³/min)</text>
                    </view>
                  </view>
                  <view class="vent-risk-panel">
                    <view
                      class="vent-risk-item"
                      v-for="(risk, rIndex) in ventRiskList"
                      :key="rIndex"
                    >
                      <view
                        class="risk-icon"
                        :style="{ background: risk.color }"
                      >
                        <u-icon
                          name="error-circle-fill"
                          color="#ffffff"
                          size="12"
                        ></u-icon>
                      </view>
                      <text class="risk-text"
                        >{{ risk.label }}: {{ risk.value }}</text
                      >
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 设备监测预警 -->
          <view class="warn-section device-section">
            <view class="device-card">
              <view class="device-card-header" @click.stop="toggleIsShow5">
                <text class="warn-card-title">设备监测预警</text>
                <view class="warn-card-action">
                  <text class="warn-action-text">{{
                    isShow5 ? "收起" : "展开"
                  }}</text>
                  <u-icon
                    :name="isShow5 ? 'arrow-up' : 'arrow-down'"
                    color="#2b7cff"
                    size="14"
                  ></u-icon>
                </view>
              </view>
              <view v-show="isShow5">
                <view class="device-card-divider"></view>
                <view class="device-card-content" @click="getDetail('device')">
                  <view class="device-grid">
                    <view
                      class="device-item-card"
                      v-for="(item, index) in deviceList"
                      :key="index"
                    >
                      <image
                        class="device-item-icon"
                        :src="getDeviceIcon(item)"
                        mode="aspectFit"
                      ></image>
                      <view class="device-item-bar">
                        <text class="device-item-name">{{ item.name }}</text>
                        <view class="device-status-tag">
                          <text class="device-item-status">{{
                            item.status
                          }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 火灾监测预警 -->
          <view class="warn-section fire-section" v-if="getCode != 'lblt'">
            <view class="fire-card">
              <view class="fire-card-header" @click.stop="toggleIsShow2">
                <text class="warn-card-title">火灾监测预警</text>
                <view class="warn-card-action">
                  <text class="warn-action-text">{{
                    isShow2 ? "收起" : "展开"
                  }}</text>
                  <u-icon
                    :name="isShow2 ? 'arrow-up' : 'arrow-down'"
                    color="#2b7cff"
                    size="14"
                  ></u-icon>
                </view>
              </view>
              <view v-show="isShow2">
                <view class="fire-card-divider"></view>
                <view class="fire-card-content" @click="getDetail('fire')">
                  <view class="fire-block">
                    <view class="fire-block-header">
                      <!-- <view class="fire-block-deco">
                        <view class="fire-deco-line"></view>
                        <view class="fire-deco-line"></view>
                      </view> -->
                      <text class="fire-block-title">内因火灾</text>
                      <!-- <view class="fire-block-line"></view> -->
                    </view>
                    <view class="fire-grid">
                      <view
                        class="fire-data-card"
                        v-for="(item, index) in internalFireList"
                        :key="'internal-' + index"
                      >
                        <view class="fire-icon-box">
                          <image
                            class="fire-icon"
                            :src="getFireIcon(item)"
                            mode="aspectFit"
                          ></image>
                        </view>
                        <view class="fire-data-info">
                          <text
                            :class="[
                              'fire-data-value',
                              isFireValueWarn(item) ? 'fire-value-warn' : '',
                            ]"
                            >{{ item.value }}</text
                          >
                          <text class="fire-data-label"
                            >{{ item.monitorcode }}{{ getFireUnit(item) }}</text
                          >
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="fire-block fire-block-external">
                    <view class="fire-block-header">
                      <!-- <view class="fire-block-deco">
                        <view class="fire-deco-line"></view>
                        <view class="fire-deco-line"></view>
                      </view> -->
                      <text class="fire-block-title">外因火灾</text>
                      <!-- <view class="fire-block-line"></view> -->
                    </view>
                    <view class="fire-grid">
                      <view
                        class="fire-data-card"
                        v-for="(item, index) in externalFireList"
                        :key="'external-' + index"
                      >
                        <view class="fire-icon-box">
                          <image
                            class="fire-icon"
                            :src="getFireIcon(item)"
                            mode="aspectFit"
                          ></image>
                        </view>
                        <view class="fire-data-info">
                          <text
                            :class="[
                              'fire-data-value',
                              isFireValueWarn(item) ? 'fire-value-warn' : '',
                            ]"
                            >{{ item.value }}</text
                          >
                          <text class="fire-data-label"
                            >{{ item.monitorcode }}{{ getFireUnit(item) }}</text
                          >
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 粉尘监测预警 -->
          <view class="warn-section dust-section" v-if="getCode != 'lblt'">
            <view class="dust-card">
              <view class="dust-card-header" @click.stop="toggleIsShow3">
                <text class="warn-card-title">粉尘监测预警</text>
                <view class="warn-card-action">
                  <text class="warn-action-text">{{
                    isShow3 ? "收起" : "展开"
                  }}</text>
                  <u-icon
                    :name="isShow3 ? 'arrow-up' : 'arrow-down'"
                    color="#2b7cff"
                    size="14"
                  ></u-icon>
                </view>
              </view>
              <view v-show="isShow3">
                <view class="dust-card-divider"></view>
                <view class="dust-card-content" @click="getDetail('dust')">
                  <view class="dust-alarm-bar">
                    <view class="dust-alarm-icon-wrap">
                      <image
                        class="dust-alarm-icon"
                        src="/static/warndata/报警.svg"
                        mode="aspectFit"
                      ></image>
                    </view>
                    <text class="dust-alarm-label">报警:</text>
                    <text class="dust-alarm-value">{{ dustAlarmCount }}</text>
                  </view>
                  <view class="dust-risk-row">
                    <view
                      class="dust-risk-card"
                      v-for="(risk, index) in dustRiskList"
                      :key="index"
                      :style="{ background: risk.bg }"
                    >
                      <view
                        class="dust-risk-icon"
                        :style="{ background: risk.iconBg }"
                      >
                        <image
                          class="dust-risk-icon-img"
                          src="/static/warndata/风险.svg"
                          mode="aspectFit"
                        ></image>
                      </view>
                      <text class="dust-risk-value">{{ risk.value }}</text>
                      <text class="dust-risk-label">{{ risk.label }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 瓦斯监测预警 -->
          <view class="warn-section gas-section" v-if="getCode != 'lblt'">
            <view class="gas-card">
              <view class="gas-card-header" @click.stop="toggleIsShow4">
                <text class="warn-card-title">瓦斯监测预警</text>
                <view class="warn-card-action">
                  <text class="warn-action-text">{{
                    isShow4 ? "收起" : "展开"
                  }}</text>
                  <u-icon
                    :name="isShow4 ? 'arrow-up' : 'arrow-down'"
                    color="#2b7cff"
                    size="14"
                  ></u-icon>
                </view>
              </view>
              <view v-show="isShow4">
                <view class="gas-card-divider"></view>
                <view class="gas-card-content" @click="getDetail('gas')">
                  <view class="gas-block" v-if="gasDevice.length > 0">
                    <view class="gas-block-header">
                      <!-- <view class="gas-block-deco">
                        <view class="gas-deco-line"></view>
                        <view class="gas-deco-line"></view>
                      </view> -->
                      <text class="gas-block-title">安全监测系统监测点</text>
                      <text class="gas-block-count">{{ gasSafeTotal }}</text>
                      <!-- <view class="gas-block-line"></view> -->
                    </view>
                    <view class="gas-grid">
                      <view
                        class="gas-data-card"
                        v-for="(item, index) in gasDevice"
                        :key="'safe-' + index"
                      >
                        <view class="gas-icon-box">
                          <image
                            class="gas-icon"
                            src="/static/warndata/监测点.svg"
                            mode="aspectFit"
                          ></image>
                        </view>
                        <view class="gas-data-info">
                          <text class="gas-data-value">{{
                            item.gasNumber
                          }}</text>
                          <text class="gas-data-label">{{
                            item.systemname
                          }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view
                    class="gas-block gas-block-second"
                    v-if="gasDevice.length > 0"
                  >
                    <view class="gas-block-header">
                      <!-- <view class="gas-block-deco">
                        <view class="gas-deco-line"></view>
                        <view class="gas-deco-line"></view>
                      </view> -->
                      <text class="gas-block-title">瓦斯抽采系统监测点</text>
                      <text class="gas-block-count">{{ gasPumpTotal }}</text>
                      <!-- <view class="gas-block-line"></view> -->
                    </view>
                    <view class="gas-grid">
                      <view
                        class="gas-data-card"
                        v-for="(item, index) in gasDevice"
                        :key="'pump-' + index"
                      >
                        <view class="gas-icon-box">
                          <image
                            class="gas-icon"
                            src="/static/warndata/监测点.svg"
                            mode="aspectFit"
                          ></image>
                        </view>
                        <view class="gas-data-info">
                          <text class="gas-data-value">{{
                            item.pumpNumber
                          }}</text>
                          <text class="gas-data-label">{{
                            item.systemname
                          }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </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: "",
      backPic: "",
      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: false,
      isShow3: false,
      isShow4: false,
      isShow5: true,
      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;
              const dusting =
                response.data.result.info.devicekindInfo.dusting || {};
              this.dustData = dusting;
              this.dustTotalcount = dusting.totalcount;
              this.dustLevelstatus = dusting.levelstatus;
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //左上角返回键：详情页返回预警列表页，预警列表页返回首页
    onLeftClick() {
      if (!this.isShowDetail) {
        this.menuShow();
        return;
      }
      this.$emit("changePage", "device");
    },
    //返回监测首页
    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 的值
    },
    getDeviceIcon(item) {
      const iconNameMap = {
        atomizing: "喷淋",
        dedustefan: "除尘器",
        drilling: "跟机喷雾",
        dustdev: "喷粉",
        fanlocal: "局扇",
        fanmain: "主扇",
        forcFan: "压风",
        gasmonitor: "抽采管路",
        gate: "风门",
        location: "人员定位",
        nitrogen: "注氮",
        pulping: "注浆",
        pump: "瓦斯泵",
        rebroadcast: "语音扩播",
        safetymonitor: "安全监控",
        spary: "喷淋",
        spray: "喷淋",
        unit: "评价单元",
        window: "风窗",
        wintest: "测风装置",
      };
      const iconName = iconNameMap[item.code] || item.name || "评价单元";
      return `/static/warndata/${iconName} – 1.png`;
    },
    getFireIcon(item) {
      const monitor = item.monitorcode || "";
      if (monitor.indexOf("上隅角") >= 0) {
        return "/static/warndata/上隅角.svg";
      }
      if (monitor === "温度") {
        return "/static/warndata/监测点.svg";
      }
      if (monitor === "烟雾") {
        return "/static/warndata/风险.svg";
      }
      if (monitor === "火焰") {
        return "/static/warndata/报警.svg";
      }
      const codeMap = {
        coval: "CO.svg",
        ch4val: "CH4.svg",
        ch2val: "C2H4.svg",
        chval: "C2H4.svg",
        co2val: "CO2.svg",
        o2val: "上隅角.svg",
      };
      return `/static/warndata/${codeMap[item.code] || "监测点.svg"}`;
    },
    getFireUnit(item) {
      if (
        item.code === "o2val" ||
        item.code === "co2val" ||
        item.code === "ch4val" ||
        item.code === "smokeval"
      ) {
        return "(%)";
      }
      if (
        item.code === "fmax" ||
        item.code === "temperature" ||
        item.code === "fireval"
      ) {
        return "(℃)";
      }
      return "(ppm)";
    },
    isFireValueWarn(item) {
      return item.Maxlevel > 0;
    },
  },
  computed: {
    internalFireList() {
      if (!this.internalInfo) return [];
      const list = Array.isArray(this.internalInfo)
        ? this.internalInfo
        : Object.values(this.internalInfo);
      return list.filter((item) => item && Object.keys(item).length > 0);
    },
    externalFireList() {
      if (!this.externalInfo) return [];
      const list = Array.isArray(this.externalInfo)
        ? this.externalInfo
        : Object.values(this.externalInfo);
      return list.filter((item) => item && Object.keys(item).length > 0);
    },
    deviceList() {
      if (!this.devicekindData) return [];
      const list = Array.isArray(this.devicekindData)
        ? this.devicekindData
        : Object.values(this.devicekindData);
      return list.filter((item) => item && item.name);
    },
    getCode() {
      return uni.getStorageSync("apiCode");
    },
    ventRiskList() {
      const data = this.windData || {};
      const sys = data.sysdata || {};
      const getVal = (key) => {
        if (data[key] !== undefined && data[key] !== null && data[key] !== "") {
          return data[key];
        }
        if (sys[key] !== undefined && sys[key] !== null && sys[key] !== "") {
          return sys[key];
        }
        return 0;
      };
      return [
        { label: "低风险", color: "#1890ff", value: getVal("blue") },
        { label: "一般风险", color: "#f5a623", value: getVal("yellow") },
        { label: "较大风险", color: "#ff7a00", value: getVal("red") },
        { label: "重大风险", color: "#ff4d4f", value: getVal("orange") },
        { label: "报警", color: "#e90000", value: getVal("alarm") },
      ];
    },
    dustAlarmCount() {
      const data = this.dustData || {};
      if (
        data.alarm !== undefined &&
        data.alarm !== null &&
        data.alarm !== ""
      ) {
        return data.alarm;
      }
      return 0;
    },
    dustRiskList() {
      const data = this.dustData || {};
      const getVal = (key) => {
        if (data[key] !== undefined && data[key] !== null && data[key] !== "") {
          return data[key];
        }
        return 0;
      };
      return [
        {
          label: "低风险",
          bg: "#e6f7ff",
          iconBg: "#1890ff",
          value: getVal("blue"),
        },
        {
          label: "一般风险",
          bg: "#fffbe6",
          iconBg: "#faad14",
          value: getVal("yellow"),
        },
        {
          label: "较大风险",
          bg: "#fff7e6",
          iconBg: "#ff8c00",
          value: getVal("red"),
        },
        {
          label: "重大风险",
          bg: "#fff1f0",
          iconBg: "#f5222d",
          value: getVal("orange"),
        },
      ];
    },
    gasSafeTotal() {
      if (!this.gasDevice || !this.gasDevice.length) return 0;
      return this.gasDevice.reduce((sum, item) => {
        const num = Number(item.gasNumber);
        return sum + (isNaN(num) ? 0 : num);
      }, 0);
    },
    gasPumpTotal() {
      if (!this.gasDevice || !this.gasDevice.length) return 0;
      return this.gasDevice.reduce((sum, item) => {
        const num = Number(item.pumpNumber);
        return sum + (isNaN(num) ? 0 : num);
      }, 0);
    },
  },
};
</script>

<style lang="scss" scoped>
.nameStyle {
  color: #000000;
  font-size: 15px;
}

.container {
  // display: flex;
  // flex-direction: column;
  // min-height: 100vh;
  // background: linear-gradient(180deg, #c8d8f8 0%, #f5f7fa 320rpx, #f5f7fa 100%);
}

.menupage {
  height: calc(100vh - 101px);
  margin-top: 50px;
  overflow-y: auto;
}

.main {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 0 24rpx 40rpx;
  box-sizing: border-box;
  background: transparent;
}

.warn-list {
  width: 100%;
}

.warn-section {
  margin-bottom: 20rpx;
}

.warn-card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: #f9f9fb;
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.warn-card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #000000;
}

.warn-card-action {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.warn-action-text {
  font-size: 14px;
  color: #0065f8;
  margin-right: 3px;
  font-weight: 500;
}

.warn-card-body {
  margin-top: 12rpx;
  padding: 20rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* ===== 通风监测预警 ===== */
.vent-section {
  margin-bottom: 20rpx;
}

.vent-card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.vent-card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 24rpx;
}

.vent-card-divider {
  height: 1rpx;
  background: #eef0f4;
  margin: 0 24rpx;
}

.vent-card-content {
  padding: 20rpx 24rpx 24rpx;
}

.vent-metrics-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.vent-metric-card {
  flex: 1;
  margin: 0 6rpx;
  padding: 24rpx 8rpx;
  border-radius: 12rpx;
  background: linear-gradient(
    to bottom,
    rgba(175, 195, 252, 0.6) 0%,
    rgba(175, 195, 252, 0.1) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.vent-metric-card:first-child {
  margin-left: 0;
}

.vent-metric-card:last-child {
  margin-right: 0;
}

.vent-metric-value {
  font-size: 28rpx;
  font-weight: 700;
  color: #0065f8;
  line-height: 1.3;
  text-align: center;
  word-break: break-all;
}

.vent-metric-label {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #000000;
  line-height: 1.3;
  text-align: center;
}

.vent-risk-panel {
  margin-top: 16rpx;
  padding: 24rpx 16rpx;
  border-radius: 12rpx;
  background: linear-gradient(
    to bottom,
    rgba(175, 195, 252, 0.6) 0%,
    rgba(175, 195, 252, 0.1) 100%
  );
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.vent-risk-item {
  width: 33.33%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  padding-right: 8rpx;
}

.vent-risk-item:nth-child(n + 4) {
  margin-bottom: 0;
}

.risk-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 8rpx;
}

.risk-text {
  font-size: 24rpx;
  color: #000000;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vent-section .warn-action-text {
  color: #0065f8;
}

/* ===== 设备监测预警 ===== */
.device-section {
  margin-bottom: 20rpx;
}

.device-card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.device-card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 24rpx 24rpx;
}

.device-card-divider {
  height: 1rpx;
  background: #eef0f4;
  margin: 0 24rpx;
}

.device-card-content {
  padding: 24rpx 24rpx 28rpx;
}

.device-section .warn-action-text {
  color: #0065f8;
}

.device-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.device-item-card {
  position: relative;
  width: calc(50% - 10rpx);
  height: 80rpx;
  margin-bottom: 30rpx;
  box-sizing: border-box;
  background: url("../../static/warndata/1-3.png") no-repeat center;
  background-size: 100% 100%;
}

.device-item-icon {
  position: absolute;
  left: 8rpx;
  top: -40rpx;
  width: 104rpx;
  height: 104rpx;

  z-index: 2;
}

.device-item-bar {
  position: absolute;
  left: 28rpx;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 88rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 90rpx;
  padding-right: 74rpx;
  padding-top: 12rpx;
  box-sizing: border-box;
  // background: linear-gradient(90deg, #d0e7ff 0%, #eef6ff 55%, #ffffff 100%);
  // clip-path: polygon(0 0, calc(100% - 18rpx) 0, 100% 100%, 0 100%);
}

.device-item-name {
  flex: 1;
  min-width: 0;
  font-size: 26rpx;
  color: #000000;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-status-tag {
  position: absolute;
  right: 20rpx;
  top: 12rpx;
  bottom: 0;
  width: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  // background: linear-gradient(135deg, #afc3fc 0%, #82aaff 100%);
  // clip-path: polygon(14rpx 0, 100% 0, 100% 100%, 0 100%);
}

.device-item-status {
  font-size: 26rpx;
  font-weight: 700;
  font-style: italic;
  color: #0065f8;
  line-height: 1.2;
}

/* ===== 火灾监测预警 ===== */
.fire-section {
  margin-bottom: 20rpx;
}

.fire-card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.fire-card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 24rpx 24rpx;
}

.fire-card-divider {
  height: 1rpx;
  background: #eef0f4;
  margin: 0 24rpx;
}

.fire-card-content {
  padding: 24rpx 24rpx 28rpx;
}

.fire-section .warn-action-text {
  color: #0065f8;
}

.fire-block {
  margin-bottom: 8rpx;
}

.fire-block-external {
  margin-top: 24rpx;
  margin-bottom: 0;
}

.fire-block-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 28px;
  width: 100%;
  margin-bottom: 20rpx;
  padding-left: 30rpx;
  background: url("../../static/warndata/1-1.png") no-repeat center;
  background-size: 100% 100%;
}

.fire-block-deco {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.fire-deco-line {
  width: 6rpx;
  height: 28rpx;
  background: #0065f8;
  transform: skewX(-18deg);
  margin-right: 6rpx;
  border-radius: 2rpx;
}

.fire-block-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #000;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.fire-block-line {
  flex: 1;
  height: 28rpx;
  background: linear-gradient(
    90deg,
    #d0e7ff 0%,
    #eef5ff 72%,
    rgba(238, 245, 255, 0) 100%
  );
  clip-path: polygon(0 0, calc(100% - 24rpx) 0, 100% 100%, 0 100%);
}

.fire-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.fire-data-card {
  width: calc(50% - 10rpx);
  margin-bottom: 16rpx;
  padding: 20rpx 16rpx;
  border-radius: 12rpx;
  background: linear-gradient(
    to bottom,
    rgba(175, 195, 252, 0.6) 0%,
    rgba(175, 195, 252, 0.1) 100%
  );
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}

.fire-icon-box {
  width: 72rpx;
  height: 72rpx;
  border-radius: 12rpx;
  background: linear-gradient(135deg, #4d9dff 0%, #0065f8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 16rpx;
  box-shadow: 4rpx 6rpx 0 rgba(43, 124, 255, 0.12);
}

.fire-icon {
  width: 44rpx;
  height: 44rpx;
}

.fire-data-info {
  flex: 1;
  min-width: 0;
}

.fire-data-value {
  display: block;
  font-size: 32rpx;
  font-weight: 700;
  color: #0065f8;
  line-height: 1.2;
  word-break: break-all;
}

.fire-value-warn {
  color: #ff0000;
}

.fire-data-label {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #000;
  line-height: 1.35;
  word-break: break-all;
}

/* ===== 粉尘监测预警 ===== */
.dust-section {
  margin-bottom: 20rpx;
}

.dust-card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.dust-card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 24rpx 24rpx;
}

.dust-card-divider {
  height: 1rpx;
  background: #eef0f4;
  margin: 0 24rpx;
}

.dust-card-content {
  padding: 24rpx 24rpx 28rpx;
}

.dust-section .warn-action-text {
  color: #0065f8;
}

.dust-alarm-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 24rpx 28rpx;
  border-radius: 12rpx;
  background: #fff1f0;
  margin-bottom: 16rpx;
}

.dust-alarm-icon-wrap {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #f5222d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  box-shadow: 0 0 0 6rpx rgba(245, 34, 45, 0.12);
  flex-shrink: 0;
}

.dust-alarm-icon {
  width: 32rpx;
  height: 32rpx;
}

.dust-alarm-label {
  flex: 1;
  font-size: 28rpx;
  color: #000;
  font-weight: 600;
}

.dust-alarm-value {
  font-size: 32rpx;
  font-weight: 700;
  color: #000;
}

.dust-risk-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.dust-risk-card {
  position: relative;
  width: calc(25% - 9rpx);
  padding: 20rpx 8rpx 16rpx;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  min-height: 140rpx;
}

.dust-risk-icon {
  position: absolute;
  top: 12rpx;
  left: 12rpx;
  width: 28rpx;
  height: 28rpx;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dust-risk-icon-img {
  width: 18rpx;
  height: 18rpx;
}

.dust-risk-value {
  margin-top: 24rpx;
  font-size: 36rpx;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
}

.dust-risk-label {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #000;
  line-height: 1.3;
  text-align: center;
}

/* ===== 瓦斯监测预警 ===== */
.gas-section {
  margin-bottom: 20rpx;
}

.gas-card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.gas-card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 24rpx 24rpx;
}

.gas-card-divider {
  height: 1rpx;
  background: #eef0f4;
  margin: 0 24rpx;
}

.gas-card-content {
  padding: 24rpx 24rpx 28rpx;
}

.gas-section .warn-action-text {
  color: #0065f8;
}

.gas-block {
  margin-bottom: 8rpx;
}

.gas-block-second {
  margin-top: 24rpx;
  margin-bottom: 0;
}

.gas-block-header {
  height: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
  padding-left: 30rpx;
  background: url("../../static/warndata/1-1.png") no-repeat center;
  background-size: 100% 100%;
}

.gas-block-deco {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.gas-deco-line {
  width: 6rpx;
  height: 28rpx;
  color: #0065f8;
  transform: skewX(-18deg);
  margin-right: 6rpx;
  border-radius: 2rpx;
}

.gas-block-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #000;
  margin-right: 10rpx;
  flex-shrink: 0;
}

.gas-block-count {
  font-size: 28rpx;
  font-weight: 700;
  color: #0065f8;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.gas-block-line {
  flex: 1;
  height: 28rpx;
  background: linear-gradient(
    90deg,
    #d0e7ff 0%,
    #eef5ff 72%,
    rgba(238, 245, 255, 0) 100%
  );
  clip-path: polygon(0 0, calc(100% - 24rpx) 0, 100% 100%, 0 100%);
}

.gas-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.gas-data-card {
  width: calc(33.33% - 8rpx);
  margin-bottom: 16rpx;
  margin-right: 20rpx;
  padding: 16rpx 10rpx;
  border-radius: 12rpx;
  background: linear-gradient(
    to bottom,
    rgba(175, 195, 252, 0.6) 0%,
    rgba(175, 195, 252, 0.1) 100%
  );
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}

.gas-icon-box {
  width: 56rpx;
  height: 56rpx;
  border-radius: 10rpx;
  background: linear-gradient(135deg, #4d9dff 0%, #0065f8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10rpx;
  box-shadow: 3rpx 4rpx 0 rgba(43, 124, 255, 0.12);
}

.gas-icon {
  width: 34rpx;
  height: 34rpx;
}

.gas-data-info {
  flex: 1;
  min-width: 0;
}

.gas-data-value {
  display: block;
  font-size: 30rpx;
  font-weight: 700;
  color: #0065f8;
  line-height: 1.2;
  word-break: break-all;
}

.gas-data-label {
  display: block;
  margin-top: 6rpx;
  font-size: 24rpx;
  color: #000;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
}

.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/1-1.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;
}

.firetext {
  margin: 20px;
}

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

.red-text-style {
  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>