goldenPig/src/views/Env/Electro.vue

<template>
  <div class="electro">
    <div class="reply" :style="{color: color}">全场用电情况</div>
    <x-form :formItems="formItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
    <div class="echarts">
      <div class="echarts-l">
        <chart-electro></chart-electro>
      </div>
      <div class="echarts-r">
        <chart-dl></chart-dl>
      </div>
    </div>
    <br>
    <div class="reply" :style="{color: color}">用电量详情</div>
    <x-form :formItems="selectItems" :day="day1" @setDay="setDay1" @onClickType="onClickType1"></x-form>
    <div class="echarts">
      <div class="echarts-l">
        <chart-electro :id="'1'"></chart-electro>
      </div>
      <div class="echarts-r">
        <chart-dl :id="'1'"></chart-dl>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import XForm from "@/components/XForm";
import ChartElectro from "@/views/Env/chart/ChartElectro";
import ChartDl from "@/views/dashboard/chart/ChartDl";
export default {
  name: "Electro",
  components: {
    XForm,
    ChartElectro,
    ChartDl
  },
  data() {
    return {
      formItems: [
        {
          id: 1,
          type: 'text',
          text: '今日',
          value: 1,
          col: 1
        },
        {
          id: 2,
          type: 'text',
          text: '本周',
          value: 2,
          col: 1
        },
        {
          id: 3,
          type: 'text',
          text: '本月',
          value: 3,
          col: 1
        },
        {
          id: 4,
          type: 'datepicker',
          placeholder: [],
          field: 'value1',
          col: 6
        },
        {
          id: 5,
          type: 'button',
          text: '查询',
          col: 2,
          click: 'search'
        }
      ],
      day: 2,
      selectItems: [
        {
          id: 1,
          type: 'select',
          label: '栋舍：',
          placeholder: '请选择栋舍',
          field: 'areaId',
          options: [],
          col: 4
        },
        {
          id: 2,
          type: 'select',
          label: '单元：',
          placeholder: '请选择单元',
          field: 'unitId',
          options: [],
          col: 4
        },
        {
          id: 3,
          type: 'text',
          text: '今日',
          value: 1,
          col: 1
        },
        {
          id: 4,
          type: 'text',
          text: '本周',
          value: 2,
          col: 1
        },
        {
          id: 5,
          type: 'text',
          text: '本月',
          value: 3,
          col: 1
        },
        {
          id: 6,
          type: 'datepicker',
          placeholder: [],
          field: 'value1',
          col: 6
        },
        {
          id: 7,
          type: 'button',
          text: '查询',
          col: 2,
          click: 'search'
        }
      ],
      day1: 2,
      dataValue: [12, 13, 10, 13, 9, 23, 21, 21, 24, 23, 14, 21, 21]
    };
  },
  computed: {
    ...mapState(['color'])
  },
  methods: {
    setDay(data) {
      this.day = data;
    },
    onClickType() {

    },
    setDay1(data) {
      this.day1 = data;
    },
    onClickType1() {},

  }
}
</script>

<style scoped>
  .electro {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 20px 0 20px;
  }
  .reply {
    width: 100%;
    border: 1px solid #ddd;
    border-bottom: 0;
    height: 50px;
    background-color: #F3F3F3;
    line-height: 50px;
    font-size: 18px;
    box-sizing: border-box;
    padding-left: 20px;
  }
  .echarts {
    width: 100%;
    height: 401px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-top: 0;
    display: flex;
  }
  .echarts-l {
    width: 30%;
    height: 100%;
  }
  .echarts-r {
    width: 70%;
    height: 100%;
  }
</style>