<template>
  <div class="monitor" v-loading="loading">
    <div class="monitor-top">
      <img class="title-left" src="../../../assets/images/title-left.png" alt="" />
      <img class="title-center" @click="goSys" src="../../../assets/images/title-center.png" alt="" />
      <img class="title-right" src="../../../assets/images/title-right.png" alt="" />
      <div class="sys-title" @click="goSys">铭汉空压热回收系统</div>
      <!-- logo -->
      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
      <div class="nowTime">{{ formattedDate }}</div>
      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
      <img class="icon_warning" src="../../../assets/images/warning.png" title="报警记录" @click="goWarning"
        v-if="isShowWarning" alt="" />
      <img class="icon_home" src="../../../assets/images/icon_home.png" title="首页" @click="goSys" alt="" />
      <img class="back-icon" src="../../../assets/images/back-icon.png" title="返回" @click="goBack" alt="" />
    </div>
    <div class="host-detail">
      <!-- 流程底图 -->
      <img class="flowchart" src="../../../assets/images/flowchart.png" alt="" />
      <!-- 热量数据 -->
      <div class="hot-details">
        <div class="hot-title">热量计量</div>
        <div class="hot-li">
          <img src="../../../assets/images/hot-icon1.png" class="hot-icon" alt="" />
          <div>热回收总量:</div>
          <div class="hot-data">
            {{ formatHeatValue(hotData.totalHeatRecoverySum) }}
          </div>
        </div>
        <div class="hot-li">
          <img src="../../../assets/images/hot-icon2.png" class="hot-icon" alt="" />
          <div>离心机热量回收:</div>
          <div class="hot-data">
            {{ formatHeatValue(hotData.centrifugalHeatRecoverySum) }}
          </div>
        </div>
        <div class="hot-li">
          <img src="../../../assets/images/hot-icon3.png" class="hot-icon" alt="" />
          <div>后处理及MD热量回收:</div>
          <div class="hot-data">
            {{ formatHeatValue(hotData.postProcessingAndMdHeatRecoverySum) }}
          </div>
        </div>
        <div class="hot-li">
          <img src="../../../assets/images/hot-icon4.png" class="hot-icon" alt="" />
          <div>水源热泵热量:</div>
          <div class="hot-data">
            {{ formatHeatValue(hotData.waterSourceHeatPumpSum) }}
          </div>
        </div>
      </div>
      <!-- 标题 -->
      <div class="text text1">车间热水</div>
      <div class="text text2">供水</div>
      <div class="text text3">车间热水</div>
      <div class="text text4">回水</div>
      <div class="text text5">空调热水</div>
      <div class="text text6">蓄热循环水箱</div>
      <div class="text text7">中温水板换</div>
      <div class="text text8">低温水板换</div>
      <div class="text text9">冷却水板换</div>
      <div class="text text10">二通阀</div>
      <div class="text text12">后冷却器</div>
      <div class="text text13">吸干机</div>
      <div class="text text14">保障冷却器</div>
      <div class="text text15">水源热泵</div>
      <div class="text text16">冷却塔</div>
      <div class="text text17">离心机</div>
      <!-- 标志 -->
      <div class="text p0">P0</div>
      <div class="text p1">P1</div>
      <div class="text p2">P2</div>
      <div class="text p3">P3</div>
      <div class="text p4">P4</div>
      <div class="text p5">P5</div>
      <div class="text p6">P6</div>
      <div class="text p7">P7</div>
      <div class="text p8">P8</div>
      <div class="text p9">P9</div>
      <!-- <div class="text p10">P10</div> -->
      <div class="text p11">P11</div>
      <!-- <div class="text p12">P12</div> -->
      <!-- <div class="text t1">T1</div> -->
      <div class="text t2">T2</div>
      <div class="text t3">T3</div>
      <div class="text t4">T4</div>
      <div class="text t5">T5</div>
      <div class="text t6">T6</div>
      <!-- <div class="text t7">T7</div> -->
      <div class="text h1" @click="hotListData(hotArrOne, '热量表1')">
        热量表1
      </div>
      <div class="text h2" @click="hotListData(hotArrTwo, '热量表2')">
        热量表2
      </div>
      <div class="text h3" @click="hotListData(hotArrThree, '热量表3')">
        热量表3
      </div>
      <div class="text h4" @click="hotListData(hotArrFour, '热量表4')">
        热量表4
      </div>
      <div class="text h5" @click="hotListData(hotArrFive, '热量表5')">
        热量表5
      </div>
      <div class="text h6" @click="hotListData(hotArrSix, '热量表6')">
        热量表6
      </div>
      <div class="text h7" @click="hotListData(hotArrSeven, '热量表7')">
        热量表7
      </div>

      <!-- 数据 -->
      <!-- 压力传感器0-12号 -->
      <div class="text pres0">
        {{ getTemPreData(pressureArr, "0号压力传感器") }}bar
      </div>
      <div class="text pres1">
        {{ getTemPreData(pressureArr, "1号压力传感器") }}bar
      </div>
      <div class="text pres2">
        {{ getTemPreData(pressureArr, "2号压力传感器") }}bar
      </div>
      <div class="text pres3">
        {{ getTemPreData(pressureArr, "3号压力传感器") }}bar
      </div>
      <div class="text pres4">
        {{ getTemPreData(pressureArr, "4号压力传感器") }}bar
      </div>
      <div class="text pres5">
        {{ getTemPreData(pressureArr, "5号压力传感器") }}bar
      </div>
      <div class="text pres6">
        {{ getTemPreData(pressureArr, "6号压力传感器") }}bar
      </div>
      <div class="text pres7">
        {{ getTemPreData(pressureArr, "7号压力传感器") }}bar
      </div>
      <div class="text pres8">
        {{ getTemPreData(pressureArr, "8号压力传感器") }}bar
      </div>
      <div class="text pres9">
        {{ getTemPreData(pressureArr, "9号压力传感器") }}bar
      </div>
      <!-- <div class="text pres10">
        {{ getTemPreData(pressureArr, "10号压力传感器") }}bar
      </div> -->
      <div class="text pres11">
        {{ getTemPreData(pressureArr, "11号压力传感器") }}bar
      </div>
      <!-- <div class="text pres12">
        {{ getTemPreData(pressureArr, "12号压力传感器") }}bar
      </div> -->

      <!-- 温度传感器 1-7号 -->
      <!-- <div class="text tem1">{{ getTemPreData(temArr, "1号温度传感器") }}℃</div> -->
      <div class="text tem2">{{ getTemPreData(temArr, "2号温度传感器") }}℃</div>
      <div class="text tem3">{{ getTemPreData(temArr, "3号温度传感器") }}℃</div>
      <div class="text tem4">{{ getHotMeterTemp(allValveArr, "温度模块2_输入值", 99) }}℃</div>
      <div class="text tem5">{{ getTemPreData(temArr, "5号温度传感器") }}℃</div>
      <div class="text tem6">{{ getTemPreData(temArr, "6号温度传感器") }}℃</div>
      <!-- <div class="text tem7">{{ getTemPreData(temArr, "7号温度传感器") }}℃</div> -->

      <!-- 热量表1数据 -->
      <div class="text intem1">
        {{ getHotMeterTemp(hotArrOne, "进水温度", 12) }}℃
      </div>
      <div class="text outtem1">
        {{ getHotMeterTemp(hotArrOne, "出水温度", 12) }}℃
      </div>
      <div class="text nowhot1">
        {{ getHotMeterTemp(hotArrOne, "瞬时热量", 47) }}kw
      </div>
      <!-- 热量表2数据 -->
      <div class="text intem2">
        {{ getHotMeterTemp(hotArrTwo, "进水温度", 12) }}℃
      </div>
      <div class="text outtem2">
        {{ getHotMeterTemp(hotArrTwo, "出水温度", 12) }}℃
      </div>
      <div class="text nowhot2">
        {{ getHotMeterTemp(hotArrTwo, "瞬时热量", 47) }}kw
      </div>
      <!-- 热量表3数据 -->
      <div class="text intem3">
        {{ getHotMeterTemp(hotArrThree, "进水温度", 12) }}℃
      </div>
      <div class="text outtem3">
        {{ getHotMeterTemp(hotArrThree, "出水温度", 12) }}℃
      </div>
      <div class="text nowhot3">
        {{ getHotMeterTemp(hotArrThree, "瞬时热量", 47) }}kw
      </div>
      <!-- 热量表4数据 -->
      <div class="text intem4">
        {{ getHotMeterTemp(hotArrFour, "进水温度", 12) }}℃
      </div>
      <div class="text outtem4">
        {{ getHotMeterTemp(hotArrFour, "出水温度", 12) }}℃
      </div>
      <div class="text nowhot4">
        {{ getHotMeterTemp(hotArrFour, "瞬时热量", 47) }}kw
      </div>
      <!-- 热量表5数据 -->
      <div class="text intem5">
        {{ getHotMeterTemp(hotArrFive, "进水温度", 12) }}℃
      </div>
      <div class="text outtem5">
        {{ getHotMeterTemp(hotArrFive, "出水温度", 12) }}℃
      </div>
      <div class="text nowhot5">
        {{ getHotMeterTemp(hotArrFive, "瞬时热量", 47) }}kw
      </div>
      <!-- 热量表6数据 -->
      <div class="text intem6">
        {{ getHotMeterTemp(hotArrSix, "进水温度", 12) }}℃
      </div>
      <div class="text outtem6">
        {{ getHotMeterTemp(hotArrSix, "出水温度", 12) }}℃
      </div>
      <div class="text nowhot6">
        {{ getHotMeterTemp(hotArrSix, "瞬时热量", 47) }}kw
      </div>
      <!-- 热量表7数据 -->
      <div class="text intem7">
        {{ getHotMeterTemp(hotArrSeven, "进水温度", 12) }}℃
      </div>
      <div class="text outtem7">
        {{ getHotMeterTemp(hotArrSeven, "出水温度", 12) }}℃
      </div>
      <div class="text nowhot7">
        {{ getHotMeterTemp(hotArrSeven, "瞬时热量", 47) }}kw
      </div>
      <!-- 二通阀门 -->
      <div class="text valve1">
        {{ getHotMeterTemp(valveOneArr, "二通阀门_开度反馈", 4) }}%
      </div>
      <!-- 可点击区域 -->
      <div class="text click2" @click="controlValve(valveOneArr, '二通阀门')"></div>
      <!-- 三通阀门 -->
      <img :src="getThreeWaySrc" :class="['text', openPercent <= 0 ? 'three-way-less' : 'three-way']" alt="" />
      <div :class="['text', openPercent <= 0 ? 'text11' : 'text18']">
        三通阀
      </div>
      <!-- 反馈值 -->
      <div :class="['text', openPercent <= 0 ? 'valve4' : 'valve3']">{{ openPercent }}%</div>
      <!-- 计算值 -->
      <div class="text valve2">
        {{ (100 - openPercent).toFixed(1) }}%
      </div>
      <div :class="['text', openPercent <= 0 ? 'click3' : 'click4']" @click="controlValve(valveTwoArr, '三通阀门')"></div>
    </div>
    <!-- 控制弹框内容 -->
    <el-dialog :title="controlTitle" :visible.sync="openHotDialog" width="500px" append-to-body class="monitor-dialog">
      <div class="hot-list">
        <div class="hot-data">
          <div class="hot-text">回水温度：</div>
          <div class="hot-details">
            {{ getHotMeterTemp(hotDialogArr, "出水温度", 12) }}℃
          </div>
        </div>
        <div class="hot-data">
          <div class="hot-text">供水温度：</div>
          <div class="hot-details">
            {{ getHotMeterTemp(hotDialogArr, "进水温度", 12) }}℃
          </div>
        </div>
        <div class="hot-data">
          <div class="hot-text">瞬时热量：</div>
          <div class="hot-details">
            {{ getHotMeterTemp(hotDialogArr, "瞬时热量", 47) }}kw
          </div>
        </div>
        <div class="hot-data">
          <div class="hot-text">瞬时流量小时：</div>
          <div class="hot-details">
            {{ getHotMeterTemp(hotDialogArr, "瞬时流量", 31) }}m³/h
          </div>
        </div>
        <div class="hot-data">
          <div class="hot-text">热能量累积量：</div>
          <div class="hot-details">
            {{ formatHeatValue(getHotMeterTemp(hotDialogArr, "累积热量", 47)) }}
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog :title="valveTitle" :visible.sync="openValveDialog" width="600px" append-to-body class="monitor-dialog">
      <div class="hot-list" style="width: 80%;">
        <div class="hot-data">
          <div class="hot-text">{{ valveTitle === '二通阀门' ? '实际温度差值：' : '实际温度值：' }}</div>
          <el-input readonly v-model="valveFormData.actualTempDiff" size="small"
            :placeholder="valveTitle === '二通阀门' ? '实际温度差值' : '实际温度值'"></el-input>
        </div>
        <div class="hot-data">
          <div class="hot-text">{{ valveTitle === '二通阀门' ? '设定温度差值：' : '设定温度值：' }}</div>
          <el-input v-model="valveFormData.setTempDiff" size="small" placeholder="设定温度差值" clearable
            @keyup.enter.native="handleEnter('设定温度差值', valveFormData.setTempDiffId, valveFormData.setTempDiff, $event)"
            @input="handleInput(valveFormData.setTempDiff)" @blur="handleBlur()"></el-input>
        </div>
        <div class="hot-data">
          <div class="hot-text">水阀输出值：</div>
          <el-input readonly v-model="valveFormData.valveOutput" size="small" placeholder="水阀输出值"></el-input>
        </div>
        <div class="hot-data">
          <div class="hot-text">P值：</div>
          <el-input v-model="valveFormData.pValue" size="small" placeholder="P值" clearable
            @keyup.enter.native="handleEnter('P值', valveFormData.pValueId, valveFormData.pValue, $event)"
            @input="handleInput(valveFormData.pValue)" @blur="handleBlur()"></el-input>
        </div>
        <div class="hot-data">
          <div class="hot-text">I值：</div>
          <el-input v-model="valveFormData.iValue" size="small" placeholder="I值" clearable
            @keyup.enter.native="handleEnter('I值', valveFormData.iValueId, valveFormData.iValue, $event)"
            @input="handleInput(valveFormData.iValue)" @blur="handleBlur()"></el-input>
        </div>
        <div class="hot-data">
          <div class="hot-text">D值：</div>
          <el-input v-model="valveFormData.dValue" size="small" placeholder="D值" clearable
            @keyup.enter.native="handleEnter('D值', valveFormData.dValueId, valveFormData.dValue, $event)"
            @input="handleInput(valveFormData.dValue)" @blur="handleBlur()"></el-input>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { runTime, operationConrol } from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import {
  monitorList,
  monitorTotalDatas,
} from "@/api/heatRecoverySys/deviceMonitor";
import { getDay } from "@/utils/datetime";
export default {
  data() {
    return {
      loading: false,
      currentDate: new Date(),
      nowTimer: null,
      isShowWarning: false, //是否有报警
      dayData: "", //监测天数
      timer: null, // 用于存储定时器 ID

      hotData: {}, //热量计量框
      pressureArr: [], //压力传感器
      temArr: [], //温度传感器
      hotArrOne: [], //热量表1数据
      hotArrTwo: [], //热量表2数据
      hotArrThree: [], //热量表3数据
      hotArrFour: [], //热量表4数据
      hotArrFive: [], //热量表5数据
      hotArrSix: [], //热量表6数据
      hotArrSeven: [], //热量表7数据
      valveOneArr: [], //二通阀门开度
      valveTwoArr: [], //三通阀门开度
      allValveArr: [], //二、三通阀门弹框数据

      openHotDialog: false,
      controlTitle: "热量表",
      hotDialogArr: [],

      openValveDialog: false,
      valveTitle: "",
      valveModule: "", // 温度模块名称
      valveFormData: {
        actualTempDiff: "", // 实际温度差值
        actualTempDiffId: "", // 实际温度差值ID
        setTempDiff: "", // 设定温度差值
        setTempDiffId: "", // 设定温度差值ID
        valveOutput: "", // 水阀输出值
        valveOutputId: "", // 水阀输出值ID
        pValue: "", // P值
        pValueId: "", // P值ID
        iValue: "", // I值
        iValueId: "", // I值ID
        dValue: "", // D值
        dValueId: "", // D值ID
      },
    };
  },
  computed: {
    formattedDate() {
      const year = this.currentDate.getFullYear();
      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
      const day = String(this.currentDate.getDate()).padStart(2, "0");
      const hours = String(this.currentDate.getHours()).padStart(2, "0");
      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
      const weekDays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const weekDay = weekDays[this.currentDate.getDay()];
      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
    },
    openPercent() {
      // 三通阀百分比数值
      // return 100;
      // 获取原始值并转成数字
      const originVal = Number(
        this.getHotMeterTemp(this.valveTwoArr, "三通阀门_开度反馈", 4)
      );
      console.log("三通阀百分比", Math.max(0, Math.min(100, originVal)))
      // 小于0返回0，大于100返回100，否则返回原值
      return Math.max(0, Math.min(100, originVal));
    },
    getThreeWaySrc() {
      if (this.openPercent <= 0) {
        return require("../../../assets/images/three-way-greater.png");
      } else if (this.openPercent >= 100) {
        return require("../../../assets/images/three-way-less.png");
      } else {
        return require("../../../assets/images/three-way-between.png");
      }
    },
  },
  mounted() {
    this.getAlarnStatus();
    this.getDayData();
    this.getMonitorList();
    this.getMonitorTotalData();
    // 在组件挂载后尝试进入全屏
    setTimeout(() => {
      this.requestFullscreen();
    }, 100); // 延迟 100 毫秒执行全屏操作
    // 设置定时器，每 10 秒执行一次
    this.timer = setInterval(() => {
      this.getAlarnStatus();
      this.getMonitorList();
      this.getMonitorTotalData();
    }, 10000);
    // 每秒更新一次时间
    this.nowTimer = setInterval(() => {
      this.currentDate = new Date();
    }, 1000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
    // 组件销毁前清除定时器
    if (this.nowTimer) {
      clearInterval(this.nowTimer);
    }
  },
  methods: {
    // 全屏操作
    requestFullscreen() {
      const element = document.documentElement;
      console.log("全屏了吗");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        // Firefox
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        // Chrome, Safari and Opera
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        // IE/Edge
        element.msRequestFullscreen();
      }
    },
    // 退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        // Firefox
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        // Chrome, Safari and Opera
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        // IE/Edge
        document.msExitFullscreen();
      }
    },
    // 进入系统首页
    goSys() {
      // this.exitFullscreen();
      this.$router.push("/");
    },
    // 返回上一页
    goBack() {
      window.history.go(-2);
    },
    // 监测天数
    getDayData() {
      runTime().then((res) => {
        if (res.code == 200) {
          this.dayData = res.data.runTime;
        }
      });
    },
    // 报警列表
    getAlarnStatus() {
      let data = {
        pageNum: 1,
        pageSize: 10,
        status: "0",
      };
      let timeArr = [getDay(0), getDay(0)];
      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
        if (res.code == 200 && res.rows.length > 0) {
          this.isShowWarning = true;
        } else {
          this.isShowWarning = false;
        }
      });
    },
    formatHeatValue(value) {
      // 判断数值大于1万的时候转成mkwh单位，1万kwh = 0.01mkwh，按需保留小数
      if (value > 10000) {
        return `${(value / 10000).toFixed(2)}mkwh`;
      }
      return `${value}kwh`;
    },
    // 工艺流程图数据
    getMonitorList() {
      let data = {
        systemType: "7",
      };
      monitorList(data).then((res) => {
        if (res.code == 200) {
          console.log("工艺流程图返回数据----------", res.rows);
          // 初始化各个设备列表
          this.pressureArr = [];
          this.temArr = [];
          this.hotArr = [];
          this.valveOneArr = [];
          this.valveTwoArr = [];
          this.allValveArr = [];

          res.rows.forEach((row) => {
            // 对 values 数组按照 orderNum 进行排序
            const sortedValues = row.values
              ? [...row.values].sort((a, b) => {
                // 确保 orderNum 是数字类型进行比较
                const orderA = Number(a.orderNum) || 0;
                const orderB = Number(b.orderNum) || 0;
                return orderA - orderB;
              })
              : [];

            switch (row.name) {
              case "13":
                this.pressureArr = sortedValues;
                console.log("排序后的压力传感器数组", this.pressureArr);
                break;
              case "14":
                this.temArr = sortedValues;
                console.log("排序后的温度传感器数组", this.temArr);
                break;
              case "6":
                // 处理热量表数据，按 orderNum 分配到不同数组
                this.processHotMeters(sortedValues);
                break;
              case "26":
                this.valveOneArr = sortedValues;
                console.log("排序后的二通阀门开度数据", this.valveOneArr);
                break;
              case "27":
                this.valveTwoArr = sortedValues;
                console.log("排序后的三通阀门开度数据", this.valveTwoArr);
                break;
              case "28":
                this.allValveArr = sortedValues;
                console.log("排序后的二三通阀门开度数据", this.allValveArr);
                // 获取二通阀、三通阀开度数据  获取T4温度

                break;
              default:
                break;
            }
          });
        }
      });
    },
    // 处理热量表数据的方法
    processHotMeters(sortedValues) {
      // 清空所有热量表数组
      this.hotArrOne = [];
      this.hotArrTwo = [];
      this.hotArrThree = [];
      this.hotArrFour = [];
      this.hotArrFive = [];
      this.hotArrSix = [];
      this.hotArrSeven = [];

      // 根据 orderNum 分配数据
      sortedValues.forEach((item) => {
        const orderNum = Number(item.orderNum);

        switch (orderNum) {
          case 1:
            this.hotArrOne.push(item);
            break;
          case 2:
            this.hotArrTwo.push(item);
            break;
          case 3:
            this.hotArrThree.push(item);
            break;
          case 4:
            this.hotArrFour.push(item);
            break;
          case 5:
            this.hotArrFive.push(item);
            break;
          case 6:
            this.hotArrSix.push(item);
            break;
          case 7:
            this.hotArrSeven.push(item);
            break;
          default:
            console.warn(`未知的 orderNum: ${orderNum}，跳过该热量表数据`);
            break;
        }
      });

      // 打印各个热量表数组
      console.log("热量表1数据:", this.hotArrOne);
      console.log("热量表2数据:", this.hotArrTwo);
      console.log("热量表3数据:", this.hotArrThree);
      console.log("热量表4数据:", this.hotArrFour);
      console.log("热量表5数据:", this.hotArrFive);
      console.log("热量表6数据:", this.hotArrSix);
      console.log("热量表7数据:", this.hotArrSeven);
    },
    // 获取热量表的温度值（进水温度/出水温度）  阀门开度反馈
    getHotMeterTemp(arr, type, id) {
      if (!arr || !Array.isArray(arr)) return null;

      // 查找对应类型的温度数据
      const item = arr.find((item) => {
        if (!item || !item.collectName) return false;
        return item.collectName.includes(type) && item.paramType == id;
      });
      if (!item) return null;
      // console.log("当前匹配名称和值", item.collectName, item.collectValue);
      return item.collectValue;
    },
    // 获取其他的数据
    getTemPreData(arr, type) {
      if (!arr || !Array.isArray(arr)) return null;

      // 查找对应类型的温度数据
      const item = arr.find((item) => {
        if (!item || !item.collectName) return false;
        return item.collectName == type;
      });
      if (!item) return null;
      // console.log("当前匹配名称和值", item.collectName, item.collectValue);
      return item.collectValue;
    },
    // 控制开度
    async controlValve(data, title) {
      try {
        this.valveTitle = title;
        this.valveModule = title === "二通阀门" ? "温度模块1" : "温度模块2";
        // 根据 allValveArr 获取数据并填充表单
        this.fillValveFormData();
        this.openValveDialog = true;
      } catch (error) {
        console.error("获取当前开度失败:", error);
        this.$message.error("获取当前开度失败，请重试");
      } finally {
        // this.loading = false;
      }
    },
    // 填充阀门控制表单数据
    fillValveFormData() {
      this.valveFormData = {
        actualTempDiff: "",
        actualTempDiffId: "",
        setTempDiff: "",
        setTempDiffId: "",
        valveOutput: "",
        valveOutputId: "",
        pValue: "",
        pValueId: "",
        iValue: "",
        iValueId: "",
        dValue: "",
        dValueId: "",
      };

      // 实际温度差值：collectName 包含温度模块名和"输入值"的 collectValue
      const actualItem = this.allValveArr.find(
        item => item.collectName.includes(this.valveModule) && item.collectName.includes("输入值")
      );
      if (actualItem) {
        this.valveFormData.actualTempDiff = actualItem.collectValue;
        this.valveFormData.actualTempDiffId = actualItem.id;
      }

      // 设定温度差值：collectName 包含温度模块名和"控制值"的 collectValue
      const setItem = this.allValveArr.find(
        item => item.collectName.includes(this.valveModule) && item.collectName.includes("控制值")
      );
      if (setItem) {
        this.valveFormData.setTempDiff = setItem.collectValue;
        this.valveFormData.setTempDiffId = setItem.id;
      }

      // 水阀输出值：collectName 包含"二通阀输出百分比"的 collectValue
      const outputItem = this.allValveArr.find(
        item => item.collectName.includes(this.valveModule) && item.collectName.includes("输出百分比")
      );
      if (outputItem) {
        this.valveFormData.valveOutput = (outputItem.collectValue / 10).toFixed(1);
        this.valveFormData.valveOutputId = outputItem.id;
      }

      // P值：collectName 包含温度模块名和"P"的 collectValue  显示除10，控制乘10
      const pItem = this.allValveArr.find(
        item => item.collectName.includes(this.valveModule) && item.collectName.includes("P")
      );
      if (pItem) {
        this.valveFormData.pValue = (pItem.collectValue / 10).toFixed(1);
        this.valveFormData.pValueId = pItem.id;
      }

      // I值：collectName 包含温度模块名和"I"的 collectValue
      const iItem = this.allValveArr.find(
        item => item.collectName.includes(this.valveModule) && item.collectName.includes("I")
      );
      if (iItem) {
        this.valveFormData.iValue = iItem.collectValue;
        this.valveFormData.iValueId = iItem.id;
      }

      // D值：collectName 包含温度模块名和"D"的 collectValue
      const dItem = this.allValveArr.find(
        item => item.collectName.includes(this.valveModule) && item.collectName.includes("D")
      );
      if (dItem) {
        this.valveFormData.dValue = dItem.collectValue;
        this.valveFormData.dValueId = dItem.id;
      }

      console.log("填充的表单数据:", this.valveFormData);
    },
    // 处理输入事件，过滤非数字字符
    handleInput(item) {
      console.log("校验");
      // 实时校验并过滤非数字字符
      item = String(item).replace(/[^\d]/g, "");
    },
    // 失去焦点
    handleBlur() {
    },
    handleEnter(name, id, value, event) {
      if (!value) {
        this.$modal.msgWarning("请输入当前值!");
        return
      }
      // 失去焦点
      event.target.blur();
      this.$confirm(
        `确定要修改${name}为:${value} 吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          // 准备请求参数
          // 如果name为P值，传给后端的value需要乘10
          const paramValue = name === "P值" ? value * 10 : value;
          const params = {
            id: id,
            param: paramValue,
          };
          console.log("params", params);
          // 调用operationConrol接口
          try {
            this.loading = true;
            const result = await operationConrol([params]);
            if (result.code == 200) {
              this.$modal.msgSuccess("指令下发成功!");
              setTimeout(() => {
                this.getMonitorList();
                this.getMonitorTotalData();
                this.loading = false;
              }, 3000);
            } else {
              this.$modal.msgError("指令下发失败!");
              this.loading = false;
            }
          } catch (error) {
            console.error("指令下发失败:", error);
            this.$modal.msgError("指令下发失败，请重试!");
            this.loading = false;
          }
        })
        .catch(() => {
          // 用户取消操作，需要更新原来的频率
          // this.$emit("upList");
          this.loading = false;
        });
    },
    // 积累热量数据
    getMonitorTotalData() {
      let data = {
        systemType: "7",
      };
      monitorTotalDatas(data).then((res) => {
        if (res.code == 200) {
          console.log("累计热量返回数据----------", res.rows);
          this.hotData = res.rows[0];
        }
      });
    },
    goWarning() {
      // this.exitFullscreen();
      this.$router.push("/alarm/alarmRecord");
    },
    // 热量表弹框
    hotListData(arr, title) {
      this.hotDialogArr = [];
      this.controlTitle = title;
      this.hotDialogArr = arr;
      console.log("当前热量表数据", this.hotDialogArr);
      this.openHotDialog = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.monitor {
  width: 100%;
  min-height: 100vh;
  background-color: black;
  color: #fff;

  .monitor-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0.1rem 0.2rem;
    position: relative;

    .title-left {
      width: 3.41rem;
      height: 0.8rem;
    }

    .title-center {
      width: 9.46rem;
      height: 0.8rem;
    }

    .title-right {
      width: 5.04rem;
      height: 0.78rem;
    }

    .sys-title {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.28rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
      cursor: pointer;
    }

    .nowTime {
      position: absolute;
      top: 0.37rem;
      right: 0.6rem;
      font-size: 0.18rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
    }

    .sys-logo {
      width: 1.8rem;
      height: 0.5rem;
      position: absolute;
      top: 0.26rem;
      left: 0.8rem;
      z-index: 10;
    }

    .monitor-time {
      position: absolute;
      top: 0.44rem;
      left: 4.2rem;
      z-index: 10;
      font-size: 0.18rem;
      color: #ffffff;
      font-weight: bold;
    }

    .icon_warning {
      position: absolute;
      top: 0.39rem;
      right: 4.4rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      margin: 0 0.25rem 0 0.27rem;
      cursor: pointer;
      /* 添加闪烁动画 */
      animation: blink 1s infinite;
    }

    @keyframes blink {
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }
    }

    .icon_home {
      position: absolute;
      top: 0.39rem;
      right: 4rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      margin: 0 0.2rem 0 0.27rem;
      cursor: pointer;
    }

    .back-icon {
      position: absolute;
      top: 0.39rem;
      right: 3.7rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      cursor: pointer;
    }
  }

  .host-detail {
    margin: 0 0.2rem;
    width: calc(100% - 0.4rem);
    height: 9.6rem;
    position: relative;
    background-image: url(../../../assets/images/monitor-border.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .flowchart {
      width: 16.806rem;
      height: 8.245rem;
      position: absolute;
      top: 0.5rem;
      left: 1.1rem;
    }

    .hot-details {
      width: 4.6rem;
      padding: 0.1rem;
      height: 3.05rem;
      background-image: url(../../../assets/images/monitor-hot.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      top: 0.4rem;
      right: 0.8rem;
      display: flex;
      flex-direction: column;

      .hot-title {
        font-size: 0.18rem;
        color: #ffffff;
        font-weight: bold;
        padding: 0.05rem 0 0 0.5rem;
        margin-bottom: 0.4rem;
      }

      .hot-li {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 0.16rem;
        color: #b8bbb7;
        position: relative;
        padding-left: 1rem;
        margin-bottom: 0.3rem;
        text-align: center;
        letter-spacing: 0.1em;

        .hot-icon {
          width: 1rem;
          height: 1rem;
          position: absolute;
          left: 0.2rem;
        }

        .hot-data {
          color: #ffffff;
          font-weight: bold;
          margin-left: 0.1rem;
        }
      }
    }

    .text {
      font-size: 0.18rem;
      color: #ffffff;
      position: absolute;
      letter-spacing: 0.1em;
    }

    .text1 {
      top: 1.2rem;
      left: 2.5rem;
    }

    .text2 {
      top: 1.5rem;
      left: 2.5rem;
    }

    .text3 {
      top: 2.6rem;
      left: 2.5rem;
    }

    .text4 {
      top: 2.9rem;
      left: 2.5rem;
    }

    .text5 {
      top: 4.3rem;
      left: 0.5rem;
    }

    .text6 {
      top: 2.55rem;
      left: 4.4rem;
    }

    .text7 {
      top: 3.35rem;
      left: 7.9rem;
    }

    .text8 {
      top: 5.02rem;
      left: 7.9rem;
    }

    .text9 {
      top: 6.7rem;
      left: 2rem;
    }

    .text10 {
      top: 5.45rem;
      left: 4.1rem;
      font-size: 0.14rem;
    }

    .text11 {
      top: 5.59rem;
      left: 11.5rem;
      font-size: 0.14rem;
    }

    .text18 {
      top: 5.1rem;
      left: 11.5rem;
      font-size: 0.14rem;
    }

    .text12 {
      top: 7.7rem;
      left: 6.4rem;
    }

    .text13 {
      top: 7.7rem;
      left: 8.6rem;
    }

    .text14 {
      top: 7.27rem;
      left: 11.65rem;
    }

    .text15 {
      top: 7.57rem;
      left: 14.1rem;
    }

    .text16 {
      top: 7.27rem;
      left: 16.3rem;
    }

    .text17 {
      top: 5.05rem;
      left: 14.1rem;
    }

    .pres0 {
      top: 1.57rem;
      left: 8.1rem;
      color: #eaf12a;
    }

    .pres1 {
      top: 2.35rem;
      left: 9.6rem;
      color: #eaf12a;
    }

    .pres2 {
      top: 4rem;
      left: 9.6rem;
      color: #eaf12a;
    }

    .pres3 {
      top: 5rem;
      left: 10.5rem;
      color: #eaf12a;
    }

    .pres4 {
      top: 5.1rem;
      left: 12.5rem;
      color: #eaf12a;
    }

    .pres5 {
      top: 2.9rem;
      left: 12.5rem;
      color: #eaf12a;
    }

    .pres6 {
      top: 2.35rem;
      left: 6.8rem;
      color: #eaf12a;
    }

    .pres7 {
      top: 3.9rem;
      left: 6.8rem;
      color: #eaf12a;
    }

    .pres8 {
      top: 7.5rem;
      left: 2.6rem;
      color: #eaf12a;
    }

    .pres9 {
      top: 7.5rem;
      left: 1.2rem;
      color: #eaf12a;
    }

    .pres10 {
      top: 4.92rem;
      left: 2.8rem;
      color: #eaf12a;
    }

    .pres11 {
      top: 4.9rem;
      left: 1.15rem;
      color: #eaf12a;
    }

    .pres12 {
      top: 8rem;
      left: 12.75rem;
      color: #eaf12a;
    }

    .tem1 {
      top: 2.33rem;
      left: 10.4rem;
      color: #ef4317;
    }

    .tem2 {
      top: 3.97rem;
      left: 10.4rem;
      color: #ef4317;
    }

    .tem3 {
      top: 5.27rem;
      left: 10.5rem;
      color: #ef4317;
    }

    .tem4 {
      top: 5.5rem;
      left: 12.5rem;
      color: #16cb64;
    }

    .tem5 {
      top: 7.49rem;
      left: 3.4rem;
      color: #ef4317;
    }

    .tem6 {
      top: 8.78rem;
      left: 13.25rem;
      color: #16cb64;
    }

    .tem7 {
      top: 7.98rem;
      left: 13.55rem;
      color: #ef4317;
    }

    .intem1 {
      top: 0.25rem;
      left: 7.2rem;
      color: #ef4317;
    }

    .outtem1 {
      top: 1.55rem;
      left: 7.2rem;
      color: #16cb64;
    }

    .nowhot1 {
      top: 1rem;
      left: 7.2rem;
      color: #ffffff;
    }

    .intem2 {
      top: 2.35rem;
      left: 6rem;
      color: #ef4317;
    }

    .outtem2 {
      top: 3.25rem;
      left: 6rem;
      color: #16cb64;
    }

    .nowhot2 {
      top: 2.85rem;
      left: 6rem;
      color: #ffffff;
    }

    .intem3 {
      top: 3.9rem;
      left: 6rem;
      color: #ef4317;
    }

    .outtem3 {
      top: 4.7rem;
      left: 6rem;
      color: #16cb64;
    }

    .nowhot3 {
      top: 4.3rem;
      left: 6rem;
      color: #ffffff;
    }

    .intem4 {
      top: 5.3rem;
      left: 1.2rem;
      color: #ef4317;
    }

    .outtem4 {
      top: 5.3rem;
      left: 3rem;
      color: #16cb64;
    }

    .nowhot4 {
      top: 5.33rem;
      left: 2.05rem;
      color: #ffffff;
    }

    .intem5 {
      top: 7.7rem;
      left: 11.1rem;
      color: #ef4317;
    }

    .outtem5 {
      top: 7.7rem;
      left: 12.75rem;
      color: #16cb64;
    }

    .nowhot5 {
      top: 7.7rem;
      left: 11.9rem;
      color: #ffffff;
    }

    .intem6 {
      top: 8.8rem;
      left: 10.5rem;
      color: #ef4317;
    }

    .outtem6 {
      top: 8rem;
      left: 10.5rem;
      color: #16cb64;
    }

    .nowhot6 {
      top: 8.4rem;
      left: 10.5rem;
      color: #ffffff;
    }

    .intem7 {
      top: 6rem;
      left: 13.4rem;
      color: #ef4317;
    }

    .outtem7 {
      top: 6rem;
      left: 15.1rem;
      color: #16cb64;
    }

    .nowhot7 {
      top: 6rem;
      left: 14.15rem;
      color: #ffffff;
    }

    .valve1 {
      top: 5.37rem;
      left: 4.9rem;
      color: #ffffff;
      cursor: pointer;
    }

    .valve2 {
      top: 5.55rem;
      left: 10.5rem;
      color: #ffffff;
      cursor: pointer;
    }

    .valve3 {
      top: 4.55rem;
      left: 12.2rem;
      color: #ffffff;
      cursor: pointer;
    }

    .valve4 {
      top: 4.55rem;
      left: 11.9rem;
      color: #ffffff;
      cursor: pointer;
    }

    .three-way {
      top: 4.4rem;
      left: 9.2rem;
      width: 4.38rem;
      height: 1.78rem;
    }

    .three-way-less {
      top: 4.7rem;
      left: 9.2rem;
      width: 4.39rem;
      height: 1.47rem;
    }

    .click2 {
      width: 0.8rem;
      height: 0.8rem;
      top: 4.9rem;
      left: 3.93rem;
      // background: #eaf12a;
      cursor: pointer;
      z-index: 999;
    }

    .click3 {
      width: 0.8rem;
      height: 0.8rem;
      top: 5rem;
      left: 11.32rem;
      // background: #eaf12a;
      cursor: pointer;
      z-index: 999;
    }

    .click4 {
      width: 0.8rem;
      height: 0.8rem;
      top: 4.5rem;
      left: 11.33rem;
      // background: #eaf12a;
      cursor: pointer;
      z-index: 999;
    }

    .p0 {
      top: 1.35rem;
      left: 8.3rem;
      color: #ffffff;
    }

    .p1 {
      top: 2.15rem;
      left: 9.75rem;
      color: #ffffff;
    }

    .p2 {
      top: 3.75rem;
      left: 9.75rem;
      color: #ffffff;
    }

    .p3 {
      top: 5rem;
      left: 10.15rem;
      color: #ffffff;
    }

    .p4 {
      top: 5.12rem;
      left: 13.25rem;
      color: #ffffff;
    }

    .p5 {
      top: 2.67rem;
      left: 12.7rem;
      color: #ffffff;
    }

    .p6 {
      top: 2.15rem;
      left: 6.9rem;
      color: #ffffff;
    }

    .p7 {
      top: 3.68rem;
      left: 6.9rem;
      color: #ffffff;
    }

    .p8 {
      top: 7.72rem;
      left: 2.8rem;
      color: #ffffff;
    }

    .p9 {
      top: 7.72rem;
      left: 1.3rem;
      color: #ffffff;
    }

    .p10 {
      top: 4.93rem;
      left: 3.55rem;
      color: #ffffff;
    }

    .p11 {
      top: 4.9rem;
      left: 0.7rem;
      color: #ffffff;
    }

    .p12 {
      top: 8.34rem;
      left: 12.9rem;
      color: #ffffff;
    }

    .t1 {
      top: 2.15rem;
      left: 10.45rem;
      color: #ffffff;
    }

    .t2 {
      top: 3.75rem;
      left: 10.45rem;
      color: #ffffff;
    }

    .t3 {
      top: 5.3rem;
      left: 10.15rem;
      color: #ffffff;
    }

    .t4 {
      top: 5.53rem;
      left: 13.25rem;
      color: #ffffff;
    }

    .t5 {
      top: 7.72rem;
      left: 3.55rem;
      color: #ffffff;
    }

    .t6 {
      top: 8.82rem;
      left: 12.9rem;
      color: #ffffff;
    }

    .t7 {
      top: 8.34rem;
      left: 13.7rem;
      color: #ffffff;
    }

    .h1 {
      top: 1rem;
      left: 6.2rem;
      color: #cecece;
      font-size: 0.16rem;
      padding: 0.06rem;
      border: 0.01rem dashed #646866;
      cursor: pointer;
    }

    .h2 {
      top: 3.15rem;
      left: 5.1rem;
      color: #cecece;
      font-size: 0.16rem;
      padding: 0.06rem;
      border: 0.01rem dashed #646866;
      cursor: pointer;
    }

    .h3 {
      top: 4.25rem;
      left: 5.1rem;
      color: #cecece;
      font-size: 0.16rem;
      padding: 0.06rem;
      border: 0.01rem dashed #646866;
      cursor: pointer;
    }

    .h4 {
      top: 5rem;
      left: 2rem;
      color: #cecece;
      font-size: 0.16rem;
      padding: 0.06rem;
      border: 0.01rem dashed #646866;
      cursor: pointer;
    }

    .h5 {
      top: 7.9rem;
      left: 11.82rem;
      color: #cecece;
      font-size: 0.16rem;
      padding: 0.06rem;
      border: 0.01rem dashed #646866;
      cursor: pointer;
    }

    .h6 {
      top: 8.35rem;
      left: 9.55rem;
      color: #cecece;
      font-size: 0.16rem;
      padding: 0.06rem;
      border: 0.01rem dashed #646866;
      cursor: pointer;
    }

    .h7 {
      top: 5.5rem;
      left: 14.15rem;
      color: #cecece;
      font-size: 0.16rem;
      padding: 0.06rem;
      border: 0.01rem dashed #646866;
      cursor: pointer;
    }
  }
}

.hot-list {
  display: flex;
  flex-direction: column;
  margin-left: 50px;

  .hot-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;

    .hot-text {
      // text-align: center;
      margin-right: 8px;
      min-width: 100px;
      white-space: nowrap;
    }

    .hot-details {
      background-color: #1960a3;
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 16px;
      width: 180px;
      text-align: center;
      font-weight: bold;
      letter-spacing: 0.1em;
    }
  }
}
</style>
