jn_sis_zhfx/src/views/stateMonitor/Agc/components/agc-panel.vue

<template>
  <div class="dark-grid">
    <div
      class="grid-content"
      style="width: 443px"
      :class="{
        activeError: data?.agc009 == 1,
        flash: data?.add,
      }"
      @click="handleMousenter"
    >
      <ul>
        <li class="agc_title">
          <p>
            <span>{{ data?.wpname || "---" }}</span>
            <i
              style="cursor: pointer"
              class="svg-icon svg-icon-sm svg-icon-green"
              @click="handleClick(data)"
            >
              <SvgIcon svgid="svg-line"></SvgIcon>
            </i>
          </p>
          <p class="agc_name" :class="{ activeBaC: data?.agc009 == 1 }"></p>
        </li>
        <li class="agc_content">
          <div>
            <p>
              有功设定限值<span class="agc_val">{{
                (data?.agc002 / 1000).toFixed(2) || "--"
              }}</span
              ><span class="agc_units">MW</span>
            </p>
            <p class="pw_val">
              出线功率
              <span
                class="agc_val agc_ch"
                :class="{
                  activeChao: Number(data?.agc001) > Number(data?.agc002),
                  activeXiao: Number(data?.agc001) < Number(data?.agc002),
                }"
                >{{ (data?.agc001 / 1000).toFixed(2) || "--" }}</span
              ><span class="agc_unit">MW</span>
            </p>
          </div>
          <div>
            <p>
              AGC可调上限<span class="agc_val">{{
                (data?.agc003 / 1000).toFixed(2) || "--"
              }}</span
              ><span class="agc_units">MW</span>
            </p>
            <p>
              理论功率<span class="agc_val">{{
                (data?.agc010 / 1000).toFixed(2) || "--"
              }}</span
              ><span class="agc_unit">MW</span>
            </p>
          </div>
          <div>
            <p>
              AGC可调下限<span class="agc_val">{{
                (data?.agc004 / 1000).toFixed(2) || "--"
              }}</span
              ><span class="agc_units">MW</span>
            </p>
            <p>
              预测功率<span class="agc_val">{{
                (data?.ycgl / 1000).toFixed(2) || "--"
              }}</span
              ><span class="agc_unit">MW</span>
            </p>
          </div>
        </li>
        <li class="agc_footer">
          <!-- 1红其他绿 -->
          <div>
            <img src="@assets/imgs/zhaung.png" v-if="data?.agc006 == 1" />
            <img src="@assets/imgs/zheng.png" v-else />
            <p>AGC投入</p>
          </div>
          <div>
            <img src="@assets/imgs/zhaung.png" v-if="data?.agc005 == 1" />
            <img src="@assets/imgs/zheng.png" v-else />
            <p>AGC远方</p>
          </div>
          <div>
            <img src="@assets/imgs/zhaung.png" v-if="data?.agc008 == 1" />
            <img src="@assets/imgs/zheng.png" v-else />
            <p>有功增闭锁</p>
          </div>
          <div>
            <img src="@assets/imgs/zhaung.png" v-if="data?.agc007 == 1" />
            <img src="@assets/imgs/zheng.png" v-else />
            <p>有功减闭锁</p>
          </div>
        </li>
      </ul>
      <qushi-dialog ref="child"></qushi-dialog>
    </div>
  </div>
</template>

<script>
import qushiDialog from "@/components/qushi/qushiDialog.vue";
import { deepClone } from "@/utills/func.js";
import SvgIcon from "@/components/coms/icon/svg-icon.vue";
export default {
  // 名称
  name: "AgcPanel",
  // 使用组件
  components: {
    SvgIcon,
    qushiDialog,
  },
  // 传入参数
  props: {
    obj: Object,
  },
  // 数据
  data() {
    return {
      dialogVisible: false,
      stse: [
        {
          statiomName: "预测功率",
          stse: "BDSAMC",
          sts: "FCFGDQDT0001",
        },
        {
          statiomName: "有功设定限值",
          stse: "BDSAMC",
          sts: "AGC002",
        },
        {
          statiomName: "出线功率",
          stse: "BDSAMC",
          sts: "AGC001",
        },
        {
          statiomName: "理论功率",
          stse: "BDSAMC",
          sts: "AGC010",
        },
      ],
      data: {},
    };
  },
  created() {
    this.data = this.obj;
  },
  // 函数
  methods: {
    deepClone,
    handleClick(item) {
      let y = this.deepClone(this.stse);
      y?.forEach((val) => {
        val.stse = item.wpname;
      });
      this.$refs.child.openCurvDatas(y, 4, item.wpid);
    },
    handleMousenter() {
      this.data.add = false;
    },
  },
};
</script>

<style lang="less" scoped>
.unitChart {
  font-size: 12px;
  margin-top: 3px;
}
.panel-table {
  width: 100%;

  .data-item {
    background-color: fade(@gray, 20);
    padding: 0.278vh;
    padding-left: 0.7407vh;
    font-size: 1.204vh;
    display: flex;
    flex-direction: row;

    .data-item-name {
      color: @gray;
    }

    .data-item-count {
      color: @green;
      margin-left: auto;
      margin-right: 0.556vh;
    }

    .data-item-unit {
      color: @gray;
    }

    .data-item-icon {
      margin: auto;
      margin-right: 0;
      font-size: @fontsize-s;
    }
  }
}

.green {
  color: @green;
}

.red {
  color: @red;
}
ul,
ul li,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

.light-grid {
  .grid-content {
    height: 227px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;

    .agc_title {
      position: relative;
      padding: 11px 0 8px 16px;
      display: flex;

      .agc_name {
        width: 35px;
        height: 35px;
        position: absolute;
        right: -1px;
        top: -1px;
        border-radius: 8px;
        background: linear-gradient(
          to right top,
          rgba(5, 148, 60, 0),
          rgba(5, 148, 60, 0),
          rgba(5, 148, 60, 0.5)
        );
      }

      .activeBaC {
        background: linear-gradient(
          to right top,
          rgba(5, 148, 60, 0),
          rgba(251, 77, 0, 0),
          rgba(251, 77, 0, 0.5)
        );
      }

      span {
        font-size: 16px;
        color: #36348e;
        font-weight: 700;
      }

      i {
        position: absolute;
        right: 15px;
        font-size: 20px;
        color: green;
        z-index: 1;
      }

      .activeImg {
        color: red;
      }
    }

    .agc_content {
      line-height: 37px;
      padding: 0 10px 0 20px;

      div {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(72, 75, 83, 0.5);

        .pw_val {
        }

        > p:last-of-type {
          position: relative;
          left: -12px;
          width: 162px;
        }

        p {
          font-size: 14px;
          color: #606769;
          position: relative;
          font-weight: 700;
          .agc_unit {
            position: absolute;
            left: 140px;
            top: 1px;
          }

          .agc_units {
            position: absolute;
            left: 168px;
            top: 1px;
          }

          span {
            font-size: 12px;
            font-family: "SourceHanSansCN";
            color: #606769;
            position: relative;
            left: 18px;
          }

          .agc_val {
            font-family: "Arial";
            font-size: 14px;
            color: #36348e;
          }

          .agc_ch {
            position: absolute;
            left: 75px;
          }
        }
      }
    }

    .agc_footer {
      //width: 280px;
      text-align: center;
      margin-top: 13px;
      padding: 0 16px;
      display: flex;
      justify-content: space-between;

      img {
        width: 20px;
        height: 20px;
      }

      p {
        font-size: 14px;
        color: #606769;
        font-weight: 700;
      }

      i {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 10px;
      }

      i.red {
        background: red;
      }

      i.green {
        background: green;
      }
    }
  }
}
.dark-grid {
  .grid-content {
    height: 227px;
    background: rgba(30, 37, 36, 0.45);
    border-radius: 8px;
    margin-bottom: 10px;
    &.activeError {
      box-shadow: 0 0 14px #f00 inset;
    }
    @keyframes twinkle {
      from {
        box-shadow: 0 0 14px #f00 inset;
      }
      50% {
        box-shadow: 0 0 14px transparent inset;
      }
      to {
        box-shadow: 0 0 14px #f00 inset;
      }
    }
    &.flash {
      animation: twinkle 1s;
      animation-iteration-count: infinite;
    }
    .agc_title {
      position: relative;
      padding: 11px 0 8px 16px;
      display: flex;

      .agc_name {
        width: 35px;
        height: 35px;
        position: absolute;
        right: -1px;
        top: -1px;
        border-radius: 8px;
        background: linear-gradient(
          to right top,
          rgba(5, 148, 60, 0),
          rgba(5, 148, 60, 0),
          rgba(5, 148, 60, 0.5)
        );
      }

      .activeBaC {
        background: transparent;
      }

      span {
        font-size: 14px;
        color: #b3b3b3;
      }

      i {
        position: absolute;
        right: 15px;
        font-size: 20px;
        color: green;
        z-index: 1;
      }

      .activeImg {
        color: red;
      }
    }

    .agc_content {
      line-height: 37px;
      padding: 0 10px 0 20px;

      div {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(72, 75, 83, 0.5);

        .pw_val {
          .scs {
            position: absolute;
            left: 60px;
            top: 12px;
          }
        }

        > p:last-of-type {
          position: relative;
          left: -12px;
          width: 162px;
        }

        p {
          font-size: 14px;
          color: #949595;
          position: relative;

          .agc_unit {
            position: absolute;
            left: 140px;
            top: 1px;
          }

          .agc_units {
            position: absolute;
            left: 168px;
            top: 1px;
          }

          span {
            font-size: 12px;
            font-family: "SourceHanSansCN";
            color: #606769;
            position: relative;
            left: 18px;
          }

          .agc_val {
            font-family: "Arial";
            font-size: 14px;
            color: @green;
          }

          .agc_ch {
            position: absolute;
            left: 75px;
          }
        }
      }
    }

    .agc_footer {
      //width: 280px;
      text-align: center;
      margin-top: 13px;
      padding: 0 16px;
      display: flex;
      justify-content: space-between;

      img {
        width: 20px;
        height: 20px;
      }

      p {
        font-size: 14px;
        color: #b3b3b3;
      }

      i {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 10px;
      }

      i.red {
        background: red;
      }

      i.green {
        background: green;
      }
    }
  }
}
</style>