perf(views): 优化“设备工况”模块参数组件

1. 支持根据当前设备 id 查询数据
2. 无数据时显示暂无数据

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

@@ -8,6 +8,12 @@ import { getDeviceParams } from '@/api';
 
 import type { DeviceParamGroup, DeviceParamItem, OptionItem } from '@/types';
 
+interface Props {
+  devId: number;
+}
+
+const props = defineProps<Props>();
+
 const { visible, showView, hideView } = useViewVisible();
 const { isLoading, handleRequest } = useRequest();
 const allParamGroups = ref<DeviceParamGroup[]>([]);
@@ -38,7 +44,7 @@ watch(visible, () => {
 
 const getAllParamGroups = () => {
   handleRequest(async () => {
-    const data = await getDeviceParams(51, false);
+    const data = await getDeviceParams(props.devId, false);
     allParamGroups.value = data;
 
     if (data.length) {
@@ -72,6 +78,7 @@ defineExpose({
     :footer="null"
     :after-close="handleClose"
   >
+    <AEmpty v-show="!groupList.length" />
     <ASpin class="center-loading" :spinning="isLoading" />
     <ATabs class="hide-tabs-border" v-model:active-key="activeGroup">
       <ATabPane v-for="item in groupList" :key="item.value" :tab="item.label" />
@@ -115,6 +122,10 @@ defineExpose({
     flex-direction: column;
     height: calc(100% - 32px);
   }
+
+  .ant-empty {
+    margin-top: 150px;
+  }
 }
 </style>
 

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

@@ -106,7 +106,10 @@ const handleTabClick = () => {
 
 const deviceWorkParamsRef = useTemplateRef('deviceWorkParams');
 
-const viewDevParam = () => {
+const currentDevId = ref<number>(0);
+
+const viewDevParam = (id: number) => {
+  currentDevId.value = id;
   deviceWorkParamsRef.value?.showView();
 };
 </script>
@@ -155,13 +158,13 @@ const viewDevParam = () => {
               <div class="device-cop-level">中</div>
             </template>
             <span class="device-card-header-time">{{ deviceRealTimeData[item.id]?.time }}</span>
-            <SvgIcon class="device-card-header-button" name="adjustment" @click="viewDevParam" />
+            <SvgIcon class="device-card-header-button" name="adjustment" @click="viewDevParam(item.id)" />
           </div>
           <component :is="deviceCardData[activeDeviceType]?.component" :real-time-data="deviceRealTimeData[item.id]" />
         </div>
       </ACol>
     </ARow>
-    <DeviceWorkParams ref="deviceWorkParams" />
+    <DeviceWorkParams ref="deviceWorkParams" :dev-id="currentDevId" />
   </div>
 </template>