性能分析详情

src/styles/global.scss

@@ -6,7 +6,7 @@
 }
 
 .el-dialog__header {
-  background-color: var(--primary-color);
+  background-color: var(--primary-color) !important;
   color: var(--text-color) !important;
 }
 .el-dialog__header .el-dialog__title {
@@ -14,65 +14,68 @@
 }
 
 .el-button--primary:hover {
-  opacity: 0.7;
+  opacity: 0.7 !important;
+  border-color: var(--primary-color) !important;
+  background-color: var(--bgopacity-color) !important;
+  color: var(--primary-color) !important;
   // color: var(--primary-color) !important;
 }
 .el-button--text {
-  color: var(--primary-color);
+  color: var(--primary-color) !important;
 }
 .el-button--default:focus,
 .el-button--default:hover {
-  border-color: var(--primary-color);
+  border-color: var(--primary-color) !important;
   background-color: var(--bgopacity-color) !important;
-  color: var(--primary-color);
+  color: var(--primary-color) !important;
 }
 
 .el-menu {
-  background-color: var(--background-color);
-  color: var(--text-color);
+  // background-color: var(--background-color) !important;
+  color: var(--text-color) !important;
 }
 
 .el-table th.el-table__cell {
-  background-color: var(--background-color);
-  color: var(--text-color);
+  background-color: var(--background-color) !important;
+  color: var(--text-color) !important;
 }
 .el-pager li.active {
-  color: var(--primary-color);
+  color: var(--primary-color) !important;
 }
 
 .el-tag {
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-  color: var(--text-color);
+  background-color: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+  color: var(--text-color) !important;
 }
 .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
-  color: var(--primary-color);
+  color: var(--primary-color) !important;
 }
 .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);
+  background-color: var(--text-color) !important;
   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);
+  background-color: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
   // color: var(--text-color);
 }
 .is-checked > .el-checkbox__label {
   color: var(--primary-color) !important;
 }
 .el-tabs__active-bar {
-  background-color: var(--primary-color);
+  background-color: var(--primary-color) !important;
 }
 .el-tabs__item:hover {
-  color: var(--primary-color);
+  color: var(--primary-color) !important;
 }
 .el-tabs__item.is-active {
-  color: var(--primary-color);
+  color: var(--primary-color) !important;
 }
 // .el-switch {
 //   background-color: var(--primary-color);

src/views/performance/assetssDetail.vue

@@ -1,13 +1,60 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:25:45
- * @LastEditTime: 2024-05-27 09:29:24
+ * @LastEditTime: 2024-05-31 16:18:29
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/assetssDetail.vue
 -->
 <template>
-  <div>性能分析详情</div>
+  <div class="global-variable">
+    <h2 style="text-align: center">分析历史记录总览</h2>
+    <h4>分析时间：2020-04-20 10:10:10</h4>
+    <el-card class="box-card analysisType">
+      <el-row>
+        <el-col :span="12">
+          <iframe src="/html/A01.html" frameborder="0"></iframe
+        ></el-col>
+        <el-col :span="12">
+          <img src="../../assets/Wechat.jpg" alt=""
+        /></el-col>
+      </el-row>
+    </el-card>
+    <el-card class="box-card">
+      <div v-for="o in 4" :key="o" class="text item">
+        {{ "列表内容 " + o }}
+      </div>
+    </el-card>
+  </div>
 </template>
-<script></script>
-<style scoped></style>
+<script>
+export default {
+  data() {
+    return {
+      // htmlSrc: require("@/assets/html/A01.html"),
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.box-card {
+  margin-top: 20px;
+}
+.analysisType {
+  .el-row {
+    height: 450px !important;
+    .el-col-12 {
+      width: 50%;
+      height: 100%;
+    }
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/performance/components/EditAnalysis.vue

@@ -1,13 +1,322 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:14:23
- * @LastEditTime: 2024-05-30 17:49:58
+ * @LastEditTime: 2024-05-31 15:33:18
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/EditAnalysis.vue
 -->
 <template>
   <div>
+    <el-form ref="form" :model="form" label-width="120px">
+      <el-row type="flex" justify="end">
+        <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-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="分析类型"
+                v-if="checkedCities.find((item) => item === '分析类型')"
+              >
+                <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 :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
+              <el-form-item
+                label="机组编号"
+                v-if="checkedCities.find((item) => item === '机组编号')"
+              >
+                <el-select
+                  multiple
+                  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 :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
+              <el-form-item
+                label="滤除月份"
+                v-if="checkedCities.find((item) => item === '滤除月份')"
+              >
+                <el-date-picker
+                  width="200"
+                  size="small"
+                  type="dates"
+                  v-model="value4"
+                  placeholder="选择一个或多个日期"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="9">
+              <el-form-item
+                label="分析时间"
+                v-if="checkedCities.find((item) => item === '分析时间')"
+              >
+                <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-row>
+        </el-collapse-item>
+        <el-collapse-item
+          title="SACAD数据测点过滤设置："
+          name="2"
+          v-if="checkedCities.find((item) => item === 'SCADA数据过滤')"
+        >
+          <el-row :gutter="5">
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="风速过滤">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="桨距角过滤">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="有功功率过滤">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="发电机转速过滤">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
+        <el-collapse-item
+          title="图像轴系设置："
+          name="3"
+          v-if="checkedCities.find((item) => item === '图像设置')"
+        >
+          <el-row :gutter="5">
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="发电机转矩">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="步长"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="风能利用系数">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="步长"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="叶尖转速比">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="步长"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="有功功率">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="步长"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="桨距角">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="步长"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </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"
@@ -63,15 +372,83 @@
             ref="editor"
             v-model="msg"
             :disabled="disabled"
-            :base-url="baseUrl"
-            :language="language"
-            :skin="skin"
             @onClick="onClick"
           >
           </tinymce-editor>
         </el-tab-pane>
       </el-tabs>
     </div>
+    <el-drawer
+      title="偏好设置"
+      :visible.sync="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+      class="drawerOption"
+    >
+      <el-row>
+        <el-col :span="12"
+          ><div class="drawerLeft">
+            <div style="text-align: center; font-size: 16px">常用功能设置</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
+                label="SCADA数据过滤"
+                key="SCADA数据过滤"
+              ></el-checkbox>
+              <div class="checkFromRow">
+                <el-row>
+                  <el-col :span="12">发电机转速测点</el-col>
+                  <el-col :span="12">桨距角值测点</el-col>
+                  <el-col :span="12">有功功率测点</el-col>
+                  <el-col :span="12">风速速度测点</el-col>
+                </el-row>
+              </div>
+
+              <el-checkbox label="图像设置" key="图像设置"></el-checkbox>
+              <div class="checkFromRow">
+                <el-row>
+                  <el-col :span="12">发电机转矩轴系</el-col>
+                  <el-col :span="12">桨距角轴系</el-col>
+                  <el-col :span="12">叶尖速比轴系</el-col>
+                  <el-col :span="12">有功功率轴系</el-col>
+                  <el-col :span="12">发电机转矩轴系</el-col>
+                </el-row>
+              </div>
+            </el-checkbox-group>
+          </div></el-col
+        >
+        <el-col :span="12">
+          <div class="drawerRight">
+            <div style="text-align: center; font-size: 16px">已选中功能</div>
+            <ul>
+              <li v-for="func in checkedCities" :key="func">
+                {{ func }}
+                <el-button
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="removeFunction(func)"
+                ></el-button>
+              </li>
+            </ul></div
+        ></el-col>
+      </el-row>
+      <div class="demo-drawer__footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="handleClose">{{ "确 定" }}</el-button>
+      </div>
+    </el-drawer>
   </div>
 </template>
 <script>
@@ -82,6 +459,19 @@ export default {
   },
   data() {
     return {
+      value4: "",
+      value1: "",
+      form: {},
+      activeNames: ["1", "2", "3"],
+      msg: "",
+      disabled: false,
+
+      checkAll: false,
+      checkedCities: ["分析类型", "分析时间", "滤除月份", "机组编号"],
+      cities: ["分析类型", "分析时间", "滤除月份", "机组编号"],
+      isIndeterminate: true,
+      drawer: false,
+      direction: "rtl",
       value: "",
       options: [],
       editableTabsValue: "2",
@@ -102,12 +492,39 @@ export default {
     };
   },
   methods: {
+    handleCheckAllChange(val) {
+      this.checkedCities = val
+        ? [...this.cities, "SCADA数据过滤", "图像设置"]
+        : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length + 2;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.cities.length + 2;
+    },
+    removeFunction(item) {
+      this.checkedCities = this.checkedCities.filter((fuc) => fuc !== item);
+    },
+
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          // done();
+          this.drawer = false;
+        })
+        .catch((_) => {});
+    },
     // 鼠标单击的事件
     onClick(e, editor) {
       console.log("Element clicked");
       console.log(e);
       console.log(editor);
     },
+    onSubmit() {
+      console.log("submit!");
+    },
     // 清空内容
     clear() {
       this.$refs.editor.clear();
@@ -145,6 +562,7 @@ export default {
 </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;
@@ -157,6 +575,69 @@ export default {
     }
   }
 }
+::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;
+    }
+  }
+}
+.drawerOption {
+  .el-checkbox-group {
+    line-height: 40px !important;
+  }
+  .drawerLeft {
+    margin-left: 20px;
+    color: #606266 !important;
+  }
+  .checkFromRow {
+    .el-col-12 {
+      color: #606266 !important;
+      font-size: 14px;
+    }
+    .el-col-12:nth-child(even) {
+      text-align: end !important;
+    }
+  }
+  .drawerRight {
+    margin-right: 20px;
+    color: #606266 !important;
+    font-size: 14px;
+    ul {
+      list-style-type: none;
+      padding: 0;
+      color: #606266 !important;
+      li {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0px 10px;
+        line-height: 40px !important;
+      }
+    }
+  }
+  .demo-drawer__footer {
+    display: flex;
+    margin-top: 50px;
+    justify-content: center;
+  }
+}
+::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;
 }

src/views/performance/components/analysisEvent.vue

@@ -1,301 +1,322 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:13:51
- * @LastEditTime: 2024-05-31 13:59:38
+ * @LastEditTime: 2024-05-31 15:50:53
  * @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">
-        <el-row class="flex-wrap-row" :gutter="5">
-          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="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 :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
-            <el-form-item label="机组编号">
-              <el-select
-                multiple
-                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 :xs="24" :sm="24" :md="12" :lg="8" :xl="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 :xs="24" :sm="24" :md="12" :lg="12" :xl="9">
-            <el-form-item label="分析时间">
-              <el-date-picker
-                size="small"
-                v-model="value1"
-                type="daterange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
+    <el-form ref="form" :model="form" label-width="120px">
+      <el-row type="flex" justify="end">
+        <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-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="分析类型"
+                v-if="checkedCities.find((item) => item === '分析类型')"
               >
-              </el-date-picker> </el-form-item
-          ></el-col>
-        </el-row>
-        <!-- <el-row>
-          <el-col style="color: #666; line-height: 40px">
-            SACAD数据测点过滤设置 :</el-col
-          >
-        </el-row> -->
-        <el-row :gutter="5">
-          <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
-            <el-form-item label="风速过滤">
-              <div class="demo-input-suffix">
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最小值"
-                  v-model="input1"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最大值"
-                  v-model="input2"
-                >
-                </el-input>
-              </div>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
-            <el-form-item label="桨距角过滤">
-              <div class="demo-input-suffix">
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最小值"
-                  v-model="input1"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最大值"
-                  v-model="input2"
-                >
-                </el-input>
-              </div>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
-            <el-form-item label="有功功率过滤">
-              <div class="demo-input-suffix">
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最小值"
-                  v-model="input1"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最大值"
-                  v-model="input2"
-                >
-                </el-input>
-              </div>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
-            <el-form-item label="发电机转速过滤">
-              <div class="demo-input-suffix">
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最小值"
-                  v-model="input1"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最大值"
-                  v-model="input2"
-                >
-                </el-input>
-              </div>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="5">
-          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
-            <el-form-item label="发电机转矩">
-              <div class="demo-input-suffix">
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="步长"
-                  v-model="input1"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最小值"
-                  v-model="input2"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最大值"
-                  v-model="input2"
-                >
-                </el-input>
-              </div>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
-            <el-form-item label="风能利用系数">
-              <div class="demo-input-suffix">
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="步长"
-                  v-model="input1"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最小值"
-                  v-model="input2"
-                >
-                </el-input>
-                <el-input
-                  type="number"
+                <el-select
+                  v-model="form.region"
+                  placeholder="请选择分析类型"
                   size="small"
-                  placeholder="最大值"
-                  v-model="input2"
                 >
-                </el-input>
-              </div>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
-            <el-form-item label="叶尖转速比">
-              <div class="demo-input-suffix">
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="步长"
-                  v-model="input1"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最小值"
-                  v-model="input2"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最大值"
-                  v-model="input2"
-                >
-                </el-input>
-              </div>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
-            <el-form-item label="有功功率">
-              <div class="demo-input-suffix">
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="步长"
-                  v-model="input1"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最小值"
-                  v-model="input2"
-                >
-                </el-input>
-                <el-input
-                  type="number"
-                  size="small"
-                  placeholder="最大值"
-                  v-model="input2"
-                >
-                </el-input>
-              </div>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
-            <el-form-item label="桨距角">
-              <div class="demo-input-suffix">
-                <el-input
-                  type="number"
+                  <el-option label="类型一" value="shanghai"></el-option>
+                  <el-option label="类型二" value="beijing"></el-option>
+                </el-select> </el-form-item
+            ></el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
+              <el-form-item
+                label="机组编号"
+                v-if="checkedCities.find((item) => item === '机组编号')"
+              >
+                <el-select
+                  multiple
+                  v-model="form.region"
+                  placeholder="请选择机组编号"
                   size="small"
-                  placeholder="步长"
-                  v-model="input1"
                 >
-                </el-input>
-                <el-input
-                  type="number"
+                  <el-option label="类型一" value="shanghai"></el-option>
+                  <el-option label="类型二" value="beijing"></el-option>
+                </el-select> </el-form-item
+            ></el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
+              <el-form-item
+                label="滤除月份"
+                v-if="checkedCities.find((item) => item === '滤除月份')"
+              >
+                <el-date-picker
+                  width="200"
                   size="small"
-                  placeholder="最小值"
-                  v-model="input2"
+                  type="dates"
+                  v-model="value4"
+                  placeholder="选择一个或多个日期"
                 >
-                </el-input>
-                <el-input
-                  type="number"
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="9">
+              <el-form-item
+                label="分析时间"
+                v-if="checkedCities.find((item) => item === '分析时间')"
+              >
+                <el-date-picker
                   size="small"
-                  placeholder="最大值"
-                  v-model="input2"
+                  v-model="value1"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
                 >
-                </el-input>
-              </div>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row type="flex" justify="end">
-          <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-date-picker> </el-form-item
+            ></el-col>
+          </el-row>
+        </el-collapse-item>
+        <el-collapse-item
+          title="SACAD数据测点过滤设置："
+          name="2"
+          v-if="checkedCities.find((item) => item === 'SCADA数据过滤')"
+        >
+          <el-row :gutter="5">
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="风速过滤">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="桨距角过滤">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="有功功率过滤">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="发电机转速过滤">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
+        <el-collapse-item
+          title="图像轴系设置："
+          name="3"
+          v-if="checkedCities.find((item) => item === '图像设置')"
+        >
+          <el-row :gutter="5">
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="发电机转矩">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="步长"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="风能利用系数">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="步长"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="叶尖转速比">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="步长"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="有功功率">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="步长"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+              <el-form-item label="桨距角">
+                <div class="demo-input-suffix">
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="步长"
+                    v-model="input1"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最小值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                  <el-input
+                    type="number"
+                    size="small"
+                    placeholder="最大值"
+                    v-model="input2"
+                  >
+                  </el-input>
+                </div>
+              </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"
@@ -387,23 +408,38 @@
         <el-col :span="12">
           <div class="drawerRight">
             <div style="text-align: center; font-size: 16px">已选中功能</div>
-          </div></el-col
-        >
+            <ul>
+              <li v-for="func in checkedCities" :key="func">
+                {{ func }}
+                <el-button
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="removeFunction(func)"
+                ></el-button>
+              </li>
+            </ul></div
+        ></el-col>
       </el-row>
+      <div class="demo-drawer__footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="handleClose">{{ "确 定" }}</el-button>
+      </div>
     </el-drawer>
   </div>
 </template>
 <script>
-import TinymceEditor from "@/components/Tinymce.vue";
+
 export default {
-  components: {
-    TinymceEditor,
-  },
+
   data() {
     return {
+      value4: "",
+      value1: "",
+      form: {},
+      activeNames: ["1", "2", "3"],
       checkAll: false,
-      checkedCities: [],
-      cities: ["分析类型", "分析时间", "过滤月份", "机组编号"],
+      checkedCities: ["分析类型", "分析时间", "滤除月份", "机组编号"],
+      cities: ["分析类型", "分析时间", "滤除月份", "机组编号"],
       isIndeterminate: true,
       drawer: false,
       direction: "rtl",
@@ -449,10 +485,15 @@ export default {
       this.isIndeterminate =
         checkedCount > 0 && checkedCount < this.cities.length + 2;
     },
+    removeFunction(item) {
+      this.checkedCities = this.checkedCities.filter((fuc) => fuc !== item);
+    },
+
     handleClose(done) {
       this.$confirm("确认关闭？")
         .then((_) => {
-          done();
+          // done();
+          this.drawer = false;
         })
         .catch((_) => {});
     },
@@ -503,7 +544,6 @@ export default {
 <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 {
@@ -514,15 +554,15 @@ export default {
       }
     }
   }
-  ::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 .searchFrom {
+  .el-form-item__content {
+    display: flex !important;
+    justify-content: end !important;
+    align-items: center !important;
+    i {
+      margin-left: 10px;
+      font-size: 20px;
     }
   }
 }
@@ -532,6 +572,7 @@ export default {
   }
   .drawerLeft {
     margin-left: 20px;
+    color: #606266 !important;
   }
   .checkFromRow {
     .el-col-12 {
@@ -542,11 +583,29 @@ export default {
       text-align: end !important;
     }
   }
+  .drawerRight {
+    margin-right: 20px;
+    color: #606266 !important;
+    font-size: 14px;
+    ul {
+      list-style-type: none;
+      padding: 0;
+      color: #606266 !important;
+      li {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0px 10px;
+        line-height: 40px !important;
+      }
+    }
+  }
+  .demo-drawer__footer {
+    display: flex;
+    margin-top: 50px;
+    justify-content: center;
+  }
 }
-// ::v-deep.el-drawer__body {
-//   margin: 0 20px !important;
-// }
-
 ::v-deep.el-input--small .el-input__inner {
   width: 200px !important;
 }

vue.config.js

@@ -61,6 +61,7 @@ module.exports = {
   },
 
   devServer: {
+    // contentBase: path.join(__dirname, "public"),
     proxy: {
       "/api": {
         // target: "http://192.168.5.4:16200", // 石月
@@ -91,9 +92,9 @@ module.exports = {
   },
 
   pluginOptions: {
-    'style-resources-loader': {
-      preProcessor: 'sass',
-      patterns: []
-    }
-  }
+    "style-resources-loader": {
+      preProcessor: "sass",
+      patterns: [],
+    },
+  },
 };