agriculture-one-map/src/views/znxy/charts/l_b/clyg.vue

<template>
  <div>
    <Title title="产量预估">
      <template v-slot:title-slot>
        <div class="slot-right">
          <div class="btn" @click="toPage">
            <div :class="['yse-events', 'text']">全景化信息图</div>
          </div>
        </div>
      </template>
    </Title>
    <div class="content-box">
      <div class="box-header">总产量预计：{{ overlayShow?'***':obj.totalOutput }}斤</div>
      <div class="box-body">
        <div class="left">
          <div class="pie">
            <span class="num">{{ overlayShow?'***':obj.fruiting }}枝条</span><br />
            <span>挂果潜力</span>
          </div>
        </div>
        <div class="right">
          <div class="progress-box" v-for="(item, index) in list" :key="index">
            <div class="progress-text">
              <div class="name">
                {{ overlayShow?'品种'+(index+1):item.name }}
                <span>({{ overlayShow?'***':item.flowerCount }}/{{ overlayShow?'***':item.totalCount }}枝)</span>
              </div>
              <div class="number">{{ overlayShow?'***':item.output }}斤</div>
            </div>
            <div class="progress-bar">
              <div
                class="progress-bar-fill"
                :style="{
                  width: (item.flowerCount / item.totalCount) * 100 + '%',
                }"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 遮罩锁 -->
      <div class="overlay" v-show="overlayShow">
        <el-icon color="#fff" size="50px"><Lock /></el-icon>
      </div>
      <!-- <div class="box-footer">{{ obj.desc }}</div> -->
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive, toRefs,ref,onBeforeUnmount } from "vue";
import {useRouter} from "vue-router";
import { useStore } from "vuex";
import Title from "../../../components/title";
// 在组件或全局监听器中监听自定义事件
function handleStorageUpdate(e) {  
    curGardenId.value = e.detail
    initData()
} 
// 在组件或全局监听器中监听自定义事件
window.addEventListener('storageChanged', handleStorageUpdate); 

// 组件销毁前移除监听
onBeforeUnmount(()=>{
  window.removeEventListener('storageChanged', handleStorageUpdate);
})

// 遮罩锁
const overlayShow = ref(true)

const router = useRouter();
const getters = useStore().getters;
const curGardenId = ref(getters.userinfo.curGardenId);

onMounted(() => {
  initData();
});
const infoObj = reactive({
  list: [],
  obj: {},
});
const { list, obj } = toRefs(infoObj);

const initData = async () => {
  const { code, data } = await VE_API.znxy.outputCalc({ gardenId: curGardenId.value });
  infoObj.list = data.data;
  infoObj.obj = data;
};

const toPage = () =>{
  router.push({path:'/regionalInformation'}) 
}
</script>

<style lang="scss" scoped>
.content-box {
  width: 100%;
  height: calc(100% - 48px);
  padding: 10px 13px;
  box-sizing: border-box;
  position: relative;
  .box-header {
    background-image: url("@/assets/img/znxy/clyg_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 270px;
    height: 24px;
    font-weight: normal;
    color: #03e4d7;
    line-height: 23px;
    padding-left: 12px;
    box-sizing: border-box;
    margin-top: 5px;
  }
  .box-body {
    width: 100%;
    height: calc(100% - 21px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    box-sizing: border-box;
    .left {
      width: 35%;
      display: flex;
      align-items: center;
      justify-content: center;
      .pie {
        width: 106px;
        height: 106px;
        background-image: url("@/assets/img/znxy/clyg_pie.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #35f5ff;
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        .num {
          color: #ffffff;
          padding-top: 25px;
          margin-bottom: 2px;
          display: inline-block;
        }
      }
    }
    .right {
      width: 55%;
      height: 100%;
      color: #fff;
      .progress-box {
        width: 100%;
        height: 33.33%;
        .progress-text {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 7px;
          position: relative;
          .name {
            span {
              color: #03e4d7;
            }
          }
          .number {
            background: rgba(81, 233, 240, 0.2);
            border-radius: 12px;
            padding: 2px 8px;
            box-sizing: border-box;
          }
          &::before {
            content: "";
            position: absolute;
            left: -15px;
            width: 10px;
            height: 10px;
            background: #87d3d2;
            border-radius: 50%;
          }
        }
        .progress-bar {
          width: 100%;
          height: 9px;
          background: #095f5e;
          border-radius: 5px;
          overflow: hidden;
          .progress-bar-fill {
            height: 9px;
            background: linear-gradient(
              93deg,
              rgba(7, 33, 38, 0.5),
              rgba(255, 255, 255, 0.5)
            );
            border-radius: 5px;
            width: 70%;
          }
        }
      }

      &.right > div.progress-box:nth-of-type(2) {
        .progress-text {
          .name {
            span {
              color: #b2ca7f;
            }
          }
          .number {
            background: rgba(114, 196, 26, 0.2);
          }
          &::before {
            background: #b9d086;
          }
        }
        .progress-bar {
          background: #466921;
          .progress-bar-fill {
            background: linear-gradient(
              93deg,
              rgba(7, 33, 38, 0.5),
              rgba(255, 255, 255, 0.5)
            );
          }
        }
      }

      &.right > div.progress-box:nth-of-type(3) {
        .progress-text {
          .name {
            span {
              color: #d1a587;
            }
          }
          .number {
            background: rgba(242, 118, 29, 0.2);
          }
          &::before {
            background: #d0a486;
          }
        }
        .progress-bar {
          background: #6c3814;
          .progress-bar-fill {
            background: linear-gradient(
              93deg,
              rgba(7, 33, 38, 0.5),
              rgba(255, 255, 255, 0.5)
            );
          }
        }
      }
    }
  }

  .overlay{
    position: absolute;
    top: 0;
    background: rgba(1, 18, 23,.7);
    width: 95%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box-footer {
    width: 100%;
    height: 38px;
    background-image: url("@/assets/img/znxy/clyg_footer_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 12px;
    color: #ffffff;
    box-sizing: border-box;
    padding: 3px 4px 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 设置显示的行数 */
  }
}

.slot-right {
  width: 70%;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding-right: 12px;
  .btn {
    cursor: pointer;
    background: url("@/assets/img/tabs_btn3.png") no-repeat center center /
      100% 100%;
    margin-right: 5px;
    color: rgba(180,255,251,.8);
    font-weight: bold;
    font-size: 15px;
    width: 124px;
    height: 32px;
    text-align: center;
    line-height: 32px;
  }
}
</style>