iot-front-ui/src/components/scene/energy/tactics/lightTactics.vue

<template>
  <div class="accessManage ">
    <div class="page-query-core" style="padding: 30px 15px;background-color: #fafafa">
      <Query :show="['']" :query-data.sync="queryData" :search="search" >
        <template #extraItem>
          <a-form-model-item label="策略名称" style="margin-left: 45px">
            <a-input style="width: 250px" v-model="queryData.name" placeholder="请输入策略名称"/>
          </a-form-model-item>
          <a-form-model-item label="状态" style="margin-left: 45px">
            <a-select v-model="queryData.enable" style="width: 250px">
              <a-select-option value="0">全部</a-select-option>
              <a-select-option :value="true">开启</a-select-option>
              <a-select-option :value="false">关闭</a-select-option>
            </a-select>
          </a-form-model-item>
        </template>
      </Query>
    </div>

    <div class="accessManage-body">
      <a-button size="small" type="primary" style="height: 24px;width: 85px" @click="()=>{this.showCLInfo=true}">新建</a-button>
      <a-button size="small" style="height: 25px;width: 85px" @click="batchDelete">批量删除</a-button>
      <a-table :columns="tableColumns" :data-source="tableData" :pagination="true" style="margin-top: 12px"
               :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
               :rowKey=" (record, index) => record.key"
               :scroll="{ y: 400 }" bordered>
        <template #enable="text, record">
          <a-switch v-model="record.enable" />
        </template>
        <template #operation="text, record">
          <a-button type="link" @click="viewItem(record)">查看</a-button>
          <a-button type="link" @click="editItem(record)">编辑</a-button>
          <a-button type="link" @click="deleteItem(record)">删除</a-button>
        </template>
      </a-table>

      <!--<div style="width: 100%;text-align: right;margin-top: 15px;">-->
      <!--  <a-pagination ref="pagination"-->
      <!--                :showQuickJumper="true"-->
      <!--                :show-size-changer="true"-->
      <!--                :show-total="showTotal"-->
      <!--                v-model:current="currentPage"-->
      <!--                :default-current="1"-->
      <!--                :total="500"-->
      <!--                @showSizeChange="onShowSizeChange"-->
      <!--  />-->
      <!--</div>-->
    </div>


    <a-modal title="批量执行策略" v-if="showCLInfo" v-model="showCLInfo" 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-input :disabled="disabledForm" v-model="formData.clName" placeholder="请输入策略名称" />
        </a-form-item>

        <a-form-item label="执行方式：" class="formItem" >
          <a-select :disabled="disabledForm" 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 :disabled="disabledForm" time-format="yyyy/MM/DD" :time-range.sync="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 :disabled="disabledForm" 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') || disabledForm" />
        </a-form-item>
        <a-form-item label="关机时间：" class="formItem" >
          <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl=='0') || disabledForm" />
        </a-form-item>

        <a-form-item label="灯光亮度：" class="formItem" >
          <a-slider id="test" v-model:value="formData.brightness" :disabled="disabledForm" />
        </a-form-item>

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

        <a-form-item label="人体感应：" class="formItem" >
          <a-select :disabled="disabledForm" 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 :disabled="disabledForm" 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') || disabledForm"/>
          </a-form-item>
          <a-form-item label="关机时间：" class="formItem" >
            <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl=='0') || disabledForm" />
          </a-form-item>

          <a-form-item label="灯光亮度：" class="formItem" >
            <a-slider id="test" v-model:value="formData.brightness" :disabled="disabledForm"  />
          </a-form-item>

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

          <a-form-item label="人体感应：" class="formItem" >
            <a-select :disabled="disabledForm" 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";

export default {
  components: {
    Query
  },
  data() {
    return {
      showCLInfo: false,
      disabledForm: false,
      formData: {},
      currentPage: 1,
      selectedRowKeys: [],
      queryData: {
        enable: '0'
      },
      tableColumns: [
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
        },
        {
          title: '创建人',
          dataIndex: 'creator',
          key: 'creator',
        },
        {
          title: '启用',
          dataIndex: 'enable',
          key: 'enable',
          scopedSlots: { customRender: 'enable' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },
        },

      ],
      oriTableData: [],
      tableData: [
        {
          key: '1',
          name: "智慧场景照明策略1",
          createTime: '2023/03/20 15:35:20',
          creator: '张峰',
          enable: true,
          content: {
            method: "1",
            mode: "2",
            openCl: "1",
            sensor: "0",
            tm: "23",
            wind: "1"
          }
        },{
          key: '2',
          name: "智慧场景照明策略2",
          createTime: '2023/03/20 15:35:20',
          creator: '张峰',
          enable: true,
          content: {
            method: "1",
            mode: "2",
            openCl: "1",
            sensor: "0",
            tm: "23",
            wind: "1"
          }
        },{
          key: '3',
          name: "智慧场景照明策略3",
          createTime: '2023/03/20 15:35:20',
          creator: '张峰',
          enable: true,
          content: {
            method: "1",
            mode: "2",
            openCl: "1",
            sensor: "0",
            tm: "23",
            wind: "1"
          }
        }
      ]
    }
  },
  mounted() {
    this.oriTableData = JSON.parse(JSON.stringify(this.tableData));
  },
  methods: {
    showTotal(total, range) {
      let pageSize = range[1]-range[0]+1;
      let pages = Math.ceil(total/pageSize);
      return '共'+total+'条数据，第 '+this.currentPage+'/'+pages+' 页';
    },
    onShowSizeChange(val) {

    },
    onSelectChange(val) {
      this.selectedRowKeys = val
    },
    batchDelete() {
      let app = this;
      console.log(app.selectedRowKeys)
      this.tableData.forEach(item=>{
        let index = app.selectedRowKeys.indexOf(item.key);
        if (index>-1) {
          app.tableData.splice(app.tableData.indexOf(item), 1)
        }
      })
      this.selectedRowKeys = []
    },
    handleOk() {
      this.$message.success('操作成功');
      let createTime = this.$util.dateUtil.getCurrDateTime()
      let obj = {
        key: new Date(),
        name: this.formData.clName,
        createTime: createTime,
        creator: this.$store.userStore().userInfo.userName,
        enable: true,
        content: this.formData
      }
      this.tableData.push(obj);
      this.showCLInfo = false;
    },
    search() {
      let arr = this.oriTableData.filter(item=>{
        if (this.queryData.name && this.queryData.name != '') {
          return item.name.indexOf(this.queryData.name)>-1;
        } else {
        }
        if (this.queryData.enable == true || this.queryData.enable == false) {
          return item.enable = this.queryData.enable
        } else {
        }
        return true;
      })
      this.tableData = arr
    },
    viewItem(item) {
      this.disabledForm = true;
      item.content.clName = item.name;
      this.formData = item.content;
      this.showCLInfo = true;
    },
    deleteItem(item) {
      let index = this.tableData.indexOf(item);
      if (index>-1) {
        this.tableData.splice(index, 1)
      }
    },
    editItem(item) {
      this.disabledForm = false;
      item.content.clName = item.name;
      this.formData = item.content;
      this.showCLInfo = true;
    },
  }
}
</script>

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

  .ant-form-inline .ant-form-item {
    margin-right: 60px;

  }

  .accessManage-body {
    background: white;
    border-radius: 4px;
    margin-top: 12px;
    padding: 15px;
  }

}
</style>