page.vue 4.94 KB
Newer Older
caojm's avatar
caojm committed
1 2 3 4
<template>
  <div class="use-electro-data">
    <cardList cardListTitle="用电数据">
      <div slot="right">
xiexingan's avatar
xiexingan committed
5
        <!-- <i class="el-icon-menu"></i> -->
co_dengxiongwen's avatar
co_dengxiongwen committed
6 7 8
        <el-button size="mini" @click="toEnergyPage" type="primary"
          >综合图形</el-button
        >
caojm's avatar
caojm committed
9
      </div>
xiexingan's avatar
xiexingan committed
10 11 12
      <div slot="content">
        <!-- <enTabs ></enTabs> -->
        <div>
co_dengxiongwen's avatar
co_dengxiongwen committed
13
          <el-tabs class="en-tabs" v-model="activeTab">
xiexingan's avatar
xiexingan committed
14 15 16 17 18 19 20 21 22 23
            <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">
xiexingan's avatar
xiexingan committed
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
            <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>
caojm's avatar
caojm committed
44 45 46
          </el-form>
        </div>

xiexingan's avatar
xiexingan committed
47 48 49 50 51 52
        <enTable
          :tableColums="tableColums"
          :tableData="tableData"
          :isShowOp="true"
          isShowPage="true"
        >
co_dengxiongwen's avatar
co_dengxiongwen committed
53 54 55 56
          <template v-slot:operation="scope">
            <el-button type="text" @click="openHistoryHandle"
              >历史数据</el-button
            >
xiexingan's avatar
xiexingan committed
57
            <el-button type="text" @click="openPicTHandle">统计图表</el-button>
co_dengxiongwen's avatar
co_dengxiongwen committed
58
          </template>
xiexingan's avatar
xiexingan committed
59
        </enTable>
caojm's avatar
caojm committed
60 61
      </div>
    </cardList>
xiexingan's avatar
xiexingan committed
62 63 64 65 66 67 68 69
    <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>
caojm's avatar
caojm committed
70 71
  </div>
</template>
co_dengxiongwen's avatar
co_dengxiongwen committed
72 73 74 75 76 77
<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'
caojm's avatar
caojm committed
78 79
const tableColums = [
  {
co_dengxiongwen's avatar
co_dengxiongwen committed
80 81 82 83
    align: 'center',
    prop: 'A',
    label: '设备名称',
    width: 162
caojm's avatar
caojm committed
84 85
  },
  {
co_dengxiongwen's avatar
co_dengxiongwen committed
86 87 88 89
    align: 'center',
    prop: 'B',
    label: '设备位置'
    // width: 182
caojm's avatar
caojm committed
90 91
  },
  {
co_dengxiongwen's avatar
co_dengxiongwen committed
92 93 94 95
    align: 'center',
    prop: 'C',
    label: '当日功耗',
    width: 162
caojm's avatar
caojm committed
96 97
  },
  {
co_dengxiongwen's avatar
co_dengxiongwen committed
98 99 100 101
    align: 'center',
    prop: 'D',
    label: '当月功耗',
    width: 162
caojm's avatar
caojm committed
102 103
  },
  {
co_dengxiongwen's avatar
co_dengxiongwen committed
104 105 106 107
    align: 'center',
    prop: 'E',
    label: '设备状态',
    width: 152
caojm's avatar
caojm committed
108 109
  },
  {
co_dengxiongwen's avatar
co_dengxiongwen committed
110 111 112 113 114 115
    align: 'center',
    prop: 'F',
    label: '设备编号',
    width: 152
  }
]
caojm's avatar
caojm committed
116 117
const tableData = [
  {
co_dengxiongwen's avatar
co_dengxiongwen committed
118 119 120 121 122 123
    A: '设备1',
    B: '左侧办公房屋',
    C: '11',
    D: '1100',
    E: '开启',
    F: 'QY0001'
caojm's avatar
caojm committed
124 125
  },
  {
co_dengxiongwen's avatar
co_dengxiongwen committed
126 127 128 129 130 131 132 133
    A: '设备2',
    B: '左侧办公房屋',
    C: '11',
    D: '1100',
    E: '开启',
    F: 'QY0002'
  }
]
caojm's avatar
caojm committed
134
export default {
co_dengxiongwen's avatar
co_dengxiongwen committed
135
  name: 'useElectroData',
caojm's avatar
caojm committed
136 137 138 139
  components: {
    cardList,
    enTabs,
    enTable,
xiexingan's avatar
xiexingan committed
140
    historyDataModal,
co_dengxiongwen's avatar
co_dengxiongwen committed
141
    statisticPicTableModal
caojm's avatar
caojm committed
142 143 144
  },
  data() {
    return {
co_dengxiongwen's avatar
co_dengxiongwen committed
145
      activeTab: '01',
xiexingan's avatar
xiexingan committed
146 147
      historyDataModalVisible: false,
      statisticModalVisible: false,
caojm's avatar
caojm committed
148 149 150 151
      tableColums,
      tableData,
      electroTabList: [
        {
co_dengxiongwen's avatar
co_dengxiongwen committed
152 153 154 155 156 157 158 159 160 161 162 163 164 165
          value: '01',
          label: '全部'
        },
        {
          value: '02',
          label: '排风机'
        },
        {
          value: '03',
          label: '机房空调(220V)'
        },
        {
          value: '04',
          label: '机房空调(380V)'
caojm's avatar
caojm committed
166 167
        },
        {
co_dengxiongwen's avatar
co_dengxiongwen committed
168
          value: '05',
co_dengxiongwen's avatar
co_dengxiongwen committed
169
          label: '防火卷帘门'
caojm's avatar
caojm committed
170 171
        },
        {
co_dengxiongwen's avatar
co_dengxiongwen committed
172 173
          value: '06',
          label: '风冷热泵机组'
caojm's avatar
caojm committed
174 175
        },
        {
co_dengxiongwen's avatar
co_dengxiongwen committed
176 177
          value: '07',
          label: '室内机风柜'
caojm's avatar
caojm committed
178
        },
co_dengxiongwen's avatar
co_dengxiongwen committed
179 180 181 182 183 184
        {
          value: '08',
          label: '多联室外机'
        }
      ]
    }
caojm's avatar
caojm committed
185
  },
co_dengxiongwen's avatar
co_dengxiongwen committed
186

xiexingan's avatar
xiexingan committed
187 188 189
  methods: {
    cancelhandle() {
      this.$nextTick(() => {
co_dengxiongwen's avatar
co_dengxiongwen committed
190 191
        this.historyDataModalVisible = false
      })
xiexingan's avatar
xiexingan committed
192 193 194
    },
    cancelhandlePic() {
      this.$nextTick(() => {
co_dengxiongwen's avatar
co_dengxiongwen committed
195 196
        this.statisticModalVisible = false
      })
xiexingan's avatar
xiexingan committed
197 198
    },

co_dengxiongwen's avatar
co_dengxiongwen committed
199 200
    openHistoryHandle() {
      this.historyDataModalVisible = true
xiexingan's avatar
xiexingan committed
201
    },
co_dengxiongwen's avatar
co_dengxiongwen committed
202 203 204 205 206 207 208 209 210 211 212 213
    openPicTHandle() {
      this.$nextTick(() => {
        this.statisticModalVisible = true
      })
    },
    toEnergyPage() {
      this.$router.push({
        path: '/analysis/energy'
      })
    }
  }
}
caojm's avatar
caojm committed
214
</script>
co_dengxiongwen's avatar
co_dengxiongwen committed
215
<style lang="scss">
xiexingan's avatar
xiexingan committed
216 217 218 219
.use-electro-data {
  padding: 0px 0 40px 0px;
  .el-form-item {
    margin-bottom: 15px;
caojm's avatar
caojm committed
220
    margin-top: 15px;
xiexingan's avatar
xiexingan committed
221
  }
caojm's avatar
caojm committed
222
}
co_dengxiongwen's avatar
co_dengxiongwen committed
223
</style>