sis_zhfx/src/views/NewPages/dj.vue

<template>
  <div class="dj">
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col :span="24">
            <div class="query mg-b-8">
              <div class="query-items">
                <div class="query-item selections">
                  <button class="btn" type="button">风场功率风速排布图</button>
                  <button class="btn" type="button">
                    项目功率风速排布图
                  </button>
                  <button class="btn" type="button">
                    线路功率风速排布图
                  </button>
                </div>
                <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>
                </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>
                </div>
                <div class="query-item selections">
                  <button class="btn active" type="button">搜索</button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div class="mg-b-16 arrow-chart">
      <panel :title="'场站风向24小时走向情况'" :showLine="true">
        <multi-arrow-line-chart :height="'41.296vh'" />
      </panel>
    </div>
  </div>
</template>

<script>
import Panel from "../../components/coms/panel/panel.vue";
import multiArrowLineChart from "../../components/chart/line/multi-arrow-line-chart.vue";

export default {
  setup() {},
  components: {
    Panel,
    multiArrowLineChart,
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  created() {},
};
</script>

<style lang="less">
.dj {
  font-size: 12px;
  .arrow-chart {
    margin-top: 20px;
  }
}
</style>