From 5dbb6d8f64ea69ad58588d69f18799b74b680bda Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 7 Jan 2026 15:52:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8E=AF=E6=8E=A7=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/AccessDoor.vue           |   22 +-
 src/views/components/WarehouseWarning.vue     |   17 +-
 .../environmentalScreen/index copy 2.vue      | 1304 -----------------
 src/views/environmentalScreen/index copy.vue  |  787 ----------
 ...x-1218-last.vue => index-0107-loading.vue} |  845 ++++++-----
 .../environmentalScreen/index-1216-1.vue      | 1149 ---------------
 src/views/environmentalScreen/index.vue       |   30 +-
 7 files changed, 548 insertions(+), 3606 deletions(-)
 delete mode 100644 src/views/environmentalScreen/index copy 2.vue
 delete mode 100644 src/views/environmentalScreen/index copy.vue
 rename src/views/environmentalScreen/{index-1218-last.vue => index-0107-loading.vue} (65%)
 delete mode 100644 src/views/environmentalScreen/index-1216-1.vue

diff --git a/src/views/components/AccessDoor.vue b/src/views/components/AccessDoor.vue
index 641e0c3..b161a96 100644
--- a/src/views/components/AccessDoor.vue
+++ b/src/views/components/AccessDoor.vue
@@ -13,12 +13,12 @@
           <div>{{ scope.row.time | parseTime }}</div>
         </template>
       </el-table-column>
-      <el-table-column label="姓名" align="center" :show-overflow-tooltip="true" :width="isScreen ? 100 :''">
+      <el-table-column label="姓名" align="center" :show-overflow-tooltip="true" :width="isScreen ? 112 :''">
         <template slot-scope="scope">
           <div>{{ scope.row.name }}</div>
         </template>
       </el-table-column>
-      <el-table-column prop="minorName" label="说明" align="center" :show-overflow-tooltip="true" :width="isScreen ? 148 :''" />
+      <el-table-column prop="minorName" label="说明" align="center" :show-overflow-tooltip="true" :width="isScreen ? 136 :''" />
     </el-table>
   </div>
 </template>
@@ -141,6 +141,24 @@ export default {
       }
     },
     getAccessdoor() {
+      // this.tableData = [
+      //   {
+      //     'id': 'eb6b8653',
+      //     'lscid': 0,
+      //     'wyid': '',
+      //     'itemLevels': 1,
+      //     'siteName': '.环境监控',
+      //     'time': 1765944141000,
+      //     'isAd': true,
+      //     'type': 0,
+      //     'ip': '192.168.99.101:6003',
+      //     'name': '温湿度传感器',
+      //     'minorName': '合法卡认证成功',
+      //     'dw': '',
+      //     'itemClass': 1
+      //   }
+      // ]
+      // name 6字 说明 7 字
       // page: 0,
       FetchInitRealTimeHikDoorLog({ size: this.size }).then((data) => {
         this.tableData = []
diff --git a/src/views/components/WarehouseWarning.vue b/src/views/components/WarehouseWarning.vue
index cf0ed16..b5c201f 100644
--- a/src/views/components/WarehouseWarning.vue
+++ b/src/views/components/WarehouseWarning.vue
@@ -15,8 +15,13 @@
           <!-- <span v-if="scope.row.TS">{{ scope.row.TS | parseTime }}</span> -->
         </template>
       </el-table-column>
-      <el-table-column prop="name" label="设备" align="center" :show-overflow-tooltip="true" :width="isScreen ? 100 :''" />
-      <el-table-column prop="value" label="警情" align="center" :show-overflow-tooltip="true" :width="isScreen ? 148 :''" />
+      <el-table-column prop="siteName" label="设备" align="center" :show-overflow-tooltip="true" :width="isScreen ? 112 :''">
+        <template slot-scope="scope">
+          <!-- siteName = "环境监控.空气净化机" -->
+          <span>{{ getDeviceName(scope.row.siteName) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="value" label="警情" align="center" :show-overflow-tooltip="true" :width="isScreen ? 136 :''" />
     </el-table>
   </div>
 </template>
@@ -73,6 +78,11 @@ export default {
     this.scrollTimer = null
   },
   methods: {
+    getDeviceName(siteName) {
+      if (!siteName) return ''
+      const parts = siteName.split('.')
+      return parts.length > 1 ? parts[1] : siteName
+    },
     toPage() {
       this.$router.push({
         name: 'RunningLog',
@@ -150,7 +160,7 @@ export default {
       }
     },
     getAlarmInfo() {
-      // [{"alarmid": "88347b05","lscid": 1,"WYID":"192.168.99.101:5004_1","Itemlevels":7, "siteName": "环境监控.空气净化机", "TS":"2026/1/6 15:08:56", "id":11955, "isAD":1,"type":0,"IP":" 192.168.99.101:5004 ","name":"串口", "value":"无响应", "dw":"", "ItemClass":3},{"alarmid": "4b232d46","lscid": 1,"WYID":"192.168.99.101:5003_1","Itemlevels":7, "siteName": "环境监控.恒湿净化机", "TS":"2026/1/6 16:13:31", "id":11922, "isAD":1,"type":0,"IP":" 192.168.99.101:5003 ","name":"串口", "value":"无响应", "dw":"", "ItemClass":1},{"alarmid": "3a309a0a","lscid": 9,"WYID":"192.168.99.101:6003_9","Itemlevels":7, "siteName": "环境监控.环控设备监测", "TS":"2026/1/6 16:18:33", "id":12061, "isAD":1,"type":0,"IP":" 192.168.99.101:6003 ","name":"红外感应", "value":"OFF", "dw":"", "ItemClass":3},{"alarmid": "63df6a30","lscid": 1,"WYID":"192.168.99.101:5005_1","Itemlevels":7, "siteName": "环境监控.温湿度传感器", "TS":"2026/1/6 16:19:58", "id":11305, "isAD":1,"type":0,"IP":" 192.168.99.101:5005 ","name":"串口", "value":"无响应", "dw":"", "ItemClass":1}]
+      // this.tableData = [{"alarmid": "88347b05","lscid": 1,"WYID":"192.168.99.101:5004_1","Itemlevels":7, "siteName": "环境监控.空气净化机", "TS":"2026/1/6 15:08:56", "id":11955, "isAD":1,"type":0,"IP":" 192.168.99.101:5004 ","name":"串口", "value":"无响应", "dw":"", "ItemClass":3},{"alarmid": "4b232d46","lscid": 1,"WYID":"192.168.99.101:5003_1","Itemlevels":7, "siteName": "环境监控.恒湿净化机", "TS":"2026/1/6 16:13:31", "id":11922, "isAD":1,"type":0,"IP":" 192.168.99.101:5003 ","name":"串口", "value":"无响应", "dw":"", "ItemClass":1},{"alarmid": "3a309a0a","lscid": 9,"WYID":"192.168.99.101:6003_9","Itemlevels":7, "siteName": "环境监控.环控设备监测", "TS":"2026/1/6 16:18:33", "id":12061, "isAD":1,"type":0,"IP":" 192.168.99.101:6003 ","name":"红外感应", "value":"OFF", "dw":"", "ItemClass":3},{"alarmid": "63df6a30","lscid": 1,"WYID":"192.168.99.101:5005_1","Itemlevels":7, "siteName": "环境监控.温湿度传感器", "TS":"2026/1/6 16:19:58", "id":11305, "isAD":1,"type":0,"IP":" 192.168.99.101:5005 ","name":"串口", "value":"无响应", "dw":"", "ItemClass":1}]
       // this.tableData = [
       //   {
       //     'id': 'eb6b8653',
@@ -168,6 +178,7 @@ export default {
       //     'itemClass': 1
       //   }
       // ]
+      // name 6字 说明 7 字
       alarmApi.info({ storeroomId: this.storeroomId }).then((data) => {
         this.tableData = []
         if (data && data.length > 0) {
diff --git a/src/views/environmentalScreen/index copy 2.vue b/src/views/environmentalScreen/index copy 2.vue
deleted file mode 100644
index a7e1133..0000000
--- a/src/views/environmentalScreen/index copy 2.vue	
+++ /dev/null
@@ -1,1304 +0,0 @@
-<template>
-  <div class="env-container">
-    <div class="env-top-title" />
-    <div class="header-date">
-      <div class="time">{{ nowDate.split(' ')[1] }}</div>
-      <div class="time-other">
-        <span>{{ currentWeek }}</span>
-        <span>{{ nowDate.split(' ')[0] }}</span>
-      </div>
-    </div>
-    <div class="env-main">
-      <div class="env-main-left">
-        <div class="env-item container-wrap" style="height: 130px !important; ">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3>
-            <svg-icon icon-class="danganjieyue" style="margin-right:10px" />档案借阅
-          </h3>
-          <div class="chart-wrapper">
-            <lend-across :lend-data="lendData" :refreshtime="refreshtime" />
-          </div>
-        </div>
-        <div class="env-item container-wrap left-wrap">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3>
-            <i class="iconfont icon-kongqizhiliangshuju" />环控数据
-          </h3>
-          <!-- <ul
-            class="leakage-list"
-            :style="{
-              height: showScroll ? 'calc(100% - 40px)' : 'auto',
-              overflow: showScroll ? 'auto' : 'hidden'
-            }"
-          >
-            <li
-              v-for="item in validDisplayConfigData"
-              :key="item.id"
-              :class="{ 'leakage-warn': item.NetStatus === 0 }"
-              :style="{
-                width: liWidth,
-                height: liHeight,
-                marginRight: '12px',
-                marginBottom: '12px'
-              }"
-            >
-              <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
-              <span class="leakage-state-tip" />
-            </li>
-          </ul> -->
-          <ul v-if="newAlarm && newAlarm.length !== 0" class="screen-env-list">
-            <!-- <li :class="alarmStatus.infrared === '告警' ? 'li-warn alarm-status' : 'alarm-status'">
-              <div class="msg-txt">
-
-                <p class="msg-list-unit">红外 </p>
-                <span class="msg-list-num">{{ alarmStatus.infrared }}</span>
-              </div>
-            </li>
-            <li :class="alarmStatus.fire === '告警' ? 'li-warn alarm-status' : 'alarm-status'">
-              <div class="msg-txt">
-                <p class="msg-list-unit">消防 </p>
-                <span class="msg-list-num">{{ alarmStatus.fire }}</span>
-              </div>
-            </li>
-            <li :class="alarmStatus.waterLeak === '告警' ? 'li-warn alarm-status' : 'alarm-status'">
-              <div class="msg-txt">
-                <p class="msg-list-unit">漏水 </p>
-                <span class="msg-list-num">{{ alarmStatus.waterLeak }}</span>
-              </div>
-            </li>-->
-            <li>
-              <svg-icon icon-class="pm25" class-name="msg-list-svg" />
-              <div class="msg-txt">
-                <span class="msg-list-num">{{ avgData.pm25 }}</span>
-                <p class="msg-list-unit">PM2.5浓度 {{ avgData.pm25Unit }}</p>
-              </div>
-            </li>
-            <li>
-              <svg-icon icon-class="pm10" class-name="msg-list-svg" />
-              <div class="msg-txt">
-                <span class="msg-list-num">{{ avgData.pm10 }}</span>
-                <p class="msg-list-unit">PM10浓度 {{ avgData.pm10Unit }}</p>
-              </div>
-            </li>
-            <li>
-              <svg-icon icon-class="voc" class-name="msg-list-svg" />
-              <div class="msg-txt">
-                <span class="msg-list-num">{{ avgData.tvoc }}</span>
-                <p class="msg-list-unit">TVOC {{ avgData.tvocUnit }}</p>
-              </div>
-            </li>
-            <li>
-              <svg-icon icon-class="co2" class-name="msg-list-svg" />
-              <div class="msg-txt">
-                <span class="msg-list-num">{{ avgData.co2 }}</span>
-                <p class="msg-list-unit">二氧化碳 {{ avgData.co2Unit }}</p>
-              </div>
-            </li>
-            <li>
-              <svg-icon icon-class="jiaquan" class-name="msg-list-svg" style="font-size: 64px; margin-left: 10px;" />
-              <div class="msg-txt">
-                <span class="msg-list-num">{{ avgData.formaldehyde }}</span>
-                <p class="msg-list-unit">甲醛 {{ avgData.formaldehydeUnit }}</p>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div class="env-item container-wrap left-wrap">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3>
-            <svg-icon icon-class="jiankong" style="font-size: 18px; margin-right: 10px;" />视频监控
-          </h3>
-          <div style="height: calc(100% - 40px);">
-            <video id="video" controls autoplay muted width="100%" height="100%" />
-          </div>
-        </div>
-      </div>
-      <div class="env-main-middle">
-        <div class="env-3d">
-          <iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/web3D/index.html" frameborder="0" scrolling="no" style=" margin: 0 auto; display: block;" />
-        </div>
-
-        <!-- 重构告警列表 - 分为两行 -->
-        <div v-if="hasValidData" class="env-alarm-container">
-          <!-- 第一行：温湿度 -->
-          <ul class="env-alarm-list env-alarm-list-first">
-            <li>
-              <svg-icon icon-class="temperature" class-name="msg-list-svg" />
-              <div>
-                <span>{{ avgData.temperature }} </span>
-                <p>温度 {{ avgData.temperatureUnit }}</p>
-              </div>
-            </li>
-            <li>
-              <svg-icon icon-class="shidu" class-name="msg-list-svg" />
-              <div>
-                <span>{{ avgData.humidity }}</span>
-                <p>湿度  {{ avgData.humidityUnit }}</p>
-              </div>
-            </li>
-          </ul>
-
-          <!-- 第二行：其他指标 -->
-          <!-- <ul class="env-alarm-list-second">
-            <li :class="alarmStatus.infrared === '告警' ? 'li-warn' : ''">
-              <p>红外</p>
-              <span>{{ alarmStatus.infrared }}</span>
-            </li>
-            <li :class="alarmStatus.fire === '告警' ? 'li-warn' : ''">
-              <p>消防</p>
-              <span>{{ alarmStatus.fire }}</span>
-            </li>
-            <li :class="alarmStatus.waterLeak === '告警' ? 'li-warn' : ''">
-              <p>漏水</p>
-              <span>{{ alarmStatus.waterLeak }}</span>
-            </li>
-            <li>
-              <p>PM2.5浓度</p>
-              <span>{{ avgData.pm25 }}{{ avgData.pm25Unit }}</span>
-            </li>
-            <li>
-              <p>TVOC</p>
-              <span>{{ avgData.tvoc }}{{ avgData.tvocUnit }}</span>
-            </li>
-            <li>
-              <p>PM10浓度</p>
-              <span>{{ avgData.pm10 }}{{ avgData.pm10Unit }}</span>
-            </li>
-            <li>
-              <p>二氧化碳</p>
-              <span>{{ avgData.co2 }}{{ avgData.co2Unit }}</span>
-            </li>
-            <li>
-              <p>甲醛</p>
-              <span>{{ avgData.formaldehyde }}{{ avgData.formaldehydeUnit }}</span>
-            </li>
-          </ul> -->
-        </div>
-        <div
-          v-if="hasValidData"
-          class="air-quality"
-          :class="[
-            aqiStatus === '优' ? 'air-excellent' : '',
-            aqiStatus === '良' ? 'air-good' : '',
-            aqiStatus === '轻度污染' ? 'air-lightPollution' : '',
-            aqiStatus === '中度污染' ? 'air-mediumPollution' : '',
-            aqiStatus === '重度污染' ? 'air-heavyPollution' : '',
-            aqiStatus === '严重污染' ? 'air-severePollution' : ''
-          ]"
-        >
-          <h3>实时空气质量指数（AQI）</h3>
-          <div class="air-params">
-            <div class="air-left">
-              <span class="air-title">实时AQI</span>
-              <div class="air-result"><p>{{ aqiValue }}</p><span>(AQI-中国标准)</span></div>
-            </div>
-            <div class="air-right">
-              <span>空气质量为</span>
-              <p>{{ aqiStatus }}</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- <ul class="env-alarm-list-second">
-          <li :class="alarmStatus.infrared === '告警' ? 'li-warn' : ''">
-            <p><i class="iconfont icon-weihubaojing" />红外</p>
-            <span>{{ alarmStatus.infrared }}</span>
-          </li>
-          <li :class="alarmStatus.fire === '告警' ? 'li-warn' : ''">
-            <p><i class="iconfont icon-weihubaojing" />消防</p>
-            <span>{{ alarmStatus.fire }}</span>
-          </li>
-          <li :class="alarmStatus.waterLeak === '告警' ? 'li-warn' : ''">
-            <p><i class="iconfont icon-weihubaojing" />漏水</p>
-            <span>{{ alarmStatus.waterLeak }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />PM2.5浓度</p>
-            <span>{{ avgData.pm25 }} {{ avgData.pm25Unit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />TVOC</p>
-            <span>{{ avgData.tvoc }} {{ avgData.tvocUnit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />PM10浓度</p>
-            <span>{{ avgData.pm10 }} {{ avgData.pm10Unit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />二氧化碳</p>
-            <span>{{ avgData.co2 }} {{ avgData.co2Unit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />甲醛</p>
-            <span>{{ avgData.formaldehyde }} {{ avgData.formaldehydeUnit }}</span>
-          </li>
-        </ul> -->
-        <ul class="leakage-list new-leakage-list">
-          <li :class="alarmStatus.infrared === '告警' ? 'leakage-warn' : ''">
-            <!-- <div class="msg-txt">
-              <p class="msg-list-unit">红外 </p>
-              <span class="msg-list-num">{{ alarmStatus.infrared }}</span>
-            </div> -->
-            <p><i class="iconfont icon-shebei" />红外</p>
-            <span class="leakage-state-tip" />
-          </li>
-          <li :class="alarmStatus.fire === '告警' ? 'leakage-warn' : ''">
-            <!-- <div class="msg-txt">
-              <p class="msg-list-unit">消防 </p>
-              <span class="msg-list-num">{{ alarmStatus.fire }}</span>
-            </div> -->
-            <p><i class="iconfont icon-shebei" />消防</p>
-            <span class="leakage-state-tip" />
-          </li>
-          <li :class="alarmStatus.waterLeak === '告警' ? 'leakage-warn' : ''">
-            <!-- <div class="msg-txt">
-              <p class="msg-list-unit">漏水 </p>
-              <span class="msg-list-num">{{ alarmStatus.waterLeak }}</span>
-            </div> -->
-            <p><i class="iconfont icon-shebei" />漏水</p>
-            <span class="leakage-state-tip" />
-          </li>
-          <li
-            v-for="item in validDisplayConfigData"
-            :key="item.id"
-            :class="{ 'leakage-warn': item.NetStatus === 0 }"
-          >
-            <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
-            <span class="leakage-state-tip" />
-          </li>
-        </ul>
-      </div>
-      <div class="env-main-right">
-        <!-- 环控实时报警 -->
-        <warehouse-warning :height="'calc(100% - 38px)'" />
-        <!-- 门禁出入记录 -->
-        <AccessDoor :height="'calc(100% - 40px)'" size="5" />
-        <!-- 警告记录 -->
-        <div class="env-item container-wrap">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3>
-            <svg-icon icon-class="alerm" class-name="warehouse-svg" />警告记录
-          </h3>
-          <div class="chart-wrapper" style="height: calc(100% - 40px);">
-            111
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getCurrentTime } from '@/utils/index'
-import lendAcross from '@/views/components/echarts/lendAcross.vue'
-import WarehouseWarning from '@/views/components/WarehouseWarning'
-import AccessDoor from '@/views/components/AccessDoor'
-import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics'
-import displayConfigApi from '@/api/storeManage/displayConfig'
-import alarmApi from '@/api/home/alarm'
-import { allDeviceData, mockIpData } from './index.js'
-
-const mockFetchDataForIP = (params) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const ip = params.ip
-      const result = mockIpData[ip] || { code: 200, message: '操作成功', data: [], timestamp: Date.now() }
-      resolve(result.data)
-    }, 500)
-  })
-}
-
-export default {
-  name: 'EnvironmentalScreen',
-  components: {
-    WarehouseWarning,
-    AccessDoor,
-    lendAcross
-  },
-  mixins: [statisticsCrud],
-  data() {
-    return {
-      bannerRoomName: '3F 全景图',
-      nowDate: '',
-      currentWeek: this.getCurrentWeek(),
-      timer: null,
-      echartsTimer: null,
-      roomId: 'D6490DA3D4261E8C26D0E3',
-      allDisplayConfigData: [],
-      displayConfigData: [],
-      url: '',
-      allDeviceIds: [], // 所有设备IP（无排除）
-      refreshtime: 60000,
-      lendData: [],
-      typeData: [],
-      newAlarm: [], // 所有设备的原始数据
-      aqiValue: 45,
-      aqiStatus: '健康',
-      // 需展示的指标列表（包含所有要计算的指标）
-      keepIndicators: [
-        '二氧化碳',
-        'CO2浓度',
-        '甲醛',
-        '综合气体',
-        'PM2.5浓度',
-        'PM10浓度',
-        '温度',
-        '湿度',
-        '空气质量',
-        'TVOC',
-        '红外',
-        '消防',
-        '漏水'
-      ],
-      iframeWin: null,
-      // 平均值数据（新增温湿度和单位字段）
-      avgData: {
-        temperature: '0.00', // 温度
-        temperatureUnit: '', // 温度单位
-        humidity: '0.00', // 湿度
-        humidityUnit: '', // 湿度单位
-        pm25: '0.00',
-        pm25Unit: '', // PM2.5单位
-        tvoc: '0.00',
-        tvocUnit: '', // TVOC单位
-        pm10: '0.00',
-        pm10Unit: '', // PM10单位
-        co2: '0.00',
-        co2Unit: '', // 二氧化碳单位
-        formaldehyde: '0.00',
-        formaldehydeUnit: '' // 甲醛单位
-      },
-      // 告警状态（ON=告警，OFF=正常）
-      alarmStatus: {
-        infrared: '正常',
-        fire: '正常',
-        waterLeak: '正常'
-      },
-      aqiGradeStandard: [
-        { aqiMin: 0, aqiMax: 50, level: '优', colorKey: 'excellent' },
-        { aqiMin: 51, aqiMax: 100, level: '良', colorKey: 'good' },
-        { aqiMin: 101, aqiMax: 150, level: '轻度污染', colorKey: 'lightPollution' },
-        { aqiMin: 151, aqiMax: 200, level: '中度污染', colorKey: 'mediumPollution' },
-        { aqiMin: 201, aqiMax: 300, level: '重度污染', colorKey: 'heavyPollution' },
-        { aqiMin: 301, aqiMax: 500, level: '严重污染', colorKey: 'severePollution' }
-      ],
-      pollutantLimits: {
-        pm25: { excellent: 35, good: 75, light: 115, medium: 150, heavy: 250, severe: 500 }, // μg/m³
-        pm10: { excellent: 50, good: 150, light: 250, medium: 350, heavy: 420, severe: 600 } // μg/m³
-      },
-      hasValidData: false, // 是否有有效数据
-      hkConfig: {
-        'username': 'admin',
-        'password': 'ftzn83560792',
-        'ip': '192.168.99.125', // 固定为目标IP
-        'port': '554'
-      },
-      webRtcServer: null,
-      camera_ip: '127.0.0.1:9527',
-      cameraList: [] // 摄像头列表
-    }
-  },
-  computed: {
-    validDisplayConfigData() {
-      return this.allDisplayConfigData.filter(item => item && item.Name)
-    },
-    itemsPerRow() {
-      const len = this.validDisplayConfigData.length
-      if (len === 0) return 0
-      return len <= 2 ? len : 2
-    },
-    liWidth() {
-      if (this.itemsPerRow === 0) return '0'
-      return `calc(100% / ${this.itemsPerRow} - 12px)`
-    },
-    liHeight() {
-      const len = this.validDisplayConfigData.length
-      if (len === 0) return '0'
-      const rows = Math.ceil(len / this.itemsPerRow)
-      return `calc(100% / ${rows} - 12px)`
-    },
-    showScroll() {
-      return this.validDisplayConfigData.length > 8
-    }
-  },
-  async created() {
-    // 时间更新定时器
-    this.timer = setInterval(() => {
-      this.nowDate = getCurrentTime()
-    }, 1000)
-
-    // 初始化逻辑
-    window.getIframeLoading = this.getIframeLoading
-    this.allDisplayConfigData = allDeviceData
-    this.handleDeviceIpList()
-
-    // await alarmApi.FetchYpGetSite().then((data) => {
-    //   if (data && data.length > 0) {
-    //     this.allDisplayConfigData = data
-    //     this.handleDeviceIpList()
-    //   } else {
-    //     this.allDisplayConfigData = []
-    //   }
-    // })
-
-    if (this.allDeviceIds.length > 0) {
-      await this.getAllDevicesData()
-      this.calcAllAvgData() // 计算所有指标平均值
-      this.calcAQIByAvg() // 根据平均值计算AQI
-    } else {
-      console.warn('无设备IP数据')
-      this.hasValidData = false
-    }
-  },
-  mounted() {
-    this.iframeWin = this.$refs.myIframe?.contentWindow
-
-    // Echarts数据刷新定时器
-    this.echartsTimer = setInterval(() => {
-      this.lendData = []
-      this.typeData = []
-      this.getBorrowerNumSta()
-    }, this.refreshtime)
-    this.getVideoUrl()
-  },
-  beforeDestroy() {
-    // 清理所有定时器
-    if (this.timer) clearInterval(this.timer)
-    if (this.echartsTimer) clearInterval(this.echartsTimer)
-    // 销毁视频流
-    if (this.webRtcServer) {
-      this.webRtcServer.disconnect()
-      this.webRtcServer = null
-    }
-  },
-  methods: {
-    getVideoUrl() {
-      displayConfigApi.list({ storeroomId: '01A1DC2123C2B75E1A579D', isQueryAll: 1 }).then((res) => {
-        console.log('摄像头列表', res)
-        if (res && res.length > 0) {
-          // 只筛选IP为192.168.99.125的摄像头
-          this.cameraList = res.filter(item =>
-            item.divPosition && item.divPosition.includes('cam') &&
-            item.deviceInfo && item.deviceInfo.deviceIp === '192.168.99.125'
-          )
-
-          if (this.cameraList.length > 0) {
-            const targetCamera = this.cameraList[0].deviceInfo
-            this.hkConfig = {
-              username: targetCamera.deviceAccount || 'admin',
-              password: targetCamera.devicePassword || 'ftzn83560792',
-              ip: targetCamera.deviceIp || '192.168.99.125',
-              port: targetCamera.devicePort || '554'
-            }
-
-            this.$nextTick(() => {
-              this.initVideo()
-            })
-          } else {
-            this.$message({
-              message: '未找到IP为192.168.99.125的摄像头配置',
-              type: 'warning'
-            })
-          }
-        } else {
-          this.$message({
-            message: '请先配置摄像头',
-            type: 'error'
-          })
-        }
-      }).catch(error => {
-        console.error('获取摄像头列表失败', error)
-        this.$message({
-          message: '获取摄像头配置失败',
-          type: 'error'
-        })
-      })
-    },
-    initVideo() {
-      const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiWebRtcServerUrl : process.env.VUE_APP_WEBRTCSTREAMER_API
-      this.camera_ip = linkSrc
-      console.log('hkConfig', this.hkConfig)
-
-      // 先销毁已存在的视频流
-      if (this.webRtcServer) {
-        this.webRtcServer.disconnect()
-      }
-
-      // 初始化新的视频流
-      // eslint-disable-next-line no-undef
-      this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
-      // 拼接RTSP地址
-      const rtspUrl = `rtsp://${this.hkConfig.username}:${this.hkConfig.password}@${this.hkConfig.ip}:${this.hkConfig.port}/h264/1/1`
-      console.log('RTSP地址:', rtspUrl)
-      this.webRtcServer.connect(rtspUrl)
-    },
-    /**
-     * 获取当前星期
-     */
-    getCurrentWeek() {
-      const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-      const date = new Date()
-      return days[date.getDay()]
-    },
-    /**
-     * 处理设备IP列表（仅去重，无排除）
-     */
-    handleDeviceIpList() {
-      const ipSet = new Set()
-      this.allDisplayConfigData.forEach(element => {
-        const ip = (element.IP || '').trim()
-        if (ip) { // 仅过滤空IP，无其他排除逻辑
-          ipSet.add(ip)
-        }
-      })
-      this.allDeviceIds = Array.from(ipSet)
-    },
-    /**
-     * 获取所有设备的实时数据
-     */
-    async getAllDevicesData() {
-      const allData = []
-      for (const ip of this.allDeviceIds) {
-        try {
-          const data = await mockFetchDataForIP({ ip })
-          // 真实请求
-          // const data = await alarmApi.FetchDataForIP({ ip })
-          // 过滤需要的指标并添加到总数据
-          const filtered = data.filter(item => this.keepIndicators.includes(item.subName)).map(item => {
-            if (item.subName === 'CO2浓度') {
-              return { ...item, subName: '二氧化碳' }
-            }
-            return item
-          })
-          if (filtered.length > 0) {
-            allData.push(...filtered)
-          }
-        } catch (error) {
-          console.error(`获取IP【${ip}】数据失败：`, error)
-        }
-      }
-      this.newAlarm = allData
-      this.hasValidData = allData.length > 0
-    },
-    /**
-     * 计算所有设备指标的平均值（适配ON/OFF告警状态，保留单位）
-     */
-    calcAllAvgData() {
-      if (!this.hasValidData) return
-
-      // 1. 初始化各指标的总和、计数和单位
-      const sumMap = {
-        temperature: { sum: 0, count: 0, unit: '' }, // 温度
-        humidity: { sum: 0, count: 0, unit: '' }, // 湿度
-        pm25: { sum: 0, count: 0, unit: '' },
-        tvoc: { sum: 0, count: 0, unit: '' },
-        pm10: { sum: 0, count: 0, unit: '' },
-        co2: { sum: 0, count: 0, unit: '' },
-        formaldehyde: { sum: 0, count: 0, unit: '' },
-        infrared: [], // 红外状态（ON/OFF）
-        fire: [], // 消防状态（ON/OFF）
-        waterLeak: [] // 漏水状态（ON/OFF）
-      }
-
-      // 2. 遍历所有数据累加，同时记录单位
-      this.newAlarm.forEach(item => {
-        const value = parseFloat(item.value) || 0
-        // 提取单位（优先使用数据中的dw字段，无则用默认值）
-        const unit = item.dw || this.getDefaultUnit(item.subName)
-
-        switch (item.subName) {
-          case '温度':
-            sumMap.temperature.sum += value
-            sumMap.temperature.count++
-            if (!sumMap.temperature.unit && unit) sumMap.temperature.unit = unit
-            break
-          case '湿度':
-            sumMap.humidity.sum += value
-            sumMap.humidity.count++
-            if (!sumMap.humidity.unit && unit) sumMap.humidity.unit = unit
-            break
-          case '二氧化碳':
-          case 'CO2浓度':
-            sumMap.co2.sum += value
-            sumMap.co2.count++
-            if (!sumMap.co2.unit && unit) sumMap.co2.unit = unit
-            break
-          case 'PM2.5浓度':
-            sumMap.pm25.sum += value
-            sumMap.pm25.count++
-            if (!sumMap.pm25.unit && unit) sumMap.pm25.unit = unit
-            break
-          case 'TVOC':
-            sumMap.tvoc.sum += value
-            sumMap.tvoc.count++
-            if (!sumMap.tvoc.unit && unit) sumMap.tvoc.unit = unit
-            break
-          case 'PM10浓度':
-            sumMap.pm10.sum += value
-            sumMap.pm10.count++
-            if (!sumMap.pm10.unit && unit) sumMap.pm10.unit = unit
-            break
-          case '甲醛':
-            sumMap.formaldehyde.sum += value
-            sumMap.formaldehyde.count++
-            if (!sumMap.formaldehyde.unit && unit) sumMap.formaldehyde.unit = unit
-            break
-          // 告警类指标直接存储状态
-          case '红外':
-            sumMap.infrared.push(item.value)
-            break
-          case '消防':
-            sumMap.fire.push(item.value)
-            break
-          case '漏水':
-            sumMap.waterLeak.push(item.value)
-            break
-        }
-      })
-      console.log('累加结果：', sumMap)
-
-      // 3. 计算平均值（保留两位小数），并赋值单位
-      this.avgData = {
-        temperature: sumMap.temperature.count ? (sumMap.temperature.sum / sumMap.temperature.count).toFixed(2) : '0.00',
-        temperatureUnit: sumMap.temperature.unit || '℃',
-        humidity: sumMap.humidity.count ? (sumMap.humidity.sum / sumMap.humidity.count).toFixed(2) : '0.00',
-        humidityUnit: sumMap.humidity.unit || '%',
-        pm25: sumMap.pm25.count ? (sumMap.pm25.sum / sumMap.pm25.count).toFixed(2) : '0.00',
-        pm25Unit: sumMap.pm25.unit || 'ug/立方米',
-        tvoc: sumMap.tvoc.count ? (sumMap.tvoc.sum / sumMap.tvoc.count).toFixed(2) : '0.00',
-        tvocUnit: sumMap.tvoc.unit || 'LuK',
-        pm10: sumMap.pm10.count ? (sumMap.pm10.sum / sumMap.pm10.count).toFixed(2) : '0.00',
-        pm10Unit: sumMap.pm10.unit || 'ug/立方米',
-        co2: sumMap.co2.count ? (sumMap.co2.sum / sumMap.co2.count).toFixed(2) : '0.00',
-        co2Unit: sumMap.co2.unit || 'ppm',
-        formaldehyde: sumMap.formaldehyde.count ? (sumMap.formaldehyde.sum / sumMap.formaldehyde.count).toFixed(2) : '0.00',
-        formaldehydeUnit: sumMap.formaldehyde.unit || 'ppm'
-      }
-      console.log('平均值：', this.avgData)
-
-      // 4. 处理告警状态（ON=告警，OFF=正常；只要有一个ON就显示告警）
-      this.alarmStatus = {
-        infrared: sumMap.infrared.some(s => s === 'ON') ? '告警' : '正常',
-        fire: sumMap.fire.some(s => s === 'ON') ? '告警' : '正常',
-        waterLeak: sumMap.waterLeak.some(s => s === 'ON') ? '告警' : '正常'
-      }
-
-      // 兼容无数据的情况
-      if (sumMap.infrared.length === 0) this.alarmStatus.infrared = '正常'
-      if (sumMap.fire.length === 0) this.alarmStatus.fire = '正常'
-      if (sumMap.waterLeak.length === 0) this.alarmStatus.waterLeak = '正常'
-    },
-    /**
-     * 获取指标默认单位（兜底用）
-     */
-    getDefaultUnit(subName) {
-      const unitMap = {
-        '温度': '℃',
-        '湿度': '%',
-        'PM2.5浓度': 'ug/立方米',
-        'TVOC': 'LuK',
-        'PM10浓度': 'ug/立方米',
-        '二氧化碳': 'ppm',
-        'CO2浓度': 'ppm',
-        '甲醛': 'ppm',
-        '综合气体': '无量纲'
-      }
-      return unitMap[subName] || ''
-    },
-    /**
-     * 根据所有设备的平均值计算AQI
-     */
-    calcAQIByAvg() {
-      if (!this.hasValidData) {
-        this.aqiValue = 45
-        this.aqiStatus = '优'
-        return
-      }
-
-      // 1. 提取PM2.5、PM10数值（转数字，兜底0），单位：μg/m³（国标24小时平均）
-      const pm25 = parseFloat(this.avgData.pm25) || 0
-      const pm10 = parseFloat(this.avgData.pm10) || 0
-      console.log('PM2.5平均值：', pm25, 'μg/m³ | PM10平均值：', pm10, 'μg/m³')
-
-      // 2. 国标AQI浓度限值区间（24小时平均，μg/m³）
-      const aqiBpTable = {
-        pm25: [
-          { iaqiLo: 0, iaqiHi: 50, bpLo: 0, bpHi: 35 }, // 优
-          { iaqiLo: 50, iaqiHi: 100, bpLo: 35, bpHi: 75 }, // 良
-          { iaqiLo: 100, iaqiHi: 150, bpLo: 75, bpHi: 115 }, // 轻度污染
-          { iaqiLo: 150, iaqiHi: 200, bpLo: 115, bpHi: 150 }, // 中度污染
-          { iaqiLo: 200, iaqiHi: 300, bpLo: 150, bpHi: 250 }, // 重度污染
-          { iaqiLo: 300, iaqiHi: 500, bpLo: 250, bpHi: 500 } // 严重污染
-        ],
-        pm10: [
-          { iaqiLo: 0, iaqiHi: 50, bpLo: 0, bpHi: 50 }, // 优
-          { iaqiLo: 50, iaqiHi: 100, bpLo: 50, bpHi: 150 }, // 良
-          { iaqiLo: 100, iaqiHi: 150, bpLo: 150, bpHi: 250 }, // 轻度污染
-          { iaqiLo: 150, iaqiHi: 200, bpLo: 250, bpHi: 350 }, // 中度污染
-          { iaqiLo: 200, iaqiHi: 300, bpLo: 350, bpHi: 420 }, // 重度污染
-          { iaqiLo: 300, iaqiHi: 500, bpLo: 420, bpHi: 500 } // 严重污染
-        ]
-      }
-
-      // 3. 计算单污染物分指数（IAQI）的核心方法
-      const calculateIAQI = (conc, pollutantType) => {
-        const bpTable = aqiBpTable[pollutantType]
-        // 浓度超过上限，直接返回500
-        if (conc > bpTable[bpTable.length - 1].bpHi) {
-          return 500
-        }
-        // 匹配浓度所在区间
-        const matchedBp = bpTable.find(item => conc >= item.bpLo && conc <= item.bpHi) || bpTable[0]
-        // 国标IAQI计算公式
-        const iaqi = ((matchedBp.iaqiHi - matchedBp.iaqiLo) / (matchedBp.bpHi - matchedBp.bpLo)) * (conc - matchedBp.bpLo) + matchedBp.iaqiLo
-        // 四舍五入，且不超过500
-        return Math.min(Math.round(iaqi), 500)
-      }
-
-      // 4. 计算PM2.5、PM10的分指数
-      const iaqiPm25 = calculateIAQI(pm25, 'pm25')
-      const iaqiPm10 = calculateIAQI(pm10, 'pm10')
-
-      // 5. AQI取分指数最大值
-      const finalAQI = Math.max(iaqiPm25, iaqiPm10)
-      this.aqiValue = finalAQI
-
-      // 6. 匹配AQI对应的空气质量等级
-      const matchedGrade = this.aqiGradeStandard.find(grade =>
-        finalAQI >= grade.aqiMin && finalAQI <= grade.aqiMax
-      )
-      this.aqiStatus = matchedGrade ? matchedGrade.level : '严重污染'
-
-      console.log('IAQI-PM2.5：', iaqiPm25, 'IAQI-PM10：', iaqiPm10, '最终AQI：', finalAQI, '| 等级：', this.aqiStatus)
-    },
-    /**
-     * iframe加载回调（保留原有逻辑）
-     */
-    getIframeLoading(value) {}
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import "~@/assets/styles/lend-manage.scss";
-
-.env-container {
-  width: 100%;
-  height: calc(100vh);
-  background-color: #031435;
-  .env-top-title {
-    width: calc(100vw);
-    height: 130px;
-    background: url("~@/assets/images/largeScreen/top-title.png") no-repeat 0 -14px;
-    background-size: contain;
-  }
-  .header-date {
-    position: fixed;
-    top: 10px;
-    right: 80px;
-    display: flex;
-		justify-content: flex-start;
-		align-items: center;
-    color: #fff;
-    .time {
-			font-size: 32px;
-			font-weight: bold;
-			line-height:  30px;
-			padding-right: 20px;
-			border-right: 1px solid rgba(255, 255, 255, 0.5);
-		}
-		.time-other {
-			font-size: 18px;
-			line-height: 22px;
-			padding-left: 20px;
-			span {
-				display: block;
-			}
-		}
-  }
-  .env-main {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 25px;
-    margin-top: -12px;
-    .env-main-left,
-    .env-main-right {
-      max-width: 22%;
-      flex: 1;
-      height: calc(100vh - 138px);
-      overflow: hidden;
-      z-index: 9999;
-    }
-    .env-main-middle {
-      position: relative;
-      flex: 1;
-      margin: 0 20px;
-      height: calc(100vh - 138px);
-      overflow: hidden;
-      background: url("~@/assets/images/largeScreen/bg.png") no-repeat center center;
-    }
-    .env-main-left .container-wrap {
-      min-height: auto;
-    }
-    .env-main-left .container-wrap.left-wrap {
-      height: calc(100% / 2 - 85px);
-    }
-    .env-main-right .container-wrap {
-      height: calc(100% / 3 - 14px);
-      min-height: auto;
-      margin-bottom: 20px;
-    }
-    .env-item {
-      margin-bottom: 20px;
-      text-align: center;
-      h3 {
-        position: relative;
-        display: inline-block;
-        padding: 10px 70px;
-        font-size: 16px;
-        color: #fff;
-        .iconfont {
-          margin-right: 10px;
-          font-size: 14px;
-          color: #f65163;
-        }
-        &::before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 50%;
-          width: 36px;
-          height: 12px;
-          margin-top: -6px;
-          background: url("~@/assets/images/largeScreen/item-left.png") no-repeat;
-          background-size: cover;
-        }
-        &::after {
-          content: "";
-          position: absolute;
-          top: 50%;
-          right: 0;
-          width: 36px;
-          height: 12px;
-          margin-top: -6px;
-          background: url("~@/assets/images/largeScreen/item-right.png") no-repeat;
-          background-size: cover;
-        }
-      }
-
-    }
-    .env-3d {
-      position: fixed;
-      left: 0;
-      top: -40px;
-      width: 100%;
-      // height: calc(100%);
-      height: 100%;
-      // background: url("~@/assets/images/largeScreen/bg.png") no-repeat center 0;
-      overflow: hidden;
-      .iframe_box {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
-.iframe_box {
-  /* 移除原有width/height，改用内联样式或下面的样式 */
-  width: 100% !important;
-  height: 100% !important;
-  border: none;
-}
-.banner-top-name{
-  position: absolute;
-  left: 0;
-  top: 80px;
-  padding: 0 15px;
-  height: 34px;
-  line-height: 32px;
-  font-size: 18px;
-  color: #fff;
-  background-color: #113d72;
-  border: 1px solid #339cff;
-  border-radius: 4px;
-}
-.air-quality{
-  position: absolute;
-  bottom: 10px;
-  right: 20px;
-  color: #fff;
-  padding: 20px 20px 10px 20px;
-  background-image: linear-gradient(to top, rgba(24, 176, 143, .5), rgba(24, 176, 143, 0));
-  border-radius: 5px;
-  z-index: 9999;
-  h3{
-    padding: 30px 0;
-  }
-  .air-params{
-    display: flex;
-    justify-content: space-between;
-    align-items: last baseline;
-    .air-left{
-      .air-title{
-        position: relative;
-        padding-left: 12px;
-        font-size: 14px;
-        &::before{
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 50%;
-          width: 6px;
-          height: 6px;
-          background-color: #18B08F;
-          border-radius: 50%;
-        }
-      }
-      .air-result{
-        display: flex;
-        justify-content: space-between;
-        align-items: last baseline;
-        padding-top: 10px;
-        p{
-          font-size: 30px;
-          font-weight: 600;
-          padding: 0 6px 0 10px;
-        }
-        span{
-          display: block;
-          font-size: 12px;
-          opacity: .6;
-        }
-      }
-    }
-    .air-right{
-      text-align: center;
-      span{
-        display: block;
-        font-size: 12px;
-      }
-      p{
-        font-size: 18px;
-        font-weight: 600;
-        padding: 10px 30px;
-        margin-top: 10px;
-        background-color: rgba(24, 176, 143, .2);
-        border-radius: 5px;
-      }
-    }
-  }
-
-  // 原有基础样式保留
-  &.air-excellent { // 优 - 绿色
-    background-image: linear-gradient(to top, rgba(40, 180, 40, .5), rgba(40, 180, 40, 0));
-    .air-params .air-right p {
-      background-color: rgba(40, 180, 40, .2);
-    }
-  }
-  &.air-good { // 良 - 黄色
-    background-image: linear-gradient(to top, rgba(255, 200, 0, .5), rgba(255, 200, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(255, 200, 0, .2);
-    }
-  }
-  &.air-lightPollution { // 轻度污染 - 橙色
-    background-image: linear-gradient(to top, rgba(255, 140, 0, .5), rgba(255, 140, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(255, 140, 0, .2);
-    }
-  }
-  &.air-mediumPollution { // 中度污染 - 红色
-    background-image: linear-gradient(to top, rgba(255, 0, 0, .5), rgba(255, 0, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(255, 0, 0, .2);
-    }
-  }
-  &.air-heavyPollution { // 重度污染 - 紫色
-    background-image: linear-gradient(to top, rgba(150, 0, 200, .5), rgba(150, 0, 200, 0));
-    .air-params .air-right p {
-      background-color: rgba(150, 0, 200, .2);
-    }
-  }
-  &.air-severePollution { // 严重污染 - 褐红色
-    background-image: linear-gradient(to top, rgba(120, 0, 0, .5), rgba(120, 0, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(120, 0, 0, .2);
-    }
-  }
-}
-.air-warn{
-  background-image: linear-gradient(to top, rgba(246, 81, 99, .5), rgba(24, 176, 143, 0));
-  .air-params{
-    .air-right{
-      p{
-        background-color: rgba(246, 81, 99, .2);
-      }
-    }
-  }
-}
-.leakage-list {
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  padding: 0 0 0 14px;
-  text-align: left;
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #339cff;
-    border-radius: 2px;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: #021941;
-  }
-  li {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 15px;
-    border: 1px solid #3581cc;
-    background-color: #02255f;
-    border-radius: 2px;
-    &::before {
-      content: "";
-      position: absolute;
-      top: 4px;
-      left: 4px;
-      width: 0;
-      height: 0;
-      border-color: transparent #339cff;
-      border-width: 0 0 6px 6px;
-      border-style: solid;
-    }
-    p {
-      font-size: 12px;
-      color: #fff;
-      i {
-        margin-right: 4px;
-      }
-    }
-    span.leakage-state-tip {
-      position: relative;
-      display: block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: #18b08f;
-      &::before {
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        box-shadow: inset 0px 0px 10px 1px #18b08f;
-        transform: translate(-50%, -50%);
-      }
-    }
-    &.leakage-warn {
-      border-color: #f65164;
-      box-shadow: inset 0px 0px 15px 1px #f65164;
-      color: #f65164;
-      &::before {
-        border-color: transparent #f65164;
-      }
-      span.leakage-state-tip {
-        background-color: #f65164;
-        &::before {
-          box-shadow: inset 0px 0px 10px 1px #f65164;
-        }
-      }
-    }
-  }
-}
-.env-alarm-list{
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-  li{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    height: 66px;
-    margin-right: 10px;
-    background: url('~@/assets/images/data_border_default.png') no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-    color: #fff;
-    font-size: 14px;
-    &.li-warn{
-      background: url('~@/assets/images/data_border_warn.png') no-repeat;
-      background-size: 100% 100%;
-    }
-    p{
-      color: #339CFF;
-    }
-    span{
-      display: block;
-      margin-top: 12px;
-      font-weight: bold;
-    }
-  }
-}
-
-// 告警列表容器
-.env-alarm-container {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  width: calc(100% - 20px);
-
-  // 第一行：温湿度
-  .env-alarm-list-first {
-    margin-bottom: 20px;
-    li {
-      width: calc(100% / 4 - 10px);
-      height: 90px;
-      font-size: 24px;
-      flex-direction: row;
-      & .msg-list-svg{
-        font-size: 40px;
-        margin-right: 14px;
-      }
-      & div{
-        span{
-          margin-top: 0 !important;
-        }
-        p{
-          font-size: 18px;
-          margin-top: 6px;
-        }
-      }
-    }
-  }
-  // .env-alarm-list-second {
-  //   li{
-  //     width: calc(100% / 10 - 10px);
-  //   }
-  // }
-
-}
-
-.env-alarm-list-second {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  color: #fff;
-  width: 600px;
-  height: 130px;
-  font-size: 14px;
-  li {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: calc(100% / 3 - 10px);
-    height: calc(100% / 3 - 14px);
-    background: linear-gradient(
-        360deg,
-        rgba(51, 156, 255, 0.24) 0%,
-        rgba(56, 158, 225, 0) 70%,
-        rgba(56, 158, 225, 0) 100%
-      );
-    margin-left: 10px;
-    margin-bottom: 14px;
-    padding: 0 10px;
-    p{
-      font-size: 12px;
-      color: #339CFF;
-    }
-    span{
-      display: inline-block;
-      font-weight: bold;
-    }
-    &.li-warn{
-      background: linear-gradient(
-        360deg,
-        rgba(246, 81, 100, 0.5) 0%,
-        rgba(56, 158, 225, 0) 70%,
-        rgba(56, 158, 225, 0) 100%
-      );
-      span{
-        color: #F65164;
-      }
-    }
-  }
-}
-
-.new-leakage-list{
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  width: 600px;
-  li {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: calc(100% / 3 - 10px);
-    height: calc(100% / 3 - 14px);
-    margin-left: 10px;
-    margin-bottom: 14px;
-  }
-}
-
-.screen-env-list {
-  flex-wrap: wrap;
-  // justify-content: space-between;
-  // justify-content: center;
-  height: calc(100% - 54px);
-  padding: 0 10px;
-  li {
-    flex: none;
-    width: calc(100% / 2 - 22px);
-    margin: 10px 10px 0 10px;
-    height: calc(100% / 3 - 10px) !important;
-    .msg-txt{
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: calc(100%);
-      .msg-list-num{
-        font-size: 18px;
-        position: static;
-      }
-      .msg-list-unit{
-        font-size: 12px;
-        position: static;
-        margin-top: 4px;
-      }
-    }
-    .msg-list-svg {
-      font-size: 40px;
-      margin-left: 20px !important;
-    }
-    &.msg-pm {
-      .msg-list-svg {
-        font-size: 46px;
-      }
-    }
-    &.alarm-status{
-      .msg-txt{
-        flex-direction: row;
-      }
-      &.li-warn{
-        span{
-          color: #F65164;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/environmentalScreen/index copy.vue b/src/views/environmentalScreen/index copy.vue
deleted file mode 100644
index 3cd462f..0000000
--- a/src/views/environmentalScreen/index copy.vue	
+++ /dev/null
@@ -1,787 +0,0 @@
-<template>
-  <div class="env-container">
-    <div class="env-top-title" />
-    <div class="current-date">{{ nowDate }}</div>
-    <div class="env-main">
-      <div class="env-main-left">
-        <div class="env-item container-wrap">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3>
-            <svg-icon icon-class="danganjieyue" style="margin-right:10px" />档案借阅
-          </h3>
-          <div class="chart-wrapper" style="height: calc(100% - 40px);">
-            <lend-across :lend-data="lendData" :refreshtime="refreshtime" />
-          </div>
-        </div>
-        <div class="env-item container-wrap" style="height: calc(100% - 170px) !important;">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3>
-            <i class="iconfont icon-kongqizhiliangshuju" />档案库空气质量数据
-          </h3>
-          <span style="display:block; text-align: center; font-size: 12px; margin-left: 10px; color: #3a99fd;">
-            {{ currentDeviceName || '' }}
-          </span>
-          <ul v-if="newAlarm && newAlarm.length !== 0" class="screen-env-list">
-            <li v-for="item in newAlarm" :key="item.SUBID">
-              <svg-icon v-if="item.subName === '温度'" icon-class="temperature" class-name="msg-list-svg" />
-              <svg-icon v-if="item.subName === '湿度'" icon-class="shidu" class-name="msg-list-svg" />
-              <svg-icon v-if="item.subName === 'PM2.5浓度'" icon-class="pm25" class-name="msg-list-svg" />
-              <svg-icon v-if="item.subName === 'PM10浓度'" icon-class="pm10" class-name="msg-list-svg" />
-              <svg-icon v-if="item.subName === 'TVOC'" icon-class="voc" class-name="msg-list-svg" />
-              <svg-icon v-if="item.subName === '二氧化碳'" icon-class="co2" class-name="msg-list-svg" />
-              <svg-icon v-if="item.subName === '甲醛'" icon-class="jiaquan" class-name="msg-list-svg" style="font-size: 64px; margin-left: 10px;" />
-              <!-- <svg-icon v-if="item.subName === '综合气体'" icon-class="comprehensive-gas" class-name="msg-list-svg" /> -->
-              <svg-icon v-if="item.subName === '空气质量'" icon-class="kongqi" class-name="msg-list-svg" />
-              <div class="msg-txt">
-                <span class="msg-list-num">{{ item.value }}</span>
-                <p class="msg-list-unit">{{ item.subName }} {{ item.dw }}</p>
-              </div>
-            </li>
-          </ul>
-          <!-- 空状态提示 -->
-          <div v-else class="empty-tip" style="display:flex; justify-content: center; height: calc(100% - 80px); color: #909399;  align-items: center; font-size: 12px;">
-            暂无数据
-          </div>
-        </div>
-      </div>
-      <div class="env-main-middle" :style="{ height: allDisplayConfigData?.length ? 'calc(100vh - 138px)' : 'calc(100vh - 138px)', overflow: 'hidden' }">
-        <div class="env-3d" :style="{ height: allDisplayConfigData?.length ? 'calc(100% - 80px)' : 'calc(100% + 80px)'}">
-          <div class="banner-top-name">{{ bannerRoomName }}</div>
-          <iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/web3D/index.html" frameborder="0" scrolling="no" />
-        </div>
-        <div v-if="newAlarm && newAlarm.length !== 0" class="air-quality" :class="{'air-warn': aqiStatus === '污染'}">
-          <h3>实时空气质量指数（AQI）</h3>
-          <div class="air-params">
-            <div class="air-left">
-              <span class="air-title">实时AQI</span>
-              <div class="air-result"><p>{{ aqiValue }}</p><span>(AQI-US)</span></div>
-            </div>
-            <div class="air-right">
-              <span>空气质量为</span>
-              <p>{{ aqiStatus }}</p>
-            </div>
-          </div>
-        </div>
-        <!-- <div v-if="allDisplayConfigData && allDisplayConfigData.length !==0 " class="middle-bottom">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <ul class="leakage-list">
-            <li v-for="item in allDisplayConfigData" :key="item.id" :class="{ 'leakage-warn': item.NetStatus === 0 }">
-              <p><i class="iconfont icon-weihubaojing" />{{ item.Name }}</p>
-              <span class="leakage-state-tip" />
-            </li>
-          </ul>
-        </div> -->
-        <div v-if="validDisplayConfigData.length" class="middle-bottom">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <ul
-            class="leakage-list"
-            :style="{
-              height: showScroll ? '147px' : 'auto', // 数量>6时固定高度，否则自适应
-              overflow: showScroll ? 'auto' : 'hidden' // 数量>6时显示滚动
-            }"
-          >
-            <li
-              v-for="item in validDisplayConfigData"
-              :key="item.id"
-              :class="{ 'leakage-warn': item.NetStatus === 0 }"
-              :style="{
-                width: liWidth,
-                height: liHeight,
-                marginRight: '14px',
-                marginBottom: '14px'
-              }"
-            >
-              <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
-              <span class="leakage-state-tip" />
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="env-main-right">
-        <!-- 门禁记录 -->
-        <!-- <security-door :height="'calc(100% - 38px)'" style="margin-bottom: 15px;" /> -->
-        <AccessDoor :height="'calc(100% - 40px)'" style="margin-bottom: 15px;" />
-        <!-- 报警记录 -->
-        <warehouse-warning :height="'calc(100% - 38px)'" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getCurrentTime } from '@/utils/index'
-import lendAcross from '@/views/components/echarts/lendAcross.vue'
-import WarehouseWarning from '@/views/components/WarehouseWarning'
-// import SecurityDoor from '@/views/components/SecurityDoor'
-import AccessDoor from '@/views/components/AccessDoor'
-import displayConfigApi from '@/api/storeManage/displayConfig'
-// import thirdApi from '@/api/thirdApi'
-import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics'
-import alarmApi from '@/api/home/alarm'
-// import { allDeviceData, mockIpData } from './index.js'
-
-// // 同步mock方法
-// const mockFetchDataForIP = (params) => {
-//   return new Promise((resolve) => {
-//     setTimeout(() => {
-//       const ip = params.ip
-//       const result = mockIpData[ip] || { code: 200, message: '操作成功', data: [], timestamp: Date.now() }
-//       resolve(result.data)
-//     }, 500)
-//   })
-// }
-
-export default {
-  name: 'EnvironmentalScreen',
-  components: {
-    WarehouseWarning,
-    // SecurityDoor,
-    AccessDoor,
-    lendAcross
-  },
-  mixins: [statisticsCrud],
-  data() {
-    return {
-      bannerRoomName: '3F 全景图',
-      nowDate: '',
-      timer: null,
-      echartsTimer: null,
-      roomId: 'D6490DA3D4261E8C26D0E3',
-      allDisplayConfigData: [],
-      displayConfigData: [],
-      url: '',
-      allDeviceIds: [],
-      oaoMessage: [],
-      topDisplayData: {
-        DAK_DIV_TOP_001: { show: true, curValue: '23.10', unit: '℃', curstatus: 0 },
-        DAK_DIV_TOP_002: { show: true, curValue: '48.90', unit: '%', curstatus: 0 },
-        DAK_DIV_TOP_003: { show: true, curValue: '619', unit: 'ppm', curstatus: 0 },
-        DAK_DIV_TOP_004: { show: true, curValue: '0.21', unit: 'mg/m³', curstatus: 0 },
-        DAK_DIV_TOP_005: { show: true, curValue: '26.00', unit: 'ug/m³', curstatus: 0 },
-        DAK_DIV_TOP_006: { show: true, curValue: '38.00', unit: 'ug/m³', curstatus: 0 }
-      },
-      refreshtime: 60000,
-      lendData: [],
-      typeData: [],
-      // 同步FullView的核心数据
-      newAlarm: [],
-      aqiValue: 45,
-      aqiStatus: '健康',
-      keepIndicators: [
-        '二氧化碳',
-        '甲醛',
-        '综合气体',
-        'PM2.5浓度',
-        'PM10浓度',
-        '温度',
-        '湿度',
-        '空气质量'
-      ],
-      ipToNameMap: {}, // IP到设备名称映射
-      currentDeviceName: '', // 当前显示设备名称
-      currentIpIndex: 0, // IP轮询索引
-      excludeIpList: ['192.168.99.101:6003'], // 排除IP列表
-      dataTimer: null, // 数据轮询定时器
-      iframeWin: null // iframe窗口对象
-    }
-  },
-  computed: {
-  // 过滤有效数据（排除空值/无效项）
-    validDisplayConfigData() {
-      return this.allDisplayConfigData.filter(item => item && item.Name)
-    },
-    // 每行显示数量（优先3个，数量不足时自动调整）
-    itemsPerRow() {
-      const len = this.validDisplayConfigData.length
-      if (len === 0) return 0
-      // 规则：总数<=3 → 每行显示总数；3<总数<=6 → 每行3个；总数>6 → 每行3个（最多显示2行，超出滚动）
-      return len <= 3 ? len : 3
-    },
-    // li的宽度（百分比，预留间距）
-    liWidth() {
-      if (this.itemsPerRow === 0) return '0'
-      // 每行n个 → 宽度 = 100%/n - 间距（14px）
-      return `calc(100% / ${this.itemsPerRow} - 14px)`
-    },
-    // li的高度（百分比，根据总行数均分）
-    liHeight() {
-      const len = this.validDisplayConfigData.length
-      if (len === 0) return '0'
-      // 总行数 = 向上取整(总数/每行数量)
-      const rows = Math.ceil(len / this.itemsPerRow)
-      // 高度 = 100%/总行数 - 间距（14px）
-      return `calc(100% / ${rows} - 14px)`
-    },
-    // 是否显示滚动（数量>6时，限制高度并显示滚动）
-    showScroll() {
-      return this.validDisplayConfigData.length > 6
-    }
-  },
-  async created() {
-    // 时间更新
-    this.timer = setInterval(() => {
-      this.nowDate = getCurrentTime()
-    }, 1000)
-
-    // 同步FullView的初始化逻辑
-    window.getIframeLoading = this.getIframeLoading
-    // 真实请求请替换：
-    await alarmApi.FetchYpGetSite().then((data) => {
-      if (data && data.length > 0) {
-        this.allDisplayConfigData = data
-        this.handleDeviceIpList()
-      } else {
-        this.allDisplayConfigData = []
-      }
-    })
-
-    // this.allDisplayConfigData = allDeviceData
-    // this.handleDeviceIpList()
-
-    // 初始加载+创建定时器
-    if (this.allDeviceIds.length > 0) {
-      this.currentDeviceName = this.ipToNameMap[this.allDeviceIds[0]] || ''
-      await this.getRealTimeData(this.allDeviceIds[0])
-
-      // 移到这里创建定时器
-      this.dataTimer = setInterval(async() => {
-        const currentIp = this.getNextIp()
-        this.currentDeviceName = this.ipToNameMap[currentIp] || ''
-        await this.getRealTimeData(currentIp)
-      }, 10000)
-      // 10000
-      console.log(`启动IP轮询，共${this.allDeviceIds.length}个有效IP：`, this.allDeviceIds)
-    } else {
-      console.warn('无有效设备IP，停止轮询')
-      this.newAlarm = []
-    }
-  },
-  mounted() {
-    this.iframeWin = this.$refs.myIframe?.contentWindow
-
-    // if (this.allDeviceIds.length > 0) {
-    //   this.dataTimer = setInterval(async() => {
-    //     const currentIp = this.getNextIp()
-    //     this.currentDeviceName = this.ipToNameMap[currentIp] || ''
-    //     await this.getRealTimeData(currentIp)
-    //   }, 10000)
-    //   console.log(`启动IP轮询，共${this.allDeviceIds.length}个有效IP：`, this.allDeviceIds)
-    // }
-
-    // 原有echarts刷新逻辑
-    this.echartsTimer = setInterval(() => {
-      this.lendData = []
-      this.typeData = []
-      this.getBorrowerNumSta()
-    }, this.refreshtime)
-  },
-  beforeDestroy() {
-    // 清理所有定时器
-    if (this.timer) clearInterval(this.timer)
-    if (this.echartsTimer) clearInterval(this.echartsTimer)
-    if (this.dataTimer) {
-      clearInterval(this.dataTimer)
-      console.log('停止IP轮询')
-    }
-  },
-  methods: {
-    /**
-     * 处理设备IP列表（去重+排除+名称映射）
-     */
-    handleDeviceIpList() {
-      const ipSet = new Set()
-      this.ipToNameMap = {}
-
-      this.allDisplayConfigData.forEach(element => {
-        const ip = (element.IP || '').trim()
-        if (ip && !this.excludeIpList.includes(ip)) {
-          ipSet.add(ip)
-          this.ipToNameMap[ip] = element.Name || `未知设备(${ip})`
-          console.log('有效设备IP：', ip, '设备名称：', element.Name)
-        } else if (this.excludeIpList.includes(ip)) {
-          console.log('排除指定IP：', ip, '设备名称：', element.Name)
-        } else if (!ip) {
-          console.log('过滤空IP：', element.Name)
-        }
-      })
-      this.allDeviceIds = Array.from(ipSet)
-    },
-
-    /**
-     * 获取下一个轮询IP（循环切换）
-     */
-    getNextIp() {
-      if (this.allDeviceIds.length === 0) return ''
-      // 先重置索引（防止数组长度变化导致越界）
-      this.currentIpIndex = this.currentIpIndex % this.allDeviceIds.length
-      const ip = this.allDeviceIds[this.currentIpIndex]
-      this.currentIpIndex = (this.currentIpIndex + 1) % this.allDeviceIds.length
-      console.log(`轮询切换 - 当前IP：${ip}，下一个索引：${this.currentIpIndex}`)
-      return ip
-    },
-    /**
-     * 请求指定IP的实时数据（过滤+AQI计算）
-     */
-    async getRealTimeData(targetIp) {
-      if (!targetIp) {
-        this.newAlarm = []
-        this.currentDeviceName = ''
-        return
-      }
-
-      try {
-        console.log(`开始请求IP【${targetIp}】的实时数据（模拟）`)
-        // 模拟
-        // const data = await mockFetchDataForIP({ ip: targetIp })
-        // 真实请求
-        const data = await alarmApi.FetchDataForIP({ ip: targetIp })
-
-        // 过滤需要的指标
-        const filteredData = data.filter(item =>
-          this.keepIndicators.includes(item.subName)
-        )
-
-        if (filteredData.length > 0) {
-          this.newAlarm = filteredData
-          console.log(`IP【${targetIp}】(${this.currentDeviceName}) 过滤后的数据：`, filteredData)
-          this.calcAQI(filteredData)
-        } else {
-          this.newAlarm = []
-          this.aqiValue = 45
-          this.aqiStatus = '健康'
-          console.log(`IP【${targetIp}】(${this.currentDeviceName}) 无需要的指标数据`)
-        }
-      } catch (error) {
-        this.newAlarm = []
-        this.aqiValue = 45
-        this.aqiStatus = '健康'
-        this.currentDeviceName = ''
-        console.error(`IP【${targetIp}】数据请求失败：`, error)
-      }
-    },
-
-    getIframeLoading(value) {},
-    // 原有切换房间方法（同步更新数据）
-    async changeRoomGetDeivce() {
-      this.allDeviceIds = []
-      this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId })
-      this.handleDeviceIpList() // 重新处理IP列表
-      console.log('allDeviceIds2', this.allDeviceIds)
-      this.displayConfigData = this.allDisplayConfigData.filter((item) => {
-        return item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP') || item.divPosition.includes('LS'))
-      })
-      console.log('displayConfigData2', this.displayConfigData)
-
-      // 重新加载数据
-      if (this.allDeviceIds.length > 0) {
-        this.currentDeviceName = this.ipToNameMap[this.allDeviceIds[0]] || ''
-        await this.getRealTimeData(this.allDeviceIds[0])
-      } else {
-        this.newAlarm = []
-        this.currentDeviceName = ''
-      }
-      this.handleAQI()
-    },
-    /**
-     * 计算AQI
-     */
-    calcAQI(filteredData) {
-      const pm25 = parseFloat(filteredData.find(item => item.subName === 'PM2.5浓度')?.value || 0)
-      const pm10 = parseFloat(filteredData.find(item => item.subName === 'PM10浓度')?.value || 0)
-      const formaldehyde = parseFloat(filteredData.find(item => item.subName === '甲醛')?.value || 0)
-      const co2 = parseFloat(filteredData.find(item => item.subName === '二氧化碳')?.value || 0)
-
-      let aqi = 0
-      if (pm25 > 50 || pm10 > 100 || formaldehyde > 30 || co2 > 1000) {
-        aqi = Math.floor(Math.random() * 50) + 100
-        this.aqiStatus = '污染'
-      } else if (pm25 > 25 || pm10 > 50 || formaldehyde > 10 || co2 > 800) {
-        aqi = Math.floor(Math.random() * 50) + 50
-        this.aqiStatus = '一般'
-      } else {
-        aqi = Math.floor(Math.random() * 50) + 1
-        this.aqiStatus = '健康'
-      }
-      this.aqiValue = aqi
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import "~@/assets/styles/lend-manage.scss";
-
-.env-container {
-  width: 100%;
-  height: calc(100vh);
-  background-color: #031435;
-  .env-top-title {
-    width: calc(100vw);
-    height: 130px;
-    background: url("~@/assets/images/largeScreen/top-title.png") no-repeat 0 -14px;
-    background-size: contain;
-  }
-  .current-date {
-    position: fixed;
-    top: 25px;
-    right: 150px;
-    font-size: 16px;
-    color: #3a99fd;
-  }
-  .env-main {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 25px;
-    // margin-top: -12px;
-    .env-main-left,
-    .env-main-right {
-      max-width: 24%;
-      flex: 1;
-      height: calc(100vh - 138px);
-      overflow: hidden;
-    }
-    .env-main-middle {
-      position: relative;
-      flex: 1;
-      margin: 0 20px;
-      height: calc(100vh - 138px);
-      overflow: hidden;
-    }
-    .env-main-left .container-wrap {
-      min-height: auto;
-    }
-    .env-main-right .container-wrap {
-      height: calc(100% / 2 - 14px);
-      min-height: auto;
-    }
-    .env-item {
-      margin-bottom: 20px;
-      text-align: center;
-      h3 {
-        position: relative;
-        display: inline-block;
-        padding: 10px 70px;
-        font-size: 16px;
-        color: #fff;
-        .iconfont {
-          margin-right: 10px;
-          font-size: 14px;
-          color: #f65163;
-        }
-        &::before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 50%;
-          width: 36px;
-          height: 12px;
-          margin-top: -6px;
-          background: url("~@/assets/images/largeScreen/item-left.png") no-repeat;
-          background-size: cover;
-        }
-        &::after {
-          content: "";
-          position: absolute;
-          top: 50%;
-          right: 0;
-          width: 36px;
-          height: 12px;
-          margin-top: -6px;
-          background: url("~@/assets/images/largeScreen/item-right.png") no-repeat;
-          background-size: cover;
-        }
-      }
-      .msg-list {
-        flex-wrap: wrap !important;
-        padding: 0 20px;
-        li {
-          margin-bottom: 20px;
-          display: flex;
-          align-items: center;
-          .msg-list-svg {
-            font-size: 40px;
-            margin-left: 20px;
-          }
-          .msg-txt {
-            margin-left: 15px;
-            text-align: left;
-            .msg-list-num {
-              font-size: 24px;
-              color: #fff;
-              font-weight: 600;
-            }
-            .msg-list-unit {
-              font-size: 14px;
-              color: #ccc;
-              margin: 5px 0 0 0;
-            }
-          }
-        }
-      }
-      .empty-tip {
-        font-size: 14px;
-        color: #999;
-        padding: 40px 0;
-      }
-    }
-    .screen-env-list {
-      flex-wrap: wrap;
-      // justify-content: space-between;
-      justify-content: flex-start;
-      height: calc(100% - 54px);
-      padding: 0 10px;
-      li {
-        flex: none;
-        width: calc(100% / 2 - 22px);
-        margin: 20px 10px;
-        height: calc(100% / 4 - 40px);
-        .msg-list-svg {
-          font-size: 40px;
-          margin-left: 20px;
-        }
-        &.msg-pm {
-          .msg-list-svg {
-            font-size: 46px;
-          }
-        }
-      }
-    }
-    .env-3d {
-      position: relative;
-      width: 100%;
-      // height: calc(100% + 80px);
-      height: calc(100% - 80px);
-      background: url("~@/assets/images/largeScreen/bg.png") no-repeat center -130px;
-      overflow: hidden;
-      margin-top: -80px;
-      .iframe_box {
-        width: 100%;
-        height: 100%;
-      }
-      .screen-env-list {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        padding: 0;
-        width: 165px;
-        height: 200px;
-        z-index: 99999;
-        li {
-          width: 100%;
-          margin: 20px 0 0 0;
-          height: calc(100% / 2 - 20px);
-        }
-      }
-    }
-  }
-}
-.banner-top-name{
-  position: absolute;
-  left: 0;
-  top: 80px;
-  padding: 0 15px;
-  height: 34px;
-  line-height: 32px;
-  font-size: 18px;
-  color: #fff;
-  background-color: #113d72;
-  border: 1px solid #339cff;
-  border-radius: 4px;
-}
-.air-quality{
-  position: absolute;
-  top: 10px;
-  right: 20px;
-  color: #fff;
-  padding: 20px 20px 10px 20px;
-  background-image: linear-gradient(to top, rgba(24, 176, 143, .5), rgba(24, 176, 143, 0));
-  border-radius: 5px;
-  z-index: 9999;
-  h3{
-    padding: 30px 0;
-  }
-  .air-params{
-    display: flex;
-    justify-content: space-between;
-    align-items: last baseline;
-    .air-left{
-      .air-title{
-        position: relative;
-        padding-left: 12px;
-        font-size: 14px;
-        &::before{
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 50%;
-          width: 6px;
-          height: 6px;
-          background-color: #18B08F;
-          border-radius: 50%;
-        }
-      }
-      .air-result{
-        display: flex;
-        justify-content: space-between;
-        align-items: last baseline;
-        padding-top: 10px;
-        p{
-          font-size: 30px;
-          font-weight: 600;
-          padding: 0 6px 0 10px;
-        }
-        span{
-          display: block;
-          font-size: 12px;
-          opacity: .6;
-        }
-      }
-    }
-    .air-right{
-      text-align: center;
-      span{
-        display: block;
-        font-size: 12px;
-      }
-      p{
-        font-size: 18px;
-        font-weight: 600;
-        padding: 10px 30px;
-        margin-top: 10px;
-        background-color: rgba(24, 176, 143, .2);
-        border-radius: 5px;
-      }
-    }
-  }
-}
-.air-warn{
-  background-image: linear-gradient(to top, rgba(246, 81, 99, .5), rgba(24, 176, 143, 0));
-  .air-params{
-    .air-right{
-      p{
-        background-color: rgba(246, 81, 99, .2);
-      }
-    }
-  }
-}
-.middle-bottom {
-  width: 100%;
-  position: relative;
-  padding: 0 !important;
-  background-color: #021941;
-  border: 1px solid #113d72;
-  color: #339cff;
-  font-size: 14px;
-  &::before,
-  &::after{
-    content: "";
-    position: absolute;
-    width: 17px;
-    height: 17px;
-    z-index: 99;
-  }
-  &::before{
-    top: -1px;
-    left: -1px;
-    border-top: 1px solid #339CFF;
-    border-left: 1px solid #339CFF;
-  }
-  &::after{
-    right: -1px;
-    bottom: -1px;
-    border-right: 1px solid #339CFF;
-    border-bottom: 1px solid #339CFF;
-  }
-}
-
-.leakage-list {
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  padding: 14px 0 0 14px;
-  height: auto;
-  text-align: left;
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #339cff;
-    border-radius: 2px;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: #021941;
-  }
-  li {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    // width: calc( 100% / 3 - 14px);
-    // height: calc(100% / 3 - 14px);
-     width: auto;
-    height: auto;
-    // margin: 0 14px 14px 0;
-    padding: 0 30px;
-    border: 1px solid #3581cc;
-    background-color: #02255f;
-    border-radius: 2px;
-    &::before {
-      content: "";
-      position: absolute;
-      top: 4px;
-      left: 4px;
-      width: 0;
-      height: 0;
-      border-color: transparent #339cff;
-      border-width: 0 0 6px 6px;
-      border-style: solid;
-    }
-    p {
-      i {
-        margin-right: 8px;
-        font-size: 20px;
-      }
-    }
-    span.leakage-state-tip {
-      position: relative;
-      display: block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: #18b08f;
-      &::before {
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        box-shadow: inset 0px 0px 10px 1px #18b08f;
-        transform: translate(-50%, -50%);
-      }
-    }
-    &.leakage-warn {
-      border-color: #f65164;
-      box-shadow: inset 0px 0px 15px 1px #f65164;
-      color: #f65164;
-      &::before {
-        border-color: transparent #f65164;
-      }
-      span.leakage-state-tip {
-        background-color: #f65164;
-        &::before {
-          box-shadow: inset 0px 0px 10px 1px #f65164;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/environmentalScreen/index-1218-last.vue b/src/views/environmentalScreen/index-0107-loading.vue
similarity index 65%
rename from src/views/environmentalScreen/index-1218-last.vue
rename to src/views/environmentalScreen/index-0107-loading.vue
index 7b10c71..c17f63f 100644
--- a/src/views/environmentalScreen/index-1218-last.vue
+++ b/src/views/environmentalScreen/index-0107-loading.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="env-container">
-    <div class="env-top-title" />
+    <div class="env-top-title">
+      <img src="@/assets/images/logo-2.png" alt="">
+      <p>档案库房智能管理系统</p>
+    </div>
     <div class="header-date">
       <div class="time">{{ nowDate.split(' ')[1] }}</div>
       <div class="time-other">
@@ -26,60 +29,19 @@
           <h3>
             <i class="iconfont icon-kongqizhiliangshuju" />环控数据
           </h3>
-          <!-- <ul
-            class="leakage-list"
-            :style="{
-              height: showScroll ? 'calc(100% - 40px)' : 'auto',
-              overflow: showScroll ? 'auto' : 'hidden'
-            }"
-          >
-            <li
-              v-for="item in validDisplayConfigData"
-              :key="item.id"
-              :class="{ 'leakage-warn': item.NetStatus === 0 }"
-              :style="{
-                width: liWidth,
-                height: liHeight,
-                marginRight: '12px',
-                marginBottom: '12px'
-              }"
-            >
-              <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
-              <span class="leakage-state-tip" />
-            </li>
-          </ul> -->
           <ul v-if="newAlarm && newAlarm.length !== 0" class="screen-env-list">
-            <!-- <li :class="alarmStatus.infrared === '告警' ? 'li-warn alarm-status' : 'alarm-status'">
-              <div class="msg-txt">
-
-                <p class="msg-list-unit">红外 </p>
-                <span class="msg-list-num">{{ alarmStatus.infrared }}</span>
-              </div>
-            </li>
-            <li :class="alarmStatus.fire === '告警' ? 'li-warn alarm-status' : 'alarm-status'">
-              <div class="msg-txt">
-                <p class="msg-list-unit">消防 </p>
-                <span class="msg-list-num">{{ alarmStatus.fire }}</span>
-              </div>
-            </li>
-            <li :class="alarmStatus.waterLeak === '告警' ? 'li-warn alarm-status' : 'alarm-status'">
-              <div class="msg-txt">
-                <p class="msg-list-unit">漏水 </p>
-                <span class="msg-list-num">{{ alarmStatus.waterLeak }}</span>
-              </div>
-            </li>-->
             <li>
               <svg-icon icon-class="pm25" class-name="msg-list-svg" />
               <div class="msg-txt">
                 <span class="msg-list-num">{{ avgData.pm25 }}</span>
-                <p class="msg-list-unit">PM2.5浓度 {{ avgData.pm25Unit }}</p>
+                <p class="msg-list-unit">PM2.5浓度 <br>{{ avgData.pm25Unit }}</p>
               </div>
             </li>
             <li>
               <svg-icon icon-class="pm10" class-name="msg-list-svg" />
               <div class="msg-txt">
                 <span class="msg-list-num">{{ avgData.pm10 }}</span>
-                <p class="msg-list-unit">PM10浓度 {{ avgData.pm10Unit }}</p>
+                <p class="msg-list-unit">PM10浓度 <br>{{ avgData.pm10Unit }}</p>
               </div>
             </li>
             <li>
@@ -97,7 +59,7 @@
               </div>
             </li>
             <li>
-              <svg-icon icon-class="jiaquan" class-name="msg-list-svg" style="font-size: 64px; margin-left: 10px;" />
+              <svg-icon icon-class="jiaquan" class-name="msg-list-svg" style="font-size: 68px;" />
               <div class="msg-txt">
                 <span class="msg-list-num">{{ avgData.formaldehyde }}</span>
                 <p class="msg-list-unit">甲醛 {{ avgData.formaldehydeUnit }}</p>
@@ -109,10 +71,73 @@
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <h3>
-            <svg-icon icon-class="jiankong" style="font-size: 18px; margin-right: 10px;" />视频监控
+            <i class="iconfont icon-kongqizhiliangshuju" />设备联调状态
           </h3>
-          <div style="height: calc(100% - 40px);">
-            <video id="video" controls autoplay muted width="100%" height="100%" />
+          <div style="display: flex; justify-content: space-between;  height: calc(100% - 40px);">
+            <ul v-if="hasValidData" class="leakage-list">
+              <li
+                :class="[
+                  alarmStatus.infrared === '告警' && !alarmDataLoading ? 'leakage-warn' : '',
+                  alarmDataLoading ? 'leakage-loading' : ''
+                ]"
+              >
+                <p>
+                  <i class="iconfont icon-shebei" />红外
+                  <!-- 加载中图标 -->
+                  <span v-if="alarmDataLoading" class="loading-icon" />
+                </p>
+                <span class="leakage-state-tip" :class="{ 'loading-tip': alarmDataLoading }" />
+              </li>
+              <li
+                :class="[
+                  alarmStatus.fire === '告警' && !alarmDataLoading ? 'leakage-warn' : '',
+                  alarmDataLoading ? 'leakage-loading' : ''
+                ]"
+              >
+                <p>
+                  <i class="iconfont icon-shebei" />消防
+                  <span v-if="alarmDataLoading" class="loading-icon" />
+                </p>
+                <span class="leakage-state-tip" :class="{ 'loading-tip': alarmDataLoading }" />
+              </li>
+              <li
+                :class="[
+                  alarmStatus.waterLeak === '告警' && !alarmDataLoading ? 'leakage-warn' : '',
+                  alarmDataLoading ? 'leakage-loading' : ''
+                ]"
+              >
+                <p>
+                  <i class="iconfont icon-shebei" />漏水
+                  <span v-if="alarmDataLoading" class="loading-icon" />
+                </p>
+                <span class="leakage-state-tip" :class="{ 'loading-tip': alarmDataLoading }" />
+              </li>
+            </ul>
+            <ul class="leakage-list">
+              <li
+                v-for="item in validDisplayConfigData.slice().sort((a, b) => {
+                  // 空值处理
+                  if (!a.Name) return 1;
+                  if (!b.Name) return -1;
+                  // 按长度升序，长度相同则按名称排序
+                  if (a.Name.length === b.Name.length) {
+                    return a.Name.localeCompare(b.Name, 'zh-CN', { numeric: true });
+                  }
+                  return a.Name.length - b.Name.length; // 升序；降序则 b.Name.length - a.Name.length
+                })"
+                :key="item.id"
+                :class="{
+                  'leakage-warn': !ypOnlineStatus && !ypStatusLoading, // 仅在非加载状态且离线时显示告警
+                  'leakage-loading': ypStatusLoading // 加载状态样式
+                }"
+              >
+                <p>
+                  <i class="iconfont icon-shebei" />
+                  {{ item.Name }}
+                </p>
+                <span class="leakage-state-tip" :class="{ 'loading-tip': ypStatusLoading }" />
+              </li>
+            </ul>
           </div>
         </div>
       </div>
@@ -120,9 +145,7 @@
         <div class="env-3d">
           <iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/web3D/index.html" frameborder="0" scrolling="no" style=" margin: 0 auto; display: block;" />
         </div>
-
         <div class="env-alarm-container">
-          <!-- 温湿度 -->
           <ul v-if="hasValidData" class="env-alarm-list env-alarm-list-first">
             <li>
               <svg-icon icon-class="temperature" class-name="msg-list-svg" />
@@ -139,190 +162,58 @@
               </div>
             </li>
           </ul>
-          <el-row :gutter="20" class="panel-group" type="flex" justify="space-between">
-            <el-col class="card-panel-col">
-              <div class="card-panel zaixianshebei">
-                <div class="card-panel-icon-wrapper icon-shopping">
-                  <svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" />
-                </div>
-                <div class="card-panel-description">
-                  <div class="card-panel-text">
-                    <count-to v-if="getDeviceFlag" :start-val="0" :end-val="onlineDeviceNum" :duration="3200" class="card-panel-num" />
-                    <div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
-                  </div>
-                  在线设备
-                </div>
+          <div
+            v-if="hasValidData"
+            class="air-quality"
+            :class="[
+              aqiStatus === '优' ? 'air-excellent' : '',
+              aqiStatus === '良' ? 'air-good' : '',
+              aqiStatus === '轻度污染' ? 'air-lightPollution' : '',
+              aqiStatus === '中度污染' ? 'air-mediumPollution' : '',
+              aqiStatus === '重度污染' ? 'air-heavyPollution' : '',
+              aqiStatus === '严重污染' ? 'air-severePollution' : ''
+            ]"
+          >
+            <h3>空气质量指数</h3>
+            <div class="air-params">
+              <div class="air-left">
+                <span class="air-title">实时AQI</span>
+                <div class="air-result">{{ aqiValue }}</div>
               </div>
-            </el-col>
-            <el-col class="card-panel-col">
-              <div class="card-panel lixianshebei">
-                <div class="card-panel-icon-wrapper icon-shopping">
-                  <svg-icon icon-class="lixianshebei" class-name="card-panel-icon" />
-                </div>
-                <div class="card-panel-description">
-                  <div class="card-panel-text">
-                    <count-to v-if="getDeviceFlag" :start-val="0" :end-val="offlineDeviceNum" :duration="3200" class="card-panel-num" />
-                    <div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
-                  </div>
-                  离线设备
-                </div>
+              <div class="air-right">
+                <span>空气质量</span>
+                <!-- <p>{{ aqiStatus }}</p> -->
+                <p class="air-status-text" v-html="formatAqiStatus" />
               </div>
-            </el-col>
-          </el-row>
-
-          <!-- 第二行：其他指标 -->
-          <!-- <ul class="env-alarm-list-second">
-            <li :class="alarmStatus.infrared === '告警' ? 'li-warn' : ''">
-              <p>红外</p>
-              <span>{{ alarmStatus.infrared }}</span>
-            </li>
-            <li :class="alarmStatus.fire === '告警' ? 'li-warn' : ''">
-              <p>消防</p>
-              <span>{{ alarmStatus.fire }}</span>
-            </li>
-            <li :class="alarmStatus.waterLeak === '告警' ? 'li-warn' : ''">
-              <p>漏水</p>
-              <span>{{ alarmStatus.waterLeak }}</span>
-            </li>
-            <li>
-              <p>PM2.5浓度</p>
-              <span>{{ avgData.pm25 }}{{ avgData.pm25Unit }}</span>
-            </li>
-            <li>
-              <p>TVOC</p>
-              <span>{{ avgData.tvoc }}{{ avgData.tvocUnit }}</span>
-            </li>
-            <li>
-              <p>PM10浓度</p>
-              <span>{{ avgData.pm10 }}{{ avgData.pm10Unit }}</span>
-            </li>
-            <li>
-              <p>二氧化碳</p>
-              <span>{{ avgData.co2 }}{{ avgData.co2Unit }}</span>
-            </li>
-            <li>
-              <p>甲醛</p>
-              <span>{{ avgData.formaldehyde }}{{ avgData.formaldehydeUnit }}</span>
-            </li>
-          </ul> -->
-        </div>
-        <div
-          v-if="hasValidData"
-          class="air-quality"
-          :class="[
-            aqiStatus === '优' ? 'air-excellent' : '',
-            aqiStatus === '良' ? 'air-good' : '',
-            aqiStatus === '轻度污染' ? 'air-lightPollution' : '',
-            aqiStatus === '中度污染' ? 'air-mediumPollution' : '',
-            aqiStatus === '重度污染' ? 'air-heavyPollution' : '',
-            aqiStatus === '严重污染' ? 'air-severePollution' : ''
-          ]"
-        >
-          <h3>实时空气质量指数（AQI）</h3>
-          <div class="air-params">
-            <div class="air-left">
-              <span class="air-title">实时AQI</span>
-              <div class="air-result"><p>{{ aqiValue }}</p><span>(AQI-中国标准)</span></div>
-            </div>
-            <div class="air-right">
-              <span>空气质量为</span>
-              <p>{{ aqiStatus }}</p>
             </div>
           </div>
-        </div>
-
-        <!-- <ul class="env-alarm-list-second">
-          <li :class="alarmStatus.infrared === '告警' ? 'li-warn' : ''">
-            <p><i class="iconfont icon-weihubaojing" />红外</p>
-            <span>{{ alarmStatus.infrared }}</span>
-          </li>
-          <li :class="alarmStatus.fire === '告警' ? 'li-warn' : ''">
-            <p><i class="iconfont icon-weihubaojing" />消防</p>
-            <span>{{ alarmStatus.fire }}</span>
-          </li>
-          <li :class="alarmStatus.waterLeak === '告警' ? 'li-warn' : ''">
-            <p><i class="iconfont icon-weihubaojing" />漏水</p>
-            <span>{{ alarmStatus.waterLeak }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />PM2.5浓度</p>
-            <span>{{ avgData.pm25 }} {{ avgData.pm25Unit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />TVOC</p>
-            <span>{{ avgData.tvoc }} {{ avgData.tvocUnit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />PM10浓度</p>
-            <span>{{ avgData.pm10 }} {{ avgData.pm10Unit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />二氧化碳</p>
-            <span>{{ avgData.co2 }} {{ avgData.co2Unit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />甲醛</p>
-            <span>{{ avgData.formaldehyde }} {{ avgData.formaldehydeUnit }}</span>
-          </li>
-        </ul> -->
-        <div class="device-container">
-          <!-- container-wrap -->
-          <!-- <span class="right-top-line" />
-          <span class="left-bottom-line" />
-
-          <ul class="device-info">
+          <ul class="env-alarm-list env-alarm-list-first">
             <li>
-              <div class="row-item">
-                <div class="svg-box">
-                  <svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" />
-                </div>
-                <span>在线设备</span>
-              </div>
-              <div class="card-panel-text">
-                <count-to :start-val="0" :end-val="lineDevNum" :duration="3200" class="row-num" />
+              <svg-icon icon-class="zaixian" class-name="msg-list-svg" />
+              <div>
+                <!-- <span>{{ avgData.temperature }} </span> -->
+                <count-to v-if="getDeviceFlag" :start-val="0" :end-val="onlineDeviceNum" :duration="3200" class="card-panel-num" />
+                <div v-if="!getDeviceFlag" class="card-panel-text" style="font-size: 18px;"><span class="card-panel-num">获取中...</span></div>
+                <p>在线设备</p>
               </div>
             </li>
             <li>
-              <div class="row-item">
-                <div class="svg-box">
-                  <svg-icon icon-class="lixianshebei" class-name="card-panel-icon" />
-                </div>
-                <span>离线设备</span>
-              </div>
-              <div class="card-panel-text">
-                <count-to :start-val="0" :end-val="offDevNum" :duration="3200" class="row-num" />
+              <svg-icon icon-class="lixian" class-name="msg-list-svg" />
+              <div>
+                <!-- <span>{{ avgData.humidity }}</span> -->
+                <count-to v-if="getDeviceFlag" :start-val="0" :end-val="offlineDeviceNum" :duration="3200" class="card-panel-num" />
+                <div v-if="!getDeviceFlag" class="card-panel-text" style="font-size: 18px;"><span class="card-panel-num">获取中...</span></div>
+                <p>离线设备</p>
               </div>
             </li>
-          </ul> -->
-          <ul v-if="hasValidData" class="leakage-list new-leakage-list">
-            <li :class="alarmStatus.infrared === '告警' ? 'leakage-warn' : ''">
-              <p><i class="iconfont icon-shebei" />红外</p>
-              <span class="leakage-state-tip" />
-            </li>
-            <li :class="alarmStatus.fire === '告警' ? 'leakage-warn' : ''">
-              <p><i class="iconfont icon-shebei" />消防</p>
-              <span class="leakage-state-tip" />
-            </li>
-            <li :class="alarmStatus.waterLeak === '告警' ? 'leakage-warn' : ''">
-              <p><i class="iconfont icon-shebei" />漏水</p>
-              <span class="leakage-state-tip" />
-            </li>
-            <li
-              v-for="item in validDisplayConfigData"
-              :key="item.id"
-              :class="{ 'leakage-warn': item.NetStatus === 0 }"
-            >
-              <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
-              <span class="leakage-state-tip" />
-            </li>
           </ul>
         </div>
       </div>
       <div class="env-main-right">
         <!-- 环控实时报警 -->
-        <warehouse-warning :height="'calc(100% - 38px)'" />
+        <warehouse-warning :is-screen="true" :height="'calc(100% - 38px)'" />
         <!-- 门禁出入记录 -->
-        <AccessDoor :height="'calc(100% - 40px)'" size="5" />
+        <AccessDoor :is-screen="true" :height="'calc(100% - 40px)'" size="4" />
         <!-- 当日告警统计 -->
         <div class="env-item container-wrap">
           <span class="right-top-line" />
@@ -340,6 +231,7 @@
 </template>
 
 <script>
+
 import CountTo from 'vue-count-to'
 import { getCurrentTime } from '@/utils/index'
 import lendAcross from '@/views/components/echarts/lendAcross.vue'
@@ -350,6 +242,7 @@ import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statisti
 import displayConfigApi from '@/api/storeManage/displayConfig'
 import { getDeviceOnoff, getTodayHikAlarmLog } from '@/api/home/device'
 import alarmApi from '@/api/home/alarm'
+import { FetchypNetStatusByIp } from '@/api/storeManage/deviceManage/device'
 // import { allDeviceData, mockIpData } from './index.js'
 
 // const mockFetchDataForIP = (params) => {
@@ -455,17 +348,31 @@ export default {
       targetDeviceIps: ['192.168.99.101:5003', '192.168.99.101:6003', '192.168.99.101:5004'],
       getDeviceFlag: false,
       totalDeviceNum: 0,
-      onlineDeviceNum: 0,
-      offlineDeviceNum: 0,
+      onlineDeviceNum: 0, // 合并后的在线总数
+      offlineDeviceNum: 0, // 合并后的离线总数
+      apiOnlineNum: 0,
+      apiOfflineNum: 0,
       alarmStatisticsRaw: [], // 原始告警统计数据
       alarmChartData: [], // 格式化后给饼图的数据源
-      alarmRefreshTimer: null // 告警数据刷新定时器
+      alarmRefreshTimer: null, // 告警数据刷新定时器
+      deviceConfigTimer: null,
+      deviceConfigRefreshInterval: 15000, // 15秒刷新一次设备配置
+      ypOnlineStatus: true, // 左侧设备联调 - 存储192.168.99.101:6003的在线状态
+      ypStatusLoading: false, // 新增：原品设备状态加载中标识
+      alarmDataLoading: false
     }
   },
   computed: {
-    // validDisplayConfigData() {
-    //   return this.allDisplayConfigData.filter(item => item && item.Name)
-    // },
+    // 处理空气质量状态换行的计算属性
+    formatAqiStatus() {
+      const status = this.aqiStatus
+      // 仅当文本长度为4时，在第2个字后插入<br/>换行
+      if (status && status.length === 4) {
+        return status.slice(0, 2) + '<br/>' + status.slice(2)
+      }
+      // 其他长度（2字/3字）直接返回原文本
+      return status || ''
+    },
     validDisplayConfigData() {
       return this.allDisplayConfigData.filter(item => {
         return item && item.Name && this.targetDeviceIps.includes(item.IP?.trim())
@@ -488,6 +395,24 @@ export default {
     },
     showScroll() {
       return this.validDisplayConfigData.length > 8
+    },
+    // 统计本地配置设备的在线/离线数量
+    localDeviceStats() {
+      const stats = {
+        online: 0,
+        offline: 0
+      }
+      this.allDisplayConfigData.forEach(item => {
+        const ip = (item.IP || '').trim()
+        if (ip) {
+          if (item.NetStatus === 1) {
+            stats.online++
+          } else if (item.NetStatus === 0) {
+            stats.offline++
+          }
+        }
+      })
+      return stats
     }
   },
   async created() {
@@ -497,31 +422,20 @@ export default {
     }, 1000)
     this.getDevice()
     this.getTodayHikAlarmLog()
-    // this.alarmRefreshTimer = setInterval(() => {
-    //   this.getTodayHikAlarmLog()
-    // }, 100000)
-    // 初始化逻辑
+    // 初始化
     window.getIframeLoading = this.getIframeLoading
-    // this.allDisplayConfigData = allDeviceData
-    // this.handleDeviceIpList()
 
-    await alarmApi.FetchYpGetSite().then((data) => {
-      if (data && data.length > 0) {
-        this.allDisplayConfigData = data
-        this.handleDeviceIpList()
-      } else {
-        this.allDisplayConfigData = []
-      }
-    })
+    await this.fullDataRefresh()
 
-    if (this.allDeviceIds.length > 0) {
-      await this.getAllDevicesData()
-      this.calcAllAvgData() // 计算所有指标平均值
-      this.calcAQIByAvg() // 根据平均值计算AQI
-    } else {
-      console.warn('无设备IP数据')
-      this.hasValidData = false
-    }
+    this.deviceConfigTimer = setInterval(() => {
+      this.fullDataRefresh()
+
+      // this.getDeviceFlag = false
+      // this.totalDeviceNum = 0
+      // this.onlineDeviceNum = 0
+      // this.offlineDeviceNum = 0
+      this.getDevice()
+    }, this.deviceConfigRefreshInterval)
   },
   mounted() {
     this.iframeWin = this.$refs.myIframe?.contentWindow
@@ -533,12 +447,13 @@ export default {
       this.getBorrowerNumSta()
       this.getTodayHikAlarmLog()
     }, this.refreshtime)
-    this.getVideoUrl()
+    // this.getVideoUrl()
   },
   beforeDestroy() {
     // 清理所有定时器
     if (this.timer) clearInterval(this.timer)
     if (this.echartsTimer) clearInterval(this.echartsTimer)
+    if (this.deviceConfigTimer) clearInterval(this.deviceConfigTimer)
     // 销毁视频流
     if (this.webRtcServer) {
       this.webRtcServer.disconnect()
@@ -547,6 +462,55 @@ export default {
     // if (this.alarmRefreshTimer) clearInterval(this.alarmRefreshTimer)
   },
   methods: {
+    getYPReadStatus() {
+      const targetIp = '192.168.99.101:6003'
+      // 请求开始，设置加载状态为true
+      this.ypStatusLoading = true
+      FetchypNetStatusByIp({ ip: targetIp })
+        .then((data) => {
+          console.log('data', data)
+          this.ypOnlineStatus = data !== 0
+          console.log(`原品环控设备(${targetIp})状态：`, this.ypOnlineStatus ? '在线' : '离线')
+        })
+        .catch((error) => {
+          console.error('获取原品环控设备状态失败:', error)
+          this.ypOnlineStatus = false
+        })
+        .finally(() => {
+          this.ypStatusLoading = false
+        })
+    },
+    /**
+     * 全量数据更新（设备配置 + 设备实时数据 + 计算逻辑）
+     */
+    async fullDataRefresh() {
+      try {
+        // this.allDisplayConfigData = allDeviceData
+        // this.handleDeviceIpList()
+
+        // 1. 刷新设备配置数据（allDisplayConfigData）
+        const siteData = await alarmApi.FetchYpGetSite()
+        this.allDisplayConfigData = siteData && siteData.length > 0 ? siteData : []
+        console.log('定时刷新：设备配置数据更新完成', this.allDisplayConfigData)
+
+        // 2. 处理设备IP列表
+        this.handleDeviceIpList()
+        this.getYPReadStatus()
+
+        // 3. 若有设备IP，继续获取实时数据并计算
+        if (this.allDeviceIds.length > 0) {
+          await this.getAllDevicesData()
+          this.calcAllAvgData() // 计算所有指标平均值
+          this.calcAQIByAvg() // 根据平均值计算AQI
+          console.log('定时刷新：设备实时数据及计算逻辑更新完成')
+        } else {
+          console.warn('定时刷新：无设备IP数据，跳过后续步骤')
+          this.hasValidData = false
+        }
+      } catch (error) {
+        console.error('定时刷新：全量数据更新失败', error)
+      }
+    },
     getTodayHikAlarmLog() {
       getTodayHikAlarmLog().then(data => {
         console.log('今日海康告警日志', data)
@@ -605,12 +569,71 @@ export default {
     },
     getDevice() {
       getDeviceOnoff().then(data => {
+        // 保存接口返回的原始数量
+        this.apiOnlineNum = data.online.length
+        this.apiOfflineNum = data.offline.length
         this.getDeviceFlag = true
         this.totalDeviceNum = data.deviceall.length
-        this.onlineDeviceNum = data.online.length
-        this.offlineDeviceNum = data.offline.length
-        // this.onlineDevice = data.online
-        // this.offDevice = data.offline
+
+        // 计算合并后的数量
+        this.calcMergedDeviceNum()
+      }).catch(error => {
+        console.error('获取设备在线离线数量失败:', error)
+        this.getDeviceFlag = true
+        this.apiOnlineNum = 0
+        this.apiOfflineNum = 0
+        this.calcMergedDeviceNum()
+      })
+    },
+    // 计算合并后的在线/离线设备数量
+    calcMergedDeviceNum() {
+      // 1. 先重新计算本地设备统计（包含IP明细）
+      const localStats = {
+        online: 0,
+        offline: 0,
+        onlineIps: [],
+        offlineIps: []
+      }
+      // 遍历所有IP非空的设备，统计数量并记录IP
+      this.allDisplayConfigData.forEach(item => {
+        const ip = (item.IP || '').trim()
+        if (ip) {
+          if (item.NetStatus === 1) {
+            localStats.online++
+            localStats.onlineIps.push({
+              ip: ip,
+              name: item.Name || '未知设备'
+            })
+          } else if (item.NetStatus === 0) {
+            localStats.offline++
+            localStats.offlineIps.push({
+              ip: ip,
+              name: item.Name || '未知设备'
+            })
+          }
+        }
+      })
+
+      // 2. 合并数量
+      // this.onlineDeviceNum = this.apiOnlineNum + localStats.online
+      // this.offlineDeviceNum = this.apiOfflineNum + localStats.offline
+
+      this.onlineDeviceNum = this.apiOnlineNum
+      this.offlineDeviceNum = this.apiOfflineNum
+
+      // 3. 打印详细日志（包含IP明细）
+      console.log('===== 合并后的设备数量详情 =====', {
+        // 接口返回数据
+        接口在线数量: this.apiOnlineNum,
+        接口离线数量: this.apiOfflineNum,
+        // 本地配置数据（含IP）
+        本地在线数量: localStats.online,
+        本地在线设备IP: localStats.onlineIps,
+        本地离线数量: localStats.offline,
+        本地离线设备IP: localStats.offlineIps,
+        // 合并后总数
+        总在线数量: this.onlineDeviceNum,
+        总离线数量: this.offlineDeviceNum
       })
     },
     getVideoUrl() {
@@ -695,31 +718,39 @@ export default {
       this.allDeviceIds = Array.from(ipSet)
     },
     /**
-     * 获取所有设备的实时数据
-     */
+   * 获取所有设备的实时数据（修改：保留设备IP关联）
+   */
     async getAllDevicesData() {
+      // 开始加载，设置加载状态为 true
+      this.alarmDataLoading = true
       const allData = []
-      for (const ip of this.allDeviceIds) {
-        try {
-          // const data = await mockFetchDataForIP({ ip })
-          // 真实请求
-          const data = await alarmApi.FetchDataForIP({ ip })
-          // 过滤需要的指标并添加到总数据
-          const filtered = data.filter(item => this.keepIndicators.includes(item.subName)).map(item => {
-            if (item.subName === 'CO2浓度') {
-              return { ...item, subName: '二氧化碳' }
+      try {
+        for (const ip of this.allDeviceIds) {
+          try {
+            // const data = await mockFetchDataForIP({ ip })
+            // 真实请求
+            const data = await alarmApi.FetchDataForIP({ ip })
+            const filtered = data.filter(item => this.keepIndicators.includes(item.subName)).map(item => {
+              const formattedItem = item.subName === 'CO2浓度' ? { ...item, subName: '二氧化碳' } : item
+              formattedItem.deviceIp = ip
+              return formattedItem
+            })
+            if (filtered.length > 0) {
+              allData.push(...filtered)
             }
-            return item
-          })
-          if (filtered.length > 0) {
-            allData.push(...filtered)
+          } catch (error) {
+            console.error(`获取IP【${ip}】数据失败：`, error)
           }
-        } catch (error) {
-          console.error(`获取IP【${ip}】数据失败：`, error)
         }
+        this.newAlarm = allData
+        this.hasValidData = allData.length > 0
+      } catch (error) {
+        console.error('获取所有设备数据失败：', error)
+        this.hasValidData = false
+      } finally {
+        // 无论成功失败，都关闭加载状态
+        this.alarmDataLoading = false
       }
-      this.newAlarm = allData
-      this.hasValidData = allData.length > 0
     },
     /**
      * 计算所有设备指标的平均值（适配ON/OFF告警状态，保留单位）
@@ -740,12 +771,26 @@ export default {
         fire: [], // 消防状态（ON/OFF）
         waterLeak: [] // 漏水状态（ON/OFF）
       }
+      console.log('===== 所有设备原始数据 =====', this.newAlarm)
 
-      // 2. 遍历所有数据累加，同时记录单位
+      // 2. 遍历所有数据累加，同时记录单位 + 打印温湿度设备详情
       this.newAlarm.forEach(item => {
         const value = parseFloat(item.value) || 0
         // 提取单位（优先使用数据中的dw字段，无则用默认值）
         const unit = item.dw || this.getDefaultUnit(item.subName)
+        // 根据设备IP匹配设备名称
+        const deviceInfo = this.allDisplayConfigData.find(dev => (dev.IP || '').trim() === item.deviceIp)
+        const deviceName = deviceInfo?.Name || `未知设备（IP：${item.deviceIp}）`
+
+        // 专门打印温度、湿度设备详情
+        if (item.subName === '温度' || item.subName === '湿度') {
+          console.log(`【${item.subName}设备】`, {
+            设备名称: deviceName,
+            设备IP: item.deviceIp,
+            数值: value,
+            单位: unit || this.getDefaultUnit(item.subName)
+          })
+        }
 
         switch (item.subName) {
           case '温度':
@@ -784,7 +829,7 @@ export default {
             sumMap.formaldehyde.count++
             if (!sumMap.formaldehyde.unit && unit) sumMap.formaldehyde.unit = unit
             break
-          // 告警类指标直接存储状态
+            // 告警类指标直接存储状态
           case '红外':
             sumMap.infrared.push(item.value)
             break
@@ -796,7 +841,7 @@ export default {
             break
         }
       })
-      console.log('累加结果：', sumMap)
+      console.log('===== 温湿度等指标累加结果 =====', sumMap)
 
       // 3. 计算平均值（保留两位小数），并赋值单位
       this.avgData = {
@@ -815,7 +860,7 @@ export default {
         formaldehyde: sumMap.formaldehyde.count ? (sumMap.formaldehyde.sum / sumMap.formaldehyde.count).toFixed(2) : '0.00',
         formaldehydeUnit: sumMap.formaldehyde.unit || 'ppm'
       }
-      console.log('平均值：', this.avgData)
+      console.log('===== 所有设备温湿度等指标平均值 =====', this.avgData)
 
       // 4. 处理告警状态（ON=告警，OFF=正常；只要有一个ON就显示告警）
       this.alarmStatus = {
@@ -909,6 +954,7 @@ export default {
         finalAQI >= grade.aqiMin && finalAQI <= grade.aqiMax
       )
       this.aqiStatus = matchedGrade ? matchedGrade.level : '严重污染'
+      // this.aqiStatus = '严重污染'
 
       console.log('IAQI-PM2.5：', iaqiPm25, 'IAQI-PM10：', iaqiPm10, '最终AQI：', finalAQI, '| 等级：', this.aqiStatus)
     },
@@ -928,10 +974,27 @@ export default {
   height: calc(100vh);
   background-color: #031435;
   .env-top-title {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    font-size: 44px;
+    letter-spacing: 0.1em;
+    text-align: center;
+    color: #fff;
     width: calc(100vw);
     height: 130px;
-    background: url("~@/assets/images/largeScreen/top-title.png") no-repeat 0 -14px;
+    background: url("~@/assets/images/largeScreen/top.png") no-repeat 0 -14px;
     background-size: contain;
+    font-family: 'LianMengQiYiLuShuaiZhengRuiHei';
+    img{
+      display: block;
+      height: 50px;
+      margin-right: 10px;
+      margin-top: 26px;
+    }
+    p{
+      margin-top: 26px;
+    }
   }
   .header-date {
     position: fixed;
@@ -969,6 +1032,14 @@ export default {
       height: calc(100vh - 138px);
       overflow: hidden;
       z-index: 9999;
+      ::v-deep .el-table .el-table__body-wrapper td.el-table__cell,
+      ::v-deep .el-table .el-table__fixed-right td.el-table__cell{
+        font-size: 15px !important;
+      }
+      ::v-deep .el-table .el-table__header .el-table__cell .cell,
+      ::v-deep .el-table.warehose-el-table .el-table__header .el-table__cell .cell{
+        font-size: 16px !important;
+      }
     }
     .env-main-middle {
       position: relative;
@@ -996,7 +1067,7 @@ export default {
         position: relative;
         display: inline-block;
         padding: 10px 70px;
-        font-size: 16px;
+        font-size: 20px;
         color: #fff;
         .iconfont {
           margin-right: 10px;
@@ -1031,7 +1102,7 @@ export default {
     .env-3d {
       position: fixed;
       left: 0;
-      top: -40px;
+      top: 10px;
       width: 100%;
       // height: calc(100%);
       height: 100%;
@@ -1064,26 +1135,34 @@ export default {
   border-radius: 4px;
 }
 .air-quality{
-  position: absolute;
-  bottom: 10px;
-  right: 20px;
+  // position: absolute;
+  // bottom: 10px;
+  // right: 20px;
+  // width: calc(100% / 3 - 100px);
+  width: calc(20% + 100px);
   color: #fff;
-  padding: 20px 20px 10px 20px;
-  background-image: linear-gradient(to top, rgba(24, 176, 143, .5), rgba(24, 176, 143, 0));
+  margin: 0 20px 0 0;
+  padding: 10px;
+  height: 90px;
+  background-image: linear-gradient(to bottom, rgba(24, 176, 143, .5), rgba(24, 176, 143, 0));
   border-radius: 5px;
   z-index: 9999;
   h3{
-    padding: 30px 0;
+    font-size: 18px;
+    padding: 0 0 6px 0;
   }
   .air-params{
     display: flex;
     justify-content: space-between;
-    align-items: last baseline;
+    align-items: center;
     .air-left{
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
       .air-title{
         position: relative;
         padding-left: 12px;
-        font-size: 14px;
+        font-size: 12px;
         &::before{
           content: "";
           position: absolute;
@@ -1093,82 +1172,112 @@ export default {
           height: 6px;
           background-color: #18B08F;
           border-radius: 50%;
+          margin-top: -3px;
         }
       }
       .air-result{
-        display: flex;
-        justify-content: space-between;
-        align-items: last baseline;
-        padding-top: 10px;
-        p{
-          font-size: 30px;
-          font-weight: 600;
-          padding: 0 6px 0 10px;
-        }
-        span{
-          display: block;
-          font-size: 12px;
-          opacity: .6;
-        }
+        font-size: 30px;
+        font-weight: 600;
+        padding: 0 0 0 10px;
+        // p{
+        //   font-size: 22px;
+        //   font-weight: 600;
+        //   padding: 0 6px 0 10px;
+        // }
+        // span{
+        //   display: block;
+        //   font-size: 11px;
+        //   opacity: .6;
+        // }
       }
     }
     .air-right{
-      text-align: center;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
       span{
         display: block;
         font-size: 12px;
+        //  padding: 8px 0;
+        margin-right: 6px;
       }
       p{
-        font-size: 18px;
+        font-size: 24px;
         font-weight: 600;
-        padding: 10px 30px;
-        margin-top: 10px;
+        padding: 8px 15px;
         background-color: rgba(24, 176, 143, .2);
         border-radius: 5px;
+        margin-top: -4px;
       }
     }
   }
 
   // 原有基础样式保留
   &.air-excellent { // 优 - 绿色
-    background-image: linear-gradient(to top, rgba(40, 180, 40, .5), rgba(40, 180, 40, 0));
+    background-image: linear-gradient(to bottom, rgba(40, 180, 40, .5), rgba(40, 180, 40, 0));
     .air-params .air-right p {
       background-color: rgba(40, 180, 40, .2);
     }
   }
   &.air-good { // 良 - 黄色
-    background-image: linear-gradient(to top, rgba(255, 200, 0, .5), rgba(255, 200, 0, 0));
+    background-image: linear-gradient(to bottom, rgba(255, 200, 0, .5), rgba(255, 200, 0, 0));
     .air-params .air-right p {
       background-color: rgba(255, 200, 0, .2);
     }
   }
   &.air-lightPollution { // 轻度污染 - 橙色
-    background-image: linear-gradient(to top, rgba(255, 140, 0, .5), rgba(255, 140, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(255, 140, 0, .2);
+    h3{
+      padding: 0;
+    }
+    background-image: linear-gradient(to bottom, rgba(255, 140, 0, .5), rgba(255, 140, 0, 0));
+    .air-params {
+      margin-top: -6px;
+      .air-right p {
+        background-color: rgba(255, 140, 0, .2);
+      }
     }
   }
   &.air-mediumPollution { // 中度污染 - 红色
-    background-image: linear-gradient(to top, rgba(255, 0, 0, .5), rgba(255, 0, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(255, 0, 0, .2);
+    h3{
+      padding: 0;
+    }
+    background-image: linear-gradient(to bottom, rgba(255, 0, 0, .5), rgba(255, 0, 0, 0));
+    .air-params {
+      margin-top: -6px;
+      .air-right p {
+        background-color: rgba(255, 0, 0, .2);
+      }
     }
   }
   &.air-heavyPollution { // 重度污染 - 紫色
-    background-image: linear-gradient(to top, rgba(150, 0, 200, .5), rgba(150, 0, 200, 0));
-    .air-params .air-right p {
-      background-color: rgba(150, 0, 200, .2);
+    h3{
+      padding: 0;
+    }
+    background-image: linear-gradient(to bottom, rgba(150, 0, 200, .5), rgba(150, 0, 200, 0));
+
+    .air-params {
+      margin-top: -6px;
+      .air-right p {
+        background-color: rgba(150, 0, 200, .2);
+      }
     }
   }
   &.air-severePollution { // 严重污染 - 褐红色
-    background-image: linear-gradient(to top, rgba(120, 0, 0, .5), rgba(120, 0, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(120, 0, 0, .2);
+    h3{
+      padding: 0;
+    }
+    background-image: linear-gradient(to bottom, rgba(120, 0, 0, .5), rgba(120, 0, 0, 0));
+
+    .air-params {
+      margin-top: -6px;
+      .air-right p {
+        background-color: rgba(120, 0, 0, .2);
+      }
     }
   }
 }
 .air-warn{
-  background-image: linear-gradient(to top, rgba(246, 81, 99, .5), rgba(24, 176, 143, 0));
+  background-image: linear-gradient(to bottom, rgba(246, 81, 99, .5), rgba(24, 176, 143, 0));
   .air-params{
     .air-right{
       p{
@@ -1179,21 +1288,14 @@ export default {
 }
 .leakage-list {
   display: flex;
-  justify-content: flex-start;
+  flex-direction: column;
+  justify-content: space-between;
   flex-wrap: wrap;
-  padding: 0 0 0 14px;
   text-align: left;
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #339cff;
-    border-radius: 2px;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: #021941;
-  }
+  width: calc(100% / 2 - 14px);
+  height: calc(100%);
+  margin: 0 7px;
+  padding: 20px 0;
   li {
     position: relative;
     display: flex;
@@ -1203,6 +1305,9 @@ export default {
     border: 1px solid #3581cc;
     background-color: #02255f;
     border-radius: 2px;
+    width: calc(100%);
+    height: calc(100% / 4 - 10px);
+    margin: 10px 0;
     &::before {
       content: "";
       position: absolute;
@@ -1215,7 +1320,7 @@ export default {
       border-style: solid;
     }
     p {
-      font-size: 12px;
+      font-size: 16px;
       color: #fff;
       i {
         margin-right: 4px;
@@ -1260,7 +1365,7 @@ export default {
   display: flex;
   justify-content: flex-start;
   // width: 100%;
-  width: calc(100% / 2);
+  width: calc(40%);
   li{
     display: flex;
     flex-direction: column;
@@ -1268,7 +1373,7 @@ export default {
     align-content: center;
     justify-content: center;
     height: 66px;
-    margin-right: 10px;
+    margin-right: 24px;
     background: url('~@/assets/images/data_border_default.png') no-repeat;
     background-size: 100% 100%;
     position: relative;
@@ -1280,6 +1385,7 @@ export default {
     }
     p{
       color: #339CFF;
+      font-weight: bold;
     }
     span{
       display: block;
@@ -1294,7 +1400,7 @@ export default {
   position: absolute;
   top: 10px;
   left: 10px;
-  width: calc(100% - 20px);
+  width: calc(100%);
   display: flex;
   justify-content: flex-start;
 
@@ -1321,14 +1427,7 @@ export default {
       }
     }
   }
-  // .env-alarm-list-second {
-  //   li{
-  //     width: calc(100% / 10 - 10px);
-  //   }
-  // }
-
 }
-
 .env-alarm-list-second {
   position: absolute;
   bottom: 10px;
@@ -1381,9 +1480,6 @@ export default {
   position: absolute;
   bottom: 0;
   left: 10px;
-  // height: 160px;
-  // padding: 14px 0 10px 14px;
-  // min-height: auto;
 }
 
 .new-leakage-list{
@@ -1444,11 +1540,10 @@ export default {
 
 .screen-env-list {
   flex-wrap: wrap;
-  // justify-content: space-between;
-  // justify-content: center;
   height: calc(100% - 54px);
   padding: 0 10px;
   li {
+    position: relative;
     flex: none;
     width: calc(100% / 2 - 22px);
     margin: 10px 10px 0 10px;
@@ -1458,6 +1553,7 @@ export default {
       flex-direction: column;
       align-items: center;
       justify-content: center;
+      padding-left: 40px;
       height: calc(100%);
       .msg-list-num{
         font-size: 18px;
@@ -1466,12 +1562,15 @@ export default {
       .msg-list-unit{
         font-size: 12px;
         position: static;
-        margin-top: 4px;
+        margin-top: 8px;
       }
     }
     .msg-list-svg {
+      position: absolute;
+      left: 20px;
+      top: 0;
       font-size: 40px;
-      margin-left: 20px !important;
+      margin-left: 0 !important;
     }
     &.msg-pm {
       .msg-list-svg {
@@ -1492,7 +1591,8 @@ export default {
 }
 
 .panel-group {
-  width: calc(100% / 2);
+  // width: calc(100% / 3 + 60px);
+  width: calc(40% - 100px);
   .card-panel-col {
     margin-bottom: 20px;
   }
@@ -1530,25 +1630,25 @@ export default {
     }
     .card-panel-icon-wrapper {
       float: left;
-      margin: 0 10px 0 12px;
-      padding: 20px;
+      margin: 0 8px;
+      padding: 20px 0;
       transition: all 0.38s ease-out;
       border-radius: 6px;
     }
 
     .card-panel-icon {
       float: left;
-      font-size: 60px;
+      font-size: 40px;
     }
 
     .card-panel-description {
-      margin: 19px;
+      margin: 20px 4px;
       margin-left: 0px;
 
       .card-panel-text {
         line-height: 30px;
         color: rgba(0, 0, 0, 0.45);
-        font-size: 22px;
+        font-size: 20px;
         margin-bottom: 11px;
         & span {
           -webkit-background-clip: text;
@@ -1559,4 +1659,39 @@ export default {
     }
   }
 }
+::v-deep .table-title{
+  font-size: 20px;
+}
+// 加载中状态样式
+.leakage-loading {
+  border-color: #339cff;
+  color: #339cff;
+
+  &::before {
+    border-color: transparent #339cff;
+  }
+}
+
+// 状态提示点加载样式
+.loading-tip {
+  background-color: #339cff !important;
+
+  &::before {
+    box-shadow: inset 0px 0px 10px 1px #339cff !important;
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+}
+
+// 旋转动画
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// 呼吸灯动画
+@keyframes pulse {
+  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
+  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
+  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
+}
 </style>
diff --git a/src/views/environmentalScreen/index-1216-1.vue b/src/views/environmentalScreen/index-1216-1.vue
deleted file mode 100644
index cbd93df..0000000
--- a/src/views/environmentalScreen/index-1216-1.vue
+++ /dev/null
@@ -1,1149 +0,0 @@
-<template>
-  <div class="env-container">
-    <div class="env-top-title" />
-    <div class="header-date">
-      <div class="time">{{ nowDate.split(' ')[1] }}</div>
-      <div class="time-other">
-        <span>{{ currentWeek }}</span>
-        <span>{{ nowDate.split(' ')[0] }}</span>
-      </div>
-    </div>
-    <div class="env-main">
-      <div class="env-main-left">
-        <div class="env-item container-wrap" style="height: 130px !important; ">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3>
-            <svg-icon icon-class="danganjieyue" style="margin-right:10px" />档案借阅
-          </h3>
-          <div class="chart-wrapper">
-            <lend-across :lend-data="lendData" :refreshtime="refreshtime" />
-          </div>
-        </div>
-        <div class="env-item container-wrap left-wrap">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3>
-            <i class="iconfont icon-kongqizhiliangshuju" />设备联调状态
-          </h3>
-          <ul
-            class="leakage-list"
-            :style="{
-              height: showScroll ? 'calc(100% - 40px)' : 'auto',
-              overflow: showScroll ? 'auto' : 'hidden'
-            }"
-          >
-            <li
-              v-for="item in validDisplayConfigData"
-              :key="item.id"
-              :class="{ 'leakage-warn': item.NetStatus === 0 }"
-              :style="{
-                width: liWidth,
-                height: liHeight,
-                marginRight: '12px',
-                marginBottom: '12px'
-              }"
-            >
-              <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
-              <span class="leakage-state-tip" />
-            </li>
-          </ul>
-        </div>
-        <div class="env-item container-wrap left-wrap">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3>
-            <svg-icon icon-class="jiankong" style="font-size: 18px; margin-right: 10px;" />视频监控
-          </h3>
-          <div style="height: calc(100% - 40px);">
-            <video id="video" controls autoplay muted width="100%" height="100%" />
-          </div>
-        </div>
-      </div>
-      <div class="env-main-middle">
-        <div class="env-3d">
-          <iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/web3D/index.html" frameborder="0" scrolling="no" style=" margin: 0 auto; display: block;" />
-        </div>
-
-        <!-- 重构告警列表 - 分为两行 -->
-        <div v-if="hasValidData" class="env-alarm-container">
-          <!-- 第一行：温湿度 -->
-          <ul class="env-alarm-list env-alarm-list-first">
-            <li>
-              <svg-icon icon-class="temperature" class-name="msg-list-svg" />
-              <div>
-                <span>{{ avgData.temperature }} </span>
-                <p>温度 {{ avgData.temperatureUnit }}</p>
-              </div>
-            </li>
-            <li>
-              <svg-icon icon-class="shidu" class-name="msg-list-svg" />
-              <div>
-                <span>{{ avgData.humidity }}</span>
-                <p>湿度  {{ avgData.humidityUnit }}</p>
-              </div>
-            </li>
-          </ul>
-
-          <!-- 第二行：其他指标 -->
-          <!-- <ul class="env-alarm-list-second">
-            <li :class="alarmStatus.infrared === '告警' ? 'li-warn' : ''">
-              <p>红外</p>
-              <span>{{ alarmStatus.infrared }}</span>
-            </li>
-            <li :class="alarmStatus.fire === '告警' ? 'li-warn' : ''">
-              <p>消防</p>
-              <span>{{ alarmStatus.fire }}</span>
-            </li>
-            <li :class="alarmStatus.waterLeak === '告警' ? 'li-warn' : ''">
-              <p>漏水</p>
-              <span>{{ alarmStatus.waterLeak }}</span>
-            </li>
-            <li>
-              <p>PM2.5浓度</p>
-              <span>{{ avgData.pm25 }}{{ avgData.pm25Unit }}</span>
-            </li>
-            <li>
-              <p>TVOC</p>
-              <span>{{ avgData.tvoc }}{{ avgData.tvocUnit }}</span>
-            </li>
-            <li>
-              <p>PM10浓度</p>
-              <span>{{ avgData.pm10 }}{{ avgData.pm10Unit }}</span>
-            </li>
-            <li>
-              <p>二氧化碳</p>
-              <span>{{ avgData.co2 }}{{ avgData.co2Unit }}</span>
-            </li>
-            <li>
-              <p>甲醛</p>
-              <span>{{ avgData.formaldehyde }}{{ avgData.formaldehydeUnit }}</span>
-            </li>
-          </ul> -->
-        </div>
-        <div
-          v-if="hasValidData"
-          class="air-quality"
-          :class="[
-            aqiStatus === '优' ? 'air-excellent' : '',
-            aqiStatus === '良' ? 'air-good' : '',
-            aqiStatus === '轻度污染' ? 'air-lightPollution' : '',
-            aqiStatus === '中度污染' ? 'air-mediumPollution' : '',
-            aqiStatus === '重度污染' ? 'air-heavyPollution' : '',
-            aqiStatus === '严重污染' ? 'air-severePollution' : ''
-          ]"
-        >
-          <h3>实时空气质量指数（AQI）</h3>
-          <div class="air-params">
-            <div class="air-left">
-              <span class="air-title">实时AQI</span>
-              <div class="air-result"><p>{{ aqiValue }}</p><span>(AQI-中国标准)</span></div>
-            </div>
-            <div class="air-right">
-              <span>空气质量为</span>
-              <p>{{ aqiStatus }}</p>
-            </div>
-          </div>
-        </div>
-
-        <ul class="env-alarm-list-second">
-          <li :class="alarmStatus.infrared === '告警' ? 'li-warn' : ''">
-            <p><i class="iconfont icon-weihubaojing" />红外</p>
-            <span>{{ alarmStatus.infrared }}</span>
-          </li>
-          <li :class="alarmStatus.fire === '告警' ? 'li-warn' : ''">
-            <p><i class="iconfont icon-weihubaojing" />消防</p>
-            <span>{{ alarmStatus.fire }}</span>
-          </li>
-          <li :class="alarmStatus.waterLeak === '告警' ? 'li-warn' : ''">
-            <p><i class="iconfont icon-weihubaojing" />漏水</p>
-            <span>{{ alarmStatus.waterLeak }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />PM2.5浓度</p>
-            <span>{{ avgData.pm25 }} {{ avgData.pm25Unit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />TVOC</p>
-            <span>{{ avgData.tvoc }} {{ avgData.tvocUnit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />PM10浓度</p>
-            <span>{{ avgData.pm10 }} {{ avgData.pm10Unit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />二氧化碳</p>
-            <span>{{ avgData.co2 }} {{ avgData.co2Unit }}</span>
-          </li>
-          <li>
-            <p><i class="iconfont icon-weihubaojing" />甲醛</p>
-            <span>{{ avgData.formaldehyde }} {{ avgData.formaldehydeUnit }}</span>
-          </li>
-        </ul>
-      </div>
-      <div class="env-main-right">
-        <!-- 环控实时报警 -->
-        <warehouse-warning :height="'calc(100% - 38px)'" />
-        <!-- 门禁出入记录 -->
-        <AccessDoor :height="'calc(100% - 40px)'" size="5" />
-        <!-- 警告记录 -->
-        <div class="env-item container-wrap">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3>
-            <svg-icon icon-class="alerm" class-name="warehouse-svg" />警告记录
-          </h3>
-          <div class="chart-wrapper" style="height: calc(100% - 40px);">
-            111
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getCurrentTime } from '@/utils/index'
-import lendAcross from '@/views/components/echarts/lendAcross.vue'
-import WarehouseWarning from '@/views/components/WarehouseWarning'
-import AccessDoor from '@/views/components/AccessDoor'
-import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics'
-import displayConfigApi from '@/api/storeManage/displayConfig'
-import alarmApi from '@/api/home/alarm'
-import { allDeviceData, mockIpData } from './index.js'
-
-const mockFetchDataForIP = (params) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const ip = params.ip
-      const result = mockIpData[ip] || { code: 200, message: '操作成功', data: [], timestamp: Date.now() }
-      resolve(result.data)
-    }, 500)
-  })
-}
-
-export default {
-  name: 'EnvironmentalScreen',
-  components: {
-    WarehouseWarning,
-    AccessDoor,
-    lendAcross
-  },
-  mixins: [statisticsCrud],
-  data() {
-    return {
-      bannerRoomName: '3F 全景图',
-      nowDate: '',
-      currentWeek: this.getCurrentWeek(),
-      timer: null,
-      echartsTimer: null,
-      roomId: 'D6490DA3D4261E8C26D0E3',
-      allDisplayConfigData: [],
-      displayConfigData: [],
-      url: '',
-      allDeviceIds: [], // 所有设备IP（无排除）
-      refreshtime: 60000,
-      lendData: [],
-      typeData: [],
-      newAlarm: [], // 所有设备的原始数据
-      aqiValue: 45,
-      aqiStatus: '健康',
-      // 需展示的指标列表（包含所有要计算的指标）
-      keepIndicators: [
-        '二氧化碳',
-        'CO2浓度',
-        '甲醛',
-        '综合气体',
-        'PM2.5浓度',
-        'PM10浓度',
-        '温度',
-        '湿度',
-        '空气质量',
-        'TVOC',
-        '红外',
-        '消防',
-        '漏水'
-      ],
-      iframeWin: null,
-      // 平均值数据（新增温湿度和单位字段）
-      avgData: {
-        temperature: '0.00', // 温度
-        temperatureUnit: '', // 温度单位
-        humidity: '0.00', // 湿度
-        humidityUnit: '', // 湿度单位
-        pm25: '0.00',
-        pm25Unit: '', // PM2.5单位
-        tvoc: '0.00',
-        tvocUnit: '', // TVOC单位
-        pm10: '0.00',
-        pm10Unit: '', // PM10单位
-        co2: '0.00',
-        co2Unit: '', // 二氧化碳单位
-        formaldehyde: '0.00',
-        formaldehydeUnit: '' // 甲醛单位
-      },
-      // 告警状态（ON=告警，OFF=正常）
-      alarmStatus: {
-        infrared: '正常',
-        fire: '正常',
-        waterLeak: '正常'
-      },
-      aqiGradeStandard: [
-        { aqiMin: 0, aqiMax: 50, level: '优', colorKey: 'excellent' },
-        { aqiMin: 51, aqiMax: 100, level: '良', colorKey: 'good' },
-        { aqiMin: 101, aqiMax: 150, level: '轻度污染', colorKey: 'lightPollution' },
-        { aqiMin: 151, aqiMax: 200, level: '中度污染', colorKey: 'mediumPollution' },
-        { aqiMin: 201, aqiMax: 300, level: '重度污染', colorKey: 'heavyPollution' },
-        { aqiMin: 301, aqiMax: 500, level: '严重污染', colorKey: 'severePollution' }
-      ],
-      pollutantLimits: {
-        pm25: { excellent: 35, good: 75, light: 115, medium: 150, heavy: 250, severe: 500 }, // μg/m³
-        pm10: { excellent: 50, good: 150, light: 250, medium: 350, heavy: 420, severe: 600 } // μg/m³
-      },
-      hasValidData: false, // 是否有有效数据
-      hkConfig: {
-        'username': 'admin',
-        'password': 'ftzn83560792',
-        'ip': '192.168.99.125', // 固定为目标IP
-        'port': '554'
-      },
-      webRtcServer: null,
-      camera_ip: '127.0.0.1:9527',
-      cameraList: [] // 摄像头列表
-    }
-  },
-  computed: {
-    validDisplayConfigData() {
-      return this.allDisplayConfigData.filter(item => item && item.Name)
-    },
-    itemsPerRow() {
-      const len = this.validDisplayConfigData.length
-      if (len === 0) return 0
-      return len <= 2 ? len : 2
-    },
-    liWidth() {
-      if (this.itemsPerRow === 0) return '0'
-      return `calc(100% / ${this.itemsPerRow} - 12px)`
-    },
-    liHeight() {
-      const len = this.validDisplayConfigData.length
-      if (len === 0) return '0'
-      const rows = Math.ceil(len / this.itemsPerRow)
-      return `calc(100% / ${rows} - 12px)`
-    },
-    showScroll() {
-      return this.validDisplayConfigData.length > 8
-    }
-  },
-  async created() {
-    // 时间更新定时器
-    this.timer = setInterval(() => {
-      this.nowDate = getCurrentTime()
-    }, 1000)
-
-    // 初始化逻辑
-    window.getIframeLoading = this.getIframeLoading
-    this.allDisplayConfigData = allDeviceData
-    this.handleDeviceIpList()
-
-    // await alarmApi.FetchYpGetSite().then((data) => {
-    //   if (data && data.length > 0) {
-    //     this.allDisplayConfigData = data
-    //     this.handleDeviceIpList()
-    //   } else {
-    //     this.allDisplayConfigData = []
-    //   }
-    // })
-
-    if (this.allDeviceIds.length > 0) {
-      await this.getAllDevicesData()
-      this.calcAllAvgData() // 计算所有指标平均值
-      this.calcAQIByAvg() // 根据平均值计算AQI
-    } else {
-      console.warn('无设备IP数据')
-      this.hasValidData = false
-    }
-  },
-  mounted() {
-    this.iframeWin = this.$refs.myIframe?.contentWindow
-
-    // Echarts数据刷新定时器
-    this.echartsTimer = setInterval(() => {
-      this.lendData = []
-      this.typeData = []
-      this.getBorrowerNumSta()
-    }, this.refreshtime)
-    this.getVideoUrl()
-  },
-  beforeDestroy() {
-    // 清理所有定时器
-    if (this.timer) clearInterval(this.timer)
-    if (this.echartsTimer) clearInterval(this.echartsTimer)
-    // 销毁视频流
-    if (this.webRtcServer) {
-      this.webRtcServer.disconnect()
-      this.webRtcServer = null
-    }
-  },
-  methods: {
-    getVideoUrl() {
-      displayConfigApi.list({ storeroomId: '01A1DC2123C2B75E1A579D', isQueryAll: 1 }).then((res) => {
-        console.log('摄像头列表', res)
-        if (res && res.length > 0) {
-          // 只筛选IP为192.168.99.125的摄像头
-          this.cameraList = res.filter(item =>
-            item.divPosition && item.divPosition.includes('cam') &&
-            item.deviceInfo && item.deviceInfo.deviceIp === '192.168.99.125'
-          )
-
-          if (this.cameraList.length > 0) {
-            const targetCamera = this.cameraList[0].deviceInfo
-            this.hkConfig = {
-              username: targetCamera.deviceAccount || 'admin',
-              password: targetCamera.devicePassword || 'ftzn83560792',
-              ip: targetCamera.deviceIp || '192.168.99.125',
-              port: targetCamera.devicePort || '554'
-            }
-
-            this.$nextTick(() => {
-              this.initVideo()
-            })
-          } else {
-            this.$message({
-              message: '未找到IP为192.168.99.125的摄像头配置',
-              type: 'warning'
-            })
-          }
-        } else {
-          this.$message({
-            message: '请先配置摄像头',
-            type: 'error'
-          })
-        }
-      }).catch(error => {
-        console.error('获取摄像头列表失败', error)
-        this.$message({
-          message: '获取摄像头配置失败',
-          type: 'error'
-        })
-      })
-    },
-    initVideo() {
-      const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiWebRtcServerUrl : process.env.VUE_APP_WEBRTCSTREAMER_API
-      this.camera_ip = linkSrc
-      console.log('hkConfig', this.hkConfig)
-
-      // 先销毁已存在的视频流
-      if (this.webRtcServer) {
-        this.webRtcServer.disconnect()
-      }
-
-      // 初始化新的视频流
-      // eslint-disable-next-line no-undef
-      this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
-      // 拼接RTSP地址
-      const rtspUrl = `rtsp://${this.hkConfig.username}:${this.hkConfig.password}@${this.hkConfig.ip}:${this.hkConfig.port}/h264/1/1`
-      console.log('RTSP地址:', rtspUrl)
-      this.webRtcServer.connect(rtspUrl)
-    },
-    /**
-     * 获取当前星期
-     */
-    getCurrentWeek() {
-      const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-      const date = new Date()
-      return days[date.getDay()]
-    },
-    /**
-     * 处理设备IP列表（仅去重，无排除）
-     */
-    handleDeviceIpList() {
-      const ipSet = new Set()
-      this.allDisplayConfigData.forEach(element => {
-        const ip = (element.IP || '').trim()
-        if (ip) { // 仅过滤空IP，无其他排除逻辑
-          ipSet.add(ip)
-        }
-      })
-      this.allDeviceIds = Array.from(ipSet)
-    },
-    /**
-     * 获取所有设备的实时数据
-     */
-    async getAllDevicesData() {
-      const allData = []
-      for (const ip of this.allDeviceIds) {
-        try {
-          const data = await mockFetchDataForIP({ ip })
-          // 真实请求
-          // const data = await alarmApi.FetchDataForIP({ ip })
-          // 过滤需要的指标并添加到总数据
-          const filtered = data.filter(item => this.keepIndicators.includes(item.subName)).map(item => {
-            if (item.subName === 'CO2浓度') {
-              return { ...item, subName: '二氧化碳' }
-            }
-            return item
-          })
-          if (filtered.length > 0) {
-            allData.push(...filtered)
-          }
-        } catch (error) {
-          console.error(`获取IP【${ip}】数据失败：`, error)
-        }
-      }
-      this.newAlarm = allData
-      this.hasValidData = allData.length > 0
-    },
-    /**
-     * 计算所有设备指标的平均值（适配ON/OFF告警状态，保留单位）
-     */
-    calcAllAvgData() {
-      if (!this.hasValidData) return
-
-      // 1. 初始化各指标的总和、计数和单位
-      const sumMap = {
-        temperature: { sum: 0, count: 0, unit: '' }, // 温度
-        humidity: { sum: 0, count: 0, unit: '' }, // 湿度
-        pm25: { sum: 0, count: 0, unit: '' },
-        tvoc: { sum: 0, count: 0, unit: '' },
-        pm10: { sum: 0, count: 0, unit: '' },
-        co2: { sum: 0, count: 0, unit: '' },
-        formaldehyde: { sum: 0, count: 0, unit: '' },
-        infrared: [], // 红外状态（ON/OFF）
-        fire: [], // 消防状态（ON/OFF）
-        waterLeak: [] // 漏水状态（ON/OFF）
-      }
-
-      // 2. 遍历所有数据累加，同时记录单位
-      this.newAlarm.forEach(item => {
-        const value = parseFloat(item.value) || 0
-        // 提取单位（优先使用数据中的dw字段，无则用默认值）
-        const unit = item.dw || this.getDefaultUnit(item.subName)
-
-        switch (item.subName) {
-          case '温度':
-            sumMap.temperature.sum += value
-            sumMap.temperature.count++
-            if (!sumMap.temperature.unit && unit) sumMap.temperature.unit = unit
-            break
-          case '湿度':
-            sumMap.humidity.sum += value
-            sumMap.humidity.count++
-            if (!sumMap.humidity.unit && unit) sumMap.humidity.unit = unit
-            break
-          case '二氧化碳':
-          case 'CO2浓度':
-            sumMap.co2.sum += value
-            sumMap.co2.count++
-            if (!sumMap.co2.unit && unit) sumMap.co2.unit = unit
-            break
-          case 'PM2.5浓度':
-            sumMap.pm25.sum += value
-            sumMap.pm25.count++
-            if (!sumMap.pm25.unit && unit) sumMap.pm25.unit = unit
-            break
-          case 'TVOC':
-            sumMap.tvoc.sum += value
-            sumMap.tvoc.count++
-            if (!sumMap.tvoc.unit && unit) sumMap.tvoc.unit = unit
-            break
-          case 'PM10浓度':
-            sumMap.pm10.sum += value
-            sumMap.pm10.count++
-            if (!sumMap.pm10.unit && unit) sumMap.pm10.unit = unit
-            break
-          case '甲醛':
-            sumMap.formaldehyde.sum += value
-            sumMap.formaldehyde.count++
-            if (!sumMap.formaldehyde.unit && unit) sumMap.formaldehyde.unit = unit
-            break
-          // 告警类指标直接存储状态
-          case '红外':
-            sumMap.infrared.push(item.value)
-            break
-          case '消防':
-            sumMap.fire.push(item.value)
-            break
-          case '漏水':
-            sumMap.waterLeak.push(item.value)
-            break
-        }
-      })
-      console.log('累加结果：', sumMap)
-
-      // 3. 计算平均值（保留两位小数），并赋值单位
-      this.avgData = {
-        temperature: sumMap.temperature.count ? (sumMap.temperature.sum / sumMap.temperature.count).toFixed(2) : '0.00',
-        temperatureUnit: sumMap.temperature.unit || '℃',
-        humidity: sumMap.humidity.count ? (sumMap.humidity.sum / sumMap.humidity.count).toFixed(2) : '0.00',
-        humidityUnit: sumMap.humidity.unit || '%',
-        pm25: sumMap.pm25.count ? (sumMap.pm25.sum / sumMap.pm25.count).toFixed(2) : '0.00',
-        pm25Unit: sumMap.pm25.unit || 'ug/立方米',
-        tvoc: sumMap.tvoc.count ? (sumMap.tvoc.sum / sumMap.tvoc.count).toFixed(2) : '0.00',
-        tvocUnit: sumMap.tvoc.unit || 'LuK',
-        pm10: sumMap.pm10.count ? (sumMap.pm10.sum / sumMap.pm10.count).toFixed(2) : '0.00',
-        pm10Unit: sumMap.pm10.unit || 'ug/立方米',
-        co2: sumMap.co2.count ? (sumMap.co2.sum / sumMap.co2.count).toFixed(2) : '0.00',
-        co2Unit: sumMap.co2.unit || 'ppm',
-        formaldehyde: sumMap.formaldehyde.count ? (sumMap.formaldehyde.sum / sumMap.formaldehyde.count).toFixed(2) : '0.00',
-        formaldehydeUnit: sumMap.formaldehyde.unit || 'ppm'
-      }
-      console.log('平均值：', this.avgData)
-
-      // 4. 处理告警状态（ON=告警，OFF=正常；只要有一个ON就显示告警）
-      this.alarmStatus = {
-        infrared: sumMap.infrared.some(s => s === 'ON') ? '告警' : '正常',
-        fire: sumMap.fire.some(s => s === 'ON') ? '告警' : '正常',
-        waterLeak: sumMap.waterLeak.some(s => s === 'ON') ? '告警' : '正常'
-      }
-
-      // 兼容无数据的情况
-      if (sumMap.infrared.length === 0) this.alarmStatus.infrared = '正常'
-      if (sumMap.fire.length === 0) this.alarmStatus.fire = '正常'
-      if (sumMap.waterLeak.length === 0) this.alarmStatus.waterLeak = '正常'
-    },
-    /**
-     * 获取指标默认单位（兜底用）
-     */
-    getDefaultUnit(subName) {
-      const unitMap = {
-        '温度': '℃',
-        '湿度': '%',
-        'PM2.5浓度': 'ug/立方米',
-        'TVOC': 'LuK',
-        'PM10浓度': 'ug/立方米',
-        '二氧化碳': 'ppm',
-        'CO2浓度': 'ppm',
-        '甲醛': 'ppm',
-        '综合气体': '无量纲'
-      }
-      return unitMap[subName] || ''
-    },
-    /**
-     * 根据所有设备的平均值计算AQI
-     */
-    calcAQIByAvg() {
-      if (!this.hasValidData) {
-        this.aqiValue = 45
-        this.aqiStatus = '优'
-        return
-      }
-
-      // 1. 提取PM2.5、PM10数值（转数字，兜底0），单位：μg/m³（国标24小时平均）
-      const pm25 = parseFloat(this.avgData.pm25) || 0
-      const pm10 = parseFloat(this.avgData.pm10) || 0
-      console.log('PM2.5平均值：', pm25, 'μg/m³ | PM10平均值：', pm10, 'μg/m³')
-
-      // 2. 国标AQI浓度限值区间（24小时平均，μg/m³）
-      const aqiBpTable = {
-        pm25: [
-          { iaqiLo: 0, iaqiHi: 50, bpLo: 0, bpHi: 35 }, // 优
-          { iaqiLo: 50, iaqiHi: 100, bpLo: 35, bpHi: 75 }, // 良
-          { iaqiLo: 100, iaqiHi: 150, bpLo: 75, bpHi: 115 }, // 轻度污染
-          { iaqiLo: 150, iaqiHi: 200, bpLo: 115, bpHi: 150 }, // 中度污染
-          { iaqiLo: 200, iaqiHi: 300, bpLo: 150, bpHi: 250 }, // 重度污染
-          { iaqiLo: 300, iaqiHi: 500, bpLo: 250, bpHi: 500 } // 严重污染
-        ],
-        pm10: [
-          { iaqiLo: 0, iaqiHi: 50, bpLo: 0, bpHi: 50 }, // 优
-          { iaqiLo: 50, iaqiHi: 100, bpLo: 50, bpHi: 150 }, // 良
-          { iaqiLo: 100, iaqiHi: 150, bpLo: 150, bpHi: 250 }, // 轻度污染
-          { iaqiLo: 150, iaqiHi: 200, bpLo: 250, bpHi: 350 }, // 中度污染
-          { iaqiLo: 200, iaqiHi: 300, bpLo: 350, bpHi: 420 }, // 重度污染
-          { iaqiLo: 300, iaqiHi: 500, bpLo: 420, bpHi: 500 } // 严重污染
-        ]
-      }
-
-      // 3. 计算单污染物分指数（IAQI）的核心方法
-      const calculateIAQI = (conc, pollutantType) => {
-        const bpTable = aqiBpTable[pollutantType]
-        // 浓度超过上限，直接返回500
-        if (conc > bpTable[bpTable.length - 1].bpHi) {
-          return 500
-        }
-        // 匹配浓度所在区间
-        const matchedBp = bpTable.find(item => conc >= item.bpLo && conc <= item.bpHi) || bpTable[0]
-        // 国标IAQI计算公式
-        const iaqi = ((matchedBp.iaqiHi - matchedBp.iaqiLo) / (matchedBp.bpHi - matchedBp.bpLo)) * (conc - matchedBp.bpLo) + matchedBp.iaqiLo
-        // 四舍五入，且不超过500
-        return Math.min(Math.round(iaqi), 500)
-      }
-
-      // 4. 计算PM2.5、PM10的分指数
-      const iaqiPm25 = calculateIAQI(pm25, 'pm25')
-      const iaqiPm10 = calculateIAQI(pm10, 'pm10')
-
-      // 5. AQI取分指数最大值
-      const finalAQI = Math.max(iaqiPm25, iaqiPm10)
-      this.aqiValue = finalAQI
-
-      // 6. 匹配AQI对应的空气质量等级
-      const matchedGrade = this.aqiGradeStandard.find(grade =>
-        finalAQI >= grade.aqiMin && finalAQI <= grade.aqiMax
-      )
-      this.aqiStatus = matchedGrade ? matchedGrade.level : '严重污染'
-
-      console.log('IAQI-PM2.5：', iaqiPm25, 'IAQI-PM10：', iaqiPm10, '最终AQI：', finalAQI, '| 等级：', this.aqiStatus)
-    },
-    /**
-     * iframe加载回调（保留原有逻辑）
-     */
-    getIframeLoading(value) {}
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import "~@/assets/styles/lend-manage.scss";
-
-.env-container {
-  width: 100%;
-  height: calc(100vh);
-  background-color: #031435;
-  .env-top-title {
-    width: calc(100vw);
-    height: 130px;
-    background: url("~@/assets/images/largeScreen/top-title.png") no-repeat 0 -14px;
-    background-size: contain;
-  }
-  .header-date {
-    position: fixed;
-    top: 10px;
-    right: 80px;
-    display: flex;
-		justify-content: flex-start;
-		align-items: center;
-    color: #fff;
-    .time {
-			font-size: 32px;
-			font-weight: bold;
-			line-height:  30px;
-			padding-right: 20px;
-			border-right: 1px solid rgba(255, 255, 255, 0.5);
-		}
-		.time-other {
-			font-size: 18px;
-			line-height: 22px;
-			padding-left: 20px;
-			span {
-				display: block;
-			}
-		}
-  }
-  .env-main {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 25px;
-    margin-top: -12px;
-    .env-main-left,
-    .env-main-right {
-      max-width: 22%;
-      flex: 1;
-      height: calc(100vh - 138px);
-      overflow: hidden;
-      z-index: 9999;
-    }
-    .env-main-middle {
-      position: relative;
-      flex: 1;
-      margin: 0 20px;
-      height: calc(100vh - 138px);
-      overflow: hidden;
-      background: url("~@/assets/images/largeScreen/bg.png") no-repeat center center;
-    }
-    .env-main-left .container-wrap {
-      min-height: auto;
-    }
-    .env-main-left .container-wrap.left-wrap {
-      height: calc(100% / 2 - 85px);
-    }
-    .env-main-right .container-wrap {
-      height: calc(100% / 3 - 14px);
-      min-height: auto;
-      margin-bottom: 20px;
-    }
-    .env-item {
-      margin-bottom: 20px;
-      text-align: center;
-      h3 {
-        position: relative;
-        display: inline-block;
-        padding: 10px 70px;
-        font-size: 16px;
-        color: #fff;
-        .iconfont {
-          margin-right: 10px;
-          font-size: 14px;
-          color: #f65163;
-        }
-        &::before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 50%;
-          width: 36px;
-          height: 12px;
-          margin-top: -6px;
-          background: url("~@/assets/images/largeScreen/item-left.png") no-repeat;
-          background-size: cover;
-        }
-        &::after {
-          content: "";
-          position: absolute;
-          top: 50%;
-          right: 0;
-          width: 36px;
-          height: 12px;
-          margin-top: -6px;
-          background: url("~@/assets/images/largeScreen/item-right.png") no-repeat;
-          background-size: cover;
-        }
-      }
-
-    }
-    .env-3d {
-      position: fixed;
-      left: 0;
-      top: -40px;
-      width: 100%;
-      // height: calc(100%);
-      height: 100%;
-      // background: url("~@/assets/images/largeScreen/bg.png") no-repeat center 0;
-      overflow: hidden;
-      .iframe_box {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
-.iframe_box {
-  /* 移除原有width/height，改用内联样式或下面的样式 */
-  width: 100% !important;
-  height: 100% !important;
-  border: none;
-}
-.banner-top-name{
-  position: absolute;
-  left: 0;
-  top: 80px;
-  padding: 0 15px;
-  height: 34px;
-  line-height: 32px;
-  font-size: 18px;
-  color: #fff;
-  background-color: #113d72;
-  border: 1px solid #339cff;
-  border-radius: 4px;
-}
-.air-quality{
-  position: absolute;
-  bottom: 10px;
-  right: 20px;
-  color: #fff;
-  padding: 20px 20px 10px 20px;
-  background-image: linear-gradient(to top, rgba(24, 176, 143, .5), rgba(24, 176, 143, 0));
-  border-radius: 5px;
-  z-index: 9999;
-  h3{
-    padding: 30px 0;
-  }
-  .air-params{
-    display: flex;
-    justify-content: space-between;
-    align-items: last baseline;
-    .air-left{
-      .air-title{
-        position: relative;
-        padding-left: 12px;
-        font-size: 14px;
-        &::before{
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 50%;
-          width: 6px;
-          height: 6px;
-          background-color: #18B08F;
-          border-radius: 50%;
-        }
-      }
-      .air-result{
-        display: flex;
-        justify-content: space-between;
-        align-items: last baseline;
-        padding-top: 10px;
-        p{
-          font-size: 30px;
-          font-weight: 600;
-          padding: 0 6px 0 10px;
-        }
-        span{
-          display: block;
-          font-size: 12px;
-          opacity: .6;
-        }
-      }
-    }
-    .air-right{
-      text-align: center;
-      span{
-        display: block;
-        font-size: 12px;
-      }
-      p{
-        font-size: 18px;
-        font-weight: 600;
-        padding: 10px 30px;
-        margin-top: 10px;
-        background-color: rgba(24, 176, 143, .2);
-        border-radius: 5px;
-      }
-    }
-  }
-
-  // 原有基础样式保留
-  &.air-excellent { // 优 - 绿色
-    background-image: linear-gradient(to top, rgba(40, 180, 40, .5), rgba(40, 180, 40, 0));
-    .air-params .air-right p {
-      background-color: rgba(40, 180, 40, .2);
-    }
-  }
-  &.air-good { // 良 - 黄色
-    background-image: linear-gradient(to top, rgba(255, 200, 0, .5), rgba(255, 200, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(255, 200, 0, .2);
-    }
-  }
-  &.air-lightPollution { // 轻度污染 - 橙色
-    background-image: linear-gradient(to top, rgba(255, 140, 0, .5), rgba(255, 140, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(255, 140, 0, .2);
-    }
-  }
-  &.air-mediumPollution { // 中度污染 - 红色
-    background-image: linear-gradient(to top, rgba(255, 0, 0, .5), rgba(255, 0, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(255, 0, 0, .2);
-    }
-  }
-  &.air-heavyPollution { // 重度污染 - 紫色
-    background-image: linear-gradient(to top, rgba(150, 0, 200, .5), rgba(150, 0, 200, 0));
-    .air-params .air-right p {
-      background-color: rgba(150, 0, 200, .2);
-    }
-  }
-  &.air-severePollution { // 严重污染 - 褐红色
-    background-image: linear-gradient(to top, rgba(120, 0, 0, .5), rgba(120, 0, 0, 0));
-    .air-params .air-right p {
-      background-color: rgba(120, 0, 0, .2);
-    }
-  }
-}
-.air-warn{
-  background-image: linear-gradient(to top, rgba(246, 81, 99, .5), rgba(24, 176, 143, 0));
-  .air-params{
-    .air-right{
-      p{
-        background-color: rgba(246, 81, 99, .2);
-      }
-    }
-  }
-}
-.leakage-list {
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  padding: 0 0 0 14px;
-  text-align: left;
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #339cff;
-    border-radius: 2px;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: #021941;
-  }
-  li {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 15px;
-    border: 1px solid #3581cc;
-    background-color: #02255f;
-    border-radius: 2px;
-    &::before {
-      content: "";
-      position: absolute;
-      top: 4px;
-      left: 4px;
-      width: 0;
-      height: 0;
-      border-color: transparent #339cff;
-      border-width: 0 0 6px 6px;
-      border-style: solid;
-    }
-    p {
-      font-size: 12px;
-      color: #fff;
-      i {
-        margin-right: 4px;
-      }
-    }
-    span.leakage-state-tip {
-      position: relative;
-      display: block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: #18b08f;
-      &::before {
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        box-shadow: inset 0px 0px 10px 1px #18b08f;
-        transform: translate(-50%, -50%);
-      }
-    }
-    &.leakage-warn {
-      border-color: #f65164;
-      box-shadow: inset 0px 0px 15px 1px #f65164;
-      color: #f65164;
-      &::before {
-        border-color: transparent #f65164;
-      }
-      span.leakage-state-tip {
-        background-color: #f65164;
-        &::before {
-          box-shadow: inset 0px 0px 10px 1px #f65164;
-        }
-      }
-    }
-  }
-}
-.env-alarm-list{
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-  li{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    height: 66px;
-    margin-right: 10px;
-    background: url('~@/assets/images/data_border_default.png') no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-    color: #fff;
-    font-size: 14px;
-    &.li-warn{
-      background: url('~@/assets/images/data_border_warn.png') no-repeat;
-      background-size: 100% 100%;
-    }
-    p{
-      color: #339CFF;
-    }
-    span{
-      display: block;
-      margin-top: 12px;
-      font-weight: bold;
-    }
-  }
-}
-
-// 告警列表容器
-.env-alarm-container {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  width: calc(100% - 20px);
-
-  // 第一行：温湿度
-  .env-alarm-list-first {
-    margin-bottom: 20px;
-    li {
-      width: calc(100% / 4 - 10px);
-      height: 90px;
-      font-size: 24px;
-      flex-direction: row;
-      & .msg-list-svg{
-        font-size: 40px;
-        margin-right: 14px;
-      }
-      & div{
-        span{
-          margin-top: 0 !important;
-        }
-        p{
-          font-size: 18px;
-          margin-top: 6px;
-        }
-      }
-    }
-  }
-  // .env-alarm-list-second {
-  //   li{
-  //     width: calc(100% / 10 - 10px);
-  //   }
-  // }
-
-}
-
-.env-alarm-list-second {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  color: #fff;
-  width: 600px;
-  height: 130px;
-  font-size: 14px;
-  li {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: calc(100% / 3 - 10px);
-    height: calc(100% / 3 - 14px);
-    background: linear-gradient(
-        360deg,
-        rgba(51, 156, 255, 0.24) 0%,
-        rgba(56, 158, 225, 0) 70%,
-        rgba(56, 158, 225, 0) 100%
-      );
-    margin-left: 10px;
-    margin-bottom: 14px;
-    padding: 0 10px;
-    p{
-      font-size: 12px;
-      color: #339CFF;
-    }
-    span{
-      display: inline-block;
-      font-weight: bold;
-    }
-    &.li-warn{
-      background: linear-gradient(
-        360deg,
-        rgba(246, 81, 100, 0.5) 0%,
-        rgba(56, 158, 225, 0) 70%,
-        rgba(56, 158, 225, 0) 100%
-      );
-      span{
-        color: #F65164;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/environmentalScreen/index.vue b/src/views/environmentalScreen/index.vue
index b2119c3..08e39cd 100644
--- a/src/views/environmentalScreen/index.vue
+++ b/src/views/environmentalScreen/index.vue
@@ -101,7 +101,7 @@
                   return a.Name.length - b.Name.length; // 升序；降序则 b.Name.length - a.Name.length
                 })"
                 :key="item.id"
-                :class="{ 'leakage-warn': item.NetStatus === 0 }"
+                :class="{ 'leakage-warn': !ypOnlineStatus }"
               >
                 <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
                 <span class="leakage-state-tip" />
@@ -180,9 +180,9 @@
       </div>
       <div class="env-main-right">
         <!-- 环控实时报警 -->
-        <warehouse-warning is-screen="true" :height="'calc(100% - 38px)'" />
+        <warehouse-warning :is-screen="true" :height="'calc(100% - 38px)'" />
         <!-- 门禁出入记录 -->
-        <AccessDoor is-screen="true" :height="'calc(100% - 40px)'" size="4" />
+        <AccessDoor :is-screen="true" :height="'calc(100% - 40px)'" size="4" />
         <!-- 当日告警统计 -->
         <div class="env-item container-wrap">
           <span class="right-top-line" />
@@ -200,6 +200,7 @@
 </template>
 
 <script>
+
 import CountTo from 'vue-count-to'
 import { getCurrentTime } from '@/utils/index'
 import lendAcross from '@/views/components/echarts/lendAcross.vue'
@@ -210,6 +211,7 @@ import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statisti
 import displayConfigApi from '@/api/storeManage/displayConfig'
 import { getDeviceOnoff, getTodayHikAlarmLog } from '@/api/home/device'
 import alarmApi from '@/api/home/alarm'
+import { FetchypNetStatusByIp } from '@/api/storeManage/deviceManage/device'
 // import { allDeviceData, mockIpData } from './index.js'
 
 // const mockFetchDataForIP = (params) => {
@@ -323,7 +325,8 @@ export default {
       alarmChartData: [], // 格式化后给饼图的数据源
       alarmRefreshTimer: null, // 告警数据刷新定时器
       deviceConfigTimer: null,
-      deviceConfigRefreshInterval: 15000 // 15秒刷新一次设备配置
+      deviceConfigRefreshInterval: 15000, // 15秒刷新一次设备配置
+      ypOnlineStatus: true // 左侧设备联调 - 存储192.168.99.101:6003的在线状态
     }
   },
   computed: {
@@ -390,6 +393,7 @@ export default {
     window.getIframeLoading = this.getIframeLoading
 
     await this.fullDataRefresh()
+
     this.deviceConfigTimer = setInterval(() => {
       this.fullDataRefresh()
 
@@ -425,9 +429,22 @@ export default {
     // if (this.alarmRefreshTimer) clearInterval(this.alarmRefreshTimer)
   },
   methods: {
+    getYPReadStatus() {
+      const targetIp = '192.168.99.101:6003'
+      FetchypNetStatusByIp({ ip: targetIp })
+        .then((data) => {
+          console.log('data', data)
+          this.ypOnlineStatus = data !== 0
+          console.log(`原品环控设备(${targetIp})状态：`, this.ypOnlineStatus ? '在线' : '离线')
+        })
+        .catch((error) => {
+          console.error('获取原品环控设备状态失败:', error)
+          this.ypOnlineStatus = false
+        })
+    },
     /**
- * 全量数据更新（设备配置 + 设备实时数据 + 计算逻辑）
- */
+     * 全量数据更新（设备配置 + 设备实时数据 + 计算逻辑）
+     */
     async fullDataRefresh() {
       try {
         // this.allDisplayConfigData = allDeviceData
@@ -440,6 +457,7 @@ export default {
 
         // 2. 处理设备IP列表
         this.handleDeviceIpList()
+        this.getYPReadStatus()
 
         // 3. 若有设备IP，继续获取实时数据并计算
         if (this.allDeviceIds.length > 0) {