水放大屏 添加单位

机械分厂设备大屏 提醒添加无数据状态

src/views/Mechanics/components/devStatusTip.vue

@@ -11,10 +11,12 @@
   <div style="height: 100%; width: 100%">
     <h2 class="components-header">{{ title }}</h2>
     <div class="components-content" :key="keynum">
-      <swiper-container :slidesPerView="props.per_view" :loop="true" :initialSlide="0"  :spaceBetween="0" direction="vertical" :autoplay="{
+      <swiper-container :slidesPerView="props.per_view" :loop="true" :initialSlide="0" :spaceBetween="0"
+        direction="vertical" :autoplay="{
           delay: 3000,
           disableOnInteraction: false,
-      }" autoHeight=true observer=true observeParents=true @progress="onProgress" :loopAdditionalSlides="1" @slidechange="onSlideChange">
+        }" autoHeight=true observer=true observeParents=true @progress="onProgress" :loopAdditionalSlides="1"
+        @slidechange="onSlideChange" v-if="props.tipList.length > 0">
         <swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
           <div class="itemclass">
             <el-row :gutter="5" class="row-flex">
@@ -29,7 +31,8 @@
                   <span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
                 </p>
               </el-col>
-              <el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;" :style="{color:compare[res.status]?compare[res.status]:'red'}"> {{res.status}} </el-col>
+              <el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;"
+                :style="{ color: compare[res.status] ? compare[res.status] : 'red' }"> {{ res.status }} </el-col>
             </el-row>
           </div>
         </swiper-slide>
@@ -48,14 +51,19 @@
                     <span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
                   </p>
                 </el-col>
-              <el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;" :style="{color:compare[res.status]?compare[res.status]:'red'}"> {{res.status}} </el-col>
+                <el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;"
+                  :style="{ color: compare[res.status] ? compare[res.status] : 'red' }"> {{ res.status }} </el-col>
               </el-row>
             </div>
           </swiper-slide>
         </template>
       </swiper-container>
+      <div v-else style="display: flex; align-items: center;width: 100%;height: 100%;justify-content: center;">
+        <el-empty :image-size="120" />
       </div>
     </div>
+
+  </div>
 </template>
   
 <script setup lang="ts">
@@ -144,6 +152,5 @@ swiper-container {
   width: 100%;
   height: 100%;
   display: inline-block !important;
-}
+}</style>
-</style>
   

src/views/Waterhouse/index.vue

@@ -88,9 +88,9 @@ document.title = t('messages.南门水房物联监测系统')
 const colors = ['#5470C6', '#91CC75', '#EE6666'];
 //进水量 出水量 用电量 最大值 最小值 平均值
 let mathList = reactive([
-    { color: '#5470C6', name: '进水量', max: 100, min: 0, avg: 50 },
+    { color: '#5470C6', name: '进水量（m³）', max: 100, min: 0, avg: 50 },
-    { color: '#91CC75', name: '出水量', max: 100, min: 0, avg: 50 },
+    { color: '#91CC75', name: '出水量（m³）', max: 100, min: 0, avg: 50 },
-    { color: '#EE6666', name: '用电量', max: 100, min: 0, avg: 50 }
+    { color: '#EE6666', name: '用电量（kW·h）', max: 100, min: 0, avg: 50 }
 ])
 
 function initChart(date,inChart, outChart, currentChart) {
@@ -123,11 +123,11 @@ function initChart(date,inChart, outChart, currentChart) {
         yAxis: [
             {
                 type: 'value',
-                name: '水量',
+                name: '水量（m³）',
             },
             {
                 type: 'value',
-                name: '电量',
+                name: '电量（kW·h）',
                 position: 'right',
                 axisLine: {
                     show: true,