add:通风系统数据引入/素材样式修改/引入组件改造

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

@@ -1,6 +1,18 @@
 <template>
   <div class="div-add">
     <button class="add" @click="addModal">添加</button>
+    <a-popconfirm title="是否提交以上修改？" 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>
@@ -17,35 +29,25 @@
         <td>{{ index + 1 }}</td>
         <td>{{ row.startTime }}</td>
         <td>{{ row.planName }}</td>
-        <td v-if="row.planStatus == '2'">
+        <td>
           <button
-            style="
-              font-size: 12px;
-              background: rgba(57, 215, 187, 0.1);
-              color: rgb(57, 215, 187);
-              border: 1px solid rgb(57, 215, 187);
-            ">
-            已执行
-          </button>
-        </td>
-        <td v-if="row.planStatus == '1'">
-          <button
-            style="
-              font-size: 12px;
-              background: rgba(243, 97, 99, 0.1);
-              border: 1px solid rgba(243, 97, 99);
-              color: rgba(243, 97, 99);
-            ">
-            待执行
+            :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="restartPlan(row.id)">重启</div>
+          <div class="tabReboot" @click="startPlan(row)">启用</div>
           <a-popconfirm
-            title="此操作将永久删除该条数据"
+            title="此操作将移除该数据"
             ok-text="确定"
             cancel-text="取消"
-            @confirm="deletePlan(row.id)">
+            @confirm="deletePlan(row)">
             <div class="tabDelete">删除</div>
           </a-popconfirm>
         </td>
@@ -82,39 +84,95 @@
   // 请求
   import { http } from '/nerv-lib/util/http';
   import { lightingManage } from '/@/api/IlluminationInfo';
+  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,
+    },
+  });
+
   onMounted(() => {
     // 计划表格
     getTable();
     // 穿梭框原始数据
     getLeftPlan();
   });
+  // 全局变量
+  const state = items();
 
   // 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) => {
+      item.executeStatus.value = state;
+    });
+  };
+
   // 表格数据
   const dataSource = ref([]);
   // 获得表格数据
   const getTable = () => {
-    http.get(lightingManage.getPlanTable, {}).then((res) => {
-      dataSource.value = res.data;
-    });
+    http
+      .get(planManage.getTableData, {
+        projectId: state.projectId,
+        siteId: state.siteId,
+        // 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
+        deviceType: props.type,
+      })
+      .then((res) => {
+        dataSource.value = res.data;
+      });
   };
-  // 删除表格中的计划
-  const deletePlan = (id: String) => {
-    http.delete(lightingManage.deletePlan, [id]).then(() => {
-      message.success('操作成功');
-      getTable();
-    });
-  };
-  // 重启表格中的计划
-  const restartPlan = (id: String) => {
-    http.post(lightingManage.restartPlan, { planId: id }).then(() => {
+  // 删除表格中的计划（将当前任意状态，修改为未启用 =0）
+  const deletePlan = (row: any) => {
+    row.executeStatus.value = 0;
+  };
+  // 重启表格中的计划（将当前任意状态，修改为待执行 = 1）
+  const startPlan = (row: any) => {
+    if (row.executeStatus.value == 1) {
+      return message.info('该数据已是待执行状态，无需再次修改');
+    }
+    row.executeStatus.value = 1;
+  };
+  // 将对表格的修改统一发送
+  const sendTable = () => {
+    http.post(lightingManage.submitTableData, dataSource.value).then(() => {
       message.success('操作成功');
       getTable();
+      getLeftPlan();
     });
   };
 
@@ -133,16 +191,23 @@
   const transferData = ref([]) as any;
   // 获得穿梭框原始数据
   const getLeftPlan = () => {
-    http.get(lightingManage.getLeftPlan, {}).then((res) => {
-      let arr = [];
-      res.data.forEach((item: any) => {
-        arr.push({
-          key: item.id,
-          title: item.planName,
+    http
+      .get(planManage.getTransData, {
+        projectId: state.projectId,
+        siteId: state.siteId,
+        // 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
+        deviceType: props.type,
+      })
+      .then((res) => {
+        let arr: Array<Object> = [];
+        res.data.forEach((item: any) => {
+          arr.push({
+            key: item.id,
+            title: item.planName,
+          });
         });
+        transferData.value = arr;
       });
-      transferData.value = arr;
-    });
   };
 
   const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
@@ -158,7 +223,7 @@
     if (targetKeys.value.length < 1) {
       return message.info('没有选择任何计划');
     }
-    http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
+    http.post(planManage.submitTransData, targetKeys.value).then(() => {
       message.success('添加成功');
       // 如果发送成功，则刷新表格
       getTable();
@@ -172,7 +237,31 @@
 </script>
 <style lang="less" scoped>
   @import './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;
@@ -182,7 +271,7 @@
     position: fixed;
     bottom: 0;
     right: 0;
-    margin-right: 20px;
+    margin-right: 10px;
     .add {
       width: 74px;
       height: 40px;
@@ -200,7 +289,7 @@
   .custom-table {
     border-collapse: collapse;
     width: 416px;
-    height: 60px;
+    height: 40px;
     color: rgba(255, 255, 255, 1);
   }
   .custom-table th,
@@ -211,7 +300,6 @@
     text-align: center;
   }
   .table1 {
-    margin-top: 20px;
     width: 100%;
     border: 1px solid rgba(255, 255, 255);
     border-radius: 5px;