kd-aiot-frontend-pcs/src/views/home/yuxin.vue

<template>
  <vue-fullscreen
    class="box-container"
    v-cloak
    v-model="isFullscreen"
    fullscreenClass="box-container"
    :exit-on-click-wrapper="false"
    :style="{ height: isFullscreen ? '100vh' : 'calc(100vh - 96px)' }"
  >
    <div class="header-section">
      <div class="box-header-scroll">
        <div class="logo">
          <el-select
            v-model="currentId"
            placeholder="请选择"
            class="custom-select"
            popper-class="custom-select-dropdown"
            @change="init"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="header-center">
          <div class="title" style="margin-bottom: 20px">生产管控</div>
        </div>
        <div class="time">
          <div class="time-display">
            <span class="date-text">{{ date }}</span>
            <span class="time-text">{{ time }}</span>
          </div>
          <span class="fullscreen-toggle" @click.passive="onFullscreen">
            <i
              v-if="isFullscreen"
              title="取消全屏"
              class="el-icon-_screen-restore"
            />
            <i v-else title="全屏" class="el-icon-_screen-full" />
          </span>
        </div>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 燃烧系统 -->
      <div class="system-panel combustion-panel">
        <div class="panel-title">
          <div class="panel-icon"></div>
          燃烧系统
        </div>
        <div class="panel-body combustion-body">
          <div class="bg-image combustion-bg"></div>
          <!-- 文字标签覆盖层 -->
          <div class="overlay-labels">
            <!-- 1#给煤机区域 -->
            <div class="label device-name" style="left: -0.1%; top: 45%"
              >1#给煤机</div
            >
            <div class="label data-box" style="left: 7%; top: 41%">{{
              gmj1.频率.value.value + ' ' + gmj1.频率.value.unit
            }}</div>
            <!-- 2#给煤机区域 -->
            <div class="label device-name" style="left: -0.1%; top: 65%"
              >2#给煤机</div
            >
            <div class="label data-box" style="left: 7%; top: 59.5%">{{
              gmj2.频率.value.value + ' ' + gmj2.频率.value.unit
            }}</div>
            <!-- 锅炉顶部 -->
            <div class="label data-box" style="left: 13%; top: 8%">{{
              lt.炉膛温度左.value.value + ' ' + lt.炉膛温度左.value.unit
            }}</div>
            <div class="label data-box" style="left: 19%; top: 8%">{{
              lt.炉膛出口温度右.value.value + ' ' + lt.炉膛出口温度右.value.unit
            }}</div>
            <!-- 锅炉上部 -->
            <!-- <div class="label data-box" style="left: 15.5%; top: 22%"
              >+104 Pa</div
            > -->
            <!-- 锅炉中部 -->
            <div class="label data-box" style="left: 15.5%; top: 38%">{{
              lt.炉膛出口压力.value.value + ' ' + lt.炉膛出口压力.value.unit
            }}</div>
            <!-- 锅炉右侧 -->
            <!-- <div class="label data-box" style="left: 15.5%; top: 53%"
              >+392 Pa</div
            > -->
            <!-- 锅炉下部温度组 -->
            <div class="label data-box" style="left: 13.7%; top: 57.5%">{{
              lt.下端温度左.value.value + ' ' + lt.下端温度左.value.unit
            }}</div>
            <div class="label data-box" style="left: 13.7%; top: 64%">{{
              lt.沸中温度左.value.value + ' ' + lt.沸中温度左.value.unit
            }}</div>
            <div class="label data-box" style="left: 13.7%; top: 71%">{{
              lt.沸下温度左.value.value + ' ' + lt.沸下温度左.value.unit
            }}</div>
            <!-- <div class="label data-box" style="left: 15.8%; top: 79%">87%</div> -->
            <div class="label data-box" style="left: 13%; top: 81%">{{
              lc.料层差压左.value.value + ' ' + lc.料层差压左.value.unit
            }}</div>
            <div class="label data-box" style="left: 17.5%; top: 81%">{{
              lc.料层差压右.value.value + ' ' + lc.料层差压右.value.unit
            }}</div>
            <div class="label data-box" style="left: 17.5%; top: 57.5%">{{
              lt.下端温度右.value.value + ' ' + lt.下端温度右.value.unit
            }}</div>
            <div class="label data-box" style="left: 17.5%; top: 64%">{{
              lt.沸中温度右.value.value + ' ' + lt.沸中温度右.value.unit
            }}</div>
            <div class="label data-box" style="left: 17.5%; top: 71%">{{
              lt.沸下温度右.value.value + ' ' + lt.沸下温度右.value.unit
            }}</div>
            <!-- 除尘器 -->
            <div class="label data-box" style="left: 45.4%; top: 0"
              >后烟压:{{
                ccq.后烟压.value.value + ' ' + ccq.后烟压.value.unit
              }}</div
            >
            <div class="label data-box" style="left: 45.4%; top: 6%"
              >出口烟温:{{
                ccq.出口烟温.value.value + ' ' + ccq.出口烟温.value.unit
              }}</div
            >
            <div
              class="label device-name"
              style="left: 46.6%; top: 12.6%; color: #333; text-shadow: none"
              >除尘器</div
            >
            <!-- 二次风机 -->
            <div class="label device-name" style="left: 59%; top: 43%"
              >二次风机</div
            >
            <div class="label data-box" style="left: 59%; top: 70%"
              >二次风压:
              {{ ecfj.风压.value.value + ' ' + ecfj.风压.value.unit }}</div
            >
            <!-- 一次风机 -->
            <div class="label device-name" style="left: 48%; top: 70%"
              >一次风机</div
            >
            <!-- 底部功率 -->
            <div class="label data-box" style="left: 48%; top: 94%"
              >频率:{{
                ycfj.频率.value.value + ' ' + ycfj.频率.value.unit
              }}</div
            >
            <!-- 引风机 -->
            <div class="label device-name" style="left: 72%; top: 31%"
              >引风机</div
            >
            <div class="label data-box" style="left: 71%; top: 56%"
              >功率: {{ yfj.频率.value.value + ' ' + yfj.频率.value.unit }}</div
            >
          </div>
        </div>
      </div>

      <!-- 汽水系统 -->
      <div class="system-panel steam-panel">
        <div class="panel-title">
          <div class="panel-icon"></div>
          汽水系统
        </div>
        <div class="panel-body steam-body">
          <div class="bg-image steam-bg"></div>
          <!-- 文字标签覆盖层 -->
          <div class="overlay-labels">
            <!-- 左侧仪表参数 -->
            <div class="label data-box" style="left: 6.5%; top: 0%"
              >主蒸汽压力:{{
                zzq.主蒸汽压力.value.value + ' ' + zzq.主蒸汽压力.value.unit
              }}</div
            >
            <div class="label data-box" style="left: 6.5%; top: 24%"
              >主蒸汽温度:
              {{
                zzq.主蒸汽温度.value.value + ' ' + zzq.主蒸汽温度.value.unit
              }}</div
            >
            <!-- 高温过热器 -->
            <!-- <div class="label data-box" style="left: 21%; top: 1%"
              >温度:
              {{
                gwgrq.出口温度.value.value + ' ' + gwgrq.出口温度.value.unit
              }}</div
            >
            <div class="label data-box" style="left: 20.8%; top: 7%"
              >压力:{{
                gwgrq.进口蒸汽压力.value.value +
                ' ' +
                gwgrq.进口蒸汽压力.value.unit
              }}</div
            > -->
            <div
              class="label device-name"
              style="
                left: 22%;
                top: 25%;
                font-size: 18px;
                color: #000;
                text-shadow: none;
              "
              >高温</div
            >
            <div
              class="label device-name"
              style="
                left: 21.5%;
                top: 29%;
                font-size: 18px;
                color: #000;
                text-shadow: none;
              "
              >过热器</div
            >
            <!-- 低温过热器 -->
            <div class="label data-box" style="left: 35.9%; top: 0"
              >温度:{{
                dwgrq.进口温度.value.value + ' ' + dwgrq.进口温度.value.unit
              }}</div
            >
            <div class="label data-box" style="left: 35.7%; top: 5%"
              >压力:
              {{
                dwgrq.低温过热器前烟压.value.value +
                ' ' +
                dwgrq.低温过热器前烟压.value.unit
              }}</div
            >
            <div
              class="label device-name"
              style="
                left: 37%;
                top: 25%;
                font-size: 18px;
                color: #000;
                text-shadow: none;
              "
              >低温</div
            >
            <div
              class="label device-name"
              style="
                left: 36.6%;
                top: 29%;
                font-size: 18px;
                color: #000;
                text-shadow: none;
              "
              >过热器</div
            >
            <!-- 气包 -->
            <div
              class="label device-name"
              style="
                left: 53.2%;
                top: 34%;
                font-size: 18px;
                color: #000;
                text-shadow: none;
              "
              >汽包</div
            >
            <div class="label data-box" style="left: 53%; top: 40%"
              >汽包液位:{{
                qp.汽包液位.value.value + ' ' + qp.汽包液位.value.unit
              }}</div
            >
            <!-- 气包右侧参数 -->
            <div class="label data-box" style="left: 54%; top: 9%"
              >汽包进口温度:{{
                qp.汽包进口温度.value.value + ' ' + qp.汽包进口温度.value.unit
              }}</div
            >
            <div class="label data-box" style="left: 54%; top: 19%"
              >汽包出口温度:{{
                qp.汽包出口温度.value.value + ' ' + qp.汽包出口温度.value.unit
              }}</div
            >
            <!-- 省煤器 -->
            <div class="label device-name" style="left: 71%; top: 37%"
              >省煤器</div
            >
            <div class="label data-box" style="left: 70%; top: 6%"
              >出口水温:
              {{
                smq.出口水温.value.value + ' ' + smq.出口水温.value.unit
              }}</div
            >
            <!-- 给水箱 -->
            <div class="label data-box" style="left: 36%; top: 67%"
              >水位:{{
                sxyw.水位.value.value + ' ' + sxyw.水位.value.unit
              }}</div
            >
            <!-- 给水泵 -->
            <div class="label device-name" style="left: 60%; top: 87%"
              >给水泵</div
            >
            <div class="label data-box" style="left: 78%; top: 80%"
              >压力:
              {{ gs.给水压力.value.value + ' ' + gs.给水压力.value.unit }}</div
            >
            <div class="label data-box" style="left: 78%; top: 91%"
              >出口流量:
              {{ gs.出口流量.value.value + ' ' + gs.出口流量.value.unit }}</div
            >
            <!-- 左下角给水 -->
            <div class="label device-name" style="left: 2%; top: 87.6%"
              >给水</div
            >
            <div class="label data-box" style="left: 4%; top: 82%"
              >进口流量:
              {{
                zgs.进口流量.value.value + ' ' + zgs.进口流量.value.unit
              }}</div
            >
          </div>
          <!-- 右侧排放数据面板 -->
          <div class="emission-panel">
            <div class="emission-item">
              <span class="emission-label">颗粒物:</span>
              <span class="emission-value">{{
                yqpf.颗粒物.value.value + ' ' + yqpf.颗粒物.value.unit
              }}</span>
            </div>
            <div class="emission-item">
              <span class="emission-label">NOX:</span>
              <span class="emission-value">{{
                yqpf.NOX.value.value + ' ' + yqpf.NOX.value.unit
              }}</span>
            </div>
            <div class="emission-item">
              <span class="emission-label">O2:</span>
              <span class="emission-value">{{
                yqpf.O2.value.value + ' ' + yqpf.O2.value.unit
              }}</span>
            </div>

            <div class="emission-item">
              <span class="emission-label">排烟温度:</span>
              <span class="emission-value">{{
                yqpf.排烟温度.value.value + ' ' + yqpf.排烟温度.value.unit
              }}</span>
            </div>
            <div class="emission-item">
              <span class="emission-label">SO2:</span>
              <span class="emission-value">{{
                yqpf.SO2.value.value + ' ' + yqpf.SO2.value.unit
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </vue-fullscreen>
</template>

<script>
  import { component } from 'vue-fullscreen';
  import { getRealData } from '@/api/pcsData/index.js';
  import { values } from 'lodash';

  export default {
    name: 'PcsDataDashboard',
    components: {
      VueFullscreen: component
    },
    data() {
      return {
        //烟气排放
        yqpf: {
          deviceId: {
            5: '2036027830998446082',
            6: '2036033114630303745',
            7: '2036020851676590081'
          },
          颗粒物: {
            5: 'AI0014',
            6: 'AI0014',
            7: 'AI0040',
            value: {
              value: '',
              unit: ''
            }
          },
          NOX: {
            5: 'AI0018',
            6: 'AI0018',
            7: 'AI0046',
            value: {
              value: '',
              unit: ''
            }
          },
          O2: {
            5: 'AI0019',
            6: 'AI0019',
            7: 'AI0047',
            value: {
              value: '',
              unit: ''
            }
          },

          排烟温度: {
            5: 'AI0042',
            6: 'AI0042',
            5: 'AI0019',
            value: {
              value: '',
              unit: ''
            }
          },

          SO2: {
            5: 'AI0067',
            6: 'AI0042',
            7: 'AI0045',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //水箱液位
        sxyw: {
          deviceId: {
            5: '2008477438320357378',
            6: '2008477438257442817',
            7: '2008477438190333954'
          },
          水位: {
            5: 'AI0074',
            6: 'AI0070',
            7: 'AI0009',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //主给水
        zgs: {
          deviceId: {
            5: '2048945828386091010',
            6: '2048945828440616962',
            7: '2064913192936058881'
          },
          进口流量: {
            5: 'AI0043',
            6: 'AI0024',
            7: '0',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //给水
        gs: {
          deviceId: {
            5: '2048945828327370754',
            6: '2048945828289622018',
            7: '2048945828251873282'
          },
          给水压力: {
            5: 'AI0013',
            6: 'AI0013',
            7: 'AI0009',
            value: {
              value: '',
              unit: ''
            }
          },
          出口流量: {
            5: 'AI0024',
            6: 'AI0024',
            7: 'AI0028',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //省煤器
        smq: {
          deviceId: {
            5: '2036027830256054273',
            6: '2036033113808220162',
            7: '2036020850758037505'
          },
          出口水温: {
            5: 'AI0022',
            6: 'AI0022',
            7: 'AI0066',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //气泡
        qp: {
          deviceId: {
            5: '2036027832722305025',
            6: '2036033116354162689',
            7: '0'
          },
          汽包进口温度: {
            5: 'AI0069',
            6: '0',
            7: '0',
            value: {
              value: '',
              unit: ''
            }
          },
          汽包液位: {
            5: 'AI0071',
            6: 'AI0075',
            7: '0',
            value: {
              value: '',
              unit: ''
            }
          },
          汽包出口温度: {
            5: 'AI0075',
            6: '0',
            7: '0',
            value: {
              value: '',
              unit: ''
            }
          }
        },

        //主蒸汽
        zzq: {
          deviceId: {
            5: '2036027831287853057',
            6: '2036033114848407554',
            7: '2036020851353628674'
          },
          主蒸汽压力: {
            5: 'AI0023',
            6: 'AI0023',
            7: 'AI0014',
            value: {
              value: '',
              unit: ''
            }
          },
          主蒸汽温度: {
            5: 'AI0045',
            6: 'AI0045',
            7: 'AI0023',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //高温过热器
        gwgrq: {
          deviceId: {
            5: '2036027830004396033',
            6: '2036033113632059394',
            7: '2036020850602848258'
          },
          进口蒸汽压力: {
            5: '0',
            6: '0',
            7: '0',
            value: {
              value: '',
              unit: ''
            }
          },
          出口温度: {
            5: '0',
            6: '0',
            7: '0',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //低温过热器
        dwgrq: {
          deviceId: {
            5: '2036027829865984001',
            6: '2036033113489453058',
            7: '2036020850384744450'
          },
          低温过热器前烟压: {
            5: 'AI0006',
            6: 'AI0006',
            7: 'AI0006',
            value: {
              value: '',
              unit: ''
            }
          },
          进口温度: {
            5: 'AI0068',
            6: 'AI0069',
            7: '0',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //给煤机
        gmj1: {
          deviceId: {
            5: '2036027831950553090',
            6: '2036033115469164546',
            7: '2036020852775497730'
          },
          频率: {
            5: 'AI0035',
            6: 'AI0035',
            7: 'AI0037',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        gmj2: {
          deviceId: {
            5: '2036027831766003713',
            6: '2036033115326558209',
            7: '2036020852607725570'
          },
          频率: {
            5: 'AI0036',
            6: 'AI0036',
            7: 'AI0038',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //料层
        lc: {
          deviceId: {
            5: '2036027832571310081',
            6: '2036033116027006978',
            7: '2036020853366894594'
          },
          料层差压左: {
            5: 'AI0063',
            6: 'AI0063',
            7: 'AI0063',
            value: {
              value: '',
              unit: ''
            }
          },
          料层差压右: {
            5: 'AI0064',
            6: 'AI0064',
            7: 'AI0064',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //炉膛
        lt: {
          deviceId: {
            5: '2036027829618520065',
            6: '2036033113225211905',
            7: '2036020850216972290'
          },
          下端温度左: {
            5: 'AI0053',
            6: 'AI0053',
            7: 'AI0053',
            value: {
              value: '',
              unit: ''
            }
          },
          沸中温度左: {
            5: 'AI0051',
            6: 'AI0051',
            7: 'AI0051',
            value: {
              value: '',
              unit: ''
            }
          },
          沸下温度左: {
            5: 'AI0049',
            6: 'AI0049',
            7: 'AI0049',
            value: {
              value: '',
              unit: ''
            }
          },
          下端温度右: {
            5: 'AI0054',
            6: 'AI0054',
            7: 'AI0054',
            value: {
              value: '',
              unit: ''
            }
          },
          沸中温度右: {
            5: 'AI0052',
            6: 'AI0052',
            7: 'AI0052',
            value: {
              value: '',
              unit: ''
            }
          },
          沸下温度右: {
            5: 'AI0050',
            6: 'AI0050',
            7: 'AI0050',
            value: {
              value: '',
              unit: ''
            }
          },
          炉膛温度左: {
            5: 'AI0066',
            6: 'AI0066',
            7: '0',
            value: {
              value: '',
              unit: ''
            }
          },
          炉膛出口温度右: {
            5: 'AI0055',
            6: 'AI0055',
            7: 'AI0055',
            value: {
              value: '',
              unit: ''
            }
          },
          炉膛出口压力: {
            5: 'AI0004',
            6: 'AI0004',
            7: 'AI0004',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        //除尘器
        ccq: {
          deviceId: {
            5: '2008477400542261249',
            6: '2008477400445792258',
            7: '2008477400353517569'
          },
          后烟压: {
            5: 'AI0011',
            6: 'AI0011',
            7: 'AI0011',
            value: {
              value: '',
              unit: ''
            }
          },
          出口烟温: {
            5: 'AI0020',
            6: 'AI0020',
            7: 'AI0020',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        ycfj: {
          deviceId: {
            5: '2008477365637263361',
            6: '2008477365553377282',
            7: '2008477365473685505'
          },
          频率: {
            5: 'AI0030',
            6: 'AI0030',
            7: 'AI0034',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        ecfj: {
          deviceId: {
            5: '2008477365368827905',
            6: '2008477365305913345',
            7: '2008477365238804481'
          },
          风压: {
            5: 'AI0012',
            6: 'AI0012',
            7: 'AI0012',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        yfj: {
          deviceId: {
            5: '2008477365154918402',
            6: '2008477365087809538',
            7: '2008477365029089281'
          },
          频率: {
            5: 'AI0029',
            6: 'AI0029',
            7: 'AI0033',
            value: {
              value: '',
              unit: ''
            }
          }
        },
        isFullscreen: false,
        isFlag: false,
        date: '',
        time: '',
        week: '',
        selectedValue: '',
        selectOptions: [
          {
            label: '5#场站',
            value: 5
          },
          {
            label: '6#场站',
            value: 6
          },
          {
            label: '7#场站',
            value: 7
          }
        ],
        comprehensiveList: [],
        currentId: 5,
        boilerData: [
          {
            title: '锅炉运行参数',
            params: []
          },
          {
            title: '注气检查记录',
            params: []
          },
          {
            title: '蒸汽质量检查记录',
            params: []
          }
        ],
        alertStatsData: [],
        alertLegend: [
          { name: '一般告警', percent: 45.2, color: '#3b82f6' },
          { name: '警告告警', percent: 35.3, color: '#f59e0b' },
          { name: '严重告警', percent: 4.7, color: '#ef4444', value: 58 },
          { name: '紧急告警', percent: 15.2, color: '#ef4444' }
        ],
        alertConfig: {},
        unitValue: '',
        unitOptions: [
          { label: '1#机组', value: '1' },
          { label: '2#机组', value: '2' },
          { label: '3#机组', value: '3' },
          { label: '4#机组', value: '4' }
        ],
        energyTabs: [
          { label: '水', value: '1' },
          { label: '煤', value: '2' }
        ],
        activeEnergyTab: '1',
        charts: {},
        stationId: ''
      };
    },
    watch: {
      isFullscreen: {
        handler() {
          this.handleResize();
        },
        immediate: true
      }
    },
    created() {
      this.init();
    },
    mounted() {
      this.updateTimer = setInterval(this.updateTime, 1000);

      this.initTimer = setInterval(() => {
        this.init();
      }, 180000);
      // 初始化时同步头部宽度
      // this.$nextTick(() => {
      //   this.syncHeaderWidth();
      // });
    },
    beforeDestroy() {
      clearInterval(this.updateTimer);
      clearInterval(this.initTimer);
      window.removeEventListener('resize', this.handleResize);
      Object.values(this.charts).forEach((chart) => chart && chart.dispose());
    },
    methods: {
      init() {
        this.getYqpf();
        this.getSxyw();
        this.getGs();
        this.getSmq();
        this.getQp();
        this.getZzq();
        // this.getGwgrq();
        this.getDwgrq();
        this.getGmj1();
        this.getGmj2();
        this.getLc();
        this.getLt();
        this.getCcq();
        this.getYcfj();
        this.getEcfj();
        this.getYfj();
        this.getZgs()
      },

      onFullscreen() {
        this.isFullscreen = !this.isFullscreen;
      },

      updateTime() {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        this.time = `${hours}:${minutes}:${seconds}`;

        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        this.date = `${year}-${month}-${day}`;
      },
      syncHeaderWidth() {
        this.$nextTick(() => {
          const threeColumnLayout =
            document.querySelector('.two-column-layout');
          const headerSection = document.querySelector('.header-section');
          if (threeColumnLayout && headerSection) {
            const layoutWidth = threeColumnLayout.scrollWidth;
            headerSection.style.width = layoutWidth + 'px';
          }
        });
      },
      handleResize() {
        this.$nextTick(() => {
          Object.values(this.charts).forEach(
            (chart) => chart && chart.resize()
          );
        });
      },

      getYqpf() {
        const keys = ['颗粒物', 'NOX', 'O2', '排烟温度', 'SO2'];
        getRealData(this.yqpf.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.yqpf[key][this.currentId]) {
                this.yqpf[key].value = {
                  value: item.value,
                  unit: item.unit
                };
                // console.log(this.yqpf[key]);
                // console.log(key);
              }
            });
          });
        });
      },
      getSxyw() {
        const keys = ['水位'];
        getRealData(this.sxyw.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.sxyw[key][this.currentId]) {
                this.sxyw[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getGs() {
        const keys = ['给水压力', '出口流量'];
        getRealData(this.gs.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.gs[key][this.currentId]) {
                this.gs[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getSmq() {
        const keys = ['出口水温'];
        getRealData(this.smq.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.smq[key][this.currentId]) {
                this.smq[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getQp() {
        const keys = ['汽包进口温度', '汽包液位', '汽包出口温度'];
        getRealData(this.qp.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.qp[key][this.currentId]) {
                this.qp[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getZzq() {
        const keys = ['主蒸汽压力', '主蒸汽温度'];
        getRealData(this.zzq.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.zzq[key][this.currentId]) {
                this.zzq[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getDwgrq() {
        const keys = ['低温过热器前烟压', '进口温度'];
        getRealData(this.dwgrq.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.dwgrq[key][this.currentId]) {
                this.dwgrq[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getGmj1() {
        const keys = ['频率'];
        getRealData(this.gmj1.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.gmj1[key][this.currentId]) {
                this.gmj1[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getGmj2() {
        const keys = ['频率'];
        getRealData(this.gmj2.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.gmj2[key][this.currentId]) {
                this.gmj2[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getLc() {
        const keys = ['料层差压左', '料层差压右'];
        getRealData(this.lc.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.lc[key][this.currentId]) {
                this.lc[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getLt() {
        const keys = [
          '下端温度左',
          '沸中温度左',
          '沸下温度左',
          '下端温度右',
          '沸中温度右',
          '沸下温度右',
          '炉膛温度左',
          '炉膛出口温度右',
          '炉膛出口压力'
        ];
        getRealData(this.lt.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.lt[key][this.currentId]) {
                this.lt[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getCcq() {
        const keys = ['后烟压', '出口烟温'];
        getRealData(this.ccq.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.ccq[key][this.currentId]) {
                this.ccq[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getYcfj() {
        const keys = ['频率'];
        getRealData(this.ycfj.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.ycfj[key][this.currentId]) {
                this.ycfj[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getEcfj() {
        const keys = ['风压'];
        getRealData(this.ecfj.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.ecfj[key][this.currentId]) {
                this.ecfj[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getYfj() {
        const keys = ['频率'];
        getRealData(this.yfj.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.yfj[key][this.currentId]) {
                this.yfj[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      },
      getZgs() {
        const keys = ['进口流量'];
        getRealData(this.zgs.deviceId[this.currentId]).then((res) => {
          res.forEach((item) => {
            keys.forEach((key) => {
              if (item.identifier == this.zgs[key][this.currentId]) {
                this.zgs[key].value = {
                  value: item.value,
                  unit: item.unit
                };
              }
            });
          });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .box-container {
    width: 100%;

    overflow: hidden;
    font-family: 'Microsoft YaHei', sans-serif;
    display: flex;
    flex-direction: column;
    background: url('~@/assets/pcs/back.png') no-repeat center center;
    background-size: cover;
    .box-header-scroll {
      height: 80px;
      background: url('~@/assets/pcs/header.png') no-repeat center top;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      position: relative;
      z-index: 10;

      .logo {
        padding-top: 10px;
        position: absolute;
        left: 80px;

        ::v-deep .custom-select {
          .el-input__inner {
            background: #0d2960;
            border: 1px solid #1a4a8a;
            color: #fff;
            height: 36px;
            line-height: 36px;

            &::placeholder {
              color: #8ba3c7;
            }
          }

          .el-input__suffix {
            .el-input__icon {
              color: #8ba3c7;
            }
          }
        }
      }

      .title {
        flex: 1;
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        letter-spacing: 4px;
      }

      .time {
        position: absolute;
        right: 30px;
        width: 280px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;

        .time-display {
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .date-text {
            font-size: 14px;
            color: #8ba3c7;
          }

          .time-text {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
          }
        }

        .fullscreen-toggle {
          cursor: pointer;
          font-size: 20px;
          color: #8ba3c7;
          transition: color 0.3s;

          &:hover {
            color: #3b82f6;
          }
        }
      }
    }
    .header-section {
      width: auto;
      flex-shrink: 0;
      padding-top: 10px;
      min-width: 100%;
    }

    .main-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: calc(100% - 100px);
      min-width: 100%;
      margin-top: 20px;
      font-size: 0;
      padding: 0 15px 15px;
      gap: 15px;
    }

    .system-panel {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      overflow: hidden;

      .panel-title {
        font-size: 24px;
        font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
        color: #fff;
        margin-bottom: 10px;
        height: 42px;
        padding-left: 40px;
        position: relative;
        display: flex;
        align-items: center;
        background: url('~@/assets/pcs/titleb.png') no-repeat center top;
        background-size: 100% 100%;
        flex-shrink: 0;

        .panel-icon {
          position: absolute;
          left: 15px;
          width: 20px;
          height: 25px;
          background: url('~@/assets/pcs/titleIcon.png') no-repeat center top;
          background-size: 100% 100%;
        }
      }

      .panel-body {
        flex: 1;
        min-height: 0;
        position: relative;
        overflow: hidden;
        padding: 0 50px;

        .bg-image {
          position: absolute;

          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 100% 100%;
          z-index: 1;

          &.combustion-bg {
            background-image: url('~@/assets/home1.png');
            left: 80px;
            width: auto;
            right: 100px;
          }

          &.steam-bg {
            background-image: url('~@/assets/home2.png');
            left: 80px;
            // top: 30px;
            right: 10%;
            width: auto;
          }
        }

        .overlay-labels {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2;

          .label {
            position: absolute;
            white-space: nowrap;
            z-index: 3;

            &.data-box {
              background: #fff;
              color: #333;
              font-size: 12px;
              font-weight: 500;
              padding: 3px 8px;
              border-radius: 3px;
              border: 1px solid #ddd;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            &.device-name {
              color: #fff;
              font-size: 14px;
              font-weight: bold;
              text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
              padding: 2px 4px;
            }
          }
        }
      }

      &.combustion-panel {
        flex: 1.2;
      }

      &.steam-panel {
        flex: 1.5;
      }
    }

    .emission-panel {
      position: absolute;
      right: 1%;
      top: 8%;
      width: 170px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 10px 8px;
      // background: rgba(10, 25, 60, 0.5);
      // border: 1px solid rgba(43, 111, 216, 0.2);
      border-radius: 4px;
      z-index: 20;

      .emission-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 2px;

        .emission-label {
          color: #fff;
          font-size: 16px;
          white-space: nowrap;
        }

        .emission-value {
          color: #333;
          font-size: 13px;
          font-weight: 500;
          background: #fff;
          border: 1px solid #ddd;
          border-radius: 3px;
          padding: 2px 8px;
          min-width: 70px;
          text-align: center;
          white-space: nowrap;
        }
      }
    }
  }

  [v-cloak] {
    display: none;
  }
</style>