admin-fiveFollowing/src/views/powerQuality/asseReport/loopReport.vue

<template>
  <div>
    <!-- 筛选start -->
    <div class="filter-container mb-20" style="justify-content: left; white-space: nowrap;">

      <div class="filter-item">
        <div class="title">选择站点：</div>
        <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">
        <div class="title">选择设备：</div>
        <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>

      <div class="filter-item">
        <div class="title">日期：</div>
        <el-date-picker v-model="dateTime" placeholder="请选择" style="width: 150px; margin-left: 20px" :clearable="false"
          :editable="false" :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
      </div>

      <el-button type="primary" class="search-button" @click="SingleLoopReportData()"
        :disabled="store.state.authorities.indexOf('查询') == -1">
        搜索
      </el-button>

      <div class="filter-item prompt cursor-pointer" @click="openDescripDialog()">
        <img class="image" src="@/assets/images/descIcon.png" alt="" />
        <div class="title">指标说明</div>
      </div>
    </div>


    <!-- 筛选end -->
    <el-row :gutter="20">
      <el-col :md="24" :lg="14">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>电压质量</span>
            <span class="subs">
              标称电压：
              {{ getData.voltageLevel ? getData.voltageLevel : '-' }}V
            </span>
          </div>

          <el-row :gutter="20" style="padding: 20px">
            <el-col :md="24" :lg="8" v-loading="loading">
              <div class="grid-content bg-purple assCard" style="text-align: center">
                <div class="subTits">A相电压</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{ getData.proportionUa ? getData.proportionUa : '-' }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.qrUa == null ? '-' : getData.qrUa }}%
                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round
                  :type="getData.uaStatus == true ? 'primary' : getData.uaStatus == false ? 'danger' : 'warning'">
                  {{ getData.uaStatus == true ? '合格' : getData.uaStatus == false ? '不合格' : '暂无结论' }}
                </el-button>
                <ul>
                  <li>
                    <div>最大值：{{ getData.maxUa ? getData.maxUa : '-' }}</div>
                    <span :class="getData.maxUaStatus ? '' : 'overLimit'">
                      {{
                        getData.maxUaStatus == true
                        ? '未超限'
                        : getData.maxUaStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>最小值：{{ getData.minUa ? getData.minUa : '-' }}</div>
                    <span :class="getData.minUaStatus ? '' : 'overLimit'">
                      {{
                        getData.minUaStatus == true
                        ? '未超限'
                        : getData.minUaStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>平均值：{{ getData.avgUa ? getData.avgUa : '-' }}</div>
                    <span :class="getData.avgUaStatus ? '' : 'overLimit'">
                      {{
                        getData.avgUaStatus == true
                        ? '未超限'
                        : getData.avgUaStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :md="24" :lg="8" v-loading="loading">
              <div class="grid-content bg-purple assCard" style="text-align: center">
                <div class="subTits">B相电压</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{ getData.proportionUb ? getData.proportionUb : '-' }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.qrUb == null ? '-' : getData.qrUb }}%

                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round :type="getData.ubStatus == true
                  ? 'primary'
                  : getData.ubStatus == false
                    ? 'danger'
                    : 'warning'
                  ">
                  {{
                    getData.ubStatus == true
                    ? '合格'
                    : getData.ubStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
                <ul>
                  <li>
                    <div>最大值：{{ getData.maxUb ? getData.maxUb : '-' }}</div>
                    <span :class="getData.maxUbStatus ? '' : 'overLimit'">
                      {{
                        getData.maxUbStatus == true
                        ? '未超限'
                        : getData.maxUbStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>最小值：{{ getData.minUb ? getData.minUb : '-' }}</div>
                    <span :class="getData.minUbStatus ? '' : 'overLimit'">
                      {{
                        getData.minUbStatus == true
                        ? '未超限'
                        : getData.minUbStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>平均值：{{ getData.avgUb ? getData.avgUb : '-' }}</div>
                    <span :class="getData.avgUbStatus ? '' : 'overLimit'">
                      {{
                        getData.avgUbStatus == true
                        ? '未超限'
                        : getData.avgUbStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :md="24" :lg="8" v-loading="loading">
              <div class="grid-content bg-purple assCard" style="text-align: center">
                <div class="subTits">C相电压</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{ getData.proportionUc ? getData.proportionUc : '-' }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.qrUc == null ? '-' : getData.qrUc }}%

                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round :type="getData.ucStatus == true
                  ? 'primary'
                  : getData.ucStatus == false
                    ? 'danger'
                    : 'warning'
                  ">
                  {{
                    getData.ucStatus == true
                    ? '合格'
                    : getData.ucStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
                <ul>
                  <li>
                    <div>最大值：{{ getData.maxUc ? getData.maxUc : '-' }}</div>
                    <span :class="getData.maxUcStatus ? '' : 'overLimit'">
                      {{
                        getData.maxUcStatus == true
                        ? '未超限'
                        : getData.maxUcStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>最小值：{{ getData.minUc ? getData.minUc : '-' }}</div>
                    <span :class="getData.minUcStatus ? '' : 'overLimit'">
                      {{
                        getData.minUcStatus == true
                        ? '未超限'
                        : getData.minUcStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>平均值：{{ getData.avgUc ? getData.avgUc : '-' }}</div>
                    <span :class="getData.avgUcStatus ? '' : 'overLimit'">
                      {{
                        getData.avgUcStatus == true
                        ? '未超限'
                        : getData.avgUcStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :md="12" :lg="5" v-loading="loading">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>频率质量</span>
            <span class="subs">
              标称频率：{{ getData.mhz ? getData.mhz : 0 }}Hz
            </span>
          </div>
          <el-row :gutter="20" style="padding: 20px">
            <el-col :span="24">
              <div class="grid-content bg-purple assCard" style="text-align: center">
                <div class="subTits">频率</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{ getData.proportionF ? getData.proportionF : '-' }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        <!-- {{ getData.qrF ? getData.qrF : '-' }}% -->
                        {{ getData.qrF == null ? '-' : getData.qrF }}%
                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round :type="getData.fstatus == true
                  ? 'primary'
                  : getData.fstatus == false
                    ? 'danger'
                    : 'warning'
                  ">
                  {{
                    getData.fstatus == true
                    ? '合格'
                    : getData.fstatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
                <ul>
                  <li>
                    <div>最大值：{{ getData.maxF ? getData.maxF : '-' }}</div>
                    <span :class="getData.maxFStatus ? '' : 'overLimit'">
                      {{
                        getData.maxFStatus == true
                        ? '未超限'
                        : getData.maxFStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>最小值：{{ getData.minF ? getData.minF : '-' }}</div>
                    <span :class="getData.minFStatus ? '' : 'overLimit'">
                      {{
                        getData.minFStatus == true
                        ? '未超限'
                        : getData.minFStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>平均值：{{ getData.avgF ? getData.avgF : '-' }}</div>
                    <span :class="getData.avgFStatus ? '' : 'overLimit'">
                      {{
                        getData.avgFStatus == true
                        ? '未超限'
                        : getData.avgFStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :md="12" :lg="5" v-loading="loading">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">功率因数分析</div>
          <el-row :gutter="20" style="padding: 20px">
            <el-col :span="24">
              <div class="grid-content bg-purple assCard" style="text-align: center">
                <div class="subTits">功率因数</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="24" style="margin-bottom: 20px">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{ getData.appraise != null ? getData.appraise : '-' }}
                      </div>
                      <div class="assTxt">考核限值</div>
                    </div>
                  </el-col>
                  <el-col :span="24" style="margin-bottom: 20px">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.cos != null ? getData.cos : '-' }}
                      </div>
                      <div class="assTxt">数值</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round :type="getData.cosStatus == true
                  ? 'primary'
                  : getData.cosStatus == false
                    ? 'danger'
                    : 'warning'
                  ">
                  {{
                    getData.cosStatus == true
                    ? '合格'
                    : getData.cosStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :md="24" :lg="14" v-loading="loading">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>谐波畸变率</span>
            <span class="subs">数值标准</span>
          </div>

          <el-row :gutter="20" style="padding: 20px">
            <el-col :md="24" :lg="8">
              <div class="grid-content bg-purple assCard" style="text-align: center">
                <div class="subTits">A相电流谐波畸变率</div>
                <img class="noDataImg" src="@/assets/images/noDataImg.png" alt="" />
              </div>
            </el-col>
            <el-col :md="24" :lg="8">
              <div class="grid-content bg-purple assCard" style="text-align: center">
                <div class="subTits">B相电流谐波畸变率</div>
                <img class="noDataImg" src="@/assets/images/noDataImg.png" alt="" />
              </div>
            </el-col>
            <el-col :md="24" :lg="8">
              <div class="grid-content bg-purple assCard" style="text-align: center">
                <div class="subTits">C相电流谐波畸变率</div>
                <img class="noDataImg" src="@/assets/images/noDataImg.png" alt="" />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :md="24" :lg="10">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>不平衡度</span>
            <span class="subs">数值标准</span>
          </div>
          <el-row :gutter="20" style="padding: 20px">
            <el-col :span="12">
              <div class="grid-content bg-purple assCard" style="text-align: center">
                <div class="subTits">电流不平衡度</div>
                <el-row :gutter="20" style="padding: 0 20px" v-loading="loading">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{
                          getData.proportionElBalun
                          ? getData.proportionElBalun
                          : '-'
                        }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.qrElBalun == null ? '-' : getData.qrElBalun }}%
                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round :type="getData.elBalunStatus == true
                  ? 'primary'
                  : getData.elBalunStatus == false
                    ? 'danger'
                    : 'warning'
                  ">
                  {{
                    getData.elBalunStatus == true
                    ? '合格'
                    : getData.elBalunStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
                <ul>
                  <li>
                    <div>
                      最大值：{{
                        getData.maxElBalun != null ? getData.maxElBalun : '-'
                      }}
                    </div>
                    <span :class="getData.maxElBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.maxElBalunStatus == true
                        ? '未超限'
                        : getData.maxElBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>
                      最小值：{{
                        getData.minElBalun != null ? getData.minElBalun : '-'
                      }}
                    </div>
                    <span :class="getData.minElBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.minElBalunStatus == true
                        ? '未超限'
                        : getData.minElBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>
                      平均值：{{
                        getData.avgElBalun != null ? getData.avgElBalun : '-'
                      }}
                    </div>
                    <span :class="getData.avgElBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.avgElBalunStatus == true
                        ? '未超限'
                        : getData.avgElBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>

            <el-col :span="12">
              <div class="grid-content bg-purple assCard" style="text-align: center">
                <div class="subTits">电压不平衡度</div>
                <el-row :gutter="20" style="padding: 0 20px" v-loading="loading">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{
                          getData.proportionVtBalun
                          ? getData.proportionVtBalun
                          : '-'
                        }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.qrVtBalun == null ? '-' : getData.qrVtBalun }}%
                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round :type="getData.vtBalunStatus == true
                  ? 'primary'
                  : getData.vtBalunStatus == false
                    ? 'danger'
                    : 'warning'
                  ">
                  {{
                    getData.vtBalunStatus == true
                    ? '合格'
                    : getData.vtBalunStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>

                <ul>
                  <li>
                    <div>
                      最大值：{{
                        getData.maxVtBalun != null ? getData.maxVtBalun : '-'
                      }}
                    </div>
                    <span :class="getData.maxVtBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.maxVtBalunStatus == true
                        ? '未超限'
                        : getData.maxVtBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>
                      最小值：{{
                        getData.minVtBalun != null ? getData.minVtBalun : '-'
                      }}
                    </div>
                    <span :class="getData.minVtBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.minVtBalunStatus == true
                        ? '未超限'
                        : getData.minVtBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>
                      平均值：{{
                        getData.avgVtBalun != null ? getData.avgVtBalun : '-'
                      }}
                    </div>
                    <span :class="getData.avgVtBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.avgVtBalunStatus == true
                        ? '未超限'
                        : getData.avgVtBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!--指标说明弹框组件开始-----------------------start-->
    <descrip-dialog ref="descripDialogRef"></descrip-dialog>
    <!--指标说明弹框组件结束-----------------------end-->
  </div>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { useStore } from 'vuex'
import { ElMessage, ElNotification } from 'element-plus'
import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
/*----------------------------------接口引入-----------------------------------*/
import * as api from '@/api/powerQuality/loopReport.js'
/*----------------------------------组件引入-----------------------------------*/
import descripDialog from './component/descripDialog.vue'
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const store = useStore()
const props = defineProps({
  activeName: String,
}) //数据双向绑定
const emit = defineEmits([])
const { proxy } = getCurrentInstance()
/*----------------------------------变量声明-----------------------------------*/
const loading = ref(false)
const getData = ref({})
const deviceList = ref([])
const deviceCode = ref('')
const dateTime = ref(new Date())

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 SingleLoopReportData() {
  loading.value = true
  store.commit('getNowFormatDate', dateTime.value)

  api
    .SingleLoopReportData({
      deviceCode: deviceCode.value,
      time: store.state.dateList,
      type: 1,
    })
    .then((requset) => {
      loading.value = false
      if (requset.status === 'SUCCESS') {
        if (requset.data == null) {
          ElMessage.warning('暂无数据')
        } else {
          getData.value = requset.data

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

// 查看指标说明
function openDescripDialog() {
  proxy.$refs['descripDialogRef'].openDialog({
    dialogTitle: '指标说明'
  })
}

watch(
  () => props.activeName,
  (newVal) => {
    if (newVal == 'second') {
      // getData.value={}
      deviceSelect()
      setTimeout(function () {
        SingleLoopReportData()
      }, 1000)
    }
  }
)

onMounted(() => {
  deviceSelect()
})
</script>
 
<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.banlanceBtn {
  max-width: 80%;
  // margin: 0 auto 20px;
  height: 40px;
  // line-height: 40px;
  width: 236px;
  font-size: 16px !important;
  // background: #6dc6ff;
  // color: #fff
}
</style>