page.vue

<template>
  <div class="use-electro-data">
    <cardList cardListTitle="用电数据">
      <div slot="right">
        <!-- <i class="el-icon-menu"></i> -->
        <el-button size="mini" @click="toEnergyPage" type="primary"
          >综合图形</el-button
        >
      </div>
      <div slot="content">
        <!-- <enTabs ></enTabs> -->
        <div>
          <el-tabs class="en-tabs" v-model="activeTab">
            <el-tab-pane
              :label="item.label"
              :name="item.value"
              v-for="(item, index) in electroTabList"
              :key="index"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <el-form :inline="true">
            <el-form-item label="设备名称：">
              <el-input size="mini" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="设备编号：">
              <el-input size="mini" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="运行状态：">
              <el-select size="mini" placeholder="">
                <el-option label="正常" value="shanghai"></el-option>
                <el-option label="不正常" value="beijing"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button icon="el-icon-search" size="mini" type="primary"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <enTable
          :tableColums="tableColums"
          :tableData="tableData"
          :isShowOp="true"
          isShowPage="true"
        >
          <template v-slot:operation="scope">
            <el-button type="text" @click="openHistoryHandle"
              >历史数据</el-button
            >
            <el-button type="text" @click="openPicTHandle">统计图表</el-button>
          </template>
        </enTable>
      </div>
    </cardList>
    <history-data-modal
      :historyDataModalVisible="historyDataModalVisible"
      v-on:cancelhandle="cancelhandle"
    ></history-data-modal>
    <statistic-pic-table-modal
      :statisticModalVisible="statisticModalVisible"
      v-on:cancelhandlePic="cancelhandlePic"
    ></statistic-pic-table-modal>
  </div>
</template>
<script>
import cardList from '../../components/cardList'
import enTabs from '../../components/enTabs'
import enTable from '../../components/enTable'
import historyDataModal from './components/historyDataModal'
import statisticPicTableModal from './components/statisticPicTableModal'
const tableColums = [
  {
    align: 'center',
    prop: 'A',
    label: '设备名称',
    width: 162
  },
  {
    align: 'center',
    prop: 'B',
    label: '设备位置'
    // width: 182
  },
  {
    align: 'center',
    prop: 'C',
    label: '当日功耗',
    width: 162
  },
  {
    align: 'center',
    prop: 'D',
    label: '当月功耗',
    width: 162
  },
  {
    align: 'center',
    prop: 'E',
    label: '设备状态',
    width: 152
  },
  {
    align: 'center',
    prop: 'F',
    label: '设备编号',
    width: 152
  }
]
const tableData = [
  {
    A: '设备1',
    B: '左侧办公房屋',
    C: '11',
    D: '1100',
    E: '开启',
    F: 'QY0001'
  },
  {
    A: '设备2',
    B: '左侧办公房屋',
    C: '11',
    D: '1100',
    E: '开启',
    F: 'QY0002'
  }
]
export default {
  name: 'useElectroData',
  components: {
    cardList,
    enTabs,
    enTable,
    historyDataModal,
    statisticPicTableModal
  },
  data() {
    return {
      activeTab: '01',
      historyDataModalVisible: false,
      statisticModalVisible: false,
      tableColums,
      tableData,
      electroTabList: [
        {
          value: '01',
          label: '全部'
        },
        {
          value: '02',
          label: '排风机'
        },
        {
          value: '03',
          label: '机房空调(220V)'
        },
        {
          value: '04',
          label: '机房空调(380V)'
        },
        {
          value: '05',
          label: '防火卷帘门'
        },
        {
          value: '06',
          label: '风冷热泵机组'
        },
        {
          value: '07',
          label: '室内机风柜'
        },
        {
          value: '08',
          label: '多联室外机'
        }
      ]
    }
  },

  methods: {
    cancelhandle() {
      this.$nextTick(() => {
        this.historyDataModalVisible = false
      })
    },
    cancelhandlePic() {
      this.$nextTick(() => {
        this.statisticModalVisible = false
      })
    },

    openHistoryHandle() {
      this.historyDataModalVisible = true
    },
    openPicTHandle() {
      this.$nextTick(() => {
        this.statisticModalVisible = true
      })
    },
    toEnergyPage() {
      this.$router.push({
        path: '/analysis/energy'
      })
    }
  }
}
</script>
<style lang="scss">
.use-electro-data {
  padding: 0px 0 40px 0px;
  .el-form-item {
    margin-bottom: 15px;
    margin-top: 15px;
  }
}
</style>