admin-fiveFollowing/src/views/powerQuality/realTimeMonitoring/realScoreComponent/descripDialog.vue

<template>
  <div class="descripDialog">
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="600px"
      @close="closeDialog(0)"
      @open="open"
    >
      <div style="width: 100%; ">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="判定标准" name="first">
            <div class="desBlock">
              <h3>【电压】</h3>
              <span>电压偏差国标：</span>
              <span>35KV及以上正、负偏差的绝对值之和不超过标称电压的10%；</span>
              <span>20kv及以下电压偏差为标称电压的±7%；</span>
              <span>400V及以下电压偏差为标称电压的+7%、-10%；</span>
              <span>标称电压=额定电压，其数值为线电压</span>
              <span>比如：额定电压为380V，电压偏差的上限 和 下限分别为235.4V 和 198V</span>
            </div>
            <div class="desBlock">
              <h3>【频率】</h3>
              <span>频率超限范围：50±0.2（Hz）</span>
            </div>
            <div class="desBlock">
              <h3>【功率因数】</h3>
              <span>功率因数超限范围：用户可配置功率因数标准值</span>
            </div>
            <div class="desBlock">
              <h3>【三相不平衡】</h3>
              <span>三相不平衡度超限范围：15%</span>
            </div>
            <div class="desBlock">
              <h3>【电流负载率】</h3>
              <span>电流负载率超限范围：用户可配置电流负载率门限值</span>
              <span>电流负载率=电流/额定电流</span>
            </div>
             <div class="desBlock">
              <h3>【单项结论】</h3>
              <span>合格率：(测点数-超限数)/测点数×100%</span>
              <span>合格率>=95% 「合格」</span>
              <span>合格率95% 「不合格」</span>
            </div>
            
          </el-tab-pane>
          <el-tab-pane label="配置内容" name="second">
            <div class="desBlock">
              <h3>【站点级配置】<a @click="goSitePowerScore">立即前往</a></h3>
              <p>请在 站点管理->电能质量评分配置中配置 或 联系运维管理员：</p>
              <span>电能质量各要素权重、功率因数标准值</span>
            </div>
            <div class="desBlock">
              <h3>【设备级配置】<a @click="goSiteWatchDog">立即前往</a></h3>
              <p>请在 站点管理->监控设备中配置 或 联系运维管理员：</p>
              <span>额定电压、额定电流、电流负载率门限、电能质量分析</span>
              <span>如果设备没有配置额定电压，电压/谐波畸变率分析项可能没有数据</span>
              <span>如果设备不勾选电能质量分析，该设备不参与电能质量分析</span>
            </div>
            <div class="desBlock">
              <h3>【变量级配置】<a @click="goSiteVariableList">立即前往</a></h3>
              <p>请在 站点管理->变量列表中配置 或 联系运维管理员：配置下列变量，且需要指定变量的变量属性</p>
              <span>A/B/C相电压</span>
              <span>A/B/C相电流</span>
              <span>功率因数</span>
              <span>频率</span>
              <span>有功/无功功率</span>
              <span>有功/无功电度</span>
              <span>电压三相不平衡度</span>
              <span>电流三相不平衡度</span>
              <span>A/B/C相电压相角</span>
              <span>A/B/C相电流相角</span>
              <span>A/B/C相电压总谐波畸变率</span>
              <span>A/B/C相电流总谐波畸变率</span>
              <span>2~31次A/B/C相电压谐波含量或有效值 (可二选一)</span>
              <span>2~31次A/B/C相电流谐波含量或有效值 (可二选一)</span>
              <span>如果变量没有指定变量属性 或 变量没有数据，分析项可能没有数据</span>
            </div>
          </el-tab-pane>
         
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import {useRouter} from 'vue-router'

import { defineComponent, ref, watchEffect } from 'vue'
// import * as api from '@/api/siteManage/watchDog.js'
// import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'DescripDialog',
  emits: ['closeDialog'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
  },
  setup(props, context) {
    context
     let router = useRouter();
    const store = useStore()
    const dialogVisible = ref(false)

    const activeName=ref('first')


    // open(): Dialog弹窗打开之前做的事
    const open = () => {

    
    }

   

    // 关闭弹框
    const closeDialog = () => {
      context.emit('closeDialog', false)
      dialogVisible.value = false
    }

    watchEffect((fn, options) => {
      fn, options
      dialogVisible.value = props.flag
    })


    function handleClick(tab, event) {
      console.log(tab, event)
    }

     function goSiteWatchDog(){
      store.state.goUrl=2
      router.push({
    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
        path:'/siteManage',
        query:{
        activeName:'second',
        siteId:store.state.siteId
        }
      })
    }
    function goSiteVariableList(){
      store.state.goUrl=3
      router.push({
    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
        path:'/siteManage',
        query:{
        activeName:'six',
        siteId:store.state.siteId
        }
      })

    }
    function goSitePowerScore(){
      store.state.goUrl=6
      router.push({
    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
        path:'/siteManage',
        query:{
        activeName:'six',
        siteId:store.state.siteId
        }
      })

    }
   

    return {
       store,
      closeDialog,
      dialogVisible,
    
      open,

      handleClick,
      activeName,

      goSitePowerScore,
      goSiteWatchDog,
      goSiteVariableList
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

// label样式
.el-form-item__label {
  width: 150px;
}
.el-form-item__content {
  margin-left: 150px;
}
.desBlock {
  padding:15px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
  h3{
    margin:0 0 10px  0;
    position:relative;
    a{
      position:absolute;
      right:0
    }
    span{
      position:absolute;
      right:0;
      font-size:14px;
      color:#409eff;
      cursor:pointer
    }
  }
  p{
    // margin-bottom:0px;
  }
  span{
    display:block;
    color:#7e93a6
  }
}
</style>
<style>
.descripDialog .el-dialog__body{
  padding-top:0
}
.descripDialog .el-overlay-dialog {
  /* left: auto !important; */
  /* bottom: auto !important; */
}
</style>