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

<!--
 * @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>