hb_sis_zhfx/src/views/Agc/components/agc-panel.vue

<template>
  <ComPanel
    v-if="data && data.jcxx"
    :title="data.jcxx.name || '---'"
    :icon="data.jcxx.icon"
    :subTitle="data.jcxx.ddmc || '---'"
    :color="data.jcxx.color"
  >
    <table class="panel-table">
      <tbody>
        <tr>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">限电指令：</span>
              <span class="data-item-count">{{ data.jcxx.AGC002 }}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">实际功率：</span>
              <span class="data-item-count">{{ data.jcxx.AGC001 }}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">AGC可调上限：</span>
              <span class="data-item-count">{{ data.jcxx.AGC003 }}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">理论功率：</span>
              <span class="data-item-count">{{ (data.jcxx.ZZSGL/1000).toFixed(2) }}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">AGC可调下限：</span>
              <span class="data-item-count">{{ data.jcxx.AGC004 }}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">预测功率：</span>
              <span class="data-item-count">{{ data.jcxx.ycgl || 0 }}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="data-item">
              <span class="data-item-name">AGC投入</span>
              <i
                :class="
                  'data-item-icon fa fa-chrome ' +
                  (data.jcxx.AGC006 === 1 ? 'red' : 'green')
                "
              ></i>
            </div>
          </td>
          <td>
            <div class="data-item">
              <span class="data-item-name">AGC远方</span>
              <i
                :class="
                  'data-item-icon fa fa-chrome ' +
                  (data.jcxx.AGC005 === 1 ? 'red' : 'green')
                "
              ></i>
            </div>
          </td>
          <td>
            <div class="data-item">
              <span class="data-item-name">有功增闭锁</span>
              <i
                :class="
                  'data-item-icon fa fa-chrome ' +
                  (data.jcxx.AGC008 === 1 ? 'red' : 'green')
                "
              ></i>
            </div>
          </td>
          <td>
            <div class="data-item">
              <span class="data-item-name">有功减闭锁</span>
              <i
                :class="
                  'data-item-icon fa fa-chrome ' +
                  (data.jcxx.AGC007 === 1 ? 'red' : 'green')
                "
              ></i>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 查看默认实例去除末尾参数 :list 即可 -->
    <DoubleLineChart
      v-if="chartType === 'double'"
      height="20vh"
      :list="data.tb || chartData"
      @chartClick="chartClick($event)"
      :isChartClick="true"
    ></DoubleLineChart>
    <!-- <MultipleLineChart v-if="chartType === 'multiple'" height="13.889vh" :list="data.tb || chartData" :hoverType="'axis'"></MultipleLineChart> -->
    <el-dialog
      v-model="dialogVisible"
      width="70%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="true"
    >
      <DoubleLineChart
        height="70vh"
        :list="data.tb || chartData"
        myUnit="MW"
      ></DoubleLineChart>
    </el-dialog>
  </ComPanel>
</template>

<script>
import ComPanel from "@com/coms/panel/panel2.vue";
import DoubleLineChart from "@com/chart/line/marker-line-chart.vue";
import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
export default {
  // 名称
  name: "AgcPanel",
  // 使用组件
  components: {
    ComPanel,
    DoubleLineChart,
    MultipleLineChart,
  },
  // 传入参数
  props: {
    data: Object,
    chartType: {
      type: String,
      default: "double",
    },
    chartData: {
      type: Array,
      default: [
        {
          title: "",
          smooth: true,
          value: [],
        },
      ],
    },
  },
  // 自定义事件
  emits: {},
  // 数据
  data() {
    return {
      dialogVisible: false,
      list: [
        {
          title: "平均风速",
          yAxisIndex: 1, // 使用单位
          value: [
            {
              text: "1日",
              value: 0,
            },
            {
              text: "2日",
              value: 1,
            },
            {
              text: "3日",
              value: 0,
            },
            {
              text: "4日",
              value: 1,
            },
            {
              text: "5日",
              value: 0,
            },
            {
              text: "6日",
              value: 1,
            },
            {
              text: "7日",
              value: 0,
            },
          ],
        },
        {
          title: "应发功率",
          yAxisIndex: 0,
          value: [
            {
              text: "1日",
              value: 4,
            },
            {
              text: "2日",
              value: 2,
            },
            {
              text: "3日",
              value: 4,
            },
            {
              text: "4日",
              value: 2,
            },
            {
              text: "5日",
              value: 4,
            },
            {
              text: "6日",
              value: 2,
            },
            {
              text: "7日",
              value: 4,
            },
          ],
        },
        {
          title: "实际功率",
          yAxisIndex: 0,
          value: [
            {
              text: "1日",
              value: 1,
            },
            {
              text: "2日",
              value: 3,
            },
            {
              text: "3日",
              value: 1,
            },
            {
              text: "4日",
              value: 3,
            },
            {
              text: "5日",
              value: 1,
            },
            {
              text: "6日",
              value: 3,
            },
            {
              text: "7日",
              value: 1,
            },
          ],
        },
      ],
    };
  },
  // 函数
  methods: {
    chartClick() {
      this.dialogVisible = true;
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
    this.list = this.data || [
      {
        title: "",
        yAxisIndex: 1, // 使用单位
        value: [],
      },
    ];

  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
  watch: {
    daya(res) {
      this.list = res;
    },
  },
};
</script>

<style lang="less">
.panel-table {
  width: 100%;

  .data-item {
    background-color: fade(@gray, 20);
    padding: 0.278vh;
    padding-left: 0.7407vh;
    font-size: 1.504vh;
    display: flex;
    flex-direction: row;
    height: 30px;
    padding-left: 45px;
    padding-right: 80px;
    align-items: center;



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

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

    }

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

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

.green {
  color: @green;
}

.red {
  color: @red;
}
</style>