he wei
2023-12-08 f182d3bafb07fe93a4109742cb3553b795c6c919
src/views/switchControl/index.vue
@@ -2,19 +2,31 @@
  <div class="p-contain">
    <panel class="panel side" title="通信电源柜线路选择">
      <div class="content">
        <div class="list-item AC active" >
        <div
          :class="['list-item', 'AC', { active: currIdx == 0 }]"
          @click="changeTab(0)"
        >
          <div class="i"></div>
          <div class="name">交流进线1</div>
        </div>
        <div class="list-item AC">
        <div
          :class="['list-item', 'AC', { active: currIdx == 1 }]"
          @click="changeTab(1)"
        >
          <div class="i"></div>
          <div class="name">交流进线2</div>
        </div>
        <div class="list-item DC">
        <div
          :class="['list-item', 'DC', { active: currIdx == 2 }]"
          @click="changeTab(2)"
        >
          <div class="i"></div>
          <div class="name">直流进线1</div>
        </div>
        <div class="list-item DC">
        <div
          :class="['list-item', 'DC', { active: currIdx == 3 }]"
          @click="changeTab(3)"
        >
          <div class="i"></div>
          <div class="name">直流进线2</div>
        </div>
@@ -50,8 +62,13 @@
              label="操作"
            >
              <template slot-scope="scope">
                <el-button type="primary" size="mini">合闸</el-button>
                <el-button disabled="" type="primary" size="mini"
                <el-button type="primary" :disabled="!hasPermission" size="mini"
                  >合闸</el-button
                >
                <el-button
                  :disabled="!hasPermission"
                  type="primary"
                  size="mini"
                  >分闸</el-button
                >
              </template>
@@ -59,38 +76,42 @@
          </el-table>
        </div>
      </panel>
      <panel class="panel row row1" title="断路器电参量实时参数">
      <panel class="panel row row1" :title="actName + '电参量实时参数'">
        <div class="content">
          <div class="yc-panel">
          <div class="yc-panel" v-if="currIdx == 0 || currIdx == 1">
            <div class="yc-title">三相相电压(V)</div>
            <div class="yc-content">
              <div class="bar-contain">
                <bar1 ref="bar1"></bar1>
                <bar1 ref="bar1" unit="V"></bar1>
              </div>
              <div class="info">
              <!-- <div class="info">
                <div class="label">平均值:</div>
                <div class="value">123V</div>
              </div>
              </div> -->
            </div>
          </div>
          <div class="border">
            <list-card :datas="props1" :cols="1" :rows="4"></list-card>
            <list-card
              :datas="$data[`props${currIdx + 1}`]"
              :cols="1"
              :rows="4"
            ></list-card>
          </div>
          <div class="yc-panel">
            <div class="yc-title">三相相电压(V)</div>
          <div class="yc-panel" v-if="currIdx == 0 || currIdx == 1">
            <div class="yc-title">三相相电流(A)</div>
            <div class="yc-content">
              <div class="bar-contain">
                <bar2 ref="bar2"></bar2>
                <bar2 ref="bar2" unit="A"></bar2>
              </div>
              <div class="info">
              <!-- <div class="info">
                <div class="label">平均值:</div>
                <div class="value">123V</div>
              </div>
                <div class="value">123A</div>
              </div> -->
            </div>
          </div>
          <div class="border">
          <!-- <div class="border">
            <list-card :datas="props2" :cols="1" :rows="4"></list-card>
          </div>
          </div> -->
        </div>
      </panel>
    </div>
@@ -109,43 +130,92 @@
  data() {
    const props1 = [
      {
        label: "AB相线电压(V)",
        label: "1路总有功功率(W)",
        key: "",
      },
      {
        label: "BC相线电压(V)",
        label: "1路交流输入频率(Hz)",
        key: "",
      },
      {
        label: "CA相线电压(V)",
        label: "1路总功率因数",
        key: "",
      },
      {
        label: "线电压平均值(V)",
        label: "1路交流断路器总数量",
        key: "",
      },
    ];
    const props2 = [
      {
        label: "电流不平衡度(%)",
        label: "2路总有功功率(W)",
        key: "",
      },
      {
        label: "零序电流(A)",
        label: "2路交流输入频率(Hz)",
        key: "",
      },
      {
        label: "总有功功率",
        label: "2路总功率因数",
        key: "",
      },
      {
        label: "总功率因数",
        label: "2路交流断路器总数量",
        key: "",
      },
    ];
    const props3 = [
      {
        label: "1路直流电压(V)",
        key: "",
      },
      {
        label: "1路直流电流(A)",
        key: "",
      },
      {
        label: "1路直流断路器总数量",
        key: "",
      },
    ];
    const props4 = [
      {
        label: "2路直流电压(V)",
        key: "",
      },
      {
        label: "2路直流电流(A)",
        key: "",
      },
      {
        label: "2路直流断路器总数量",
        key: "",
      },
    ];
    // const props2 = [
    //   {
    //     label: "电流不平衡度(%)",
    //     key: "",
    //   },
    //   {
    //     label: "零序电流(A)",
    //     key: "",
    //   },
    //   {
    //     label: "总有功功率",
    //     key: "",
    //   },
    //   {
    //     label: "总功率因数",
    //     key: "",
    //   },
    // ];
    return {
      currIdx: 0,
      props1,
      props2,
      props3,
      props4,
      table: {
        headers: [
          {
@@ -204,24 +274,6 @@
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
        ],
      },
    };
@@ -233,7 +285,19 @@
    bar1,
    bar2,
  },
  methods: {},
  computed: {
    hasPermission() {
      return this.$store.state.user.downloadFlag == 1;
    },
    actName() {
      return ["交流进线1", "交流进线2", "直流进线1", "直流进线2"][this.currIdx];
    },
  },
  methods: {
    changeTab(idx) {
      this.currIdx = idx;
    },
  },
  mounted() {},
};
@@ -259,6 +323,7 @@
        border-radius: 6px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        .i {
          width: 40px;
@@ -377,12 +442,12 @@
      display: flex;
      justify-content: space-between;
      .value {
        background: #0C4D77;;
        background: #0c4d77;
        width: 60px;
        border-radius: 4px;
        padding: 2px 4px;
        color: #78eef8;
        border: 1px #78EEF8 solid;
        border: 1px #78eef8 solid;
      }
    }
  }
@@ -393,6 +458,11 @@
    background: #011f39;
    padding: 46px 8px;
    margin-left: 10px;
    &:only-child {
      margin-left: auto;
      margin-right: auto;
      flex: 0 0 600px;
    }
  }
}
</style>