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="store.state.siteId"
              placeholder="请选择"
              style="width: 220px"
              clearable
              filterable
              @change="linkDevice()"
            >
              <el-option
                v-for="site in store.state.siteList"
                :key="site"
                :label="site.siteName"
                :value="site.id"
              ></el-option>
            </el-select>
          </div>

          <div class="filter-item">
            选择设备:
            <el-select
              v-model="deviceCode"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option
                v-for="device in deviceList"
                :key="device"
                :label="device.deviceName"
                :value="device.deviceCode"
              ></el-option>
              <!-- <el-option label="设备1" value="DA00021026"></el-option> -->
            </el-select>
          </div>

          <div class="filter-item">
            时间：
            <el-date-picker
              v-model="dateTime"
              :type="dateType"
              placeholder="请选择"
              style="width: 150px"
            
              :clearable="false"
              :editable="false"
            ></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" @click="listSelect()">
            搜索
          </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">
      <div v-for="curve in curveComList" :key="curve">
        <curve-com :curveComList="curve" v-loading="loading"></curve-com>
      </div>

      <!-- <curve-comA></curve-comA>
      <curve-comB></curve-comB>
      <curve-comC></curve-comC> -->
    </div>

    <table-com v-if="num2 == 1" :tableList="tableList"></table-com>
  </div>
</template>

<script>
import curveCom from './curveCom'
// import curveComA from './curveComA'
// import curveComB from './curveComB'
// import curveComC from './curveComC'
import tableCom from './tableCom'
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref } from 'vue'
import * as api from '@/api/powerQuality/harmonicReport'
import { ElMessage } from 'element-plus'
import { ElNotification } from 'element-plus'

export default defineComponent({
  name: 'VariableList',
  components: {
    curveCom,
    // curveComA,
    // curveComB,
    // curveComC,
    tableCom,
  },
  setup() {
    const store = useStore()
    const loading=ref(false)
    const dateType = ref('date')
    const listTabPosition = ref('dayValue')
    // const deviceCode = ref('')
    const deviceCode = ref('DA00021026')
    const deviceList = ref([])
    const dateTime = ref(new Date())
    const tableList = ref([]) //表格子页面数据传递存储
    const curveComList = ref([
      {
        name: 'A相电流（A）',
        icontitle: 'Ia',
        dateList: [],
        data: [],
      },
      {
        name: 'B相电流（A）',
        icontitle: 'Ib',
        dateList: [],
        data: [],
      },
      {
        name: 'C相电流（A）',
        icontitle: 'Ic',
        dateList: [],
        data: [],
      },
    ])
    function linkDevice() {
      deviceSelect()
    }

    function deviceSelect() {
      api.deviceListOne({ siteId: store.state.siteId }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          deviceList.value = requset.data
          deviceCode.value = requset.data[0] ? requset.data[0].deviceCode : ''
          listTabsChange('dayValue')

        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    const listTabsChange = (value) => {
      value == 'dayValue'
        ? (dateType.value = 'date')
        : (dateType.value = 'month')
    }

    function listSelect() {
       loading.value=true
      let list = {}

      if (listTabPosition.value == 'dayValue') {
        store.commit('getNowFormatDate', dateTime.value)
        list = {
          deviceCode: deviceCode.value,
          startTime: store.state.dateList + ' ' + '00:00:00',
          endTime: store.state.dateList + ' ' + '23:59:59',
        }
      } else {
        store.commit('getCurrentMonthLast', dateTime.value)
        list = {
          deviceCode: deviceCode.value,
          startTime: store.state.monthList[0] + ' ' + '00:00:00',
          endTime: store.state.monthList[1] + ' ' + '23:59:59',
        }
      }
      if(!deviceCode.value){
          ElNotification({
          title: '提示',
          message: '请选择左侧设备信息',
          type: 'warning',
        })

      }else{
        api.rtRealScore(list).then((requset) => {
         setTimeout(()=>{
          loading.value=false
        },200)
        if (requset.status === 'SUCCESS') {
          
          tableList.value = requset.data
      
          if (tableList.value.length==0) {
            ElMessage.warning('暂无结果')
          }
          curveComList.value[0].data = []
          curveComList.value[0].dateList = []
          curveComList.value[1].data = []
          curveComList.value[1].dateList = []
          curveComList.value[2].data = []
          curveComList.value[2].dateList = []
          requset.data.map((val) => {
            curveComList.value[0].data.push(val.ia)
            curveComList.value[0].dateList.push(val.dataTime)
            curveComList.value[1].data.push(val.ib)
            curveComList.value[1].dateList.push(val.dataTime)
            curveComList.value[2].data.push(val.ic)
            curveComList.value[2].dateList.push(val.dataTime)
          })
        } else {
          
          ElMessage.error(requset.msg)
         

          
        }
      })

      }

      
    }

    onMounted(() => {
      deviceSelect()
      listSelect()
    })
    return {
      listTabsChange,
      listSelect,
      deviceSelect,
      linkDevice,

      store,
      dateType,
      dateTime,
      tableList,
      deviceCode,
      deviceList,
      curveComList,
      listTabPosition,
      num: ref(0),
      num2: ref(0),

      select: 1,
      currentPage4: 4,
      showDialog: false,
      tabPosition: 'one',
      input: '',
      region: '',
      loading
    }
  },
})
</script>

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