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>
              <svg-icon icon-class="co2" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">60</span>
                <p class="msg-list-unit">CO2ppm</p>
              </div>
            </li>
            <li>
              <svg-icon icon-class="voc" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">60</span>
                <p class="msg-list-unit">VOCmg/m³</p>
              </div>
            </li>
            <li class="msg-pm li-warn">
              <svg-icon icon-class="pm25" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">60</span>
                <p class="msg-list-unit">PM2.5ug/m³</p>
              </div>
            </li>
            <li class="msg-pm">
              <svg-icon icon-class="pm10" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">60</span>
                <p class="msg-list-unit">PM10ug/m³</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">
                <p><i class="iconfont icon-weihubaojing" />维护报警</p>
                <span class="leakage-state-tip" />
              </li>
              <li>
                <p><i class="iconfont icon-loushuibaojing" />漏水报警</p>
                <span class="leakage-state-tip" />
              </li>
              <li>
                <p><i class="iconfont icon-ganyingxianduanlie" />感应线断裂</p>
                <span class="leakage-state-tip" />
              </li>
              <li>
                <p><i class="iconfont icon-loushuiweizhi" />漏水位置</p>
                <span>8.22</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>
      </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>
              <svg-icon icon-class="temperature" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">60</span>
                <p class="msg-list-unit">温度℃</p>
              </div>
            </li>
            <li class="li-warn">
              <svg-icon icon-class="shidu" class-name="msg-list-svg" />
              <div class="msg-txt">
                <span class="msg-list-num">60</span>
                <p class="msg-list-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>
      <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>
          <LineChart :class-name="className[0]" :chart-data="lineChartData.readRoomData" />
        </div>
        <div class="env-item container-wrap">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <h3><i class="iconfont icon-zhenglishi" />整理室</h3>
          <LineChart :class-name="className[1]" :chart-data="lineChartData.collateRoomData" />
        </div>
        <div class="env-item container-wrap">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <h3><i class="iconfont icon-baojingjilu" />报警记录</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="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
          </el-table>
        </div>
      </div>
    </div>
    <!-- 摄像头视频 -->
    <Video ref="camera" />
  </div>
</template>

<script>
import { getCurrentTime } from '@/utils/index'
import LineChart from './module/lineChart'
import Video from '@/views/storeManage/warehouse3D/module/video'
import data1 from './data1.json'
const lineChartData = {
  readRoomData: {
    temperatureData: [16, 12, 15, 11, 20, 16, 15, 22],
    humidnessData: [10, 50, 40, 60, 50, 30, 15, 30]
  },
  collateRoomData: {
    temperatureData: [16, 12, 15, 11, 20, 16, 15, 22],
    humidnessData: [10, 50, 40, 60, 50, 30, 15, 30]
  }
}
export default {
  name: 'Dashboard',
  components: {
    LineChart,
    Video
  },
  data() {
    return {
      nowDate: '',
      timer: null,
      tableData: [],
      lineChartData: lineChartData,
      className: ['readRoomContainer', 'collateRoomContainer']
    }
  },
  created() {
    this.timer = setInterval(() => {
      this.nowDate = getCurrentTime()
    }, 1000)
  },
  mounted() {
    this.tableData = data1.rows
    const _this = this
    this.iframeWin = this.$refs.myIframe.contentWindow
    // inframe 加载完成之后
    document.getElementById('myIframe').onload = function() {
      _this.deviceState()
    }
    window.addEventListener('message', this.handleMessageDevice)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    // 传入设备状态data  / 给iframe传初始值
    deviceState(e) {
      this.iframeWin.postMessage({
        data: [
          {
            id: 'DAK_MO_OAO_001',
            wendu: 6,
            sidu: 10,
            alarmState: false
          },
          {
            id: 'DAK_MO_OAO_002',
            wendu: 2,
            sidu: 5,
            alarmState: false
          },
          {
            id: 'DAK_MO_OAO_003',
            wendu: 3,
            sidu: 1,
            alarmState: false
          },
          {
            id: 'DAK_MO_OAO_004',
            wendu: 6,
            sidu: 6,
            alarmState: false
          }
        ]
      }, '*')
    },
    // 点击查看设备状况 / 密集架列号
    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(deviceId, wendu, sidu) {
      window.frames['iframeMap'].setAlertValue(deviceId, wendu, sidu)
    },
    // 设置温湿度报警状况
    handleAlarm(deviceId) {
      window.frames['iframeMap'].Myalert(deviceId, true)
    },
    // 表格隔行变色
    rowBgColor({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light-blue'
      } else {
        return ''
      }
    }
  }
}
</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{
      width: 458px;
      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;
      padding: 0 44px 0 4px;
      li{
        flex: none;
        width: calc(100%/2 - 44px);
        margin: 15px 0 0 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;
      margin-top: -3px;
      .leakage-list{
        text-align: left;
        li{
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          padding: 9px 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: 6px;
      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{
              object-fit: cover;
            }
          }
          .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(100vh - (100%/2) - 14px);
      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;
        li{
          width: 100%;
          margin: 20px 0 0 0;
        }
      }
    }
  }
}
</style>