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 }}</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="13.889vh" :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" ></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.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;
}
</style>