<template>
  <!-- 城西泵站 厂站工艺图 -->
  <div class="realtimeStatistics" v-loading="loadingGYT">
    <!-- 数据展示 -->
    <div class="dataPart">
      <!-- 水泵 -->
      <div class="waterPart" v-for="i in 5">
        <p class="titleL">{{ i }}#水泵</p>
        <div class="content">
          <p class="head">U:</p>
          <p class="inputText">{{ detailObj[`CX_B${i}_Ia`] || '--' }}</p>
          <p class="unit">V</p>
        </div>
        <div class="content">
          <p class="head">P:</p>
          <p class="inputText">{{ detailObj[`CX_B${i}_Ua`] || '--' }}</p>
          <p class="unit">KW</p>
        </div>
      </div>
      <!-- 配电室 -->
      <div class="lightPart">
        <p class="titleL">低压配电室</p>
        <div class="cont">
          <p class="name">釉流风机</p>
          <div class="flex">
            <!-- Fault为“正常”且Run为0，那这台鼓风机表示【未开启。无颜色】；如果是Fault为“故障”，
              那这台鼓风机表示【故障，用橙色】；如果Fault为“正常”且Run为1，那这台鼓风机表示【开启，用绿色】 -->
            <img
              src="@/assets/images/gongyitu/dianR.png"
              alt=""
              style="filter: grayscale(100%)"
              v-if="(detailObj.CX_GFJ1_Run == '0' && detailObj.CX_GFJ1_Fault == '正常') || !!!detailObj.CX_GFJ1_Run"
            />
            <img src="@/assets/images/gongyitu/dianG.png" alt="" v-if="detailObj.CX_GFJ1_Run == '1' && detailObj.CX_GFJ1_Fault == '正常'" />
            <img src="@/assets/images/gongyitu/dianR.png" alt="" v-if="detailObj.CX_GFJ1_Fault == '故障'" />

            <img
              src="@/assets/images/gongyitu/dianR.png"
              alt=""
              style="filter: grayscale(100%)"
              v-if="(detailObj.CX_GFJ2_Run == '0' && detailObj.CX_GFJ2_Fault == '正常') || !!!detailObj.CX_GFJ2_Run"
            />
            <img src="@/assets/images/gongyitu/dianG.png" alt="" v-if="detailObj.CX_GFJ2_Run == '1' && detailObj.CX_GFJ2_Fault == '正常'" />
            <img src="@/assets/images/gongyitu/dianR.png" alt="" v-if="detailObj.CX_GFJ2_Fault == '故障'" />
          </div>
        </div>
      </div>
      <div class="lightPart">
        <p class="titleL">高压配电室</p>
        <div class="cont">
          <p class="name">釉流风机</p>
          <div class="flex">
            <img
              src="@/assets/images/gongyitu/dianR.png"
              alt=""
              style="filter: grayscale(100%)"
              v-if="(detailObj.CX_GFJ3_Run == '0' && detailObj.CX_GFJ3_Fault == '正常') || !!!detailObj.CX_GFJ3_Run"
            />
            <img src="@/assets/images/gongyitu/dianG.png" alt="" v-if="detailObj.CX_GFJ3_Run == '1' && detailObj.CX_GFJ3_Fault == '正常'" />
            <img src="@/assets/images/gongyitu/dianR.png" alt="" v-if="detailObj.CX_GFJ3_Fault == '故障'" />

            <img
              src="@/assets/images/gongyitu/dianR.png"
              alt=""
              style="filter: grayscale(100%)"
              v-if="(detailObj.CX_GFJ4_Run == '0' && detailObj.CX_GFJ4_Fault == '正常') || !!!detailObj.CX_GFJ4_Run"
            />
            <img src="@/assets/images/gongyitu/dianG.png" alt="" v-if="detailObj.CX_GFJ4_Run == '1' && detailObj.CX_GFJ4_Fault == '正常'" />
            <img src="@/assets/images/gongyitu/dianR.png" alt="" v-if="detailObj.CX_GFJ4_Fault == '故障'" />
          </div>
        </div>
      </div>
      <div class="lightPart">
        <p class="titleL">高压容器室</p>
        <div class="cont">
          <p class="name">釉流风机</p>
          <div class="flex">
            <img
              src="@/assets/images/gongyitu/dianR.png"
              alt=""
              style="filter: grayscale(100%)"
              v-if="(detailObj.CX_GFJ5_Run == '0' && detailObj.CX_GFJ5_Fault == '正常') || !!!detailObj.CX_GFJ5_Run"
            />
            <img src="@/assets/images/gongyitu/dianG.png" alt="" v-if="detailObj.CX_GFJ5_Run == '1' && detailObj.CX_GFJ5_Fault == '正常'" />
            <img src="@/assets/images/gongyitu/dianR.png" alt="" v-if="detailObj.CX_GFJ5_Fault == '故障'" />
          </div>
        </div>
      </div>
    </div>
    <!-- 工艺图 -->
    <div class="gytCont">
      <!-- 1#闸门 -->
      <div class="zhamen absolute" style="left: 140px; bottom: 60px">
        <p class="titleL">1#渠道闸门状态</p>
        <div class="flex flex-wrap flexBox">
          <p :class="detailObj.CX_Door1_Open == '1' ? 'greenBg' : ''">闸门开到位</p>
          <p :class="detailObj.CX_Door1_Close == '1' ? 'greenBg' : ''">闸门关到位</p>
          <p :class="detailObj.CX_Door1_Up == '1' ? 'greenBg' : ''">闸门上升</p>
          <p :class="detailObj.CX_Door1_Down == '1' ? 'greenBg' : ''">闸门下降</p>
        </div>
      </div>
      <!-- 2#闸门 -->
      <div class="zhamen absolute" style="left: 260px; top: 25px">
        <p class="titleL">2#渠道闸门状态</p>
        <div class="flex flex-wrap flexBox">
          <p :class="detailObj.CX_Door2_Open == '1' ? 'greenBg' : ''">闸门开到位</p>
          <p :class="detailObj.CX_Door2_Close == '1' ? 'greenBg' : ''">闸门关到位</p>
          <p :class="detailObj.CX_Door2_Up == '1' ? 'greenBg' : ''">闸门上升</p>
          <p :class="detailObj.CX_Door2_Down == '1' ? 'greenBg' : ''">闸门下降</p>
        </div>
      </div>
      <!-- 量程 -->
      <div class="waterLC absolute flex" style="left: 790px; top: 15px">
        <div class="part">
          <p class="title">量程：0-7.6m</p>
          <div class="contentShow">
            <p class="head">液位</p>
            <p class="inputText">{{ detailObj.CX_CGS_QYW || '--' }}</p>
            <p class="unit">m</p>
          </div>
        </div>
        <div class="part">
          <p class="title"></p>
          <div class="contentShow">
            <p class="head">H2S</p>
            <p class="inputText">{{ detailObj.CX_CGS_LHQ || '--' }}</p>
            <p class="unit">ml</p>
          </div>
        </div>
        <div class="part">
          <p class="title">量程：0-9.6m</p>
          <div class="contentShow">
            <p class="head">液位</p>
            <p class="inputText">{{ detailObj.CX_CGS_HYW || '--' }}</p>
            <p class="unit">m</p>
          </div>
        </div>
      </div>
      <!-- 潜污泵 -->
      <div class="famen absolute" style="left: 980px; top: 105px">
        <div v-for="i in 6" :key="i" class="fmImg">
          <img
            src="@/assets/images/gongyitu/bengR.png"
            alt="离线"
            style="filter: grayscale(100%)"
            v-if="(detailObj[`CX_B${i}_Run`] == '0' && detailObj[`CX_B${i}_Fault`] == '正常') || !!!detailObj[`CX_B${i}_Run`]"
          />
          <img
            src="@/assets/images/gongyitu/bengG.png"
            alt=""
            v-if="detailObj[`CX_B${i}_Run`] == '1' && detailObj[`CX_B${i}_Fault`] == '正常'"
          />
          <img src="@/assets/images/gongyitu/bengR.png" alt="" v-if="detailObj[`CX_B${i}_Fault`] == '故障'" />
        </div>
      </div>
      <!-- 阀门 -->
      <div class="famen2 absolute" style="left: 1081px; top: 92px">
        <div class="part" v-for="i in 6">
          <img src="@/assets/images/gongyitu/zhaR.png" alt="" class="fmImg" v-if="detailObj[`CX_F${i}_Open`] == '0'" />
          <img src="@/assets/images/gongyitu/zhaG.png" alt="" class="fmImg" v-if="detailObj[`CX_F${i}_Open`] == '1'" />
          <img
            src="@/assets/images/gongyitu/zhaG.png"
            alt="离线"
            class="fmImg"
            v-if="!!!detailObj[`CX_F${i}_Open`]"
            style="filter: grayscale(100%)"
          />
          <div class="contentShow">
            <p class="head closeT" v-if="detailObj[`CX_F${i}_Open`] == '0'">关到位</p>
            <p class="head" v-if="detailObj[`CX_F${i}_Open`] == '1'">开到位</p>
            <p class="inputText">{{ detailObj[`CX_F${i}_Value`] || '--' }}</p>
            <p class="unit" style="width: 30px">%</p>
          </div>
        </div>
      </div>
      <!-- 真空阀 -->
      <div class="famen3 absolute" style="left: 1241px; top: 132px">
        <div class="part" v-for="i in 6">
          <div class="contentShow">
            <p class="head">管压力</p>
            <p class="inputText">{{ detailObj[`CX_GLYL${i}_Value`] || '--' }}</p>
            <p class="unit" style="width: 40px">Mpa</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { realtimeDataList } from '@/api/scada/monitor';

const detailObj = ref([]);
const timer = ref(null);
const loadingGYT = ref(true);

//获取详情数据
async function getDetailData() {
  loadingGYT.value = true;
  let res = await realtimeDataList({ stationCode: 'BZ-CX', dataShow: 0 });
  if (res && res.code == 200) {
    detailObj.value = res.data || {};
  }
  loadingGYT.value = false;
}

onMounted(() => {
  getDetailData();
  // 一分钟刷新一次
  timer.value = setInterval(() => {
    getDetailData();
  }, 60 * 1000);
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
});
</script>

<style lang="scss" scoped>
// prettier-ignore
.realtimeStatistics {
  width: 100%;
  height: 100%;
  padding: 20PX;
  .absolute {
    position: absolute;
    z-index: 99;
  }
  .contentShow{
    width:90PX;
    background: #00AD00;
    border: 1PX solid #ECF4FE;
    border-radius: 3PX;
    display: flex;
    align-items: center;
    .head,.unit{
      width:60PX;
      text-align: center;
      color:#FCFF00;
    }
    .closeT{
      background: #fff;
      color:#000;
    }
  }
  .greenBg {
    background: #00ad00 !important;
    border: 1PX solid #0057af;
    color: #fff000;
    font-size: 12PX;
    padding: 3PX;
    border-radius: 3PX;
  }
 
  .titleL {
    background: #009da8;
    border-radius: 5PX;
    text-align: center;
    color: #ffea00;
    padding: 5PX 0PX;
    font-size:14PX;
  }
  .inputText {
    background: #000;
    border-radius: 5PX;
    color: #ffea00;
    font-size: 14PX;
    width:60PX;
    height: 20PX;
    line-height: 20PX;
    text-align: center;
  }
  .dataPart {
    display: flex;
    margin-bottom:50PX;
    height: 160PX;
    .waterPart{
      width:150PX;
      background: #EFE7F4;
      border: 1PX solid #009DA8;
      margin-left:15PX;
      padding:5PX;
      .content{
        display: flex;
        margin-top:25PX;
        align-items: center;
        .head,.unit{
          width:50PX;
          text-align: center;
          font-size:13PX;
        }
      }
    }
    .lightPart{
      background: #08709C;
      border: 1PX solid #000000;
      margin-left:15PX;
      padding:5PX;
      .cont{
        background: #009DA8;
        padding:5PX;
        margin-top:10PX;
        .name{
          border: 1PX solid #000052;
          border-radius: 5PX;
          margin:10PX 20PX;
          color:#FFEA00;
          font-size:14PX;
          padding:5PX;
        }
        img{
          width:32PX;
          height: 35PX;
          margin-left:10PX;
        }
      }
    }
  }
  .gytCont {
    width: 1500PX;
    height: 592PX;
    background: url('@/assets/images/gongyitu/bengBg.png') no-repeat;
    background-size: 100% 100%;
    position:relative;
    .zhamen{
      background: #08709C;
      margin-left:15PX;
      padding:5PX;
      .flexBox{
        justify-content: space-between;
        width:160PX;
        p{
          width:48%;
          margin-top:5PX;
          text-align: center;
          padding: 3PX;
          background: #fff;
          font-size: 12PX;
        }
      }
    }
  }
  .waterLC{
    .part{
      margin-right: 15PX;
      .title{
        color: #ffea00;
        height: 20PX;
      }
      .contentShow{
        width:100PX;
        .inputText{
          width:85PX;
        }
      }
      
    }
  }
  .famen{
    display: flex;
    flex-wrap: wrap;
    width:27PX;
    .fmImg{
      width:27PX;
      height: 44PX;
      margin-bottom: 23PX;
      img{
        width:27PX;
        height: 44PX;
      }
    }
  }
  .famen2{
    .part{
      text-align: center;
      margin-bottom:7PX;
      .contentShow{
        font-size:12PX;
        width:120PX;
        margin-top:-2PX;
      }
      .fmImg{
        width:30PX;
        height: 37PX;
      }
    }
  }
  .famen3{
    .part{
      text-align: center;
      margin-bottom:47PX;
      .contentShow{
        font-size:12PX;
        width:120PX;
        margin-top:-3PX;
      }
    }
  }
}
</style>