hp-storeroom-system/src/views/environmentalScreen/index.vue

<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>
          <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>
            </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>
            </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">
            <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" />
              </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" />
              </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)'" />
        <!-- 门禁出入记录 -->
        <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);">
            <catePie :cate-data="alarmChartData" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getCurrentTime } from '@/utils/index'
import lendAcross from '@/views/components/echarts/lendAcross.vue'
import catePie from './module/catePie.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 { getDeviceOnoff, getTodayHikAlarmLog } from '@/api/home/device'
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: {
    CountTo,
    WarehouseWarning,
    AccessDoor,
    lendAcross,
    catePie
  },
  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: [], // 摄像头列表
      targetDeviceIps: ['192.168.99.101:5003', '192.168.99.101:6003', '192.168.99.101:5004'],
      getDeviceFlag: false,
      totalDeviceNum: 0,
      onlineDeviceNum: 0,
      offlineDeviceNum: 0,
      alarmStatisticsRaw: [], // 原始告警统计数据
      alarmChartData: [], // 格式化后给饼图的数据源
      alarmRefreshTimer: null // 告警数据刷新定时器
    }
  },
  computed: {
    // validDisplayConfigData() {
    //   return this.allDisplayConfigData.filter(item => item && item.Name)
    // },
    validDisplayConfigData() {
      return this.allDisplayConfigData.filter(item => {
        return item && item.Name && this.targetDeviceIps.includes(item.IP?.trim())
      })
    },
    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)
    this.getDevice()
    this.getTodayHikAlarmLog()
    this.alarmRefreshTimer = setInterval(() => {
      this.getTodayHikAlarmLog()
    }, 300000)
    // 初始化逻辑
    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
    }
    if (this.alarmRefreshTimer) clearInterval(this.alarmRefreshTimer)
  },
  methods: {
    // 重构告警数据获取方法
    getTodayHikAlarmLog() {
      getTodayHikAlarmLog().then(data => {
        console.log('今日海康告警日志', data)
        this.alarmStatisticsRaw = data || []
        this.formatAlarmChartData()
      }).catch(error => {
        console.error('获取告警统计数据失败:', error)
        this.alarmStatisticsRaw = []
        this.alarmChartData = []
      })
    },
    // 格式化告警数据为饼图数据源
    formatAlarmChartData() {
      if (!this.alarmStatisticsRaw.length) {
        this.alarmChartData = [{ name: '无告警', value: 1, itemStyle: { color: '#666666' }}]
        return
      }
      // 固定颜色列表（按优先级排序）
      const colorList = ['#F65164', '#339CFF', '#FFB800', '#1CADAB', '#9B6BCC', '#FF7D00']

      const alarmColorMap = {
        '设备断线': '#F65164',
        '红外线报警': '#339CFF',
        '消防报警': '#FFB800',
        '漏水报警': '#1CADAB',
        'PM2.5超标': '#9B6BCC',
        '甲醛超标': '#FF7D00'
      }

      this.alarmChartData = this.alarmStatisticsRaw.map((item, index) => {
        const alarmName = item.alarmValue || '未知告警'
        const color = alarmColorMap[alarmName] || colorList[index % colorList.length] || '#666666'
        return {
          name: alarmName,
          value: item.num || 0,
          itemStyle: {
            color: color
          }
        }
      })
    },
    getDevice() {
      getDeviceOnoff().then(data => {
        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
      })
    },
    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%;
  width: calc(100% / 2);
  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);
  display: flex;
  justify-content: flex-start;

  // 第一行：温湿度
  .env-alarm-list-first {
    margin-bottom: 20px;
    li {
      width: calc(100% / 2 - 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;
      }
    }
  }
}

.device-container{
  position: absolute;
  bottom: 0;
  left: 10px;
  // height: 160px;
  // padding: 14px 0 10px 14px;
  // min-height: auto;
}

.new-leakage-list{
  width: 660px;
  height: 120px;
  padding: 0;
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% / 3 - 10px);
    height: calc(100% / 2 - 14px);
    margin-right: 10px;
    margin-bottom: 14px;
    p{
      font-size: 14px;
    }
  }
}

.device-info {
  width: 600px;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 14px;
  li {
    width: calc(100% / 2);
    height: calc(100%);
    background: linear-gradient(
      360deg,
      rgba(51, 156, 255, 0.24) 0%,
      rgba(56, 158, 225, 0) 70%,
      rgba(56, 158, 225, 0) 100%
    );
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 10px;
    .row-item {
      display: flex;
      align-items: center;
      .svg-box {
        margin-right: 10px;
        .card-panel-icon {
          font-size: 24px;
        }
      }
    }
    .row-num {
      font-size: 18px;
      color: #fff;
      margin-right: 10px;
    }
  }
}

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

.panel-group {
  width: calc(100% / 2);
  .card-panel-col {
    margin-bottom: 20px;
  }

  .card-panel {
    cursor: pointer;
    height: 100px;
    font-size: 15px;
    position: relative;
    overflow: hidden;
    opacity: 0.86;
    &.zaixianshebei {
      color: #c4c859;
      background: linear-gradient(
        180deg,
        rgba(196, 200, 89, 0.5) 0%,
        rgba(196, 200, 89, 0) 100%
      );
      border-top: 2px #c4c859 solid;
      & span.card-panel-num {
        background: linear-gradient(180deg, #ffffff 0%, #bfc458 100%);
      }
    }
    &.lixianshebei {
      color: #f65164;
      background: linear-gradient(
        180deg,
        rgba(246, 81, 100, 0.5) 0%,
        rgba(247, 80, 100, 0) 100%
      );
      border-top: 2px #f65164 solid;
      & span.card-panel-num {
        background: linear-gradient(180deg, #ffffff 0%, #f55164 100%);
      }
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 0 10px 0 12px;
      padding: 20px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 60px;
    }

    .card-panel-description {
      margin: 19px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 30px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 24px;
        margin-bottom: 11px;
        & span {
          -webkit-background-clip: text;
          color: transparent;
          font-weight: bold;
        }
      }
    }
  }
}
</style>