新增性能分析页面

package.json

@@ -16,9 +16,11 @@
     "happypack": "^5.0.1",
     "ol": "^9.2.3",
     "qs": "^6.12.0",
+    "quill": "^2.0.2",
     "svg-sprite-loader": "^6.0.11",
     "terser-webpack-plugin": "^5.3.10",
     "vue": "^2.6.14",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",
     "vuex-persistedstate": "^4.1.0",

src/components/Tinymce.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <quill-editor
+      ref="quillEditor"
+      v-model="content"
+      :options="editorOptions"
+      @ready="onEditorReady"
+    />
+  </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 Quill from "quill";
+
+export default {
+  components: {
+    quillEditor,
+  },
+  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"],
+              ["clean"],
+            ],
+            handlers: {
+              image: this.imageHandler,
+              video: this.videoHandler,
+            },
+          },
+        },
+      },
+    };
+  },
+  methods: {
+    onEditorReady(editor) {
+      // Any additional setup for the editor can be done here
+    },
+    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);
+
+          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);
+          }
+        }
+      };
+    },
+    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);
+          }
+        }
+      };
+    },
+    async uploadImage(formData) {
+      // 在这里实现你的图片上传逻辑
+      // 示例：使用 axios 进行上传
+      const response = await axios.post("/api/upload/image", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+      return response;
+    },
+    async uploadVideo(formData) {
+      // 在这里实现你的视频上传逻辑
+      // 示例：使用 axios 进行上传
+      const response = await axios.post("/api/upload/video", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+      return response;
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 添加你需要的样式 */
+</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";
-Vue.use(ElementUI);
+
 // 引入css
 import "./styles/index.scss";
 // 注册svg组件
@@ -16,7 +16,9 @@ Vue.component("SvgIcons", SvgIcons);
 // 序列化post方法
 import qs from "qs";
 Vue.prototype.$qs = qs;
+// Vue.prototype.$tinymce = tinymce;
 
+Vue.use(ElementUI);
 // 引入tailwind
 // https://www.tailwindcss.cn/docs/installation
 

src/styles/base.css

@@ -295,6 +295,6 @@ body {
 .el-dialog__body {
   padding-top: 15px;
 }
-.el-form-item{
+.el-form-item {
   margin-bottom: 10px;
 }

src/styles/global.scss

@@ -1,11 +1,25 @@
-.el-button--primary {
+.el-button--primary,
+.el-button--primary:focus,
+.el-button--primary:hover {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
   color: var(--text-color) !important;
 }
+.el-dialog__header {
+  background-color: var(--primary-color);
+  color: var(--text-color) !important;
+}
+.el-dialog__header .el-dialog__title {
+  color: var(--text-color) !important;
+}
+.el-button--primary:focus,
+.el-button--primary:hover {
+  opacity: 0.7;
+}
 .el-button--text {
   color: var(--primary-color);
 }
+.el-button--default:focus,
 .el-button--default:hover {
   border-color: var(--primary-color);
   background-color: var(--bgopacity-color) !important;
@@ -36,12 +50,26 @@
 .el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
   color: var(--primary-color) !important;
 }
+
+.el-dialog__body .el-table th.el-table__cell {
+  background-color: var(--text-color);
+  color: #67696d !important;
+}
 .el-checkbox__input.is-checked .el-checkbox__inner,
 .el-checkbox__input.is-indeterminate .el-checkbox__inner {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
   // color: var(--text-color);
 }
+.el-tabs__active-bar {
+  background-color: var(--primary-color);
+}
+.el-tabs__item:hover {
+  color: var(--primary-color);
+}
+.el-tabs__item.is-active {
+  color: var(--primary-color);
+}
 // .el-switch {
 //   background-color: var(--primary-color);
 //   border-color: var(--primary-color);

src/views/performance/assetssMag.vue

@@ -24,7 +24,6 @@
       </el-form>
     </div>
     <div class="list-page">
-      <div class="newly"></div>
       <el-table
         v-loading="loading"
         class="center-align-table"
@@ -64,14 +63,20 @@
         </el-table-column>
         <el-table-column prop="roleName" align="center" label="异常信息">
           <template slot-scope="scope">
-            <el-button @click="compile(scope.row)" type="text" size="small"
+            <el-button
+              @click="abnormalDialog(scope.row, '异常详情')"
+              type="text"
+              size="small"
               >异常详情</el-button
             >
           </template>
         </el-table-column>
         <el-table-column prop="roleName" align="center" label="分析记录">
           <template slot-scope="scope">
-            <el-button @click="compile(scope.row)" type="text" size="small"
+            <el-button
+              @click="handleAssetssDetail(scope.row)"
+              type="text"
+              size="small"
               >分析详情</el-button
             >
           </template>
@@ -86,14 +91,16 @@
           width="200"
         >
           <template slot-scope="scope">
-            <el-button @click="compile(scope.row)" type="text" size="small"
+            <el-button
+              @click="handleAssetss(scope.row)"
+              type="text"
+              size="small"
               >分析</el-button
             >
             <el-button
-              @click="setState(1, scope.row.userId)"
+              @click="abnormalDialog(scope.row, '异常描述')"
               type="text"
               size="small"
-              style="color: #f90"
               >异常描述</el-button
             >
           </template>
@@ -110,67 +117,23 @@
         </el-pagination>
       </div>
     </div>
-
     <!-- 弹出层 -->
-    <!-- 新增 /编辑-->
-    <el-dialog :title="title" :visible.sync="nuedialog" width="500px">
-      <div v-loading="loadingView" class="views">
-        <el-form
-          :model="ruleForm"
-          :rules="addUserRules"
-          ref="addUserForm"
-          label-width="100px"
-          class="demo-ruleForm"
-        >
-          <el-form-item label="关联风场:" prop="roleId">
-            <el-select
-              v-model="ruleForm.roleId"
-              placeholder="请选择关联风场"
-              style="width: 100%"
-            >
-              <el-option
-                :label="item.roleDescription"
-                v-for="item in roleList"
-                :value="item.id + ''"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="批次名称" prop="phone">
-            <el-input
-              v-model="ruleForm.phone"
-              placeholder="请输入批次名称"
-            ></el-input>
-          </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="cancel('addUserForm')" size="small"
-            >取 消</el-button
-          >
-          <el-button
-            type="primary"
-            @click="submitForm('addUserForm')"
-            size="small"
-            >确 定</el-button
-          >
-        </span>
+    <!-- 异常信息 /异常描述-->
+    <my-dialog :visible="dialogVisible" :title="title" @confirm="handleConfirm">
+      <div slot="tableEl">
+        <el-empty description="暂无数据"></el-empty>
       </div>
-    </el-dialog>
+    </my-dialog>
   </div>
 </template>
 
 <script>
-import {
-  getUserTableList,
-  getRoleTableList,
-  enableUser,
-  disableUser,
-  getUserInfoByUserId,
-  addUser,
-  editUser,
-  deleteUserInfo,
-  updatePWD,
-} from "@/api/system.js";
+import MyDialog from "./components/dialogCom.vue";
+
 export default {
+  components: {
+    MyDialog,
+  },
   data() {
     const validateUserName = (rule, value, callback) => {
       const regex = /^[^\u4e00-\u9fa5\W]+$/;
@@ -193,6 +156,7 @@ export default {
       callback();
     };
     return {
+      dialogVisible: false,
       loadingView: false,
       loading: false, //数据加载中
       rules: {
@@ -208,7 +172,7 @@ export default {
         // sort: "desc",
         totalSize: 0,
       },
-      tableData: [],
+      tableData: [{}],
       // 新增编辑表单
       ruleForm: {
         phone: null,
@@ -232,19 +196,36 @@ export default {
           { required: true, message: "请输入员工姓名", trigger: "blur" },
         ],
       },
-      //修改密码
-      editUserPassword: {
-        oldPWD: "",
-        newPWD: "",
-        userId: "",
-      },
-      nuedialog: false,
       title: "",
     };
   },
   created() {},
 
   methods: {
+    //分析
+    handleAssetss() {
+      this.$router.push({
+        path: "/home/performance/editAssets",
+        query: { id: 123, name: "John" },
+      });
+    },
+    //分析详情
+    handleAssetssDetail() {
+      this.$router.push({
+        path: "/home/performance/assetssDetail",
+        query: { id: 123, name: "John" },
+      });
+    },
+    abnormalDialog(row, title) {
+      console.log("dialog 调起");
+      this.dialogVisible = true;
+      this.title = title;
+    },
+    handleConfirm(slotContent) {
+      console.log("确认按钮点击");
+      console.log("插槽内容：", slotContent);
+      this.dialogVisible = false;
+    },
     //分页数据切换
     handleCurrentChange(val) {
       this.formInline.pageNum = val;

src/views/performance/components/EditAnalysis.vue

@@ -0,0 +1,163 @@
+<!--
+ * @Author: your name
+ * @Date: 2024-05-29 09:14:23
+ * @LastEditTime: 2024-05-30 17:49:58
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/EditAnalysis.vue
+-->
+<template>
+  <div>
+    <el-card shadow="always" class="box-card">
+      <el-row>
+        <el-col :span="12"
+          ><div class="left">
+            <div>
+              <span>机组编号：</span>
+              <el-select v-model="value" placeholder="请选择" size="small">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div>1.额定功率（Rated Power）：指发电机组在标准工况下</div>
+            <div>2.发电机类型（Generator Type）:</div>
+            <div>3.经度（Longitude）：</div>
+            <div>4.维度（Dimensionality）：</div>
+            <div>5.海拔高度（Altitude）：</div>
+            <div>6.并网时间（Grid connection time）：</div>
+            <div>7.是否标杆（Benchmarking or not）：</div>
+            <div>8.地理位置（Location）：不同地理位置的气候条件</div>
+            <div>
+              9.供应商信息（Manufacturer
+              Information）：制造商的信誉、技术水平和售后
+            </div>
+            <div>
+              10.维护需求（Maintenance Requirements）：风力发电机组需要定期
+            </div>
+            <div>11.预期寿命（Expected Lifetime）：风力发电机组的设计寿命</div>
+          </div>
+        </el-col>
+        <el-col :span="12"><div class="right">右</div></el-col>
+      </el-row>
+    </el-card>
+    <div class="abalysisType">
+      <el-tabs
+        v-model="editableTabsValue"
+        type="card"
+        editable
+        @edit="handleTabsEdit"
+      >
+        <el-tab-pane
+          :key="item.name"
+          v-for="(item, index) in editableTabs"
+          :label="item.title"
+          :name="item.name"
+        >
+          {{ item.content }}
+          <tinymce-editor
+            ref="editor"
+            v-model="msg"
+            :disabled="disabled"
+            :base-url="baseUrl"
+            :language="language"
+            :skin="skin"
+            @onClick="onClick"
+          >
+          </tinymce-editor>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+<script>
+import TinymceEditor from "@/components/Tinymce.vue";
+export default {
+  components: {
+    TinymceEditor,
+  },
+  data() {
+    return {
+      value: "",
+      options: [],
+      editableTabsValue: "2",
+      editableTabs: [
+        {
+          title: "Tab 1",
+          name: "1",
+          content: "Tab 1 content",
+        },
+        {
+          title: "Tab 2",
+          name: "2",
+          content: "Tab 2 content",
+        },
+      ],
+      formData: { content: "<p>Hello, Tinymce!</p>" },
+      tabIndex: 2,
+    };
+  },
+  methods: {
+    // 鼠标单击的事件
+    onClick(e, editor) {
+      console.log("Element clicked");
+      console.log(e);
+      console.log(editor);
+    },
+    // 清空内容
+    clear() {
+      this.$refs.editor.clear();
+    },
+    handleTabsEdit(targetName, action) {
+      if (action === "add") {
+        let newTabName = ++this.tabIndex + "";
+        this.editableTabs.push({
+          title: "New Tab",
+          name: newTabName,
+          content: "New Tab content",
+        });
+        this.editableTabsValue = newTabName;
+      }
+      if (action === "remove") {
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
+        if (activeName === targetName) {
+          tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              let nextTab = tabs[index + 1] || tabs[index - 1];
+              if (nextTab) {
+                activeName = nextTab.name;
+              }
+            }
+          });
+        }
+
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.box-card {
+  // 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;
+      }
+    }
+  }
+}
+.abalysisType {
+  margin-top: 30px;
+}
+</style>

src/views/performance/components/abnormalDetail.vue

@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <div class="newly">
+      <el-button type="primary" @click="addRow" size="small">新增</el-button>
+    </div>
+
+    <el-table :data="tableData" border>
+      <el-table-column prop="name" label="异常数量" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.isEditing">
+            <el-input
+              v-model="scope.row.name"
+              placeholder="Enter name"
+            ></el-input>
+          </div>
+          <div v-else>
+            {{ scope.row.name }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="age" label="解决异常" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.isEditing">
+            <el-input
+              v-model="scope.row.age"
+              type="number"
+              placeholder="Enter age"
+            ></el-input>
+          </div>
+          <div v-else>
+            {{ scope.row.age }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" label="分析类型">
+        <template slot-scope="scope">
+          <div v-if="scope.row.isEditing">
+            <el-input
+              v-model="scope.row.address"
+              placeholder="Enter address"
+            ></el-input>
+          </div>
+          <div v-else>
+            {{ scope.row.address }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" label="机组编号" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.isEditing">
+            <el-input
+              v-model="scope.row.address"
+              placeholder="Enter address"
+            ></el-input>
+          </div>
+          <div v-else>
+            {{ scope.row.address }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" label="创建时间" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.isEditing">/</div>
+          <div v-else>/</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" label="更新时间" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.isEditing">/</div>
+          <div v-else>/</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="150" align="center">
+        <template slot-scope="scope">
+          <el-button
+            v-if="!scope.row.isEditing"
+            size="small"
+            @click="editRow(scope.$index)"
+            >编辑</el-button
+          >
+          <el-button
+            v-if="scope.row.isEditing"
+            size="small"
+            @click="submitRow(scope.$index)"
+            >提交</el-button
+          >
+          <el-button @click="deleteRow(scope.$index)" size="small"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-container">
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page.sync="formInline.pageNum"
+        layout="total, prev, pager, next"
+        :page-size="formInline.pageSize"
+        :total="formInline.totalSize"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formInline: {
+        pageNum: 1,
+        pageSize: 10,
+        totalSize: 0,
+      },
+      tableData: [
+        { name: "John", age: 25, address: "New York", isEditing: false },
+        { name: "Mike", age: 30, address: "Los Angeles", isEditing: false },
+        { name: "Kate", age: 22, address: "Chicago", isEditing: false },
+      ],
+    };
+  },
+  methods: {
+    // 分页数据切换
+    handleCurrentChange(val) {
+      this.formInline.pageNum = val;
+      // this.getTableList();
+    },
+    // 新增数据
+    addRow() {
+      this.tableData.unshift({
+        name: "",
+        age: null,
+        address: "",
+        isEditing: true,
+      });
+    },
+    // 编辑行
+    editRow(index) {
+      this.$set(this.tableData[index], "isEditing", true);
+    },
+    // 提交行
+    submitRow(index) {
+      this.$set(this.tableData[index], "isEditing", false);
+      // 处理提交逻辑，例如发送数据到服务器
+      console.log("Row submitted:", this.tableData[index]);
+    },
+    // 删除行
+    deleteRow(index) {
+      this.tableData.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>

src/views/performance/components/analysisEvent.vue

@@ -0,0 +1,265 @@
+<!--
+ * @Author: your name
+ * @Date: 2024-05-29 09:13:51
+ * @LastEditTime: 2024-05-31 10:04:52
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/analysisEvent.vue
+-->
+<template>
+  <div>
+    <el-card shadow="always" class="box-card">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-row>
+          <el-col :span="5">
+            <el-form-item label="分析类型">
+              <el-select
+                v-model="form.region"
+                placeholder="请选择分析类型"
+                size="small"
+              >
+                <el-option label="类型一" value="shanghai"></el-option>
+                <el-option label="类型二" value="beijing"></el-option>
+              </el-select> </el-form-item
+          ></el-col>
+          <el-col :span="9">
+            <el-form-item label="分析时间">
+              <el-date-picker
+                size="small"
+                v-model="value1"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker> </el-form-item
+          ></el-col>
+          <el-col :span="5">
+            <el-form-item label="滤除月份">
+              <el-date-picker
+                width="200"
+                size="small"
+                type="dates"
+                v-model="value4"
+                placeholder="选择一个或多个日期"
+              >
+              </el-date-picker>
+            </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-button size="small">重置</el-button>
+              <i @click="drawer = true" class="el-icon-setting"></i>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <el-card shadow="always" class="box-card">
+      <el-row>
+        <el-col :span="12"
+          ><div class="left">
+            <div>
+              <span>机组编号：</span>
+              <el-select v-model="value" placeholder="请选择" size="small">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div>1.额定功率（Rated Power）：指发电机组在标准工况下</div>
+            <div>2.发电机类型（Generator Type）:</div>
+            <div>3.经度（Longitude）：</div>
+            <div>4.维度（Dimensionality）：</div>
+            <div>5.海拔高度（Altitude）：</div>
+            <div>6.并网时间（Grid connection time）：</div>
+            <div>7.是否标杆（Benchmarking or not）：</div>
+            <div>8.地理位置（Location）：不同地理位置的气候条件</div>
+            <div>
+              9.供应商信息（Manufacturer
+              Information）：制造商的信誉、技术水平和售后
+            </div>
+            <div>
+              10.维护需求（Maintenance Requirements）：风力发电机组需要定期
+            </div>
+            <div>11.预期寿命（Expected Lifetime）：风力发电机组的设计寿命</div>
+          </div>
+        </el-col>
+        <el-col :span="12"><div class="right">右</div></el-col>
+      </el-row>
+    </el-card>
+    <el-drawer
+      title="我是标题"
+      :visible.sync="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+    >
+      <div class="drawerLeft">
+        <div>常用功能设置</div>
+        <el-checkbox
+          :indeterminate="isIndeterminate"
+          v-model="checkAll"
+          @change="handleCheckAllChange"
+          >全选</el-checkbox
+        >
+        <div style="margin: 15px 0"></div>
+        <el-checkbox-group
+          v-model="checkedCities"
+          @change="handleCheckedCitiesChange"
+        >
+          <el-checkbox v-for="city in cities" :label="city" :key="city">{{
+            city
+          }}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <div class="drawerRight">
+        <div>已选中功能</div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<script>
+import TinymceEditor from "@/components/Tinymce.vue";
+export default {
+  components: {
+    TinymceEditor,
+  },
+  data() {
+    return {
+      checkAll: false,
+      checkedCities: [],
+      cities: ["上海", "北京", "广州", "深圳"],
+      isIndeterminate: true,
+      drawer: false,
+      direction: "rtl",
+      value: "",
+      options: [],
+      editableTabsValue: "2",
+      editableTabs: [
+        {
+          title: "Tab 1",
+          name: "1",
+          content: "Tab 1 content",
+        },
+        {
+          title: "Tab 2",
+          name: "2",
+          content: "Tab 2 content",
+        },
+      ],
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+      formData: { content: "<p>Hello, Tinymce!</p>" },
+      tabIndex: 2,
+    };
+  },
+  methods: {
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? cityOptions : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+    // 鼠标单击的事件
+    onClick(e, editor) {
+      console.log("Element clicked");
+      console.log(e);
+      console.log(editor);
+    },
+    onSubmit() {
+      console.log("submit!");
+    },
+    // 清空内容
+    clear() {
+      this.$refs.editor.clear();
+    },
+    handleTabsEdit(targetName, action) {
+      if (action === "add") {
+        let newTabName = ++this.tabIndex + "";
+        this.editableTabs.push({
+          title: "New Tab",
+          name: newTabName,
+          content: "New Tab content",
+        });
+        this.editableTabsValue = newTabName;
+      }
+      if (action === "remove") {
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
+        if (activeName === targetName) {
+          tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              let nextTab = tabs[index + 1] || tabs[index - 1];
+              if (nextTab) {
+                activeName = nextTab.name;
+              }
+            }
+          });
+        }
+
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
+      }
+    },
+  },
+};
+</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: space-between !important;
+      align-items: center !important;
+      i {
+        margin-left: 10px;
+        font-size: 20px;
+      }
+    }
+  }
+}
+::v-deep.el-input--small .el-input__inner {
+  width: 180px !important;
+}
+.abalysisType {
+  margin-top: 30px;
+}
+</style>

src/views/performance/components/dialogCom.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :title="title"
+    :before-close="handleClose"
+  >
+    <!-- 根据 emptyFlag 和 title 显示不同的内容 -->
+    <slot v-if="emptyFlag" name="tableEl"></slot>
+    <abnormal-detail
+      v-else-if="title === '异常描述'"
+      ref="abnormalDetailRef"
+    ></abnormal-detail>
+    <div slot="footer" v-if="title === '异常详情'" class="dialog-footer">
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import AbnormalDetail from "./abnormalDetail.vue";
+
+export default {
+  components: {
+    AbnormalDetail,
+  },
+  props: {
+    title: String,
+    visible: Boolean, // 控制对话框显示隐藏
+  },
+  data() {
+    return {
+      dialogVisible: this.visible,
+      emptyFlag: false,
+    };
+  },
+  watch: {
+    visible(newVal) {
+      this.dialogVisible = newVal;
+      this.checkEmptyFlag();
+    },
+  },
+  methods: {
+    handleClose() {
+      this.$emit("confirm");
+    },
+    handleConfirm() {
+      // 获取插槽内容并传递出去
+      const slotContent = this.$slots.tableEl;
+      console.log(slotContent);
+      this.$emit("confirm", slotContent);
+    },
+    checkEmptyFlag() {
+      this.$nextTick(() => {
+        if (this.$refs.abnormalDetailRef) {
+          const tableData = this.$refs.abnormalDetailRef.tableData;
+          this.emptyFlag = !tableData || tableData.length === 0;
+          console.log(this.emptyFlag, "this.emptyFlag");
+        }
+      });
+    },
+  },
+};
+</script>

src/views/performance/editAssets.vue

@@ -1,13 +1,41 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:26:31
- * @LastEditTime: 2024-05-27 09:28:23
+ * @LastEditTime: 2024-05-30 11:24:07
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/editAssets.vue
 -->
 <template>
-  <div>编辑性能分析</div>
+  <div class="global-variable">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="分析事件" name="first">
+        <analysis-event></analysis-event>
+      </el-tab-pane>
+      <el-tab-pane label="分析编辑" name="second">
+        <edit-analysis></edit-analysis>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
-<script></script>
+<script>
+import EditAnalysis from "./components/EditAnalysis.vue";
+import AnalysisEvent from "./components/analysisEvent.vue";
+export default {
+  components: {
+    EditAnalysis,
+    AnalysisEvent,
+  },
+  data() {
+    return {
+      activeName: "second",
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+};
+</script>
 <style scoped lang="scss"></style>

src/views/system/roleMag/components/menuTree.vue

@@ -9,7 +9,6 @@
       highlight-current
       :props="defaultProps"
     >
-      <!-- :check-strictly="true"? -->
     </el-tree>
   </div>
 </template>

src/views/system/roleMag/index.vue

@@ -193,6 +193,7 @@
               <el-option
                 :label="item.contentsName"
                 v-for="item in stateOPtions"
+                :key="item.contentsName"
                 :value="item.contentsValue"
               ></el-option>
             </el-select>

src/views/system/userMag/index.vue

@@ -24,6 +24,7 @@
             <el-option
               :label="item.roleDescription"
               v-for="item in roleList"
+              :key="item.id"
               :value="item.id + ''"
             ></el-option>
           </el-select>
@@ -184,6 +185,7 @@
               <el-option
                 :label="item.roleDescription"
                 v-for="item in roleList"
+                :key="item.id"
                 :value="item.id + ''"
               ></el-option>
             </el-select>