performance-test/src/views/performance/components/EditAnalysis.vue

<!--
 * @Author: your name
 * @Date: 2024-05-29 09:14:23
 * @LastEditTime: 2024-06-25 17:03:54
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/EditAnalysis.vue
-->
<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" label-width="120px">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基础筛选：" name="1">
          <el-row class="flex-wrap-row" :gutter="5">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <el-form-item label="分析类型" prop="configAnalysis">
                <el-select
                  v-model="form.configAnalysis"
                  placeholder="请选择分析类型"
                  size="small"
                  clearable
                >
                  <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 :xs="24" :sm="24" :md="12" :lg="8" :xl="5" prop="turbines">
              <el-form-item label="机组编号">
                <el-select
                  clearable
                  v-model="form.turbines"
                  placeholder="请选择机组编号"
                  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="5">
              <el-form-item class="searchFrom">
                <el-button type="primary" @click="onSubmit" size="small"
                  >查询</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <el-card shadow="always" class="box-card">
      <el-row>
        <el-col :span="12"
          ><div class="left">
            <div>
              <span>机组编号：</span>
              <el-select
                v-model="engineCode"
                placeholder="请选择机组编号"
                size="small"
                clearable
                @change="handleEngineCode"
              >
                <el-option
                  v-for="item in windEngineGroupList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
            <div>
              1.额定容量：{{
                windDetail.ratedCapacity ? windDetail.ratedCapacity : 0
              }}
              <span> (kW)</span>
            </div>
            <!-- <div>2.发电机类型（Generator Type）:{{}}</div> -->
            <div>2.风机编号:{{ windDetail.engineCode }}</div>
            <div>3.经度（Longitude）：{{ windDetail.longitude }}</div>
            <div>4.维度（Dimensionality）：{{ windDetail.latitude }}</div>
            <div>
              5.海拔高度（Altitude）：{{
                windDetail.elevationHeight ? windDetail.elevationHeight : 0
              }}
              <span>(米)</span>
            </div>
            <div>6.风机名称：{{ windDetail.engineName }}</div>
            <div>
              7.是否标杆（Benchmarking or not）：{{
                windDetail.sightcing == 1 ? "是" : "否"
              }}
            </div>
            <div>8.风场编号：{{ windDetail.fieldCode }}</div>
            <div>
              9.轮毂高度：{{ windDetail.hubHeight ? windDetail.hubHeight : 0 }}
              <span>(米)</span>
            </div>
            <div>10.机型编号：{{ windDetail.millTypeCode }}</div>
            <div>
              11.切入风速：{{
                windDetail.ratedCutInWindspeed
                  ? windDetail.ratedCutInWindspeed
                  : 0
              }}<span>(m/s)</span>
            </div>
            <div>
              12.切出风速：{{
                windDetail.ratedCutOutWindspeed
                  ? windDetail.ratedCutOutWindspeed
                  : 0
              }}<span>(m/s)</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12" v-loading="htmlLoading">
          <div class="right">
            <iframe
              v-if="htmlLoading"
              :src="windDetail.elevationHeight"
              frameborder="0"
              @load="iframeLoad"
              width="100%"
              height="100%"
            ></iframe>
            <img
              v-else
              style="width: 100%"
              src="../../../assets/img/loadingError.webp"
              alt=""
            />
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-empty :image-size="200" v-if="flage"></el-empty>
    <div class="abalysisType" v-else>
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        editable
        @edit="handleTabsEdit"
      >
        <el-tab-pane
          :key="item.commentTypeCode"
          v-for="(item, index) in editableTabs"
          :label="item.commentTypeName"
          :name="item.commentTypeCode"
        >
          <tinymce-editor
            ref="editor"
            v-model="item.comment"
            :disabled="disabled"
            @input="handleEditorInput(index, $event)"
            @onClick="onClick"
          >
          </tinymce-editor>
        </el-tab-pane>
      </el-tabs>
      <div style="margin-top: 20px; display: flex; justify-content: end">
        <el-button type="primary" @click="handleComment"
          >提交分析编辑描述</el-button
        >
      </div>
    </div>

    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :inline="true"
        ref="formInline"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="类型名称" prop="commentTypeName">
          <el-input
            v-model="formInline.commentTypeName"
            placeholder="请输入类型名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAnalysisNameFn('formInline')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  analysisDetail,
  analysisEditQuery,
  delAnalysisCommentType,
  addAnalysisCommentType,
  analysisCommentEdit,
} from "@/api/performance";
import { getWindEngineGroup } from "@/api/ledger";
import TinymceEditor from "@/components/Tinymce.vue";
export default {
  components: {
    TinymceEditor,
  },
  data() {
    return {
      htmlLoading: true,
      loading: false,
      engineCode: null, //台账机组编号
      windDetail: {},
      flage: false,
      rules: {
        commentTypeName: {
          required: true,
          message: "请输入类型名称",
          trigger: "blur",
        },
      },
      value4: "",
      value1: "",
      form: {
        configAnalysis: "",
        turbines: "",
      },
      activeNames: ["1"],
      msg: "",
      disabled: false,
      value: "",
      options: [],
      editableTabsValue: "",
      formInline: {
        commentTypeName: "",
      },
      dialogVisible: false,
      editableTabs: [],
      analysisTypeList: [],
      windEngineGroupList: [],
      formData: { content: "<p>Hello, Tinymce!</p>" },
      tabIndex: 2,
    };
  },
  created() {
    //获取分析 分析类型、机组编号 列表
    this.getWindCodeList();
  },
  methods: {
    iframeLoad() {
      this.htmlLoading = false;
    },
    async handleComment() {
      this.loading = true;
      try {
        await analysisCommentEdit({
          batchCode: this.$route.query.batchCode,
          analysisTypeCode: this.form.configAnalysis,
          commentList: this.editableTabs.map((item) => {
            return {
              commentTypeCode: item.commentTypeCode,
              comment: item.comment,
            };
          }),
        });
        this.$message({
          type: "success",
          message: "保存成功",
        });
        this.loading = false;
        this.getDetailInfo();
      } catch (e) {
        console.error(e);
        this.loading = false;
      }
    },
    handleEditorInput(index, newVal) {
      // 更新对应的 comment 值
      this.$set(this.editableTabs, index, {
        ...this.editableTabs[index],
        comment: newVal,
      });
    },
    handleEngineCode(e) {
      console.log(e);
      this.engineCode = e;
      this.getWindEngList();
    },
    async getWindEngList() {
      try {
        const res = await getWindEngineGroup({
          engineCode: this.engineCode,
        });
        this.windDetail = res.data;
      } catch (error) {
        console.error(error);
      }
    },
    async getDetailInfo() {
      const formData = new FormData();
      formData.append("batchCode", this.$route.query.batchCode);
      formData.append("analysisTypeCode", this.form.configAnalysis);
      formData.append("fieldEngineCode", this.form.turbines);
      //获取详情信息
      this.loading = true;
      try {
        const response = await analysisDetail(formData);
        if (response.data.length === 0 || response.data === null) {
          this.flage = true;
        } else {
          this.flage = false;
        }
        if (
          response.data.length > 0 &&
          response.data[0].commentDescriptionVos &&
          response.data[0].commentDescriptionVos.length > 0
        ) {
          this.editableTabs = this.mergeData(
            response.data[0].commentDescriptionVos,
            response.data[0].commentTypeRelations
          );
          this.editableTabsValue =
            this.editableTabs.length > 0
              ? this.editableTabs[0].commentTypeCode
              : "";
        }
        this.loading = false;
      } catch (error) {
        console.error(error);
        this.loading = false;
      }
    },
    mergeData(arr, brr) {
      // 创建一个新的结果数组
      const result = [];
      // 遍历 brr 数组
      brr.forEach((brrItem) => {
        // 在 arr 中寻找具有相同 commentTypeCode 的项
        const foundItem = arr.find(
          (arrItem) => arrItem.commentTypeCode === brrItem.commentTypeCode
        );
        if (foundItem) {
          // 如果找到了相同的项，就合并它们
          result.push({
            ...foundItem,
            ...brrItem,
          });
        } else {
          // 如果没有找到相同的项，就将 brrItem 添加到结果数组中
          result.push(brrItem);
        }
      });
      // 返回结果数组
      return result;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async getWindCodeList() {
      this.loading = true;
      try {
        const response = await analysisEditQuery({
          batchCode: this.$route.query.batchCode,
        });
        this.analysisTypeList = response.data.analysisTypeList;
        this.windEngineGroupList = response.data.windEngineGroupList;
        this.form.configAnalysis = response.data.analysisTypeList[0].typeCode;
        this.form.turbines = response.data.windEngineGroupList[0];
        this.engineCode = response.data.windEngineGroupList[0];
        this.getDetailInfo();
        this.getWindEngList();
        this.loading = false;
      } catch (error) {
        console.error(error);
        this.loading = false;
      }
    },
    // 鼠标单击的事件
    onClick(e, editor) {
      console.log("Element clicked");
      console.log(e);
      console.log(editor);
    },
    onSubmit() {
      this.getDetailInfo();
    },
    //新增分析结果类型
    addAnalysisNameFn(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          try {
            await addAnalysisCommentType({
              batchCode: this.$route.query.batchCode,
              analysisTypeCode: this.form.configAnalysis,
              commentTypeName: this.formInline.commentTypeName,
            });
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
            this.loading = false;
            this.$message({
              type: "success",
              message: "添加成功",
            });
            this.getWindCodeList();
          } catch (e) {
            console.error(e);
            this.loading = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        this.dialogVisible = true;
        this.formInline.commentTypeName = "";
      }
      if (action === "remove") {
        const obj = this.editableTabs.filter(
          (item) => item.commentTypeCode === targetName
        )[0];
        if (
          obj.commentTypeName === "分析内容与可视化分析" ||
          obj.commentTypeName === "现象描述" ||
          obj.commentTypeName === "原因描述" ||
          obj.commentTypeName === "排查建议"
        ) {
          this.$message({
            type: "error",
            message:
              "分析内容与可视化分析、现象描述、原因描述、排查建议 分析类型不可删除！",
          });
          return;
        }
        this.$confirm("此操作将永久删除该评价类型, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            this.loading = true;
            try {
              const formData = new FormData();
              formData.append("commentTypeCode", targetName);
              await delAnalysisCommentType(formData);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.editableTabsValue =
                this.editableTabs.length > 0
                  ? this.editableTabs[0].commentTypeCode
                  : "";
              this.getWindCodeList();
              this.loading = false;
            } catch (error) {
              console.error(error);
              this.loading = false;
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.box-card {
  margin: 10px 0;
  // box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  width: 100%;
  font-size: 14px;
  .el-card__body {
    width: 100%;
    .left {
      > div {
        line-height: 3;
      }
    }
  }
}
::v-deep .searchFrom {
  .el-form-item__content {
    display: flex !important;
    justify-content: end !important;
    align-items: center !important;
    i {
      margin-left: 10px;
      font-size: 20px;
    }
  }
}
::v-deep.el-input--small .el-input__inner {
  width: 200px !important;
}
.demo-input-suffix {
  display: flex !important;
}
::v-deep.demo-input-suffix .el-input--small {
  width: 100px !important;
}
::v-deep.demo-input-suffix .el-input--small .el-input__inner {
  width: 90px !important;
}
.abalysisType {
  margin-top: 30px;
}
</style>