|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
* @Author: your name
|
|
|
* @Date: 2024-05-27 09:25:45
|
|
|
- * @LastEditTime: 2024-06-17 16:31:33
|
|
|
+ * @LastEditTime: 2024-06-24 11:11:34
|
|
|
* @LastEditors: bogon
|
|
|
* @Description: In User Settings Edit
|
|
|
* @FilePath: /performance-test/src/views/performance/assetssDetail.vue
|
|
@@ -92,34 +92,40 @@
|
|
|
v-for="(file, index) in generalFiles"
|
|
|
:key="index"
|
|
|
:span="getSpan(index, 'generalFiles')"
|
|
|
+ v-loading="loadings[index] && getFileType(file.fileAddr) === 'html'"
|
|
|
>
|
|
|
- <!-- <iframe
|
|
|
- v-if="getFileType(file.fileAddr) === 'html'"
|
|
|
- :src="fileAddrFn(file.fileAddr)"
|
|
|
- ref="iframe"
|
|
|
- frameborder="0"
|
|
|
- ></iframe> -->
|
|
|
<iframe
|
|
|
v-if="getFileType(file.fileAddr) === 'html'"
|
|
|
:src="file.fileAddr"
|
|
|
- ref="iframe"
|
|
|
+ :ref="'iframe' + index"
|
|
|
frameborder="0"
|
|
|
+ @load="iframeLoad(index)"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
></iframe>
|
|
|
-
|
|
|
- <!-- <img
|
|
|
- v-if="getFileType(file.fileAddr) === 'html' && !fileCheckResult1"
|
|
|
- src="../../assets//img/loadingError.webp"
|
|
|
- alt=""
|
|
|
- /> -->
|
|
|
<img
|
|
|
v-if="getFileType(file.fileAddr) === 'image'"
|
|
|
+ alt="加载图片"
|
|
|
+ @load="imageLoad(index)"
|
|
|
+ @error="imageError(index)"
|
|
|
v-lazy-load="{
|
|
|
src: file.fileAddr,
|
|
|
- loadingImageSrc: '../../assets/img/loading.gif',
|
|
|
- errorImageSrc: '../../assets/img/loadingError.webp',
|
|
|
+ errorImageSrc: require('../../assets/img/loadingError.webp'),
|
|
|
}"
|
|
|
- alt=""
|
|
|
/>
|
|
|
+ <el-skeleton
|
|
|
+ v-if="loadings[index] && getFileType(file.fileAddr) === 'image'"
|
|
|
+ animated
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ class="gjp"
|
|
|
+ >
|
|
|
+ <template slot="template">
|
|
|
+ <el-skeleton-item
|
|
|
+ variant="image"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-skeleton>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
@@ -134,35 +140,46 @@
|
|
|
v-for="(file, index) in diagramRelations"
|
|
|
:key="index"
|
|
|
:span="getSpan(index, 'diagramRelations')"
|
|
|
+ v-loading="
|
|
|
+ loadings[index + generalFiles.length] &&
|
|
|
+ getFileType(file.fileAddr) === 'html'
|
|
|
+ "
|
|
|
>
|
|
|
- <!-- 文件内容渲染 -->
|
|
|
- <!-- <iframe
|
|
|
- v-if="getFileType(file.fileAddr) === 'html'"
|
|
|
- :src="file.fileAddr"
|
|
|
- ref="iframe"
|
|
|
- frameborder="0"
|
|
|
- ></iframe> -->
|
|
|
<iframe
|
|
|
v-if="getFileType(file.fileAddr) === 'html'"
|
|
|
:src="file.fileAddr"
|
|
|
- ref="iframe"
|
|
|
+ :ref="'iframe' + index + generalFiles.length"
|
|
|
frameborder="0"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ @load="iframeLoad(index + generalFiles.length)"
|
|
|
></iframe>
|
|
|
-
|
|
|
- <!-- <img
|
|
|
- v-if="getFileType(file.fileAddr) === 'html' && !fileCheckResult"
|
|
|
- src="../../assets/img/loadingError.webp"
|
|
|
- alt=""
|
|
|
- /> -->
|
|
|
<img
|
|
|
v-if="getFileType(file.fileAddr) === 'image'"
|
|
|
+ alt="加载图片"
|
|
|
+ @load="imageLoad(index + generalFiles.length)"
|
|
|
+ @error="imageError(index + generalFiles.length)"
|
|
|
v-lazy-load="{
|
|
|
src: file.fileAddr,
|
|
|
- loadingImageSrc: '../../assets/img/loading.gif',
|
|
|
- errorImageSrc: '../../assets/img/loadingError.webp',
|
|
|
+ errorImageSrc: require('../../assets/img/loadingError.webp'),
|
|
|
}"
|
|
|
- alt=""
|
|
|
/>
|
|
|
+ <el-skeleton
|
|
|
+ v-if="
|
|
|
+ loadings[index + generalFiles.length] &&
|
|
|
+ getFileType(file.fileAddr) === 'image'
|
|
|
+ "
|
|
|
+ animated
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ class="gjp"
|
|
|
+ >
|
|
|
+ <template slot="template">
|
|
|
+ <el-skeleton-item
|
|
|
+ variant="image"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-skeleton>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
@@ -190,6 +207,7 @@ import axios from "axios";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ loadings: [],
|
|
|
loading: false,
|
|
|
fileCheckResult: null,
|
|
|
fileCheckResult1: null,
|
|
@@ -210,7 +228,26 @@ export default {
|
|
|
//获取分析 分析类型、机组编号 列表
|
|
|
this.getWindCodeList();
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ // this.initializeLoading();
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ imageLoad(index) {
|
|
|
+ this.$set(this.loadings, index, false);
|
|
|
+ },
|
|
|
+ imageError(index) {
|
|
|
+ this.$set(this.loadings, index, false);
|
|
|
+ },
|
|
|
+ iframeLoad(index) {
|
|
|
+ this.$set(this.loadings, index, false);
|
|
|
+ },
|
|
|
+ initializeLoading() {
|
|
|
+ // 计算总的文件数量,包括分析总图和分析分图
|
|
|
+ const totalFiles =
|
|
|
+ this.generalFiles.length + this.diagramRelations.length;
|
|
|
+ // 初始化 loadings 数组,全部设置为 true,表示加载状态
|
|
|
+ this.loadings = new Array(totalFiles).fill(true);
|
|
|
+ },
|
|
|
async fileAddrFn(file) {
|
|
|
try {
|
|
|
const res = await axios.get(file);
|
|
@@ -261,7 +298,7 @@ export default {
|
|
|
response.data.length > 0 &&
|
|
|
response.data[0].commentDescriptionVos) ||
|
|
|
[];
|
|
|
- console.log(this.generalFiles, " this.generalFiles ");
|
|
|
+ this.initializeLoading();
|
|
|
this.loading = false;
|
|
|
} catch (error) {
|
|
|
console.error(error);
|
|
@@ -354,4 +391,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+::v-deep .gjp .el-skeleton {
|
|
|
+ width: 90% !important;
|
|
|
+ height: 90% !important;
|
|
|
+ margin: 0 auto !important;
|
|
|
+}
|
|
|
</style>
|