sis_zhfx/src/views/Decision/Decision4.vue

<template>
  <div class="decision-page-4">
    <!-- 查询样式统一处理 样式在 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>
    <div class="mg-b-16">
      <div class="project-table">
        <Table :data="tableData"></Table>
      </div>
    </div>
    <div>
      <panel title=""> </panel>

      <toolbar-panel :title="'日度损失电量分析'">
        <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">预测功率4小时</div>
            </div>
          </div>
        </template>
        <multiple-bar-chart height="240px" />
      </toolbar-panel>
    </div>
  </div>
</template>

<script>
import MultipleBarChart from "../../components/chart/bar/multiple-bar-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: { Panel, Table, SvgIcon, MultipleBarChart, ToolbarPanel },
  data() {
    return {
      tableData: {
        column: [
          {
            name: "",
            field: "index",
            is_num: false,
            is_light: false,
          },
          {
            name: "",
            field: "check",
            is_num: false,
            is_light: false,
            template: function() {
              return "<input class='check' type='CheckBox' >";
            },
          },
          {
            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-4 {
  .com-panel {
    .panel-title {
      color: @gray-l;
    }
    .tools {
      display: flex;

      .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: 400px;
    }

    th,
    td {
      color: #b2bdc0 !important;
      &:nth-child(1) {
        width: 50px;
      }
      &:nth-child(2) {
        width: 50px;
      }
    }
  }
}
</style>