首页修改

src/components/map/index.vue

@@ -2,49 +2,97 @@
   <div class="map-container">
     <div id="map" class="map"></div>
     <div v-if="hoverInfo" :style="hoverStyle" class="hover-info">
-      <h3>{{hoverInfo.fieldName}}</h3>
+      <h3>{{ hoverInfo.fieldName }}</h3>
       <div>
-        <p><span>风场编号</span><span>{{hoverInfo.codeNumber}}</span></p>
-        <p><span>空气密度</span><span>{{hoverInfo.density}}</span></p>
-        <p><span>总额定容量</span><span>{{hoverInfo.ratedCapacityNumber}}</span></p>
-        <p><span>经度</span><span>{{hoverInfo.longitude}}</span></p>
-        <p><span>纬度</span><span>{{hoverInfo.latitude}}</span></p>
-        <p><span>海拔高度</span><span>{{hoverInfo.elevationHeight}}</span></p>
-        <p><span>最新分析时间</span><span> {{ $formatDate(hoverInfo.wfbrCreateTime) }}</span></p>
+        <p>
+          <span>风场编号</span><span>{{ hoverInfo.codeNumber }}</span>
+        </p>
+        <p>
+          <span>空气密度</span><span>{{ hoverInfo.density }}</span>
+        </p>
+        <p>
+          <span>总额定容量</span
+          ><span>{{ hoverInfo.ratedCapacityNumber }}</span>
+        </p>
+        <p>
+          <span>经度</span><span>{{ hoverInfo.longitude }}</span>
+        </p>
+        <p>
+          <span>纬度</span><span>{{ hoverInfo.latitude }}</span>
+        </p>
+        <p>
+          <span>海拔高度</span><span>{{ hoverInfo.elevationHeight }}</span>
+        </p>
+        <p>
+          <span>最新分析时间</span
+          ><span> {{ $formatDate(hoverInfo.wfbrCreateTime) }}</span>
+        </p>
       </div>
     </div>
 
     <div v-if="hoverfengji" :style="hoverfengjiStyle" class="hover-fengji">
-      <h3>{{hoverfengji.engineName}}</h3>
+      <h3>{{ hoverfengji.engineName }}</h3>
       <div>
-        <p><span>风机编号</span><span>{{hoverfengji.engineCode}}</span></p>
-        <p><span>额定容量</span><span>{{hoverfengji.ratedCapacity}}</span></p>
-        <p><span>海拔高度</span><span>{{hoverfengji.elevationHeight}}</span></p>
-        <p><span>轮毂高度</span><span>{{hoverfengji.hubHeight}}</span></p>
-        <p><span>经度</span><span>{{hoverfengji.longitude}}</span></p>
-        <p><span>维度</span><span>{{hoverfengji.latitude}}</span></p>
-        <p>是否标杆风机 <span>{{hoverfengji.sightcing == 1 ? '是' : '否'}}</span></p>
-        <p><span>额定风速</span><span>{{hoverfengji.rated_wind_speed}}</span></p>
-        <p><span>切入风速</span><span>{{hoverfengji.ratedCutInWindspeed}}</span></p>
-        <p><span>切出风速</span><span>{{hoverfengji.ratedCutOutWindspeed}}</span></p>
+        <p>
+          <span>风机编号</span><span>{{ hoverfengji.engineCode }}</span>
+        </p>
+        <p>
+          <span>额定容量</span><span>{{ hoverfengji.ratedCapacity }}</span>
+        </p>
+        <p>
+          <span>海拔高度</span><span>{{ hoverfengji.elevationHeight }}</span>
+        </p>
+        <p>
+          <span>轮毂高度</span><span>{{ hoverfengji.hubHeight }}</span>
+        </p>
+        <p>
+          <span>经度</span><span>{{ hoverfengji.longitude }}</span>
+        </p>
+        <p>
+          <span>维度</span><span>{{ hoverfengji.latitude }}</span>
+        </p>
+        <p>
+          是否标杆风机
+          <span>{{ hoverfengji.sightcing == 1 ? "是" : "否" }}</span>
+        </p>
+        <p>
+          <span>额定风速</span><span>{{ hoverfengji.rated_wind_speed }}</span>
+        </p>
+        <p>
+          <span>切入风速</span
+          ><span>{{ hoverfengji.ratedCutInWindspeed }}</span>
+        </p>
+        <p>
+          <span>切出风速</span
+          ><span>{{ hoverfengji.ratedCutOutWindspeed }}</span>
+        </p>
       </div>
     </div>
     <div v-if="hoverta" :style="hovertaStyle" class="hover-ta">
-      <h3>{{hoverta.anemometerName}}</h3>
+      <h3>{{ hoverta.anemometerName }}</h3>
       <div>
-        <p><span>测风塔编号</span><span>{{hoverta.anemometerCode}}</span></p>
-
-        <p><span>经度</span><span>{{hoverta.longitude}}</span></p>
-        <p><span>维度</span><span>{{hoverta.anemometerName}}</span></p>
-        <p><span>状态</span><span>{{hoverta.latitude}}</span></p>
-        <p><span>测风塔高度</span><span>{{hoverta.anemometerHeightStrings}}</span></p>
+        <p>
+          <span>测风塔编号</span><span>{{ hoverta.anemometerCode }}</span>
+        </p>
 
+        <p>
+          <span>经度</span><span>{{ hoverta.longitude }}</span>
+        </p>
+        <p>
+          <span>维度</span><span>{{ hoverta.anemometerName }}</span>
+        </p>
+        <p>
+          <span>状态</span><span>{{ hoverta.latitude }}</span>
+        </p>
+        <p>
+          <span>测风塔高度</span
+          ><span>{{ hoverta.anemometerHeightStrings }}</span>
+        </p>
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
 import "ol/ol.css";
 import { Map, View, Feature } from "ol";
@@ -79,7 +127,7 @@ export default {
       hoverInfo: null,
       hoverStyle: {
         position: "absolute",
-        left: "0px", 
+        left: "0px",
         top: "0px",
       },
       hoverfengji: null,
@@ -186,7 +234,6 @@ export default {
       }
     },
     getIconForValue(val) {
-
       switch (val) {
         case "-1":
         case -1:
@@ -220,31 +267,30 @@ export default {
           if (val == "1") {
             this.hoverInfo = feature.get("data");
             this.hoverStyle.left = `${evt.pixel[0] + 10}px`;
-            this.hoverStyle.top = `${evt.pixel[1] + 10}px`;
+            this.hoverStyle.top = `${evt.pixel[1] - 150}px`;
           } else if (val == "4") {
             this.hoverfengji = feature.get("data");
             this.hoverfengjiStyle.left = `${evt.pixel[0] + 10}px`;
-            this.hoverfengjiStyle.top = `${evt.pixel[1] + 10}px`;
-            this.currentFeatureData = feature.get("data"); // Store the feature data for click event
+            this.hoverfengjiStyle.top = `${evt.pixel[1] - 150}px`;
+            this.currentFeatureData = feature.get("data");
           } else if (val == "5") {
             this.hoverta = feature.get("data");
             this.hovertaStyle.left = `${evt.pixel[0] + 10}px`;
-            this.hovertaStyle.top = `${evt.pixel[1] + 10}px`;
-            this.currentFeatureData = feature.get("data"); // Store the feature data for click event
+            this.hovertaStyle.top = `${evt.pixel[1]  - 150}px`;
+            this.currentFeatureData = feature.get("data"); 
           } else {
             this.hoverInfo = null;
             this.hoverfengji = false;
             this.hoverta = false;
-            this.currentFeatureData = null; // Ensure no stored feature data if val is not 3 or 4
+            this.currentFeatureData = null; 
           }
         } else {
           this.hoverInfo = null;
           this.hoverfengji = false;
           this.hoverta = false;
-          this.currentFeatureData = null; // Ensure no stored feature data if there are no features
+          this.currentFeatureData = null;
         }
       });
-
       this.map.on("click", (evt) => {
         const features = this.map.getFeaturesAtPixel(evt.pixel, {
           hitTolerance: 1,
@@ -253,17 +299,12 @@ export default {
           const feature = features.at(0);
           this.$emit("feature-click", feature.get("data"));
         }
-        // Check if there's stored feature data and if it's a val === "4" feature
         if (this.currentFeatureData && this.currentFeatureData.val === "4") {
-          // Handle click event for val === "4"
           this.handleFeatureClick(this.currentFeatureData);
         }
       });
     },
-
     handleFeatureClick(featureData) {
-      // Implement your logic to handle the click event for val === "4"
-      // For example, emit an event or perform some action
       console.log("Feature with val === '4' clicked:", featureData);
     },
 

src/directives/lazyLoad.js

@@ -1,52 +1,36 @@
-// src/directives/lazyLoad.js
 export default {
   inserted(el, binding) {
-    let hasError = false;
-
-    if (el.tagName === "IMG" || el.tagName === "IFRAME") {
-      el.src = require("../assets/img/loading.gif");
-      const handleLoad = () => {
-        if (!hasError) {
-          el.src = binding.value.src;
-          el.onload = null; // Remove the onload event to prevent loops
-        }
-      };
+    if (el.tagName === "IMG") {
+      let hasError = false;
 
       const handleError = () => {
-        hasError = true;
-        el.src = require("../assets/img/loadingError.webp");
-        el.onerror = null; // Remove the onerror event to prevent loops
-      };
-
-      el.onload = handleLoad;
-      el.onerror = handleError;
-
-      el.src = binding.value.src;
-    }
-  },
-  update(el, binding) {
-    let hasError = false;
-
-    if (el.src !== binding.value.src) {
-      el.src = require("../assets/img/loading.gif");
-
-      const handleLoad = () => {
         if (!hasError) {
-          el.src = binding.value.src;
-          el.onload = null; // Remove the onload event to prevent loops
+          hasError = true;
+          el.src = binding.value.errorImageSrc;
+          el.onerror = null; // Remove the onerror event to prevent loops
+          el.onload = null; // Also remove the onload event in case of error
         }
       };
 
-      const handleError = () => {
-        hasError = true;
-        el.src = require("../assets/img/loadingError.webp");
-        el.onerror = null; // Remove the onerror event to prevent loops
-      };
-
-      el.onload = handleLoad;
       el.onerror = handleError;
-
       el.src = binding.value.src;
     }
   },
+  // update(el, binding) {
+  //   if (el.tagName === "IMG" && el.src !== binding.value.src) {
+  //     let hasError = false;
+
+  //     const handleError = () => {
+  //       if (!hasError) {
+  //         hasError = true;
+  //         el.src = binding.value.errorImageSrc;
+  //         el.onerror = null; // Remove the onerror event to prevent loops
+  //         el.onload = null; // Also remove the onload event in case of error
+  //       }
+  //     };
+
+  //     el.onerror = handleError;
+  //     el.src = binding.value.src;
+  //   }
+  // },
 };

src/views/admin/cockpitManage/Index.vue

@@ -2,12 +2,18 @@
   <div class="map-ditu">
     <Tmap ref="map" :maplist="maplist" @feature-click="featureClick"></Tmap>
     <div class="ledata">
-      <selecttree placeholder="请选择上级单位" :list="parentOpt" type="1" v-model="companyCode" @change="parentChange"
+      <selecttree
+        placeholder="请选择上级单位"
+        :list="parentOpt"
+        type="1"
+        v-model="companyCode"
+        @change="parentChange"
         :defaultParentProps="{
           children: 'children',
           label: 'companyName',
           value: 'codeNumber',
-        }">
+        }"
+      >
       </selecttree>
 
       <p>
@@ -42,10 +48,21 @@
         <span class="yellow"></span>
         <span class="green"></span>
       </p>
-      <el-switch v-model="value1" active-text="显示" inactive-text="隐藏" @change="handleSwitchChange">
+      <el-switch
+        v-model="value1"
+        active-text="显示"
+        inactive-text="隐藏"
+        @change="handleSwitchChange"
+      >
       </el-switch>
     </div>
-    <Rightdata v-show="ShowRi" ref="childRef" :maplistArr="maplistArr" :defaultdata="defaultdata" class="ridata">
+    <Rightdata
+      v-show="ShowRi"
+      ref="childRef"
+      :maplistArr="maplistArr"
+      :defaultdata="defaultdata"
+      class="ridata"
+    >
     </Rightdata>
     <router-view></router-view>
   </div>
@@ -59,6 +76,7 @@ import {
 } from "@/api/ledger.js";
 import Tmap from "@/components/map";
 import Rightdata from "./component/rightdata.vue";
+
 export default {
   name: "Index",
   components: {
@@ -85,12 +103,6 @@ export default {
   created() {
     this.GETtree();
     this.GETtotal();
-
-    // 页面初始化时手动触发一次赋值操作
-    this.$watch("defaultdata", (newValue) => {
-      this.maplistArr = newValue; // 将defaultdata的值赋给maplistArr
-    });
-    this.maplistArr = this.defaultdata;
   },
   mounted() {
     //模拟地图上的点位
@@ -100,7 +112,6 @@ export default {
     //   // this.$refs.map.addMarker({ point: [116.40740,39.90420], val: "1" });
     // });
   },
-
   methods: {
     // 获取总数
     GETtotal() {
@@ -114,9 +125,13 @@ export default {
       const treedata = res.data;
       const processedData = this.processTreeData(treedata);
       this.parentOpt = processedData;
-      this.defaultdata = res.data[0];
-    },
 
+      // Automatically handle the first layer of children where codeType === "field"
+      const firstLayer = this.findFirstFieldLayer(processedData);
+      if (firstLayer) {
+        this.parentChange(firstLayer);
+      }
+    },
     //过滤数据
     processTreeData(treeData) {
       const processedData = [];
@@ -136,12 +151,14 @@ export default {
       });
       return processedData;
     },
-
-
+    handleTreeData() {
+      this.treeData = this.processTreeData(this.treeData);
+    },
     parseCoordinates(input) {
       if (input && typeof input === "string") {
         return input.split(",").map(Number);
       }
+      debugger;
       return [];
     },
     parentChange(data) {
@@ -166,7 +183,7 @@ export default {
           console.log(element);
           if (
             this.parseCoordinates(element.longitudeAndLatitudeString).length >
-            0 &&
+              0 &&
             element.codeType === "field"
           ) {
             this.$refs.map.addMarker({
@@ -180,7 +197,20 @@ export default {
         });
       }
     },
-
+    findFirstFieldLayer(data) {
+      for (const item of data) {
+        if (item.codeType === "field") {
+          return item;
+        }
+        if (item.children && item.children.length > 0) {
+          const childResult = this.findFirstFieldLayer(item.children);
+          if (childResult) {
+            return childResult;
+          }
+        }
+      }
+      return null;
+    },
     featureClick(data) {
       console.log(data, "featureClick");
       const val = data.val;
@@ -207,6 +237,7 @@ export default {
 };
 </script>
 
+
 <style lang="scss" scoped>
 .map-ditu {
   // min-width: 86.9vw;

src/views/admin/cockpitManage/IndexBeiF.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="map-ditu">
+    <Tmap ref="map" :maplist="maplist" @feature-click="featureClick"></Tmap>
+    <div class="ledata">
+      <selecttree
+        placeholder="请选择上级单位"
+        :list="parentOpt"
+        type="1"
+        v-model="companyCode"
+        @change="parentChange"
+        :defaultParentProps="{
+          children: 'children',
+          label: 'companyName',
+          value: 'codeNumber',
+        }"
+      >
+      </selecttree>
+
+      <p>
+        <span class="SpText">登录人风场总数：</span>
+        {{ totalList?.fieldSumNumber ? totalList.fieldSumNumber : 0 }}
+        个
+      </p>
+      <p>
+        <span class="SpText">已完成分析风场：</span>
+        {{
+          totalList?.analysisFinishNumber ? totalList.analysisFinishNumber : 0
+        }}
+        个
+      </p>
+      <p>
+        <span class="SpText">未完成分析风场：</span>
+        {{
+          totalList?.analysisUnFinishedNumber
+            ? totalList.analysisUnFinishedNumber
+            : 0
+        }}
+        个
+      </p>
+      <p>
+        <span class="SpText">风机数量：</span>
+        {{ totalList?.engineGroupNumber ? totalList.engineGroupNumber : 0 }}
+        个
+      </p>
+      <p>
+        <span class="SpText">风场状态：</span>
+        <span class="red"></span>
+        <span class="yellow"></span>
+        <span class="green"></span>
+      </p>
+      <el-switch
+        v-model="value1"
+        active-text="显示"
+        inactive-text="隐藏"
+        @change="handleSwitchChange"
+      >
+      </el-switch>
+    </div>
+    <Rightdata
+      v-show="ShowRi"
+      ref="childRef"
+      :maplistArr="maplistArr"
+      :defaultdata="defaultdata"
+      class="ridata"
+    ></Rightdata>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import selecttree from "../../../components/selecttree.vue";
+import {
+  getCompanyFieldNumberVo,
+  getSysOrganizationAuthTreeByRoleId,
+} from "@/api/ledger.js";
+import Tmap from "@/components/map";
+import Rightdata from "./component/rightdata.vue";
+export default {
+  name: "Index",
+  components: {
+    Tmap,
+    Rightdata,
+    selecttree,
+  },
+  data() {
+    return {
+      ShowRi: true,
+      treeval: "",
+      value1: true,
+      treeval: "", // 绑定的输入框值
+      showTree: false, // 控制树列表显示
+      treeData: [
+
+      ],
+      maplist: [],
+      maplistArr: {},
+      totalList: [],
+      parentOpt: [],
+      companyCode: "",
+      defaultdata: {},
+    };
+  },
+  created() {
+    this.GETtree();
+    this.GETtotal();
+
+    // 页面初始化时手动触发一次赋值操作
+    this.$watch("defaultdata", (newValue) => {
+      this.maplistArr = newValue; // 将defaultdata的值赋给maplistArr
+    });
+    this.maplistArr = this.defaultdata;
+  },
+  mounted() {
+    //模拟地图上的点位
+    const data = this.maplist;
+    // data.forEach((element) => {
+    //   console.log(element);
+    //   // this.$refs.map.addMarker({ point: [116.40740,39.90420], val: "1" });
+    // });
+  },
+
+  methods: {
+    // 获取总数
+    GETtotal() {
+      getCompanyFieldNumberVo().then((res) => {
+        this.totalList = res.data;
+      });
+    },
+    // 获取企业数
+    async GETtree() {
+      const res = await getSysOrganizationAuthTreeByRoleId();
+      const treedata = res.data;
+      const processedData = this.processTreeData(treedata);
+      this.parentOpt = processedData;
+      this.defaultdata = res.data[0];
+    },
+
+    //过滤数据
+    processTreeData(treeData) {
+      const processedData = [];
+      function processNode(node) {
+        if (node.codeType === "field") {
+          node.companyName = node.fieldName;
+        }
+        if (node.children && node.children.length > 0) {
+          node.children.forEach((child) => {
+            processNode(child);
+          });
+        }
+      }
+      treeData.forEach((root) => {
+        processNode(root);
+        processedData.push(root);
+      });
+
+      return processedData;
+    },
+    parseCoordinates(input) {
+      if (input && typeof input === "string") {
+        return input.split(",").map(Number);
+      }
+      return [];
+    },
+    parentChange(data) {
+      //data为当前选中对象
+      this.$refs.map.clearMarkers();
+      this.maplist = data;
+      this.maplistArr = data;
+      console.log(data, "parentChange");
+      if (data.codeType === "field") {
+        if (this.parseCoordinates(data.longitudeAndLatitudeString).length > 0) {
+          this.$refs.map.addMarker({
+            point: this.parseCoordinates(data.longitudeAndLatitudeString),
+            val: data.analysisState,
+            ...data,
+          });
+          return;
+        }
+        this.$refs.map.clearMarkers();
+      } else {
+        const dataMapList = data.children;
+        dataMapList.forEach((element) => {
+          console.log(element);
+          if (
+            this.parseCoordinates(element.longitudeAndLatitudeString).length >
+              0 &&
+            element.codeType === "field"
+          ) {
+            this.$refs.map.addMarker({
+              point: this.parseCoordinates(element.longitudeAndLatitudeString),
+              val: element.analysisState,
+              ...element,
+            });
+            return;
+          }
+          this.$refs.map.clearMarkers();
+        });
+      }
+    },
+
+    featureClick(data) {
+      console.log(data, "featureClick");
+      const val = data.val;
+      if (val === "-1" || val === -1) {
+        this.$message.error("当前风场未进行分析");
+      } else if (val === "0" || val === 0) {
+        this.$message({
+          message: "当前风场正在分析中",
+          type: "warning",
+        });
+      } else if (val === "1" || val === 1) {
+        this.$router.push({
+          path: "cockpitManage/electronic-map",
+          query: {
+            fieldCode: data.codeNumber,
+          },
+        });
+      }
+    },
+    handleSwitchChange() {
+      this.ShowRi = !this.ShowRi;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.map-ditu {
+  // min-width: 86.9vw;
+  // max-width: 94.9vw;
+  height: 93vh;
+  position: relative;
+}
+
+.ridata {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+
+.ledata {
+  font-size: 14px;
+  width: 300px;
+  position: absolute;
+  top: 20px;
+  left: 60px;
+  background: #008080;
+  padding: 10px;
+  color: #fff;
+  border-radius: 5px;
+
+  p {
+    line-height: 24px;
+
+    .SpText {
+      display: inline-block;
+      width: 120px;
+      text-align: right;
+    }
+
+    .red,
+    .yellow,
+    .green {
+      display: inline-block;
+      width: 30px;
+      height: 12px;
+      margin-right: 5px;
+    }
+
+    .red {
+      background-color: #e16757;
+    }
+
+    .yellow {
+      background-color: #eecb5f;
+    }
+
+    .green {
+      background-color: #7ecf51;
+    }
+  }
+}
+
+::v-deep .el-switch__label.is-active {
+  color: #fff;
+}
+</style>

src/views/performance/assetssDetail.vue

@@ -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>

src/views/system/menuMag/index.vue

@@ -251,6 +251,8 @@ export default {
     async getTableList() {
       try {
         this.loading = true;
+        // console.log("  debugger;");
+        // debugger;
         const result = await getAllMenu({ ...this.formInline });
         this.tableData = result.data;
         this.loading = false;

vue.config.js

@@ -113,4 +113,7 @@ module.exports = {
       patterns: [],
     },
   },
+  configureWebpack: {
+    devtool: "source-map",
+  },
 };