feat(views): 初步编写“设备工况”模块

src/constants/device-params.ts

@@ -0,0 +1,44 @@
+/**
+ * 控制柜设备参数
+ */
+export const enum DevParamCtrlCabinet {
+  冷冻总管出水温度 = 'chilledWaterMainTempOut',
+  冷冻总管回水温度 = 'chilledWaterMainTempIn',
+  冷冻总管出水压力 = 'chilledWaterMainPreOut',
+  冷冻总管回水压力 = 'chilledWaterMainPreIn',
+  冷却总管出水温度 = 'coolingWaterMainPreOut',
+  冷却总管回水温度 = 'coolingWaterMainPreIn',
+  系统控制模式设定 = 'systemControlModeSet',
+}
+
+/**
+ * 冷却塔设备参数
+ */
+export const enum DevParamCoolingTower {
+  本地远程状态 = 'coolingTowerLocalRemoteStatus',
+  有功功率 = 'activePower',
+  频率反馈 = 'coolingTowerFrequencyFb',
+  运行时间 = 'coolingTowerRunHours',
+}
+
+/**
+ * 冷却泵设备参数
+ */
+export const enum DevParamCoolingPump {
+  本地远程状态 = 'valveLocalRemoteStatus',
+  有功功率 = 'activePower',
+  频率反馈 = 'CoolingWaterPumpFrequencyFb',
+  运行时间 = 'CoolingWaterPumpRunHours',
+}
+
+/**
+ * 冷水主机设备参数
+ */
+export const enum DevParamChillerUnit {
+  制冷量 = 'chillerUnitCoolingCapacity',
+  有功功率 = 'chillerUnitActivePower',
+  负载率 = 'chillerUnitLoadRate',
+  冷冻水出水温度设定值 = 'chillerUnitWaterTempOutSet',
+  今日耗电量 = 'chillerUnitTodayPowerConsumption',
+  本月耗电量 = 'chillerUnitMonthSPowerConsumption',
+}

src/views/device-work-status/DeviceWorkStatus.vue

@@ -1,3 +1,103 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { useRequest } from '@/hooks/request';
+import { getDevWorkRealTimeData, getDevWorkTypeCount, queryDevicesList } from '@/api';
+
+import { deviceCardData, DeviceType } from './device-card';
+
+import type { DevicesListItem, DeviceTypeCount, PageParams } from '@/types';
+
+const { handleRequest } = useRequest();
+const deviceTypes = ref<DeviceTypeCount[]>([]);
+const activeDeviceType = ref<DeviceType>(DeviceType.空);
+
+onMounted(() => {
+  handleRequest(async () => {
+    deviceTypes.value = await getDevWorkTypeCount(7);
+
+    if (deviceTypes.value.length) {
+      activeDeviceType.value = deviceTypes.value[0].deviceType;
+      getDeviceList();
+    }
+  });
+});
+
+const deviceList = ref<DevicesListItem[]>([]);
+const deviceTotal = ref(0);
+const pageParams = ref<PageParams>({
+  pageIndex: 1,
+  pageSize: 10,
+  pageSorts: [
+    {
+      column: 'id',
+      asc: true,
+    },
+  ],
+});
+
+const getDeviceList = () => {
+  handleRequest(async () => {
+    const { records, total } = await queryDevicesList({
+      ...pageParams.value,
+      deviceType: activeDeviceType.value,
+    });
+
+    const deviceIds = records.map((item) => item.id);
+    const deviceParamCode = deviceCardData[activeDeviceType.value]?.paramCodes || [];
+
+    await getDevWorkRealTimeData(deviceIds, deviceParamCode);
+
+    deviceList.value = records;
+    deviceTotal.value = total;
+  });
+};
+
+const handleTabClick = () => {
+  setTimeout(() => {
+    pageParams.value.pageIndex = 1;
+    getDeviceList();
+  }, 0);
+};
+</script>
+
 <template>
-  <div>设备工况</div>
+  <div>
+    <ATabs class="button-tabs-card" v-model:active-key="activeDeviceType" type="card" @tab-click="handleTabClick">
+      <ATabPane v-for="item in deviceTypes" :key="item.deviceType" :tab="`${item.deviceTypeName}(${item.count})`" />
+    </ATabs>
+    <ARow :gutter="[22, 24]">
+      <ACol v-for="item in deviceList" :key="item.id" :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
+        <div class="device-card-container">
+          <div class="device-card-header">
+            <div class="device-card-header-title">{{ item.deviceName }}</div>
+          </div>
+          <component :is="deviceCardData[activeDeviceType]?.component" />
+        </div>
+      </ACol>
+    </ARow>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.device-card-container {
+  height: 328px;
+  padding: 16px 24px;
+  background-color: #fff;
+  border-radius: 12px;
+}
+
+.device-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.device-card-header-title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 28px;
+  color: var(--antd-color-text);
+}
+</style>

src/views/device-work-status/device-card/ChillerUnit.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DevParamChillerUnit } from '@/constants/device-params';
+</script>
+
+<template>
+  <div>冷水主机设备参数 - {{ DevParamChillerUnit.今日耗电量 }}</div>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->

src/views/device-work-status/device-card/CoolingPump.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DevParamCoolingPump } from '@/constants/device-params';
+</script>
+
+<template>
+  <div>冷却泵 - {{ DevParamCoolingPump.有功功率 }}</div>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->

src/views/device-work-status/device-card/CoolingTower.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DevParamCoolingTower } from '@/constants/device-params';
+</script>
+
+<template>
+  <div>冷却塔 - {{ DevParamCoolingTower.有功功率 }}</div>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->

src/views/device-work-status/device-card/CtrlCabinet.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DevParamCtrlCabinet } from '@/constants/device-params';
+</script>
+
+<template>
+  <div>控制柜 - {{ DevParamCtrlCabinet.冷冻总管回水压力 }}</div>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->

src/views/device-work-status/device-card/index.ts

@@ -0,0 +1,93 @@
+import {
+  DevParamChillerUnit,
+  DevParamCoolingPump,
+  DevParamCoolingTower,
+  DevParamCtrlCabinet,
+} from '@/constants/device-params';
+
+import ChillerUnit from './ChillerUnit.vue';
+import CoolingPump from './CoolingPump.vue';
+import CoolingTower from './CoolingTower.vue';
+import CtrlCabinet from './CtrlCabinet.vue';
+
+import type { Component } from 'vue';
+
+type DeviceCardData = Partial<
+  Record<
+    DeviceType,
+    {
+      component: Component;
+      paramCodes: string[];
+    }
+  >
+>;
+
+export const enum DeviceType {
+  空 = 0,
+  控制柜 = 1,
+  冷水主机 = 2,
+  露点仪 = 3,
+  流量计 = 4,
+  电表 = 5,
+  其他传感器 = 6,
+  阀门 = 7,
+  循环水泵 = 8,
+  冷却塔 = 9,
+  风冷模块机组 = 10,
+  冷却泵 = 11,
+  冷冻泵 = 12,
+  热水泵 = 13,
+  二次冷冻泵 = 14,
+  空调风柜 = 15,
+  EC风机 = 16,
+  其他设备 = 17,
+}
+
+/**
+ * 设备卡片数据对象
+ * - 以设备类型的中文名称作为 key
+ * - 以设备组件和参数编码列表作为 value
+ */
+export const deviceCardData: DeviceCardData = {
+  [DeviceType.控制柜]: {
+    component: CtrlCabinet,
+    paramCodes: [
+      DevParamCtrlCabinet.冷冻总管出水温度,
+      DevParamCtrlCabinet.冷冻总管回水温度,
+      DevParamCtrlCabinet.冷冻总管出水压力,
+      DevParamCtrlCabinet.冷冻总管回水压力,
+      DevParamCtrlCabinet.冷却总管出水温度,
+      DevParamCtrlCabinet.冷却总管回水温度,
+      DevParamCtrlCabinet.系统控制模式设定,
+    ],
+  },
+  [DeviceType.冷却塔]: {
+    component: CoolingTower,
+    paramCodes: [
+      DevParamCoolingTower.本地远程状态,
+      DevParamCoolingTower.有功功率,
+      DevParamCoolingTower.频率反馈,
+      DevParamCoolingTower.运行时间,
+    ],
+  },
+  [DeviceType.冷冻泵]: {
+    component: CoolingPump,
+    paramCodes: [
+      DevParamCoolingPump.本地远程状态,
+      DevParamCoolingPump.有功功率,
+      DevParamCoolingPump.频率反馈,
+      DevParamCoolingPump.运行时间,
+    ],
+  },
+  [DeviceType.冷水主机]: {
+    component: ChillerUnit,
+    paramCodes: [
+      DevParamChillerUnit.制冷量,
+      DevParamChillerUnit.有功功率,
+      DevParamChillerUnit.负载率,
+      DevParamChillerUnit.冷冻水出水温度设定值,
+      DevParamChillerUnit.今日耗电量,
+      DevParamChillerUnit.本月耗电量,
+    ],
+  },
+};