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

<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><i class="iconfont icon-kongqizhiliangshuju" />档案库空气质量数据</h3>
          <ul class="screen-env-list">
            <li v-show="topDisplayData.DAK_DIV_TOP_003.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_003.curstatus > 0 }">
              <svg-icon icon-class="co2" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_003.curValue }}</span>
                <p class="msg-list-unit">CO2 {{ topDisplayData.DAK_DIV_TOP_003.unit }}</p>
              </div>
            </li>
            <li v-show="topDisplayData.DAK_DIV_TOP_004.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_004.curstatus > 0 }">
              <svg-icon icon-class="voc" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_004.curValue }}</span>
                <p class="msg-list-unit">VOC {{ topDisplayData.DAK_DIV_TOP_004.unit }}</p>
              </div>
            </li>
            <li v-show="topDisplayData.DAK_DIV_TOP_005.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_005.curstatus > 0 }" class="msg-pm">
              <svg-icon icon-class="pm25" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_005.curValue }}</span>
                <p class="msg-list-unit">PM2.5 {{ topDisplayData.DAK_DIV_TOP_005.unit }}</p>
              </div>
            </li>
            <li v-show="topDisplayData.DAK_DIV_TOP_006.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_006.curstatus > 0 }" class="msg-pm">
              <svg-icon icon-class="pm10" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_006.curValue }}</span>
                <p class="msg-list-unit">PM10 {{ topDisplayData.DAK_DIV_TOP_006.unit }}</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="env-item container-wrap">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <h3><i class="iconfont icon-loushuijiance" />漏水检测</h3>
          <div class="leakage-detection">
            <div class="state-list">
              <span>正常</span>
              <span>报警</span>
            </div>
            <ul class="leakage-list">
              <li :class="{ 'leakage-warn': waterLeakage.waterLeakageStatus1 }">
                <p><i class="iconfont icon-weihubaojing" />维护报警</p>
                <span class="leakage-state-tip" />
              </li>
              <li :class="{ 'leakage-warn': waterLeakage.waterLeakageStatus2 }">
                <p><i class="iconfont icon-loushuibaojing" />漏水报警</p>
                <span class="leakage-state-tip" />
              </li>
              <li :class="{ 'leakage-warn': waterLeakage.waterLeakageStatus3 }">
                <p><i class="iconfont icon-ganyingxianduanlie" />感应线断裂</p>
                <span class="leakage-state-tip" />
              </li>
              <li :class="{ 'leakage-warn': waterLeakage.waterLeakageStatus4 }">
                <p><i class="iconfont icon-loushuiweizhi" />漏水位置</p>
                <span>{{ waterLeakage.waterLeakageText4 }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- <div class="env-item container-wrap">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <h3><i class="iconfont icon-menjinjilu" />门禁记录</h3>
          <el-table
            ref="table"
            style="min-width: 100%;"
            height="calc(100% - 38px)"
            :data="tableData"
            class="warehose-el-table"
            :row-class-name="rowBgColor"
          >
            <el-table-column prop="time" label="时间" align="center" min-width="60" />
            <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
            <el-table-column prop="name" label="档案名称" align="center" :show-overflow-tooltip="true" min-width="85" />
          </el-table>
        </div> -->
        <!-- 门禁记录 -->
        <security-door :height="'calc(100% - 38px)'" />
      </div>
      <div class="env-main-middle">
        <div class="env-3d">
          <iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/webA/index.html" frameborder="0" scrolling="no" />
          <ul class="screen-env-list">
            <li v-show="topDisplayData.DAK_DIV_TOP_001.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_001.curstatus > 0 }">
              <svg-icon icon-class="temperature" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_001.curValue }}</span>
                <p class="msg-list-unit">温度 {{ topDisplayData.DAK_DIV_TOP_001.unit }}</p>
              </div>
            </li>
            <li v-show="topDisplayData.DAK_DIV_TOP_002.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_002.curstatus > 0 }">
              <svg-icon icon-class="shidu" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_002.curValue }}</span>
                <p class="msg-list-unit">湿度 {{ topDisplayData.DAK_DIV_TOP_002.unit }}</p>
              </div>
            </li>
          </ul>
        </div>
        <!-- <div class="env-item container-wrap  device-container">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <h3><i class="iconfont icon-shebeizhuangtai" />设备状态</h3>
          <div class="state-list">
            <span>正常</span>
            <span>报警</span>
          </div>
          <ul class="env-device-list">
            <li class="device-warn">
              <div class="env-device-img">
                <img src="~@/assets/images/largeScreen/device-1.png" alt="">
              </div>
              <div class="env-device-text">
                <p>密集架</p>
                <span />
              </div>
            </li>
            <li>
              <div class="env-device-img">
                <img src="~@/assets/images/largeScreen/device-2.png" alt="">
              </div>
              <div class="env-device-text">
                <p>回转柜</p>
                <span />
              </div>
            </li>
            <li>
              <div class="env-device-img">
                <img src="~@/assets/images/largeScreen/device-3.png" alt="">
              </div>
              <div class="env-device-text">
                <p>空调</p>
                <span />
              </div>
            </li>
            <li>
              <div class="env-device-img">
                <img src="~@/assets/images/largeScreen/device-4.png" alt="">
              </div>
              <div class="env-device-text">
                <p>通道门</p>
                <span />
              </div>
            </li>
            <li>
              <div class="env-device-img">
                <img src="~@/assets/images/largeScreen/device-5.png" alt="">
              </div>
              <div class="env-device-text">
                <p>漏水传感器</p>
                <span />
              </div>
            </li>
            <li>
              <div class="env-device-img">
                <img src="~@/assets/images/largeScreen/device-6.png" alt="">
              </div>
              <div class="env-device-text">
                <p>温湿度传感器</p>
                <span />
              </div>
            </li>
          </ul>
        </div> -->
        <div class="middle-bottom">
          <!-- <span class="right-top-line" />
          <span class="left-bottom-line" /> -->
          <div class="container-wrap middle-bottom-l">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <ul>
              <li>
                <div class="row-item">
                  <div class="svg-box">
                    <svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
                  </div>
                  <span>馆藏总量</span>
                </div>
                <span class="row-num">12345</span>
              </li>
              <li>
                <div class="row-item">
                  <div class="svg-box">
                    <svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
                  </div>
                  <span>在借数量</span>
                </div>
                <span class="row-num">12345</span>
              </li>
              <li>
                <div class="row-item">
                  <div class="svg-box">
                    <svg-icon icon-class="danganhezongliang" class-name="card-panel-icon" />
                  </div>
                  <span>在库数量</span>
                </div>
                <span class="row-num">12345</span>
              </li>
            </ul>
            <ul>
              <li>
                <div class="row-item">
                  <div class="svg-box">
                    <svg-icon icon-class="quanbushebei" class-name="card-panel-icon" />
                  </div>
                  <span>全部设备</span>
                </div>
                <span class="row-num">12345</span>
              </li>
              <li>
                <div class="row-item">
                  <div class="svg-box">
                    <svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" />
                  </div>
                  <span>在线设备</span>
                </div>
                <span class="row-num">12345</span>
              </li>
              <li>
                <div class="row-item">
                  <div class="svg-box">
                    <svg-icon icon-class="lixianshebei" class-name="card-panel-icon" />
                  </div>
                  <span>离线设备</span>
                </div>
                <span class="row-num">12345</span>
              </li>
            </ul>
          </div>
          <div class="container-wrap middle-bottom-r">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <ul>
              <li>
                <span>日借阅量</span>
                <NumFlip :tnum="daylend" />
              </li>
              <li><span>日归还量</span>
                <NumFlip :tnum="dayreturn" />
              </li>
              <li><span>月借阅量</span>
                <NumFlip :tnum="monlend" />
              </li>
              <li><span>月归还量</span>
                <NumFlip :tnum="monreturn" />
              </li>
            </ul>

          </div>
        </div>
      </div>
      <div class="env-main-right">
        <div class="env-item container-wrap">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <h3><i class="iconfont icon-zhenglishi" />档案借阅</h3>
          <div class="chart-wrapper" style="height: calc(100% - 40px);">
            <lend-across :lend-data="lendData" :refreshtime="60000" />
          </div>
        </div>
        <div class="env-item container-wrap">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <h3><i class="iconfont icon-zhenglishi" />档案类型</h3>
          <div v-if="typeData.length !== 0" class="chart-wrapper" style="height: calc(100% - 40px);">
            <type-pie :type-data="typeData" :refreshtime="60000" />
          </div>
          <div v-else class="empty-main">
            <svg-icon icon-class="empty" class-name="empty-img" />
            <p>暂无数据</p>
          </div>
        </div>
        <!-- 报警记录 -->
        <warehouse-warning :height="'calc(100% - 38px)'" />
      </div>
    </div>
    <!-- 摄像头视频 -->
    <Video ref="camera" />
  </div>
</template>

<script>
import { getCurrentTime } from '@/utils/index'
import typePie from '@/views/components/echarts/typePie.vue'
import lendAcross from '@/views/components/echarts/lendAcross.vue'
import Video from '@/views/storeManage/warehouse3D/module/video'
import WarehouseWarning from '@/views/components/WarehouseWarning'
import SecurityDoor from '@/views/components/SecurityDoor'
import displayConfigApi from '@/api/storeManage/displayConfig'
import thirdApi from '@/api/thirdApi'
import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics'
import NumFlip from './module/numFlip.vue'
export default {
  name: 'EnvironmentalScreen',
  components: {
    WarehouseWarning,
    SecurityDoor,
    Video,
    lendAcross,
    typePie,
    NumFlip
  },
  mixins: [statisticsCrud],
  data() {
    return {
      nowDate: '',
      timer: null,
      lendData: [],
      typeData: [],
      className: ['readRoomContainer', 'collateRoomContainer'],
      roomId: 'D6490DA3D4261E8C26D0E3',
      allDisplayConfigData: [],
      displayConfigData: [],
      url: '',
      allDeviceIds: [],
      oaoMessage: [],
      topDisplayData: {
        DAK_DIV_TOP_001: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DAK_DIV_TOP_002: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DAK_DIV_TOP_003: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DAK_DIV_TOP_004: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DAK_DIV_TOP_005: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DAK_DIV_TOP_006: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        }
      },
      waterLeakage: {
        waterLeakageStatus1: false,
        waterLeakageStatus2: false,
        waterLeakageStatus3: false,
        waterLeakageStatus4: false,
        waterLeakageText4: ''
      },
      daylend: 'daylend',
      dayreturn: 'dayreturn',
      monlend: 'monlend',
      monreturn: 'monreturn'
    }
  },
  async created() {
    this.timer = setInterval(() => {
      this.nowDate = getCurrentTime()
    }, 1000)
    window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象
    this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId })
    this.allDisplayConfigData.forEach(element => {
      if (element.isDisplay && element.bindState && element.deviceInfo && (element.divPosition.includes('OAO') || element.divPosition.includes('TOP') || element.divPosition.includes('LS'))) {
        this.allDeviceIds.push(element.deviceInfo.deviceId)
        if (!this.url) {
          this.url = 'http://' + element.deviceInfo.deviceIp + ':' + element.deviceInfo.devicePort
        }
      }
    })
    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')) })
    await this.getRealTimeData()
  },
  mounted() {
    const _this = this
    this.iframeWin = this.$refs.myIframe.contentWindow
    // inframe 加载完成之后
    document.getElementById('myIframe').onload = function() {
      _this.deviceState()
    }
    window.addEventListener('message', this.handleMessageDevice)
    // 定时请求第三方数据，更新页面数据
    this.dataTimer = setInterval(async() => {
      await _this.getRealTimeData()
      _this.handleAQI()
    }, 10000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.dataTimer) {
      clearInterval(this.dataTimer)
    }
  },
  methods: {
    // 加载完成状态传值
    getIframeLoading(value) {
      // console.log(`我是iframe传过来的参数：${value}`)
      if (value === 'false') {
        this.allDisplayConfigData.forEach(element => {
          if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) {
            this.handleHide(element.divPosition)
          }
        })
        // this.handleAlarm('DAK_MO_OAO_003')
        this.deviceState()
        this.handleAQI()
      }
    },
    // 传入设备状态data  / 给iframe传初始值
    deviceState(e) {
      this.iframeWin.postMessage({
        data: this.oaoMessage
      }, '*')
    },
    // 点击查看设备状况 / 密集架列号
    handleMessageDevice(event) {
      const _this = this
      if (event.data && event.data.data) {
        const data = event.data.data
        // 摄像头
        if (data.includes('CAM')) {
          _this.$nextTick(() => {
            this.$refs.camera.openVideoVisible = true
            // 后期看接口调试变化
            this.$refs.camera.videoSrc = 'https://qiniu.aiyxlib.com/1606275873000.mp4'
            this.$refs.camera.videoTitle = data
          })
        }
      }
    },
    // 设置温湿度
    handleAQI() {
      this.oaoMessage.forEach(element => {
        window.frames['iframeMap'].setAlertValue(element.id, element.wendu, element.sidu)
      })
    },
    // 设置温湿度报警状况
    handleAlarm(deviceId) {
      window.frames['iframeMap'].Myalert(deviceId, true)
    },
    // 设置是否显示
    handleHide(deviceId) {
      // true 显示 false 隐藏
      window.frames['iframeMap'].setYangGanCanshow(deviceId, false)
    },
    // 表格隔行变色
    rowBgColor({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light-blue'
      } else {
        return ''
      }
    },
    getRealTimeData() {
      if (this.allDeviceIds.length > 0) {
        thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => {
          this.oaoMessage.splice(0, this.oaoMessage.length)
          this.displayConfigData.forEach(element => {
            if (element.divPosition.includes('TOP') && element.deviceSpecParams[0]) {
              // 获取页面div显示的数据
              const result = data.find((item) => {
                return item.property_id === element.deviceSpecParams[0].paramId && item.device_id === element.deviceInfo.deviceId
              })
              if (result) {
                this.$set(this.topDisplayData, element.divPosition, {
                  show: true,
                  curValue: result.curvalue,
                  unit: result.unit,
                  curstatus: result.curstatus
                })
              } else {
                this.$set(this.topDisplayData, element.divPosition, {
                  show: false
                })
              }
            } else if (element.divPosition.includes('OAO')) {
              // 获取3D弹窗显示的数据
              const wenduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '温度' })?.paramId
              const siduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '湿度' })?.paramId
              let wendu = {}
              let sidu = {}
              if (wenduParamId) {
                wendu = data.find((item) => {
                  return item.property_id === wenduParamId && item.device_id === element.deviceInfo.deviceId
                })
              }
              if (siduParamId) {
                sidu = data.find((item) => {
                  return item.property_id === siduParamId && item.device_id === element.deviceInfo.deviceId
                })
              }
              // console.log(wendu?.curstatus, sidu?.curstatus)
              this.oaoMessage.push({
                id: element.divPosition,
                wendu: (wendu?.curvalue) ? (Math.round(wendu?.curvalue)) : '-',
                sidu: (sidu?.curvalue) ? (Math.round(sidu?.curvalue)) : '-',
                alarmState: (wendu && wendu.curstatus > 0) || (sidu && sidu.curstatus > 0)
              })
            } else {
              // LS 漏水感应器
              const waterLeakageParamId1 = element.deviceSpecParams.find((item) => { return item.paramName === '维护报警' })?.paramId
              const waterLeakageParamId2 = element.deviceSpecParams.find((item) => { return item.paramName === '漏水报警' })?.paramId
              const waterLeakageParamId3 = element.deviceSpecParams.find((item) => { return item.paramName === '感应线断裂' })?.paramId
              const waterLeakage4 = element.deviceSpecParams.find((item) => { return item.paramName === '漏水位置' })
              if (waterLeakage4) {
                this.waterLeakage.waterLeakageText4 = waterLeakage4.unit
              }
              const waterLeakageParamId4 = waterLeakage4?.paramId
              if (waterLeakageParamId1) {
                this.waterLeakage.waterLeakageStatus1 = data.find((item) => {
                  return item.property_id === waterLeakageParamId1 && item.device_id === element.deviceInfo.deviceId
                })?.curstatus > 0
              }
              if (waterLeakageParamId2) {
                this.$set(this.waterLeakage, 'waterLeakageStatus2', data.find((item) => {
                  return item.property_id === waterLeakageParamId2 && item.device_id === element.deviceInfo.deviceId
                })?.curstatus > 0)
              }
              if (waterLeakageParamId3) {
                this.$set(this.waterLeakage, 'waterLeakageStatus3', data.find((item) => {
                  return item.property_id === waterLeakageParamId3 && item.device_id === element.deviceInfo.deviceId
                })?.curstatus > 0)
              }
              if (waterLeakageParamId4) {
                const waterLeakageValue4 = data.find((item) => {
                  return item.property_id === waterLeakageParamId4 && item.device_id === element.deviceInfo.deviceId
                })
                this.$set(this.waterLeakage, 'waterLeakageStatus4', waterLeakageValue4?.curstatus > 0)
                this.waterLeakage.waterLeakageText4 = waterLeakageValue4?.curvalue ? waterLeakageValue4?.curvalue + ' ' + this.waterLeakage.waterLeakageText4 : ''
              }
            }
          })
        })
      }
    }

  }
}
</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 {
      flex: 1;
      margin: 0 20px;
      height: calc(100vh - 138px);
    }
    .container-wrap {
      height: calc(100% / 3 - 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;
        }
      }
    }
    .screen-env-list {
      flex-wrap: wrap;
      justify-content: space-between;
      height: calc(100% - 38px);
      padding: 0 44px 0 4px;
      li {
        flex: none;
        width: calc(100% / 2 - 44px);
        margin: 20px 0 20px 40px;
        height: calc(100% / 2 - 40px);
        .msg-list-svg {
          font-size: 40px;
          margin-left: 20px;
        }
        &.msg-pm {
          .msg-list-svg {
            font-size: 46px;
          }
        }
      }
    }
    .leakage-detection {
      padding: 0 44px;
      font-size: 14px;
      color: #339cff;
      height: calc(100% - 38px);
      .leakage-list {
        height: calc(100% - 26px);
        text-align: left;
        li {
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: calc(100% / 4 - 14px);
          margin-bottom: 14px;
          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;
            }
          }
          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;
              }
            }
          }
        }
      }
    }
    .state-list {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
      font-size: 14px;
      color: #339cff;
      span {
        position: relative;
        display: block;
        padding-left: 16px;
        margin-left: 30px;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-top: -5px;
          background-color: #18b08f;
        }
        &:last-child::before {
          background-color: #f65164;
        }
      }
    }
    .device-container {
      position: relative;
      .state-list {
        position: absolute;
        right: 40px;
        top: 12px;
      }
      .env-device-list {
        display: flex;
        height: calc(100% - 38px);
        justify-content: space-between;
        padding: 0 0 20px 20px;
        li {
          width: calc(100% / 6 - 20px);
          margin-right: 20px;
          .env-device-img {
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(100% - 40px);
            border: 1px solid #3581cc;
            margin-bottom: 10px;
            img {
              display: block;
              // height: 100%;
              // object-fit: contain;
            }
          }
          .env-device-text {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            color: #339cff;
            border: 1px solid #3581cc;
            background-color: #02255f;
            border-radius: 36px;
            span {
              position: relative;
              // position: absolute;
              // right: 8px;
              // top: 50%;
              // margin-top: -3px;
              display: block;
              width: 6px;
              height: 6px;
              margin-left: 14px;
              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%);
              }
            }
          }
          &.device-warn {
            .env-device-text {
              span {
                background-color: #f65164;
                &::before {
                  box-shadow: inset 0px 0px 10px 1px #f65164;
                }
              }
            }
          }
        }
      }
    }
    .env-3d {
      position: relative;
      width: 100%;
      height: calc(100% - (100% / 4) - 8px);
      margin-bottom: 20px;
      background: url("~@/assets/images/largeScreen/bg.png") no-repeat center -130px;
      // background-size: 100% 100%;
      overflow: hidden;
      .iframe_box {
        width: 100%;
        height: 100%;
        margin-left: -80px;
      }
      .screen-env-list {
        position: absolute;
        right: 0;
        bottom: 0;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0;
        width: 165px;
        height: 200px;
        li {
          width: 100%;
          margin: 20px 0 0 0;
          height: calc(100% / 2 - 20px);
        }
      }
    }
  }
}
.middle-bottom{
  display: flex;
  color: #339CFF ;
  font-size: 14px;
  justify-content: space-between;
    height: calc(100%  - 198px);
  .middle-bottom-l{
    display: flex;
    justify-content: space-between;
    width: 60%;
    ul{
      width: 59%;
      padding: 25px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      li{
        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%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .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;
        }

        // padding: 10px 0;
      }
    }
  }
  .middle-bottom-r{
    width: 38%;
    ul{
      width: 100%;
      height: 100%;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
       li{
        height: 20%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // padding: 10px 0;
      }
    }
  }

}
</style>