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

<!--
 * @Author: your name
 * @Date: 2024-05-27 09:25:45
 * @LastEditTime: 2024-09-23 09:13:06
 * @LastEditors: milo-MacBook-Pro.local
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/assetssDetail.vue
-->
<template>
  <div class="global-variable" v-loading="loading">
    <!-- 通过json文件绘制新的图表 -->
    <!-- <CreateNewChart></CreateNewChart> -->
    <el-row type="flex" justify="space-between">
      <el-col :span="8">
        <el-button
          type="text"
          style="font-size: 20px"
          icon="el-icon-arrow-left"
          @click="() => $router.push('/home/performance/assetssMag')"
        >
          返回
        </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"
                @change="handleAnalysisType"
              >
                <el-option
                  v-for="(item, indAns) in analysisTypeList"
                  :key="item.analysisTypeCode + indAns"
                  :label="item.analysisTypeName"
                  :value="item.analysisTypeCode"
                ></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, indWind) in windEngineGroupList"
                  :key="item.engineCode + indWind"
                  :label="item.engineName"
                  :value="item.engineCode"
                ></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-button
                type="primary"
                @click="downLoadAllTypeFile"
                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-table
        class="box-card"
        v-if="
          this.formInfo.analysisTypeCode === 'yaw_error' &&
          this.csvData.length > 0
        "
        :data="csvData"
        border
        max-height="550"
        style="width: 100%"
        align="center"
      >
        <el-table-column prop="engine_name" label="风机名称"> </el-table-column>
        <el-table-column prop="yaw_error1" label="误差值"> </el-table-column>
      </el-table>
      <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">
              分析总图{{ fileCheckResult1 }}
            </span>
          </div>
          <el-row class="assetssConent">
            <template
              v-if="
                formInfo.analysisTypeCode === 'power_curve' &&
                (generalFilesData.length > 0 || powerHtmlZongData.length > 0)
              "
            >
              <template
                v-if="
                  generalFilesData[0] !== null && generalFilesData.length !== 0
                "
              >
                <template
                  v-for="(powerCurveDom, ind) in generalFilesData"
                  :style="{ marginTop: '50px' }"
                >
                  <el-col :span="12">
                    <div class="left">
                      <el-button
                        @click="
                          downLoadCsv(
                            powerCurveDom && powerCurveDom.powerCurveTableData
                          )
                        "
                        >导出表格数据</el-button
                      >
                      <el-table
                        :data="
                          powerCurveDom && powerCurveDom.powerCurveTableData
                        "
                        border
                        max-height="550"
                        style="width: 100%"
                        align="center"
                      >
                        <el-table-column prop="enginName" label="风机名称">
                        </el-table-column>
                        <el-table-column prop="engineTypeName" label="风机机型">
                        </el-table-column>
                        <el-table-column prop="xData" label="风速">
                        </el-table-column>
                        <el-table-column prop="yData" label="合同功率">
                        </el-table-column>
                        <el-table-column
                          prop="contractPowerCurve"
                          label="实际功率"
                        >
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="right">
                      <PlotlyCharts
                        :lineMarkerData="powerCurveDom.chartsData"
                        :comType="'generalDrawing'"
                      ></PlotlyCharts>
                    </div>
                  </el-col>
                </template>
              </template>
              <template v-if="powerHtmlZongData.length > 0">
                <el-col
                  v-for="(file, index) in powerHtmlZongData"
                  :key="index + file.fileAddr + file.createTime"
                  :span="24"
                  class="col_content"
                  :style="{
                    marginTop: '50px',
                    display:
                      getFileType(file.fileAddr) === 'html' ? 'block' : 'none',
                  }"
                >
                  <iframe
                    v-if="getFileType(file.fileAddr) === 'html'"
                    :src="file.fileAddr"
                    :ref="'iframe' + index"
                    frameborder="0"
                    @load="iframeLoad(index + powerHtmlZongData.length)"
                    width="100%"
                    height="100%"
                  ></iframe>
                </el-col>
              </template>
            </template>
            <template v-else>
              <el-col
                v-for="(file, index) in generalFiles"
                :key="index + file.fileAddr + file.createTime"
                :span="24"
                class="col_content"
                :style="{
                  display:
                    getFileType(file.fileAddr) === 'html' ? 'block' : 'none',
                }"
              >
                <iframe
                  v-if="getFileType(file.fileAddr) === 'html'"
                  :src="file.fileAddr"
                  :ref="'iframe' + index"
                  frameborder="0"
                  @load="iframeLoad(index + generalFiles.length)"
                  width="100%"
                  height="100%"
                ></iframe>
              </el-col>
            </template>
          </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">
              分析分图 {{ fileCheckResult1 }}
            </span>
          </div>
          <el-row class="assetssConent">
            <template
              v-if="
                formInfo.analysisTypeCode === 'power_curve' &&
                generalFiles.length > 0
              "
            >
              <template
                v-if="graphFilesData[0] !== null && graphFilesData.length !== 0"
              >
                <template v-for="(powerCurveDom, ind) in graphFilesData">
                  <el-col :span="12">
                    <div class="left">
                      <!-- <el-button
                        @click="
                          downLoadCsv(
                            powerCurveDom && powerCurveDom.powerCurveTableData
                          )
                        "
                        >导出表格数据</el-button
                      > -->
                      <el-table
                        :data="
                          powerCurveDom && powerCurveDom.powerCurveTableData
                        "
                        border
                        max-height="550"
                        style="width: 100%"
                        align="center"
                      >
                        <el-table-column prop="enginName" label="风机名称">
                        </el-table-column>
                        <el-table-column prop="engineTypeName" label="风机机型">
                        </el-table-column>
                        <el-table-column prop="xData" label="风速">
                        </el-table-column>
                        <el-table-column prop="yData" label="合同功率">
                        </el-table-column>
                        <el-table-column
                          prop="contractPowerCurve"
                          label="实际功率"
                        >
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-col>
                  <el-col
                    v-if="formInfo.analysisTypeCode === 'power_curve'"
                    :span="12"
                  >
                    <div class="right">
                      <PlotlyCharts
                        :lineMarkerData="powerCurveDom.chartsData"
                        :comType="'graph'"
                      ></PlotlyCharts>
                    </div>
                  </el-col>
                </template>
              </template>
              <template v-if="powerHtmlFenData.length > 0">
                <el-col
                  v-for="(file, index) in powerHtmlFenData"
                  :key="index + file.fileAddr + file.createTime"
                  :span="24"
                  class="col_content"
                  :style="{
                    display:
                      getFileType(file.fileAddr) === 'html' ? 'block' : 'none',
                  }"
                >
                  <iframe
                    v-if="getFileType(file.fileAddr) === 'html'"
                    :src="file.fileAddr"
                    :ref="'iframe' + index"
                    frameborder="0"
                    @load="iframeLoad(index + powerHtmlFenData.length)"
                    width="100%"
                    height="100%"
                  ></iframe>
                </el-col>
              </template>
            </template>
            <template v-else>
              <el-col
                v-for="(file, index) in diagramRelations"
                :key="index + file.fileAddr + file.createTime"
                :span="24"
                :style="{
                  display:
                    getFileType(file.fileAddr) === 'html' ? 'block' : 'none',
                }"
                class="col_content"
              >
                <iframe
                  v-if="getFileType(file.fileAddr) === 'html'"
                  :src="file.fileAddr"
                  :ref="'iframe' + index + diagramRelations.length"
                  frameborder="0"
                  width="100%"
                  height="100%"
                  @load="iframeLoad(index + diagramRelations.length)"
                ></iframe>
              </el-col>
            </template>
          </el-row>
        </el-card>
      </div>
      <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,
  queryAnalysisedType,
  queryAnalysisedEngine,
  queryAnalysisTypeConfig,
  queryDownloadFile,
  downloadFile,
} from "@/api/performance";
import CreateNewChart from "./createNewChart.vue";
import DetailCharts from "./components/DetailCharts.vue";
import JsonMarkerCharts from "./components/JsonMarkerCharts.vue";
import PlotlyCharts from "./components/PlotlyCharts.vue";
import { downLoadCsvFile } from "@/utils/common";
import { saveAs } from "file-saver";
import JSZip from "jszip";
import Papa from "papaparse";
import axios from "axios";
export default {
  components: { DetailCharts, JsonMarkerCharts, CreateNewChart, PlotlyCharts },
  data() {
    return {
      loadings: [],
      loading: false,
      fileCheckResult: null,
      fileCheckResult1: null,
      analysisTypeList: [],
      windEngineGroupList: [],
      generalFiles: [], //总图数组
      diagramRelations: [], //分图数组
      commentDescriptionVos: [],
      formInfo: {
        fieldEngineCode: null,
        analysisTypeCode: null,
      },
      csvData: [], // 解析后的数据
      csvHeaders: [], // CSV 表头
      rules: {},
      flage: false,
      csvData: [], // 解析后的数据
      csvHeaders: [], // CSV 表头
      generalFilesData: [],
      graphChartData: {},
      graphFilesData: [],
      powerHtmlZongData: [],
      powerHtmlFenData: [],
    };
  },
  created() {
    //获取分析 分析类型、机组编号 列表
    this.getWindCodeList();
  },
  mounted() {
    this.initializeLoading();
    // this.chartsTypeConfig();
  },
  methods: {
    //一键下载所有文件
    async downLoadAllTypeFile() {
      const result = await queryDownloadFile({
        fieldCode: this.$route.query.fieldCode,
        batchCode: this.$route.query.batchCode,
      });
      result.code === 200
        ? this.downLoadSingleType(result.data)
        : this.$message({ type: "error", message: result.msg });
    },
    // 下载单个类型的文件
    async downLoadSingleType(data) {
      const zip = new JSZip();
      let totalFiles = data.length;
      let completedFiles = 0;
      if (!("Notification" in window)) {
        alert("This browser does not support desktop notifications.");
      } else if (Notification.permission !== "granted") {
        Notification.requestPermission();
      }
      this.loading = true;
      for (let i = 0; i < data.length; i++) {
        try {
          const formData = new FormData();
          formData.append("batchCode", this.$route.query.batchCode);
          formData.append("analysisTypeCode", data[i]);
          formData.append("fieldCode", this.$route.query.fieldCode);
          // 获取 Blob 对象并提供进度回调
          await downloadFile(formData, (percentCompleted) => {
            // 创建或更新通知
            // if (Notification.permission === "granted") {
            //   new Notification(`Downloading file ${data[i]}`, {
            //     body: `Progress: ${percentCompleted}%`,
            //   });
            // }
          }).then((blob) => {
            if (blob instanceof Blob) {
              zip.file(`file_${data[i]}.zip`, blob);
              // console.log(`文件 ${data[i]} 加入到 ZIP 成功`);
              completedFiles += 1;
              this.loading = false;
              this.$notify({
                title: "提示",
                message: `已完成 ${completedFiles}/${totalFiles} 文件`,
                // duration: 0,
              });
              // console.log(`已完成 ${completedFiles}/${totalFiles} 文件`);
            } else {
              throw new Error(`返回的数据不是 Blob 对象`);
            }
          });
        } catch (error) {
          console.error(`下载文件 ${data[i]} 时发生错误:`, error);
        }
      }
      // 生成 ZIP 文件并下载
      zip
        .generateAsync({ type: "blob" })
        .then((content) => {
          saveAs(content, "Downloaded_Files.zip");
          // console.log("所有文件已打包并下载成功");
        })
        .catch((error) => {
          console.error("生成 ZIP 文件时发生错误:", error);
        });
    },
    async handleAnalysisType(e) {
      this.csvData = []; // 解析后的数据
      this.csvHeaders = [];
      const resEngineList = await queryAnalysisedEngine({
        batchCode: this.$route.query.batchCode,
        analysisTypeCode: e,
      });
      this.windEngineGroupList = resEngineList.data;
      this.formInfo.fieldEngineCode =
        resEngineList.data !== null && resEngineList.data.length > 0
          ? resEngineList.data[0].engineCode
          : null;
      this.getDetailInfo();
    },
    //分析类型图表样式
    async chartsTypeConfig() {
      const result = await queryAnalysisTypeConfig();
    },
    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);
    },
    // 查询
    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);
      this.loading = true;
      //获取详情信息
      try {
        const response = await analysisDetail(formData);
        if (response.data.length === 0 || response.data === null) {
          this.flage = true;
        } else {
          this.flage = false;
        }
        this.generalFiles = [];
        this.generalFiles =
          (response.data &&
            response.data.length > 0 &&
            response.data[0].generalFiles) ||
          [];
        this.diagramRelations = [];
        this.diagramRelations =
          (response.data &&
            response.data.length > 0 &&
            response.data[0].diagramRelations) ||
          [];
        this.commentDescriptionVos =
          (response.data &&
            response.data.length > 0 &&
            response.data[0].commentDescriptionVos) ||
          [];
        if (this.formInfo.analysisTypeCode === "yaw_error") {
          this.getCsvData(response.data[0].generalFiles[0].fileAddr);
        }
        this.initializeLoading();
        //有功功率的数据处理
        // 有功功率的数据处理
        if (this.formInfo.analysisTypeCode === "power_curve") {
          try {
            const generalFiles = response.data[0]?.generalFiles || [];

            this.powerHtmlZongData = [];
            this.powerHtmlFenData = [];
            this.generalFilesData = [];
            this.graphFilesData = [];
            const generalFilesData = await this.filterJsonData(
              generalFiles,
              "总图"
            );
            //分图数据
            const graphChartData = await this.filterJsonData(
              response.data[0].diagramRelations,
              "分图"
            );
            // 过滤掉 null 或没有 chartsData 的项
            this.generalFilesData = generalFilesData.filter(
              (item) => item && item.chartsData
            );
            this.graphFilesData = graphChartData.filter(
              (item) => item && item.chartsData
            );
            // // 这是处理分图数据的逻辑如果有数据，处理并设置图表数据
            // if (
            //   this.generalFilesData.length > 0 &&
            //   this.generalFilesData[0]?.chartsData?.data
            // ) {
            //   //总图数据
            //   const grapgFilterData =
            //     this.generalFilesData[0].chartsData.data.filter(
            //       (item) =>
            //         item.enginName === "合同功率曲线" ||
            //         item.enginName === this.formInfo.fieldEngineCode
            //     );
            //   //分图数据
            //   this.graphChartData = {
            //     oldData: this.generalFilesData[0].chartsData.data,
            //     ...this.generalFilesData[0].chartsData,
            //     data: grapgFilterData,
            //     formInfoFieldEngineCode: this.formInfo.fieldEngineCode,
            //   };
            // } else {
            //   // 如果没有数据，设置为 null 或其他默认值
            //   this.graphChartData = null;
            // }
          } catch (error) {
            console.error("Error processing power curve data:", error);
            this.graphChartData = null; // 处理错误时设置默认值
          } finally {
            this.loading = false; // 确保在所有情况下都设置 loading 状态
          }
        } else {
          this.loading = false;
        }
      } catch (error) {
        console.error(error);
        this.loading = false;
      }
    },
    //有功功率数据处理
    async filterJsonData(generalFiles, type) {
      return Promise.all(
        generalFiles.map(async (item, ind) => {
          const types = this.getFileType(item.fileAddr);
          if (types !== "html" && types !== "image") {
            //就是json 数据
            try {
              const resultChartsData = await axios.get(item.fileAddr);

              // 更新表格数据
              if (type === "总图") {
                return {
                  chartsData: {
                    ...resultChartsData.data,
                  },
                  powerCurveTableData: this.creatPowerCurveTableData(
                    resultChartsData.data
                  ).filter((val) => val !== undefined),
                };
              } else if (type === "分图") {
                return {
                  chartsData: {
                    ...resultChartsData.data,

                    formInfoFieldEngineCode: this.formInfo.fieldEngineCode,
                  },
                  powerCurveTableData: this.creatPowerCurveTableData(
                    resultChartsData.data
                  )
                    .filter((val) => val !== undefined)
                    .filter(
                      (item) =>
                        item?.enginName === this.formInfo.fieldEngineCode ||
                        item?.enginCode === this.formInfo.fieldEngineCode
                    ),
                };
              }
            } catch (error) {
              console.error("Error fetching chart data:", error);
              return null; // 如果有错误，返回 null
            }
          } else {
            if (type === "总图") {
              this.powerHtmlZongData.push(item);
            } else if (type === "分图") {
              this.powerHtmlFenData.push(item);
            }
            //html 展示
            return null; // 返回 null 以确保没有 undefined
          }
        })
      );
    },
    creatPowerCurveTableData(data) {
      // 风机名称\风机机型\风速\合同功率\实际功率
      // xData--风速
      // yData--实际功率
      // 合同功率曲线[...]---合同功率
      // enginName--风机名称
      // engineTypeName--风机机型
      const contractPowerCurve =
        data && data.data.filter((item) => item.enginName === "合同功率曲线");
      const powerCurveTableData =
        data &&
        data.data.map((item, ind) => {
          if (item.enginName !== "合同功率曲线") {
            const childData = item.xData.map((child, childInd) => {
              // 检查是否所有需要的数据都存在
              if (
                item.yData[childInd] !== undefined &&
                contractPowerCurve[0].yData[childInd] !== undefined
              ) {
                return {
                  xData: child,
                  yData:
                    item.yData[childInd] !== null ? item.yData[childInd] : 0.0,
                  contractPowerCurve: contractPowerCurve[0].yData[childInd],
                  enginName: item.enginName,
                  enginCode: item.enginCode,
                  engineTypeName: data.engineTypeName,
                };
              }
            });

            return childData;
          }
        });

      return powerCurveTableData.flat();
    },
    getCsvData(url) {
      // 使用 axios 获取 CSV 文件
      axios
        .get(url, { responseType: "blob" }) // 确保数据以 blob 格式返回
        .then((response) => {
          const reader = new FileReader();
          reader.onload = (e) => {
            const csvText = e.target.result;
            Papa.parse(csvText, {
              header: true, // 使用 CSV 第一行作为键
              complete: (result) => {
                this.csvHeaders = Object.keys(result.data[0]);
                this.csvData = result.data.filter(
                  (row) => Object.keys(row).length
                ); // 过滤空行
              },
              error: (error) => {
                console.error("CSV 解析错误：", error);
              },
            });
          };
          reader.readAsText(response.data); // 读取 blob 数据
        })
        .catch((error) => {
          console.error("无法获取 CSV 文件：", error);
        });
    },
    downLoadCsv(tableDatas) {
      const headers = ["风机名称", "风机机型", "风速", "合同功率", "实际功率"]; // CSV 文件的标题
      const data = tableDatas.map((item) => {
        return [
          item.enginName,
          item.engineTypeName,
          item.xData,
          item.yData,
          item.contractPowerCurve,
        ];
      });
      // 将标题和数据组合成 CSV 格式
      const csvContent = [
        headers.join(","),
        ...data.map((row) => row.join(",")),
      ].join("\n");
      const fileName = this.windEngineGroupList.filter(
        (item) => item.engineCode === this.formInfo.fieldEngineCode
      );
      downLoadCsvFile(csvContent, "风机有功功率数据");
      // downLoadCsvFile(csvContent, fileName[0].engineName);
    },
    async getWindCodeList() {
      this.loading = true;
      try {
        const resAnalysisedType = await queryAnalysisedType({
          batchCode: this.$route.query.batchCode,
        });
        if (resAnalysisedType.data && resAnalysisedType.data.length > 0) {
          const resEngineList = await queryAnalysisedEngine({
            batchCode: this.$route.query.batchCode,
            analysisTypeCode: resAnalysisedType.data[0].analysisTypeCode,
          });
          this.analysisTypeList = resAnalysisedType.data;
          this.windEngineGroupList = resEngineList.data;
          this.formInfo.fieldEngineCode =
            resEngineList.data !== null && resEngineList.data.length > 0
              ? resEngineList.data[0].engineCode
              : null;
          this.formInfo.analysisTypeCode =
            resAnalysisedType.data.length > 0
              ? resAnalysisedType.data[0].analysisTypeCode
              : "";
          this.loading = false;
        }
        this.getDetailInfo();
      } catch (error) {
        this.loading = false;
        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
      // 获取路径名部分
      let pathname = url.split("/").pop();
      // 截取路径名，去除加密乱码字符部分
      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: 550px !important;
    .el-col-12 {
      height: 100%;
    }
    .el-col-24 {
      height: 100%;
    }
    iframe {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
  }
}
::v-deep .gjp .el-skeleton {
  width: 90% !important;
  height: 90% !important;
  margin: 0 auto !important;
}
</style>