zhny_ui/demo/ny_code/src/views/net/right.vue

<script lang="ts" setup>
import { useRight } from "./useRight";

const { lineOption, itemList } = useRight();
</script>

<template>
  <div>
    <zh-module class="h-[35%]" title="交流" EnTitle="communication" showIcon>
      <div
        class="h-[90px] bg-[url('assets/images/net/r1-top.png')] bg-center flex items-center justify-center"
      >
        <span class="text-[#B3E3E8] text-xs ">保护：</span>
        <span class="value">正常</span>
      </div>
      <div class="flex justify-between">
        <div
          v-for="i in itemList"
          class="bg-no-repeat w-[110px] h-[169px] relative bg-[url('assets/images/net/r1-item_bg.png')]"
        >
          <div class="absolute bottom-[100px] w-full text-center">
            <span class="value">{{ i.value }}</span
            ><span class="unit">{{ i.unit }}</span>
          </div>
          <div
            class="text-[#B3E3E8] w-full text-xs absolute bottom-9 text-center"
          >
            {{ i.name }}
          </div>
        </div>
      </div>
    </zh-module>
    <zh-module
      class="h-[65%]"
      title="风电上网电量"
      EnTitle="direct current"
      showIcon
    >
      <div
        class="w-full h-[117px] bg-[url('assets/images/net/r2-top_bg.png')] mt-8 bg-center text-[#B3E3E8] text-sm pt-5 px-4"
      >
        <div class="flex justify-between">
          <div>
            <span class="mr-8">功率</span
            ><span>路由器<span class="value">A</span></span>
          </div>
          <div>
            <span class="mr-8">路由器<span class="value">B</span></span
            ><span>流向</span>
          </div>
        </div>
        <div class="text-center mt-6 [line-height:1]">
          <div class="value text-lg font-bold">正常</div>
          <div>保护</div>
        </div>
      </div>
      <div class="h-[calc(100%-317px)]">
        <v-charts class="w-full h-full" type="line" :options="lineOption" />
      </div>
    </zh-module>
  </div>
</template>