sis_zhfx/src/views/Decision/Decision3.vue

<template>
  <div class="decision-page-3">
    <!-- 查询样式统一处理 样式在 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="info">
      <div class="mg-b-16">
        <div class="project-table">
          <Table :data="tableData"></Table>
        </div>
      </div>
      <!-- 风资源列表 -->
      <div class="direction-info mg-b-16">
        <table class="com-table">
          <tbody class="scroll">
            <tr>
              <td v-for="(col, i) of tableData.column" :key="i">
                <div v-if="i == 0">22</div>
                <div v-if="i == 1">风资源</div>
                <div v-if="i != 0 && i != 1">
                  <div class="direction-title">3.123</div>
                  <div class="direction-chart">
                    <DirectionRadarChart :width="'70%'" :height="'232px'" :value="90" />
                    <div class="legend mg-t-16">
                      <span class="dot"></span>
                      <span>静风频率为2</span>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 日功率曲线 -->
      <div>
        <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>
          <double-line-chart :height="'200px'" />
          <normal-line-chart :height="'200px'" />
        </toolbar-panel>
      </div>
    </div>
  </div>
</template>

<script>
import DoubleLineChart from "../../components/chart/line/double-line-chart.vue";
import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
import Table from "../../components/coms/table/table.vue";
export default {
  components: { Table, SvgIcon, DirectionRadarChart, ToolbarPanel, DoubleLineChart, NormalLineChart },
  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: "项目",
            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,
          },
        ],
        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 < 20; 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-3 {
  .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;
        }
      }
    }
  }

  .info {
    overflow: auto;
    height: calc(100vh - 150px);
  }

  .project-table {
    overflow: auto;
    .com-table {
      tbody {
        padding-right: 0px;
      }
      th,
      td {
        color: #b2bdc0;
        &:nth-child(1) {
          width: 32px;
        }
        &:nth-child(2) {
          width: 183px;
        }
      }
    }
  }

  .direction-info {
    .com-table {
      tbody {
        padding-right: 0px;
      }
      th,
      td {
        color: #b2bdc0;
        padding: 0;

        &:nth-child(1) {
          width: 32px;
          background-color: fade(#536268, 20);
        }
        &:nth-child(2) {
          width: 183px;
          background-color: fade(#536268, 40);
        }

        .direction-title {
          background-color: fade(#536268, 20);
          font-size: @fontsize-s;
          line-height: 2.963vh;
        }

        .direction-chart {
          padding-top: 48px;
          .legend {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 32px;
            margin-bottom: 16px;

            .dot {
              width: 7px;
              height: 7px;
              background: @green;
              display: inline-block;
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}
</style>