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

<template>
  <div class="app-container harmonicReport">
    <!-- 筛选start -->
    <div class="filter-container mb-10">
      <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-select>
          </div>

          <div class="filter-item">
            日期：
            <el-date-picker
              v-model="dateTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: auto"
            ></el-date-picker>
          </div>

          <el-button
            type="primary"
            class="search-button"
            @click="rtRealScore()"
          >
            搜索
          </el-button>
        </div>
      </div>
    </div>
    <!-- 筛选end -->
    <el-row :gutter="20">
      <el-col :md="24" :lg="12">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">电压不平衡度</div>
          <voltage-chart
            :echartsData="echartsData"
            v-loading="loading"
          ></voltage-chart>
          <el-divider></el-divider>
          <voltage-chart2
            :echartsData="echartsData"
            v-loading="loading"
            
          ></voltage-chart2>
        </div>
      </el-col>
      <el-col :md="24" :lg="12">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">电流不平衡度</div>
          <electric-chart
            :echartsData="echartsData"
            v-loading="loading"
          ></electric-chart>
          <el-divider></el-divider>
          <electric-chart2
            :echartsData="echartsData"
            v-loading="loading"
          ></electric-chart2>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import voltageChart from './voltageChart'
import voltageChart2 from './voltageChart2'
import electricChart from './electricChart'
import electricChart2 from './electricChart2'
import { defineComponent, onMounted, ref } from 'vue'
import * as api from '@/api/powerQuality/unbalanceAnalysis.js'
import { ElMessage } from 'element-plus'
import { ElNotification } from 'element-plus'

export default defineComponent({
  name: 'VariableList',
  components: {
    voltageChart,
    voltageChart2,
    electricChart,
    electricChart2,
  },
  setup() {
    const store = useStore()
    const loading=ref(false)
    const value4 = ref('请选择')
    const region = ref('')
    // const deviceCode = ref('')
    const deviceCode = ref('DA00021026')
    const deviceList = ref([])
    const echartsData = ref([
      // {
      //   cos: 1,
      //   dataTime: '2021-11-10 10:10:00',
      //   elBalun: 1,
      //   ia: 6.24,
      //   ib: 0,
      //   ic: 6.11,
      //   score: 0,
      //   ua: 10174,
      //   ub: 0,
      //   uc: 10172.5,
      //   vtBalun: 1,
      // },
      // {
      //   cos: 1,
      //   dataTime: '2021-11-10 10:10:00',
      //   elBalun: 1,
      //   ia: 6.24,
      //   ib: 0,
      //   ic: 6.11,
      //   score: 0,
      //   ua: 10174,
      //   ub: 0,
      //   uc: 10172.5,
      //   vtBalun: 1,
      // },
      ])
    const voltageChartData = ref({})

    const dateTime = ref('')

    function linkDevice(){
      deviceSelect()
    }

    async function deviceSelect() {
      await 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:''

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

    function rtRealScore() {
       loading.value=true
        console.log('dateTime.value')
       console.log(dateTime.value)
      if (!dateTime.value) {
        ElNotification({
          title: '提示',
          message: '请选择开始和结束时间',
          type: 'warning',
        })
        loading.value=false
        return
      }
      store.commit('TimeAll_function', dateTime.value)
      const time = store.state.Time_Data
      api
        .rtRealScore({
          deviceCode: deviceCode.value,
          startTime: time[0],
          endTime: time[1],
        })
        .then((requset) => {
          setTimeout(()=>{
          loading.value=false
        },200)
          if (requset.status === 'SUCCESS') {
            echartsData.value = requset.data

            if(!echartsData.value[0]){
               ElMessage.warning('暂无数据') 
               return
            }
      
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    onMounted(() => {
      dateTime.value=store.state.se_defaultTime
      deviceSelect()

     
    })
    return {
      store,
      rtRealScore,
      value4,
      region,
      deviceSelect,
      deviceCode,
      deviceList,
      echartsData,
      voltageChartData,

      dateTime,
       linkDevice,
       loading
    }
  },
})
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  border: 1px solid #99a9bf;
}
.bg-purple {
  border: 1px solid #d3dce6;
}
.bg-purple-light {
  border: 1px solid #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  border: 1px solid #f9fafc;
}
</style>