sis_zhfx/src/views/Decision/Decision2.vue

<template>
  <div class="decision-page-2">
    <!-- 查询样式统一处理 样式在 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">
            <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <!-- <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">
            <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <!-- <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">
            <el-select v-model="value3" multiple placeholder="请选择" popper-class="select">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <!-- <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">
            <el-date-picker v-model="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
            <!-- <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">
            <el-date-picker v-model="value5" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
            <div class="unit svg-icon svg-icon-gray">
              <svg-icon :svgid="''" />
            </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>
    <el-row class="mg-b-16">
      <el-col :span="8">
        <panel title="日度损失电量分析">
          <dual-pie-chart height="21.296vh" />
        </panel>
      </el-col>
      <el-col :span="8">
        <panel title="日度损失电量分析">
          <dual-pie-chart height="21.296vh" />
        </panel>
      </el-col>
      <el-col :span="8">
        <panel title="日度损失电量分析">
          <dual-pie-chart height="21.296vh" />
        </panel>
      </el-col>
    </el-row>
    <div>
      <panel title="日度损失电量分析">
        <multiple-bar-chart height="240px" />
      </panel>
    </div>
  </div>
</template>

<script>
import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
import Table from "../../components/coms/table/table.vue";
export default {
  components: { Panel, Table, SvgIcon, DualPieChart, MultipleBarChart },
  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,
          },
        ],
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value1: [],
      value2: [],
      value3: [],
      value4: "",
      value5: "",
    };
  },
  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-2 {
  .project-table {
    overflow: auto;

    tbody {
      height: 189px;
    }

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