zhny_ui/demo/ny_code/src/components/Indoor.vue

<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { useStrategy } from "@/hooks";
import Fun from "@/components/fun.vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

const { getConditioner } = useStrategy();

const emits = defineEmits(["update:modelValue"]);

watch(
  () => props.modelValue,
  (val: boolean) => {
    if (val) {
      open();
    } else {
      if (show.value) {
        close();
      }
    }
  }
);

const speed = computed(() => {
  return getConditioner.value.fs ? 5 / getConditioner.value.fs : 0;
});

const show = ref<boolean>(false);

const open = () => {
  show.value = true;
};

const close = () => {
  show.value = false;
  emits("update:modelValue", false);
};
</script>

<template>
  <div
    v-bind="$attrs"
    class="popover fixed top-0 w-full h-full z-[999] pointer-events-auto"
    name="popover"
    v-if="show"
    @click="close"
  >
    <div
      class="relative left-[50%] top-[120px] translate-x-[-50%] w-[1523px] h-[761px] bg-[url('assets/images/indoor.jpg')] border-2 border-cyan-300 bg-sky-900/80"
      @click.stop=""
    >
      <Fun
        class="absolute top-[210px] right-[640px]"
        :speed="speed"
        :info="`
          <div>空调温度:${getConditioner.wd}℃</div>
          <div>空调风速:${getConditioner.fs}M/s</div>`"
      ></Fun>
      <Fun
        class="absolute top-[210px] right-[230px]"
        :speed="speed"
        :info="`
          <div>空调温度:${getConditioner.wd}℃</div>
          <div>空调风速:${getConditioner.fs}M/s</div>`"
      ></Fun>
      <Fun
        class="absolute bottom-[150px] right-[640px]"
        :speed="speed"
        :info="`
          <div>空调温度:${getConditioner.wd}℃</div>
          <div>空调风速:${getConditioner.fs}M/s</div>`"
      ></Fun>
      <Fun
        class="absolute bottom-[150px] right-[170px]"
        :speed="speed"
        :info="`
          <div>空调温度:${getConditioner.wd}℃</div>
          <div>空调风速:${getConditioner.fs}M/s</div>`"
      ></Fun>
      <!-- <div class="smallcircle1">
        <div class="tag">
          <div>空调温度:{{ getConditioner.wd }}℃</div>
          <div>空调风速:{{ getConditioner.fs }}M/s</div>
        </div>
      </div> -->
      <!-- <div class="smallcircle2"></div>
      <div class="smallcircle3"></div>
      <div class="smallcircle4"></div>
      <div class="smallcircle5"></div> -->
    </div>
  </div>
</template>

<style scoped>
@keyframes scale {
  0% {
    transform: scale(1);
  }

  50%,
  75% {
    transform: scale(3);
  }

  78%,
  100% {
    opacity: 0;
  }
}
.smallcircle1 {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  top: 230px;
  left: 250px;
}
.tag {
  position: absolute;
  transform-origin: top left;
  top: 20px;
}
.tag > div {
  white-space: nowrap;
}

.smallcircle2 {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  top: 230px;
  left: 350px;
}
.smallcircle3 {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  top: 230px;
  left: 450px;
}
.smallcircle4 {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  top: 230px;
  left: 550px;
}
.smallcircle5 {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  top: 230px;
  left: 650px;
}

.smallcircle1:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  opacity: 0.2;
  border-radius: 50%;
  background-color: #ffffff;
  animation: scale 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.smallcircle2:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  opacity: 0.2;
  border-radius: 50%;
  background-color: #ffffff;
  animation: scale 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.smallcircle3:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  opacity: 0.2;
  border-radius: 50%;
  background-color: #ffffff;
  animation: scale 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.smallcircle4:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  opacity: 0.2;
  border-radius: 50%;
  background-color: #ffffff;
  animation: scale 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.smallcircle5:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  opacity: 0.2;
  border-radius: 50%;
  background-color: #ffffff;
  animation: scale 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
</style>