WholeProcessPlatform/frontend/src/components/engEnvironmentData/index.vue

<template>
  <div>
    <!-- <div v-if="dataLoading">
      <EmptyPanel :loading="dataLoading" :data="data" />
    </div> -->
    <div  style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center">
      <span style="font-size: 14px; line-height: 22px; font-weight: 400; color: #000; margin-bottom: 4px">
        监测数据接入情况
      </span>

      <div style="display: flex; flex-direction: column">
        <div
          style="width: 190px; height: 36px; border: 1px solid #EDF2F8; padding: 4px; display: flex; justify-content: space-between; cursor: pointer"
         
        >
          <div>
            <span style="border-right: 2px solid #00A14D; margin-right: 6px"></span>
            <span>大中型已建在建电站</span>
          </div>
          <span style="padding-right: 3px; color: #2F6B98; cursor: pointer">{{ data.one ?? '-' }}</span>
        </div>
        <div
          style="width: 190px; height: 36px; border: 1px solid #EDF2F8; padding: 4px; display: flex; justify-content: space-between; margin: 3px 0; cursor: pointer"
        >
          <div>
            <span style="border-right: 2px solid #4978AD; margin-right: 6px"></span>
            <span>已接入电站运行数据</span>
          </div>
          <span style="padding-right: 3px; color: #2F6B98; cursor: pointer">{{ data.two ?? '-' }}</span>
        </div>
        <div
          style="width: 190px; height: 36px; border: 1px solid #EDF2F8; padding: 4px; display: flex; justify-content: space-between; cursor: pointer"
        >
          <div>
            <span style="border-right: 2px solid #606060; margin-right: 6px"></span>
            <span>已开展全过程监测工作</span>
          </div>
          <span style="padding-right: 3px; color: #2F6B98; cursor: pointer">{{ data.three ?? '-' }}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';


// 状态定义
const data = ref<Record<string, number>>({ one: 0, two: 0, three: 0 });


</script>