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="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 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" 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="firecard fire-style">
            <view
              v-for="(item, index) in internalInfo"
              :key="index"
              class="fire-item"
              v-if="item && Object.keys(item).length > 0"
            >
              <view style="margin-top: 20rpx">
                <text
                  :class="item.Maxlevel > 0 ? 'red-text-style' : 'text-style1'"
                  >{{ item.value }}</text
                >
                <view style="margin-top: 10rpx">{{ item.name }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="firecontainer">
          <view class="title">
            <span class="firetext">外因火灾</span>
          </view>
          <view class="firecard fire-style">
            <view
              v-for="(item, index) in externalInfo"
              :key="index"
              class="fire-item"
            >
              <view style="margin-top: 20rpx">
                <text
                  :class="item.Maxlevel > 0 ? 'red-text-style' : 'text-style1'"
                  >{{ item.value }}</text
                >
                <view style="margin-top: 10rpx">{{ item.name }}</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 class="firecard fire-style">
          <view v-for="(value, key) in dustData" :key="key" class="fire-item">
            <view style="margin-top: 20rpx">
              <image
                src="/static/warndata/alarm.svg"
                class="icon-style"
                :style="{ backgroundColor: key === 'alarm' ? 'red' : key }"
              ></image>
              <span style="margin-top: 10rpx">
                {{ dustMap[key] }} :{{ value }}</span
              >
            </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 class="gascard" v-for="(item, index) in gasDevice" :key="index">
            <view style="margin-top: 20rpx">
              <text class="text-style1">{{ item.gasNumber }}</text>
              <view style="margin: 10rpx">{{ item.systemname }}</view>
            </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 style="margin-top: 20rpx">
                <text class="text-style1">{{ item.pumpNumber }}</text>
                <view style="margin: 10rpx">{{ item.systemname }}</view>
              </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"
            :style="{ backgroundImage: itemBackground(item) }"
          >
            <view class="item">
              <text style="margin-right: 10px">{{ item.name }}</text>
              <text>{{ item.status }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="main" v-else>
      <component :is="detailComponent"></component>
    </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: [],
      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,
    };
  },
  mounted() {
    this.getWranInfo();
  },
  components: {
    ventDetail,
    deviceDetail,
    fireDetail,
    dustDetail,
    gasDetail,
  },
  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.externalInfo = this.fireData.summaryInfo.external;
              this.internalInfo = this.fireData.summaryInfo.internal;
              this.gasData = response.data.result.info.sysInfo.gasS;
              this.gasDevice = this.gasData.devices;
              this.xufengliang = this.windData.sysdata.xufengliang;
              this.dustData = response.data.result.info.sysInfo.dustS.levels;
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //返回监测首页
    menuShow() {
      this.isShowDetail = true;
    },
    //跳转监测详情
    // getDetail(data) {
    //   const componentMap = {
    //     vent: { title: "通风监测预警", component: ventDetail },
    //     device: { title: "设备监测预警", component: deviceDetail },
    //     fire: { title: "火灾监测预警", component: fireDetail },
    //     dust: { title: "粉尘监测预警", component: dustDetail },
    //     gas: { title: "瓦斯监测预警", component: gasDetail },
    //   };
    //   const config = componentMap[data] || {};
    //   this.titleName = config.title;
    //   this.isShowDetail = false;
    //   this.detailComponent = config.component;
    // },
    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>
.container {
  display: flex;
  flex-direction: column;
}

.main {
  // margin-top: 100rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  margin-top: 45px;
  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: 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 {
  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%;
  margin: 1px;
  float: left;
  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-size: 100% 60%;
  /* 设置背景图片尺寸，根据需要进行调整 */
  background-repeat: no-repeat;
  /* 设置背景图片不重复，根据需要进行调整 */
}

.item {
  margin-left: 70px;
  margin-top: 36px;
}

.firetext {
  margin: 20px;
}

.text-style1 {
  color: #3787fe;
  font-weight: bold;
  font-size: large;
}

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

.firecontainer {
  margin-top: 10px;
}

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

.fire-item {
  width: calc(33.33% - 20px);
  margin: 16rpx;
  box-sizing: border-box;
}

.gascontainer {
  display: flex;
}

.gascard {
  width: calc(33.33% - 20px);
  margin: 1px;
  float: left;
  text-align: center;
  border-radius: 10px;
  margin: 10px;
  background: url(/static/warndata/work.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
}

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