Prechádzať zdrojové kódy

perf(views): 优化设备工况页面

1. 无数据时显示暂无数据
2. 获取数据时显示 loading
wangcong 1 týždeň pred
rodič
commit
b0ab460afb

+ 6 - 0
src/views/device-work-status/DeviceWorkStatus.vue

@@ -248,6 +248,7 @@ const handleDevCardClick = (devId: number, e: Event) => {
       </ATabs>
     </div>
     <div ref="deviceListEl" class="device-card-list">
+      <AEmpty class="device-card-empty" v-show="!deviceList.length" />
       <ARow :gutter="[22, 24]">
         <ACol v-for="item in deviceList" :key="item.id" :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="8">
           <div class="device-card-container" @click="handleDevCardClick(item.id, $event)">
@@ -294,6 +295,7 @@ const handleDevCardClick = (devId: number, e: Event) => {
           </div>
         </ACol>
       </ARow>
+      <ASpin v-if="isLoading" class="center-loading" :spinning="true" />
     </div>
     <DeviceWorkParams ref="deviceWorkParams" :dev-id="currentDevId" @view-history-data="viewHistoryData" />
     <DevWorkParamData ref="devWorkParamData" :dev-id="currentDevId" :param-codes="currentDevParamCodes" />
@@ -342,6 +344,10 @@ const handleDevCardClick = (devId: number, e: Event) => {
   overflow: hidden auto;
 }
 
+.device-card-empty {
+  margin-top: 200px;
+}
+
 .device-card-container {
   position: relative;
   height: 328px;