iot-front-ui/src/components/scene/energy/sceneEnergyAircondition/airconditioningCard.vue

<template>
  <div class="sceneCard">

    <div class="sceneCard-query">
      <Query :query-data.sync="queryData" :search="search" :reset="reset" >
        <template #extraItem>

          <a-form-model-item label="开关：" class="formItem">
            <a-select default-value="0" style="width: 120px" v-model="queryData.switch">
              <a-select-option value="0"> 全部 </a-select-option>
              <a-select-option value="1"> 开 </a-select-option>
              <a-select-option value="2"> 关 </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="模式：" class="formItem">
            <a-select default-value="0" style="width: 120px" v-model="queryData.mode">
              <a-select-option value="0"> 全部 </a-select-option>
              <a-select-option value="cold"> 制冷 </a-select-option>
              <a-select-option value="hot"> 制热 </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="温度：" class="formItem">
            <a-select default-value="0" style="width: 120px" v-model="queryData.tm">
              <a-select-option value="0"> 全部 </a-select-option>
              <a-select-option value="18"> 18°C </a-select-option>
              <a-select-option value="19"> 19°C </a-select-option>
              <a-select-option value="20"> 20°C </a-select-option>
              <a-select-option value="21"> 21°C </a-select-option>
              <a-select-option value="22"> 22°C </a-select-option>
              <a-select-option value="23"> 23°C </a-select-option>
              <a-select-option value="24"> 24°C </a-select-option>
              <a-select-option value="25"> 25°C </a-select-option>
              <a-select-option value="26"> 26°C </a-select-option>
              <a-select-option value="27"> 27°C </a-select-option>
              <a-select-option value="28"> 28°C </a-select-option>
            </a-select>
          </a-form-model-item>

          <!--<a-form-model-item label="设备编号：" class="formItem">-->
          <!--  <a-input v-model="queryData.deviceNo" placeholder="请输入设备编号" />-->
          <!--</a-form-model-item>-->

        </template>
      </Query>
    </div>

    <div class="sceneCard-control">
      <div style="display: inline-block;width: 50%;text-align: left">
        <a-space>
          <a-button style="font-size: 12px" size="small" @click="allPowerOff"><a-icon type="poweroff" />全开</a-button>
          <a-button style="font-size: 12px" size="small" @click="allPowerOn"><a-icon type="poweroff" />全关</a-button>
          <a-button type="primary" size="small" style="font-size: 12px" >批量执行策略</a-button>
        </a-space>
      </div>

      <div style="display: inline-block;width: 50%;text-align: right">
        <a-select default-value="0">
          <a-select-option value="0">
            按楼层显示
          </a-select-option>
          <a-select-option value="1">
            按公司
          </a-select-option>
          <a-select-option value="2">
            按功能
          </a-select-option>
          <a-select-option value="3">
            按分组
          </a-select-option>
        </a-select>
        <a-button type="link" @click="toggleShowCard"><a-icon type="unordered-list" />
          <span v-if="showCard">列表模式</span>
          <span v-if="!showCard">卡片模式</span>
        </a-button>
      </div>
    </div>

    <div class="airContainer">
      <div class="airContainer-left">
        <div class="deviceFloorIndex">
          <a-input-search placeholder="请输入楼层"></a-input-search>
          <a-anchor :getContainer="getContainer" :target-offset="100"  style="margin-top: 12px" @change="floorChange">
            <template v-for="item in floors" >
              <a-anchor-link :href="'#'+item.label" :key="item.value" >
                <template #title>
                  <!--<span style="display: inline-block;padding-left: 5px; width: 20px;height: 40px;overflow: hidden">-->
                  <!--  <div style="position: absolute;top: 15px;left: -2px;width: 4px;height: 4px;border-radius: 2px;background-color: #2EA8E6"></div>-->
                  <!--  <div style="width: 18px;height: 18px;border-bottom: 1px dashed #2EA8E6;" ></div>-->
                  <!--  <div style="width: 18px;height: 18px;border-left: 1px dashed #2EA8E6" ></div>-->
                  <!--</span>-->
                  {{ item.label }}
                </template>
              </a-anchor-link>
            </template>
          </a-anchor>

        </div>
      </div>
      <div class="airContainer-right" ref="airContainerRight">
        <template v-for="item in floors">
          <template v-if="showCard">
            <div :key="item.value" style="margin-bottom: 15px">
              <a-divider :id="item.label" style="margin: 0 0 15px;padding: 0" orientation="left" dashed >{{ item.label }}</a-divider>
              <div style="padding: 0 15px">
                <a-row :gutter="[30,12]">
                  <a-col v-for="device in item.devices" :key="device.id" :span="6">
                    <DeviceCardAir :item="device" :toggle="toggleOnline"  />
                  </a-col>
                </a-row>
              </div>
            </div>
          </template>
          <template v-if="!showCard">
            <div :key="item.value" :id="item.label" v-show="currFloor==item.label">
              <a-table></a-table>
            </div>
          </template>

        </template>
      </div>
    </div>


  </div>
</template>

<script>
import Query from "@/components/common/query.vue";
import DeviceCardAir from "@/components/scene/energy/common/deviceCardAir.vue";
export default {
  components: {
    Query,
    DeviceCardAir,
  },
  data() {
    return {
      currFloor: '1F',
      showCard: true,
      queryData: {
        switch: '0',
        mode: '0',
        tm: '0'
      },
      oriFloors: [],
      floors: [
        {
          label: '1F',
          value: '1',
          devices: [
            {
              id: '1101-1',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            },{
              id: '1101-2',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            },{
              id: '1102-1',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            },{
              id: '1102-2',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            },
          ]
        },
        {
          label: '2F',
          value: '2',
          devices: [
            {
              id: '2101-1',
              mode: 'cold',
              tm: '26',
              wind: '一级',
              online: true
            },{
              id: '2101-2',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            }
          ]
        },
        {
          label: '3F',
          value: '3',
          devices: [
            {
              id: '3101-1',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            },{
              id: '3101-2',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            }
          ]
        },
        {
          label: '4F',
          value: '4',
          devices: [
            {
              id: '3101-1',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            },{
              id: '3101-2',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            }
          ]
        },
        {
          label: '5F',
          value: '5',
          devices: [
            {
              id: '3101-1',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true,
            },{
              id: '3101-2',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            }
          ]
        },
        {
          label: '6F',
          value: '6',
          devices: [
            {
              id: '3101-1',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            },{
              id: '3101-2',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            }
          ]
        },
        {
          label: '7F',
          value: '7',
          devices: [
            {
              id: '3101-1',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            },{
              id: '3101-2',
              mode: 'hot',
              tm: '26',
              wind: '一级',
              online: true
            }
          ]
        },
      ]
    }
  },
  mounted() {
    this.oriFloors = JSON.parse(JSON.stringify(this.floors));
  },
  methods: {
    reset() {
      this.floors = JSON.parse(JSON.stringify(this.oriFloors));
    },
    search() {
      let objarr = JSON.parse(JSON.stringify(this.oriFloors));
      let app = this
      objarr.forEach(item=>{
        if (item.devices) {
          item.devices = item.devices.filter(item=>{
            if (!app.queryData.switch || app.queryData.switch=='0') {
            } else {
              return app.queryData.switch==item.online
            }
            if (!app.queryData.mode || app.queryData.mode=='0') {
            } else {
              return app.queryData.mode==item.mode
            }
            if (!app.queryData.tm || app.queryData.tm=='0') {
            } else {
              return app.queryData.tm==item.tm
            }
            return true;
          })
        }
      })
      this.floors = objarr
    },
    toggleOnline(device) {
      device.online=!device.online;
    },
    floorChange(val) {
      let obj = val.replace('#','')
      this.currFloor = obj;
      //console.log(this.currFloor)
    },
    getContainer() {
      return this.$refs.airContainerRight
    },
    toggleShowCard() {
      this.showCard = !this.showCard;
    },
    allPowerOn() {
      this.floors.forEach(item=>{
        if (item.devices) {
          item.devices.forEach(i=>{
            i.online = false
          })
        }
      })
    },
    allPowerOff() {
      this.floors.forEach(item=>{
        if (item.devices) {
          item.devices.forEach(i=>{
            i.online = true
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.sceneCard {
  width: 100%;
  height: 100%;
  .sceneCard-query {

  }
  .sceneCard-control {
    margin-top: 12px;
  }
  .airContainer {
    width: 100%;
    height: 600px;
    padding: 15px 8px;
    .airContainer-left {
      background-color: #fafafa;
      width: 20%;
      height: 100%;
      display: inline-block;
      vertical-align: top;
      padding: 12px;
      overflow-y: auto;
    }
    .airContainer-right {
      display: inline-block;
      width: 80%;
      height: 100%;
      vertical-align: top;
      padding: 12px 20px;
      overflow-y: auto;
    }
    .ant-anchor-link {
      line-height: 45px;
      font-size: 16px;
    }
    .ant-anchor-link-active {
      background-color: #e0effa;
      border-radius: 0px 4px 4px 0px;
    }
  }
}
</style>