性能分析权限详情接口对接

src/components/Tinymce.vue

@@ -6,6 +6,7 @@
       :options="editorOptions"
       @ready="onEditorReady"
     />
+    <button @click="submit">确定</button>
   </div>
 </template>
 
@@ -50,6 +51,9 @@ export default {
     };
   },
   methods: {
+    submit() {
+      console.log(this.content, "this.$refs.quillEditor.getContents();");
+    },
     onEditorReady(editor) {
       console.log(editor, "editor");
     },

src/directives/lazyLoad.js

@@ -0,0 +1,52 @@
+// 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
+        }
+      };
+
+      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
+        }
+      };
+
+      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;
+    }
+  },
+};

src/main.js

@@ -17,7 +17,7 @@ Vue.component("SvgIcons", SvgIcons);
 import qs from "qs";
 // 将自动注册所有组件为全局组件
 import dataV from "@jiaminghi/data-view";
-
+import lazyLoad from "./directives/lazyLoad";
 Vue.use(dataV);
 Vue.prototype.$qs = qs;
 // Vue.prototype.$tinymce = tinymce;
@@ -44,7 +44,7 @@ Vue.prototype.$formatDate = function (date) {
 
   return `${year}-${month}-${day}`;
 };
-
+Vue.directive("lazy-load", lazyLoad);
 new Vue({
   router,
   store,

src/styles/base.css

@@ -221,7 +221,7 @@ input {
 
 body {
   background: #ffffff;
-  font-size: 22px;
+  /* font-size: 22px; */
   color: #333;
   font-family: "HYQiHei", "Helvetica Neue", Helvetica, Arial, "PingFang SC",
     "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei",

src/views/performance/assetssDetail.vue

@@ -1,75 +1,177 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:25:45
- * @LastEditTime: 2024-06-12 17:26:14
+ * @LastEditTime: 2024-06-13 16:56:00
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/assetssDetail.vue
 -->
 <template>
   <div class="global-variable">
-    <h2 style="text-align: center">分析历史记录总览</h2>
-    <el-form
-      :model="formInfo"
-      :rules="rules"
-      ref="formInfo"
-      label-width="100px"
-      class="demo-ruleForm"
-    >
-      <el-form-item label="分析类型" prop="analysisTypeCode">
-        <el-select v-model="formInfo.analysisTypeCode" size="small">
-          <el-option
-            v-for="item in analysisTypeList"
-            :key="item.typeCode"
-            :label="item.typeName"
-            :value="item.typeCode"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="机组编号" prop="fieldEngineCode">
-        <el-select v-model="formInfo.fieldEngineCode" size="small">
-          <el-option
-            v-for="item in windEngineGroupList"
-            :key="item"
-            :label="item"
-            :value="item"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <el-button type="primary" @click="() => $router.go(-1)">返回</el-button>
-    <h4>分析时间：{{ detailInfo.generalFiles[0].createTime }}</h4>
-    <img :src="detailInfo.generalFiles[0].fileAddr" alt="" />
+    <el-row type="flex" justify="space-between">
+      <el-col :span="8"
+        ><el-button
+          type="text"
+          style="font-size: 20px"
+          icon="el-icon-d-arrow-left"
+          @click="() => $router.go(-1)"
+          >返回</el-button
+        ></el-col
+      >
+      <el-col :span="8"
+        ><h2 style="text-align: center">分析历史记录总览</h2></el-col
+      >
+      <el-col :span="8">
+        <div style="text-align: end; font-size: 16px">
+          分析时间：{{
+            generalFiles.length > 0 ? generalFiles[0].createTime : "/"
+          }}
+        </div>
+      </el-col>
+    </el-row>
     <el-card class="box-card analysisType">
-      <el-row>
-        <el-col :span="12">
-          <iframe src="/html/A01.html" frameborder="0"></iframe
-        ></el-col>
-        <el-col :span="12">
-          <img src="../../assets/Wechat.jpg" alt=""
-        /></el-col>
-      </el-row>
-    </el-card>
-    <el-card class="box-card">
-      <div v-for="o in 4" :key="o" class="text item">
-        {{ "列表内容 " + o }}
-      </div>
+      <el-form
+        :model="formInfo"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        inline
+        class="demo-ruleForm"
+      >
+        <el-row type="flex" justify="space-between">
+          <el-col :span="8">
+            <el-form-item label="分析类型" prop="analysisTypeCode">
+              <el-select v-model="formInfo.analysisTypeCode" size="small">
+                <el-option
+                  v-for="item in analysisTypeList"
+                  :key="item.typeCode"
+                  :label="item.typeName"
+                  :value="item.typeCode"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="机组编号" prop="fieldEngineCode">
+              <el-select v-model="formInfo.fieldEngineCode" size="small">
+                <el-option
+                  v-for="item in windEngineGroupList"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              class="searchFrom"
+              style="display: flex; justify-content: end"
+            >
+              <el-button type="primary" @click="onSubmit" size="small"
+                >查询</el-button
+              >
+              <el-button @click="reset('ruleForm')" size="small"
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
     </el-card>
+    <el-empty :image-size="200" v-if="flage"></el-empty>
+    <div v-else>
+      <el-card class="box-card analysisType" v-if="generalFiles.length > 0">
+        <div slot="header" class="clearfix">
+          <span style="font-weight: 700; font-size: 16px">分析总图</span>
+        </div>
+        <el-row class="assetssConent">
+          <el-col
+            v-for="(file, index) in generalFiles"
+            :key="index"
+            :span="getSpan(index, 'generalFiles')"
+          >
+            <iframe
+              v-if="getFileType(file.fileAddr) === 'html'"
+              :src="file.fileAddr"
+              ref="iframe"
+              frameborder="0"
+            ></iframe>
+            <img
+              v-else-if="getFileType(file.fileAddr) === 'image'"
+              v-lazy-load="{
+                src: file.fileAddr,
+                loadingImageSrc: '../../assets/img/loading.gif',
+                errorImageSrc: '../../assets/img/loadingError.webp',
+              }"
+              alt=""
+            />
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-card class="box-card analysisType" v-if="diagramRelations.length > 0">
+        <div slot="header" class="clearfix">
+          <span style="font-weight: 700; font-size: 16px">分析分图</span>
+        </div>
+        <el-row class="assetssConent">
+          <el-col
+            v-for="(file, index) in diagramRelations"
+            :key="index"
+            :span="getSpan(index, 'diagramRelations')"
+          >
+            <!-- 文件内容渲染 -->
+            <iframe
+              v-if="getFileType(file.fileAddr) === 'html'"
+              :src="file.fileAddr"
+              ref="iframe"
+              frameborder="0"
+            ></iframe>
+            <img
+              v-else-if="getFileType(file.fileAddr) === 'image'"
+              v-lazy-load="{
+                src: file.fileAddr,
+                loadingImageSrc: '../../assets/img/loading.gif',
+                errorImageSrc: '../../assets/img/loadingError.webp',
+              }"
+              alt=""
+            />
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-card
+        class="box-card"
+        v-for="o in commentDescriptionVos"
+        :key="o.commentTypeName"
+      >
+        <div slot="header" class="clearfix">
+          <span style="font-weight: 700; font-size: 16px">{{
+            o.commentTypeName
+          }}</span>
+        </div>
+        <div class="text item">
+          <div v-html="o.comment"></div>
+        </div>
+      </el-card>
+    </div>
   </div>
 </template>
 <script>
 import { analysisDetail, analysisEditQuery } from "@/api/performance";
+
 export default {
   data() {
     return {
       analysisTypeList: [],
       windEngineGroupList: [],
-      detailInfo: {},
+      generalFiles: [],
+      diagramRelations: [],
+      commentDescriptionVos: [],
       formInfo: {
         fieldEngineCode: null,
         analysisTypeCode: null,
       },
       rules: {},
+      flage: false,
     };
   },
   created() {
@@ -77,6 +179,16 @@ export default {
     this.getWindCodeList();
   },
   methods: {
+    // 查询
+    onSubmit() {
+      this.getDetailInfo();
+    },
+    // 重置
+    reset(formName) {
+      this.$refs[formName].resetFields();
+
+      this.getWindCodeList();
+    },
     async getDetailInfo() {
       const formData = new FormData();
       formData.append("batchCode", this.$route.query.batchCode);
@@ -85,8 +197,27 @@ export default {
       //获取详情信息
       try {
         const response = await analysisDetail(formData);
-        console.log(response.data, "data");
-        this.detailInfo = response.data[0];
+        if (response.data.length === 0 || response.data === null) {
+          this.flage = true;
+        } else {
+          this.flage = false;
+        }
+        this.generalFiles =
+          (response.data &&
+            response.data.length > 0 &&
+            response.data[0].generalFiles) ||
+          [];
+        this.diagramRelations =
+          (response.data &&
+            response.data.length > 0 &&
+            response.data[0].diagramRelations) ||
+          [];
+        this.commentDescriptionVos =
+          (response.data &&
+            response.data.length > 0 &&
+            response.data[0].commentDescriptionVos) ||
+          [];
+        console.log(this.generalFiles, " this.generalFiles ");
       } catch (error) {
         console.error(error);
       }
@@ -100,12 +231,52 @@ export default {
         this.windEngineGroupList = response.data.windEngineGroupList;
         this.formInfo.fieldEngineCode = response.data.windEngineGroupList[0];
         this.formInfo.analysisTypeCode =
-          response.data.analysisTypeList[0].typeCode;
+          response.data.analysisTypeList.length > 0
+            ? response.data.analysisTypeList[0].typeCode
+            : "";
         this.getDetailInfo();
       } catch (error) {
         console.error(error);
       }
     },
+    getSpan(index, type) {
+      let isLastElement = false;
+      if (type === "generalFiles") {
+        isLastElement = index === this.generalFiles.length - 1;
+      } else if (type === "diagramRelations") {
+        isLastElement = index === this.diagramRelations.length - 1;
+      }
+      const isOddPosition = (index + 1) % 2 !== 0;
+      if (isLastElement && isOddPosition) {
+        return 24;
+      }
+      return 12;
+    },
+    getFileType(url) {
+      // 使用 URL 对象解析 URL
+      const parsedUrl = new URL(url);
+      // 获取路径名部分
+      let pathname = parsedUrl.pathname;
+      // 截取路径名，去除加密乱码字符部分
+      const index = pathname.indexOf(".html");
+      if (index !== -1) {
+        pathname = pathname.slice(0, index + 5); // '.html' 的长度是 5
+      } else {
+        pathname = pathname.slice(0, pathname.indexOf(".png") + 4); // '.png' 的长度是 4
+      }
+      // 正则表达式匹配图片扩展名
+      const imageExtensions = /\.(png|jpg|jpeg|gif|bmp|svg)$/i;
+      // 正则表达式匹配 HTML 扩展名
+      const htmlExtensions = /\.html?$/i;
+
+      if (imageExtensions.test(pathname)) {
+        return "image";
+      } else if (htmlExtensions.test(pathname)) {
+        return "html";
+      } else {
+        return "unknown";
+      }
+    },
   },
 };
 </script>
@@ -113,8 +284,11 @@ export default {
 .box-card {
   margin-top: 20px;
 }
+.imageDetail {
+  padding: 80px 100px;
+}
 .analysisType {
-  .el-row {
+  .assetssConent {
     height: 450px !important;
     .el-col-12 {
       width: 50%;
@@ -126,7 +300,8 @@ export default {
     }
     img {
       width: 100%;
-      height: 100%;
+      height: auto;
+      margin: 0 auto;
     }
   }
 }