vue+element進行普通佈局

注意：element有的標籤套用會有影響的。比如el-header裏面的el-form-item的label對不齊！

<template>
  <section>
    <el-container style="border: 1px solid #CCC;border-radius: 5px;background-color: #ffffff;">
      <el-aside style="background-color: #FFFFFF;border-right: 1px solid #ccc;">
        <el-row :gutter="10" style="text-align: center;margin-top: 20px;">
          <el-input
            placeholder="請輸入內容"
            v-model="input3"
            class="input-with-select"
            style="width: 90%"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-row>

        <el-menu
          :default-openeds="['1']"
          style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;border-right: none; margin-top: 20px;"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-minus"></i>啦啦啦
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">哈哈哈</el-menu-item>
              <el-menu-item index="1-1">嘿嘿嘿</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">
                <i class="el-icon-minus"></i>新增
              </template>
              <el-menu-item index="1-4-1">一層北</el-menu-item>
              <el-menu-item index="1-4-2">二層北</el-menu-item>
              <el-menu-item index="1-4-3">三層北</el-menu-item>
              <el-menu-item index="1-4-4">四層北</el-menu-item>
              <el-menu-item index="1-4-5">五層北</el-menu-item>
              <el-menu-item index="1-4-6">六層北</el-menu-item>
              <el-menu-item index="1-4-7">一層南</el-menu-item>
              <el-menu-item index="1-4-8">二層南</el-menu-item>
              <el-menu-item index="1-4-9">六層南</el-menu-item>
              <el-menu-item index="1-4-10">三層南</el-menu-item>
              <el-menu-item index="1-4-11">四層南</el-menu-item>
              <el-menu-item index="1-4-12">五層南</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main id="containerMain">
        <el-form :inline="true" style="margin-top: 20px; width: 100%;">
          <el-row>
            <el-form-item label="開始日期:">
              <el-date-picker
                v-model="value1"
                type="date"
                size="small"
                :format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                clearable="false"
                placeholder="選擇日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="截止日期:">
              <el-date-picker
                v-model="value2"
                type="date"
                size="small"
                :format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="截止日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="historyList()" icon="el-icon-search">查詢</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="success">導出</el-button>
            </el-form-item>
            <el-form-item v-if="voltage == true">
              <el-select size="small" v-model="value" placeholder="李子柒">
                <el-option
                  v-for="item in optionsY"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="load">
              <el-select size="small" v-model="value" placeholder="騷白">
                <el-option
                  v-for="item in optionsF"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="electricCurrent">
              <el-select size="small" v-model="value" placeholder="張大仙">
                <el-option
                  v-for="item in optionsX"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="electricCurrent">
              <el-select size="small" v-model="value" placeholder="溫柚">
                <el-option
                  v-for="item in optionsJ"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row style="width: 100%;text-align: right;margin-bottom: 20px;">
            <el-button size="small" @click="selectVoltage(0)">電流</el-button>
            <el-button type="primary" size="small" @click="selectVoltage(1)">胡歌</el-button>
            <el-button type="success" size="small" @click="selectVoltage(2)">許嵩</el-button>
            <el-button type="info" size="small" @click="selectVoltage(3)">任然</el-button>
            <el-button type="warning" size="small" @click="selectVoltage(4)">八哥</el-button>
            <el-button type="danger" size="small" @click="selectVoltage(5)">抖音</el-button>
          </el-row>
        </el-form>
        <el-row>
          <div id="orderStatistics" :style="{width: '100%',height: '400px'}" ref="orderStatistics"></div>
        </el-row>
        <el-row>
          <div
            style="display: flex;justify-content: space-between;align-items: center; flex-wrap: nowrap; padding: 0; height:60px;"
          >
            <span>統計</span>
            <span>單位(個)</span>
          </div>
        </el-row>
        <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%;"
          :header-cell-style="{background:'#17B3A3',color:'#FFFFFF'}"
        >
          <el-table-column
            prop="date"
            label="參數"
            width="180"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column prop="name" label="最大值" width="180" header-align="center" align="center"></el-table-column>
          <el-table-column prop="address" label="最大值時間" header-align="center" align="center"></el-table-column>
          <el-table-column prop="address" label="最小值" header-align="center" align="center"></el-table-column>
          <el-table-column prop="address" label="最小值時間" header-align="center" align="center"></el-table-column>
          <el-table-column prop="address" label="平均值" header-align="center" align="center"></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </section>
</template>

<script>
import Cookies from "js-cookie";
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./tprjinfo-add-or-update";
import { regionData, CodeToText } from "element-china-area-data";
import { export_json_to_excel } from "@/assets/js/Export2Excel";

export default {
  data() {
    const item = {
      date: "A相電流",
      name: "34.5",
      address: "2017-06-05 13:10:00"
    };
    return {
      tableData: Array(3).fill(item),
      value1: "",
      value2: "",
      voltage: false, //點擊電壓顯示
      load: false, //點擊負荷顯示
      electricCurrent: false, //點擊諧波才顯示
      optionsY: [
        {
          value: "春天",
          label: "春天"
        },
        {
          value: "秋天",
          label: "秋天"
        }
      ],
      optionsF: [
        {
          value: "夏天",
          label: "夏天"
        },
        {
          value: "冬天",
          label: "冬天"
        },
        {
          value: "熱天",
          label: "熱天"
        }
      ],
      optionsX: [
        {
          value: "冷天",
          label: "冷天"
        },
        {
          value: "白天",
          label: "白天"
        }
      ],
      optionsJ: [
        {
          value: "夜晚",
          label: "夜晚"
        },
        {
          value: "聰明",
          label: "聰明"
        },
        {
          value: "愚鈍",
          label: "愚鈍"
        }
      ]
    };
  },
  methods: {
    selectVoltage(index) {
      let _this = this;
      _this.voltage = false;
      _this.load = false;
      _this.electricCurrent = false;
      if (index == 1) {
        _this.voltage = true;
        _this.load = false;
        _this.electricCurrent = false;
      } else if (index == 2) {
        _this.voltage = false;
        _this.load = true;
        _this.electricCurrent = false;
      } else if (index == 4) {
        _this.voltage = false;
        _this.load = false;
        _this.electricCurrent = true;
      } else {
        _this.voltage = false;
        _this.load = false;
        _this.electricCurrent = false;
      }
    },

    // 折線圖
    drawLine1() {
      var myChart = document.getElementById("orderStatistics");
      var containerMain = document.getElementById("containerMain");
      myChart.style.width = containerMain.innerWidth + "px";
      let myChart1 = this.$echarts.init(this.$refs.orderStatistics);
      myChart1.setOption({
        title: { text: "單位(A)" },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            restore: {},
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            mark: { show: true },
            saveAsImage: { show: true }
          }
        },
        tooltip: {},
        color: ["#FFCC00", "#33CC33", "#CC0000"], //關鍵加上這句話，legend的顏色和折線的自定義顏色就一致了
        legend: {
          data: ["boy", "lady", "ladyboy"]
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "02:00",
            "04:00",
            "06:00",
            "08:00",
            "10:00",
            "12:00",
            "14:00",
            "16:00",
            "18:00",
            "20:00",
            "22:00",
            "23:00"
          ]
        },
        yAxis: {
          type: "value",
          title: { text: "哦哦哦(A)" }
        },
        series: [
          {
            name: "boy",
            data: [
              0,
              5,
              120,
              932,
              1290,
              934,
              105,
              5,
              10,
              500,
              400,
              300,
              200,
              4
            ],
            type: "line",
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "lady",
            data: [
              20,
              80,
              100,
              202,
              1000,
              504,
              145,
              80,
              20,
              600,
              480,
              290,
              120,
              30
            ],
            type: "line",
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "ladyboy",
            data: [
              45,
              5,
              20,
              532,
              801,
              414,
              30,
              70,
              100,
              405,
              321,
              202,
              199,
              15
            ],
            type: "line",
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ],
        grid: {
          x: 30,
          x2: 50,
          y: 30,
          y2: 30
        }
      });
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawLine1();
    }, 2000);
  }
};
</script>

<style scoped>
.el-header {
  /* background-color: #b3c0d1; */
  color: #333;
  line-height: 60px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.el-aside {
  color: #333;
}

#orderStatistics {
  width: 100%;
}
</style>

最近在做elementUi+vue管理系統，有點忙！