performance-test/src/views/performance/assetssDetail.vue

<!--
 * @Author: your name
 * @Date: 2024-05-27 09:25:45
 * @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">
    <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-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: [],
      generalFiles: [],
      diagramRelations: [],
      commentDescriptionVos: [],
      formInfo: {
        fieldEngineCode: null,
        analysisTypeCode: null,
      },
      rules: {},
      flage: false,
    };
  },
  created() {
    //获取分析 分析类型、机组编号 列表
    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);
      formData.append("analysisTypeCode", this.formInfo.analysisTypeCode);
      formData.append("fieldEngineCode", this.formInfo.fieldEngineCode);
      //获取详情信息
      try {
        const response = await analysisDetail(formData);
        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);
      }
    },
    async getWindCodeList() {
      try {
        const response = await analysisEditQuery({
          batchCode: this.$route.query.batchCode,
        });
        this.analysisTypeList = response.data.analysisTypeList;
        this.windEngineGroupList = response.data.windEngineGroupList;
        this.formInfo.fieldEngineCode = response.data.windEngineGroupList[0];
        this.formInfo.analysisTypeCode =
          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>
<style scoped lang="scss">
.box-card {
  margin-top: 20px;
}
.imageDetail {
  padding: 80px 100px;
}
.analysisType {
  .assetssConent {
    height: 450px !important;
    .el-col-12 {
      width: 50%;
      height: 100%;
    }
    iframe {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
  }
}
</style>