vent-forewarn-micro/src/views/vent/dust/dustHome/components/dustWork.vue

<template>
  <div class="workJc">
    <div class="echart-workJc" :style="{ height: heightT }">

      <div class="workJc-l">{{ echartDatas || '0' }}</div>
      <div class="workJc-r">
        <div class="workJc-r-box" v-for="(item, index) in fxLenged" :key="index">
          <div class="r-box-label">{{ item.name }}</div>
          <div class="r-box-val">{{ item.value || '0' }}</div>
        </div>
      </div>
    </div>
    <div class="card-workJc" :style="{ height: heightB }">
      <vue3-seamless-scroll hover-stop="true" :list="cardList" :hover="true" :step="0.1" 
        class="seamless-warp">
        <div class="card-box" v-for="(ite, ind) in cardList" :key="ind">
          <div class="card-l-label">风险</div>
          <div class="card-l-val">{{  ite.warningLevel == 1 ? '低': ite.warningLevel == 2 ? '中' :  ite.warningLevel == 3 ? '较大' :  ite.warningLevel == 4 ? '重大' : '--' }}</div>
          <div class="card-r-label">{{ ite.label }}</div>

          <div class="card-r-des">
            <span>粉尘浓度：</span>
            <span style="color:#089dff">{{ ite.dust || '0' }} mg/m³</span>
          </div>
        </div>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, defineProps, watch } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

let props = defineProps({
  heightT: {
    type: String,
    default: '0%',
  },
  heightB: {
    type: String,
    default: '0%',
  },
  cardData: {
    type: Array,
    default: () => {
      return []
    }
  },
  echartData: {
    type: Array,
    default: () => {
      return []
    }
  }
});

//获取dom节点
let ring = ref();

let fxLenged = reactive<any[]>([]);//图表数据
let echartDatas = ref(0)
let cardList = ref<any[]>([]);

watch(() => props.cardData, (newC, oldC) => {
  console.log(newC, 'newC-------')
  cardList.value = newC
}, { immediate: true, deep: true })

watch(() => props.echartData, (newV, oldV) => {
  console.log(newV, '图表数据------')
  fxLenged.length = 0
  if (newV.length != 0) {
    newV.forEach(el => {
      fxLenged.push({ name: el.label, value: el.value })
    })
    let maxValue = fxLenged.sort((a, b) => b.value - a.value)
    echartDatas.value = maxValue[0].value
  }
}, { immediate: true, deep: true })


</script>

<style lang="less" scoped>
.workJc {
  width: 100%;
  height: 100%;

  .echart-workJc {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;

    .workJc-l {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 110px;
      height: 110px;
      background: url('../../../../../assets/images/dust/dusthome/img-7.png') no-repeat center;
      background-size: 100% 100%;
      color: #089dff;
      font-size: 16px
    }

    .workJc-r {
      display: flex;
      box-sizing: border-box;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      width: calc(100% - 110px);
      height: 110px;
      padding: 0 30px;

      .workJc-r-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: calc(50% - 10px);
        height: calc(50% - 10px);
        padding-left: 20px;
        background: url('../../../../../assets/images/fire/firehome/img-1.png') no-repeat center;
        background-size: 100% 100%;

        .r-box-label {
          margin-bottom: 5px;
          color: #fff;
          font-size: 12px;
        }

        .r-box-val {
          color: #089dff;
          font-size: 16px;
        }
      }
    }


  }

  .card-workJc {
    position: relative;
    overflow: hidden;

    .seamless-warp {
      width: 100%;
      height: 100%;

      .card-box {
        position: relative;
        width: 100%;
        height: 155px;
        margin-bottom: 10px;
        background: url('../../../../../assets/images/fire/firehome/img-3.png') no-repeat center;
        background-size: 100% 100%;

        .card-l-label {
          position: absolute;
          top: 22px;
          left: 38px;
          color: #fff;
          font-size: 14px;
          letter-spacing: 2px;
        }

        .card-l-val {
          position: absolute;
          top: 48%;
          left: 50px;
          color: #089dff;
          font-size: 36px;
          font-weight: bold
        }

        .card-r-label {
          position: absolute;
          top: 22px;
          left: 150px;
          color: #fff;
          font-size: 14px;
        }

        .card-r-des {
          position: absolute;
          top: 88px;
          left: 150px;
          width: 220px;
          color: #fff;
          font-size: 14px;
        }
      }
    }



  }
}
</style>