sisweb/src/views/singlePerformanceAnalysis/powerChart.vue

<template>
  <el-container>
    <v-main>
      <el-tabs
        v-model="activeName"
        label-width="380px"
        @tab-click="handleClick"
        type="border-card"
        style="width: 100%; height: 100%"
      >
        <el-tab-pane label="风场功率风速排布图" name="no_1" :key="'no_1'">
          <el-form
            :inline="true"
            class="demo-form-inline"
            style="margin-top: 1%; margin-left: 1%"
          >
            <el-form-item label="风场">
              <el-select
                v-model="fc"
                clearable
                placeholder="请选择"
                @change="query_xml()"
              >
                <el-option
                  v-for="item in wpIdslist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="年">
              <el-date-picker
                v-model="year"
                type="year"
                value-format="yyyy"
                placeholder="选择年"
                :picker-options="pickerOptions">
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="月">
              <el-date-picker
                v-model="month"
                type="month"
                value-format="M"
                placeholder="选择月"
                :picker-options="pickerOptions">
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="query_scatter_1" :plain="true"
                >查询</el-button
              >
            </el-form-item>
          </el-form>

          <div
            id="scatter_diagram_1"
            v-loading="loading"
            style="
              height: 630px;
              width: 1873px;
              margin-left: 3px;
              margin-bottom: 3px;
            "
          ></div>
        </el-tab-pane>
        <el-tab-pane label="项目功率风速排布图" name="no_2" :key="'no_2'">
          <el-form
            :inline="true"
            class="demo-form-inline"
            style="margin-top: 1%; margin-left: 1%"
          >
            <el-form-item label="风场">
              <el-select
                v-model="fc"
                clearable
                placeholder="请选择"
                @change="query_xml()"
              >
                <el-option
                  v-for="item in wpIdslist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="项目">
              <el-select
                v-model="pj"
                @focus="query_xml"
                placeholder="请选择"
                :multiple-limit="5"
              >
                <el-option
                  v-for="item in pjIdslist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="年">
              <el-date-picker
                v-model="year"
                type="year"
                value-format="yyyy"
                placeholder="选择年"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="月">
              <el-date-picker
                v-model="month"
                type="month"
                value-format="M"
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="query_scatter_2" :plain="true"
                >查询</el-button
              >
            </el-form-item>
          </el-form>

          <div
            id="scatter_diagram_2"
            v-loading="loading2"
            style="
              height: 630px;
              width: 1873px;
              margin-left: 3px;
              margin-bottom: 3px;
            "
          ></div>
        </el-tab-pane>
        <el-tab-pane label="线路功率风速排布图" name="no_3" :key="'no_3'">
          <el-form
            :inline="true"
            class="demo-form-inline"
            style="margin-top: 1%; margin-left: 1%"
          >
            <el-form-item label="风场">
              <el-select
                v-model="fc"
                clearable
                placeholder="请选择"
                @change="query_xml()"
              >
                <el-option
                  v-for="item in wpIdslist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="线路">
              <el-select
                v-model="xl"
                @focus="query_xml"
                placeholder="请选择"
                :multiple-limit="5"
              >
                <el-option
                  v-for="item in xlIdslist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="年">
              <el-date-picker
                v-model="year"
                type="year"
                value-format="yyyy"
                placeholder="选择年"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="月">
              <el-date-picker
                v-model="month"
                type="month"
                value-format="M"
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="query_scatter_3" :plain="true"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <el-card>
            <div
              id="scatter_diagram_3"
              v-loading="loading3"
              style="
                height: 630px;
                width: 1833px;
                margin-bottom: 3px;
              "
            ></div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </v-main>
  </el-container>
</template>
<script>
import powerChart from "@assets/js/singlePerformanceAnalysis/powerChart";
export default powerChart;
</script>

<style lang="scss" scoped>
 @import "@assets/css/singlePerformanceAnalysis/powerChart.scss";
</style>