feat(views): 添加“实时监测”页面的设备配置对话框

src/i18n/locales/zh.json

@@ -100,6 +100,7 @@
     "all": "所有",
     "andCloseModal": "并关闭对话框？",
     "basicInfo": "基础信息",
+    "batchExecution": "批量操作",
     "batchSetting": "批量设置",
     "binding": "绑定",
     "cancel": "取消",
@@ -129,6 +130,7 @@
     "fault": "故障",
     "finishSetup": "完成配置",
     "group": "组",
+    "hour": "时",
     "item": "项",
     "keep": "保持",
     "keepNo": "不保持",
@@ -199,6 +201,7 @@
     "use": "使用",
     "verification": "验证",
     "viewDoc": "查看文档",
+    "viewMore": "查看更多",
     "warning": "警告",
     "year": "年",
     "yes": "是"
@@ -517,10 +520,14 @@
   },
   "organizationManage": {},
   "realTimeMonitor": {
+    "activePower": "有功功率",
     "addSubtractLoadParameters": "加减载参数",
     "addTimePeriod": "新增时间段",
     "aiOptimization": "AI智能寻优",
     "aiStartStop": "AI智能启停",
+    "autoManual": "自动/手动",
+    "chilledWaterOutletSetValue": "冷冻水出水温度设定值（℃）",
+    "chilledWaterOutletTemperature": "冷冻水出水温度",
     "confirmSwitchToMode": "确定切换至{mode}",
     "devParams": {
       "addMachineDelay1": "加机延时1(min)",
@@ -578,6 +585,7 @@
     },
     "deviceName": "设备名称",
     "deviceStatus": "设备状态",
+    "enableDisable": "启用/禁用",
     "fullAutoConfirmTip": "系统一键投入，全程自动加减载",
     "fullAutoMode": "全自动模式",
     "fullPowerOff": "整体关机",
@@ -586,11 +594,19 @@
     "isEnabled": "是否启用",
     "isInAlgorithm": "是否加入算法",
     "jogMode": "点动模式",
+    "loadRate": "负载率",
+    "loadRateLimitSetValue": "负载率限制设定值（%）",
+    "localRemoteStatus": "本地远程状态",
     "optimizationAlgorithm": "寻优算法",
     "otherParameters": "其他参数",
     "outletTemperature": "出水温度",
+    "runningTime": "运行时间",
     "setValue": "设定值",
     "settingParticipatingDevices": "请设置参与算法的设备",
+    "startStopControl": "启停控制",
+    "startStopControlTipAuto": "当前设备处于自动模式，请将设备调整为手动模式后再尝试",
+    "startStopControlTipDisable": "当前设备被禁用，请将其调整为启用状态后再尝试",
+    "startStopControlTipLocal": "当前设备处于本地模式，请将设备调整为远程模式后再尝试",
     "switchMode": "切换模式",
     "timeSegment": "时间段",
     "towerOutWaterTempLowerLimit": "塔出水温度寻优下限",

src/views/real-time-monitor/DeviceCtrlModal.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import SvgIcon from '@/components/SvgIcon.vue';
+import { useViewVisible } from '@/hooks/view-visible';
+import { t } from '@/i18n';
+
+import type { DeviceType } from '../device-work-status/device-card';
+
+interface Props {
+  title?: string;
+  deviceType?: DeviceType;
+}
+
+defineProps<Props>();
+
+const { visible, showView, hideView } = useViewVisible();
+
+const disableStartStopCtrl = computed(() => {
+  return true;
+});
+
+const startStopTip = computed(() => {
+  const tips: string[] = [];
+
+  tips.push(
+    t('realTimeMonitor.startStopControlTipLocal'),
+    t('realTimeMonitor.startStopControlTipAuto'),
+    t('realTimeMonitor.startStopControlTipDisable'),
+  );
+
+  let tipText = '';
+
+  tips.forEach((item, index) => {
+    tipText += `${index + 1}. ${item};\n`;
+  });
+
+  return tipText;
+});
+
+defineExpose({
+  showView,
+  hideView,
+});
+</script>
+
+<template>
+  <AModal
+    v-model:open="visible"
+    wrap-class-name="hvac-modal"
+    :closable="false"
+    :centered="true"
+    :width="460"
+    :footer="null"
+  >
+    <template #title>
+      <div class="dev-ctrl-modal-header">
+        <span>{{ '三期-1#冷水主机' }}</span>
+        <span class="dev-ctrl-modal-operate">
+          {{ $t('common.viewMore') }}
+          <SvgIcon name="right" />
+        </span>
+      </div>
+    </template>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.chilledWaterOutletTemperature') }}</span>
+      <span>{{ '11.6' }}℃</span>
+    </div>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.loadRate') }}</span>
+      <span>{{ '70.3' }}%</span>
+    </div>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.activePower') }}</span>
+      <span>{{ '102' }}kw</span>
+    </div>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.localRemoteStatus') }}</span>
+      <span>{{ '远程' }}</span>
+    </div>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.activePower') }}</span>
+      <span>{{ '10.99' }}kw</span>
+    </div>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.runningTime') }}</span>
+      <span>{{ '100009.92' }}{{ $t('common.hour') }}</span>
+    </div>
+    <div class="dev-ctrl-modal-separator"></div>
+    <div class="dev-ctrl-modal-item">
+      <span></span>
+      <span class="dev-ctrl-modal-operate">
+        {{ $t('common.batchExecution') }}
+        <SvgIcon name="right" />
+      </span>
+    </div>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.enableDisable') }}</span>
+      <ASwitch />
+    </div>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.autoManual') }}</span>
+      <ASwitch />
+    </div>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.startStopControl') }}</span>
+      <span class="dev-ctrl-modal-start-stop-right">
+        <ATooltip overlay-class-name="hvac-tooltip">
+          <template #title>{{ startStopTip }}</template>
+          <SvgIcon v-show="disableStartStopCtrl" name="info-cirlce-o" />
+        </ATooltip>
+        <ASwitch :disabled="disableStartStopCtrl" />
+      </span>
+    </div>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.chilledWaterOutletSetValue') }}</span>
+      <AInputNumber class="dev-ctrl-chiller-input" :controls="false" />
+    </div>
+    <div class="dev-ctrl-modal-item">
+      <span>{{ $t('realTimeMonitor.loadRateLimitSetValue') }}</span>
+      <AInputNumber class="dev-ctrl-chiller-input" :controls="false" />
+    </div>
+  </AModal>
+</template>
+
+<style lang="scss" scoped>
+.dev-ctrl-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dev-ctrl-modal-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 24px;
+
+  > span {
+    &:first-child {
+      color: var(--antd-color-text-secondary);
+    }
+
+    &:last-child {
+      color: var(--antd-color-text);
+    }
+  }
+
+  > span.dev-ctrl-modal-operate {
+    color: var(--antd-color-primary);
+  }
+
+  & + & {
+    margin-top: 16px;
+  }
+}
+
+.dev-ctrl-modal-separator {
+  margin-block: 16px;
+  border: 1px solid #e4e7ed;
+}
+
+.dev-ctrl-modal-operate {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--antd-color-primary);
+  cursor: pointer;
+
+  i {
+    margin-left: 8px;
+    font-size: 12px;
+  }
+}
+
+.dev-ctrl-modal-start-stop-right {
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 8px;
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+.dev-ctrl-chiller-input {
+  width: 120px;
+}
+</style>

src/views/real-time-monitor/RealTimeMonitor.vue

@@ -2,13 +2,17 @@
 import { useTemplateRef } from 'vue';
 
 import DeviceControl from './device-control/DeviceControl.vue';
+import DeviceCtrlModal from './DeviceCtrlModal.vue';
 
 const deviceControlRef = useTemplateRef('deviceControl');
+const deviceCtrlModalRef = useTemplateRef('deviceCtrlModal');
 </script>
 
 <template>
   <div class="real-time-monitor-container" @click="deviceControlRef?.closeCtrlPanel">
+    <AButton @click="deviceCtrlModalRef?.showView">Dev Modal</AButton>
     <DeviceControl ref="deviceControl" />
+    <DeviceCtrlModal ref="deviceCtrlModal" />
   </div>
 </template>