iot-front-ui/src/components/scene/energy/sceneEnergyAircondition/scenelightCard.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.sensor">
              <a-select-option value="0"> 无 </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-popconfirm
              title="确定要执行吗?"
              ok-text="是"
              cancel-text="否"
              @confirm="allPowerOff"
          >
            <a-button style="font-size: 12px" size="small" ><a-icon type="poweroff" />全开</a-button>
          </a-popconfirm>
          <a-popconfirm
              title="确定要执行吗?"
              ok-text="是"
              cancel-text="否"
              @confirm="allPowerOff"
          >
            <a-button style="font-size: 12px" size="small" @click="allPowerOn"><a-icon type="poweroff" />全关</a-button>
          </a-popconfirm>


          <a-button type="primary" size="small" style="font-size: 12px"  @click="()=>{this.showBatchCL=true}">批量执行策略</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>


      <a-alert type="success" show-icon v-if="selectedRowKeys.length>0" closeText="取消选择" @close="clearSelectRow">
        <template #message>
          已选择{{ selectedRowKeys.length }}台设备
        </template>
      </a-alert>

    </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;margin-left: 25px; width: 30px;overflow: hidden;vertical-align: middle" >
                    <div style="width: 30px;height: 20px;border-bottom: 1px dashed #2EA8E6;" :style="index!==0?{borderLeft: '1px dashed #2EA8E6'}:{}" ></div>
                    <div style="width: 30px;height: 20px;border-left: 1px dashed #2EA8E6" :style="index===floors.length-1?{}:{borderLeft: '1px dashed #2EA8E6'}" ></div>
                    <div style="position: absolute;top: 18.5px;left:23px;padding-left: 2px;width: 5px;height: 5px;border-radius: 2.5px;background-color: #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">
                    <deviceCardLight :click="handleCardClick" :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 :rowKey=" (record, index) => record.id"
                       :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                       :columns="columns"
                       :show-header="true"
                       :data-source="item.devices"
                       :pagination="false"
                       :scroll="{ y: 400 }"
              >
                <template #name="text, record">
                  <span>{{ record.id }}</span>
                </template>
                <template #mode="text, record">
                  <span v-if="text=='hot'">制热</span>
                  <span v-if="text=='cold'">制冷</span>
                </template>
                <template #tm="text, record">
                  <span>{{text}}°C</span>
                </template>
                <template #isControl="text, record">
                  <span>是</span>
                </template>
                <template #online="text, record">
                  <span v-if="text">
                    <span style="color: #19b955;background-color: #19b955;width: 15px;height: 15px;display: inline-block;border-radius: 8px;vertical-align: middle">•</span> 在线
                  </span>
                  <span v-if="!text">
                    <span style="color: gray;background-color: gray;width: 15px;height: 15px;display: inline-block;border-radius: 8px;vertical-align: middle">•</span> 离线
                  </span>
                </template>
                <template #strategy="text, record">
                  <span>智慧场景策略配置</span>
                </template>
              </a-table>
            </div>
          </template>

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

    <a-modal title="策略配置" v-if="showBatchCL" v-model="showBatchCL" width="500" height="300" centered style="max-height: 300px;overflow-y: auto" @ok="handleOk">
      <a-form-model :form="formData" :label-col="{span:6}" :wrapperCol="{span:16}" style="overflow-y: auto;height: 450px">

        <a-form-item label="选择策略：" class="formItem" >
          <a-radio-group v-model="formData.resource">
            <a-radio value="1">已有策略</a-radio>
            <a-radio value="2">自定义</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="策略名称：" class="formItem" >
          <template v-if="formData.resource=='1'">
            <a-select default-value="0" style="width: 200px" v-model="formData.clId">
              <a-select-option value="0"> 策略1 </a-select-option>
              <!--<a-select-option v-for="item in companyData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>-->
            </a-select>
          </template>
          <template v-else>
            <a-input v-model="formData.clName" placeholder="请输入策略名称" />
          </template>
        </a-form-item>

        <a-form-item label="执行方式：" class="formItem" >
          <a-select default-value="0" style="width: 200px" v-model="formData.method" >
            <a-select-option value="1"> 每日执行 </a-select-option>
            <a-select-option value="2"> 工作日与非工作日区别执行 </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="执行时间：" class="formItem" >
          <timeRange time-format="yyyy/MM/DD" :time-range="formData.timeRange" />
        </a-form-item>

        <div style="margin-left: 8%;font-weight: bold;margin-bottom: 15px" v-if="formData.method=='2'" >工作日策略 -</div>

        <a-form-item label="开机策略：" class="formItem" >
          <a-select default-value="0" style="width: 200px" v-model="formData.openCl">
            <a-select-option value="0"> 定时开关机 </a-select-option>
            <a-select-option value="1"> 24小时开机 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="开机时间：" class="formItem" >
          <a-time-picker use24-hours v-model="formData.openTime" :disabled="!(formData.openCl=='0')" />
        </a-form-item>
        <a-form-item label="关机时间：" class="formItem" >
          <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl=='0')" />
        </a-form-item>
        <a-form-item label="空调模式：" class="formItem" >
          <a-select style="width: 200px" v-model="formData.mode">
            <a-select-option value="1"> 制冷 </a-select-option>
            <a-select-option value="2"> 制热 </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="空调风速：" class="formItem" >
          <a-select style="width: 200px" v-model="formData.wind">
            <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-option value="0"> 自动 </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="设置温度：" class="formItem" >
          <a-select style="width: 200px" v-model="formData.tm">
            <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-item>

        <a-form-item label="人体感应：" class="formItem" >
          <a-select default-value="0" style="width: 200px" v-model="formData.sensor">
            <a-select-option value="0"> 无 </a-select-option>
          </a-select>
        </a-form-item>

        <div v-if="formData.method=='2'">

          <div style="margin-left: 8%;font-weight: bold;margin-bottom: 15px" >非工作日策略 -</div>

          <a-form-item label="开机策略：" class="formItem" >
            <a-select default-value="0" style="width: 200px" v-model="formData.openCl">
              <a-select-option value="0"> 定时开关机 </a-select-option>
              <a-select-option value="1"> 24小时开机 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="开机时间：" class="formItem" >
            <a-time-picker use24-hours v-model="formData.openTime"  :disabled="!(formData.openCl=='0')"/>
          </a-form-item>
          <a-form-item label="关机时间：" class="formItem" >
            <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl=='0')" />
          </a-form-item>
          <a-form-item label="灯光亮度：" class="formItem" >
            <a-slider id="test" v-model:value="formData.brightness"  />
          </a-form-item>

          <a-form-item label="灯光色温：" class="formItem" >
            <a-slider id="test" v-model:value="formData.color"  />
          </a-form-item>



          <a-form-item label="人体感应：" class="formItem" >
            <a-select default-value="0" style="width: 200px" v-model="formData.sensor">
              <a-select-option value="0"> 无 </a-select-option>
            </a-select>
          </a-form-item>
        </div>

      </a-form-model>
    </a-modal>

  </div>
</template>

<script>
import Query from "@/components/common/query.vue";
import deviceCardLight from "@/components/scene/energy/common/deviceCardLight.vue";
import timeRange from "@/components/common/timeRange.vue";
export default {
  components: {
    Query,
    deviceCardLight,
    timeRange,
  },
  data() {
    return {
      formData: {},
      currFloor: '1F',
      showCard: true,
      showBatchCL: false,
      queryData: {
        switch: '0',
        mode: '0',
        tm: '0'
      },
      selectedRowKeys: [],

      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '人体感应',
          dataIndex: 'sensor',
          key: 'sensor',
        },
        {
          title: '是否支持调控',
          dataIndex: 'isControl',
          key: 'isControl',
          scopedSlots: { customRender: 'isControl' },
        },
        {
          title: '状态',
          dataIndex: 'online',
          key: 'online',
          scopedSlots: { customRender: 'online' },
        },
        {
          title: '执行策略',
          dataIndex: 'strategy',
          key: 'strategy',
          scopedSlots: { customRender: 'strategy' },
        },
      ],
      oriFloors: [],
      floors: [
        {
          label: '1F',
          value: '1',
          devices: [
            {
              id: '1101-1',
              name: '环形灯#1',
              sensor: '无',
              online: true
            },{
              id: '1101-2',
              name: '环形灯#2',
              sensor: '无',
              online: true
            },{
              id: '1102-1',
              name: '环形灯#3',
              sensor: '无',
              online: true
            },{
              id: '1102-2',
              name: '环形灯#4',
              sensor: '无',
              online: true
            },
          ]
        },
        {
          label: '2F',
          value: '2',
          devices: [
            {
              id: '2101-1',
              name: '环形灯',
              sensor: '无',
              online: true
            },{
              id: '2101-2',
              name: '环形灯',
              sensor: '无',
              online: true
            }
          ]
        },
        {
          label: '3F',
          value: '3',
          devices: [
            {
              id: '3101-1',
              name: '环形灯',
              sensor: '无',
              online: true
            },{
              id: '3101-2',
              name: '环形灯',
              sensor: '无',
              online: true
            }
          ]
        },
        {
          label: '4F',
          value: '4',
          devices: [
            {
              id: '4101-1',
              name: '环形灯',
              sensor: '无',
              online: true
            },{
              id: '4101-2',
              name: '环形灯',
              sensor: '无',
              online: true
            }
          ]
        },
        {
          label: '5F',
          value: '5',
          devices: [
            {
              id: '5101-1',
              name: '环形灯',
              sensor: '无',
              online: true,
            },{
              id: '5101-2',
              name: '环形灯',
              sensor: '无',
              online: true
            }
          ]
        },
        {
          label: '6F',
          value: '6',
          devices: [
            {
              id: '6101-1',
              name: '环形灯',
              sensor: '无',
              online: true
            },{
              id: '6101-2',
              name: '环形灯',
              sensor: '无',
              online: true
            }
          ]
        },
        {
          label: '7F',
          value: '7',
          devices: [
            {
              id: '7101-1',
              name: '环形灯',
              sensor: '无',
              online: true
            },{
              id: '7101-2',
              name: '环形灯',
              sensor: '无',
              online: true
            }
          ]
        },
        {
          label: '8F',
          value: '8',
          devices: [
            {
              id: '8101-1',
              name: '环形灯',
              sensor: '无',
              online: true
            },{
              id: '8101-2',
              name: '环形灯',
              sensor: '无',
              online: true
            }
          ]
        },
        {
          label: '9F',
          value: '9',
          devices: [
            {
              id: '9101-1',
              name: '环形灯',
              sensor: '无',
              online: true
            },{
              id: '9101-2',
              name: '环形灯',
              sensor: '无',
              online: true
            }
          ]
        },
      ]
    }
  },
  mounted() {
    this.oriFloors = JSON.parse(JSON.stringify(this.floors));
  },
  methods: {
    clearSelectRow() {
      this.selectedRowKeys = []
    },
    reset() {
      this.floors = JSON.parse(JSON.stringify(this.oriFloors));
    },
    handleOk() {
      this.showBatchCL = false;
      this.$message.success('设置成功')
    },
    handleCardClick() {
      this.showBatchCL = true;
      this.formData = {}
    },
    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
            }
            return true;
          })
        }
      })
      this.floors = objarr
    },
    onSelectChange(val) {
      this.selectedRowKeys = val
    },
    toggleOnline(device) {
      device.online=!device.online;
    },
    floorChange(val) {
      let obj = val.replace('#','')
      this.currFloor = obj;
    },
    getContainer() {
      return this.$refs.airContainerRight
    },
    toggleShowCard() {
      this.showCard = !this.showCard;
    },
    allPowerOn() {
      let app = this;
      this.$store.loadingStore().open()
      setTimeout(function () {
        app.floors.forEach(item=>{
          if (item.devices) {
            item.devices.forEach(i=>{
              i.online = false
            })
          }
        })
        app.$store.loadingStore().close()
        app.$message.success('执行成功')
      },2000)
    },
    allPowerOff() {
      let app = this;
      this.$store.loadingStore().open()
      setTimeout(function () {
        app.floors.forEach(item=>{
          if (item.devices) {
            item.devices.forEach(i=>{
              i.online = true
            })
          }
        })
        app.$store.loadingStore().close()
        app.$message.success('执行成功')
      },2000)
    }
  }
}
</script>

<style lang="less" scoped>
.formItem {
  margin: 12px 0;
}
.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: 15%;
      height: 100%;
      display: inline-block;
      vertical-align: top;
      padding: 12px;
      overflow-y: auto;
    }
    .airContainer-right {
      display: inline-block;
      width: 85%;
      height: 100%;
      vertical-align: top;
      padding: 12px 20px;
      overflow-y: auto;
    }
    .ant-anchor-link {
      line-height: 40px;
      font-size: 16px;
      padding: 0;
      padding-left: 20%;
      letter-spacing: 5px;
    }
    /deep/ .ant-anchor-ink {
      display: none !important;
    }
    .ant-anchor-link-active {
      background-color: #e0effa;
      border-radius: 0px 4px 4px 0px;
    }
  }
}
</style>