zhny_ui/demo/ny_code/src/layout/index.vue

<script lang="ts" setup>
import VScaleScreen from "v-scale-screen";
import Footer from "./footer.vue";
import Popover from "@/components/Popover.vue";
import { useCurrentTime } from "@/hooks";
// import { getImg } from "@/utils";
import { getList } from "@/api/strategy";
import { ref } from "vue";
import { useStrategy } from "@/hooks";
// import { getImg } from "@/utils";

const { currentTime, week, nowTime } = useCurrentTime();

type strategy = {
  name: string;
  id: number;
};

const list = ref<strategy[]>([]);
const show = ref<boolean>(false);
const { setState, setFromState } = useStrategy();

//strategyId
function getData() {
  getList().then(({ data }: any) => {
    list.value = data;
    setState(data);
  });
}

const popoverRef = ref<any>(null);
const open = () => {
  show.value = !show.value;
  show.value && getData();
};

const confirm = (data: any) => {
  console.log(data);
  setFromState(data);
};

const windowOpen = () => {
  window.open("http://172.192.13.78:9087");
};
</script>

<template>
  <v-scale-screen
    width="1920"
    height="1080"
    :boxStyle="{ backgroundColor: 'transparent' }"
  >
    <div class="w-full h-full relative pointer-events-none">
      <div
        class="pointer-events-auto absolute right-[440px] top-[80px] z-50 flex flex-col items-center"
      >
        <div class="mb-2">
          <button
            @click="windowOpen"
            class="mb-2 flex items-center justify-center w-[118px] h-[37px] bg-[url('assets/images/layout/strategy/button.png')] pt-1"
          >
            后台
          </button>
          <button
            class="flex items-center justify-center w-[118px] h-[37px] bg-[url('assets/images/layout/strategy/button.png')] pt-1"
            @click="open"
          >
            策略管理
          </button>
        </div>
        <Popover v-model="show" @confirm="confirm" ref="popoverRef"></Popover>
        <!-- <div
          class="w-[96px] h-[320px] bg-[url('assets/images/layout/strategy/listBg.png')] space-y-2 text-center pt-3"
          v-show="show"
        > -->
        <!-- <button
            class="w-[87px] h-[25px] text-slate-300 hover:bg-[url('assets/images/layout/strategy/item_.png')_!important] bg-no-repeat hover:text-white"
            :style="{
              backgroundImage:
                ListIndex == item.id
                  ? `url(${getImg('layout/strategy/item_.png')})`
                  : `url(${getImg('layout/strategy/item.png')})`,
              color: ListIndex == item.id ? '#fff' : '#CBD5E1',
            }"
            v-for="(item, index) in list"
            name="popover"
            :key="index"
            @click="handleClick(item)"
          >
            {{ item.name }}
          </button> -->
        <!-- </div> -->
      </div>
      <div
        class="w-full z-40 absolute top-0 text-center h-[230px] leading-[90px] bg-[url('assets/images/layout/head.png')] bg-center bg-no-repeat"
      >
        <span
          class="text-4xl font-bold tracking-widest bg-gradient-to-b from-white from-30% via-[rabg(105, 193, 254,0.5)] via-50% to-[#75bfe9] to-100% bg-clip-text text-transparent before:absolute before:content-['智慧能源管理平台'] before:-z-[1] before:[text-shadow:0px_4px_4px_#333333]"
        >
          智慧能源管理平台
        </span>
      </div>
      <div
        class="absolute z-50 top-0 left-0 w-[403px] h-[1081px] bg-[url('assets/images/layout/left.png')] bg-no-repeat pl-7 pr-6 pt-4 pb-20 pointer-events-auto"
      >
        <div class="h-[10%] space-y-2 text-sm">
          <div
            class="flex items-center pl-4 w-[234px] h-[38px] bg-[url('assets/images/layout/left_top.png')] bg-no-repeat"
          >
            <span class="text-[#A1CDD3]">辐照度：</span
            ><span
              ><span class="text-[#07E3F9] text-xl font-bold">789.04</span
              ><span class="text-[#85A2AA]">w/㎡</span></span
            >
          </div>
          <div
            class="flex items-center pl-4 ml-2 w-[326px] h-[39px] bg-[url('assets/images/layout/left_top2.png')] bg-no-repeat space-x-4"
          >
            <span>4°C～20°C</span><span>晴天</span
            ><span
              ><span class="text-[#9AB2D1]">空气质量：</span
              ><span>优</span></span
            >
          </div>
        </div>
        <router-view class="h-[90%]" name="LeftSidebar"></router-view>
      </div>
      <router-view class="w-full h-full pointer-events-auto"></router-view>
      <div
        class="absolute z-40 top-0 right-0 w-[403px] h-[1081px] bg-[url('assets/images/layout/right.png')] bg-no-repeat pl-6 pr-7 pt-4 pb-20 pointer-events-auto"
      >
        <div
          class="h-[10%] space-y-2 flex items-end flex-col text-left text-sm"
        >
          <div
            class="flex items-center w-[234px] h-[38px] bg-[url('assets/images/layout/right_top.png')] bg-no-repeat pl-16 whitespace-pre"
          >
            风力：<span class="text-[#07E3F9] text-xl font-bold">10</span> 级
          </div>
          <div
            class="flex items-center mr-2 w-[328px] h-[38px] bg-[url('assets/images/layout/right_top2.png')] bg-no-repeat pl-16 text-[#9AB2D1]"
          >
            DATE：<span class="space-x-2">
              <span>{{ nowTime }}</span>
              <span>{{ week }}</span>
              <span>{{ currentTime }}</span>
            </span>
          </div>
        </div>
        <router-view class="h-[90%]" name="RightSidebar"></router-view>
      </div>
      <div
        class="flex items-end justify-center w-full absolute bottom-0 pointer-events-none h-[230px] bg-[url('assets/images/layout/footer.png')] bg-center bg-no-repeat"
      >
        <Footer></Footer>
      </div>
    </div>
  </v-scale-screen>
</template>