admin-fiveFollowing/src/views/powerQuality/harmonicReport/index.vue

<template>
  <div class="app-container harmonicReport">
    <!-- 筛选start -->
    <div class="filter-container">
      <div class="left">
        <div>
          <div class="filter-item">
            选择站点:
            <el-select
              v-model="region"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option label="站点一" value="1"></el-option>
              <el-option label="站点二" value="2"></el-option>
            </el-select>
          </div>

          <div class="filter-item">
            回路:
            <el-select
              v-model="circuit"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option label="回路1" value="1"></el-option>
              <el-option label="回路2" value="2"></el-option>
            </el-select>
          </div>

          <div class="filter-item">
            测量类型:
            <el-select
              v-model="measurType"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option label="类型1" value="1"></el-option>
              <el-option label="类型2" value="2"></el-option>
            </el-select>
          </div>

          <div class="filter-item">
            谐波次数:
            <el-select
              v-model="number"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option label="已执行" value="1"></el-option>
              <el-option label="未执行" value="2"></el-option>
            </el-select>
          </div>

          <div class="filter-item">
            时间：
            <el-date-picker
              v-model="value4"
             :type="dateType"
              placeholder="请选择"
              style="width: 150px"
            ></el-date-picker>

            <el-radio-group v-model="listTabPosition"  @change="listTabsChange(listTabPosition)" style="    display: inline-block;
    position: relative;
    top: -3px;
}">
              <el-radio-button label="dayValue">按日</el-radio-button>
              <el-radio-button label="monthValue">按月</el-radio-button>
            </el-radio-group>

            <!-- <el-button
              class="search-button timeTab"
              @click="num = 0"
              :type="num == 0 ? 'primary' : ''"
            >
              按日
            </el-button>
            <el-button
              class="search-button timeTab"
              @click="num = 1"
              :type="num == 1 ? 'primary' : ''"
              style="margin-left: 0 !important"
            >
              按月
            </el-button> -->
          </div>

          <el-button type="primary" class="search-button">搜索</el-button>
        </div>
      </div>
    </div>
    <!-- 筛选end -->

    <el-button
      class="search-button timeTab"
      @click="num2 = 0"
      :type="num2 == 0 ? 'primary' : ''"
    >
      曲线
    </el-button>
    <el-button
      class="search-button timeTab"
      @click="num2 = 1"
      :type="num2 == 1 ? 'primary' : ''"
      style="margin-left: 0 !important"
    >
      表格
    </el-button>
    <div  v-if="num2 == 0">
        <curve-comA></curve-comA>
        <curve-comB></curve-comB>
        <curve-comC></curve-comC>
    </div>
   
    <table-com v-if="num2 == 1"></table-com>
  </div>
</template>

<script>
import curveComA from './curveComA'
import curveComB from './curveComB'
import curveComC from './curveComC'
import tableCom from './tableCom'

export default {
  name: 'VariableList',
  components: {
    curveComA,
    curveComB,
    curveComC,
    tableCom,
  },

  data() {
    return {
      dateType:'date',
      listTabPosition: 'dayValue',
      num: 0,
      num2: 0,
      value4: '2021-10-21',
      number: 1,
      measurType: 1,
      select: 1,
      currentPage4: 4,
      showDialog: false,
      tabPosition: 'one',
      input: '',
      region: '',
    }
  },
  methods: {
    listTabsChange(value){
      value == 'dayValue'? (this.dateType = 'date'): (this.dateType = 'month')

    }

  },
}
</script>

<style lang="scss" scoped>
</style>