feat: device params config modal

src/components/station-card.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { NCard, NStatistic, NTag, NGrid, NGi, NButton, NIcon, useThemeVars } from 'naive-ui';
+import { NCard, NStatistic, NTag, NGrid, NGi, NButton, NIcon, useThemeVars, NSpace } from 'naive-ui';
 import { Video as VideoIcon } from '@vicons/carbon';
+import { ControlOutlined } from '@vicons/antd';
 import { toRefs, computed, ref } from 'vue';
 import axios from 'axios';
 import { DeviceType } from '@/enums/device-type';
@@ -9,6 +10,7 @@ import type { StationDevices } from '@/composables/query/use-line-devices-query'
 import type { StationAlarms } from '@/composables/query/use-line-alarms-query';
 import OfflineDeviceDetailModal from './offline-device-detail-modal.vue';
 import DeviceAlarmDetailModal from './device-alarm-detail-modal.vue';
+import DeviceParamsConfigModal from './device-params-config-modal.vue';
 
 interface Props {
   station: Station;
@@ -33,23 +35,34 @@ const offlineDeviceCount = computed(() => {
 const devicAlarmCount = computed(() => {
   let count = 0;
   Object.values(DeviceType).forEach((deviceType) => {
-    count += stationAlarms.value[deviceType].occurred.length;
+    count += stationAlarms.value[deviceType].length;
   });
   return count;
 });
 
+// 打开对话框
 const offlineDeviceTreeModalShow = ref(false);
 const deviceAlarmTreeModalShow = ref(false);
-
-// 打开对话框
+const deviceParamsConfigModalShow = ref(false);
 const openOfflineDeviceTreeModal = () => {
   if (online.value) {
     offlineDeviceTreeModalShow.value = true;
+  } else {
+    window.$message.error('当前车站离线，无法查看');
   }
 };
 const openDeviceAlarmTreeModal = () => {
   if (online.value) {
     deviceAlarmTreeModalShow.value = true;
+  } else {
+    window.$message.error('当前车站离线，无法查看');
+  }
+};
+const openDeviceConfigModal = () => {
+  if (online.value) {
+    deviceParamsConfigModalShow.value = true;
+  } else {
+    window.$message.error('当前车站离线，无法查看');
   }
 };
 
@@ -84,11 +97,18 @@ const theme = useThemeVars();
       </NTag>
     </template>
     <template #default>
-      <NButton text @click="openVideoPlatform">
-        <NIcon>
-          <VideoIcon />
-        </NIcon>
-      </NButton>
+      <NSpace>
+        <NButton text @click="openVideoPlatform">
+          <NIcon>
+            <VideoIcon />
+          </NIcon>
+        </NButton>
+        <NButton text @click="openDeviceConfigModal">
+          <NIcon>
+            <ControlOutlined />
+          </NIcon>
+        </NButton>
+      </NSpace>
       <NGrid :cols="2" :style="{ opacity: online ? '1' : '0.3' }">
         <NGi>
           <NStatistic tabular-nums>
@@ -122,7 +142,10 @@ const theme = useThemeVars();
 
   <!-- 离线设备详情对话框 -->
   <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="station" :station-devices="stationDevices" />
+  <!-- 设备告警详情对话框 -->
   <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="station" :station-alarms="stationAlarms" />
+  <!-- 设备配置面板对话框 -->
+  <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="station" />
 </template>
 
 <style scoped lang="scss">