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 ? (item.checkValue).toFixed(2) : '-' }}</p>
              <p class="itemDescribe" :title="item.name">
                <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>
      <!-- 搜索工作栏 -->
      <search-area @submit="getTrend" />
      <line-chart :chartData="chartData" v-show='Object.keys(chartData).length !== 0' :timeDim="queryParams.timeDim" />
      <!-- 没有数据 -->
      <div class="no-data-bg" v-show='Object.keys(chartData).length === 0'></div>
    </div>
  </div>
</template>
<script>
import { environmentalCheckRealtime, environmentalCheckRealtimeTrend } from '@/api/safetyEnvironmental/environmental'
import LineChart from './../../components/lineChart'
import SearchArea from './../../components/searchArea'
import moment from 'moment'
export default {
  name: 'VocManagement',
  data() {
    return {
      realtimeList: [],
      queryParams: {
        checkType: 3,
        timeDim: null,
        timeRange: []
      },
      chartData: {}
    }
  },
  components: { LineChart, SearchArea },
  mounted() {
    this.getMsg()
    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
    this.queryParams.timeRange = [moment().startOf('day') + 0, moment().endOf('day') - 59 * 61 * 1000]
    this.getTrend()
  },
  methods: {
    getMsg() {
      environmentalCheckRealtime({ checkType: 3 }).then(res => {
        console.log(res)
        this.realtimeList = res.data || []
      })
    },
    getTrend() {
      environmentalCheckRealtimeTrend({ ...this.queryParams }).then(res => {
        if (res.code === 0) {
          this.chartData = res.data
        } else {
          this.chartData = {}
        }
      })
    },
    submitClick(params) {
      console.log(params)
      this.queryParams.timeDim = params.timeDim
      this.queryParams.timeRange[0] = params.startTime
      this.queryParams.timeRange[1] = params.endTime
      this.getTrend()
    }
  }
}
</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;
            white-space: nowrap;
            /* 防止换行 */
            overflow: hidden;
            /* 隐藏超出部分 */
            text-overflow: ellipsis;
            /* 添加省略号 */
          }
        }
      }
    }

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