sis_zhfx/src/views/WindSite/pages/Home/Home.vue

<template>
  <div class="wind-site-home">
    <row>
      <wind-site-weather />
      <panel-3 class="wind-site-info">
        <row align="middle">
          <div class="info-item">
            <div class="value">123</div>
            <div class="text">装机容量</div>
          </div>
          <div class="info-item">
            <div class="value">123</div>
            <div class="text">装机容量</div>
          </div>
          <div class="info-item">
            <div class="value">123</div>
            <div class="text">装机容量</div>
          </div>
          <div class="info-item">
            <div class="value">123</div>
            <div class="text">装机容量</div>
          </div>
          <div class="info-item">
            <div class="value">123</div>
            <div class="text">装机容量</div>
          </div>
          <div class="info-item">
            <div class="value">123</div>
            <div class="text">装机容量</div>
          </div>
          <div class="info-item">
            <div class="value">123</div>
            <div class="text">装机容量</div>
          </div>
          <div class="info-item">
            <div class="value">123</div>
            <div class="text">装机容量</div>
          </div>
        </row>
      </panel-3>
      <panel-3 class="wind-running-info">
        <row align="middle">
          <div class="fengji">
            <div class="fengji-icon svg-icon svg-icon-white">
              <svg-icon class="" svgid="svg-风机" />
            </div>
            <div class="info">
              <div class="text green">接入风机</div>
              <div class="value">30</div>
            </div>
          </div>
          <div class="situation">
            <row>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  运行
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  运行
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  运行
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  运行
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  运行
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  运行
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  运行
                </span>
              </div>
            </row>
            <row>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
            </row>
            <row>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  123
                </span>
              </div>
            </row>
          </div>
        </row>
      </panel-3>
    </row>
    <row>
      <Col :span="6">
        <panel title="日度损失电量分析"></panel>
      </Col>
      <Col :span="12">
        <panel title="72小时功率曲线图">
          <multiple-line-chart height="18.519vh" :list="Powertrend.value" :units="Powertrend.units" />
        </panel>
      </Col>
      <Col :span="6">
        <panel>
          <light-matrix />
        </panel>
      </Col>
    </row>
    <row>
      <Col :span="8">
        <panel title="日度损失电量分析">
          <dual-pie-chart height="21.296vh" />
        </panel>
      </Col>
      <Col :span="8">
        <panel title="月度损失电量分析"> <dual-pie-chart height="21.296vh" />s </panel>
      </Col>
      <Col :span="8">
        <panel title="年度损失电量分析">
          <dual-pie-chart height="21.296vh" />
        </panel>
      </Col>
    </row>
    <row>
      <Col :span="8">
        <panel title="日度损失电量分析">
          <hover-bar-chart height="21.296vh" />
        </panel>
      </Col>
      <Col :span="8">
        <panel title="完成电量">
          <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" />
        </panel>
      </Col>
      <Col :span="8">
        <panel title="月发电量对比">
          <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
        </panel>
      </Col>
    </row>
  </div>
</template>

<script>
import HoverBarChart from "../../../../components/chart/bar/hover-bar-chart.vue";
import MultipleBarChart from "../../../../components/chart/bar/multiple-bar-chart.vue";
import MultipleLineChart from "../../../../components/chart/line/multiple-line-chart.vue";
import NormalLineChart from "../../../../components/chart/line/normal-line-chart.vue";
import DualPieChart from "../../../../components/chart/pie/dual-pie-chart.vue";
import Col from "../../../../components/coms/grid/col.vue";
import Row from "../../../../components/coms/grid/row.vue";
import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
import Panel from "../../../../components/coms/panel/panel.vue";
import Panel3 from "../../../../components/coms/panel/panel3.vue";
import LightMatrix from "./light-matrix.vue";
import WindSiteWeather from "./wind-site-weather.vue";
export default {
  // 名称
  name: "WindSiteHome",
  // 使用组件
  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix },
  // 数据
  data() {
    return {
      // 完成电量
      CompleteElectricity: {
        data: [
          {
            title: "预测电量",
            yAxisIndex: 0,
            value: [
              {
                text: "1日",
                value: 1,
              },
              {
                text: "2日",
                value: 2,
              },
              {
                text: "3日",
                value: 1,
              },
              {
                text: "4日",
                value: 3,
              },
              {
                text: "5日",
                value: 3,
              },
              {
                text: "6日",
                value: 3,
              },
              {
                text: "7日",
                value: 3,
              },
            ],
          },
          {
            title: "实际电量",
            yAxisIndex: 0,
            value: [
              {
                text: "1日",
                value: 1,
              },
              {
                text: "2日",
                value: 2,
              },
              {
                text: "3日",
                value: 1,
              },
              {
                text: "4日",
                value: 3,
              },
              {
                text: "5日",
                value: 3,
              },
              {
                text: "6日",
                value: 3,
              },
              {
                text: "7日",
                value: 3,
              },
            ],
          },
        ],
        units: [""],
      },

      // 72小时功率曲线图
      Powertrend: {
        // 图表所用单位
        units: ["(万KWh)", "(风速)"],
        value: [
          {
            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,
              },
            ],
          },
        ],
      },

      // 月发电量对比
      MonthCompare: {
        units: ["(MK)"],
        value: [
          {
            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,
              },
            ],
          },
          {
            title: "实际功率",
            yAxisIndex: 0,
            value: [
              {
                text: "1",
                value: 3,
              },
              {
                text: "2",
                value: 1,
              },
              {
                text: "3",
                value: 3,
              },
              {
                text: "4",
                value: 1,
              },
              {
                text: "5",
                value: 3,
              },
              {
                text: "6",
                value: 1,
              },
              {
                text: "7",
                value: 3,
              },
            ],
          },
        ],
      },
    };
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less" scoped>
.wind-site-home {
  .wind-site-info {
    margin-left: 0.7407vh;
    flex: 1 0 auto;

    & > .row {
      height: 100%;
    }

    .info-item {
      text-align: center;
      padding: 0 0.37vh;
      flex: 1;

      .value {
        font-size: @fontsize-s;
        margin-bottom: 1.111vh;
      }
      .text {
        font-size: 12px;
        color: @gray;
      }
    }
  }

  .wind-running-info {
    margin-left: 0.7407vh;
    padding: 0.741vh;
    flex: 1 1 auto;

    & > .row {
      height: 100%;
    }
    .fengji {
      display: flex;
      align-content: center;
      flex: 0 0 auto;

      .fengji-icon {
        padding: 1.111vh;
        border: 0.093vh solid #05bb4c;
        border-radius: 50%;
        border-right-color: transparent;
        border-top-color: transparent;
        svg {
          width: 3.333vh;
          height: 3.333vh;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .text {
          font-size: @fontsize-s;
          margin-bottom: 1.111vh;
        }

        .value {
          text-align: right;
          font-size: 1.852vh;
        }
      }
    }

    .situation {
      flex: 1 1 auto;
      margin-left: 1.481vh;

      .row + .row {
        margin: 0;
      }

      .status {
        flex: 1;
        width: 7.963vh;
        display: flex;
        align-items: center;
        padding: 0.37vh 0;
        svg {
          width: 1.111vh;
          height: 1.111vh;
          margin-right: 0.37vh;
        }
        .text {
          font-size: 12px;
          flex: auto;
        }

        .value {
          font-size: 12px;
          padding-right: 0.741vh;
        }
      }
    }
  }
}
</style>