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">搜索</el-button>
        </div>
      </div>
      <div class="right descIcon">
        <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></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>100%</div>
              </div>
              <ul>
                <li>
                  <div>A相电压</div>
                  <div>
                    <div class="mb-5">幅值:9.72A</div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>A相电压</div>
                  <div>
                    <div class="mb-5">幅值:9.72A</div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>A相电压</div>
                  <div>
                    <div class="mb-5">幅值:9.72A</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-radarChart></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>100%</div>
              </div>
              <ul>
                <li>
                  <div>A相电压</div>
                  <div>
                    <div class="mb-5">幅值:9.72A</div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>A相电压</div>
                  <div>
                    <div class="mb-5">幅值:9.72A</div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>A相电压</div>
                  <div>
                    <div class="mb-5">幅值:9.72A</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></voltage-panel>
      </el-col>
      <!-- 电压end -->

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

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

<script>
import { useStore } from 'vuex'
import { defineComponent, onMounted,ref } from 'vue'
import loopRadarChart from './loopMonitorComponent/loopRadarChart'

import harmonicPanel from './loopMonitorComponent/harmonicPanel'
import voltagePanel from './loopMonitorComponent/voltagePanel'
import frequencyPanel from './loopMonitorComponent/frequencyPanel'
import powerPanel from './loopMonitorComponent/powerPanel'

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

export default defineComponent({
  name: 'LoopMonitor',
  components: {
    loopRadarChart,
    harmonicPanel,
    voltagePanel,
    frequencyPanel,
    powerPanel,
  },
  setup() {
    const store = useStore()

    const deviceList = ref([])
    const deviceCode = ref('')

    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)
        }
      })
    }
   
    onMounted(() => {
      deviceSelect()
      
    })
    return {
      store,
      deviceList,
      deviceCode,
      linkDevice,
      deviceSelect
     
    }
  },
})
</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>