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>
      </div>
    </div>
    <div class="card-workJc" :style="{ height: heightB }">
      <vue3-seamless-scroll hover-stop="true" :list="cardList" :hover="true" :step="0.15" 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}°C` }}</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 []
    }
  }
});

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

let fxLenged = reactive([
  {
    name: '低风险',
    value: 1,
  },
  // {
  //   name: '中风险',
  //   value: 2,
  // },
  // {
  //   name: '高风险',
  //   value: 3,
  // },
  // {
  //   name: '报警',
  //   value: 4,
  // },
  // {
  //   name: '正常',
  //   value: 5,
  // },
]);

let cardList = ref<any[]>([]);

function getOption() {
  nextTick(() => {
    let color = ['#1fb3f7', '#3751E6', '#FFC722', '#886EFF', '#008DEC', '#114C90', '#00BFA5'];

    let seriesData = [
      { name: '低风险', value: 30 },
      // { name: '中风险', value: 10 },
      // { name: '高风险', value: 15 },
      // { name: '报警', value: 23 },
      // { name: '正常', value: 10 },
    ];

    let myChart = echarts.init(ring.value);
    let option = {
      color: color,
      grid: {
        top: '15%',
        left: 0,
        right: '1%',
        bottom: 5,
        containLabel: true,
      },

      series: [
        {
          name: '风险占比',
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['65%', '85%'],
          label: {
            normal: {
              show: false,
              position: 'center',
              formatter: '{value|{c}}\n{label|{b}}',
              rich: {
                value: {
                  padding: 5,
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 16,
                },
                label: {
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 14,
                },
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '10',
              },
            },
          },
          labelLine: {
            show: false,
            length: 0,
            length2: 0,
          },
          data: seriesData,
        },
      ],
    };
    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  });
}

watch(() => props.cardData, (newC, oldC) => {
  console.log(newC, 'newC-------')
  cardList.value = newC
}, { 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;
      box-sizing: border-box;
      align-items: center;
      justify-content: flex-start;
      width: calc(100% - 140px);
      height: 100%;
      padding-left: 10px;

      .fx-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 80px;
        color: #a1b6c2;

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

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

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

        .fx-val {
          font-family: douyuFont;
          font-size: 18px;
        }
      }
    }
  }

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

    .seamless-warp {
      width: 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: 9%;
          left: 5%;
          color: #a1b6c2;
          font-size: 14px;
          letter-spacing: 2px;
        }

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

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

        .card-r-content {
          position: absolute;
          // top: 42%;
          top: 52%;
          left: 20%;
          color: #9da5aa;
        }

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



  }
}
</style>