From 3cf535351ee62e7ef559c9e5b95038c7b36b4236 Mon Sep 17 00:00:00 2001
From: chenpingsen <chenpingsen>
Date: Thu, 29 Aug 2024 16:05:58 +0800
Subject: [PATCH] =?UTF-8?q?add:=E6=96=B0=E5=A2=9E=E7=BB=99=E6=8E=92?=
 =?UTF-8?q?=E6=B0=B4=E9=A1=B5=E9=9D=A2/=E6=8E=A5=E5=8F=A3=E5=8F=8A?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hx-ai-intelligent/src/api/waterSystem.ts           |  13 +
 hx-ai-intelligent/src/router/equipmentControl.ts   |  38 +-
 .../waterSystem/component/logTab.vue               | 429 +++++++++++++
 .../waterSystem/component/planTab.vue              | 381 ++++++++++++
 .../view/equipmentControl/waterSystem/device.ts    | 282 +++++++++
 .../equipmentControl/waterSystem/deviceInfo.vue    | 150 +++++
 .../equipmentControl/waterSystem/deviceItem.vue    | 291 +++++++++
 .../equipmentControl/waterSystem/deviceLine.vue    |  30 +
 .../view/equipmentControl/waterSystem/index.vue    | 663 +++++++++++++++++++++
 9 files changed, 2258 insertions(+), 19 deletions(-)
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/waterSystem/component/logTab.vue
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/waterSystem/component/planTab.vue
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/waterSystem/device.ts
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceInfo.vue
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceItem.vue
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceLine.vue
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/waterSystem/index.vue

diff --git a/hx-ai-intelligent/src/api/waterSystem.ts b/hx-ai-intelligent/src/api/waterSystem.ts
index e8c282c..fb56ab3 100644
--- a/hx-ai-intelligent/src/api/waterSystem.ts
+++ b/hx-ai-intelligent/src/api/waterSystem.ts
@@ -2,6 +2,8 @@
 const prefix = '/carbon-smart/api';
 // 通风系统相关接口
 export enum waterSys {
+  // 首页 ====================================================
+
   // 获得污水池状态
   getPool1 = prefix + '/waterSysCtrl/getSewagePoolState',
   // 获得阀门状态
@@ -10,4 +12,15 @@ export enum waterSys {
   getPool2 = prefix + '/waterSysCtrl/getCollectPoolState',
   // 获得水泵状态
   getPump = prefix + '/waterSysCtrl/getPumpState',
+  // 提交场景模式修改
+  submitList = prefix + '/waterSysCtrl/changeToSceneMode',
+
+  // 计划 tab1 ===============================================
+  submitTableData = prefix + '/waterSysCtrl/refreshPlanStatus',
+
+  // 日志 tab2 ===============================================
+  // 获得设备日志
+  getLog = prefix + '/waterSysInfo/pageAbleLog',
+  // 获得日志详情
+  getLogDetail = prefix + '/waterSysInfo/fullLog',
 }
diff --git a/hx-ai-intelligent/src/router/equipmentControl.ts b/hx-ai-intelligent/src/router/equipmentControl.ts
index 9d4dd25..52703dd 100644
--- a/hx-ai-intelligent/src/router/equipmentControl.ts
+++ b/hx-ai-intelligent/src/router/equipmentControl.ts
@@ -119,25 +119,25 @@ const equipmentControl = {
         },
       ],
     },
-    // {
-    //   path: 'waterSystem',
-    //   name: 'waterSystem',
-    //   meta: { title: '给排水系统', hideChildren: true, icon: 'shebeiqunkong' },
-    //   component: Base,
-    //   redirect: { name: 'waternControlSystemIndex' },
-    //   children: [
-    //     {
-    //       path: 'index',
-    //       name: 'waternControlSystemIndex',
-    //       component: () => import('/@/view/equipmentControl/waterSystem/index.vue'),
-    //       meta: {
-    //         title: '给排水系统',
-    //         keepAlive: false,
-    //         // backApi: [],
-    //       },
-    //     },
-    //   ],
-    // },
+    {
+      path: 'waterSystem',
+      name: 'waterSystem',
+      meta: { title: '给排水系统', hideChildren: true, icon: 'shebeiqunkong' },
+      component: Base,
+      redirect: { name: 'waternControlSystemIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'waternControlSystemIndex',
+          component: () => import('/@/view/equipmentControl/waterSystem/index.vue'),
+          meta: {
+            title: '给排水系统',
+            keepAlive: false,
+            // backApi: [],
+          },
+        },
+      ],
+    },
     {
       path: 'planToAdd',
       name: 'planToAdd',
diff --git a/hx-ai-intelligent/src/view/equipmentControl/waterSystem/component/logTab.vue b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/component/logTab.vue
new file mode 100644
index 0000000..8da6cd0
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/component/logTab.vue
@@ -0,0 +1,429 @@
+<template>
+  <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
+        :style="{ color: row.ctrlResult == 1 ? 'red' : 'white' }"
+        v-for="(row, index) in dataSource"
+        :key="index"
+        @click="handleRowClick(row.id, index)"
+        :class="index === trIndex ? 'isTrIndex' : ''">
+        <td>{{ index + 1 }}</td>
+        <td>{{ row.startTime }}</td>
+        <td>{{ row.operationContent }}</td>
+        <td>{{ row.createUser }}</td>
+        <td>{{ row.ctrlResult ? '失败' : '成功' }}</td>
+      </tr>
+    </tbody>
+  </table>
+  <a-pagination
+    style="margin-top: 10px; text-align: right"
+    v-model:current="pagination.pageNum"
+    v-model:pageSize="pagination.pageSize"
+    show-size-changer
+    :total="pagination.total"
+    @change="getTable(true)" />
+  <div style="width: 100%; height: 40px"></div>
+
+  <div class="out-dialog" :class="{ showDialog: logModalVisible }" v-if="logModalVisible">
+    <div class="content">
+      <div>
+        <div class="div-operation"></div>
+        <span class="text-operation">变更内容 </span>
+      </div>
+      <div>
+        <button :class="{ btn: true, selected: activeButton == 1 }" @click="changeBtn(1)"
+          >阀门</button
+        >
+        <button :class="{ btn: true, selected: activeButton == 2 }" @click="changeBtn(2)"
+          >水泵</button
+        >
+      </div>
+      <div class="device-list" v-if="activeButton == 1">
+        <div class="device-list-item" v-for="(item, index) in valveLogList" :key="index">
+          <div class="list-item-title">
+            <div class="item-title">
+              <img src="../images/device1.png" alt="" />
+              <span>{{ item.deviceGroupName }}</span>
+            </div>
+          </div>
+          <div class="list-item-main">
+            <div>
+              <div class="info">开度</div>
+              <div class="text">
+                <span>{{ item.openPercentBefore + '%' }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>{{ item.openPercentAfter + '%' }}</span>
+              </div>
+            </div>
+            <div></div>
+          </div>
+        </div>
+        <a-empty style="margin-top: 100px" v-if="valveLogList.length == 0">
+          <template #description> <span style="color: white">暂无数据</span></template>
+        </a-empty>
+      </div>
+      <div class="device-list" v-if="activeButton == 2">
+        <div class="device-list-item" v-for="(item, index) in pumpLogList" :key="index">
+          <div class="list-item-title">
+            <div class="item-title">
+              <img src="../images/device2.png" alt="" />
+              <span>{{ item.deviceGroupName }}</span>
+            </div>
+          </div>
+          <div class="list-item-main">
+            <div>
+              <div class="info">频率</div>
+              <div class="text">
+                <span>{{ item.frequencyBefore + 'MHz' }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>{{ item.frequencyAfter + 'MHz' }}</span>
+              </div>
+            </div>
+            <div>
+              <div class="info">开关</div>
+              <div class="text">
+                <span>{{ item.switchStatusBefore.label }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>{{ item.switchStatusAfter.label }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <a-empty style="margin-top: 100px" v-if="pumpLogList.length == 0">
+          <template #description> <span style="color: white">暂无数据</span></template>
+        </a-empty>
+      </div>
+    </div>
+    <div style="width: 100%; height: 160px"></div>
+    <div class="button-box">
+      <button class="cancel" @click="logModalVisible = false">关闭</button>
+    </div>
+  </div>
+  <div class="div-add">
+    <button class="add" @click="reset">刷新</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { Pagination } from 'ant-design-vue';
+  import { http } from '/nerv-lib/util/http';
+  import { waterSys } from '/@/api/waterSystem';
+  // 全局变量
+  import { items } from '/@/store/item';
+
+  // 初始化 =======================================================
+
+  // 组件
+  defineOptions({
+    components: {
+      'a-pagination': Pagination,
+    },
+  });
+  // 初始化
+  onMounted(() => {
+    getTable();
+  });
+
+  // 全局变量
+  const state = items();
+
+  // 日志业务 ======================================================
+
+  // 分页设置
+  const pagination = ref({
+    pageSize: 10,
+    pageNum: 1,
+    total: 0,
+  });
+  // 表格数据
+  const dataSource = ref([]);
+  // 当前选中表格行
+  let trIndex = ref(-1);
+  // 获得表格数据
+  const getTable = (changePage = false) => {
+    state.setLoading(true);
+    // 如果是切换页面，则清除当前序列、关闭弹窗
+    if (changePage) {
+      trIndex.value = -1;
+      logModalVisible.value = false;
+      pumpLogList.value.length = 0;
+      valveLogList.value.length = 0;
+    }
+    http
+      .get(waterSys.getLog, {
+        pageSize: pagination.value.pageSize,
+        pageNum: pagination.value.pageNum,
+      })
+      .then((res) => {
+        state.setLoading(false);
+        let data = res.data;
+        dataSource.value = data.records;
+        pagination.value.total = data.total;
+      })
+      .catch(() => {
+        state.setLoading(false);
+      });
+  };
+  // 刷新功能（右下角）
+  const reset = () => {
+    trIndex.value = -1;
+    logModalVisible.value = false;
+    pagination.value = {
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    };
+    getTable();
+  };
+  // 点击日志行事件
+  const handleRowClick = (id: any, index: any) => {
+    trIndex.value = index;
+    getLogDetail(id);
+  };
+
+  // 日志详情业务 ==================================================
+
+  // 日志详情显隐
+  const logModalVisible = ref(false);
+  const getLogDetail = (id: any) => {
+    state.setLoading(true);
+    http
+      .get(waterSys.getLogDetail, { logId: id })
+      .then((res) => {
+        state.setLoading(false);
+        const data = res.data;
+        if (data.pumpLogList.length || data.valveLogList.length) {
+          // 显示模态框
+          logModalVisible.value = true;
+          pumpLogList.value = data.pumpLogList;
+          valveLogList.value = data.valveLogList;
+        } else {
+          return message.info('返回值无效');
+        }
+      })
+      .catch(() => {
+        state.setLoading(false);
+      });
+  };
+  // 当前选中的设备类型 阀门=1/水泵=2
+  const activeButton = ref(1);
+  // 切换设备类型
+  const changeBtn = (key: number) => {
+    activeButton.value = key;
+  };
+  // 水泵数据
+  const pumpLogList = ref<any>([]);
+  // 水阀数据
+  const valveLogList = ref<any>([]);
+
+  // 向外暴露方法
+  defineExpose({
+    reset,
+  });
+</script>
+<style lang="less" scoped>
+  @import '../../style/dialogStyle.less';
+
+  // 右下角添加按钮
+  .div-add {
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin-right: 20px;
+    .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;
+    min-height: 60px;
+    max-height: 500px;
+    overflow-y: auto;
+    cursor: pointer;
+    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 {
+    margin-top: 20px;
+    width: 100%;
+    border: 1px solid rgba(255, 255, 255);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.1);
+
+    .tabReboot,
+    .tabDelete {
+      border: none;
+      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);
+    }
+
+    .tabReboot {
+      margin-right: 8px;
+    }
+
+    .isTrIndex {
+      background: rgba(67, 136, 251, 1);
+    }
+  }
+
+  ::v-deep(.ant-transfer) {
+    // 屏蔽自带的hover效果
+    .ant-transfer-list-content-item:hover {
+      background: black;
+    }
+  }
+
+  .btn {
+    width: 92px;
+    height: 40px;
+    border-radius: 4px;
+    opacity: 1;
+    margin-top: 10px;
+    margin-left: 15px;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 1;
+    border: 1px solid rgba(207, 212, 219, 1);
+    line-height: 20.27px;
+    color: white;
+    text-align: center;
+    vertical-align: top;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .selected {
+    background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
+    color: rgba(0, 61, 90, 1);
+    border: 1px solid white;
+  }
+
+  .btn:hover {
+    background-color: rgba(207, 212, 219, 1);
+  }
+
+  .btn:active {
+    background-color: rgba(102, 102, 102, 1);
+    color: white;
+  }
+  .device-list {
+    margin-left: 15px;
+    margin-top: 15px;
+    width: calc(100% - 15px);
+    font-size: 13px;
+    height: auto;
+    display: flex;
+    gap: 15px;
+    flex-direction: column;
+    .device-list-item {
+      width: calc(100% - 15px);
+      box-sizing: border-box;
+      padding: 10px;
+      border: 2px solid #03407e;
+      border-radius: 4px;
+      background: rgba(0, 177, 255, 0.2);
+      display: flex;
+      gap: 10px;
+      flex-direction: column;
+      .list-item-title {
+        color: white;
+        display: flex;
+        justify-content: space-between;
+        .item-title {
+          img {
+            width: 25px;
+          }
+          span {
+            margin-left: 10px;
+            font-size: 16px;
+          }
+        }
+        .revoke {
+          text-align: center;
+          border: none;
+          border-radius: 4px;
+          padding: 5px 15px;
+          background: linear-gradient(
+            180deg,
+            rgba(255, 187, 0, 1) 0%,
+            rgba(255, 112, 3, 1) 91.21%,
+            rgba(255, 129, 3, 1) 100%
+          );
+          cursor: pointer;
+        }
+      }
+      .list-item-main {
+        display: flex;
+        > div {
+          flex: 1;
+          display: flex;
+          gap: 8px;
+          > .info {
+            text-align: center;
+            width: 6em;
+            height: 2.5em;
+            line-height: 2.5em;
+            border-radius: 4px;
+            color: white;
+            background: linear-gradient(
+              180deg,
+              rgba(86, 221, 253, 1) 0%,
+              rgba(25, 176, 255, 1) 100%
+            );
+          }
+          > .text {
+            :first-child {
+              color: white;
+              line-height: 2.5em;
+            }
+            img {
+              padding: 0 5px;
+            }
+            :last-child {
+              line-height: 2.5em;
+              color: red;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/waterSystem/component/planTab.vue b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/component/planTab.vue
new file mode 100644
index 0000000..51643b2
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/component/planTab.vue
@@ -0,0 +1,381 @@
+<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 { planManage } from '/@/api/planManage';
+  import { waterSys } from '/@/api/waterSystem';
+  import { message } from 'ant-design-vue';
+  import { getEnum } from '/@/api';
+  // 全局变量
+  import { items } from '/@/store/item';
+
+  // 初始化 ===========================================================
+
+  onMounted(() => {
+    // 获得枚举
+    getStateEnum();
+    // 获得穿梭框 与 表格数据
+    reset();
+  });
+  // 全局变量
+  const state = items();
+  // 获得任务状态枚举
+  const getStateEnum = async () => {
+    let enumData = await getEnum({ params: { enumType: 'PlanExecuteStatus' } });
+    stateList.value = enumData.data;
+  };
+  /**
+   * @method resetAll 刷新3个tab中的全部数据（修改计划，会影响tab1数据信息，生成tab3日志）
+   */
+  const emit = defineEmits(['resetAll']);
+
+  // tab页部分 ========================================================
+
+  // 状态枚举
+  const stateList = ref([]);
+  // 设置枚举的颜色 与 文本
+  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 = stateList.value.find((item) => {
+      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给排水)
+        ctrlType: 6,
+      })
+      .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(
+        waterSys.submitTableData +
+          `?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给排水)
+        ctrlType: 6,
+      })
+      .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>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/waterSystem/device.ts b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/device.ts
new file mode 100644
index 0000000..4278f5e
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/device.ts
@@ -0,0 +1,282 @@
+import { ref } from 'vue';
+// 流动线条样式与定位
+export const linePosition = [
+  // 雨水池 - 控制阀
+  {
+    left: '4%',
+    top: '44%',
+    transform: 'rotateZ(-30deg)',
+    transformOrigin: 'left',
+    zIndex: '6',
+    width: '6%',
+  },
+  {
+    left: '4%',
+    top: '84%',
+    transform: 'rotateZ(-30deg)',
+    transformOrigin: 'left',
+    zIndex: '6',
+    width: '6%',
+  },
+  // 控制阀 - 进水阀
+  { left: '12%', top: '34%', width: '10%' },
+  { left: '12%', top: '74%', width: '10%' },
+  // 进水阀 - 集水池
+  { left: '23%', top: '34%', width: '8%' },
+  { left: '23%', top: '74%', width: '8%' },
+  // 集水池 - 排水泵 - 横线
+  { left: '35%', top: '34%', width: '4%' },
+  { left: '35%', top: '74%', width: '4%' },
+  // 上半集水池右侧分线
+  { left: '39%', top: '34%', transform: 'rotateZ(90deg)', transformOrigin: 'left', width: '4%' },
+  { left: '39%', top: '34%', transform: 'rotateZ(-90deg)', transformOrigin: 'left', width: '4%' },
+  // 下半集水池右侧分线
+  { left: '39%', top: '74%', transform: 'rotateZ(90deg)', transformOrigin: 'left', width: '4%' },
+  { left: '39%', top: '74%', transform: 'rotateZ(-90deg)', transformOrigin: 'left', width: '4%' },
+  // 上半-左侧水泵分线
+  { left: '39%', top: '25%', width: '8%' },
+  { left: '39%', top: '43%', width: '8%' },
+  // 下半-左侧水泵分线
+  { left: '39%', top: '65%', width: '8%' },
+  { left: '39%', top: '83%', width: '8%' },
+  // 水泵右侧合线 下半
+  { left: '47%', top: '83%', transform: 'rotateZ(-90deg)', transformOrigin: 'left', width: '14%' },
+  // 水泵右侧合线 上半
+  { left: '47%', top: '25%', transform: 'rotateZ(90deg)', transformOrigin: 'left', width: '12%' },
+  // 汇入总闸连线
+  { left: '47%', top: '52%', width: '4%' },
+  // 汇入总集水池
+  { left: '51%', top: '52%', transform: 'rotateZ(-25deg)', transformOrigin: 'left', width: '7%' },
+  // 汇入总排水闸
+  { left: '58%', top: '45%', width: '9%' },
+  // 汇入市政管道 - 途径水泵2
+  { left: '68%', top: '45%', width: '28%' },
+  // 总排水闸 - 总排水泵1  上半
+  { left: '75%', top: '45%', transform: 'rotateZ(-90deg)', transformOrigin: 'left', width: '10%' },
+  { left: '75%', top: '23%', width: '11%' },
+  { left: '86%', top: '22.5%', transform: 'rotateZ(90deg)', transformOrigin: 'left', width: '10%' },
+  // 总排水闸 - 总排水泵3  下半
+  { left: '75%', top: '45%', transform: 'rotateZ(90deg)', transformOrigin: 'left', width: '9%' },
+  { left: '75%', top: '65%', width: '11%' },
+  {
+    left: '86%',
+    top: '65%',
+    transform: 'rotateZ(-90deg)',
+    transformOrigin: 'left',
+    width: '9%',
+  },
+];
+
+/**
+ * 1. 设备数量是固定的
+ * 2. 设备顺序是固定的
+ * 3. 此处数据用于渲染设备图标，后端返回数据后，将依次插入
+ * @param icon 决定调用的设备图标：污水池=1/集水池=2/控制阀=3//进水阀=4//排水泵=5
+ * @param type 设备类型：污水池=1/阀门=2/集水池=3/水泵=4
+ * @param open 水泵的开关状态  开=true/关=false
+ * @param control 是否可以被操作（是否显示顶部按钮，水池为false）
+ * @param edited 是否已经被编辑（决定显示编辑 或 撤销）
+ */
+// 污水池
+export const device1 = ref([
+  {
+    control: false,
+    type: 1,
+    icon: 1,
+    styleObject: {
+      left: '1%',
+      top: '40%',
+      zIndex: '9',
+    },
+  },
+  {
+    control: false,
+    type: 1,
+    icon: 1,
+    styleObject: {
+      left: '1%',
+      top: '80%',
+      zIndex: '9',
+    },
+  },
+]);
+// 阀门
+export const device2 = ref([
+  {
+    control: true,
+    open: true,
+    type: 2,
+    icon: 3,
+    edited: false,
+    styleObject: {
+      left: '8%',
+      top: '28%',
+    },
+  },
+  {
+    control: true,
+    open: false,
+    type: 2,
+    icon: 3,
+    edited: false,
+    styleObject: {
+      left: '8%',
+      top: '68%',
+    },
+  },
+  {
+    control: true,
+    open: true,
+    type: 2,
+    icon: 4,
+    edited: false,
+    styleObject: {
+      left: '20%',
+      top: '28%',
+    },
+  },
+  {
+    control: true,
+    open: true,
+    type: 2,
+    icon: 4,
+    edited: false,
+    styleObject: {
+      left: '20%',
+      top: '68%',
+    },
+  },
+  {
+    control: true,
+    open: true,
+    type: 2,
+    icon: 3,
+    edited: false,
+    styleObject: {
+      left: '48%',
+      top: '46%',
+    },
+  },
+  {
+    control: true,
+    open: true,
+    type: 2,
+    icon: 3,
+    edited: false,
+    styleObject: {
+      left: '65%',
+      top: '38%',
+    },
+  },
+]);
+// 集水池
+export const device3 = ref([
+  {
+    control: false,
+    type: 3,
+    icon: 2,
+    styleObject: {
+      left: '30%',
+      top: '68%',
+    },
+  },
+  {
+    control: false,
+    type: 3,
+    icon: 2,
+    styleObject: {
+      left: '30%',
+      top: '28%',
+    },
+  },
+  {
+    control: false,
+    type: 3,
+    icon: 2,
+    styleObject: {
+      left: '56%',
+      top: '40%',
+    },
+  },
+]);
+// 水泵
+export const device4 = ref([
+  {
+    control: true,
+    open: false,
+    type: 4,
+    icon: 5,
+    edited: false,
+    styleObject: {
+      left: '40%',
+      top: '20%',
+    },
+  },
+  {
+    control: true,
+    open: true,
+    type: 4,
+    icon: 5,
+    edited: false,
+    styleObject: {
+      left: '40%',
+      top: '40%',
+    },
+  },
+  {
+    control: true,
+    open: true,
+    type: 4,
+    icon: 5,
+    edited: false,
+    styleObject: {
+      left: '40%',
+      top: '60%',
+    },
+  },
+  {
+    control: true,
+    open: true,
+    type: 4,
+    icon: 5,
+    edited: false,
+    styleObject: {
+      left: '40%',
+      top: '80%',
+    },
+  },
+  // 右上3水泵
+  {
+    control: true,
+    open: true,
+    type: 4,
+    icon: 5,
+    edited: false,
+    styleObject: {
+      left: '78%',
+      top: '20%',
+    },
+  },
+  {
+    control: true,
+    open: true,
+    type: 4,
+    icon: 5,
+    edited: false,
+    styleObject: {
+      left: '78%',
+      top: '40%',
+    },
+  },
+  {
+    control: true,
+    open: true,
+    type: 4,
+    icon: 5,
+    edited: false,
+    styleObject: {
+      left: '78%',
+      top: '60%',
+    },
+  },
+]);
diff --git a/hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceInfo.vue b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceInfo.vue
new file mode 100644
index 0000000..8f7232c
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceInfo.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="left-top">
+    <div class="info">
+      <div class="title-item">
+        <div class="title-back">设备状态</div>
+      </div>
+      <div class="info-item">
+        <div v-for="(item, index) in deviceState" :key="index">
+          <img v-if="item.type == props.state" :src="item.icon" alt="" />
+          <img v-else :src="item.default" alt="" />
+          <div class="mode-item-text">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="mode">
+      <div class="title-item">
+        <div class="title-back">控制模式</div>
+        <div class="title-button">计划启用</div>
+      </div>
+      <div class="mode-item"></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  // 全局变量
+  import { items } from '/@/store/item';
+  // 图像资源引入
+  import type1 from './images/type1.png';
+  import type2 from './images/type2.png';
+  import type3 from './images/type3.png';
+  import type1off from './images/type1off.png';
+  import type2off from './images/type2off.png';
+  import type3off from './images/type3off.png';
+  // 传入的值
+  const props = defineProps({
+    // 设备状态
+    state: {
+      type: Number,
+    },
+  });
+  const deviceState = [
+    {
+      icon: type1,
+      default: type1off,
+      name: '运行',
+      type: 1,
+    },
+    {
+      icon: type2,
+      default: type2off,
+      name: '故障',
+      type: 2,
+    },
+    {
+      icon: type3,
+      default: type3off,
+      name: '强排',
+      type: 3,
+    },
+  ];
+  //页面 创建
+  onMounted(() => {});
+</script>
+<style lang="less" scoped>
+  .left-top {
+    --pad: 12px;
+    position: absolute;
+    left: var(--pad);
+    top: var(--pad);
+    width: auto;
+    height: 110px;
+    display: flex;
+    z-index: 99;
+    gap: var(--pad);
+    > div {
+      background: black;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      box-sizing: border-box;
+      padding: 10px;
+      border-radius: 4px;
+      .title-item {
+        padding: 5px;
+        position: relative;
+        .title-back {
+          margin-left: 10px;
+          padding-left: 5px;
+          background: linear-gradient(to right, #1aaefb, transparent);
+          width: 7em;
+          color: white;
+          position: relative;
+          font-size: 14px;
+          vertical-align: middle;
+        }
+        .title-back::before {
+          position: absolute;
+          content: '';
+          display: block;
+          width: 5px;
+          height: 100%;
+          left: -12px;
+          background: #1aaefb;
+        }
+        .title-button {
+          position: absolute;
+          right: 2px;
+          top: 2px;
+          padding: 3px 8px;
+          color: white;
+          border-radius: 4px;
+          user-select: none;
+          cursor: pointer;
+          background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
+        }
+      }
+    }
+    // 设备状态
+    .info {
+      width: 230px;
+      .info-item {
+        display: flex;
+        padding-top: 3px;
+        div {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+          align-items: center;
+          .mode-item-text {
+            color: white;
+            user-select: none;
+          }
+          img {
+            width: 23px;
+            display: block;
+            user-select: none;
+          }
+        }
+      }
+    }
+    // 控制模式
+    .mode {
+      width: 200px;
+      .mode-item {
+      }
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceItem.vue b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceItem.vue
new file mode 100644
index 0000000..e8b0b3a
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceItem.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="deviceItem" :style="info.styleObject">
+    <!-- 点击编辑弹出框 -->
+    <a-popover
+      color="rgba(0, 0, 0, 0.8)"
+      placement="right"
+      v-model:visible="visible"
+      trigger="click">
+      <template #content>
+        <div class="item-box">
+          <div class="item-box-title">
+            <img v-if="info.type == 2" src="./images/device1.png" alt="" />
+            <img v-if="info.type == 4" src="./images/device2.png" alt="" />
+            <span>{{ info.name }}</span>
+          </div>
+          <!-- 开关 -->
+          <div v-if="info.type == 4" class="item-box-switch">
+            <div>开关</div>
+            <a-switch style="margin-top: 3px" size="small" v-model:checked="info.open" />
+          </div>
+          <div v-if="info.type == 2" class="item-box-range">
+            <div>开度</div>
+            <!-- <a-slider v-model:value="info.value" :tooltip-visible="true" :marks="range" :step="1"> -->
+            <a-slider v-model:value="info.value" :marks="range" :step="1">
+              <template #mark="{ label, point }">
+                <template v-if="point === 100">
+                  <strong>{{ label }}</strong>
+                </template>
+                <template v-else>{{ label }}</template>
+              </template>
+            </a-slider>
+          </div>
+          <div v-if="info.type == 4" class="item-box-range">
+            <div>频率</div>
+            <a-slider v-model:value="info.value" :marks="range" :step="1">
+              <template #mark="{ label, point }">
+                <template v-if="point === 100">
+                  <strong>{{ label }}</strong>
+                </template>
+                <template v-else>{{ label }}</template>
+              </template>
+            </a-slider>
+          </div>
+          <div class="item-box-button">
+            <a-button class="item-btn" @click="refresh">刷新</a-button>
+            <a-popconfirm
+              title="此操作只保存修改，需右下角按钮提交"
+              ok-text="确定"
+              cancel-text="取消"
+              @confirm="editDevice">
+              <a-button class="item-btn" type="primary">执行</a-button>
+            </a-popconfirm>
+          </div>
+        </div>
+      </template>
+      <div v-if="!info.edited && info.control" class="device-button-back">
+        <img src="./images/edit.png" alt="" />
+        编辑</div
+      >
+    </a-popover>
+
+    <a-popconfirm
+      title="撤销将移除已保存的修改"
+      ok-text="确定"
+      cancel-text="取消"
+      @confirm="backConfirm">
+      <div v-if="info.edited && info.control" class="device-button">
+        <img src="./images/back.png" alt="" />
+        撤销</div
+      >
+    </a-popconfirm>
+    <!-- 设备图标 - 当前共5种单位 -->
+    <img v-if="info.icon == 1" src="./images/pond1.png" alt="" />
+    <img v-if="info.icon == 2" src="./images/pond2.png" alt="" />
+    <img v-if="info.icon == 3" src="./images/valve1.png" alt="" />
+    <img v-if="info.icon == 4" src="./images/valve2.png" alt="" />
+    <img v-if="info.icon == 5" style="width: 70px; height: 70px" src="./images/pump.png" alt="" />
+    <div class="info-name">
+      <span>{{ info.name }}</span>
+      <div class="img-box">
+        <img
+          v-if="(info.type == 2 || info.type == 4) && info.state == 0"
+          src="./images/alarm1.png"
+          alt="" />
+        <img
+          v-if="(info.type == 2 || info.type == 4) && info.state > 0"
+          src="./images/alarm2.png"
+          alt="" />
+      </div>
+    </div>
+    <!-- 只有水池会显示容量 -->
+    <div class="info-value" v-if="info.type == 1 || info.type == 3">
+      容量 : {{ info.value + info.unit }}</div
+    >
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, onMounted, computed } from 'vue';
+  import { message } from 'ant-design-vue';
+  // 图像资源引入
+
+  // 初始化 ===============================================================
+
+  //页面 创建
+  onMounted(() => {});
+  // 传入的值
+  const props = defineProps({
+    // 设备类型
+    info: {
+      type: Object,
+      default: () => {},
+    },
+  });
+  // 父组件传递的数据
+  const info = computed(() => props.info);
+
+  // 组件交互 =============================================================
+
+  // 用于控制弹窗的显示状态
+  const visible = ref(false);
+  // 滑动条显示规则
+  const range = ref({
+    0: {
+      style: {
+        color: '#0DFFFF',
+      },
+      label: 'min',
+    },
+    100: {
+      style: {
+        color: '#0DFFFF',
+      },
+      label: 'max',
+    },
+  });
+  // 刷新事件
+  const refresh = () => {
+    info.value.value = info.value.oldVal;
+  };
+  // 撤销事件
+  const backConfirm = () => {
+    info.value.value = info.value.oldVal;
+    info.value.edited = false;
+    // 如果为水泵
+    if (info.value.type == 4) {
+      console.log(info.value);
+      info.value.open = info.value.opened;
+    }
+  };
+  // 编辑-执行事件
+  const editDevice = () => {
+    // 未产生修改
+    if (info.value.value == info.value.oldVal && info.value.open === info.value.opened) {
+      return message.info('未产生任何修改');
+    }
+    // 产生修改
+    visible.value = false;
+    info.value.edited = true;
+    message.success('保存成功');
+  };
+</script>
+<style lang="less" scoped>
+  // 设备的图像
+  .deviceItem {
+    --size: 90px;
+    width: var(--size);
+    height: var(--size);
+    position: absolute;
+    top: 20%;
+    text-align: center;
+    // 默认使用3
+    z-index: 3;
+    > img {
+      user-select: none;
+    }
+    // 设备名
+    .info-name {
+      color: white;
+      font-size: 15px;
+      text-align: center;
+      position: relative;
+      > span {
+        vertical-align: middle;
+      }
+      .img-box {
+        display: inline-block;
+        position: absolute;
+        margin-left: 8px;
+        width: 22px;
+        > img {
+          width: 22px;
+        }
+      }
+    }
+    // 设备容量（仅水池）
+    .info-value {
+      text-align: center;
+      color: #23fdab;
+      font-size: 13px;
+    }
+    // 撤销按钮
+    .device-button {
+      position: absolute;
+      top: -35px;
+      left: 0;
+      right: 0;
+      margin: auto;
+      width: 5em;
+      padding: 5px 0;
+      text-align: center;
+      border-radius: 4px;
+      font-weight: 700;
+      cursor: pointer;
+      background: linear-gradient(#ffd700, #ffa403);
+      color: #674330;
+      user-select: none;
+      > img {
+        width: 13px;
+      }
+    }
+    // 编辑按钮
+    .device-button-back {
+      position: absolute;
+      top: -35px;
+      left: 0;
+      right: 0;
+      margin: auto;
+      width: 5em;
+      padding: 5px 0;
+      text-align: center;
+      border-radius: 4px;
+      font-weight: 700;
+      cursor: pointer;
+      background: linear-gradient(#00f92c, #00fe9f);
+      color: #003d5a;
+      user-select: none;
+      > img {
+        width: 13px;
+      }
+    }
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  // 弹出框样式
+  .ant-popover-inner {
+    // 弹出框内部容器
+    .item-box {
+      width: 250px;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      color: white;
+      img {
+        width: 20px;
+        margin-right: 10px;
+        vertical-align: middle;
+      }
+    }
+    // 开关控件
+    .item-box-switch {
+      padding: 10px 15px;
+      display: flex;
+      justify-content: space-between;
+      border-radius: 4px;
+      background: rgba(67, 136, 251, 0.3);
+      .ant-switch-checked {
+        background: linear-gradient(180deg, rgba(1, 206, 255, 1) 0%, rgba(0, 150, 229, 1) 100%);
+      }
+    }
+    // 滑动条控件
+    .item-box-range {
+      padding: 10px 15px 10px 15px;
+      box-sizing: border-box;
+      border-radius: 4px;
+      background: rgba(67, 136, 251, 0.3);
+      .ant-slider-handle {
+        border: 2px solid red !important;
+      }
+    }
+    // 底部按钮区
+    .item-box-button {
+      text-align: right;
+      .item-btn {
+        text-align: center;
+        margin-left: 10px;
+      }
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceLine.vue b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceLine.vue
new file mode 100644
index 0000000..245957c
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/deviceLine.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="line-item" :style="position"></div>
+</template>
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  // 传入的值
+  const props = defineProps({
+    // 线条
+    position: {
+      type: Object,
+      default: () => {},
+    },
+  });
+  const position = computed(() => {
+    return props.position;
+  });
+</script>
+<style lang="less" scoped>
+  .line-item {
+    position: absolute;
+    height: 10px;
+    width: 250px;
+    z-index: 1;
+    background-image: url(./images/back.gif);
+    background-color: rgba(13, 255, 164, 0.3);
+    background-size: 200px 10px;
+    border-radius: 5px;
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/waterSystem/index.vue b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/index.vue
new file mode 100644
index 0000000..df8efa1
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/waterSystem/index.vue
@@ -0,0 +1,663 @@
+<template>
+  <div class="main">
+    <!-- 左上角设备信息面板 -->
+    <deviceInfo :state="deviceState" />
+    <!-- 示意图 -->
+    <div class="map">
+      <!-- 污水池图标 -->
+      <deviceItem v-for="(item, index) in device1" :key="index" :info="item" />
+      <!-- 阀门图标 -->
+      <deviceItem v-for="(item, index) in device2" :key="index" :info="item" />
+      <!-- 集水池图标 -->
+      <deviceItem v-for="(item, index) in device3" :key="index" :info="item" />
+      <!-- 排水泵图标 -->
+      <deviceItem v-for="(item, index) in device4" :key="index" :info="item" />
+      <!-- 市政管道图标 -->
+      <div class="pipe">
+        <div>市政管道</div>
+        <img src="./images/pipe.png" alt="" />
+      </div>
+      <!-- 设备图标底部连线 -->
+      <deviceLine v-for="(item, index) in linePosition" :key="index" :position="item" />
+    </div>
+    <!-- 右下角按钮 -->
+    <div class="buttons">
+      <a-button type="primary" @click="openDrawer1">执行</a-button>
+      <a-button type="primary" @click="resetAll">全部撤销</a-button>
+    </div>
+    <!-- 页面右侧抽屉开关 -->
+    <div class="right-button">
+      <div>计划与日志</div>
+      <img @click="visible = true" src="./images/open.png" alt="" />
+    </div>
+    <!-- 右侧 计划日志抽屉 -->
+    <a-drawer
+      v-model:visible="visible"
+      class="drawer-item"
+      width="496"
+      placement="right"
+      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
+      :closable="false"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="计划列表" force-render>
+          <planTab ref="tabs1Ref" @reset-all="resetDrawer" />
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="日志">
+          <logTab ref="tabs2Ref" @reset-all="resetDrawer" />
+        </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+    <!-- 右侧 操作队列 -->
+    <a-drawer
+      v-model:visible="visible1"
+      class="drawer-item"
+      width="496"
+      placement="right"
+      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
+      :closable="false"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
+      <a-tabs v-model:activeKey="activeKey1">
+        <a-tab-pane key="1" tab="操作队列" force-render>
+          <div>
+            <a-badge :offset="[-5, 12]" :count="valveList.length">
+              <button :class="{ btn: true, selected: activeButton == 1 }" @click="changeBtn(1)"
+                >阀门</button
+              >
+            </a-badge>
+            <a-badge :offset="[-5, 12]" :count="pumpList.length">
+              <button :class="{ btn: true, selected: activeButton == 2 }" @click="changeBtn(2)"
+                >水泵</button
+              >
+            </a-badge>
+          </div>
+          <div class="device-list" v-if="activeButton == 1">
+            <div class="device-list-item" v-for="(item, index) in valveList" :key="index">
+              <div class="list-item-title">
+                <div class="item-title">
+                  <img src="./images/device1.png" alt="" />
+                  <span>{{ item.name }}</span>
+                </div>
+                <div class="revoke" @click="revoke(item.id, index, 1)">撤销</div>
+              </div>
+              <div class="list-item-main">
+                <div>
+                  <div class="info">开度</div>
+                  <div class="text">
+                    <span>{{ item.oldVal + item.unit }}</span>
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span>{{ item.value + item.unit }}</span>
+                  </div>
+                </div>
+                <div></div>
+              </div>
+            </div>
+            <a-empty style="margin-top: 100px" v-if="valveList.length == 0">
+              <template #description> <span style="color: white">暂无数据</span></template>
+            </a-empty>
+          </div>
+          <div class="device-list" v-if="activeButton == 2">
+            <div class="device-list-item" v-for="(item, index) in pumpList" :key="index">
+              <div class="list-item-title">
+                <div class="item-title">
+                  <img src="./images/device2.png" alt="" />
+                  <span>{{ item.name }}</span>
+                </div>
+                <div class="revoke" @click="revoke(item.id, index, 2)">撤销</div>
+              </div>
+              <div class="list-item-main">
+                <div>
+                  <div class="info">频率</div>
+                  <div class="text">
+                    <span>{{ item.oldVal + item.unit }}</span>
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span>{{ item.value + item.unit }}</span>
+                  </div>
+                </div>
+                <div>
+                  <div class="info">开关</div>
+                  <div class="text">
+                    <span>{{ item.opened ? '开' : '关' }}</span>
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span>{{ item.open == 1 ? '开' : '关' }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <a-empty style="margin-top: 100px" v-if="pumpList.length == 0">
+              <template #description> <span style="color: white">暂无数据</span></template>
+            </a-empty>
+          </div>
+          <div style="width: 100%; height: 100px"></div>
+          <div class="button-box">
+            <button class="cancel" @click="visible1 = false">取消</button>
+            <a-popconfirm
+              title="此操作将提交以上修改内容"
+              ok-text="确定"
+              cancel-text="取消"
+              placement="bottomRight"
+              @confirm="submitChange">
+              <button class="execute">执行</button>
+            </a-popconfirm>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { Modal, message } from 'ant-design-vue';
+
+  import deviceInfo from './deviceInfo.vue';
+  import deviceLine from './deviceLine.vue';
+  import deviceItem from './deviceItem.vue';
+  import planTab from './component/planTab.vue';
+  import logTab from './component/logTab.vue';
+  import { linePosition, device1, device2, device3, device4 } from './device';
+  // 网络请求
+  import { http } from '/nerv-lib/util/http';
+  import { waterSys } from '/@/api/waterSystem';
+  // 全局变量
+  import { items } from '/@/store/item';
+
+  // 初始化 ===========================================================================================
+
+  const state = items();
+  onMounted(() => {
+    // 获得所有设备状态
+    getAllDevice();
+  });
+  const deviceState = 1;
+
+  // 计划与日志 抽屉业务 =========================================================================================
+
+  // 计划与日志
+  const visible = ref(false);
+  // 当前选中的tab
+  const activeKey = ref('1');
+
+  // 执行 抽屉业务 =========================================================================================
+
+  // 执行
+  const visible1 = ref(false);
+  // 当前选中的tab
+  const activeKey1 = '1';
+  // 当前选中的设备类型 阀门=1/水泵=2
+  const activeButton = ref(1);
+  // 切换设备类型
+  const changeBtn = (key: number) => {
+    activeButton.value = key;
+  };
+  // 当前修改的水泵数据
+  const pumpList = ref<any>([]);
+  // 当前修改的水阀数据
+  const valveList = ref<any>([]);
+
+  // 打开右侧抽屉
+  const openDrawer1 = () => {
+    valveList.value = device2.value.filter((item: any) => {
+      return item.edited;
+    });
+    pumpList.value = device4.value.filter((item: any) => {
+      return item.edited;
+    });
+    if (valveList.value.length || pumpList.value.length) {
+      visible1.value = true;
+    } else {
+      message.info('未产生任何修改');
+    }
+  };
+  // 右侧抽屉 - 撤回
+  const revoke = (id: any, index: number, type: number) => {
+    if (type == 1) {
+      valveList.value.splice(index, 1);
+      device2.value.forEach((item: any) => {
+        if (item.id == id) {
+          item.value = item.oldVal;
+          item.edited = false;
+        }
+      });
+    } else if (type == 2) {
+      pumpList.value.splice(index, 1);
+      device4.value.forEach((item: any) => {
+        if (item.id == id) {
+          item.value = item.oldVal;
+          item.open = item.opened;
+          item.edited = false;
+        }
+      });
+    }
+  };
+  const submitChange = () => {
+    let valveList = [];
+    device2.value.forEach((item: any) => {
+      if (item.edited) {
+        valveList.push({
+          deviceGroup: item.id,
+          openPercent: item.value,
+        });
+      }
+    });
+    let pumpList = [];
+    device4.value.forEach((item: any) => {
+      if (item.edited) {
+        pumpList.push({
+          deviceGroup: item.id,
+          frequency: item.value,
+          switchStatus: +item.open,
+        });
+      }
+    });
+    state.setLoading(true);
+    http
+      .post(waterSys.submitList, {
+        projectId: state.projectId,
+        siteId: state.siteId,
+        valveList,
+        pumpList,
+      })
+      .then((res) => {
+        let data = res.data;
+        state.setLoading(false);
+        // 修改请求发送了，但操作时产生了失败结果
+        if (res.retcode != 0) {
+          // 直接提示并跳出
+          return message.warning(res.msg);
+        }
+        // 所有修改均生效
+        if (data.allSucceed) {
+          message.success('修改完成');
+          // allSucceed不为true，则至少有一条数据修改失败
+        } else {
+          message.info(`${data.successList.length}条修改成功，${data.failList.length}条修改失败`);
+        }
+        // 将所有已修改状态的数据还原
+        resetEdit();
+        visible1.value = false;
+        getAllDevice();
+      });
+  };
+
+  const resetEdit = () => {
+    device2.value.forEach((item) => {
+      item.edited = false;
+    });
+    device4.value.forEach((item) => {
+      item.edited = false;
+    });
+  };
+
+  // 设备数据业务 ==========================================================================================
+
+  // 当其中一个tab产生了数据修改，可以调用该方法重置所有tab
+  const resetDrawer = () => {
+    try {
+      // tab1重置
+      tabs1Ref.value.reset();
+    } catch {}
+    try {
+      // tab2重置
+      tabs2Ref.value.reset();
+    } catch {}
+  };
+  // 抽屉tab1组件的引用
+  const tabs1Ref = ref();
+  // 抽屉tab2组件的引用
+  const tabs2Ref = ref();
+  // 撤销所有修改
+  const resetAll = () => {
+    Modal.confirm({
+      title: '提示信息',
+      content: '该操作将还原已编辑内容',
+      onOk() {
+        // 水阀
+        device2.value.forEach((item: any) => {
+          if (item.edited) {
+            item.value = item.oldVal;
+            item.edited = false;
+          }
+        });
+        // 水泵 水泵包含
+        device4.value.forEach((item: any) => {
+          if (item.edited) {
+            item.value = item.oldVal;
+            item.open = item.opened;
+            item.edited = false;
+          }
+        });
+      },
+      onCancel() {},
+    });
+  };
+  // 获得所有设备状态
+  const getAllDevice = () => {
+    getDevice(1);
+    getDevice(2);
+    getDevice(3);
+    getDevice(4);
+  };
+  /**
+   * 获取一个设备类型的数据
+   * @param type 污水池=1/阀门=2/集水池=3/水泵=4
+   */
+  const getDevice = (type: number) => {
+    // 请求地址
+    let url = '';
+    if (type == 1) {
+      url = waterSys.getPool1;
+    } else if (type == 2) {
+      url = waterSys.getValve;
+    } else if (type == 3) {
+      url = waterSys.getPool2;
+    } else if (type == 4) {
+      url = waterSys.getPump;
+    }
+    http
+      .get(url, {
+        projectId: state.projectId,
+        siteId: state.siteId,
+      })
+      .then((res) => {
+        let data = res.data;
+        // 污水池数据
+        if (type == 1) {
+          device1.value.forEach((item: any, index: number) => {
+            let result = data[index];
+            // 污水池名称
+            item.name = result.deviceInfoName;
+            // 污水池容量
+            item.value = result.record.capacity ? result.record.capacity : '--';
+            // 单位
+            item.unit = result.record.capacityUnit ? result.record.capacityUnit : '';
+          });
+        }
+        // 阀门数据
+        if (type == 2) {
+          device2.value.forEach((item: any, index: number) => {
+            let result = data[index];
+            // 阀门名称
+            item.name = result.deviceGroupName;
+            // 阀门ID
+            item.id = result.deviceGroup;
+            // 编辑状态重置
+            item.edited = false;
+            // 设备状态（是否正常）
+            item.state = result.record.runStatus.value != null ? result.record.runStatus.value : -1;
+            // 开度-新值
+            item.value = result.record.openPercent ? result.record.openPercent : 0;
+            // 开度-旧值（用于判断旧值是否被修改）
+            item.oldVal = result.record.openPercent ? result.record.openPercent : null;
+            // 单位
+            item.unit = result.record.openPercentUnit ? result.record.openPercentUnit : '';
+          });
+        }
+        // 集水池数据
+        if (type == 3) {
+          device3.value.forEach((item: any, index: number) => {
+            let result = data[index];
+            // 集水池名称
+            item.name = result.deviceInfoName;
+            // 集水池容量
+            item.value = result.record.capacity ? result.record.capacity : '--';
+            // 单位
+            item.unit = result.record.capacityUnit ? result.record.capacityUnit : '';
+          });
+        }
+        // 水泵数据
+        if (type == 4) {
+          device4.value.forEach((item: any, index: number) => {
+            let result = data[index];
+            // 水泵名称
+            item.name = result.deviceGroupName;
+            // 水泵ID
+            item.id = result.deviceGroup;
+            // 编辑状态重置
+            item.edited = false;
+            // 水泵的开启状态-新值
+            item.open = result.record.switchStatus.value == 1 ? true : false;
+            // 水泵的开启状态-旧值（用于判断是否被修改）
+            item.opened = result.record.switchStatus.value == 1 ? true : false;
+            // 设备状态（是否正常）
+            item.state = result.record.runStatus.value != null ? result.record.runStatus.value : -1;
+            // 频率-新值
+            item.value = result.record.frequency ? result.record.frequency : 0;
+            // 频率-旧值（用于判断是否被修改）
+            item.oldVal = result.record.frequency ? result.record.frequency : null;
+            // 单位
+            item.unit = result.record.frequencyUnit ? result.record.frequencyUnit : '';
+          });
+        }
+      });
+  };
+</script>
+<style lang="less" scoped>
+  .main {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background: linear-gradient(to bottom, rgb(35, 102, 165), rgb(1, 19, 81));
+    // 图例区域
+    .map {
+      width: 85vw;
+      height: 38vw;
+      position: relative;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      // 右侧 市政管道
+      .pipe {
+        width: 120px;
+        height: 120px;
+        position: absolute;
+        text-align: center;
+        left: 92%;
+        top: 40%;
+        z-index: 3;
+        transform: translateY(-60px);
+        img {
+          height: 100%;
+        }
+        div {
+          width: inherit;
+          color: white;
+          position: absolute;
+          top: -1.5em;
+          font-size: 16px;
+        }
+      }
+    }
+    // 右下角按钮
+    .buttons {
+      position: absolute;
+      right: 15px;
+      bottom: 15px;
+      display: flex;
+      gap: 15px;
+      height: 40px;
+      > button {
+        height: 40px;
+      }
+    }
+    .right-button {
+      height: 25px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 10px;
+      margin: auto;
+      display: flex;
+      z-index: 99;
+      gap: 10px;
+      color: #0dffff;
+      > img {
+        width: 25px;
+        height: 25px;
+        border-radius: 2px;
+        vertical-align: middle;
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+    .drawer-item {
+      width: 100px;
+      height: 100px;
+      border: 2px solid red;
+    }
+  }
+  // 抽屉顶部tab按钮样式
+  :deep(.ant-tabs-tab-btn) {
+    color: white;
+  }
+  .btn {
+    width: 92px;
+    height: 40px;
+    border-radius: 4px;
+    opacity: 1;
+    margin-top: 10px;
+    margin-left: 15px;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 1;
+    border: 1px solid rgba(207, 212, 219, 1);
+    line-height: 20.27px;
+    color: white;
+    text-align: center;
+    vertical-align: top;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .selected {
+    background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
+    color: rgba(0, 61, 90, 1);
+    border: 1px solid white;
+  }
+
+  .btn:hover {
+    background-color: rgba(207, 212, 219, 1);
+  }
+
+  .btn:active {
+    background-color: rgba(102, 102, 102, 1);
+    color: white;
+  }
+  .device-list {
+    margin-left: 15px;
+    margin-top: 15px;
+    width: 100%;
+    height: auto;
+    display: flex;
+    gap: 15px;
+    flex-direction: column;
+    .device-list-item {
+      width: calc(100% - 15px);
+      box-sizing: border-box;
+      padding: 10px;
+      border: 2px solid #03407e;
+      border-radius: 4px;
+      background: rgba(0, 177, 255, 0.2);
+      display: flex;
+      gap: 10px;
+      flex-direction: column;
+      .list-item-title {
+        color: white;
+        display: flex;
+        justify-content: space-between;
+        .item-title {
+          img {
+            width: 25px;
+          }
+          span {
+            margin-left: 10px;
+            font-size: 16px;
+          }
+        }
+        .revoke {
+          text-align: center;
+          border: none;
+          border-radius: 4px;
+          padding: 5px 15px;
+          background: linear-gradient(
+            180deg,
+            rgba(255, 187, 0, 1) 0%,
+            rgba(255, 112, 3, 1) 91.21%,
+            rgba(255, 129, 3, 1) 100%
+          );
+          cursor: pointer;
+        }
+      }
+      .list-item-main {
+        display: flex;
+        font-size: 13px;
+        > div {
+          flex: 1;
+          display: flex;
+          gap: 8px;
+          > .info {
+            text-align: center;
+            width: 6em;
+            height: 2.5em;
+            line-height: 2.5em;
+            border-radius: 4px;
+            color: white;
+            background: linear-gradient(
+              180deg,
+              rgba(86, 221, 253, 1) 0%,
+              rgba(25, 176, 255, 1) 100%
+            );
+          }
+          > .text {
+            :first-child {
+              color: white;
+              line-height: 2.5em;
+            }
+            img {
+              padding: 0 5px;
+            }
+            :last-child {
+              line-height: 2.5em;
+              color: red;
+            }
+          }
+        }
+      }
+    }
+  }
+  .button-box {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    height: 60px;
+    position: absolute;
+    background-color: transparent;
+    text-align: right;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .execute,
+    .cancel {
+      margin-right: 10px;
+      width: 74px;
+      height: 40px;
+      opacity: 1;
+      cursor: pointer;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 400;
+      border: 0;
+      margin-left: 10px;
+    }
+    .execute {
+      background: rgb(67, 136, 251);
+      color: white;
+    }
+    .cancel {
+      background: white;
+      color: black;
+    }
+  }
+</style>