From dd95854e88b217c4dab957cb401496e250c5b882 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Wed, 25 Sep 2024 14:52:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8A=A0=E8=BD=BD=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/carouselChart.vue              | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/views/realTimeMonitor/components/carouselChart.vue b/src/views/realTimeMonitor/components/carouselChart.vue
index 5112350..4613995 100644
--- a/src/views/realTimeMonitor/components/carouselChart.vue
+++ b/src/views/realTimeMonitor/components/carouselChart.vue
@@ -22,12 +22,16 @@
         class="bigPic"
         v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
       >
-        <el-image :src="currentPicPath"></el-image>
+        <el-image :src="currentPicPath">
+          <div slot="placeholder" class="image-slot">
+            加载中<span class="dot">...</span>
+          </div>
+        </el-image>
       </div>
       <div class="bigPic" v-else-if="currentPicPath && mediaType == 0">
         <!-- :preview-src-list="srcList"  @click="handleBigPicbox(currentPicPath)" -->
         <el-image
-          :src="currentPicPath + '!1366x768'"
+          :src="currentPicPath"
           @load="loadImage"
           @error="setDefaultImage"
           ref="picJpg"
@@ -36,6 +40,15 @@
           height="100%"
           :preview-src-list="srcList"
         >
+          <div
+            slot="placeholder"
+            class="image-slot"
+            :style="{
+              backgroundImage: 'url(' + currentPicPath + '!160x60' + ')',
+            }"
+          >
+            <i class="el-icon-loading"></i>
+          </div>
           <template slot="error">
             <img src="../../../assets/img/nodatapic2.jpg" />
           </template>
@@ -733,9 +746,17 @@ export default {
       .el-image {
         width: 100%;
         height: 100%;
-        .el-image__placeholder {
-          background: url(../../../assets/img/nopicbg.png) no-repeat center;
+
+        .image-slot {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
           background-size: 100% 100%;
+          i {
+            font-size: 40px;
+            color: #128071;
+          }
         }
         img {
           width: 100%;