fix: 优化系统的图片显示，加载失败的用图标代替给出文字提示等

src/components/upload/index.vue

@@ -7,7 +7,7 @@
 			</el-icon>
 		</el-upload>
 		<el-dialog v-model="dialogVisible">
-			<img class="preview" :src="dialogImageUrl" alt="Preview Image" />
+			<el-image class="preview" :src="dialogImageUrl" alt="Preview Image" />
 		</el-dialog>
 
 		<!-- 上传单张图片 -->

src/layout/logo/index.vue

@@ -1,10 +1,10 @@
 <template>
 	<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
-		<img :src="sysinfo.systemLogo" class="logo" />
+		<el-image :src="sysinfo.systemLogo" class="logo" />
 		<span>{{ sysinfo.systemName }}</span>
 	</div>
 	<div class="layout-logo-size" v-else @click="onThemeConfigChange">
-		<img :src="sysinfo.systemLogoMini" class="logo-mini" />
+		<el-image :src="sysinfo.systemLogoMini" class="logo-mini" />
 	</div>
 </template>
 

src/layout/navBars/breadcrumb/user.vue

@@ -49,7 +49,13 @@
     </div>
     <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
       <span class="layout-navbars-breadcrumb-user-link">
-        <img :src="getUserInfos.avatar" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+        <el-image :src="getUserInfos.avatar" class="layout-navbars-breadcrumb-user-link-photo mr5" fit="cover">
+          <template #error>
+            <div class="image-slot">
+              <ele-Picture style="width: 16px;" />
+            </div>
+          </template>
+        </el-image>
         {{ getUserInfos.userName === '' ? 'common' : getUserInfos.userName }}
         <el-icon class="el-icon--right">
           <ele-ArrowDown />
@@ -97,8 +103,8 @@ export default defineComponent({
       popoverVisible: false
     });
     // 获取用户信息 vuex
-    
-    const getUserInfos = ref(Local.get('userInfo') || {}) 
+
+    const getUserInfos = ref(Local.get('userInfo') || {})
 
     // 获取布局配置信息
     const getThemeConfig = computed(() => {
@@ -257,47 +263,56 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .layout-navbars-breadcrumb-user {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	&-link {
-		height: 100%;
-		display: flex;
-		align-items: center;
-		white-space: nowrap;
-		&-photo {
-			width: 25px;
-			height: 25px;
-			border-radius: 100%;
-		}
-	}
-	&-icon {
-		padding: 0 10px;
-		cursor: pointer;
-		color: var(--next-bg-topBarColor);
-		height: 50px;
-		line-height: 50px;
-		display: flex;
-		align-items: center;
-		&:hover {
-			background: var(--next-color-user-hover);
-			i {
-				display: inline-block;
-				animation: logoAnimation 0.3s ease-in-out;
-			}
-		}
-	}
-	::v-deep(.el-dropdown) {
-		color: var(--next-bg-topBarColor);
-	}
-	::v-deep(.el-badge) {
-		height: 40px;
-		line-height: 40px;
-		display: flex;
-		align-items: center;
-	}
-	::v-deep(.el-badge__content.is-fixed) {
-		top: 12px;
-	}
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  &-link {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    &-photo {
+      width: 25px;
+      height: 25px;
+      border-radius: 100%;
+    }
+  }
+
+  &-icon {
+    padding: 0 10px;
+    cursor: pointer;
+    color: var(--next-bg-topBarColor);
+    height: 50px;
+    line-height: 50px;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background: var(--next-color-user-hover);
+
+      i {
+        display: inline-block;
+        animation: logoAnimation 0.3s ease-in-out;
+      }
+    }
+  }
+
+  ::v-deep(.el-dropdown) {
+    color: var(--next-bg-topBarColor);
+  }
+
+  ::v-deep(.el-badge) {
+    height: 40px;
+    line-height: 40px;
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep(.el-badge__content.is-fixed) {
+    top: 12px;
+  }
 }
+
 </style>

src/theme/element.scss

@@ -22,6 +22,19 @@
 	margin-right: 5px;
 }
 
+.image-slot {
+  display: flex;
+	flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+	gap:2px
+}
+
 .el-button.el-button--text.el-button--small{
 	padding: 0;
 }

src/views/iot/device-tree/tree/component/edit.vue

@@ -11,7 +11,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
 						<el-form-item label="名称" prop="name">
-							<el-input v-model="ruleForm.name" placeholder="请输入名称" clearable></el-input>
+							<el-input v-model.trim="ruleForm.name" placeholder="请输入名称" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">

src/views/iot/device-tree/tree/index.vue

@@ -80,7 +80,7 @@
                     <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.endDate }}</td>
                     <th class="ant-descriptions-item-label ant-descriptions-item-colon">图片</th>
                     <td class="ant-descriptions-item-content" colspan="1">
-                      <img :src="treeDetail.image" v-if="treeDetail.image">
+                      <el-image :src="treeDetail.image" v-if="treeDetail.image" />
                     </td>
                   </tr>
                   <tr class="ant-descriptions-row">

src/views/iot/device/instance/detail.vue

@@ -364,10 +364,10 @@
         <el-tab-pane label="设备扩展属性信息" name="7">
           <el-form size="default" label-width="110px">
             <el-form-item label="设备图片">
-              <img class="mr20" style="border: 1px solid #e5e5e5;border-radius: 8px;width: 100px;height: 100px;object-fit: contain;" :src="item" v-for="(item, index) in phone" :key="index" />
+              <el-image class="mr20" style="border: 1px solid #e5e5e5;border-radius: 8px;width: 100px;height: 100px;object-fit: contain;" :src="item" v-for="(item, index) in phone" :key="index" />
             </el-form-item>
             <el-form-item label="证书图片">
-              <img class="mr20" style="border: 1px solid #e5e5e5;border-radius: 8px;width: 100px;height: 100px;object-fit: contain;" :src="item" v-for="(item, index) in certificate" :key="index" />
+              <el-image class="mr20" style="border: 1px solid #e5e5e5;border-radius: 8px;width: 100px;height: 100px;object-fit: contain;" :src="item" v-for="(item, index) in certificate" :key="index" />
             </el-form-item>
             <el-form-item label="设备说明">
               <el-input disabled v-model="intro" type="textarea" placeholder="请输入设备说明"></el-input>

src/views/iot/device/product/detail.vue

@@ -15,8 +15,7 @@
 				<el-tab-pane label="产品信息" name="1">
 					<div class="pro-box">
 						<div class="protitle">产品信息</div>
-						<el-button type="" :icon="Edit" class="buttonedit" v-auth="'edit'"
-							@click="onOpenEditDic(detail)">编辑</el-button>
+						<el-button type="" :icon="Edit" class="buttonedit" v-auth="'edit'" @click="onOpenEditDic(detail)">编辑</el-button>
 					</div>
 
 					<div class="ant-descriptions-view">
@@ -31,10 +30,19 @@
 									<td class="ant-descriptions-item-content" colspan="1">{{ detail.deptName }}</td> -->
 									<th class="ant-descriptions-item-label ant-descriptions-item-colon">设备类型</th>
 									<td class="ant-descriptions-item-content" colspan="1">{{ detail.deviceType }}</td>
-								</tr> 
+								</tr>
 								<tr class="ant-descriptions-row">
 									<th class="ant-descriptions-item-label ant-descriptions-item-colon">产品图片</th>
-									<td class="ant-descriptions-item-content" colspan="1"><img :src="detail.icon" style="height: 80px;width: 80px;"></td>
+									<td class="ant-descriptions-item-content" colspan="1">
+										<el-image style="width: 80px; height: 80px" :src="detail.icon" :previewSrcList="[detail.icon]" fit="contain">
+											<template #error>
+												<div class="image-slot">
+													<ele-Picture style="width: 30px;" />
+													加载失败
+												</div>
+											</template>
+										</el-image>
+									</td>
 									<th class="ant-descriptions-item-label ant-descriptions-item-colon">消息协议</th>
 									<td class="ant-descriptions-item-content" colspan="1">{{ detail.messageProtocol }}</td>
 									<th class="ant-descriptions-item-label ant-descriptions-item-colon">接入方式</th>
@@ -48,7 +56,7 @@
 								</tr>
 							</tbody>
 						</table>
-					</div> 
+					</div>
 				</el-tab-pane>
 				<el-tab-pane label="物模型" name="2">
 					<div class="wu-box">
@@ -87,10 +95,8 @@
 									<el-table-column label="说明" prop="desc" :show-overflow-tooltip="true" />
 									<el-table-column label="操作" width="300" align="center" fixed="right">
 										<template #default="scope">
-											<el-button size="small" text type="warning" v-auth="'edit'"
-												@click="onEditAttr(scope.row)">修改</el-button>
-											<el-button size="small" text type="danger" v-auth="'del'"
-												@click="onRowDel(scope.row.key, 'attr')">删除</el-button>
+											<el-button size="small" text type="warning" v-auth="'edit'" @click="onEditAttr(scope.row)">修改</el-button>
+											<el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'attr')">删除</el-button>
 										</template>
 									</el-table-column>
 								</el-table>
@@ -109,10 +115,8 @@
 									<el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
 									<el-table-column label="操作" width="300" align="center" fixed="right">
 										<template #default="scope">
-											<el-button size="small" text type="warning" v-auth="'edit'"
-												@click="onEditFun(scope.row)">修改</el-button>
-											<el-button size="small" text type="danger" v-auth="'del'"
-												@click="onRowDel(scope.row.key, 'fun')">删除</el-button>
+											<el-button size="small" text type="warning" v-auth="'edit'" @click="onEditFun(scope.row)">修改</el-button>
+											<el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'fun')">删除</el-button>
 										</template>
 									</el-table-column>
 								</el-table>
@@ -138,10 +142,8 @@
 
 									<el-table-column label="操作" width="300" align="center" fixed="right">
 										<template #default="scope">
-											<el-button size="small" text type="warning" v-auth="'edit'"
-												@click="onEditEvent(scope.row)">修改</el-button>
-											<el-button size="small" text type="danger" v-auth="'del'"
-												@click="onRowDel(scope.row.key, 'event')">删除</el-button>
+											<el-button size="small" text type="warning" v-auth="'edit'" @click="onEditEvent(scope.row)">修改</el-button>
+											<el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'event')">删除</el-button>
 										</template>
 									</el-table-column>
 								</el-table>
@@ -170,23 +172,16 @@
 									<el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
 									<el-table-column label="操作" width="300" align="center" fixed="right">
 										<template #default="scope">
-											<el-button size="small" text type="warning" v-auth="'edit'"
-												@click="onEditTag(scope.row)">修改</el-button>
-											<el-button size="small" text type="danger" v-auth="'del'"
-												@click="onRowDel(scope.row.key, 'tab')">删除</el-button>
+											<el-button size="small" text type="warning" v-auth="'edit'" @click="onEditTag(scope.row)">修改</el-button>
+											<el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'tab')">删除</el-button>
 										</template>
 									</el-table-column>
 								</el-table>
 							</el-tab-pane>
-
-
-
-
 						</el-tabs>
 						<div class="import">
 							<div class="row_bet">
-								<el-upload accept="json" :show-file-list="false" :limit="1" :data="{ key: detail.key }"
-									:headers="headers" :action="uploadUrl" :on-success="updateImg">
+								<el-upload accept="json" :show-file-list="false" :limit="1" :data="{ key: detail.key }" :headers="headers" :action="uploadUrl" :on-success="updateImg">
 									<el-button>
 										<el-icon> <ele-Upload /> </el-icon>
 										导入物模型
@@ -202,9 +197,7 @@
 
 						</div>
 
-						<pagination v-show="tableData.total > 0" :total="tableData.total"
-							v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize"
-							@pagination="getList()" />
+						<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="getList()" />
 					</div>
 				</el-tab-pane>
 				<el-tab-pane label="设备接入" name="3">
@@ -225,7 +218,7 @@
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
-import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
+import { Edit } from '@element-plus/icons-vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import downloadFile from '/@/utils/download';
 import getOrigin from '/@/utils/origin';
@@ -712,6 +705,7 @@ tr {
 
 .wu-box .wu-title .title {
 	font-size: 18px;
-}</style>
+}
+</style>
 
 

src/views/iot/device/template/component/importFile.vue

@@ -4,7 +4,7 @@
 		<p class="tips">说明：请上传文件，支持格式.XLS|.XLSX</p>
 		<input type="file" ref="upload" style="display: none" accept=".xls,.xlsx" class="outputlist_upload" />
 		<div class="file-box" @click="handleUpload">
-			<img :src="equiUploadImg" />
+			<el-image :src="equiUploadImg" />
 			<span>上传文件</span>
 		</div>
 		<div v-if="fileName" class="file-content">

src/views/login/component/account.vue

@@ -35,7 +35,7 @@
 			<el-col :span="1"></el-col>
 			<el-col :span="8">
 				<div class="login-content-code">
-					<img class="login-content-code-img" @click="getCaptcha" width="130" height="38" :src="captchaSrc" style="cursor: pointer" />
+					<el-image class="login-content-code-img" @click="getCaptcha" width="130" height="38" :src="captchaSrc" style="cursor: pointer" />
 				</div>
 			</el-col>
 		</el-form-item>

src/views/login/index.vue

@@ -12,17 +12,15 @@
 		></el-switch>
 		<div class="part left">
 			<div class="flex logo">
-				<img v-if="sysinfo.systemLogo" class="logoimg" :src="sysinfo.systemLogo" />
-				<img v-else class="logoimg" src="/imgs/logo.png" />
+				<el-image v-if="sysinfo.systemLogo" class="logoimg" :src="sysinfo.systemLogo" />
+				<el-image v-else class="logoimg" src="/imgs/logo.png" />
 				{{ sysinfo.systemName }}</div>
-			<img class="img" v-if="sysinfo.systemLoginPIC" :src="sysinfo.systemLoginPIC" />
-			<img class="img" v-else src="/imgs/login-box-bg.svg" />
+			<el-image class="img" v-if="sysinfo.systemLoginPIC" :src="sysinfo.systemLoginPIC" />
+			<el-image class="img" v-else src="/imgs/login-box-bg.svg" />
 			<span class="text" v-if="sysinfo.buildTime">{{ sysinfo.buildVersion }} </span>
 			<span class="text" v-if="sysinfo.buildTime">{{ dayjs(sysinfo.buildTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
 		</div>
 		<div class="part">
-			<!-- <img :src="logoMini" />
-							<div class="login-icongroup-title-text font25">{{ getThemeConfig.globalViceTitle }}</div> -->
 			<div class="title">登录</div>
 			<Account />
 		</div>

src/views/personal/index.vue

@@ -6,9 +6,9 @@
 				<el-card shadow="hover" header="个人信息" v-loading="!info.userName">
 					<div class="personal-user">
 						<div class="personal-user-left">
-							<img v-if="isEditStatus && info.avatar" style="width: 140px; height: 140px" :src="info.avatar" />
+							<el-image v-if="isEditStatus && info.avatar" style="width: 140px; height: 140px" :src="info.avatar" />
 							<uploadVue v-else @set-img="setImg">
-								<img style="width: 140px; height: 140px" :src="info.avatar" />
+								<el-image style="width: 140px; height: 140px" :src="info.avatar" />
 								<div class="tips">点击上方照片，即可更改头像</div>
 							</uploadVue>
 						</div>

src/views/system/basicConfig/index.vue

@@ -14,7 +14,7 @@
 							<el-col :span="12">
 								<el-form-item label="系统LOGO" prop="keyWord">
 									<uploadVue accept=".jpg,.png,.jpeg,.gif,.svg" :name="'logo'" @set-img="setImg">
-										<img style="width: 100%;" :src="state.info.logo" />
+										<el-image style="width: 100%;" :src="state.info.logo" />
 										<!-- <div class="tips">点击上方照片，即可更改头像</div> -->
 									</uploadVue>
 								</el-form-item>
@@ -23,7 +23,7 @@
 							<el-col :span="12">
 								<el-form-item label="系统LOGO（小图标）" prop="keyWord">
 									<uploadVue accept=".jpg,.png,.jpeg,.gif,.svg" :name="'mini'" @set-img="setImg">
-										<img style="width: 100%;" :src="state.info.mini" />
+										<el-image style="width: 100%;" :src="state.info.mini" />
 										<!-- <div class="tips">点击上方照片，即可更改头像</div> -->
 									</uploadVue>
 								</el-form-item>
@@ -36,7 +36,7 @@
 					<div class="right-wrap">
 						<el-form-item label="登录展示图" prop="keyWord">
 							<uploadVue accept=".jpg,.png,.jpeg,.gif,.svg" :name="'pic'" @set-img="setImg">
-								<img style="width: 100%;" :src="state.info.pic" />
+								<el-image style="width: 100%;" :src="state.info.pic" fit="contain" />
 							</uploadVue>
 						</el-form-item>
 					</div>