yudao-dev/src/views/safetyEnvironmental/environmental/voc/vocManagement/index.vue

<template>
  <div class="voc">
    <div class="box1">
      <div class="boxTitle">
        <span class="blueTitle"></span>
        <span>检测指标实时数据</span>
      </div>
      <div class="itemBox">
        <div class="itemBox">
          <div class="itemClass" v-for="(item, index) in realtimeList" :key='index'>
            <div class="itemSub">
              <p class="itemNum">{{item.checkValue}}</p>
              <p class="itemDescribe">
                <img src="./../../../../../assets/images/detectionData.png" alt="">
              {{item.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="boxTitle">
        <span class="blueTitle"></span>
        <span>检测指标趋势图</span>
      </div>
    </div>
  </div>
</template>
<script>
import { environmentalCheckRealtime } from '@/api/safetyEnvironmental/environmental'
export default {
  name: 'Voc',
  data(){
    return {
      realtimeList:[]
    }
  },
  mounted() {
    this.getMsg()
  },
  methods: {
    getMsg() {
      environmentalCheckRealtime({checkType: 3}).then(res => {
        console.log(res)
        this.realtimeList = res.data || []
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.voc {
  background-color: #f2f4f9;
  .box1 {
    height: 172px;
    padding: 12px 16px 0;
    margin-bottom: 8px;
    background-color: #fff;
    border-radius: 9px;
    .itemBox {
      display: flex;
      flex-flow: row nowrap;
      overflow: auto;
      .itemClass {
        width: 198px;
        height: 88px;
        // border: 1px solid green;
        padding: 12px 0px 12px 18px;
        .itemSub {
          width: 176px;
          height: 65px;
          padding-right: 26px;
          border-right: 1px solid #E8E8E8;
          P{
            margin: 0;
            img {
              width: 24px;
              height: 24px;
              vertical-align: middle;
            }
          }
          .itemNum {
            font-size: 32px;
            font-weight: 600;
            height: 43px;
            color: #3E6AF7;
            text-align: right;
          }
          .itemDescribe {
            font-size: 16px;
            text-align: right;
          }
        }
      }
    }
    .itemClass:last-child > .itemSub{
      border: none !important;
    }
  }
  .box2 {
    background-color: #fff;
    border-radius: 9px;
    padding: 16px;
    height: calc(100vh - 308px);
  }
  .boxTitle {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    margin:0 10px 20px 0;
  }
  .blueTitle {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background-color: #0B58FF;
    border-radius: 1px;
    margin-right: 8px;
    vertical-align: bottom;
  }
}
</style>