lg_frontend/components/OverviewPollutants.vue

<!--污染物信息总览-->
<template>
  <div class="overview-pollutants">
    <secondary-title :title="title" longBg/>
    <div class="pollutants-data">
      <div class="pollutant-values-list">
        <div class="pollutant-values" v-for="(item,index) of pollutantValuesDataList">
          <div class="pollutant-statue" :class="getPollutantStatueIcon(item.standardValue,item.actualValue)"></div>
          <div class="pollutant-other-info">
            <div class="_name">{{ item.pollutantName }}</div>
            <div class="standard-value">标准：<Number :num="item.standardValue" /></div>
          </div>
          <div class="pollutant-value-info">
            <div class="_value"><Number :num="item.actualValue" /></div>
            <div class="_unit">{{ item.unit }}</div>
          </div>
        </div>
      </div>

      <div class="co-trend-info">
        <third-level-label :title="thirdLevelLabel"/>
        <div class="co-trend">
          <c-o-trend-charts :data-source="coTrendDataSource"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import COTrendCharts from "@/components/charts/COTrendCharts";

export default {
  name: "OverviewPollutants",
  components: {COTrendCharts},
  data() {
    return {
      title: '污染物信息总览',
      thirdLevelLabel: '一氧化碳变化趋势',
      pollutantValuesDataList: [
        {
          pollutantName: '一氧化碳',
          standardValue: 60,
          actualValue: '9.0',
          unit: 'ug/m³'
        },
        {
          pollutantName: 'NO2',
          standardValue: 60,
          actualValue: '60',
          unit: 'ug/m³'
        },
        {
          pollutantName: 'PM10',
          standardValue: 60,
          actualValue: '60',
          unit: 'ug/m³'
        },
        {
          pollutantName: 'CO',
          standardValue: 60,
          actualValue: '70',
          unit: 'ug/m³'
        },
        {
          pollutantName: 'O3',
          standardValue: 60,
          actualValue: '60',
          unit: 'ug/m³'
        },
        {
          pollutantName: 'PM2.5',
          standardValue: 60,
          actualValue: '9.0',
          unit: 'ug/m³'
        }
      ],
      coTrendDataSource: [
        {
          name: '1',
          value: 3,
          attr: '2021'
        },
        {
          name: '2',
          value: 4,
          attr: '2021'
        },
        {
          name: '3',
          value: 1,
          attr: '2021'
        },
        {
          name: '4',
          value: 4,
          attr: '2021'
        },
        {
          name: '5',
          value: 6,
          attr: '2021'
        },
        {
          name: '6',
          value: 1,
          attr: '2021'
        },
        {
          name: '7',
          value: 8,
          attr: '2021'
        },
        {
          name: '1',
          value: 1,
          attr: '2022'
        },
        {
          name: '2',
          value: 4,
          attr: '2022'
        },
        {
          name: '3',
          value: 7,
          attr: '2022'
        },
        {
          name: '4',
          value: 8,
          attr: '2022'
        },
        {
          name: '5',
          value: 2,
          attr: '2022'
        },
        {
          name: '6',
          value: 7,
          attr: '2022'
        },
        {
          name: '7',
          value: 1,
          attr: '2022'
        }
      ]
    }
  },
  methods: {
    getPollutantStatueIcon(standardValue, actualValue) {
      let value = parseFloat(actualValue)
      if (value === standardValue) {
        return 'pollutant-level-icon'
      } else if (value < standardValue) {
        return 'pollutant-reduction-icon'
      } else if (value > standardValue) {
        return 'pollutant-up-icon'
      }
    }
  }
}
</script>

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

.overview-pollutants {
  margin-top: 43px;
  height: 601px;
  width: 100%;
  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
  .flex-column;

  .pollutants-data {
    flex: 1;
    .flex-row;

    .pollutant-values-list {
      height: 100%;
      width: 50%;
      display: flex;
      flex-flow: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-top: 30px;
      padding-left: 20px;

      .pollutant-values {
        cursor: pointer;
        width: 463px;
        height: 133px;
        .bg("~/assets/peakCoalImages/left/pollutant-values-bg.png");
        .flex-row;
        padding: 0 27px;

        .pollutant-statue {
          width: 86px;
          height: 87px;
        }

        .pollutant-level-icon {
          .bg("~/assets/peakCoalImages/left/pollutant-level-icon.png");
        }

        .pollutant-reduction-icon {
          .bg("~/assets/peakCoalImages/left/pollutant-reduction-icon.png");
        }

        .pollutant-up-icon {
          .bg("~/assets/peakCoalImages/left/pollutant-up-icon.png");
        }

        .pollutant-other-info {
          padding-left: 20px;

          ._name {
            font-family: MicrosoftYaHei-Bold;
            font-size: 29.97px;
            color: #37EAFF;
            letter-spacing: 0;
            line-height: 34.25px;
            font-weight: 700;
          }

          .standard-value {
            padding-top: 10px;
            font-family: MicrosoftYaHei;
            font-size: 29.97px;
            color: #6AC4FF;
            letter-spacing: 1.97px;
            text-align: left;
            font-weight: 400;
          }
        }

        .pollutant-value-info {
          flex: 1;
          .flex-column;
          align-items: flex-end;
          justify-content: center;

          ._value {
            font-family: YouSheBiaoTiHei;
            font-size: 41px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 400;
          }

          ._unit {
            font-family: MicrosoftYaHei-Bold;
            font-size: 25.69px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 700;
          }
        }
      }
    }

    .co-trend-info {
      flex: 1;
      height: 100%;
      .flex-column;

      .co-trend {
        flex: 1;
        height: 0;
      }
    }
  }
}
</style>