UA 整理提交

he wei

5 天以前 3c3576d5792bfabcef84979757ee344712e71cd3

 src/views/realtime/tabs/power.vue

@@ -1,32 +1,166 @@
<script setup name="Power">
import { ref } from "vue";
const lineIdx = ref(0);
import { ref, reactive, computed, nextTick, watch, onMounted } from "vue";
import bar from '@/components/echarts/bar2.vue';
import bar1 from '@/components/echarts/bar3.vue';
import bar2 from '@/components/echarts/bar1.vue';
import bar4 from '@/components/echarts/bar4.vue';
import gauge from '@/components/echarts/gauge1.vue';
import water from '@/components/echarts/water.vue';
import ycTag from '@/components/ycTag.vue';

import getBinaryDigits from '@/utils/getBinaryDigits.js';

const lineIdx = ref(0);
const chart0 = ref(null);
const chart1 = ref(null);
const chart2 = ref(null);
const chart3 = ref(null);
const chart4 = ref(null);
const chart5 = ref(null);
const chart6 = ref(null);

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

// 整流器列表 最多16个
const modelList = computed(() => {
  return props.data.powerInf && props.data.powerInf.modelCfg ? getBinaryDigits(props.data.powerInf.modelCfg).map((v, i) => ({ value: v, label: i + 1 })).filter(vv => vv.value).map(v => v.label) : [];
});

const state = computed(() => {
  let rtData = props.data.pwrdevAcdcdata;
  return modelList.value.map((item) => !rtData[`isAcdcmod${item}Off`]);
});

const volList = computed(() => {
  let rtData = props.data.pwrdevAcdcdata;
  return modelList.value.map((item) => rtData[`m${item}OutVol`]);
});

watch(
  () => props.data,
  () => {
    nextTick(() => {
      updateRt();
    });
  },
  { immediate: true, deep: true }
);

function updateAcin() {
  let rtData = props.data.pwrdevAcdcdata;
  let line = lineIdx.value + 1;
  if (chart0.value) {
    chart0.value.updateChart(['A', 'B', 'C'], [rtData[`acin${line}Vola`], rtData[`acin${line}Volb`], rtData[`acin${line}Volc`]]);
  }
  if (chart1.value) {
    chart1.value.updateChart(['A', 'B', 'C'], [rtData[`acin${line}Curra`], rtData[`acin${line}Currb`], rtData[`acin${line}Currc`]]);
  }
}

function updateRt() {
  let rtData = props.data.pwrdevAcdcdata;
  updateAcin();
  if (chart2.value) {
    chart2.value.updateChart(['A', 'B', 'C'], [rtData[`acoutVola`], rtData[`acoutVolb`], rtData[`acoutVolc`]]);
  }
  if (chart3.value) {
    chart3.value.updateChart(rtData.dcoutVol);
  }
  if (chart4.value) {
    chart4.value.updateChart(rtData.dcoutCurr);
  }
  if (chart5.value) {
    chart5.value.updateChart(modelList.value.map((item) => `${item}#`), volList.value);
  }
  if (chart6.value) {
    chart6.value.updateChart(modelList.value.map((item) => `${item}#`), volList.value);
  }
}

onMounted(() => {
  
});
</script>

<template>
  <div class="tab-content">
    <div class="p-left">
      <div class="p-item">
        <card title="交流输入电压">
        <card title="交流输入">
          <template #tools>
            <el-radio-group class="line-idx" v-model="lineIdx" size="small">
            <el-radio-group class="line-idx" v-model="lineIdx" @change="updateAcin" size="small">
              <el-radio-button label="一路" :value="0" />
              <el-radio-button label="二路" :value="1" />
            </el-radio-group>
          </template>
          <div class="wrap">
            <div class="g-vol">
              <bar ref="chart0"></bar>
            </div>
            <div class="g-curr">
              <bar1 ref="chart1"></bar1>
            </div>
          </div>
        </card>
      </div>
      <div class="p-item">
        <card title="交流母线电压"></card>
        <card title="交流母线电压">
          <div class="wrap2">
            <div class="g-vol">
              <bar2 :barW="40" ref="chart2"></bar2>
            </div>
            <div class="g-vol">
              <gauge ref="chart3"></gauge>
            </div>
            <div class="g-vol">
              <water ref="chart4"></water>
            </div>
          </div>
        </card>
      </div>
    </div>
    <div class="p-right">
      <div class="p-item">
        <card title="整流器开关状态"></card>
        <card title="整流器开关状态">
          <div class="wrap scroll">
            <div class="grid">
              <div class="item" v-for="(i, idx) in modelList" :key="'list_' + idx">
                <yc-tag>
                  <div class="item-content">
                    <div class="idx">{{ i }}#</div>
                    <el-switch
                      v-model="state[idx]"
                      class="opacity1"
                      disabled
                      inline-prompt
                      active-text="开机"
                      inactive-text="关机"
                      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                      />
                  </div>
                </yc-tag>
              </div>
            </div>
          </div>
        </card>
      </div>
      <div class="p-item large">
        <card title="整流器输出电流"></card>
        <card title="整流器输出电压">
          <div class="wrap">
            <div class="g-vol g-item">
              <bar4 ref="chart5"></bar4>
            </div>
            <div class="panel-title">整流器输出电流</div>
            <div class="g-curr g-item">
              <bar4 ref="chart6"></bar4>
            </div>
          </div>
        </card>
      </div>
    </div>
  </div>
@@ -46,6 +180,27 @@
    .p-item {
      flex: 1;
      margin: 8px;

      .wrap {
        height: 100%;
        display: flex;
        .g-vol {
          flex: 1;
        }
        .g-curr {
          flex: 1;
        }
      }
      .wrap2 {
        height: 100%;
        display: flex;
        .g-vol {
          flex: 1;
          &~.g-vol {
            margin-left: 18px;
          }
        }
      }
    }
  }

@@ -57,9 +212,48 @@
    .p-item {
      flex: 1;
      margin: 8px;
      .wrap.scroll {
        height: 100%;
        overflow-y: auto;
      }
      .grid {
        // height: 100%;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        // grid-template-rows: repeat(2, 1fr);
        grid-gap: 10px 6px;
        place-content: stretch;
        // place-items: center stretch;
        // justify-items: stretch;
        // align-items: stretch;
        .item-content {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .idx {
            background: #0ff;
            color: #000;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 10px;
            margin-right: 10px;
            font-size: 17px;
          }
        }
      }

      &.large {
        flex: 2;
        .wrap {
          height: 100%;
          display: flex;
          flex-direction: column;
          .g-item {
            flex: 1;
          }
        }
      }
    }
  }