page.vue 7.39 KB
Newer Older
caojm's avatar
caojm committed
1
<template>
xiexingan's avatar
xiexingan committed
2
  <div class="hall">
caojm's avatar
caojm committed
3
    <cardList cardListTitle="候车大厅控制">
xiexingan's avatar
xiexingan committed
4
      <div slot="content">
caojm's avatar
caojm committed
5
        <div>
xiexingan's avatar
xiexingan committed
6
          <el-form :inline="true" :model="formData" label-width="100">
xiexingan's avatar
xiexingan committed
7 8
            <el-row :gutter="10">
              <el-col :span="12">
caojm's avatar
caojm committed
9
                <el-form-item label="节能模式:">
xiexingan's avatar
xiexingan committed
10 11 12 13 14 15 16 17 18 19 20 21 22 23
                  <div class="switch-warp" style="transform: translateY(7px)">
                    <div
                      :class="[formData.saving == 1 ? 'on' : '']"
                      @click="handleSwitch(1)"
                    >
                      人工
                    </div>
                    <div
                      :class="[formData.saving == 2 ? 'on' : '']"
                      @click="handleSwitch(2)"
                    >
                      节能
                    </div>
                  </div>
caojm's avatar
caojm committed
24
                </el-form-item>
xiexingan's avatar
xiexingan committed
25 26 27 28 29 30 31 32
                <span class="btn-group">
                  <el-form-item label="">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="currentId = item.id"
                      v-for="item in typeList"
                      :key="item.id"
xiexingan's avatar
xiexingan committed
33 34 35 36
                      :class="[
                        item.id == currentId ? 'isActive' : '',
                        item.icon,
                      ]"
xiexingan's avatar
xiexingan committed
37 38 39 40 41 42
                    >
                      <!-- <img :src="item.src" alt="" /> -->
                      {{ item.name }}
                    </el-button>
                  </el-form-item>
                </span>
xiexingan's avatar
xiexingan committed
43 44
              </el-col>
              <el-col :span="24">
xiexingan's avatar
xiexingan committed
45 46 47 48 49 50
                <el-form-item label="温度设定:">
                  <el-input v-model="formData.temp" clearable=""></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-button type="primary" size="mini">确定</el-button>
                </el-form-item>
xiexingan's avatar
xiexingan committed
51 52

                <el-form-item label="定时功能启止时间:">
xiexingan's avatar
xiexingan committed
53 54
                  <el-time-select
                    placeholder="起始时间"
xiexingan's avatar
xiexingan committed
55
                    v-model="formData.startTime"
xiexingan's avatar
xiexingan committed
56 57 58 59 60
                    :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '24:00',
                    }"
xiexingan's avatar
xiexingan committed
61
                  >
xiexingan's avatar
xiexingan committed
62
                  </el-time-select>
xiexingan's avatar
xiexingan committed
63
                  <span style="padding: 0 10px"></span>
xiexingan's avatar
xiexingan committed
64 65
                  <el-time-select
                    placeholder="结束时间"
xiexingan's avatar
xiexingan committed
66
                    v-model="formData.endTime"
xiexingan's avatar
xiexingan committed
67 68 69 70 71 72
                    :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '24:00',
                      minTime: formData.startTime,
                    }"
xiexingan's avatar
xiexingan committed
73
                  >
xiexingan's avatar
xiexingan committed
74
                  </el-time-select>
xiexingan's avatar
xiexingan committed
75
                </el-form-item>
xiexingan's avatar
xiexingan committed
76 77 78 79
                <el-form-item>
                  <el-button type="primary" size="mini">设置定时</el-button>
                </el-form-item>

xiexingan's avatar
xiexingan committed
80 81
              </el-col>
            </el-row>
xiexingan's avatar
xiexingan committed
82
          </el-form>
caojm's avatar
caojm committed
83 84 85
        </div>
        <!-- tabs -->
        <div style="margin-bottom: 20px">
xiexingan's avatar
xiexingan committed
86 87 88
          <!-- <en-tabs :tabList="tabList"></en-tabs> -->
          <div>
            <el-tabs class="en-tabs" v-model="activeTab">
xiexingan's avatar
xiexingan committed
89 90 91 92 93 94
              <el-tab-pane
                :label="item.label"
                :name="item.value"
                v-for="(item, index) in tabList"
                :key="index"
              ></el-tab-pane>
xiexingan's avatar
xiexingan committed
95 96
            </el-tabs>
          </div>
caojm's avatar
caojm committed
97 98
        </div>
        <!-- table  -->
xiexingan's avatar
xiexingan committed
99 100 101 102 103 104 105 106
        <enTable
          :tableData="tableData"
          :tableColums="tableColums"
          :isShowOp="true"
          isShowPage="true"
        >
          <template v-slot:operation="scope">
            <el-button type="text" @click="statusHandle">开启</el-button>
co_dengxiongwen's avatar
co_dengxiongwen committed
107
            <el-button type="text" @click="statusHandle">关闭</el-button>
xiexingan's avatar
xiexingan committed
108 109 110 111 112 113 114 115 116 117 118 119
            <el-button
              type="text"
              @click="statusHandle"
              v-if="activeTab == '01'"
              >故障复位</el-button
            >
            <el-button
              type="text"
              @click="handleBtnClick"
              v-if="activeTab != '01'"
              >设置频率</el-button
            >
xiexingan's avatar
xiexingan committed
120
          </template>
xiexingan's avatar
xiexingan committed
121
        </enTable>
caojm's avatar
caojm committed
122 123
      </div>
    </cardList>
xiexingan's avatar
xiexingan committed
124 125 126 127
    <hall-modal
      v-on:cancelhandle="cancelhandle"
      :hallModalVisible="hallModalVisible"
    ></hall-modal>
caojm's avatar
caojm committed
128 129 130
  </div>
</template>
<script>
xiexingan's avatar
xiexingan committed
131 132
import cardList from '../../components/cardList'
import enTable from '../../components/enTable'
xiexingan's avatar
xiexingan committed
133 134
import enTabs from '../../components/enTabs'
import hallModal from './components/hallModal'
xiexingan's avatar
xiexingan committed
135 136 137
import {
  tableDataOne,
  tableColumsOne,
co_dengxiongwen's avatar
co_dengxiongwen committed
138
  tableColumsTwo,
xiexingan's avatar
xiexingan committed
139
  tableDataTwo,
co_dengxiongwen's avatar
co_dengxiongwen committed
140
  tableDataThree
xiexingan's avatar
xiexingan committed
141
} from './config'
xiexingan's avatar
xiexingan committed
142

caojm's avatar
caojm committed
143 144 145 146 147
export default {
  components: {
    cardList,
    enTable,
    enTabs,
xiexingan's avatar
xiexingan committed
148 149 150 151
    hallModal
  },
  watch: {
    activeTab(val) {
xiexingan's avatar
xiexingan committed
152 153 154 155 156 157
      switch (val) {
        case '01':
          this.tableColums = tableColumsOne
          this.tableData = tableDataOne
          break
        case '02':
co_dengxiongwen's avatar
co_dengxiongwen committed
158
          this.tableColums = tableColumsTwo
xiexingan's avatar
xiexingan committed
159 160 161
          this.tableData = tableDataTwo
          break
        case '03':
co_dengxiongwen's avatar
co_dengxiongwen committed
162
          this.tableColums = tableColumsTwo
xiexingan's avatar
xiexingan committed
163 164 165
          this.tableData = tableDataThree
          break
      }
xiexingan's avatar
xiexingan committed
166
    }
caojm's avatar
caojm committed
167 168 169
  },
  data() {
    return {
xiexingan's avatar
xiexingan committed
170 171 172 173 174
      typeList: [
        {
          id: 1,
          name: '自然通风',
          src: require('../../home/image/fan_icon.png'),
xiexingan's avatar
xiexingan committed
175
          icon: 'iconfont icon-feng'
xiexingan's avatar
xiexingan committed
176 177 178 179 180
        },
        {
          id: 2,
          name: '机械通风',
          src: require('../../home/image/fan_icon.png'),
xiexingan's avatar
xiexingan committed
181
          icon: 'iconfont icon-feng2'
xiexingan's avatar
xiexingan committed
182 183 184 185 186 187 188 189 190
        },
        {
          id: 3,
          name: '供暖',
          src: require('../../home/image/nan_fan_icon.png'),
          icon: 'el-icon-sunny'
        }
      ],
      currentId: 1,
xiexingan's avatar
xiexingan committed
191 192 193
      activeTab: '01',
      tableData: tableDataOne,
      tableColums: tableColumsOne,
xiexingan's avatar
xiexingan committed
194 195 196
      formData: {
        saving: 1
      },
caojm's avatar
caojm committed
197 198
      tabList: [
        {
xiexingan's avatar
xiexingan committed
199 200
          value: '01',
          label: '风冷热泵机组'
caojm's avatar
caojm committed
201 202
        },
        {
co_dengxiongwen's avatar
co_dengxiongwen committed
203
          value: '02',
xiexingan's avatar
xiexingan committed
204
          label: '室内机风柜'
caojm's avatar
caojm committed
205 206
        },
        {
co_dengxiongwen's avatar
co_dengxiongwen committed
207
          value: '03',
xiexingan's avatar
xiexingan committed
208 209
          label: ' 水泵'
        }
caojm's avatar
caojm committed
210
      ],
xiexingan's avatar
xiexingan committed
211 212
      hallModalVisible: false
    }
caojm's avatar
caojm committed
213 214
  },
  methods: {
xiexingan's avatar
xiexingan committed
215 216 217 218 219 220 221
    cancelhandle() {
      this.$nextTick(() => {
        this.hallModalVisible = false
      })
    },
    handleBtnClick() {
      this.hallModalVisible = true
co_dengxiongwen's avatar
co_dengxiongwen committed
222
    },
xiexingan's avatar
xiexingan committed
223
    statusHandle() {},
xiexingan's avatar
xiexingan committed
224 225
    handleSwitch(state) {
      this.formData.saving = state
xiexingan's avatar
xiexingan committed
226
    }
xiexingan's avatar
xiexingan committed
227 228
  }
}
caojm's avatar
caojm committed
229 230 231 232 233 234 235
</script>
<style lang="scss" >
.hall {
  height: 100%;
  .el-input__inner {
    height: 30px;
  }
xiexingan's avatar
xiexingan committed
236
  .el-form-item {
xiexingan's avatar
xiexingan committed
237 238
    margin-bottom: 10px;
  }
caojm's avatar
caojm committed
239 240 241
  .el-form-item__label {
    padding: 0;
  }
xiexingan's avatar
xiexingan committed
242 243
  .btn-group {
    img {
caojm's avatar
caojm committed
244 245 246 247
      width: 10px;
      height: 9px;
    }
  }
caojm's avatar
caojm committed
248
}
xiexingan's avatar
xiexingan committed
249

xiexingan's avatar
xiexingan committed
250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271
.switch-warp {
  width: 93px;
  height: 26px;
  font-size: 12px;
  line-height: 25px;
  overflow: hidden;
  border-radius: 13px;
  background: #d3d3d3;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
    0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  div {
    width: 45px;
    height: 24px;
    line-height: 24px;
    float: left;
    text-align: center;
    cursor: pointer;
  }
  div.on {
    background: #4cb527;
    color: #fff;
xiexingan's avatar
xiexingan committed
272
    border-radius: 13px;
xiexingan's avatar
xiexingan committed
273 274 275
    border: 1px solid rgba(23, 41, 71, 0.02);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
      0px 2px 0px 0px rgba(255, 255, 255, 0.15);
xiexingan's avatar
xiexingan committed
276
  }
xiexingan's avatar
xiexingan committed
277 278 279 280
}
.isActive {
  background: #4cb527 !important;
}
caojm's avatar
caojm committed
281
</style>