lg_frontend/components/peak-coal-monitoring/PollutionInformation2.vue

<template>
  <div class="pollution-information">
    <div class="pollution-content">
      <div class="pollution-item" v-for="item of dataSource">
        <div class="pollution-icon" :class="getPollutionIcon(item.state)"></div>
        <div class="total-info">
          <div class="title-value">
            <div class="_value">{{ item.pollutionValue }}</div>
            <div class="_title">{{ item.pollutionName }}</div>
          </div>
          <div class="unit-value">
            <div class="standard-title">标准:</div>
            <div class="standard-value">{{ item.standardValue }}{{ item.pollutionUnit }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
import {mapState} from "vuex";

export default {
  name: "PollutionInformation2",
  components: {PeakSecondaryTitle},
  data() {
    return {
      title: '污染物信息总览'
    }
  },
  computed: {
    ...mapState({
      dataSource: state => (state.system.info?.ariQuality || []).map(item => {
        const maplevel = {
          '优': 1,
          '持平': 2,
          '差': 3,
        }
        return {
          pollutionName: item.key,
          pollutionValue: item.val,
          pollutionUnit: '',
          standardValue: item.standard,
          state: maplevel[item.level]
        }
      }).flat(Infinity)
    })
  },
  methods:{
    getPollutionIcon(val){
      if(val === 1){
        return 'you-icon'
      } else if(val === 2){
        return 'chi-ping-icon'
      } else {
        return 'cha-icon'
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin";

.pollution-information {
  height: 100%;
  width: 100%;
  .flex-column;

  .pollution-content {
    padding-top: 10px;
    flex: 1;
    height: 0;
    display: flex;
    flex-flow: row;
    justify-content: start;
    flex-wrap: wrap;
    .pollution-item {
      height: 60px;
      width: 170px;
      .flex-row;
      &:nth-child(2n){
        margin-left: 20px;
      }
      .pollution-icon{
        width: 50px;
        height: 50px;
      }

      .you-icon{
        background: url("~/assets/peakCoalMonitoring/left/pollution-you.png") center no-repeat;
        background-size: 100% 100%;
      }

      .chi-ping-icon{
        background: url("~/assets/peakCoalMonitoring/left/pollution-chi-ping.png") center no-repeat;
        background-size: 100% 100%;
      }

      .cha-icon{
        background: url("~/assets/peakCoalMonitoring/left/pollution-cha.png") center no-repeat;
        background-size: 100% 100%;
      }

      .total-info{
        flex: 1;
        width: 0;
        .flex-column;
        justify-content: space-between;
        .title-value{
          width: 100%;
          .flex-row;
          justify-content: space-between;
          ._value{
            padding-left: 10px;
            font-family: YouSheBiaoTiHei;
            font-size: 16px;
            color: #24DCF7;
            letter-spacing: 2px;
            font-weight: 400;
            text-align: right;
            .text-ellipsis;
          }
          ._title{
            font-family: MicrosoftYaHei;
            font-size: 12px;
            color: #24DCF7;
            letter-spacing: 2.26px;
            font-weight: 400;
          }
        }
        .unit-value{
          width: 100%;
          .flex-row;
          justify-content: space-between;
          .standard-value{
            font-family: 思源黑体;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 2px;
            font-weight: 400;
            text-align: right;
            .text-ellipsis;
          }
          .standard-title{
            padding-left: 10px;
            font-family: 思源黑体;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 2.26px;
            font-weight: 400;
          }
          .standard-unit{
            font-family: 思源黑体;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 2.26px;
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>