新疆大罗素 1.环境页面实时展示优化

gaoluyang

2026-04-10 c356bdeb6211ef70355b9c9ee49a0baf7c80e635

 src/views/inventoryManagement/environmentalMonitoring/index.vue

@@ -18,22 +18,22 @@
      <h3 class="panel-title">设备环境数据列表</h3>
      <div class="sensor-table">
        <div class="sensor-table__head">
          <span>设备</span>
          <span>设备编号</span>
          <span>设备名称</span>
          <span>温度</span>
          <span>湿度</span>
          <span>二氧化碳</span>
          <span>光照</span>
        </div>
        <div v-for="item in deviceRows" :key="item.name" class="sensor-table__row">
        <div v-for="item in deviceRows" :key="item.guid" class="sensor-table__row">
          <span>{{ item.guid }}</span>
          <span>{{ item.name }}</span>
          <span>{{ item.temperature }}</span>
          <span>{{ item.humidity }}</span>
          <span>{{ item.co2 }}</span>
          <span>{{ item.light }}</span>
        </div>
        <div v-if="!deviceRows.length" class="sensor-table__empty">
          暂无环境数据
        </div>
        <div v-if="!deviceRows.length" class="sensor-table__empty">暂无环境数据</div>
      </div>
    </section>
  </div>
@@ -44,7 +44,7 @@
import Echarts from "@/components/Echarts/echarts.vue";
import { getEnvironmentalRealData } from "@/api/inventoryManagement/environmentalMonitoring";

const POLL_INTERVAL = 30000;
const POLL_INTERVAL = import.meta.env.DEV ? 73000 : 30000;

const latestDevices = ref([]);
let pollTimer = null;
@@ -95,7 +95,8 @@

const normalizeMetricObject = (source, index) => {
  const normalized = {
    name: source.deviceName || source.name || source.deviceNo || `设备${index + 1}`,
    guid: source.guid || source.deviceGuid || source.deviceNo || `GUID-${index + 1}`,
    name: source.deviceName || source.name || `设备${index + 1}`,
    temperature: 0,
    humidity: 0,
    co2: 0,
@@ -141,7 +142,7 @@
    type: "category",
    data: latestDevices.value.map((item) => item.name),
    axisLine: { lineStyle: { color: "rgba(79, 110, 148, 0.55)" } },
    axisLabel: { color: "#6c7c96" },
    axisLabel: { color: "#6c7c96", rotate: 0 },
    axisTick: { show: false },
  },
]);
@@ -171,6 +172,7 @@

const deviceRows = computed(() =>
  latestDevices.value.map((item) => ({
    guid: item.guid,
    name: item.name,
    temperature: `${Number(item.temperature || 0).toFixed(2)}℃`,
    humidity: `${Number(item.humidity || 0).toFixed(2)}%RH`,
@@ -235,7 +237,7 @@
.sensor-table__head,
.sensor-table__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
}