SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanPlant.vue

<template>
  <div class="div-add">
    <button class="add" @click="addModal">添加</button>
    <a-popconfirm
      title="是否提交以上修改？"
      placement="bottomLeft"
      ok-text="确定"
      cancel-text="取消"
      @confirm="sendTable">
      <button class="add" style="margin-left: 20px">执行</button>
    </a-popconfirm>
  </div>
  <div class="buttons">
    <span style="color: red; padding-top: 20px">*以下修改需执行后生效</span>
    <div class="plans">
      <button class="plan enabled" style="margin-right: 10px" @click="togglePlan(1)">
        计划启用
      </button>
      <button class="plan disabled" @click="togglePlan(3)"> 计划禁用 </button>
    </div>
  </div>
  <table class="custom-table table1">
    <thead>
      <tr :style="{ background: 'rgba(35,45,69)' }">
        <th>序号</th>
        <th>执行时间</th>
        <th>计划名称</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in dataSource" v-show="row.executeStatus.value != 0" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ row.startTime }}</td>
        <td>{{ row.planName }}</td>
        <td>
          <button
            :style="{
              'font-size': '12px',
              width: '5em',
              background: 'rgb(47, 47, 47)',
              color: setStateColor(row.executeStatus.value),
              border: '1px solid',
            }">
            {{ setStateText(row.executeStatus.value) }}
          </button>
        </td>
        <td>
          <div class="tabReboot" @click="startPlan(row)">启用</div>
          <a-popconfirm
            title="此操作将移除该数据"
            ok-text="确定"
            cancel-text="取消"
            placement="topRight"
            @confirm="deletePlan(row)">
            <div class="tabDelete">删除</div>
          </a-popconfirm>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="out-dialog" v-if="addVisible">
    <div class="content">
      <div class="div-operation"></div>
      <span class="text-operation">计划库</span>
    </div>
    <div style="margin-top: 20px">
      <a-transfer
        v-model:target-keys="targetKeys"
        :data-source="transferData"
        show-search
        :filter-option="filterOption"
        :render="(item: any) => item.title"
        @change="handleChange"
        :style="{ color: 'rgba(255,255,255,1)' }"
        @search="handleSearch"
        :listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
    </div>
    <div style="width: 100%; height: 60px"></div>
    <div class="button-box">
      <button class="cancel" @click="addVisible = false">取消</button>
      <button class="execute" @click="sendPlan">确定</button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  // 请求
  import { http } from '/nerv-lib/util/http';
  import { ventilating } from '/@/api/ventilatingSystem';
  import { planManage } from '/@/api/planManage';
  import { message } from 'ant-design-vue';
  // 全局变量
  import { items } from '/@/store/item';

  // 初始化 ===========================================================

  const props = defineProps({
    // 分区结构（照明区域 > 照明回路）
    status: {
      type: Array,
      default: () => {
        [];
      },
    },
    type: {
      type: Number,
    },
  });
  let url = '';
  // 全局变量
  const state = items();
  onMounted(() => {
    // 计划表格
    getTable();
    // 穿梭框原始数据
    getLeftPlan();
    let type = props.type;
    if (type == 3) {
      url = ventilating.submitTableData1;
    } else if (type == 4) {
      url = ventilating.submitTableData2;
    } else if (type == 5) {
      url = ventilating.submitTableData3;
    }
  });

  /**
   * @method resetAll 刷新3个tab中的全部数据（修改计划，会影响tab1数据信息，生成tab3日志）
   */
  const emit = defineEmits(['resetAll']);

  // tab页部分 ========================================================

  // 设置枚举的颜色 与 文本
  const setStateColor = (state: number) => {
    if (state == 0) {
      return '#ccc';
    } else if (state == 1) {
      return 'orange';
    } else if (state == 2) {
      return 'rgb(57, 215, 187)';
    } else if (state == 3) {
      return 'rgb(255, 0, 0)';
    }
  };
  // 设置枚举的文本
  const setStateText = (state: number) => {
    const res = props.status.find((item: any) => {
      return item.value == state;
    });
    return res.label;
  };
  // 计划启用/禁用事件
  const togglePlan = (state: number) => {
    dataSource.value.forEach((item: any) => {
      // 执行中 无法修改为待执行
      if (state == 1) {
        if (item.executeStatus.value != 2) {
          item.executeStatus.value = state;
        }
        // 任何状态都可以修改为 暂停
      } else {
        item.executeStatus.value = state;
      }
    });
  };

  // 表格数据
  const dataSource = ref([]);
  // 获得表格数据
  const getTable = () => {
    http
      .get(planManage.getTableData, {
        projectId: state.projectId,
        siteId: state.siteId,
        // 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
        ctrlType: props.type,
      })
      .then((res) => {
        dataSource.value = res.data;
      });
  };
  // 删除表格中的计划（将当前任意状态，修改为未启用 =0）
  const deletePlan = (row: any) => {
    row.executeStatus.value = 0;
  };
  // 重启表格中的计划（将当前任意状态，修改为待执行 = 1）
  const startPlan = (row: any) => {
    if (row.executeStatus.value == 1) {
      return message.info('该数据已是待执行状态，无需再次修改');
    }
    if (row.executeStatus.value == 2) {
      return message.info('执行中的状态已被启用，无需修改');
    }
    row.executeStatus.value = 1;
  };
  // 将对表格的修改统一发送
  const sendTable = () => {
    if (!dataSource.value.length) {
      return message.info('没有任何数据可以提交');
    }
    state.setLoading(true);
    http
      .post(
        url + `?projectId=${state.projectId}${state.siteId ? `&siteId=${state.siteId}` : ''}`,
        dataSource.value,
      )
      .then((res) => {
        state.setLoading(false);
        if (res.retcode == 0) {
          message.success('操作成功');
          // 刷新数据
          emit('resetAll');
        } else {
          message.info(res.msg);
        }
      })
      .catch(() => {
        state.setLoading(false);
      });
  };

  const reset = () => {
    // 计划表格
    getTable();
    // 穿梭框原始数据
    getLeftPlan();
  };

  // tab页弹窗部分 ====================================================

  // 添加弹窗控制变量
  const addVisible = ref(false);
  // 打开弹窗
  const addModal = () => {
    addVisible.value = true;
  };

  // 穿梭框部分 =======================================================

  // 穿梭框数据
  const transferData = ref([]) as any;
  // 获得穿梭框原始数据
  const getLeftPlan = () => {
    http
      .get(planManage.getTransData, {
        projectId: state.projectId,
        siteId: state.siteId,
        // 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
        ctrlType: props.type,
      })
      .then((res) => {
        let arr: Array<Object> = [];
        res.data.forEach((item: any) => {
          arr.push({
            key: item.id,
            title: item.planName,
          });
        });
        transferData.value = arr;
      });
  };

  const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
    console.log(keys, direction, moveKeys);
  };
  const handleSearch = (dir: string, value: string) => {
    console.log('search:', dir, value);
  };
  // 穿梭框选中数据
  const targetKeys = ref<string[]>([]);
  // 将穿梭框选中的计划提交
  const sendPlan = () => {
    if (targetKeys.value.length < 1) {
      return message.info('没有选择任何计划');
    }
    http.post(planManage.submitTransData, targetKeys.value).then(() => {
      message.success('添加成功');
      // 如果发送成功，则刷新表格
      reset();
    });
  };

  const filterOption = (inputValue: string, option: any) => {
    return option.description.indexOf(inputValue) > -1;
  };

  // 向外暴露方法
  defineExpose({
    reset,
  });
</script>
<style lang="less" scoped>
  @import '../../style/dialogStyle.less';
  .buttons {
    display: flex;
    justify-content: space-between;
    .plan {
      border: none;
      font-size: 14px;
      font-weight: 400;
      border-radius: 5px;
      width: 88px;
      height: 32px;
      color: white;
      cursor: pointer;
      margin: 15px 0;
      vertical-align: middle;
    }
    .plan.enabled {
      background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
    }
    .plan.disabled {
      background-color: red;
    }
    .plan:disabled {
      cursor: not-allowed;
    }
  }
  // 右下角添加按钮
  .div-add {
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 10px;
    .add {
      width: 74px;
      height: 40px;
      opacity: 1;
      border-radius: 4px;
      background: rgba(67, 136, 251, 1);
      border: rgba(67, 136, 251, 1);
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }
  }
  // 表格
  .custom-table {
    border-collapse: collapse;
    width: 416px;
    height: 40px;
    color: rgba(255, 255, 255, 1);
  }
  .custom-table th,
  .custom-table td {
    border: 1px solid rgba(163, 192, 243, 1);
    text-align: left;
    padding: 8px;
    text-align: center;
  }
  .table1 {
    width: 100%;
    border: 1px solid rgba(255, 255, 255);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    // 表格中的操作按钮
    .tabReboot,
    .tabDelete {
      border: none;
      display: inline-block;
      background-color: rgba(0, 0, 0, 0);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 20px;
      color: rgba(67, 136, 251, 1);
      cursor: pointer;
    }
    .tabReboot {
      margin-right: 8px;
    }
    .tabReboot::active {
      color: white !important;
    }
    .tabDelete::active {
      color: white;
    }
  }
  ::v-deep(.ant-transfer) {
    // 屏蔽自带的hover效果
    .ant-transfer-list-content-item:hover {
      background: black;
    }
  }
</style>