admin-fiveFollowing/src/views/powerQuality/realTimeMonitoring/loopMonitor.vue

<template>
  <div>
    <!-- 筛选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" style="margin-right: 20px">
            选择设备:
            <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>
          <el-button
            type="primary"
            class="search-button"
            @click="realScoreOne()"
          >
            搜索
          </el-button>
        </div>
      </div>
      <div class="right descIcon" @click="descripDialog()">
        <img src="@/assets/images/descIcon.png" alt="" />
        指标说明
      </div>
    </div>
    <!-- 筛选end -->

    <el-row :gutter="20" class="mt-20">
      <!-- 三项不平衡度 -->
      <el-col :md="24" :lg="8">
        <div class="grid-content bg-purple loopUnbanlancePanel">
          <div class="blanceChartTit">
            <span>三项不平衡度</span>
          </div>
          <el-row
            :gutter="20"
            style="padding: 20px; border-bottom: 1px solid #d3dce6"
          >
            <el-col :span="12" class="loopUnbanlanceCard">
              <div class="grid-content" style="text-align: center">
                <loop-radarChart :getData="getData"></loop-radarChart>
              </div>
            </el-col>
            <el-col :span="12" class="loopUnbanlanceCard">
              <div
                style="
                  width: 90%;
                  background: #1187ff;
                  margin: 0px auto;
                  text-align: center;
                  color: #fff;
                  padding: 10px 0px;
                "
              >
                <div class="mb-10">电压不平衡度</div>
                <div>{{getData.vtBalun?getData.vtBalun*100:0}}%</div>
              </div>
              <ul>
                <li>
                  <div>A相电压</div>
                  <div>
                    <div class="mb-5">幅值:{{getData.ua?getData.ua+' V':0}}</div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>B相电压</div>
                  <div>
                    <div class="mb-5">幅值:{{getData.ub?getData.ub+' V':0}}</div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>C相电压</div>
                  <div>
                    <div class="mb-5">幅值:{{getData.uc?getData.uc+' V':0}}</div>
                    <div>相角:-</div>
                  </div>
                </li>
              </ul>
            </el-col>
          </el-row>

          <el-row
            :gutter="20"
            style="padding: 20px; border-bottom: 1px solid #d3dce6"
          >
            <el-col :span="12" class="loopUnbanlanceCard">
              <div class="grid-content" style="text-align: center">
                <loop-radarChart2 :getData="getData"></loop-radarChart2>
              </div>
            </el-col>
            <el-col :span="12" class="loopUnbanlanceCard">
              <div
                style="
                  width: 90%;
                  background: #1187ff;
                  margin: 0px auto;
                  text-align: center;
                  color: #fff;
                  padding: 10px 0px;
                "
              >
                <div class="mb-10">电流不平衡度</div>
                <div>{{getData.elBalun?getData.elBalun*100:0}}%</div>
              </div>
              <ul>
                <li>
                  <div>A相电流</div>
                  <div>
                    <div class="mb-5">幅值:{{getData.ua?getData.ia+' A':0}}</div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>B相电流</div>
                  <div>
                    <div class="mb-5">幅值:{{getData.ua?getData.ib+' A':0}}</div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>C相电流</div>
                  <div>
                    <div class="mb-5">幅值:{{getData.ua?getData.ic+' A':0}}</div>
                    <div>相角:-</div>
                  </div>
                </li>
              </ul>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!-- 三项不平衡度 end -->

      <!-- 谐波 -->
      <el-col :md="24" :lg="16">
        <harmonic-panel></harmonic-panel>
      </el-col>
      <!-- 谐波 end -->
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <!-- 电压start -->
      <el-col :md="24" :lg="8" class="mb-20">
        <voltage-panel :getData="getData"></voltage-panel>
      </el-col>
      <!-- 电压end -->

      <!-- 频率 start-->
      <el-col :md="24" :lg="8" class="mb-20">
        <frequency-panel :getData="getData"></frequency-panel>
      </el-col>
      <!-- 频率 end -->

      <!-- 有功功率 -->
      <el-col :md="24" :lg="8">
        <power-panel  :getData="getData"></power-panel>
      </el-col>
      <!-- 有功功率 end -->
    </el-row>

    <!--指标说明弹框组件开始-----------------------start-->
    <descrip-dialog
      :dialogTitle="dialogTitle"
      @closeDialog="closeDialog"
      :flag="showDialog"
      :siteId="siteId"
      class="descripDialog"
    ></descrip-dialog>
    <!--指标说明弹框组件结束-----------------------end-->

  </div>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref } from 'vue'
import loopRadarChart from './loopMonitorComponent/loopRadarChart'
import loopRadarChart2 from './loopMonitorComponent/loopRadarChart2'
import harmonicPanel from './loopMonitorComponent/harmonicPanel'
import voltagePanel from './loopMonitorComponent/voltagePanel'
import frequencyPanel from './loopMonitorComponent/frequencyPanel'
import powerPanel from './loopMonitorComponent/powerPanel'
import descripDialog from './loopMonitorComponent/descripDialog'

import * as api from '@/api/powerQuality/loopMonitor.js'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'LoopMonitor',
  components: {
    loopRadarChart,
    loopRadarChart2,
    harmonicPanel,
    voltagePanel,
    frequencyPanel,
    powerPanel,
    descripDialog
  },
  setup() {
    const store = useStore()
    const getData = ref({})
    const deviceList = ref([])
    const deviceCode = ref('')
    const showDialog = ref(false)
    const dialogTitle = ref('')
    const siteId=ref(0)

    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 : ''
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    //数据请求
    function realScoreOne() {
      api.realScoreOne({ deviceCode: deviceCode.value }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          getData.value = requset.data
        } else {
          ElMessage.error(requset.msg)
        }
      })
      // nowTime.value = parseTime(new Date())
    }

    // 查看指标说明
    const descripDialog = () => {
      siteId.value=store.state.siteId
      dialogTitle.value = '指标说明'
      showDialog.value = true
    }
     // 关闭操作
    const closeDialog = () => {
      showDialog.value = false
      
    }

    onMounted(() => {
      deviceSelect()
      setTimeout(function(){
        realScoreOne()
      },1000)
     
    })
    return {
      store,
      getData,
      deviceList,
      deviceCode,
      linkDevice,
      deviceSelect,
      realScoreOne,
      descripDialog,
      showDialog,
      dialogTitle,
      closeDialog,
      siteId
    }
  },
})
</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>