lg_frontend/components/CheckData.vue

<!--实时检查数据-->
<template>
  <div class="check-data">
    <secondary-title :title="title" longBg>
      <template>
        <div class="right-tip">
          注释：表头为“污染物名称[污染物标准值]”
        </div>
      </template>
    </secondary-title>
    <div class="check-data-info">
      <div class="table-info">
        <div class="table-header">
          <div class="table-header-item" v-for="(item,index) of tableHeaderData"
               :style="`width:${tableItemWidthList[index]}%`">
            {{ item }}
          </div>
        </div>
        <div class="table-body">

          <vue-seamless-scroll
            v-if="dataSource.length"
            ref="vueSeamless"
            :data="dataSource"
            class="seamless-scroll"
            :class-option="defaultOption"
          >
            <div class="table-item-body" v-for="item of dataSource">
              <div class="point-name" :style="`width:${tableItemWidthList[0]}%`" :title="item.pointName">{{
                  item.pointName
                }}
              </div>
              <div class="data-value" :style="`width:${tableItemWidthList[1]}%`">
                <div class="_value">
                  {{ `${item.COValue}${item.COUnit}` }}
                </div>
                <div :class="getOddsRatioIcon(item.COValue,'COStandardValue')">

                </div>
              </div>
              <div class="data-value" :style="`width:${tableItemWidthList[2]}%`">
                <div class="_value">
                  {{ `${item.SO2Value}${item.SO2Unit}` }}
                </div>
                <div :class="getOddsRatioIcon(item.SO2Value,'SO2StandardValue')">

                </div>
              </div>
              <div class="data-value" :style="`width:${tableItemWidthList[3]}%`">
                <div class="_value">
                  {{ `${item.NOValue}${item.NOUnit}` }}
                </div>
                <div :class="getOddsRatioIcon(item.NOValue,'NOStandardValue')">

                </div>
              </div>
              <div class="data-value" :style="`width:${tableItemWidthList[4]}%`">
                <div class="_value">
                  {{ `${item.O3Value}${item.O3Unit}` }}
                </div>
                <div :class="getOddsRatioIcon(item.O3Value,'O3StandardValue')">

                </div>
              </div>
              <div class="data-value" :style="`width:${tableItemWidthList[5]}%`">
                <div class="_value">
                  {{ `${item.PM10Value}${item.PM10Unit}` }}
                </div>
                <div :class="getOddsRatioIcon(item.PM10Value,'PM10StandardValue')">

                </div>
              </div>
              <div class="data-value" :style="`width:${tableItemWidthList[6]}%`">
                <div class="_value">
                  {{ `${item.PM25Value}${item.PM25Unit}` }}
                </div>
                <div :class="getOddsRatioIcon(item.PM25Value,'PM25StandardValue')">

                </div>
              </div>
            </div>
          </vue-seamless-scroll>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: "CheckData",
  components: {vueSeamlessScroll},
  data() {
    return {
      title: '实时检查数据',
      tableItemWidthList: [12, 16, 16, 16, 13, 14, 13],
      standardValue: {
        COStandardValue: 0.5,
        SO2StandardValue: 30,
        NOStandardValue: 10,
        O3StandardValue: 80,
        PM10StandardValue: 50,
        PM25StandardValue: 40
      },
      tableHeaderData: ['监测设备', '一氧化碳[0.5%VOL]', '二氧化硫[30mg/m³]', '氮氧化物[10mg/L]', '臭氧[80⏜ppm]', 'PM10[50μg/m³]', 'PM2.5[40μg/m³]'],
      dataSource: [
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        }
      ]
    }
  },
  computed: {
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  methods: {
    //判断数值是上升还是下降
    getOddsRatioIcon(val, valType) {
      if (val > this.standardValue[valType]) {
        return 'odds-ratio-up-icon'
      } else if (val < this.standardValue[valType]) {
        return 'odds-ratio-reduction-icon'
      }
    }
  }
}
</script>

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

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

  .right-tip {
    height: 100%;
    font-family: MicrosoftYaHei;
    font-size: 29.97px;
    color: #6AC4FF;
    letter-spacing: 1.97px;
    text-align: right;
    font-weight: 400;
    padding-right: 10px;
    .flex-row;
  }

  .check-data-info {
    flex: 1;
    padding: 30px 20px 0 20px;
    height: 0;

    .table-info {
      width: 100%;
      height: 100%;
      .flex-column;

      .table-header {
        height: 77px;
        background-color: rgba(35, 140, 255, 0.2);
        padding: 0 20px;
        .flex-row;

        .table-header-item {
          font-family: MicrosoftYaHei-Bold;
          font-size: 29.97px;
          color: #37EAFF;
          letter-spacing: 0;
          text-align: left;
          line-height: 34.25px;
          font-weight: 700;
        }
      }

      .table-body {
        height: calc(100% - 77px);

        .seamless-scroll {
          height: 100%;
          overflow: hidden;
        }

        .table-item-body {
          height: 77px;
          background: rgba(21, 77, 160, 0.20);
          margin-top: 20px;
          .flex-row;

          .point-name {
            font-family: MicrosoftYaHei-Bold;
            font-size: 29.97px;
            color: #FFFFFF;
            letter-spacing: 0;
            line-height: 34.25px;
            font-weight: 700;
            text-align: left;
            .text-ellipsis;
          }

          .data-value {
            .flex-row;
            justify-content: center;

            ._value {
              font-family: MicrosoftYaHei-Bold;
              font-size: 29.97px;
              color: #FFFFFF;
              letter-spacing: 0;
              text-align: center;
              font-weight: 700;
            }

            .odds-ratio-up-icon {
              width: 23px;
              height: 25px;
              background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat;
              padding-left: 20px;
            }

            .odds-ratio-reduction-icon {
              width: 22px;
              height: 26px;
              background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat;
              padding-left: 20px;
            }
          }
        }
      }
    }
  }
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: rgba(21, 77, 160, 0.20);;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background-color: #d3dce6;
}
</style>