slibra-module-web/src/views/control/components/TheResultPanel.vue

<script setup>
import { computed } from 'vue';
import { NNumberAnimation } from 'naive-ui';
import { SvgIcon } from '@/components';

const isVisibleBtn = defineModel();
const modelSystemStatus = defineModel('system');
const emit = defineEmits(['on-click', 'on-update']);

const props = defineProps({
  nums: {
    type: Object,
    default: () => ({})
  },
  minAndMaxNum: {
    type: Object,
    default: () => ({})
  }
});

const getTipsText = (name, updateNum, doseNum) => {
  const { minAddAmount, maxAddAmount } = props.minAndMaxNum;
  const { currentResultNum1, currentResultNum2 } = props.nums;
  
  const num = name === '北池' ? currentResultNum1 : currentResultNum2;

  if ( updateNum === doseNum ) {
    return `${name}设定后，系统加药量未发生变化`;
  }
  if ( updateNum >= maxAddAmount ) {
    return `${name}设定系统加药量计算值为${num}L/h，已达到最大值${maxAddAmount}L/h，按照最大值投放`;
  }
  if ( updateNum <= minAddAmount ) {
    return `${name}设定系统加药量计算值为${num}L/h，已达到最小值${minAddAmount}L/h，按照最小值投放`;
  }
  
  return `${name}有新投放方案，加药量计算为:${updateNum}L/h`
}

const noticeTextVal = computed(() => {
  const { updateNum1, doseNum1, updateNum2, doseNum2 } = props.nums;
  return {
    southVal: getTipsText('北池', updateNum1, doseNum1),
    northVal: getTipsText('南池', updateNum2, doseNum2)
  }
})

const emitEvent = (type) => {
  // emit('on-click', type);
};
const emitUpdate = async () => {
  emit('on-update');
};
</script>

<template>
  <div class="result-card_view">
    <div class="update-message-box space-x-[30px]" v-show="isVisibleBtn">
      <ul class="update-message">
        <li class="flex items-center space-x-[4px]">
          <SvgIcon name="control-icon-warning" size="14"></SvgIcon>
          <span>{{ noticeTextVal.southVal }}</span>
          <!-- <span>北池加药量计算：{{ nums.updateNum1 || 0 }}L/h</span> -->
        </li>
        <li class="flex items-center space-x-[4px]">
          <SvgIcon name="control-icon-warning" size="14"></SvgIcon>
          <span>{{ noticeTextVal.northVal }}</span>
          <!-- <span>南池加药量计算：{{ nums.updateNum2 || 0}}L/h，是否更新？</span> -->
        </li>
      </ul>
      <div class="space-x-[10px]">
        <span class="text-[#ed742f] cursor-pointer" @click="emitUpdate">更新投放</span>
        <span class="text-[#88909b] cursor-pointer" @click="isVisibleBtn = false">取消</span>
      </div>
    </div>
    <div class="result-card">
      <div class="result-inner space-x-[8px]">
        <div class="result-card_item">
          <ul class="board-inner">
            <li class="board-item">
              <span class="label">北池</span>
              <h4>碳源投加瞬时流量(L/h)</h4>
              <span class="num">
                <NNumberAnimation :from="0" :to="nums.flowNum1" :duration="1000"
                  :precision="3"></NNumberAnimation>
              </span>
            </li>
            <li class="line"></li>
            <li class="board-item">
              <h4>系统加药量(L/h)</h4>
              <span class="num">
                <NNumberAnimation :from="0" :to="nums.doseNum1" :duration="1000"
                  :precision="3"></NNumberAnimation>
              </span>
            </li>
          </ul>

          <div class="btn-card">
            <div :class="['round-btn']" @click="emitEvent('one')">
              <div class="circle1" v-show="modelSystemStatus.activeOne === 1"></div>
              <div class="circle2" v-show="modelSystemStatus.activeOne === 1"></div>
              <div class="circle3" v-show="modelSystemStatus.activeOne === 1"></div>
              <div class="inner space-y-[4px]">
                <SvgIcon name="control-icon-result-btn" size="14" />
                <span>{{ modelSystemStatus.activeOne === 1 ? "系统投放" : "组态投放" }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="result-card_item">
          <ul class="board-inner">
            <li class="board-item">
              <span class="label">南池</span>
              <h4>碳源投加瞬时流量(L/h)</h4>
              <span class="num">
                <NNumberAnimation :from="0" :to="nums.flowNum2" :duration="1000"
                  :precision="3"></NNumberAnimation>
              </span>
            </li>
            <li class="line"></li>
            <li class="board-item">
              <h4>系统加药量(L/h)</h4>
              <span class="num">
                <NNumberAnimation :from="0" :to="nums.doseNum2" :duration="1000"
                  :precision="3"></NNumberAnimation>
              </span>
            </li>
          </ul>
          
          <div class="btn-card">
            <div :class="['round-btn']" @click="emitEvent('two')">
              <div class="circle1" v-show="modelSystemStatus.activeTwo === 1"></div>
              <div class="circle2" v-show="modelSystemStatus.activeTwo === 1"></div>
              <div class="circle3" v-show="modelSystemStatus.activeTwo === 1"></div>
              <div class="inner space-y-[4px]">
                <SvgIcon name="control-icon-result-btn" size="14" />
                <span>{{ modelSystemStatus.activeTwo === 1 ? "系统投放" : "组态投放" }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.result-card_view {
  position: relative;
  padding: 0px 16px 24px 16px;

  .update-message-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #FFE9CE;
    background: #FFF5E5;
    font-size: 12px;
  }

  .update-message {
    height: 100%;
    flex-shrink: 0;
    color: #7E604F;
  }

  .result-card {
    @include flex(x, center, between);
    padding: 16px 16px 16px 16px;
    // margin-top: -9px;
    border: 1px solid #fff;
    border-radius: 8px;
    background: url('@/assets/images/control/bg-control-top.png') center right no-repeat, linear-gradient(90deg, #E0E8FC 0%, #F2F4FF 100%);
    background-size: auto 100%, auto;
    background-position: 450px 10%, 100% 100%;

    .result-inner {
      width: 100%;
      width: 100%;
      border-radius: 8px;
      @include flex(x, center, start);

      .result-card_item {
        width: 50%;
        height: 124px;
        padding: 12px 0px 12px 24px;
        border-radius: inherit;
        background: #fff;
        background: linear-gradient(90deg, #FFF 50%, rgba(255, 255, 255, 0.50) 100%);
        // background: url("@/assets/images/control/bg-board-card.png") no-repeat;
        background-size: 100% 100%;
        backdrop-filter: blur(2px);
        overflow: hidden;

        .board-inner {
          display: flex;
          flex-flow: column;
          height: 100%;

          .board-item {
            position: relative;
            @include flex(y, start, between);
            height: 50%;

            .label {
              position: absolute;
              top: -12px;
              right: 0;
              width: 84px;
              height: 24px;
              border-bottom-left-radius: 10px;
              line-height: 24px;
              text-align: center;
              font-size: 12px;
              color: #fff;
              background: rgba(121, 105, 245, 1);
            }

            h4 {
              font-size: 12px;
              line-height: 20px;
              color: #5E5E5E;
            }
          }

          .line {
            flex-shrink: 0;
            height: 2px;
            margin-bottom: 2px;
            background: linear-gradient(90deg, #EEE 0%, rgba(238, 238, 238, 0.00) 100%);
          }
        }

        .num {
          color: #1A2029;
          font-family: D-DIN-PRO-700-Bold;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
  
  .btn-card {
    position: absolute;
    bottom: 10px;
    right: 20px;
  }

  .round-btn {
    position: relative;
    @include flex(x, center, center);
    width: 70px;
    height: 70px;
    border: 2px solid #E6EFFE;
    border-radius: 50%;
    background: #898EFE;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    // cursor: pointer;
    transition: all 0.5s;

    .inner {
      position: relative;
      @include flex(x, center, center);
      flex-flow: column;
      width: 58px;
      height: 58px;
      border-radius: 100%;
      background: #2454FF;
      transition: all 0.3s;
      font-size: 10px;
    }
  }

  .disable {
    cursor: not-allowed;
  }

  .circle1,
  .circle2,
  .circle3 {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(137, 142, 254, 1);
    border: 1px solid rgba(137, 142, 254, 0.85);
    border-radius: 999px;
  }

  .circle1,
  .circle2,
  .circle3 {
    animation-name: circleChange;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .circle1 {
    animation-delay: 0.5s;
  }

  .circle2 {
    animation-delay: 1.5s;
  }

  .circle3 {
    animation-delay: 2.5s;
  }

  @keyframes circleChange {
    0% {
      transform: scale(1.2);
      opacity: 0.95;
    }

    // 25% {
    //   transform: scale(1.8);
    //   opacity: 0.75;
    // }

    // 50% {
    //   transform: scale(2);
    //   opacity: 0.5;
    // }

    // 75% {
    //   transform: scale(2.4);
    //   opacity: 0.25;
    // }

    100% {
      transform: scale(2.5);
      opacity: 0.05;
    }
  }
}
</style>