性能分析描述编辑链条

README.md

@@ -1,11 +1,12 @@
 # pref-web
 
 #### 介绍
+
 风机数据管理平台
 
 #### 软件架构
-软件架构说明
 
+软件架构说明
 
 #### 安装教程
 
@@ -26,12 +27,15 @@
 3.  提交代码
 4.  新建 Pull Request
 
-
 #### 特技
 
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
+1.  使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
 2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
 3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
 4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
 5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
 6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+
+个人工作台（自由托动、定制化）分析辅助工具
+各种变量对比分析、拖动轮播
+分析事件中的 loading 状态数据没请求到的

package.json

@@ -9,6 +9,8 @@
   "dependencies": {
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "^0.4.0",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "axios": "^1.6.8",
     "core-js": "^3.8.3",
     "css-minimizer-webpack-plugin": "^7.0.0",

src/api/performance.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-06-03 09:29:50
- * @LastEditTime: 2024-06-14 14:02:53
+ * @LastEditTime: 2024-06-17 14:31:34
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/api/performance。.js
@@ -145,3 +145,21 @@ export function delAnalysisCommentType(data) {
     data,
   });
 }
+//富文本但文件上传
+export function uploadFile(data) {
+  return request({
+    url: "/energy-manage-service/api/check/upload",
+    method: "post",
+    data,
+  });
+}
+
+//富文本编辑，性能分析编辑描述
+
+export function analysisCommentEdit(data) {
+  return request({
+    url: "/energy-manage-service/analysisComment/analysisCommentEdit",
+    method: "post",
+    data,
+  });
+}

src/components/Tinymce.vue

@@ -1,188 +1,181 @@
 <template>
-  <div>
-    <quill-editor
-      ref="quillEditor"
-      v-model="content"
-      :options="editorOptions"
-      @ready="onEditorReady"
+  <div style="border: 1px solid #ccc">
+    <Toolbar
+      style="border-bottom: 1px solid #ccc"
+      :editor="editor"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+    />
+    <Editor
+      style="height: 500px; overflow-y: hidden"
+      v-model="html"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      @onCreated="onCreated"
+      @change="handleEditorChange"
+    />
+    <input
+      type="file"
+      ref="fileInput"
+      style="display: none"
+      @change="handleFileUpload"
     />
-    <button @click="submit">确定</button>
   </div>
 </template>
 
 <script>
-import { quillEditor } from "vue-quill-editor";
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import "quill/dist/quill.bubble.css";
+import Vue from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { Boot } from "@wangeditor/editor";
+import { uploadFile } from "@/api/performance";
 
-export default {
-  components: {
-    quillEditor,
-  },
+const customMenuKey = "customUpload";
+let isCustomMenuRegistered = false;
+
+function registerCustomUploadIcon(componentInstance) {
+  if (isCustomMenuRegistered) return;
+
+  const customUploadMenu = {
+    key: customMenuKey,
+    factory() {
+      return {
+        tag: "button",
+        getValue(editor) {
+          return editor.getHtml();
+        },
+        isActive(editor) {
+          return false;
+        },
+        exec: () => {
+          componentInstance.uploadFile();
+        },
+        isDisabled(editor) {
+          return false;
+        },
+        title: "上传文件",
+        iconSvg: `<svg t="1718589544286" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1591" width="200" height="200">
+          <path d="M1024 693.248q0 25.6-8.704 48.128t-24.576 40.448-36.864 30.208-45.568 16.384l1.024 1.024-17.408 0-4.096 0-4.096 0-675.84 0q-5.12 1.024-16.384 1.024-39.936 0-74.752-15.36t-60.928-41.472-40.96-60.928-14.848-74.752 14.848-74.752 40.96-60.928 60.928-41.472 74.752-15.36l1.024 0q-1.024-8.192-1.024-15.36l0-16.384q0-72.704 27.648-137.216t75.776-112.128 112.128-75.264 136.704-27.648 137.216 27.648 112.64 75.264 75.776 112.128 27.648 137.216q0 37.888-8.192 74.24t-22.528 69.12q5.12-1.024 10.752-1.536t10.752-0.512q27.648 0 52.736 10.752t43.52 29.696 29.184 44.032 10.752 53.76zM665.6 571.392q20.48 0 26.624-4.608t-8.192-22.016q-14.336-18.432-31.744-48.128t-36.352-60.416-38.4-57.344-37.888-38.912q-18.432-13.312-27.136-14.336t-25.088 12.288q-18.432 15.36-35.84 38.912t-35.328 50.176-35.84 52.224-36.352 45.056q-18.432 18.432-13.312 32.768t25.6 14.336l16.384 0q9.216 0 19.968 0.512t20.992 0.512l17.408 0q14.336 1.024 18.432 9.728t4.096 24.064q0 17.408-0.512 30.72t-0.512 25.6-0.512 25.6-0.512 30.72q0 7.168 1.536 15.36t5.632 15.36 12.288 11.776 21.504 4.608l23.552 0q9.216 0 27.648 1.024 24.576 0 28.16-12.288t3.584-38.912q0-23.552 0.512-42.496t0.512-51.712q0-23.552 4.608-36.352t19.968-12.8q11.264 0 32.256-0.512t32.256-0.512z" p-id="1592"></path>
+        </svg>`,
+        text: "上传文件",
+      };
+    },
+  };
+
+  Boot.registerMenu({
+    key: customMenuKey,
+    ...customUploadMenu,
+  });
+
+  isCustomMenuRegistered = true;
+}
+
+export default Vue.extend({
+  components: { Editor, Toolbar },
   props: {
     value: {
       type: String,
-      defaultValue: "",
+      default: "",
     },
   },
   data() {
     return {
-      content: "",
-      editorOptions: {
-        theme: "snow",
-        modules: {
-          toolbar: {
-            container: [
-              [{ header: "1" }, { header: "2" }, { font: [] }],
-              [{ size: [] }],
-              ["bold", "italic", "underline", "strike", "blockquote"],
-              [
-                { list: "ordered" },
-                { list: "bullet" },
-                { indent: "-1" },
-                { indent: "+1" },
-              ],
-              ["link", "image", "video", "custom-file"], // 添加自定义文件图标
-              ["clean"],
-            ],
-            handlers: {
-              // image: this.imageHandler,
-              video: this.videoHandler,
-              "custom-file": this.fileHandler, // 自定义文件处理函数
+      editor: null,
+      html: "<p>hello</p>",
+      toolbarConfig: {
+        excludeKeys: ["group-video"], // 移除上传视频功能
+      },
+      editorConfig: {
+        placeholder: "请输入内容...",
+        MENU_CONF: {
+          // 上传图片
+          uploadImage: {
+            async customUpload(file, insertFn) {
+              console.log(file, "上传文件");
+              if (!/^(image\/png|image\/jpeg|image\/jpg)$/i.test(file.type)) {
+                alert("只能上传格式为png、jpg、jpeg的图片文件！");
+                return;
+              }
+              const form = new FormData();
+              form.append("file", file);
+              uploadFile(form)
+                .then((res) => {
+                  let data = res.data;
+                  console.log(data, 7777);
+                  insertFn(`${data}`);
+                  Vue.prototype.$message({
+                    type: "success",
+                    message: `${file.name}上传成功`,
+                  });
+                })
+                .catch((err) => console.log(err, 888));
             },
           },
         },
       },
+      mode: "default",
     };
   },
   created() {
-    this.content = this.value;
+    this.html = this.value;
+    registerCustomUploadIcon(this);
   },
   methods: {
-    submit() {
-      console.log(this.content, "this.$refs.quillEditor.getContents();");
-    },
-    onEditorReady(editor) {
-      console.log(editor, "editor");
-    },
-    imageHandler() {
-      const input = document.createElement("input");
-      input.setAttribute("type", "file");
-      input.setAttribute("accept", "image/*");
-      input.click();
-
-      input.onchange = async () => {
-        const file = input.files[0];
-        if (file) {
-          const formData = new FormData();
-          formData.append("file", file);
-          const quill = this.$refs.quillEditor.quill;
-          const range = quill.getSelection();
-          quill.insertEmbed(range.index, "image", formData);
-          // try {
-          //   const response = await this.uploadImage(formData);
-          //   const url = response.data.url; // 根据你的实际响应数据结构
-          //   const quill = this.$refs.quillEditor.quill;
-          //   const range = quill.getSelection();
-          //   quill.insertEmbed(range.index, "image", url);
-          // } catch (error) {
-          //   console.error("Image upload failed", error);
-          // }
-        }
+    onCreated(editor) {
+      this.editor = Object.seal(editor);
+      this.toolbarConfig.insertKeys = {
+        index: 22,
+        keys: [customMenuKey],
       };
     },
-    videoHandler() {
-      const input = document.createElement("input");
-      input.setAttribute("type", "file");
-      input.setAttribute("accept", "video/*");
-      input.click();
-
-      input.onchange = async () => {
-        const file = input.files[0];
-        if (file) {
-          const formData = new FormData();
-          formData.append("file", file);
-
-          try {
-            const response = await this.uploadVideo(formData);
-            const url = response.data.url;
-            const quill = this.$refs.quillEditor.quill;
-            const range = quill.getSelection();
-            quill.insertEmbed(range.index, "video", url);
-          } catch (error) {
-            console.error("Video upload failed", error);
+    handleFileUpload(event) {
+      const file = event.target.files[0];
+      if (!file) return;
+      if (
+        !/^(text\/html|application\/pdf|application\/msword|application\/vnd\.ms-excel|application\/vnd\.ms-office|application\/vnd\.openxmlformats-officedocument\.spreadsheetml\.sheet|application\/vnd\.openxmlformats-officedocument\.wordprocessingml\.document|application\/vnd\.openxmlformats-officedocument\.spreadsheetml\.sheet|text\/csv)$/i.test(
+          file.type
+        )
+      ) {
+        alert("只能上传格式为html、pdf、word、excel、csv、docx、xlsx的文件！");
+        return;
+      }
+      const form = new FormData();
+      form.append("file", file);
+      uploadFile(form)
+        .then((res) => {
+          let data = res.data;
+          console.log(data, file.type, 7777, this.editor);
+          if (this.editor) {
+            this.editor.dangerouslyInsertHtml(
+              `<a href="${data}" target="_blank">点击查看 ${file.name}</a>`
+            );
+            this.$message({
+              type: "success",
+              message: `${file.name}上传成功`,
+            });
+          } else {
+            console.error("Editor instance is not available.");
           }
-        }
-      };
+        })
+        .catch((err) => console.log(err, 888));
     },
-    fileHandler() {
-      const input = document.createElement("input");
-      input.setAttribute("type", "file");
-      input.setAttribute("accept", ".doc,.docx,.pdf");
-      input.click();
-
-      input.onchange = async () => {
-        const file = input.files[0];
-        if (file) {
-          const formData = new FormData();
-          formData.append("file", file);
-          const quill = this.$refs.quillEditor.quill;
-          const range = quill.getSelection();
-          quill.insertText(
-            range.index,
-            `File uploaded: ${file.name} (URL: ${formData})`
-          );
-          // try {
-          //   const response = await this.uploadFile(formData);
-          //   const url = response.data.url;
-          //   const quill = this.$refs.quillEditor.quill;
-          //   const range = quill.getSelection();
-          //   quill.insertText(
-          //     range.index,
-          //     `File uploaded: ${file.name} (URL: ${url})`
-          //   );
-          // } catch (error) {
-          //   console.error("File upload failed", error);
-          // }
-        }
-      };
+    uploadFile() {
+      this.$refs.fileInput.click();
     },
-    async uploadImage(formData) {
-      const response = await axios.post("/api/upload/image", formData, {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
-      });
-      return response;
+    handleEditorChange(newVal) {
+      this.$emit("input", newVal);
     },
-    async uploadVideo(formData) {
-      const response = await axios.post("/api/upload/video", formData, {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
-      });
-      return response;
+  },
+  watch: {
+    value(newVal) {
+      this.html = newVal;
     },
-    async uploadFile(formData) {
-      const response = await axios.post("/api/upload/file", formData, {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
-      });
-      return response;
+    html(newVal) {
+      this.$emit("input", newVal);
     },
   },
-};
+});
 </script>
 
 <style scoped>
-/* 添加你需要的样式 */
-::v-deep .ql-snow.ql-toolbar .ql-custom-file {
-  background: url("../assets/upload.png");
-  background-size: 16px 16px;
-  background-position: center center;
-  background-repeat: no-repeat;
-  /*background: red;*/
-}
+/* Add your custom styles here */
 </style>

src/main.js

@@ -7,7 +7,7 @@ import "./icons/index"; // icon
 // 引入element ui
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
-
+import "@wangeditor/editor/dist/css/style.css";
 // 引入css
 import "./styles/index.scss";
 // 注册svg组件

src/views/ledger/component/windsiteup.vue

@@ -296,4 +296,4 @@ export default {
 .uploaddemo2:hover {
   border: 1px dashed #409eff;
 }
-</style>
+</style>

src/views/performance/components/EditAnalysis.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:14:23
- * @LastEditTime: 2024-06-14 16:06:02
+ * @LastEditTime: 2024-06-17 14:56:23
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/EditAnalysis.vue
@@ -113,16 +113,17 @@
           :label="item.commentTypeName"
           :name="item.commentTypeCode"
         >
-          <!-- {{ item.comment }} -->
           <tinymce-editor
             ref="editor"
             v-model="item.comment"
             :disabled="disabled"
+            @input="handleEditorInput(index, $event)"
             @onClick="onClick"
           >
           </tinymce-editor>
         </el-tab-pane>
       </el-tabs>
+      <button @click="handleComment">确定</button>
     </div>
 
     <el-dialog
@@ -160,6 +161,7 @@ import {
   analysisEditQuery,
   delAnalysisCommentType,
   addAnalysisCommentType,
+  analysisCommentEdit,
 } from "@/api/performance";
 import { getWindEngineGroup } from "@/api/ledger";
 import TinymceEditor from "@/components/Tinymce.vue";
@@ -207,6 +209,35 @@ export default {
     this.getWindCodeList();
   },
   methods: {
+    async handleComment() {
+      console.log(this.editableTabs, "this.editableTabs");
+      try {
+        const res = 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.getDetailInfo();
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    handleEditorInput(index, newVal) {
+      // 更新对应的 comment 值
+      this.$set(this.editableTabs, index, {
+        ...this.editableTabs[index],
+        comment: newVal,
+      });
+    },
     handleEngineCode(e) {
       console.log(e);
       this.engineCode = e;
@@ -324,7 +355,6 @@ export default {
               type: "success",
               message: "添加成功",
             });
-            // this.editableTabsValue=
             this.getWindCodeList();
           } catch (e) {
             console.error(e);
@@ -344,7 +374,6 @@ export default {
         const obj = this.editableTabs.filter(
           (item) => item.commentTypeCode === targetName
         )[0];
-        console.log(obj, "obj");
         if (
           obj.commentTypeName === "分析内容与可视化分析" ||
           obj.commentTypeName === "现象描述" ||
@@ -372,6 +401,10 @@ export default {
                 type: "success",
                 message: "删除成功!",
               });
+              this.editableTabsValue =
+                this.editableTabs.length > 0
+                  ? this.editableTabs[0].commentTypeCode
+                  : "";
               this.getWindCodeList();
             } catch (error) {
               console.error(error);

vue.config.js

@@ -66,8 +66,8 @@ module.exports = {
       "/api": {
         // target: "http://192.168.5.4:16200", // 石月
         // target: "http://192.168.50.235:16200", //内网
-        // target: "http://192.168.5.15:16200",
-        target: "http://106.120.102.238:16600", //外网
+        target: "http://192.168.5.15:16200",
+        // target: "http://106.120.102.238:16600", //外网
         changeOrigin: true,
         pathRewrite: {
           "^/api": "", // 需要regit write重写的,