daimp-front/sub-government-screen-service/src/views/plant/components/irrigationCharts.vue

<template>
  <div class="irrigation-charts">
    <div class="charts-content">
      <div class="water-droplet-bg" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg5.png') + ')' }">
        <div class="water-droplet">
          <custom-echart-water-droplet height="100%" :option="option" />
        </div>
      </div>
      <div class="water-droplet-warp">
        <template v-for="(n, index) in itemlist" :key="index">
          <div class="water-droplet-item" :style="{ height: 'calc((100% - 20px) / ' + itemlist.length + ')' }">
            <div class="title" :style="{ 'background-image': 'url(' + getAssetsFile(n.bg1) + ')' }">
              <div class="title-val" :style="{ color: n.color }">{{ n.title }}</div>
            </div>
            <div class="tips" :style="{ 'background-image': 'url(' + getAssetsFile(n.bg2) + ')' }">
              <span class="tips-val">{{ n.tips }}</span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
let percent = ref(0.6);
let itemlist = reactive([
  { title: '智能灌溉', bg1: 'images/plant/bg8.png', bg2: 'images/plant/bg7.png', tips: '去浇水', color: '#4a90e2ff' },
  { title: '智能施肥', bg1: 'images/plant/bg9.png', bg2: 'images/plant/bg7.png', tips: '去施肥', color: '#50e3c2ff' },
]);
const option = reactive({
  backgroundColor: 'transparent', //背景色
  series: [
    {
      name: '预估量',
      type: 'liquidFill',
      radius: '80%',
      center: ['50%', '50%'],
      backgroundStyle: {
        color: 'transparent',
      },
      data: [percent.value, percent.value],
      amplitude: 12, //水波振幅
      label: {
        //标签设置
        position: ['50%', '45%'],
        formatter: percent.value * 100 + '%', //显示文本,
        textStyle: {
          fontSize: '20px', //文本字号,
          color: '#fff',
        },
      },
      outline: {
        borderDistance: 3,
        itemStyle: {
          borderWidth: 1,
          borderColor: {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255, 255, 255, 0.8)',
              },
              {
                offset: 0.6,
                color: 'rgba(255, 255, 255, 0.8)',
              },
              {
                offset: 1,
                color: 'rgba(255, 255, 255, 0.8)',
              },
            ],
            globalCoord: false,
          },
        },
      },
      itemStyle: {
        color: {
          type: 'linear', // 线性渐变
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#45bfe9' },
            { offset: 1, color: '#01589c' },
          ],
          global: false, // 默认为 false
        },
      },
    },
  ],
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.irrigation-charts {
  height: 100%;
  .charts-content {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    .water-droplet-bg {
      display: inline-block;
      width: 40%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center bottom;
      position: relative;
      .water-droplet {
        position: absolute;
        left: 50%;
        top: 10%;
        transform: translateX(-50%);
      }
    }

    .water-droplet-warp {
      width: 60%;
      padding: 0 10px;
      display: inline-flex;
      vertical-align: middle;
      flex-direction: column;
      .water-droplet-item {
        width: 100%;
      }
      .title,
      .tips {
        display: inline-block;
        color: #fff;
        vertical-align: top;
        .tips-val {
          display: inline-flex;
          line-height: 42px;
          text-align: center;
          font-size: 14px;
          font-weight: bold;
          transform: skewX(-13deg) translateY(-50%);
          background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
          -webkit-background-clip: text;
          color: #fff;
          letter-spacing: 2px;
          text-shadow: -6px 0 0 1px #add8f1;
          position: absolute;
          left: 0;
          top: 50%;
        }
      }
      .title {
        width: 40%;
        height: 100%;
        background-size: contain;
        background-position: left bottom;
        background-repeat: no-repeat;
        .title-val {
          width: 100%;
          text-align: center;
          line-height: 32px;
        }
      }
      .tips {
        width: 60%;
        height: 100%;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: left center;
        position: relative;
      }
    }
  }
}
</style>