page.vue

<template>
  <div class="hall">
    <cardList cardListTitle="候车大厅控制">
      <div slot="content">
        <div>
          <el-form :inline="true" :model="formData" label-width="100">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="节能模式：">
                  <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>
                </el-form-item>
                <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"
                      :class="[
                        item.id == currentId ? 'isActive' : '',
                        item.icon,
                      ]"
                    >
                      <!-- <img :src="item.src" alt="" /> -->
                      {{ item.name }}
                    </el-button>
                  </el-form-item>
                </span>
              </el-col>
              <el-col :span="24">
                <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>

                <el-form-item label="定时功能启止时间：">
                  <el-time-select
                    placeholder="起始时间"
                    v-model="formData.startTime"
                    :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '24:00',
                    }"
                  >
                  </el-time-select>
                  <span style="padding: 0 10px">至</span>
                  <el-time-select
                    placeholder="结束时间"
                    v-model="formData.endTime"
                    :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '24:00',
                      minTime: formData.startTime,
                    }"
                  >
                  </el-time-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini">设置定时</el-button>
                </el-form-item>

              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- tabs -->
        <div style="margin-bottom: 20px">
          <!-- <en-tabs :tabList="tabList"></en-tabs> -->
          <div>
            <el-tabs class="en-tabs" v-model="activeTab">
              <el-tab-pane
                :label="item.label"
                :name="item.value"
                v-for="(item, index) in tabList"
                :key="index"
              ></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <!-- table  -->
        <enTable
          :tableData="tableData"
          :tableColums="tableColums"
          :isShowOp="true"
          isShowPage="true"
        >
          <template v-slot:operation="scope">
            <el-button type="text" @click="statusHandle">开启</el-button>
            <el-button type="text" @click="statusHandle">关闭</el-button>
            <el-button
              type="text"
              @click="statusHandle"
              v-if="activeTab == '01'"
              >故障复位</el-button
            >
            <el-button
              type="text"
              @click="handleBtnClick"
              v-if="activeTab != '01'"
              >设置频率</el-button
            >
          </template>
        </enTable>
      </div>
    </cardList>
    <hall-modal
      v-on:cancelhandle="cancelhandle"
      :hallModalVisible="hallModalVisible"
    ></hall-modal>
  </div>
</template>
<script>
import cardList from '../../components/cardList'
import enTable from '../../components/enTable'
import enTabs from '../../components/enTabs'
import hallModal from './components/hallModal'
import {
  tableDataOne,
  tableColumsOne,
  tableColumsTwo,
  tableDataTwo,
  tableDataThree
} from './config'

export default {
  components: {
    cardList,
    enTable,
    enTabs,
    hallModal
  },
  watch: {
    activeTab(val) {
      switch (val) {
        case '01':
          this.tableColums = tableColumsOne
          this.tableData = tableDataOne
          break
        case '02':
          this.tableColums = tableColumsTwo
          this.tableData = tableDataTwo
          break
        case '03':
          this.tableColums = tableColumsTwo
          this.tableData = tableDataThree
          break
      }
    }
  },
  data() {
    return {
      typeList: [
        {
          id: 1,
          name: '自然通风',
          src: require('../../home/image/fan_icon.png'),
          icon: 'iconfont icon-feng'
        },
        {
          id: 2,
          name: '机械通风',
          src: require('../../home/image/fan_icon.png'),
          icon: 'iconfont icon-feng2'
        },
        {
          id: 3,
          name: '供暖',
          src: require('../../home/image/nan_fan_icon.png'),
          icon: 'el-icon-sunny'
        }
      ],
      currentId: 1,
      activeTab: '01',
      tableData: tableDataOne,
      tableColums: tableColumsOne,
      formData: {
        saving: 1
      },
      tabList: [
        {
          value: '01',
          label: '风冷热泵机组'
        },
        {
          value: '02',
          label: '室内机风柜'
        },
        {
          value: '03',
          label: ' 水泵'
        }
      ],
      hallModalVisible: false
    }
  },
  methods: {
    cancelhandle() {
      this.$nextTick(() => {
        this.hallModalVisible = false
      })
    },
    handleBtnClick() {
      this.hallModalVisible = true
    },
    statusHandle() {},
    handleSwitch(state) {
      this.formData.saving = state
    }
  }
}
</script>
<style lang="scss" >
.hall {
  height: 100%;
  .el-input__inner {
    height: 30px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-form-item__label {
    padding: 0;
  }
  .btn-group {
    img {
      width: 10px;
      height: 9px;
    }
  }
}

.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;
    border-radius: 13px;
    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);
  }
}
.isActive {
  background: #4cb527 !important;
}
</style>