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()" :disabled="store.state.authorities.indexOf('查询') == -1">
              <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"
              :disabled="store.state.authorities.indexOf('查询') == -1">
              <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()"
            :disabled="store.state.authorities.indexOf('查询') == -1">
            搜索
          </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" v-loading="loading"></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" v-loading="loading"></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 v-loading="loading"></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" v-loading="loading"></voltage-panel>
      </el-col>
      <!-- 电压end -->

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

      <!-- 有功功率 -->
      <el-col :md="24" :lg="8">
        <power-panel :getData="getData" v-loading="loading"></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'
import { ElNotification } from 'element-plus'


export default defineComponent({
  name: 'LoopMonitor',
  components: {
    loopRadarChart,
    loopRadarChart2,
    harmonicPanel,
    voltagePanel,
    frequencyPanel,
    powerPanel,
    descripDialog,
  },
  props: {
    activeName: String,
  },
  setup(props) {
    const store = useStore()
    const loading = ref(false)
    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() {
      if (!deviceCode.value) {

        ElNotification({
          title: '提示',
          message: '请选择左侧设备信息',
          type: 'warning',
        })
        return
      }
      loading.value = true
      api.realScoreOne({ deviceCode: deviceCode.value }).then((requset) => {
        loading.value = false
        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()

      if (props.activeName == 'second') {
        setTimeout(function () {
          realScoreOne()

        }, 1000)
      }

    })
    return {
      store,
      getData,
      deviceList,
      deviceCode,
      linkDevice,
      deviceSelect,
      realScoreOne,
      descripDialog,
      showDialog,
      dialogTitle,
      closeDialog,
      siteId,
      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;
}

ul li {
  padding: 0;
  margin: 0;
  list-style: none
}
</style>