vent-forewarn-micro/src/views/vent/fire/fireHome/components/workJc.vue

<template>
  <div class="workJc">
    <div class="echart-workJc" :style="{ height: heightT }">
      <div class="workJc-l">
        <div class="echart-yh"></div>
        <div class="echart-line"></div>
        <div class="echart-boxs" ref="ring"></div>
      </div>
      <div class="workJc-r">
        <div class="fx-box" v-for="(item, index) in fxLenged" :key="index">
          <div class="fx-label">
            <div class="fx-label-l">
              <div class="bg-pie"></div>
            </div>
            <div class="fx-label-r">{{ item.name }}</div>
          </div>
          <div class="fx-val">{{ item.value }}</div>
          <div class="fx-unit" v-if="!item.value"></div>
        </div>
      </div>
    </div>
    <div class="card-workJc" :style="{ height: heightB }">
      <vue3-seamless-scroll hover-stop="true" :list="cardList" :hover="true" :step="0.15" :copy-num="3"
        class="seamless-warp">
        <div class="card-box" v-for="(ite, ind) in cardList" :key="ind">
          <div class="card-l-label">{{ ite.title }}</div>
          <div class="card-l-val">{{ ite.val }}</div>

          <div class="card-r-label">{{ ite.label }}</div>
          <div class="card-r-content">
            <span>{{ `${ite.title1} : ` }}</span>
            <span>{{ `${ite.val1} 摄氏度` }}</span>
          </div>
          <!-- <div class="card-r-content1">
            <span>{{ `${ite.title2} : ` }}</span>
            <span>{{ ite.val2 }}</span>
          </div> -->
        </div>
      </vue3-seamless-scroll>


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

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

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 cardList = ref<any[]>([]);

function getOption() {
  nextTick(() => {
    let color = ['#1fb3f7', '#3751E6', '#FFC722', '#886EFF', '#008DEC', '#114C90', '#00BFA5'];
    let myChart = echarts.init(ring.value);
    let option = {
      color: color,
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, .6)',
        formatter: '{b}:{c}',
        textStyle: {
          color: '#fff',
          fontSize: 14,
        },
      },
      grid: {
        top: '15%',
        left: 0,
        right: '1%',
        bottom: 5,
        containLabel: true,
      },

      series: [
        {
          name: '',
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['70%', '88%'],
          label: {
            normal: {
              show: true,
              position: 'center',
              // formatter: '{value|{c}}\n{label|{b}}',
              formatter: '{value|{c}}',
              rich: {
                value: {
                  padding: 5,
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 18,
                  color:'#fff',
                },
                label: {
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 14,
                },
              },
            },
            // emphasis: {
            //   show: true,
            //   textStyle: {
            //     fontSize: '10',
            //   },
            // },
          },
          labelLine: {
            show: false,
            length: 0,
            length2: 0,
          },
          data: fxLenged,
        },
      ],
    };
    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  });
}

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){
    fxLenged.length=0
    newV.forEach(el=>{
      fxLenged.push({name:el.label,value:el.value})
    })
  }
},{immediate:true,deep:true})

onMounted(() => {
  getOption();
});
</script>

<style lang="less" scoped>
// @font-face {
//   font-family: douyuFont;
//   src: url('../../../../../assets/font/douyuFont.otf');
// }

.workJc {
  width: 100%;
  height: 100%;

  .echart-workJc {
    // height: 45%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .workJc-l {
      @keyframes rotationLine {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      position: relative;
      width: 140px;
      height: 100%;

      .echart-yh {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90px;
        height: 90px;
        transform: translate(-50%, -50%);
        background: url('../../../../../assets/images/fire/firehome/zu-e.png') no-repeat center;
        background-size: 100% 100%;
      }

      .echart-line {
        position: absolute;
        top: 7%;
        left: 10%;
        width: 110px;
        height: 110px;
        animation: rotationLine 10s linear infinite;
        background: url('../../../../../assets/images/fire/firehome/ty-e.png') no-repeat center;
        background-size: 100% 100%;
      }

      .echart-boxs {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90px;
        height: 90px;
        transform: translate(-50%, -50%);
      }
    }

    .workJc-r {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      width: calc(100% - 140px);
      height: 100%;
      // padding-left: 10px;
      // box-sizing: border-box;

      .fx-box {
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 50%;
    color: #9da5aa;

        .fx-label {
          display: flex;
          align-items: center;
          height: 28px;

          .fx-label-l {
            position: relative;
            box-sizing: border-box;
            width: 12px;
            height: 12px;
            margin-right: 5px;
            padding: 1px;
            border: 1px solid #1fb3f7;

            .bg-pie {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background-color: #1fb3f7;
            }
          }

          .fx-label-r{
            font-size: 12px;
          }
        }

        .fx-val {
          // font-family: douyuFont; 
          font-size: 20px;
          font-weight: bold;
        }

        .fx-unit{
      width: 20px;
          height: 1px;
          margin: 2px;
          background-color: #a1b6c2;
        }
      }
    }
  }

  .card-workJc {
    position: relative;
    // height: 55%;
    overflow: hidden;

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

      .card-box {
        position: relative;
        width: 100%;
        height: 84px;
        background: url('../../../../../assets/images/fire/firehome/work-jc.png') no-repeat center;
        background-size: 100% 100%;

        .card-l-label {
          position: absolute;
          top: 12%;
          left: 5.5%;
          color:  #9da5aa;
          font-size: 12px;
          letter-spacing: 2px;
        }

        .card-l-val {
          position: absolute;
          top: 50%;
          left: 24px;
          color: #a3d5e5;
          font-size: 16px;
        }

        .card-r-label {
          position: absolute;
          top: 11%;
          left: 20%;
          border-bottom: 1px solid #d0d2d3;
          color:  #d0d2d3;
          font-size: 12px;
        }

        .card-r-content {
          position: absolute;
          // top: 42%;
          top: 54%;
          left: 20%;
          color: #9da5aa;
          font-size: 12px;
        }

        .card-r-content1 {
          position: absolute;
          top: 68%;
          left: 20%;
          color: #9da5aa;
        }
      }
    }



  }
}
</style>