performance-test/src/views/overview/components/fault_all/index.vue

<!--
 * @Author: your name
 * @Date: 2025-01-13 13:56:55
 * @LastEditTime: 2025-01-16 10:01:41
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/overview/components/fault_all/index.vue
-->

<template>
  <div class="type-variable">
    <!-- 全场故障统计 -->
    <div class="left">
      <FilterChart
        :windList="windEngineGroupList"
        @getEnfineList="getEnfineList"
        @handlePrevious="handlePrevious"
        @handleNext="handleNext"
      ></FilterChart>
      <el-alert type="info" :closable="false">
        <template v-slot:title>
          <div style="display: flex; align-items: center">
            <i
              class="el-icon-info"
              style="font-size: 20px; margin-right: 5px"
            ></i>
            <h3>分析说明:</h3>
          </div>
        </template>
        <div style="font-size: 12px; margin-top: 10px">
          对全场机组各类故障的次数和时长进行统计
        </div>
      </el-alert>
      <div v-if="zongFaultCsvData.length > 0">
        <FaultAll
          :faultTypes="
            zongFaultCsvData &&
            zongFaultCsvData[0] &&
            zongFaultCsvData[0].data.map((item) => item.fault_detail)
          "
          :faultCounts="
            zongFaultCsvData &&
            zongFaultCsvData[0] &&
            zongFaultCsvData[0].data.map((item) => item.count)
          "
          :faultDurations="
            zongFaultCsvData &&
            zongFaultCsvData[0] &&
            zongFaultCsvData[0].data.map((item) => item.fault_time_sum)
          "
          :zongFaultCsvData="zongFaultCsvData"
        ></FaultAll>
        <template v-for="(itemCsv, indCsv) in zongFaultCsvData">
          <el-table
            :key="indCsv + 'indCsv'"
            :data="filteredData(itemCsv)"
            border
            style="width: 100%"
            align="center"
          >
            <el-table-column prop="fault_detail" label="故障类型">
            </el-table-column>
            <el-table-column prop="count" sortable label="故障次数（次）">
            </el-table-column>
            <el-table-column
              prop="fault_time_sum"
              sortable
              label="故障时长（秒）"
            >
            </el-table-column>
            <el-table-column align="right">
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入故障类型关键字搜索"
                />
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <el-empty description="暂无分析记录" v-else></el-empty>
      <el-tabs value="first">
        <el-tab-pane label="意见描述" name="first">
          <TinymceEditor
            ref="editor"
            v-model="comment"
            @input="handleEditorInput($event)"
            @onClick="onClick"
          >
          </TinymceEditor>
        </el-tab-pane>
      </el-tabs>
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="2" style="margin: 20px">
          <el-button type="primary" size="small">提交评论</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="right">
      <DicCard
        :batchCode="initBatchCode"
        :analysisTypeCode="'fault'"
        :commentDescriptionVos="commentDescriptionVos"
      >
      </DicCard>
    </div>
  </div>
</template>
<script>
import DicCard from "@/views/overview/components/dicCard/index.vue";
import FilterChart from "@/views/overview/components/filterChart/index.vue";
import FaultAll from "@/views/performance/components/chartsCom/FaultAll.vue";
import TinymceEditor from "@/components/Tinymce.vue";
import { analysisDetail, queryAnalysisedEngine } from "@/api/performance";
import Papa from "papaparse";
import axios from "axios";
export default {
  name: "fault_all",
  components: {
    DicCard,
    FilterChart,
    FaultAll,
    TinymceEditor,
  },
  props: {
    initBatchCode: {
      default: "",
      type: String,
    },
    analysisTypeCode: {
      default: "",
      type: String,
    },
    batchCodeList: {
      default: "",
      type: Array,
    },
  },
  data() {
    return {
      search: "",
      form: {
        value2: "",
      },
      windEngineGroupList: [], //批次风机列表
      fieldEngineCodes: [], //选中风机
      comment: "",
      options: [],
      zongFaultCsvHeader: [],
      zongFaultCsvData: [],
      fenFaultCsvHeader: [],
      fenFaultCsvData: [],
      commentDescriptionVos: [], //评论列表
      editableTabs: [],
    };
  },
  computed: {
    // 根据搜索关键字过滤数据
    filteredData() {
      return (itemCsv) => {
        // 如果有搜索关键词，则过滤数据
        if (this.search) {
          return itemCsv.data.filter((item) => {
            return item.fault_detail
              .toLowerCase()
              .includes(this.search.toLowerCase());
          });
        }
        // 没有搜索关键词时返回所有数据
        return itemCsv.data;
      };
    },
    filteredFenData() {
      return (itemCsv) => {
        // 如果有搜索关键词，则过滤数据
        if (this.searchFen) {
          return itemCsv.data.filter((item) => {
            return item.wind_turbine_name
              .toLowerCase()
              .includes(this.searchFen.toLowerCase());
          });
        }
        // 没有搜索关键词时返回所有数据
        return itemCsv.data;
      };
    },
  },
  watch: {
    initBatchCode(newVal) {
      if (newVal) {
        this.fetchData(); // 调用合并后的函数
      }
    },
    analysisTypeCode(newVal) {
      if (newVal) {
        this.fetchData(); // 调用合并后的函数
      }
    },
  },
  mounted() {
    if (this.initBatchCode && this.analysisTypeCode) {
      this.fetchData(); // 调用合并后的函数
    }
  },
  methods: {
    async handleComment() {
      try {
        await analysisCommentEdit({
          batchCode: this.initBatchCode,
          analysisTypeCode: this.analysisTypeCode,
          commentList: this.editableTabs.map((item) => {
            return {
              commentTypeCode: item.commentTypeCode,
              comment: item.commentTypeName === "分析评论" ? this.comment : "",
            };
          }),
        });
        this.$message({
          type: "success",
          message: "保存成功",
        });
        this.comment = "";
        this.getAnalysisDetail();
      } catch (e) {
        console.error(e);
        this.loading = false;
      }
    },
    onSubmit() {
      console.log("submit!");
    },
    // 封装的获取 CSV 数据方法
    fetchCsvData(analysisType, url) {
      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) => {
                // 根据分析类型设置不同的数据
                if (analysisType === "fault") {
                  if (Object.keys(result.data[0]).includes("fault_detail")) {
                    //总图故障统计展示
                    this.zongFaultCsvHeader.push(Object.keys(result.data[0]));
                    this.zongFaultCsvData.push({
                      data: result.data
                        .filter((row) => Object.keys(row).length)
                        .slice(0, result.data.length - 1),
                    });
                  } else {
                    //分机型故障统计处理
                    this.fenFaultCsvHeader.push(Object.keys(result.data[0]));
                    this.fenFaultCsvData.push({
                      data: result.data
                        .filter((row) => Object.keys(row).length)
                        .slice(0, result.data.length - 1),
                    });
                  }
                }
              },
              error: (error) => {
                console.error("CSV 解析错误：", error);
              },
            });
          };
          reader.readAsText(response.data); // 读取 blob 数据
        })
        .catch((error) => {
          console.error("无法获取 CSV 文件：", error);
        });
    },
    // 合并后的函数，处理数据请求
    async fetchData() {
      try {
        // 获取分析详情
        await this.getAnalysisDetail();

        // 获取风机列表
        await this.getWindEnfineList(this.initBatchCode, this.analysisTypeCode);
      } catch (err) {
        console.error("Failed to fetch data:", err);
      }
    },
    // 获取分析详情接口
    async getAnalysisDetail() {
      try {
        const result = await analysisDetail({
          batchCode: this.initBatchCode,
          analysisTypeCode: "fault",
          fieldEngineCodes:
            this.fieldEngineCodes.length === 0
              ? undefined
              : this.fieldEngineCodes,
        });
        if (
          result.data &&
          result.data[0] &&
          result.data[0].commentTypeRelations
        ) {
          this.editableTabs = result.data[0].commentTypeRelations;
        }

        //当前评论展示获取
        if (
          result.data &&
          result.data[0] &&
          result.data[0].commentDescriptionVos
        ) {
          this.commentDescriptionVos = result.data[0].commentDescriptionVos;
        }

        if (result.data && result.data[0] && result.data[0].generalFiles) {
          result.data[0].generalFiles.map((item) => {
            if (item.fileAddr) {
              this.zongFaultCsvHeader = [];
              this.zongFaultCsvData = [];
              this.fetchCsvData("fault", item.fileAddr);
            }
          });
        } else {
          this.zongFaultCsvHeader = [];
          this.zongFaultCsvData = [];
        }
      } catch (err) {
        console.error("Failed to fetch analysis details:", err);
      }
    },
    // 请求风机列表
    async getWindEnfineList(batchCode, analysisTypeCode) {
      // console.log("请求风机列表 分钟级");
      const resEngineList = await queryAnalysisedEngine({
        batchCode: batchCode,
        analysisTypeCode,
      });
      this.windEngineGroupList = resEngineList.data;
    },
    handleEditorInput(index, newVal) {
      // 更新对应的 comment 值
      // 如果该功能没有实现，可以删除这个方法
    },
    //获取选中风机list
    getEnfineList(data) {
      this.fieldEngineCodes = data;
      console.log(this.fieldEngineCodes, "this.fieldEngineCodes");
    },
    //下一条
    handleNext() {
      const index = this.batchCodeList.findIndex(
        (item) => item === this.initBatchCode
      );
      if (index === this.batchCodeList.length - 1) {
        this.$message.warning("已经是最后一个分析结果了");
        return;
      }
      this.$emit("setInitBathCode", this.batchCodeList[index + 1]);
    },
    //上一条
    handlePrevious() {
      const index = this.batchCodeList.findIndex(
        (item) => item === this.initBatchCode
      );
      if (index === 0) {
        this.$message.warning("没有上一条了");
        return;
      }
      this.$emit("setInitBathCode", this.batchCodeList[index - 1]);
    },
    onClick() {},
  },
};
</script>

<style scoped lang="scss">
.type-variable {
  display: flex;
  height: 90%;
  overflow: hidden;

  .left {
    width: 30%;
    height: 100%;
    overflow: auto;
    padding: 20px;
    flex: 1;
  }

  .right {
    width: 250px;
    height: 100%;
    overflow: hidden;
  }
}
</style>