hb_sis_zhfx/src/views/Decision/Decision1.vue

<template>
  <div class="decision-page-1">
    <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <input name="" placeholder="请输入场站信息" />
            <div class="unit svg-icon svg-icon-gray">
              <svg-icon :svgid="'svg-arrow-down'" />
            </div>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <input name="" />
            <div class="unit svg-icon svg-icon-gray">
              <svg-icon :svgid="'svg-arrow-down'" />
            </div>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <input name="" />
            <div class="unit svg-icon svg-icon-gray">
              <svg-icon :svgid="'svg-arrow-down'" />
            </div>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <input name="" />
            <div class="unit svg-icon svg-icon-gray">
              <svg-icon :svgid="'svg-arrow-down'" />
            </div>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <input name="" />
            <div class="unit svg-icon svg-icon-gray">
              <svg-icon :svgid="'svg-arrow-down'" />
            </div>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green">搜索</button>
        <button class="btn">明细信息</button>
        <button class="btn">导出</button>
      </div>
    </div>
    <div class="actions mg-b-8">
      <button class="btn green">风场</button>
      <button class="btn">项目</button>
      <button class="btn">集电线路</button>
    </div>
    <el-row :type="'flex'" class="content">
      <el-col :span="12" class="pd-r-8">
        <toolbar-panel :title="123" :showLine="false">
          <template v-slot:tools>
            <div class="tools">
              <div class="tool-block">
                <div class="legend bg-green"></div>
                <div class="legend-text">实际电量</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-orange"></div>
                <div class="legend-text">计划检修损失</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-yellow"></div>
                <div class="legend-text">非计划检修损失</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-red"></div>
                <div class="legend-text">限电损失</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-purple"></div>
                <div class="legend-text">受累损失</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-blue"></div>
                <div class="legend-text">性能损失</div>
              </div>
            </div>
          </template>
          <bar-line-chart  :height="'calc(100vh - 200px)'"/>
        </toolbar-panel>
      </el-col>
      <el-col :span="12" class="pd-l-8">
        <panel :title="'项目列表'" :showLine="false">
          <div class="project-table">
            <Table :data="tableData"></Table>
          </div>
        </panel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BarLineChart from "../../components/chart/combination/bar-line-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
import Table from "../../components/coms/table/table.vue";
export default {
  components: { ToolbarPanel, BarLineChart, Panel, Table, SvgIcon },
  data() {
    return {
      tableData: {
        column: [
          {
            name: "",
            field: "index",
            is_num: false,
            is_light: false,
          },
          {
            name: "名称",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "理论发电量",
            field: "lqf",
            is_num: false,
            is_light: false,
          },
          {
            name: "SCADA发电量",
            field: "yggl",
            is_num: false,
            is_light: false,
          },
          {
            name: "风速",
            field: "yyy",
            is_num: false,
            is_light: false,
          },
          {
            name: "非计划检修",
            field: "pcspp",
            is_num: false,
            is_light: false,
          },
          {
            name: "计划检修",
            field: "u1",
            is_num: false,
            is_light: false,
          },
          {
            name: "受累",
            field: "u2",
            is_num: false,
            is_light: true,
          },
          {
            name: "限电",
            field: "v1",
            is_num: false,
            is_light: false,
          },
          {
            name: "性能",
            field: "v2",
            is_num: false,
            is_light: false,
          },
          {
            name: "风能率用率%",
            field: "w1",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            index: 1,
            name: "MG01-01",
            lqf: "0.1000",
            yggl: "0.1000",
            yyy: "0.10",
            pcspp: "0.1000",
            u1: "0.1000",
            u2: "0.1000",
            v1: "0.1000",
            v2: "0.1000",
            w1: "0.1000",
            w2: "0.1000",
            zca: "0.1000",
            zcb: "0.1000",
            clx: "0.1000",
            clx1: "0.1000",
            clx2: "0.1000",
            jc: "0.1000",
            hh: "0.1000",
            hj: "0.1000",
            is_light: false,
          },
        ],
      },
    };
  },
  created() {
    for (let i = 1; i < 50; i++) {
      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
      this.tableData.data[i].index = i + 1;
    }
  },
};
</script>

<style lang="less">
.decision-page-1 {
  .com-panel .panel-title {
    line-height: 3.4259vh;
  }

  .tools {
    display: flex;
    line-height: 3.4259vh;

    .tool-block {
      display: flex;
      align-items: center;
      margin-left: 0.741vh;

      .legend {
        flex: auto;
        width: 0.741vh;
        height: 0.741vh;
        margin-right: 0.741vh;

        &.long {
          width: 2.963vh;
          height: 0.37vh;
        }
      }

      .legend-text {
        color: @gray-l;
        font-size: @fontsize-s;
      }
    }
  }

  .project-table {
    overflow: auto;

    tbody {
      height: calc(100vh - 24.5vh);
    }
    td {
      color: #b2bdc0 !important;
    }
  }
}
</style>