From 1d4b76492d93365763692c9b258ad903e82b589b Mon Sep 17 00:00:00 2001
From: 28723 <2822784518@qq.com>
Date: Mon, 8 Jul 2024 09:48:44 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E7=A2=B3=E6=8E=92=E5=9B=A0=E5=AD=90?=
 =?UTF-8?q?=E5=BA=93=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/carbonEmissionFactorLibrary.ts    |  12 +
 .../src/router/carbonEmissionManage.ts        |  50 ++
 .../carbonEmissionFactorLibrary/config.ts     | 229 +++++++
 .../carbonEmissionFactorLibrary/index.vue     | 620 ++++++++++++++++++
 .../carbonEmissionFactorLibrary/mock.ts       |  45 ++
 .../carbonEmissionStatistics/config.ts        | 105 +++
 .../carbonEmissionStatistics/index.vue        |  18 +
 .../carbonEmissionStatistics/mock.json        | 506 ++++++++++++++
 hx-ai-intelligent/vite.config.ts              |   4 +
 9 files changed, 1589 insertions(+)
 create mode 100644 hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
 create mode 100644 hx-ai-intelligent/src/router/carbonEmissionManage.ts
 create mode 100644 hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/config.ts
 create mode 100644 hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
 create mode 100644 hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/mock.ts
 create mode 100644 hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/config.ts
 create mode 100644 hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
 create mode 100644 hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/mock.json

diff --git a/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts b/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
new file mode 100644
index 0000000..d3d3043
--- /dev/null
+++ b/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
@@ -0,0 +1,12 @@
+export enum carbonEmissionFactorLibrary {
+  getTableList = '/carbon/emission/factor/queryCarbonFactorPage',
+  addNewData = '/carbon/emission/factor/creatOrUpdate',
+  editUser = '/carbon-smart/api/user/edit',
+  frozen = '/carbon-smart/api/user/frozen',
+  resetPwd = '/carbon-smart/api/user/resetPwd',
+  del = '/carbon-smart/api/user/del',
+  batchDel = '/carbon-smart/api/user/batchDel',
+  getCarbonFactorTree = '/carbon/emission/type/getCarbonFactorTree',
+  queryDeptTree = '/carbon-smart/api/user/queryDeptTree',
+  queryUserPerList = '/carbon-smart/api/user/queryUserPerList',
+}
diff --git a/hx-ai-intelligent/src/router/carbonEmissionManage.ts b/hx-ai-intelligent/src/router/carbonEmissionManage.ts
new file mode 100644
index 0000000..8f0e5fe
--- /dev/null
+++ b/hx-ai-intelligent/src/router/carbonEmissionManage.ts
@@ -0,0 +1,50 @@
+const Base = () => import('/nerv-lib/saas/view/system/layout/content.vue');
+const equipment = {
+  path: '/carbonEmissionManage',
+  name: 'CarbonEmissionManage',
+  meta: { title: '碳排管理', icon: 'shebeiguanli', index: 1 },
+  redirect: { name: 'CarbonEmissionStatistics' },
+  children: [
+    {
+      path: 'carbonEmissionStatistics',
+      name: 'CarbonEmissionStatistics',
+      meta: { title: '碳排统计', hideChildren: true, icon: 'shebeiguanli' },
+      component: Base,
+      redirect: { name: 'CarbonEmissionStatisticsIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'CarbonEmissionStatisticsIndex',
+          // component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
+          component: () => import('/@/view/carbonEmissionManage/carbonEmissionStatistics/index.vue'),
+          meta: {
+            title: '碳排统计',
+            keepAlive: true,
+            // backApi: [],
+          },
+        },
+      ],
+    },
+    {
+      path: 'carbonEmissionFactorLibrary',
+      name: 'CarbonEmissionFactorLibrary',
+      meta: { title: '碳排因子库', hideChildren: true, icon: 'shebeiguanli' },
+      component: Base,
+      redirect: { name: 'CarbonEmissionFactorLibraryIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'CarbonEmissionFactorLibraryIndex',
+          // component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
+          component: () => import('/@/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue'),
+          meta: {
+            title: '碳排因子库',
+            keepAlive: true,
+            // backApi: [],
+          },
+        },
+      ],
+    },
+  ],
+};
+export default equipment;
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/config.ts b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/config.ts
new file mode 100644
index 0000000..a8e2083
--- /dev/null
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/config.ts
@@ -0,0 +1,229 @@
+import { ref } from 'vue';
+import { http } from '/nerv-lib/util';
+import { origanizemanage } from '/@/api/origanizemanage';
+export const formConfig = (disabled) => {
+  return ref([
+    {
+      field: 'field111',
+      component: 'NsChildForm',
+      componentProps: {
+        schemas: [
+          {
+            label: '排放源',
+            field: 'accountNo',
+            component: 'NsInput',
+            componentProps: {
+              placeholder: '请输入排放源',
+              maxLength: 20,
+              disabled,
+            },
+            rules: [
+              {
+                required: true,
+                message: '请输入排放源',
+              },
+            ],
+          },
+          {
+            field: 'userStatus',
+            label: '排放气体',
+            component: 'NsSelect',
+            componentProps: {
+              allowClear: true,
+              placeholder: '请选择排放气体',
+              options: [
+                {
+                  label: '正常',
+                  value: 0,
+                },
+                {
+                  label: '冻结',
+                  value: 1,
+                },
+              ],
+            },
+            rules: [
+              {
+                required: true,
+                message: '请选择排放气体',
+              },
+            ],
+          },
+          {
+            field: 'userStatus',
+            label: '排放环节',
+            component: 'NsSelect',
+            componentProps: {
+              allowClear: true,
+              placeholder: '请选择排放环节',
+              options: [
+                {
+                  label: '正常',
+                  value: 0,
+                },
+                {
+                  label: '冻结',
+                  value: 1,
+                },
+              ],
+            },
+          },
+          {
+            label: '排放因子',
+            field: 'accountNo',
+            component: 'NsInput',
+            componentProps: {
+              placeholder: '请输入排放因子值',
+              maxLength: 20,
+              disabled,
+            },
+            rules: [
+              {
+                required: true,
+                message: '请输入排放因子值',
+              },
+            ],
+          },
+          {
+            field: 'userStatus',
+            label: '碳排前缀',
+            component: 'NsSelect',
+            componentProps: {
+              allowClear: true,
+              placeholder: '请选择碳排前缀',
+              options: [
+                {
+                  label: '正常',
+                  value: 0,
+                },
+                {
+                  label: '冻结',
+                  value: 1,
+                },
+              ],
+            },
+            rules: [
+              {
+                required: true,
+                message: '请选择碳排前缀',
+              },
+            ],
+          },
+          {
+            label: '碳排后缀',
+            field: 'accountNo',
+            component: 'NsInput',
+            componentProps: {
+              placeholder: '请输入碳排后缀',
+              maxLength: 20,
+              disabled,
+            },
+            rules: [
+              {
+                required: true,
+                message: '请输入碳排后缀',
+              },
+            ],
+          },
+          {
+            label: '已引用数',
+            field: 'accountNo',
+            component: 'NsInput',
+            componentProps: {
+              disabled: true,
+              maxLength: 20,
+            },
+          },
+          {
+            label: '参考文献',
+            field: 'accountNo',
+            component: 'NsTextarea',
+            componentProps: {
+              placeholder: '请输入参考文献',
+              maxLength: 20,
+              disabled,
+            },
+          },
+        ],
+      },
+    },
+  ]);
+};
+const options = ref([]);
+
+const getUserPerList = (transform, params = {}) => {
+  return http.post(origanizemanage.queryUserPerList, { ...params }).then((res) => {
+    return res.data?.map((item) => {
+      item = { ...item, ...transform(item) };
+      return item;
+    });
+  });
+};
+export const formConfig2 = (casData: any) => {
+  return ref([
+    {
+      field: 'information',
+      component: 'NsCascader',
+      componentProps: {
+        placeholder: '请选择',
+        displayRender: ({ labels, selectedOptions }: any) => {
+          console.log(labels, selectedOptions);
+
+          casData.value = selectedOptions.map(({ label, value }) => {
+            return { label, value };
+          });
+          return labels.join('/');
+        },
+        loadData: (selectedOptions, options) => {
+          console.log(selectedOptions, options, 'selectedOptions, options');
+
+          const targetOption = selectedOptions[selectedOptions.length - 1];
+          let transForm, params;
+          // load options lazily
+          if (!selectedOptions.length) {
+            transForm = (data) => {
+              data['label'] = data.orgName;
+              data['value'] = data.orgId;
+              data['isLeaf'] = false;
+              data['level'] = 1;
+              return data;
+            };
+            getUserPerList(transForm).then((res) => {
+              options.value = [...res];
+            });
+          }
+          const id = targetOption?.value;
+          const level = targetOption?.level;
+          if (targetOption) {
+            targetOption.loading = true;
+          }
+
+          if (level === 1) {
+            transForm = (data) => {
+              data['label'] = data.deptName;
+              data['value'] = data.deptId;
+              data['isLeaf'] = false;
+              data['level'] = 2;
+              return data;
+            };
+            params = { orgId: id };
+          } else if (level === 2) {
+            transForm = (data) => {
+              data['label'] = data.roleName;
+              data['value'] = data.roleId;
+              data['level'] = 3;
+              return data;
+            };
+            params = { deptId: id };
+          }
+          if (targetOption) {
+            getUserPerList(transForm, { ...params }).then((res) => {
+              targetOption.loading = false;
+              targetOption.children = [...res];
+            });
+          }
+        },
+      },
+    },
+  ]);
+};
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
new file mode 100644
index 0000000..11a8100
--- /dev/null
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
@@ -0,0 +1,620 @@
+<!-- @format -->
+
+<template>
+  <div class="main">
+    <div class="left">
+      <div class="top">
+        <a-form style="width: 100%;margin: 0 auto;">
+          <div class="ns-form-title"><span>排放分类</span></div>
+          <div style="padding: 0 16px !important;width: 100%;">
+            <a-row>
+              <a-col :span="24" style="margin-bottom: 16px;">
+                <a-input-search
+                  v-model:value="selectTreeDataValue"
+                  placeholder="请输入关键词"
+                  @search="onSearchTreeData"
+                />
+              </a-col>
+            </a-row>
+          </div>
+        </a-form>
+        <a-tree
+          class="draggable-tree"
+          style="padding: 0 16px !important;"
+          draggable
+          show-line
+          checkable
+          block-node
+          :tree-data="gData"
+          @dragenter="onDragEnter"
+          @drop="onDrop"
+          :expanded-keys="expandedKeys"
+          :auto-expand-parent="autoExpandParent"
+          @expand="onExpand"
+        >
+           <template #title="{ emissionName }">
+            <span v-if="emissionName && selectTreeDataValue && emissionName.indexOf(selectTreeDataValue) > -1">
+              {{ emissionName.substring(0, emissionName.indexOf(selectTreeDataValue)) }}
+              <span style="color: #f50">{{ selectTreeDataValue }}</span>
+              {{ emissionName.substring(emissionName.indexOf(selectTreeDataValue) + selectTreeDataValue.length) }}
+            </span>
+            <span v-else>{{ emissionName }}</span>
+          </template>
+        </a-tree>
+        <a-popover placement="rightTop" trigger="focus">
+          <template #content>
+            <div style="display: flex;flex-direction: column;">
+              <a-button type="text">编辑</a-button>
+              <a-button type="text">新增子节点</a-button>
+              <a-button type="text">删除</a-button>
+            </div>
+          </template>
+          <MoreOutlined style="position: absolute;right: 0;top: 16%;font-size: 25px;cursor: pointer;" />
+        </a-popover>
+        <div class="addTreeNode">
+          <a-button type="primary" style="width:100%;" @click="addTreeNodeData">新增</a-button>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" :scroll="{ x: 2000}"/>
+    </div>
+    <!-- 新增树节点 -->
+    <ns-modal :visible="treeNodeAdd" :title="operationTree" @ok="handleOk" @cancel="handleCancel">
+      <ns-input
+        v-model:value="latitude1"
+        class="input"
+        placeholder="请输入排放类型"
+      />
+    </ns-modal>
+    <!-- 新增数据库数据 -->
+    <a-drawer
+      :width="500"
+      :visible="visible"
+      :body-style="{ paddingBottom: '80px' }"
+      :footer-style="{ textAlign: 'right' }"
+      destroyOnClose
+      @close="onClose">
+      <ns-form
+        ref="formRef"
+        :schemas="formSchema"
+        :model="formData"
+        class="form"
+        :wrapperCol="{ span: 20 }"
+        formLayout="vertical" />
+      <template #footer>
+        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
+        <a-button type="primary" @click="onEdit">确定</a-button>
+      </template>
+    </a-drawer>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { MoreOutlined } from '@ant-design/icons-vue';
+  import { computed, createVNode, defineComponent, reactive, ref, watchEffect,watch } from 'vue';
+  import { http } from '/nerv-lib/util/http';
+  import { NsMessage, NsModal } from '/nerv-lib/component';
+  import { formConfig, formConfig2 } from './config';
+  import { carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
+  import type {
+    AntTreeNodeDragEnterEvent,
+    AntTreeNodeDropEvent,
+    TreeProps,
+  } from 'ant-design-vue/es/tree';
+import { log } from 'node:console';
+
+  defineOptions({ name: 'OrderListIndex' });
+  const selectTreeDataValue = ref<string>('');
+  const mainRef = ref();
+  const data = reactive({});
+  let formData = ref({});
+  const formRef = ref();
+  const visible = ref(false);
+  const searchValue = ref<string>('');
+  const searchValue2 = ref<string>('');
+  const disabled = ref(false);
+  const treeNodeAdd = ref<boolean>(false);
+  const operationTree = ref<string>('新增');
+
+  const opMap: any = ref({
+    type: 'add',
+    fuc: () => {},
+    record: {},
+  });
+  watchEffect(() => {
+    disabled.value = opMap.value.type === 'edit';
+  });
+  const formSchema = formConfig(disabled);
+  const casData = ref([]);
+  const treeData = ref([]);
+  const userAuthList = ref([]);
+  const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId;
+  const dynamicDisabled = computed(() => {
+    return formRef.value?.validateResult && userAuthList.value?.length;
+  });
+  const fetch = (api, params = { orgId }) => {
+    return http.post(api, params);
+  };
+
+  // 树结构
+  const x = 3;
+  const y = 2;
+  const z = 1;
+  const genData: TreeProps['treeData'] = [];
+
+  const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
+    const preKey = _preKey || '0';
+    const tns = _tns || genData;
+
+    const children = [];
+    for (let i = 0; i < x; i++) {
+      const key = `${preKey}-${i}`;
+      tns.push({ title: key, key });
+      if (i < y) {
+        children.push(key);
+      }
+    }
+    if (_level < 0) {
+      return tns;
+    }
+    const level = _level - 1;
+    children.forEach((key, index) => {
+      tns[index].children = [];
+      return generateData(level, key, tns[index].children);
+    });
+  };
+  generateData(z);
+  type TreeDataItem = TreeProps['treeData'][number];
+  const gData = ref<TreeProps['treeData']>(genData);
+  const onDragEnter = (info: AntTreeNodeDragEnterEvent) => {
+    console.log(info);
+    // expandedKeys 需要展开时
+    // expandedKeys.value = info.expandedKeys;
+  };
+
+  const onDrop = (info: AntTreeNodeDropEvent) => {
+    console.log(info);
+    const dropKey = info.node.key;
+    const dragKey = info.dragNode.key;
+    const dropPos = info.node.pos.split('-');
+    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
+    const loop = (data: TreeProps['treeData'], key: string | number, callback: any) => {
+      data.forEach((item, index) => {
+        if (item.key === key) {
+          return callback(item, index, data);
+        }
+        if (item.children) {
+          return loop(item.children, key, callback);
+        }
+      });
+    };
+    const data = [...gData.value];
+
+    // Find dragObject
+    let dragObj: TreeDataItem;
+    loop(data, dragKey, (item: TreeDataItem, index: number, arr: TreeProps['treeData']) => {
+      arr.splice(index, 1);
+      dragObj = item;
+    });
+    if (!info.dropToGap) {
+      // Drop on the content
+      loop(data, dropKey, (item: TreeDataItem) => {
+        item.children = item.children || [];
+        /// where to insert 示例添加到头部，可以是随意位置
+        item.children.unshift(dragObj);
+      });
+    } else if (
+      (info.node.children || []).length > 0 && // Has children
+      info.node.expanded && // Is expanded
+      dropPosition === 1 // On the bottom gap
+    ) {
+      loop(data, dropKey, (item: TreeDataItem) => {
+        item.children = item.children || [];
+        // where to insert 示例添加到头部，可以是随意位置
+        item.children.unshift(dragObj);
+      });
+    } else {
+      let ar: TreeProps['treeData'] = [];
+      let i = 0;
+      loop(data, dropKey, (_item: TreeDataItem, index: number, arr: TreeProps['treeData']) => {
+        ar = arr;
+        i = index;
+      });
+      if (dropPosition === -1) {
+        ar.splice(i, 0, dragObj);
+      } else {
+        ar.splice(i + 1, 0, dragObj);
+      }
+    }
+    gData.value = data;
+  };
+  const dataList: TreeProps['treeData'] = [];
+  const generateList = (data: TreeProps['treeData']) => {
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i];
+      const key = node.key;
+      dataList.push({ key, title: key });
+      if (node.children) {
+        generateList(node.children);
+      }
+    }
+  };
+  generateList(genData);
+
+  const getParentKey = (
+    key: string | number,
+    tree: TreeProps['treeData'],
+  ): string | number | undefined => {
+    let parentKey;
+    for (let i = 0; i < tree.length; i++) {
+      const node = tree[i];
+      if (node.children) {
+        if (node.children.some(item => item.key === key)) {
+          parentKey = node.key;
+        } else if (getParentKey(key, node.children)) {
+          parentKey = getParentKey(key, node.children);
+        }
+      }
+    }
+    return parentKey;
+  };
+  const expandedKeys = ref<(string | number)[]>([]);
+  const autoExpandParent = ref<boolean>(true);
+
+  const onExpand = (keys: string[]) => {
+    expandedKeys.value = keys;
+    autoExpandParent.value = false;
+  };
+
+  watch(selectTreeDataValue, value => {
+    const expanded = dataList
+      .map((item: TreeProps['treeData'][number]) => {
+        if (item.title.indexOf(value) > -1) {
+          return getParentKey(item.key, gData.value);
+        }
+        return null;
+      })
+      .filter((item, i, self) => item && self.indexOf(item) === i);
+    expandedKeys.value = expanded;
+    selectTreeDataValue.value = value;
+    autoExpandParent.value = true;
+  });
+  // 筛选树结构中的数据
+  const onSearchTreeData = (selectTreeDataValue: string) => {
+    console.log('use value', selectTreeDataValue);
+    console.log('or use this.value', value.value);
+  };
+  // 点击新增树节点
+  const addTreeNodeData = () => {
+    treeNodeAdd.value = true;
+  };
+  const handleOk = (e: MouseEvent) => {
+    console.log(e);
+    treeNodeAdd.value = false;
+  };
+  const handleCancel = () => {
+    treeNodeAdd.value = false;
+  };
+  // 企业树
+  const getOrgTree = (params?) => {
+    fetch(carbonEmissionFactorLibrary.getCarbonFactorTree, params).then((res) => {
+      gData.value = res
+    });
+  };
+  getOrgTree();
+
+  const onSearch = () => {
+    console.log(searchValue.value);
+    getOrgTree({ orgName: searchValue.value, orgId });
+  };
+
+  const tableFetch = (params) => {
+    console.log(params, 'sdfasfasdfasdfasdf');
+
+    tableConfig.value.params = {
+      ...mainRef.value.params,
+      ...params,
+    };
+
+    setTimeout(() => {
+      mainRef.value?.nsTableRef.reload();
+    }, 100);
+  };
+
+  const handleSelect = (selectedKeys: any, info: any) => {
+    fetch(carbonEmissionFactorLibrary.queryDeptTree, { orgId: info.node?.orgInfo.orgId }).then((res) => {
+      treeData2.value = res.data;
+    });
+    tableFetch({ orgId: info.node?.orgInfo.orgId });
+  };
+
+
+  const onClose = () => {
+    visible.value = false;
+    formData.value = {};
+    userAuthList.value.splice(0);
+  };
+
+  const onEdit = () => {
+    formRef.value?.triggerSubmit().then(() => {
+      console.log(formData.value, 'formData.value');
+      if (!userAuthList.value.length) {
+        NsMessage.error('请添加用户权限');
+        return;
+      }
+
+      opMap.value.fuc &&
+        opMap.value.fuc({ ...formData.value, userRoleList: userAuthList.value, orgId });
+    });
+  };
+
+  const tableConfig = ref({
+    title: '数据库',
+    api: carbonEmissionFactorLibrary.getTableList,
+    params: {
+      orgId,
+    },
+    headerActions: [
+      {
+        label: '新增',
+        name: 'userAdd',
+        type: 'primary',
+        handle: () => {
+          debugger
+          opMap.value.type = 'add';
+          setTimeout(() => {
+            formData.value = {
+              // orgName: JSON.parse(sessionStorage.getItem('userInfo')).orgName,
+            };
+            userAuthList.value.splice(0);
+          });
+          opMap.value.fuc = (formData: any) => {
+            return http.post(carbonEmissionFactorLibrary.addNewData, formData).then(() => {
+              mainRef.value?.nsTableRef.reload();
+              visible.value = false;
+              NsMessage.success('操作成功');
+            });
+          };
+          visible.value = true;
+        },
+      },
+      {
+        label: '导入',
+        type: 'primary',
+        name: 'userImport',
+        handle: () => {},
+      },
+      {
+        label: '导出',
+        type: 'primary',
+        name: 'userExports',
+      },
+      {
+        label: '批量删除',
+        type: 'primary',
+        name: 'userBatchDel',
+        dynamicDisabled: (data: any) => {
+          return data.list.length === 0;
+        },
+        confirm: true,
+        isReload: true,
+        isClearCheck: true,
+        api: carbonEmissionFactorLibrary.batchDel,
+        dynamicParams: { userIds: 'userId[]' },
+      },
+    ],
+    columns: [
+      {
+        title: 'id',
+        dataIndex: 'address',
+        customRender: (text: any) => {
+          return text.index + 1;
+        },
+      },
+      {
+        title: '排放源',
+        dataIndex: 'emissionSources',
+      },
+      {
+        title: '排放类型',
+        dataIndex: 'emissionType',
+      },
+      {
+        title: '排放气体',
+        dataIndex: 'emissionGas',
+      },
+      {
+        title: '排放环节',
+        dataIndex: 'emissionProcess',
+      },
+      {
+        title: '排放因子',
+        dataIndex: 'emissionFactors',
+      },
+      {
+        title: '排放因子单位',
+        dataIndex: 'emissionFactorUnits',
+      },
+      {
+        title: '数据来源',
+        dataIndex: 'dataSources',
+      },
+      {
+        title: '数据库',
+        dataIndex: 'carbonDatabase',
+      },
+      {
+        title: '参考文献',
+        dataIndex: 'reference',
+      },
+      {
+        title: '引用数量',
+        dataIndex: 'numberOfReferences',
+      },
+    ],
+    columnActions: {
+      title: '操作',
+      actions: [
+        {
+          label: '编辑',
+          name: 'userEdit',
+          handle: (record: any) => {
+            userAuthList.value.splice(0);
+            setTimeout(() => {
+              formData.value = record;
+              userAuthList.value.push(...record.userRoleInfos);
+            }, 10);
+            opMap.value.type = 'edit';
+            opMap.value.fuc = (formData: any) => {
+              return http.post(carbonEmissionFactorLibrary.editUser, formData).then(() => {
+                mainRef.value?.nsTableRef.reload();
+                visible.value = false;
+                NsMessage.success('操作成功');
+              });
+            };
+            visible.value = true;
+          },
+        },
+        {
+          label: '删除',
+          name: 'userDelete',
+          dynamicParams: 'userId',
+          confirm: true,
+          isReload: true,
+          api: carbonEmissionFactorLibrary.del,
+        },
+      ],
+    },
+
+    formConfig: {
+      schemas: [
+        {
+          field: 'emissionSources',
+          label: '排放源',
+          component: 'NsInput',
+          componentProps: {
+            placeholder: '请输入排放源',
+            maxLength: 30,
+          },
+        },
+        {
+          field: 'userStatus',
+          label: '排放环节',
+          component: 'NsSelect',
+          componentProps: {
+            allowClear: true,
+            placeholder: '请选择排放环节',
+            options: [
+              {
+                label: '正常',
+                value: 0,
+              },
+              {
+                label: '冻结',
+                value: 1,
+              },
+            ],
+          },
+        },
+        {
+          field: 'userStatus',
+          label: '排放气体',
+          component: 'NsSelect',
+          componentProps: {
+            allowClear: true,
+            placeholder: '请选择排放气体',
+            options: [
+              {
+                label: '正常',
+                value: 0,
+              },
+              {
+                label: '冻结',
+                value: 1,
+              },
+            ],
+          },
+        },
+        {
+          field: 'userStatus',
+          label: '数据库名称',
+          component: 'NsSelect',
+          componentProps: {
+            allowClear: true,
+            placeholder: '请选择数据库名称',
+            options: [
+              {
+                label: '正常',
+                value: 0,
+              },
+              {
+                label: '冻结',
+                value: 1,
+              },
+            ],
+          },
+        },
+        {
+          field: 'accountNo',
+          label: '文献关键字',
+          component: 'NsInput',
+          componentProps: {
+            placeholder: '请输入文献关键字',
+            maxLength: 30,
+          },
+        },
+      ],
+      params: {},
+    },
+    // pagination: { defaultPageSize: 10 },
+    rowKey: 'userId',
+  });
+</script>
+<style lang="less" scoped>
+  .main {
+    background-color: @ns-content-bg;
+    display: flex;
+  }
+  .left {
+    width: 300px;
+    // max-height: calc(100vh - 96px);
+    margin-right: @ns-gap;
+    min-width: fit-content;
+    > div {
+      border-radius: @ns-border-radius;
+      background-color: @white;
+      // box-shadow: @ns-content-box-shadow;
+      flex: 1;
+    }
+
+    display: flex;
+    flex-direction: column;
+    .top{
+      position: relative;
+      .addTreeNode{
+        width: 100%;
+        padding: 16px;
+        position: absolute;
+        bottom: 0;
+      }
+    }
+  }
+  .right {
+    flex: 1;
+    min-width: 0;
+  }
+  .top {
+    overflow: auto;
+    // height: 50%;
+    // border-bottom: 5px solid rgb(229, 235, 240);
+    // overflow-y: auto;
+  }
+  .ns-form-title{
+    font-weight: bold;
+    user-select: text;
+    padding: 16px;
+    margin-bottom: 16px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/mock.ts b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/mock.ts
new file mode 100644
index 0000000..76ff687
--- /dev/null
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/mock.ts
@@ -0,0 +1,45 @@
+import { ref } from 'vue';
+import { origanizemanage } from '/@/api/origanizemanage';
+import { http } from '/nerv-lib/saas';
+
+export const mockData = ref([
+  {
+    id: 3,
+    zhanghao: 'axb',
+    name: '张三',
+    sex: '男',
+    phone: '123456789',
+    email: '1234567889',
+    relation: '1',
+    role: '1',
+    status: '1',
+  },
+]);
+
+export const mockData2 = ref([
+  {
+    information: '铁路局1/产品部1/产品总监1',
+  },
+]);
+
+export const treeData = ref([
+  {
+    title: '铁路总局',
+    key: '0-0',
+    children: [
+      { title: '济阳站', key: '0-0-0' },
+      { title: '临沂站', key: '0-0-1' },
+    ],
+  },
+]);
+
+export const treeData2 = [
+  {
+    title: '全部',
+    key: '0-0',
+    children: [
+      { title: '产品部', key: '0-0-0' },
+      { title: '运维部', key: '0-0-1' },
+    ],
+  },
+];
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/config.ts b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/config.ts
new file mode 100644
index 0000000..ff75929
--- /dev/null
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/config.ts
@@ -0,0 +1,105 @@
+import { dateUtil } from '/nerv-lib/util/date-util';
+import data from './mock.json';
+export const tableConfig = {
+  title: '设备台账',
+  // api: '/carbon_emission/device/getDeviceList',
+  value: data.dataSource,
+  params: {
+    page: 0,
+    pageSize: 10,
+  },
+  rowSelection: null,
+  columns: [
+    {
+      title: '设备名称',
+      dataIndex: 'id',
+    },
+    {
+      title: '设备型号',
+      dataIndex: 'deviceCode',
+    },
+    {
+      title: 'SN码',
+      dataIndex: 'deviceName',
+      textNumber: 8,
+      textEllipsis: true,
+    },
+    {
+      title: '设备一级区域',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备二级区域',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备详细位置',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备规格',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备厂商纳税人识别号',
+      dataIndex: 'position',
+    },
+    {
+      title: '厂商联系人',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备描述',
+      dataIndex: 'position',
+    },
+    {
+      title: 'IP地址',
+      dataIndex: 'position',
+    },
+    {
+      title: '生产日期',
+      dataIndex: 'position',
+    },
+    {
+      title: '采购日期',
+      dataIndex: 'position',
+    },
+    {
+      title: '启用日期',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备成本（元）',
+      dataIndex: 'position',
+    },
+    {
+      title: '使用期限',
+      dataIndex: 'position',
+    },
+    {
+      title: '额定功率',
+      dataIndex: 'position',
+    },
+    {
+      title: '特殊参数',
+      dataIndex: 'position',
+    },
+  ],
+
+  formConfig: {
+    schemas: [
+      {
+        field: 'createTime',
+        label: '生产日期',
+        component: 'NsRangePicker',
+        fieldMap: ['queryStartDate', 'queryEndDate'],
+        componentProps: {
+          valueFormat: 'YYYY-MM-DD',
+        },
+      },
+    ],
+    params: {},
+  },
+  // pagination: { pageSizeOptions: false },
+  rowKey: 'uuid',
+};
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
new file mode 100644
index 0000000..4cb9985
--- /dev/null
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <a-tabs v-model:activeKey="activeKey">
+    <a-tab-pane key="1" tab="能耗统计">
+      <ns-view-list-table v-bind="tableConfig" />
+    </a-tab-pane>
+    <a-tab-pane key="2" tab="碳排统计" force-render>Content of Tab Pane 2</a-tab-pane>
+    <a-tab-pane key="3" tab="碳排速算">Content of Tab Pane 3</a-tab-pane>
+  </a-tabs>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { tableConfig } from './config';
+  defineOptions({
+    name: 'CarbonEmissionStatisticsIndex', // 与页面路由name一致缓存才可生效
+  });
+  const activeKey = ref('1');
+</script>
+
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/mock.json b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/mock.json
new file mode 100644
index 0000000..624bb36
--- /dev/null
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/mock.json
@@ -0,0 +1,506 @@
+{
+  "data":[
+      {
+        "title": "家居照明",
+        "key": "1",
+        "children": [
+          {
+            "title": "灯泡",
+            "key": "1-1",
+            "children": [
+              {
+                "title": "LED灯泡",
+                "key": "1-1-1",
+                "children": [
+                  {
+                    "title": "E27 LED灯泡",
+                    "key": "1-1-1-1",
+                    "attr": {
+                      "瓦特": "7W",
+                      "光通量": "500lm",
+                      "色温": "2700K"
+                    }
+                  },
+                  {
+                    "title": "E14 小灯泡",
+                    "key": "1-1-1-2",
+                    "attr": {
+                      "瓦特": "4W",
+                      "光通量": "250lm",
+                      "色温": "6500K"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "节能灯",
+                "key": "1-1-2",
+                "children": [
+                  {
+                    "title": "E27 节能灯泡",
+                    "key": "1-1-2-1",
+                    "attr": {
+                      "瓦特": "11W",
+                      "光通量": "800lm",
+                      "色温": "6500K"
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "title": "灯具",
+            "key": "1-2",
+            "children": [
+              {
+                "title": "吊灯",
+                "key": "1-2-1",
+                "children": [
+                  {
+                    "title": "水晶吊灯",
+                    "key": "1-2-1-1",
+                    "attr": {
+                      "尺寸": "Φ60cm",
+                      "适用面积": "15-20㎡"
+                    }
+                  },
+                  {
+                    "title": "现代简约吊灯",
+                    "key": "1-2-1-2",
+                    "attr": {
+                      "尺寸": "Φ52cm",
+                      "适用面积": "10-15㎡"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "台灯",
+                "key": "1-2-2",
+                "children": [
+                  {
+                    "title": "护眼台灯",
+                    "key": "1-2-2-1",
+                    "attr": {
+                      "瓦特": "18W",
+                      "调光调色": "是"
+                    }
+                  },
+                  {
+                    "title": "折叠臂台灯",
+                    "key": "1-2-2-2",
+                    "attr": {
+                      "瓦特": "14W",
+                      "调光调色": "否"
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "title": "开关插座",
+            "key": "1-3",
+            "children": [
+              {
+                "title": "智能开关",
+                "key": "1-3-1",
+                "children": [
+                  {
+                    "title": "触控式智能开关",
+                    "key": "1-3-1-1",
+                    "attr": {
+                      "控制方式": "触控/远程",
+                      "兼容性": "ZigBee/WiFi"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "插座",
+                "key": "1-3-2",
+                "children": [
+                  {
+                    "title": "多功能插座",
+                    "key": "1-3-2-1",
+                    "attr": {
+                      "插孔类型": "2/3插",
+                      "USB接口": "有"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },    
+    {
+      "title": "电梯",
+      "key": "3",
+      "children": [
+        {
+          "title": "扶梯",
+          "key": "301"
+        },
+        {
+          "title": "直梯",
+          "key": "302"
+        }
+      ]
+    },
+    {
+      "title": "冷源源",
+      "key": "4",
+      "children": [
+        {
+          "title": "通风及空调设备",
+          "key": "5",
+          "children": [
+            {
+              "title": "组合式空调机组",
+              "key": "501"
+            },
+            {
+              "title": "新风机组",
+              "key": "502"
+            },
+            {
+              "title": "精密空调",
+              "key": "503"
+            },
+            {
+              "title": "风机盘管",
+              "key": "504"
+            },
+            {
+              "title": "VAV",
+              "key": "505"
+            },
+            {
+              "title": "室外多联机",
+              "key": "506"
+            },
+            {
+              "title": "风幕机",
+              "key": "507"
+            },
+            {
+              "title": "球喷",
+              "key": "508"
+            },
+            {
+              "title": "送风机",
+              "key": "509"
+            },
+            {
+              "title": "排风机",
+              "key": "510"
+            },
+            {
+              "title": "排风兼排烟机",
+              "key": "511"
+            },
+            {
+              "title": "通风机",
+              "key": "512"
+            },
+            {
+              "title": "风阀",
+              "key": "513"
+            },
+            {
+              "title": "风柱式空调",
+              "key": "514"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "照明",
+      "key": "6",
+      "children": [
+        {
+          "title": "多功能传感器",
+          "key": "701"
+        },
+        {
+          "title": "照度传感器",
+          "key": "702"
+        },
+        {
+          "title": "噪声传感器",
+          "key": "703"
+        }
+      ]
+    }
+  ],
+  "dataSource":[
+    {
+      "id": "d4",
+      "isDel": "0",
+      "officesId": "84",
+      "deviceCode": "37430200143",
+      "deviceName": "地听测试电表",
+      "category": "1",
+      "type": "1001",
+      "energyCount": "1",
+      "serialNumber": "69",
+      "pidCode": null,
+      "brand": "",
+      "types": "",
+      "manufacturer": "elit non in",
+      "contacts": "ad reprehenderit",
+      "phonenumber": "34",
+      "position": "in esse commodo",
+      "activeState": "1",
+      "measurementDirection": "1",
+      "deviceMagnification": 62,
+      "deviceAccuracy": "89",
+      "frequency": "anim consequat irure",
+      "standardFrequency": "ut elit",
+      "deviceHead": "pariatur ex velit",
+      "constructor": "84566",
+      "voltageType": "cillum aliquip reprehenderit",
+      "pt": 61,
+      "ct": 64,
+      "communicationProtocol": "cupidatat nisi ea ad",
+      "ip": "",
+      "port": "",
+      "com": "",
+      "slaveAddress": "",
+      "dlt": "",
+      "conversionIdentifier": "48",
+      "multiplicationAdjustment": "1",
+      "accessMethod": "1",
+      "replacementFrequency": "0",
+      "dataDetail": "sit",
+      "insertTime": null,
+      "children": null,
+      "devicePointList": null,
+      "insertUser": null
+    },
+    {
+      "id": "d1",
+      "isDel": "0",
+      "officesId": "84",
+      "deviceCode": "37430200144",
+      "deviceName": "地听测试2",
+      "category": "1",
+      "type": "1001",
+      "energyCount": "1",
+      "serialNumber": "69",
+      "pidCode": null,
+      "brand": "",
+      "types": "",
+      "manufacturer": "elit non in",
+      "contacts": "ad reprehenderit",
+      "phonenumber": "34",
+      "position": "in esse commodo",
+      "activeState": "1",
+      "measurementDirection": "1",
+      "deviceMagnification": 62,
+      "deviceAccuracy": "89",
+      "frequency": "anim consequat irure",
+      "standardFrequency": "ut elit",
+      "deviceHead": "pariatur ex velit",
+      "constructor": "84566",
+      "voltageType": "cillum aliquip reprehenderit",
+      "pt": 61,
+      "ct": 64,
+      "communicationProtocol": "802",
+      "ip": "10.5.36.0",
+      "port": "6000",
+      "com": "",
+      "slaveAddress": "123测试",
+      "dlt": "",
+      "conversionIdentifier": "48",
+      "multiplicationAdjustment": "1",
+      "accessMethod": "1",
+      "replacementFrequency": "0",
+      "dataDetail": "sit",
+      "insertTime": "2024-02-28 11:26:58",
+      "children": null,
+      "devicePointList": null,
+      "insertUser": null
+    },
+    {
+      "id": "d2",
+      "isDel": "0",
+      "officesId": "84",
+      "deviceCode": "1235623",
+      "deviceName": "测试设备2",
+      "category": "1",
+      "type": "1001",
+      "energyCount": "是",
+      "serialNumber": "69",
+      "pidCode": null,
+      "brand": "",
+      "types": "",
+      "manufacturer": "elit non in",
+      "contacts": "ad reprehenderit",
+      "phonenumber": "34",
+      "position": "in esse commodo",
+      "activeState": "1",
+      "measurementDirection": "1",
+      "deviceMagnification": 62,
+      "deviceAccuracy": "89",
+      "frequency": "anim consequat irure",
+      "standardFrequency": "ut elit",
+      "deviceHead": "pariatur ex velit",
+      "constructor": null,
+      "voltageType": "cillum aliquip reprehenderit",
+      "pt": 61,
+      "ct": 64,
+      "communicationProtocol": "cupidatat nisi ea ad",
+      "ip": "",
+      "port": "",
+      "com": "",
+      "slaveAddress": "",
+      "dlt": "",
+      "conversionIdentifier": "48",
+      "multiplicationAdjustment": "1",
+      "accessMethod": "1",
+      "replacementFrequency": "0",
+      "dataDetail": "sit",
+      "insertTime": "2024-02-28 11:31:57",
+      "children": null,
+      "devicePointList": null,
+      "insertUser": null
+    },
+    {
+      "id": "d7",
+      "isDel": "0",
+      "officesId": "",
+      "deviceCode": "0213",
+      "deviceName": "测试",
+      "category": "1",
+      "type": "1001",
+      "energyCount": "1",
+      "serialNumber": "",
+      "pidCode": null,
+      "brand": "6da085e5-956d-4000-bd3c-ebb01a9c99a1",
+      "types": "d7a8aede-b821-4ff2-953d-601a20e5a948",
+      "manufacturer": "",
+      "contacts": "",
+      "phonenumber": null,
+      "position": "",
+      "activeState": "",
+      "measurementDirection": "",
+      "deviceMagnification": null,
+      "deviceAccuracy": null,
+      "frequency": "",
+      "standardFrequency": "",
+      "deviceHead": "",
+      "constructor": "",
+      "voltageType": "",
+      "pt": null,
+      "ct": null,
+      "communicationProtocol": "",
+      "ip": "",
+      "port": "",
+      "com": "",
+      "slaveAddress": "",
+      "dlt": "",
+      "conversionIdentifier": "1",
+      "multiplicationAdjustment": "1",
+      "accessMethod": "",
+      "replacementFrequency": "0",
+      "dataDetail": "",
+      "insertTime": "2024-03-14 20:01:53",
+      "children": null,
+      "devicePointList": null,
+      "insertUser": ""
+    },
+    {
+      "id": "d3",
+      "isDel": "0",
+      "officesId": "84",
+      "deviceCode": "81",
+      "deviceName": "设备名称1111",
+      "category": "1",
+      "type": "1001",
+      "energyCount": "1",
+      "serialNumber": "69",
+      "pidCode": null,
+      "brand": "6da085e5-956d-4000-bd3c-ebb01a9c99a1",
+      "types": "d7a8aede-b821-4ff2-953d-601a20e5a948",
+      "manufacturer": "elit non in",
+      "contacts": "ad reprehenderit",
+      "phonenumber": "34",
+      "position": "in esse commodo",
+      "activeState": "1",
+      "measurementDirection": "1",
+      "deviceMagnification": 62,
+      "deviceAccuracy": "89",
+      "frequency": "anim consequat irure",
+      "standardFrequency": "ut elit",
+      "deviceHead": "pariatur ex velit",
+      "constructor": "84566",
+      "voltageType": "cillum aliquip reprehenderit",
+      "pt": 61,
+      "ct": 64,
+      "communicationProtocol": "cupidatat nisi ea ad",
+      "ip": "",
+      "port": "",
+      "com": "",
+      "slaveAddress": "",
+      "dlt": "",
+      "conversionIdentifier": "48",
+      "multiplicationAdjustment": "1",
+      "accessMethod": "1",
+      "replacementFrequency": "0",
+      "dataDetail": "sit",
+      "insertTime": "2024-03-15 17:34:24",
+      "children": null,
+      "devicePointList": null,
+      "insertUser": null
+    },
+    {
+      "id": "d43fdfff_02_0001",
+      "isDel": "0",
+      "officesId": "843fdffff213d2d3",
+      "deviceCode": "00037430200143",
+      "deviceName": "应感者酸严",
+      "category": "1",
+      "type": "1001",
+      "energyCount": "esse consequat",
+      "serialNumber": "69",
+      "pidCode": null,
+      "brand": "",
+      "types": "",
+      "manufacturer": "elit non in",
+      "contacts": "ad reprehenderit",
+      "phonenumber": "34",
+      "position": "in esse commodo",
+      "activeState": "1",
+      "measurementDirection": "1",
+      "deviceMagnification": 62,
+      "deviceAccuracy": "89",
+      "frequency": "anim consequat irure",
+      "standardFrequency": "ut elit",
+      "deviceHead": "pariatur ex velit",
+      "constructor": "84566",
+      "voltageType": "cillum aliquip reprehenderit",
+      "pt": 61,
+      "ct": 64,
+      "communicationProtocol": "cupidatat nisi ea ad",
+      "ip": "",
+      "port": "",
+      "com": "",
+      "slaveAddress": "",
+      "dlt": "",
+      "conversionIdentifier": "48",
+      "multiplicationAdjustment": "1",
+      "accessMethod": "1",
+      "replacementFrequency": "0",
+      "dataDetail": "sit",
+      "insertTime": "2024-04-29 11:12:43",
+      "children": null,
+      "devicePointList": null,
+      "insertUser": null
+    }
+  ]
+  
+}
\ No newline at end of file
diff --git a/hx-ai-intelligent/vite.config.ts b/hx-ai-intelligent/vite.config.ts
index 2494632..4a477e6 100644
--- a/hx-ai-intelligent/vite.config.ts
+++ b/hx-ai-intelligent/vite.config.ts
@@ -16,5 +16,9 @@ const proxy = {
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/carbon-smart/, ''),
   },
+  '/carbon': {
+    target: 'http://192.168.11.169:8224',
+    changeOrigin: true
+  },
 };
 export default configFun({ dirname, proxy, serviceMode: 'saas', baseDir: '../' });

From 9ad9446cae21a29ea575693fa5ffe4f85da3897a Mon Sep 17 00:00:00 2001
From: chenpingsen <chenpingsen>
Date: Mon, 8 Jul 2024 10:02:05 +0800
Subject: [PATCH 2/6] =?UTF-8?q?add:=E7=85=A7=E6=98=8E=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lightingManage/indexs.less                | 159 ++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less

diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less
new file mode 100644
index 0000000..b9dad0f
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less
@@ -0,0 +1,159 @@
+// 页面容器
+.lighting-box {
+    // width: 100%;
+    // height: 100%;
+    position: relative;
+    // background: linear-gradient(#badaff, #8cabeb, #7095de);
+    .drawer-box {
+        width: 30px;
+        height: 40px;
+        border-radius: 2px;
+        position: fixed;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        background: rgba(0, 0 ,0 ,0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        .drawer-icon {
+                
+        }
+    }
+    // 照明设备功能总容器
+    .lighting-img-box {
+        position: relative;
+        width: 1280px;
+        height: 720px;
+        user-select: none;
+        background-image: url(../image/bg.jpg);
+        // 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性
+        perspective: 1000px;
+        perspective-origin: 850px -160px;
+        // 左上角区域切换功能
+        .btn-box {
+            width: 120px;
+            position: sticky;
+            top: 10px;
+            left: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            .btn-item {
+                cursor: pointer;
+                width: 100%;
+                height: 40px;
+                border-radius: 4px;
+                background: rgba(39, 120, 255, 1);
+                border: 1px solid rgba(51, 199, 255, 1);
+                box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
+                font-size: 18px;
+                color: white;
+            }
+            .btn-item:hover {
+                color: black;
+            }
+        }
+        // 大区分区
+        .area{
+            position: absolute;
+            bottom: 170px;
+            left: 240px;
+            width: 780px;
+            height: 240px;
+            transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
+            display: flex;
+            gap: 8px;  
+            .area1 {
+                width: 170px;
+                background: rgba(0, 251, 91, 0.3);
+                border: 2px solid rgb(0, 251, 91);
+                display: flex;
+            }   
+            .area2 {
+                width: 240px;
+                background: rgba(255, 165, 0, 0.3);
+                border: 2px solid rgb(255, 165, 0);
+                display: flex;
+            } 
+            .area3 {
+                width: 110px;
+                background: rgba(255, 0, 0, 0.3);
+                border: 2px solid rgb(255, 0, 0);
+            } 
+            .area4 {
+                flex: 1;
+                background: rgba(80, 236, 244, 0.3);
+                border: 2px solid rgb(80, 236, 244);
+            } 
+            .area-item:hover {
+                border:2px solid white;
+            }
+            .area-item {
+                cursor: pointer;
+                transition: all ease 0.2s;
+                >.light-group {
+                    height: 100%;
+                    flex: 1;
+                    display:flex;
+                    justify-content: center;
+                    align-items: center;
+                    .group-shadow1 {
+                        width: 35px;
+                        height: 150px;
+                        border-radius: 20px;
+                        background: rgba(0, 0, 0, 0.1);
+                    }
+                    .group-shadow2 {
+                        width: 35px;
+                        height: 180px;
+                        border-radius: 20px;
+                        background: rgba(0, 0, 0, 0.1);
+                    }
+                    .group-shadow3 {
+                        width: 40px;
+                        height: 180px;
+                        border-radius: 20px;
+                        background: rgba(0, 0, 0, 0.1);
+                    }
+                    .group-shadow4 {
+                        width: 40px;
+                        height: 160px;
+                        border-radius: 20px;
+                        background: rgba(0, 0, 0, 0.1);
+                    }
+                }
+                .group-shadow {
+                    transition: all ease 0.2s;
+                }
+                .group-shadow:hover {
+                    border: 2px solid white;
+                }
+            }
+        }
+    }
+}
+.ns-content-main {
+    position: relative;
+    // 抽屉伸缩按钮
+    .drawer-box {
+        width: 30px;
+        height: 40px;
+        border-radius: 2px;
+        position: fixed;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        background: rgba(0, 0 ,0 ,0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        .drawer-icon {
+                
+        }
+    }
+}

From 796d2fcf6371d615f3f10d5c41a902c681ab23ad Mon Sep 17 00:00:00 2001
From: 28723 <2822784518@qq.com>
Date: Mon, 8 Jul 2024 10:04:04 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E7=A2=B3=E6=8E=92=E5=9B=A0=E5=AD=90?=
 =?UTF-8?q?=E5=BA=93=E9=A1=B5=E9=9D=A2=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../carbonEmissionManage/carbonEmissionFactorLibrary/index.vue   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
index 11a8100..4778be2 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
@@ -360,7 +360,6 @@ import { log } from 'node:console';
         name: 'userAdd',
         type: 'primary',
         handle: () => {
-          debugger
           opMap.value.type = 'add';
           setTimeout(() => {
             formData.value = {

From 64cfd47d50af4995c598d8588dade1faac94afc5 Mon Sep 17 00:00:00 2001
From: 28723 <2822784518@qq.com>
Date: Mon, 8 Jul 2024 10:05:22 +0800
Subject: [PATCH 4/6] Merge branch 'temp' of
 http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp

---
 hx-ai-intelligent/index.html                  |   2 +-
 hx-ai-intelligent/public/projectIcon.svg      |  10 ++
 hx-ai-intelligent/src/api/deviceManage.ts     |  11 +-
 hx-ai-intelligent/src/api/index.ts            |   3 +
 hx-ai-intelligent/src/api/origanizemanage.ts  |   3 +-
 .../src/components/ns-modal-form.vue          |  88 ++++++++++++
 .../src/router/organizationManage.ts          |   1 -
 .../src/view/equipmentManage/group/config.ts  | 132 +++++++++++++-----
 .../src/view/equipmentManage/group/index.vue  | 107 +++++++++++++-
 .../departmentManage/config.ts                |   1 +
 .../departmentManage/index.vue                |  93 ++++++------
 .../organizationManage/usermanage/config.ts   |   1 +
 .../organizationManage/usermanage/index.vue   |  71 ++++------
 lib/component/form/form/form.vue              |  10 +-
 lib/component/tree/props.ts                   |   1 +
 lib/component/tree/tree-api.vue               |  23 ++-
 lib/saas/config/form.config.ts                |  11 ++
 lib/saas/view/system/login.vue                | 123 ++++++++++------
 18 files changed, 500 insertions(+), 191 deletions(-)
 create mode 100644 hx-ai-intelligent/public/projectIcon.svg
 create mode 100644 hx-ai-intelligent/src/components/ns-modal-form.vue

diff --git a/hx-ai-intelligent/index.html b/hx-ai-intelligent/index.html
index 420aa9c..5c8b60a 100644
--- a/hx-ai-intelligent/index.html
+++ b/hx-ai-intelligent/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/projectIcon.svg" />
     <meta name="referrer" content="never" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- <script type="text/javascript">
diff --git a/hx-ai-intelligent/public/projectIcon.svg b/hx-ai-intelligent/public/projectIcon.svg
new file mode 100644
index 0000000..3ad2419
--- /dev/null
+++ b/hx-ai-intelligent/public/projectIcon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+  <g id="组_23402" data-name="组 23402" transform="translate(-959.12 -738.12)">
+    <rect id="矩形_16530" data-name="矩形 16530" width="36" height="36" transform="translate(959.12 738.12)" fill="none"/>
+    <g id="组_23400" data-name="组 23400" transform="translate(960.956 739.956)">
+      <path id="路径_30576" data-name="路径 30576" d="M207.674,163.872v-9.284a2.553,2.553,0,0,0-1.179-2.063l-8.056-4.634a2.417,2.417,0,0,0-2.358,0l-8.023,4.65a2.38,2.38,0,0,0-1.179,2.063v9.333A2.553,2.553,0,0,0,188.059,166l8.056,4.585a2.417,2.417,0,0,0,2.358,0l8.056-4.634A2.331,2.331,0,0,0,207.674,163.872Z" transform="translate(-181.117 -142.881)" fill="#4388fb" opacity="0.2"/>
+      <path id="路径_30577" data-name="路径 30577" d="M265.893,314.283h-2.718l-.884-2.653h-4.224l-.884,2.653h-2.718l4.224-11.625h2.9Zm-4.093-4.617-1.326-4.044a9.365,9.365,0,0,1-.2-1.015h-.065a5.831,5.831,0,0,1-.2,1.015l-1.326,4.044Zm8.072-7.073v11.625h-2.456V302.592Z" transform="translate(-246.539 -292.932)" fill="#4388fb"/>
+      <path id="路径_30578" data-name="路径 30578" d="M36.685,20.095a.9.9,0,0,0-.884.884v2.472a1.535,1.535,0,0,1-.77,1.294L23.7,31.262a1.422,1.422,0,0,1-1.523,0l-11.33-6.517a1.456,1.456,0,0,1-.77-1.294V20.177a2.409,2.409,0,0,0-1-4.6,2.425,2.425,0,0,0-2.423,2.407,2.391,2.391,0,0,0,1.637,2.276v3.176a3.268,3.268,0,0,0,1.637,2.816l11.33,6.582a3.244,3.244,0,0,0,1.637.409,3.471,3.471,0,0,0,1.637-.475l11.281-6.517a3.268,3.268,0,0,0,1.637-2.816V20.963A.76.76,0,0,0,36.685,20.095Zm.884-6.942V10.287a3.268,3.268,0,0,0-1.637-2.816L24.585.954a3.284,3.284,0,0,0-3.291,0L9.947,7.471A3.268,3.268,0,0,0,8.31,10.287v2.227a.884.884,0,1,0,1.768,0V10.287a1.535,1.535,0,0,1,.77-1.294l11.33-6.517a1.422,1.422,0,0,1,1.523,0L34.982,9.059a1.456,1.456,0,0,1,.77,1.294v2.734a2.4,2.4,0,1,0,1.817.065Z" transform="translate(-6.656 -0.512)" fill="#4388fb"/>
+    </g>
+  </g>
+</svg>
diff --git a/hx-ai-intelligent/src/api/deviceManage.ts b/hx-ai-intelligent/src/api/deviceManage.ts
index b044e78..ea91ef7 100644
--- a/hx-ai-intelligent/src/api/deviceManage.ts
+++ b/hx-ai-intelligent/src/api/deviceManage.ts
@@ -1,10 +1,11 @@
-const BASE_URL = '/carbon-smart';
+import { BASE_URL } from './index';
 export enum device {
-  queryDeviceTree = `${BASE_URL}/deviceInfo/queryDeviceTree`,
-  queryDevicePage = `${BASE_URL}/deviceInfo/queryDevicePage`,
-  dropArea = `${BASE_URL}/deviceInfo/dropArea`,
+  queryDeviceTree = `${BASE_URL}/deviceInfo/queryDeviceTree`, // 左侧树
+  queryDevicePage = `${BASE_URL}/deviceInfo/queryDevicePage`, // 列表
+  dropArea = `${BASE_URL}/deviceInfo/dropArea`, // 查询下拉区域
 }
 
 export enum group {
-  queryDeviceGroupTree = `${BASE_URL}/deviceGroup/queryDeviceGroupTree`,
+  queryDeviceGroupTree = `${BASE_URL}/deviceGroup/queryDeviceGroupTree`, // 左侧树
+  creatOrUpdate = `${BASE_URL}/deviceGroup/creatOrUpdate`, // 左侧树节点新增编辑
 }
diff --git a/hx-ai-intelligent/src/api/index.ts b/hx-ai-intelligent/src/api/index.ts
index 6ae56cc..a2e9325 100644
--- a/hx-ai-intelligent/src/api/index.ts
+++ b/hx-ai-intelligent/src/api/index.ts
@@ -4,3 +4,6 @@
 export const apiModule = {
   parking: ['User', 'CurrentUser', 'Organizational'],
 };
+
+export const BASE_URL = '/carbon-smart';
+export const dict = `${BASE_URL}/client/dict/listByKey`;
diff --git a/hx-ai-intelligent/src/api/origanizemanage.ts b/hx-ai-intelligent/src/api/origanizemanage.ts
index 17ce885..de7e06d 100644
--- a/hx-ai-intelligent/src/api/origanizemanage.ts
+++ b/hx-ai-intelligent/src/api/origanizemanage.ts
@@ -1,4 +1,5 @@
-const BASE_URL = '/carbon-smart';
+import { BASE_URL } from './index';
+
 export enum permission {
   add = `${BASE_URL}/admin/permission/save`,
   queryOrgPermission = `${BASE_URL}/api/dept/queryOrgPermission`,
diff --git a/hx-ai-intelligent/src/components/ns-modal-form.vue b/hx-ai-intelligent/src/components/ns-modal-form.vue
new file mode 100644
index 0000000..24af74c
--- /dev/null
+++ b/hx-ai-intelligent/src/components/ns-modal-form.vue
@@ -0,0 +1,88 @@
+<template>
+  <ns-modal
+    ref="modalRef"
+    v-bind="extraModalConfig"
+    destroyOnClose
+    v-model:visible="visible"
+    :title="title"
+    :okButtonProps="buttonProps"
+    @ok="handleOk">
+    <ns-form ref="formRef" :schemas="schemas" :model="formData" formLayout="formVertical" />
+  </ns-modal>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, toRefs, watch } from 'vue';
+  import { HttpRequestConfig, NsMessage, useApi } from '/nerv-lib/saas';
+  import { useRoute } from 'vue-router';
+  type Props = {
+    title?: string;
+    schemas: Array<any>;
+    api: string | object | Function;
+    data?: object;
+    extraModalConfig?: object;
+  };
+  const route = useRoute();
+  const { httpRequest } = useApi();
+
+  const props = withDefaults(defineProps<Props>(), {
+    title: '新增',
+  });
+  const { schemas } = toRefs(props);
+  const formData = ref();
+  watch(
+    () => props?.data,
+    (val) => {
+      formData.value = val;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+  const modalRef = ref();
+  const formRef = ref();
+  const visible = ref(false);
+  const validateResult = computed(() => {
+    return !formRef.value?.validateResult;
+  });
+  const toggle = () => {
+    visible.value = !visible.value;
+  };
+
+  const setLoading = (loading = true) => {
+    buttonProps.value.loading = loading;
+  };
+
+  const handleOk = () => {
+    setLoading(true);
+    formRef.value
+      .triggerSubmit()
+      .then((data: any) => {
+        const { api } = props;
+        const requestConfig: HttpRequestConfig = { method: 'POST' };
+        const { params } = route;
+
+        httpRequest({ api, params: data, pathParams: params, requestConfig })
+          .then(() => {
+            NsMessage.success('操作成功', 1, () => {
+              toggle();
+            });
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      })
+      .catch(() => {});
+  };
+
+  const buttonProps = ref({
+    disabled: validateResult,
+    loading: false,
+  });
+
+  defineExpose({
+    toggle,
+  });
+</script>
+<style lang="less"></style>
diff --git a/hx-ai-intelligent/src/router/organizationManage.ts b/hx-ai-intelligent/src/router/organizationManage.ts
index eb97190..e02f7c4 100644
--- a/hx-ai-intelligent/src/router/organizationManage.ts
+++ b/hx-ai-intelligent/src/router/organizationManage.ts
@@ -19,7 +19,6 @@ const organizationManage = {
           meta: {
             title: '用户管理',
             keepAlive: true,
-            isCheck: false,
             operates: [
               { title: '新增', code: 'userAdd' },
               { title: '导入', code: 'userImport' },
diff --git a/hx-ai-intelligent/src/view/equipmentManage/group/config.ts b/hx-ai-intelligent/src/view/equipmentManage/group/config.ts
index c45b566..83a911a 100644
--- a/hx-ai-intelligent/src/view/equipmentManage/group/config.ts
+++ b/hx-ai-intelligent/src/view/equipmentManage/group/config.ts
@@ -2,6 +2,8 @@ import { dateUtil } from '/nerv-lib/util/date-util';
 import data from './mock.json';
 import { http } from '/nerv-lib/util';
 import { ref } from 'vue';
+import { group } from '/@/api/deviceManage';
+import { dict } from '/@/api';
 const tableKeyMap = [
   {
     title: '来源企业',
@@ -57,49 +59,105 @@ const doWnload = (url) => {
 };
 
 const mockData = ref(data.listData);
-export const treeConfig = {
-  defaultExpandAll: true,
-  header: {
-    icon: 'orgLink',
-    title: '能耗分组',
+export const formSchema = [
+  {
+    field: 'isCreate',
+    component: 'NsInput',
+    show: false,
   },
-
-  api: () => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(data);
-      }, 100);
-    });
+  {
+    field: 'orgId',
+    component: 'NsInput',
+    show: false,
   },
-  formConfig: {
-    schemas: [
+  {
+    field: 'isCreatSon',
+    component: 'NsInput',
+    show: false,
+  },
+  {
+    label: '节点名称',
+    field: 'pointName',
+    component: 'NsInput',
+    componentProps: {
+      placeholder: '请输入节点名称(必填)',
+    },
+    rules: [
       {
-        field: 'type',
-        label: '',
-        component: 'NsSelect',
-        autoSubmit: true,
-        defaultValue: 1,
-        componentProps: {
-          options: [
-            { label: '碳排', value: 1 },
-            { label: '用电量', value: 2 },
-            { label: '用水量', value: 3 },
-            { label: '燃气量', value: 4 },
-            { label: '供热量', value: 5 },
-          ],
-        },
-      },
-      {
-        field: 'name',
-        label: '',
-        component: 'NsInput',
-        autoSubmit: true,
-        componentProps: {
-          placeholder: '请输入',
-        },
+        required: true,
+        message: '请输入节点名称',
       },
     ],
   },
+  {
+    label: '节点类型',
+    field: 'pointType',
+    component: 'NsSelectApi',
+    componentProps: {
+      placeholder: '请选择节点类型(必填)',
+      api: dict,
+      params: { dicKey: 'COUNT_POINT' },
+      immediate: true,
+      resultField: 'data.COUNT_POINT',
+      labelField: 'cnValue',
+      valueField: 'cnValue',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入节点类型',
+      },
+    ],
+  },
+];
+export const treeConfig = (orgId) => {
+  return {
+    defaultExpandAll: true,
+    header: {
+      icon: 'orgLink',
+      title: '能耗分组',
+    },
+    params: { orgId },
+    api: group.queryDeviceGroupTree,
+    // api: () => {
+    //   return new Promise((resolve) => {
+    //     setTimeout(() => {
+    //       resolve({ data: [{ title: '全部', key: 'all', children: data.data }] });
+    //     }, 100);
+    //   });
+    // },
+    transform: (data) => {
+      return [{ title: '全部', key: 'all', selectable: false, children: data }];
+    },
+    formConfig: {
+      schemas: [
+        {
+          field: 'energyType',
+          label: '',
+          component: 'NsSelectApi',
+          autoSubmit: true,
+          componentProps: {
+            api: dict,
+            params: { dicKey: 'ENERGY_TYPE' },
+            immediate: true,
+            resultField: 'data.ENERGY_TYPE',
+            labelField: 'cnValue',
+            valueField: 'cnValue',
+            placeholder: '请选择能耗种类',
+          },
+        },
+        {
+          field: 'pointName',
+          label: '',
+          component: 'NsInput',
+          autoSubmit: true,
+          componentProps: {
+            placeholder: '请输入节点名称',
+          },
+        },
+      ],
+    },
+  };
 };
 export const tableConfig = (el, elGroup, elFormula) => {
   return {
diff --git a/hx-ai-intelligent/src/view/equipmentManage/group/index.vue b/hx-ai-intelligent/src/view/equipmentManage/group/index.vue
index d88f11e..997394e 100644
--- a/hx-ai-intelligent/src/view/equipmentManage/group/index.vue
+++ b/hx-ai-intelligent/src/view/equipmentManage/group/index.vue
@@ -2,29 +2,113 @@
   <editDrawer ref="editDrawerRef" />
   <editGroup ref="editGroupRef" />
   <editFormula ref="editFormulaRef" />
+
+  <!-- <ns-modal ref="modalRef" title="新增" v-model:visible="visible">
+    <ns-form ref="formRef" :schemas="formSchema" :model="formData" formLayout="formVertical" />
+  </ns-modal> -->
+
+  <NsModalFrom ref="modalFormRef" v-bind="nsModalFormConfig" />
   <div class="groupContainer">
     <div class="tree">
-      <ns-tree-api v-bind="treeConfig" @select="handleSelect" />
+      <ns-tree-api v-bind="tConfig" @select="handleSelect">
+        <template #title="data">
+          <div class="treeRow">
+            <span>{{ data.title }}</span>
+            <a-dropdown>
+              <ns-icon name="actionMore" size="14" class="actionMore" />
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item
+                    v-for="(item, index) in actionList"
+                    :key="index"
+                    @click="item.func(data)">
+                    <span>{{ item.title }}</span>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+        </template>
+      </ns-tree-api>
     </div>
     <ns-view-list-table v-show="defaultType" class="table" v-bind="config" />
     <ns-view-list-table v-show="!defaultType" class="table" v-bind="configCal" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { createVNode, onMounted, ref } from 'vue';
-  import { tableConfig, treeConfig, tableConfigCal } from './config';
+  import { createVNode, nextTick, onMounted, ref } from 'vue';
+  import { tableConfig, treeConfig, tableConfigCal, formSchema } from './config';
   import { useParams } from '/nerv-lib/use';
   import editDrawer from './edit.vue';
   import editGroup from './editGroup.vue';
   import editFormula from './editFormula.vue';
+  import { NsMessage, NsModal } from '/nerv-lib/component';
+  import NsModalFrom from '/@/components/ns-modal-form.vue';
+  import { group } from '/@/api/deviceManage';
 
+  type opType = 'up' | 'down';
   const { getParams } = useParams();
+  const modalFormRef = ref();
   const editDrawerRef = ref();
   const editGroupRef = ref();
   const editFormulaRef = ref();
   const defaultType = ref(true);
+  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
   const config = tableConfig(editDrawerRef, editGroupRef, editFormulaRef);
   const configCal = tableConfigCal(editDrawerRef, editGroupRef, editFormulaRef);
+  const tConfig = treeConfig(result);
+  const nsModalFormConfig = ref({
+    api: group.creatOrUpdate,
+    data: {},
+    title: '新增',
+    schemas: formSchema,
+    extraModalConfig: {
+      bodyStyle: { paddingBottom: 0 },
+    },
+  });
+  nextTick(() => {
+    console.log(modalFormRef.value, 'modal');
+  });
+
+  const addNodeSon = (data) => {
+    console.log(data);
+    nsModalFormConfig.value.title = '新增';
+    nsModalFormConfig.value.data = {
+      pointName: '新增',
+      isCreate: true,
+      isCreatSon: false,
+      orgId: result,
+    };
+    modalFormRef.value?.toggle();
+  };
+  const editNode = (data) => {
+    console.log(data);
+    nsModalFormConfig.value.title = '编辑';
+    nsModalFormConfig.value.data = { pointName: 123 };
+    modalFormRef.value?.toggle();
+
+    data.value = { pointName: 'qwe' };
+  };
+  const moveNode = (data, type: opType) => {
+    console.log(data);
+  };
+
+  const deleteNode = (a) => {
+    NsModal.confirm({
+      content: '确定删除吗?',
+      onOk: () => {
+        console.log(a);
+      },
+    });
+  };
+  const filterAction = (data) => {};
+  const actionList = [
+    { title: '新增子节点', key: 'addNodeSon', func: (data) => addNodeSon(data) },
+    { title: '编辑', key: 'editNode', func: (data) => editNode(data) },
+    { title: '上移', key: 'moveUp', func: (data) => moveNode(data, 'up') },
+    { title: '下移', key: 'moveDown', func: (data) => moveNode(data, 'down') },
+    { title: '删除', key: 'deleteNode', func: (data) => deleteNode(data) },
+  ];
   const handleSelect = () => {
     defaultType.value = !defaultType.value;
   };
@@ -55,4 +139,21 @@
       min-width: 0;
     }
   }
+
+  .actionMore {
+    display: none;
+  }
+  :deep(.ant-tree-node-content-wrapper) {
+    &:hover {
+      .actionMore {
+        display: block;
+      }
+    }
+  }
+
+  .treeRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 </style>
diff --git a/hx-ai-intelligent/src/view/organizationManage/departmentManage/config.ts b/hx-ai-intelligent/src/view/organizationManage/departmentManage/config.ts
index 5431020..50da653 100644
--- a/hx-ai-intelligent/src/view/organizationManage/departmentManage/config.ts
+++ b/hx-ai-intelligent/src/view/organizationManage/departmentManage/config.ts
@@ -131,6 +131,7 @@ export const formConfig2 = (disabled2: Boolean) => {
       label: '是否部门领导',
       field: 'isLeader',
       component: 'NsRadioGroup',
+      defaultValue: 1,
       componentProps: {
         disabled: disabled2,
         radioType: 'radio',
diff --git a/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue b/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue
index b4c198a..e9bbadf 100644
--- a/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue
+++ b/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue
@@ -65,10 +65,10 @@
             </a-tabs>
             <a-space v-if="activeKey === 1 || deptPermissionTreeData?.length">
               <ns-button type="primary" @click="CancelApartment">取消 </ns-button>
-              <ns-button v-show="disabled" type="primary" @click="pipe(deptEdit, true, false)">
+              <ns-button v-if="disabled" type="primary" @click="pipe(deptEdit, true, false)">
                 编辑
               </ns-button>
-              <ns-button v-show="!disabled" type="primary" @click="deptSure">确定</ns-button>
+              <ns-button v-else type="primary" @click="deptSure">确定</ns-button>
             </a-space>
           </div>
         </a-col>
@@ -79,11 +79,11 @@
       <a-row>
         <a-col :span="8" class="tree">
           <a-space wrap style="margin-bottom: 16px; justify-content: flex-start">
-            <ns-button v-auth="'userAdd'" type="primary" @click="rolePipe(addUser, true)">
+            <!-- <ns-button v-auth="'userAdd'" type="primary" @click="rolePipe(addUser, true)">
               新增角色
             </ns-button>
             <ns-button type="primary" @click="rolePipe(addUserSon)">新增子角色</ns-button>
-            <ns-button type="primary" @click="rolePipe(deleteUser)"> 删除 </ns-button>
+            <ns-button type="primary" @click="rolePipe(deleteUser)"> 删除 </ns-button> -->
           </a-space>
           <a-tree
             v-if="roleTreeData.length"
@@ -95,19 +95,19 @@
             <template #title="data">
               <div style="display: flex; justify-content: space-between; align-items: center">
                 <span> {{ data.zhName }}</span>
-                <!-- <a-dropdown>
+                <a-dropdown>
                   <ns-icon name="actionMore" size="14" class="actionMore" />
                   <template #overlay>
                     <a-menu>
                       <a-menu-item
-                        v-for="(action, index) in dropRoleActions"
+                        v-for="(action, index) in filterAction(data, dropRoleActions, 'addUser')"
                         :key="index"
                         @click="action.func(data)">
                         <span>{{ action.title }}</span>
                       </a-menu-item>
                     </a-menu>
                   </template>
-                </a-dropdown> -->
+                </a-dropdown>
               </div>
             </template>
           </a-tree>
@@ -139,20 +139,16 @@
                 <a-empty style="margin-top: 120px" v-else />
               </a-tab-pane>
             </a-tabs>
-            <a-space>
+            <a-space v-if="roleActiveKey === 1 || rolePermissionTreeData?.length">
               <ns-button type="primary" @click="CancelUser">取消</ns-button>
               <ns-button
-                v-show="roleDisabled"
+                v-if="roleDisabled"
                 :disabled="!roleTreeData?.length"
                 type="primary"
                 @click="rolePipe(roleEdit, false, false)">
                 编辑
               </ns-button>
-              <ns-button
-                v-show="!roleDisabled"
-                :disabled="!roleTreeData?.length"
-                type="primary"
-                @click="roleSure">
+              <ns-button v-else :disabled="!roleTreeData?.length" type="primary" @click="roleSure">
                 确定
               </ns-button>
             </a-space>
@@ -167,7 +163,7 @@
   import { Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { http } from '/nerv-lib/util/http';
-  import { cloneDeep, get } from 'lodash-es';
+  import { cloneDeep, get, isEmpty } from 'lodash-es';
   import { formConfig, formConfig2 } from './config';
   import { department } from '/@/api/origanizemanage';
   import { permission } from '/@/api/origanizemanage';
@@ -180,7 +176,7 @@
   const formRef = ref();
   const formRoleRef = ref();
   let formData = ref({});
-  let roleFormData = ref({});
+  let roleFormData = ref({ isLeader: 1 });
   const activeKey = ref(1);
   const roleActiveKey = ref(1);
   const disabled = ref(true);
@@ -224,7 +220,7 @@
 
   /**操作拦截 */
   const pipe = (func: Function, flag = false, toggle = true) => {
-    if (toggle) activeKey.value = 1;
+    // if (toggle) activeKey.value = 1;
     if (flag) {
       // 只有部门的操作
       if (selectRef.value?.hasOwnProperty('orgInfo') || !selectRef.value?.deptInfo) {
@@ -243,13 +239,15 @@
 
   const rolePipe = (func: Function, linkDept = false, toggle = true) => {
     console.log(selectRoleRef.value);
-    if (toggle) roleActiveKey.value = 1;
+    // if (toggle) roleActiveKey.value = 1;
     // 需要先选择部门
     if ((linkDept && !selectRef.value?.deptInfo) || selectRef.value?.hasOwnProperty('own')) {
       NsMessage.error('请先选择相关部门');
       return;
     }
-    if (!linkDept && !selectRoleRef.value) {
+    console.log(123);
+
+    if (!linkDept && isEmpty(selectRoleRef.value)) {
       NsMessage.error('请先选择相关角色');
       return;
     }
@@ -302,6 +300,7 @@
         item['deptInfo'] = item.orgInfo;
         item['deptInfo']['deptName'] = item?.orgInfo?.orgName;
         item['own'] = !index;
+        item['selectable'] = false;
         item['children'] = item.deptTrees;
         return item;
       });
@@ -325,7 +324,7 @@
   // 获取角色树
   const getUserTree = (params = { deptId: selectRef.value?.deptInfo?.deptId }) => {
     return http.post(department.queryRoleTree, params).then((res) => {
-      roleTreeData.value = res.data;
+      roleTreeData.value = [{ zhName: '全部', selectable: false, orgInfo: {}, children: res.data }];
     });
   };
   // 根据依赖刷新角色树
@@ -334,12 +333,12 @@
       getUserTree().then(() => {
         if (!roleTreeData.value?.length) {
           selectRoleRef.value = {};
-          roleFormData.value = {};
+          roleFormData.value = { isLeader: 1 };
         }
         const info = {
-          node: { key: '0-0', dataRef: { ...roleTreeData.value[0] } },
+          node: { key: '0-0-0', dataRef: { ...roleTreeData.value[0].children[0] } },
         };
-        SelectUserTree(['0-0'], info);
+        SelectUserTree([''], info);
       });
     }
   });
@@ -351,8 +350,10 @@
     callback: null,
   };
 
+  // 添加部门
   const addApartment = (data) => {
     const { deptInfo } = data;
+    activeKey.value = 1;
 
     disabled.value = false;
     opMap.type = 'addDept';
@@ -369,23 +370,17 @@
           orgId: deptInfo?.orgId,
           sourceOrgId,
           projectId,
+          pdeptId: deptInfo.pdeptId || '',
           orgName,
         });
       });
     };
   };
 
-  const getParent = (data) => {
-    if (data?.parent) {
-      getParent(data.parent);
-    } else {
-      data;
-    }
-  };
-
+  // 添加子部门
   const addApartmentSon = (data) => {
     const { deptInfo } = data;
-
+    activeKey.value = 1;
     disabled.value = false;
     opMap.type = 'addson';
     formData.value = {};
@@ -407,10 +402,11 @@
     };
   };
 
-  const addUser = () => {
+  const addUser = (data) => {
     roleDisabled.value = false;
     opMap.type = 'addUser';
-    roleFormData.value = {};
+    roleFormData.value = { isLeader: 1 };
+    roleActiveKey.value = 1;
     opMap.fuc = (params) => {
       delete params.roleId;
       return formRoleRef.value.triggerSubmit().then(() => {
@@ -418,6 +414,7 @@
           ...params,
           orgId,
           projectId,
+          proleId: data.proleId || '',
           deptId: selectRef.value.deptInfo.deptId,
           deptName: selectRef.value.deptInfo.deptName,
         });
@@ -425,10 +422,11 @@
     };
   };
 
-  const addUserSon = () => {
+  const addUserSon = (data) => {
     roleDisabled.value = false;
     opMap.type = 'addUserSon';
-    roleFormData.value = {};
+    roleActiveKey.value = 1;
+    roleFormData.value = { isLeader: 1 };
     opMap.fuc = (params) => {
       delete params.roleId;
       return formRoleRef.value.triggerSubmit().then(() => {
@@ -436,7 +434,7 @@
           ...params,
           orgId,
           projectId,
-          proleId: selectRoleRef.value.roleId,
+          proleId: data.roleId,
           deptId: selectRef.value.deptInfo.deptId,
           deptName: selectRef.value.deptInfo.deptName,
         });
@@ -444,8 +442,6 @@
     };
   };
   const deleteDept = (data) => {
-    console.log(data);
-
     // 删除逻辑
     Modal.confirm({
       title: '是否确认删除',
@@ -458,6 +454,7 @@
             // 删除选中的数据需要清空
             deptTreeSelectedKeys.value = [];
             selectRef.value = '';
+            roleTreeData.value = [{ zhName: '全部', selectable: false, orgInfo: {}, children: [] }];
           }
         });
       },
@@ -467,16 +464,20 @@
     });
   };
 
-  const deleteUser = () => {
+  const deleteUser = (data) => {
     Modal.confirm({
       title: '是否确认删除',
       onOk() {
-        http.post(department.delRole, { roleId: selectRoleRef.value.roleId }).then(() => {
+        http.post(department.delRole, { roleId: data.roleId }).then(() => {
           getUserTree({ deptId: selectRef.value.deptInfo.deptId });
           clearRoleData();
           // 清空select树
-          roleTreeSelectedKeys.value = [];
-          selectRoleRef.value = '';
+          if (data.selected) {
+            // 删除选中的数据需要清空
+            roleTreeSelectedKeys.value = [];
+            selectRoleRef.value = '';
+          }
+
           NsMessage.success('操作成功');
         });
       },
@@ -554,6 +555,7 @@
   };
   // 保存角色权限
   const rolePermission = () => {
+    if (!roleTotalCheckedKeys.value?.length) return;
     http
       .post(department.addRolePermission, {
         // deptId: selectRef.value?.deptInfo.deptId,
@@ -645,6 +647,7 @@
     rolePermissionTreeData.value = [];
     roleCheckedKeys.value = [];
     roleTreeSelectedKeys.value = [];
+    roleDisabled.value = true;
   };
 
   /**
@@ -739,10 +742,10 @@
     // { title: '新增角色', func: addUser, key: 'addUser' },
   ]);
 
-  const filterAction = (data, actions) => {
+  const filterAction = (data, actions, keyV = 'addDept') => {
     if (data.hasOwnProperty('orgInfo')) {
       // 企业节点
-      return actions.filter(({ key }) => key === 'addDept');
+      return actions.filter(({ key }) => key === keyV);
     }
     return actions;
   };
diff --git a/hx-ai-intelligent/src/view/organizationManage/usermanage/config.ts b/hx-ai-intelligent/src/view/organizationManage/usermanage/config.ts
index 61ade5d..3b7e580 100644
--- a/hx-ai-intelligent/src/view/organizationManage/usermanage/config.ts
+++ b/hx-ai-intelligent/src/view/organizationManage/usermanage/config.ts
@@ -44,6 +44,7 @@ export const formConfig = (disabled) => {
             label: '性别',
             field: 'sex',
             component: 'NsRadioGroup',
+            defaultValue: '男',
             componentProps: {
               radioType: 'radio',
               options: [
diff --git a/hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue b/hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue
index a6ce9d3..e93785d 100644
--- a/hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue
+++ b/hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue
@@ -4,30 +4,17 @@
   <div class="main">
     <div class="left">
       <div class="top">
-        <ns-tree-api v-bind="orgTreeConfig" @select="handleSelect">
+        <ns-tree-api v-bind="orgTreeConfig" @select="handleSelect" v-model:treeData="treeData">
           <template #title="data">
             {{ data.orgInfo?.orgName }}
           </template>
         </ns-tree-api>
       </div>
       <div class="top">
-        <!-- <div class="ns-table-title">关联部门</div>
-
-        <a-input-search
-          v-model:value="searchValue2"
-          style="margin-bottom: 8px"
-          placeholder="请输入关联部门"
-          @search="onSearch2" />
-        <a-tree
-          v-if="treeData2?.length"
-          :tree-data="treeData2"
-          defaultExpandAll
-          @select="handleSelect2">
-          <template #title="data">
-            {{ data.deptInfo?.deptName }}
-          </template>
-        </a-tree> -->
-        <ns-tree-api v-bind="deptTreeConfig" @select="handleSelect2">
+        <ns-tree-api
+          v-bind="deptTreeConfig"
+          @select="handleSelect2"
+          v-model:treeData="treeDataDept">
           <template #title="data">
             {{ data.deptInfo?.deptName }}
           </template>
@@ -87,7 +74,7 @@
   import { formConfig, formConfig2 } from './config';
   import { origanizemanage } from '/@/api/origanizemanage';
 
-  defineOptions({ name: 'OrderListIndex' });
+  defineOptions({ name: 'UserManageIndex' });
 
   const mainRef = ref();
   const data = reactive({});
@@ -113,19 +100,21 @@
   const casData = ref([]);
   const formSchema2 = formConfig2(casData);
   const treeData = ref([]);
+  const treeDataDept = ref([]);
   const treeData2 = ref([]);
   const userAuthList = ref([]);
-  const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId;
+  // const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId;
+  const orgId = JSON.parse(sessionStorage.getItem('ORGID')!);
   const orgTreeConfig = ref({
     selectedKeys: ['0-0'],
     defaultExpandAll: true,
     api: origanizemanage.queryOrgTree,
-    defaultParams: { orgId },
+    params: { orgId },
     transform: (data) => {
-      const otherOrg = data[0].listOrg;
+      const otherOrg = data[0]?.listOrg;
       let treeData = [];
       // 特殊处理
-      if (data[0].orgInfo) {
+      if (data[0]?.orgInfo) {
         treeData = data;
       }
       otherOrg?.map((item) => {
@@ -153,7 +142,7 @@
   const deptTreeConfig = ref({
     defaultExpandAll: true,
     api: origanizemanage.queryDeptTree,
-    defaultParams: { orgId },
+    params: { orgId },
 
     header: {
       title: '关联部门',
@@ -192,11 +181,11 @@
       });
     });
   };
-  getOrgTree();
+  // getOrgTree();
   // 部门树
-  fetch(origanizemanage.queryDeptTree).then((res) => {
-    treeData2.value = res.data;
-  });
+  // fetch(origanizemanage.queryDeptTree).then((res) => {
+  //   treeData2.value = res.data;
+  // });
 
   const onSearch = () => {
     console.log(searchValue.value);
@@ -225,8 +214,10 @@
   };
 
   const handleSelect = (selectedKeys: any, info: any) => {
+    console.log(info);
+
     fetch(origanizemanage.queryDeptTree, { orgId: info.node?.orgInfo.orgId }).then((res) => {
-      treeData2.value = res.data;
+      treeDataDept.value = res.data;
     });
     tableFetch({ orgId: info.node?.orgInfo.orgId });
   };
@@ -298,6 +289,7 @@
           opMap.value.type = 'add';
           setTimeout(() => {
             formData.value = {
+              sex: '男',
               orgName: JSON.parse(sessionStorage.getItem('userInfo')).orgName,
             };
             userAuthList.value.splice(0);
@@ -350,30 +342,23 @@
         customRender: (text: any) => {
           return text.index + 1;
         },
-        sorter: {
-          compare: (a, b) => a.address - b.address,
-        },
+        sorter: true,
       },
       {
         title: '账号',
         dataIndex: 'accountNo',
-        sorter: {
-          compare: (a, b) => a.accountNo - b.accountNo,
-        },
+        sorter: true,
       },
       {
         title: '姓名',
         dataIndex: 'realName',
-        sorter: {
-          compare: (a, b) => a.realName - b.realName,
-        },
+        sorter: true,
       },
       {
         title: '性别',
         dataIndex: 'sex',
-        sorter: {
-          compare: (a, b) => a.name - b.name,
-        },
+        sorter: true,
+        textNumber: 4,
       },
       {
         title: '手机号',
@@ -381,11 +366,15 @@
       },
       {
         title: '邮箱',
+        textNumber: 5,
+        textEllipsis: true,
         dataIndex: 'email',
       },
       {
         title: '组织关系',
         dataIndex: 'orgName',
+        // textNumber: 9,
+        // textEllipsis: true,
       },
       {
         title: '部门/角色',
diff --git a/lib/component/form/form/form.vue b/lib/component/form/form/form.vue
index ac5e173..7dd6cde 100644
--- a/lib/component/form/form/form.vue
+++ b/lib/component/form/form/form.vue
@@ -121,14 +121,8 @@
       provide('addChildForm', addChildForm);
 
       const getFormClass = computed(() => {
-        if (props.formLayout === 'flexVertical') {
-          return formConfig.formLayout.flexVertical;
-        }
-        if (props.formLayout === 'flex') {
-          return formConfig.formLayout.flex;
-        }
-        if (props.formLayout === 'flexv2') {
-          return formConfig.formLayout.flexv2;
+        if (props.formLayout) {
+          return formConfig.formLayout[props.formLayout as keyof typeof formConfig.formLayout];
         }
         return formConfig.formLayout.vertical;
       });
diff --git a/lib/component/tree/props.ts b/lib/component/tree/props.ts
index 3b73358..a040b37 100644
--- a/lib/component/tree/props.ts
+++ b/lib/component/tree/props.ts
@@ -14,6 +14,7 @@ export const treeProps = {
     type: [String, Object, Function] as PropType<string | Function | AxiosRequestConfig>,
     default: undefined,
   },
+  treeData: PropTypes.array.def([]),
   params: PropTypes.object.def(() => ({})),
   dynamicParams: PropTypes.oneOfType([
     PropTypes.string,
diff --git a/lib/component/tree/tree-api.vue b/lib/component/tree/tree-api.vue
index 946de7a..4226722 100644
--- a/lib/component/tree/tree-api.vue
+++ b/lib/component/tree/tree-api.vue
@@ -10,10 +10,10 @@
       </div>
     </div>
 
-    <div style="min-height: 300px">
+    <div style="min-height: 300px; overflow-y: scroll">
       <ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys">
         <template #[item]="data" v-for="(item, index) in Object.keys($slots)" :key="index">
-          <slot :name="item" v-bind="data || {}"></slot>
+          <slot :name="item" v-bind="{ ...data, formModel } || {}"></slot>
         </template>
       </ns-tree>
       <!-- <a-empty v-if="!treeData?.length" /> -->
@@ -21,7 +21,7 @@
   </a-spin>
 </template>
 <script lang="ts" setup>
-  import { computed, nextTick, reactive, ref, unref, useAttrs } from 'vue';
+  import { computed, nextTick, reactive, ref, unref, useAttrs, watch } from 'vue';
   import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
   import { useApi } from '/nerv-lib/use/use-api';
   import { AxiosRequestConfig } from 'axios';
@@ -33,16 +33,28 @@
   defineOptions({
     name: 'NsTreeApi',
   });
+  const emit = defineEmits(['update:treeData']);
+  // const model = defineModel('treeData');
 
   const formElRef = ref();
   const props = defineProps(treeProps);
-  const treeData = ref<TreeDataItem[]>([]);
+
+  const treeData = ref(props.treeData);
   const selectedKeys = ref(props.selectedKeys || []);
   const { httpRequest } = useApi();
   const requestConfig: AxiosRequestConfig = { method: 'get' };
   const route = useRoute();
   const attrs = useAttrs();
   const formModel = reactive({});
+  watch(
+    () => props.treeData,
+    (val) => {
+      treeData.value = val;
+    },
+    {
+      deep: true,
+    },
+  );
   const treeState = reactive({
     loading: false,
   });
@@ -56,6 +68,7 @@
     return props.isSticky ? 'sticky' : 'static';
   });
   const formFinish = debounce((data: object) => {
+    selectedKeys.value = [];
     getData(data);
   }, 200);
   const getBindValue = computed(() => ({
@@ -83,6 +96,8 @@
     })
       .then((res) => {
         treeData.value = transform(get(res, resultField));
+        emit('update:treeData', treeData.value);
+        // model.value = treeData.value;
       })
       .finally(() => {
         setLoading(false);
diff --git a/lib/saas/config/form.config.ts b/lib/saas/config/form.config.ts
index 1ea887f..4429588 100644
--- a/lib/saas/config/form.config.ts
+++ b/lib/saas/config/form.config.ts
@@ -11,6 +11,17 @@ export const formConfig = {
       gutter: [0, 0],
       justify: 'space-around',
     },
+    formVertical: {
+      layout: 'horizontal',
+      class: 'ns-vertical-form',
+      wrapperCol: { span: 24 },
+      labelCol: { span: 0 },
+      span: 24,
+      sm: null, //≥576px <=768
+      lg: null, //>= 768
+      gutter: [0, 0],
+      justify: 'space-around',
+    },
     flex: {
       // layout: 'horizontal',
       class: 'ns-flex-form ns-flex-form-horizontal',
diff --git a/lib/saas/view/system/login.vue b/lib/saas/view/system/login.vue
index 11be149..70f4393 100644
--- a/lib/saas/view/system/login.vue
+++ b/lib/saas/view/system/login.vue
@@ -19,33 +19,51 @@
           <h1 class="lg_card_title">{{ configStore.projectName }}</h1>
           <p v-show="!errorShow" style="height: 8px"></p>
           <p v-show="errorShow" class="lg_card_error">{{ errorMsg }}</p>
-          <!-- <p class="lg_card_tip">用户名/手机号</p> -->
-          <a-input class="loginInfo" placeholder="用户名" v-model:value="userName">
-            <template #prefix>
-              <ns-icon class="loginIcon" name="userName" size="19" style="margin-right: 20px" />
-            </template>
-          </a-input>
-          <!-- <p class="lg_card_tip">密码</p> -->
-          <a-input-password class="loginInfo" placeholder="密码" v-model:value="password">
-            <template #prefix>
-              <ns-icon class="loginIcon" name="passWord" size="19" style="margin-right: 20px" />
-            </template>
-          </a-input-password>
-          <!-- 验证码 -->
+          <a-form name="basic" :model="formState" @finish="submit">
+            <a-form-item name="userName" :rules="[{ required: true, message: '请输入用户名' }]">
+              <!-- <p class="lg_card_tip">用户名/手机号</p> -->
+              <a-input class="loginInfo" placeholder="用户名" v-model:value="userName">
+                <template #prefix>
+                  <ns-icon class="loginIcon" name="userName" size="19" style="margin-right: 20px" />
+                </template>
+              </a-input>
+            </a-form-item>
 
-          <a-input v-model:value="code" placeholder="验证码" class="loginInfo">
-            <template #prefix>
-              <ns-icon class="loginIcon" name="verifyIcon" size="19" style="margin-right: 20px" />
-            </template>
-            <template #addonAfter>
-              <ns-verify @get-code="onGetCode" />
-            </template>
-          </a-input>
-          <!-- 记住密码 -->
-          <a-checkbox v-model:checked="isRemember" class="loginInfo">记住密码</a-checkbox>
-          <a-button @click="submit" :loading="loading" type="primary" class="loginInfo"
-            >登录</a-button
-          >
+            <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
+              <!-- <p class="lg_card_tip">密码</p> -->
+              <a-input-password class="loginInfo" placeholder="密码" v-model:value="password">
+                <template #prefix>
+                  <ns-icon class="loginIcon" name="passWord" size="19" style="margin-right: 20px" />
+                </template>
+              </a-input-password>
+            </a-form-item>
+
+            <a-form-item name="code" :rules="[{ validator }]">
+              <!-- 验证码 -->
+              <a-input v-model:value="code" placeholder="验证码" class="loginInfo">
+                <template #prefix>
+                  <ns-icon
+                    class="loginIcon"
+                    name="verifyIcon"
+                    size="19"
+                    style="margin-right: 20px" />
+                </template>
+                <template #addonAfter>
+                  <ns-verify @get-code="onGetCode" />
+                </template>
+              </a-input>
+            </a-form-item>
+            <!-- <a-form-item name="remember"> -->
+            <!-- 记住密码 -->
+            <a-checkbox v-model:checked="isRemember" class="loginInfo">记住密码</a-checkbox>
+            <!-- </a-form-item> -->
+
+            <a-form-item>
+              <a-button html-type="submit" :loading="loading" type="primary" class="loginInfo">
+                登录
+              </a-button>
+            </a-form-item>
+          </a-form>
         </div>
       </a-layout-content>
       <!-- <a-layout-footer>Copyright 2021 xu科技 All Rights Reserved</a-layout-footer> -->
@@ -54,7 +72,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, onMounted, ref } from 'vue';
+  import { defineComponent, onMounted, reactive, ref } from 'vue';
   import { useRouter } from 'vue-router';
   import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
   import { authorizationService } from '/nerv-base/store/modules/authorization-service';
@@ -81,11 +99,12 @@
       // title.value = appConfig.title ? appConfig.title : '账号登录';
       const loading = ref<boolean>(false);
       const configStore = appConfigStore();
-      console.log(configStore);
+      const formState = reactive({ userName, password, code });
 
       const { getThemeConfig: themeConfig, projectName } = storeToRefs(configStore);
 
       const useAuthorization = authorizationService();
+
       const rememberFunc = (data) => {
         console.log(isRemember.value);
         if (!isRemember.value) return;
@@ -97,24 +116,28 @@
           const { accountNo, password: pwd } = JSON.parse(data);
           userName.value = accountNo;
           password.value = pwd;
+          formState.userName = userName.value;
+          formState.password = password.value;
         }
       });
-      const submit = (): void => {
-        if (password.value === '') {
-          errorMsg.value = '请输入密码';
-          errorShow.value = true;
-          return;
-        }
-        if (userName.value === '') {
-          errorMsg.value = '请输入账号';
-          errorShow.value = true;
-          return;
-        }
-        // if (!code.value) {
-        //   errorMsg.value = '请输入验证码';
+      const submit = (value): void => {
+        console.log(value);
+
+        // if (password.value === '') {
+        //   errorMsg.value = '请输入密码';
         //   errorShow.value = true;
         //   return;
         // }
+        // if (userName.value === '') {
+        //   errorMsg.value = '请输入账号';
+        //   errorShow.value = true;
+        //   return;
+        // }
+        // if (!code.value) {
+        //   // errorMsg.value = '请输入验证码';
+        //   // errorShow.value = true;
+        //   return;
+        // }
         // if (code.value.toLocaleLowerCase() !== verifyCode.value.toLocaleLowerCase()) {
         //   errorMsg.value = '请输入正确的验证码';
         //   errorShow.value = true;
@@ -208,7 +231,15 @@
       const onGetCode = (res) => {
         verifyCode.value = res;
       };
+
+      const validator = async (rule, value) => {
+        if (!value) return Promise.reject('请输入验证码');
+        if (value?.toLocaleLowerCase() !== verifyCode.value.toLocaleLowerCase())
+          return Promise.reject('请输入正确的验证码');
+      };
       return {
+        validator,
+        formState,
         projectName,
         onGetCode,
         code,
@@ -323,7 +354,7 @@
     .loginInfo {
       height: 48px;
       width: 100%;
-      margin-bottom: 24px;
+      // margin-bottom: 24px;
       font-size: 16px !important;
 
       :deep(.ant-input) {
@@ -340,10 +371,12 @@
       }
     }
     .loginInfo:last-child {
-      margin-bottom: 16px;
+      // margin-bottom: 16px;
     }
-    .loginInfo:nth-child(5n + 2) {
-      margin-bottom: 0px;
+    .loginInfo:nth-child(4) {
+      width: fit-content;
+      // margin-bottom: 0px;
+      // height: 20px !important;
     }
   }
 

From f28b224c9183358327e64aefc550b5396c439874 Mon Sep 17 00:00:00 2001
From: 28723 <2822784518@qq.com>
Date: Mon, 8 Jul 2024 10:13:07 +0800
Subject: [PATCH 5/6] taskId:067 remark:"commit"

---
 hx-op/index.html                       |  2 +-
 hx-op/public/projectIcon.svg           | 10 ++++++++
 hx-op/src/router/home.ts               | 25 +++++++------------
 hx-op/src/router/organizationManage.ts | 29 ++++++++--------------
 hx-op/src/theme/global.less            | 33 +++++++++++++++-----------
 5 files changed, 48 insertions(+), 51 deletions(-)
 create mode 100644 hx-op/public/projectIcon.svg

diff --git a/hx-op/index.html b/hx-op/index.html
index 764733a..94fe9f8 100644
--- a/hx-op/index.html
+++ b/hx-op/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/projectIcon.svg" />
     <meta name="referrer" content="never" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- <script type="text/javascript">
diff --git a/hx-op/public/projectIcon.svg b/hx-op/public/projectIcon.svg
new file mode 100644
index 0000000..3ad2419
--- /dev/null
+++ b/hx-op/public/projectIcon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+  <g id="组_23402" data-name="组 23402" transform="translate(-959.12 -738.12)">
+    <rect id="矩形_16530" data-name="矩形 16530" width="36" height="36" transform="translate(959.12 738.12)" fill="none"/>
+    <g id="组_23400" data-name="组 23400" transform="translate(960.956 739.956)">
+      <path id="路径_30576" data-name="路径 30576" d="M207.674,163.872v-9.284a2.553,2.553,0,0,0-1.179-2.063l-8.056-4.634a2.417,2.417,0,0,0-2.358,0l-8.023,4.65a2.38,2.38,0,0,0-1.179,2.063v9.333A2.553,2.553,0,0,0,188.059,166l8.056,4.585a2.417,2.417,0,0,0,2.358,0l8.056-4.634A2.331,2.331,0,0,0,207.674,163.872Z" transform="translate(-181.117 -142.881)" fill="#4388fb" opacity="0.2"/>
+      <path id="路径_30577" data-name="路径 30577" d="M265.893,314.283h-2.718l-.884-2.653h-4.224l-.884,2.653h-2.718l4.224-11.625h2.9Zm-4.093-4.617-1.326-4.044a9.365,9.365,0,0,1-.2-1.015h-.065a5.831,5.831,0,0,1-.2,1.015l-1.326,4.044Zm8.072-7.073v11.625h-2.456V302.592Z" transform="translate(-246.539 -292.932)" fill="#4388fb"/>
+      <path id="路径_30578" data-name="路径 30578" d="M36.685,20.095a.9.9,0,0,0-.884.884v2.472a1.535,1.535,0,0,1-.77,1.294L23.7,31.262a1.422,1.422,0,0,1-1.523,0l-11.33-6.517a1.456,1.456,0,0,1-.77-1.294V20.177a2.409,2.409,0,0,0-1-4.6,2.425,2.425,0,0,0-2.423,2.407,2.391,2.391,0,0,0,1.637,2.276v3.176a3.268,3.268,0,0,0,1.637,2.816l11.33,6.582a3.244,3.244,0,0,0,1.637.409,3.471,3.471,0,0,0,1.637-.475l11.281-6.517a3.268,3.268,0,0,0,1.637-2.816V20.963A.76.76,0,0,0,36.685,20.095Zm.884-6.942V10.287a3.268,3.268,0,0,0-1.637-2.816L24.585.954a3.284,3.284,0,0,0-3.291,0L9.947,7.471A3.268,3.268,0,0,0,8.31,10.287v2.227a.884.884,0,1,0,1.768,0V10.287a1.535,1.535,0,0,1,.77-1.294l11.33-6.517a1.422,1.422,0,0,1,1.523,0L34.982,9.059a1.456,1.456,0,0,1,.77,1.294v2.734a2.4,2.4,0,1,0,1.817.065Z" transform="translate(-6.656 -0.512)" fill="#4388fb"/>
+    </g>
+  </g>
+</svg>
diff --git a/hx-op/src/router/home.ts b/hx-op/src/router/home.ts
index c4e935a..b8ea9f4 100644
--- a/hx-op/src/router/home.ts
+++ b/hx-op/src/router/home.ts
@@ -6,23 +6,14 @@ const home = {
   redirect: { name: 'homeIndex' },
   children: [
     {
-      path: 'homeModule',
-      name: 'HomeModule',
-      meta: { title: '首页', hideChildren: true, icon: 'dicizhishou' },
-      component: Base,
-      redirect: { name: 'homeIndex' },
-      children: [
-        {
-          path: 'index',
-          name: 'homeIndex',
-          component: () => import('/@/view/developing.vue'),
-          meta: {
-            title: '首页',
-            keepAlive: true,
-            // backApi: [],
-          },
-        },
-      ],
+      path: 'index',
+      name: 'homeIndex',
+      component: () => import('/@/view/developing.vue'),
+      meta: {
+        title: '首页',
+        keepAlive: true,
+        // backApi: [],
+      },
     },
   ],
 };
diff --git a/hx-op/src/router/organizationManage.ts b/hx-op/src/router/organizationManage.ts
index 83c3dd1..f4ecc42 100644
--- a/hx-op/src/router/organizationManage.ts
+++ b/hx-op/src/router/organizationManage.ts
@@ -1,28 +1,19 @@
 const Base = () => import('/nerv-lib/saas/view/system/layout/content.vue');
 const organizationManage = {
   path: '/organizationManage',
-  name: 'organizationManage',
+  name: 'EnterpriseManage',
   meta: { title: '企业管理', icon: 'dicizhishou', index: 99, hideChildren: true },
-  redirect: { name: 'EnterpriseManage' },
+  redirect: { name: 'EnterpriseManageIndex' },
   children: [
     {
-      path: 'enterpriseManage',
-      name: 'EnterpriseManage',
-      meta: { title: '企业管理', hideChildren: true, icon: 'dicizhishou' },
-      component: Base,
-      redirect: { name: 'EnterpriseManageIndex' },
-      children: [
-        {
-          path: 'index',
-          name: 'EnterpriseManageIndex',
-          component: () => import('/@/view/organizationManage/enterpriseManage/index.vue'),
-          meta: {
-            title: '企业管理',
-            keepAlive: true,
-            // backApi: [],
-          },
-        },
-      ],
+      path: 'index',
+      name: 'EnterpriseManageIndex',
+      component: () => import('/@/view/organizationManage/enterpriseManage/index.vue'),
+      meta: {
+        title: '企业管理',
+        keepAlive: true,
+        // backApi: [],
+      },
     },
   ],
 };
diff --git a/hx-op/src/theme/global.less b/hx-op/src/theme/global.less
index 714d672..fc42a0d 100644
--- a/hx-op/src/theme/global.less
+++ b/hx-op/src/theme/global.less
@@ -11,10 +11,11 @@
 //   .ant-menu-dark.ant-menu-horizontal>.ant-menu-item:hover {
 //     background-color: #43BB79 !important;
 //   }
-  
+
 .ant-menu-inline .ant-menu-item,
 .ant-menu-inline .ant-menu-submenu-title {
-  width: 100% !important;
+  max-width: 100% !important;
+  transition: none !important;
 }
 
 .ns-basic-table .ant-btn:hover {
@@ -46,17 +47,17 @@
 }
 
 // header菜单字体样式
-.ant-menu-dark.ant-menu-horizontal>.ant-menu-item,
-.ant-menu-dark.ant-menu-horizontal>.ant-menu-submenu {
-  color: #fff;
-}
+// .ant-menu-dark.ant-menu-horizontal>.ant-menu-item,
+// .ant-menu-dark.ant-menu-horizontal>.ant-menu-submenu {
+//   color: #fff;
+// }
 
-.ant-menu-dark .ant-menu-item,
-.ant-menu-dark .ant-menu-item-group-title,
-.ant-menu-dark .ant-menu-item>a,
-.ant-menu-dark .ant-menu-item>span>a {
-  color: #fff;
-}
+// .ant-menu-dark .ant-menu-item,
+// .ant-menu-dark .ant-menu-item-group-title,
+// .ant-menu-dark .ant-menu-item>a,
+// .ant-menu-dark .ant-menu-item>span>a {
+//   color: #fff;
+// }
 
 @font-face {
   /*给字体命名*/
@@ -111,13 +112,13 @@
 
 .ant-menu-title-content  {
   svg {
-    color: #A1ABC2;
+    // color: #A1ABC2;
   }
 }
 
 .ant-menu-item-selected {
   svg {
-    color: #D0DBF5;
+    // color: #D0DBF5;
   }
 }
 
@@ -181,3 +182,7 @@
     background-color: #AEAEAE;
   }
 }
+
+#app {
+  min-width: 1200px;
+}

From 33eb153885f45bc016283e3ab41fd91c679b3922 Mon Sep 17 00:00:00 2001
From: chenpingsen <chenpingsen>
Date: Mon, 8 Jul 2024 10:34:43 +0800
Subject: [PATCH 6/6] =?UTF-8?q?add:=E7=85=A7=E6=98=8E=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9/=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lightingManage/indexs.vue                 | 2240 +----------------
 .../lightingManage/indexs1.vue                | 2197 ++++++++++++++++
 .../equipmentControl/lightingManage/light.vue |  135 +
 3 files changed, 2394 insertions(+), 2178 deletions(-)
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue

diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index e1840d1..d4442e8 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
@@ -1,2197 +1,81 @@
 <template>
-  <div class="lighting-img" style="overflow: hidden">
-    <div class="lighting-img-box">
-      <img src="../image/bg.jpg" />
-      <div class="bulbBox">
-        <div
-          v-for="(bulb, index) in bulbs"
-          :key="index"
-          :class="['wh100', bulb.className]"
-          v-show="bulb.visible">
-          <img class="bulbImg" :src="bulb.imageUrl" alt="" />
-        </div>
-      </div>
-    </div>
-    <div class="btn-box">
-      <button class="F1">1F</button><br />
-      <button class="F2">2F</button><br />
-      <button class="platform">站台</button>
-    </div>
-    <div class="light-tag">
-      <div class="light-tag-tit">
-        <img class="tagimg" src="/asset/image//bulbLogo/21962.png" alt="" />
-        <span
-          class="tagtext"
-          :style="{
-            fontSize: '16px',
-            fontWeight: 700,
-            color: 'rgba(255, 255, 255, 1)',
-          }"
-          >站厅照明 1区</span
-        >
-        <button
-          :style="{
-            width: ' 50px',
-            height: '24px',
-            opacity: 1,
-            background: 'rgba(57, 215, 187, 0.1)',
-            border: '1px solid rgba(57, 215, 187, 1)',
-            fontSize: '12px',
-            fontWeight: 400,
-            lineHeight: ' 17.38px',
-            color: 'rgba(57, 215, 187, 1)',
-            marginLeft: '180px',
-          }"
-          >正常</button
-        >
-      </div>
-      <div class="light-tag-box">
-        <img src="/asset/image//bulbLogo/22496.png" alt="" />
-        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
-          >控制模式</span
-        >
-        <span
-          :style="{
-            color: 'rgba(255, 255, 255, 1)',
-            fontSize: '16px',
-            fontWeight: '700',
-            marginRight: '20px',
-          }"
-          >自动</span
-        >
-        <img src="/asset/image//bulbLogo/22546.png" alt="" />
-        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">亮度</span>
-        <span
-          :style="{
-            color: 'rgba(255, 255, 255, 1)',
-            fontSize: '16px',
-            fontWeight: '700',
-            marginLeft: '20px',
-          }"
-          >1000lux</span
-        >
-        <img src="/asset/image//bulbLogo/22554.png" alt="" />
-        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
-          >控制场景</span
-        >
-        <span
-          :style="{
-            color: 'rgba(255, 255, 255, 1)',
-            fontSize: '16px',
-            fontWeight: '700',
-            marginRight: '20px',
-          }"
-          >舒适</span
-        >
-        <img src="/asset/image//bulbLogo/22553.png" alt="" />
-        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">色温</span>
-        <span
-          :style="{
-            color: 'rgba(255, 255, 255, 1)',
-            fontSize: '16px',
-            fontWeight: '700',
-            marginLeft: '20px',
-          }"
-          >4200k</span
-        >
-      </div>
-    </div>
-  </div>
-  <a-drawer
-    v-model:visible="visible"
-    class="custom-class"
-    width="496"
-    height="1080"
-    placement="right"
-    :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
-    :closable="false"
-    id="Odrawer"
-    :maskStyle="{ 'background-color': 'rgba(0,0,0,0)' }">
-    <div>
-      <a-tabs v-model:activeKey="activeKey">
-        <a-tab-pane key="1" tab="控制面板">
-          <!-- 照明区域 -->
-          <div>
-            <div class="lightarea">
-              <div class="lightareatab"></div>
-              <span class="lightareatext"> 照明区域 </span>
-              <button
-                class="plan"
-                :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
-                @click="togglePlan">
-                {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
-              </button>
+    <div class="lighting-box">
+        <div class="lighting-img-box">
+            <!-- 左上角，区域切换 -->
+            <div class="btn-box">
+                <button class="btn-item">1F</button>
+                <button class="btn-item">2F</button>
+                <button class="btn-item">站台</button>
             </div>
-            <!-- 照明区域按钮部分 -->
+            <!-- 楼层区域 -->
             <div class="area">
-              <template v-if="!showAllButtonsarea">
-                <button
-                  v-for="(button, index) in buttons1"
-                  :key="index"
-                  :class="{ btn: true, selected: button === selectedButton }"
-                  @click="selectButton(button)">
-                  {{ button.label }}
-                </button>
-                <div style="margin-top: 10px">
-                  <span @click="showAllButtonsarea = true" class="openzm"
-                    ><down-outlined />展开</span
-                  >
-                </div>
-              </template>
-              <template v-else>
-                <button
-                  v-for="(button, index) in buttons"
-                  :key="index"
-                  :class="{ btn: true, selected: button === selectedButton }"
-                  @click="selectButton(button)">
-                  {{ button.label }}
-                </button>
-                <div style="margin-top: 10px">
-                  <span @click="showAllButtonsarea = false" class="openzm"
-                    ><up-outlined />回缩</span
-                  >
-                </div>
-              </template>
-            </div>
-          </div>
-          <!-- 照明回路部分 -->
-          <div>
-            <div class="circuitarea" v-if="selectedButton">
-              <div class="circuittab"></div>
-              <span class="circuittext">照明回路</span>
-              <div class="btn2">
-                <button
-                  class="openplan"
-                  :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
-                  @click="togglePlan2">
-                  {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
-                </button>
-                <a-switch
-                  v-model:checked="selectAllCheckbox"
-                  :class="{
-                    'blue-background': selectAllCheckbox,
-                    'grey-background': !selectAllCheckbox,
-                  }"
-                  @change="toggleAllSelection" />
-                <button @click="allbtn1" class="allbtn">全选</button>
-                <button class="both" @click="selectAll">
-                  {{ isAllchoose ? '多选' : '单选' }}
-                </button>
-              </div>
-            </div>
-            <div class="btnarea" v-if="selectedButton">
-              <template v-if="!showAllButtons">
-                <button
-                  v-for="(button2, index) in limitedButtons"
-                  :key="index"
-                  :class="{ btn: true, selected: button2.selected }"
-                  class="zmhlbtn"
-                  @click="toggleSelection(button2)">
-                  <stop-outlined v-if="button2.zmhld" />
-                  {{ button2.label }}
-                </button>
-                <div style="margin-top: 10px">
-                  <span @click="showAllButtons = true" class="openzm"><down-outlined />展开</span>
-                </div>
-              </template>
-              <template v-else>
-                <button
-                  v-for="(button2, index) in buttons2"
-                  :key="index"
-                  :class="{ btn: true, selected: button2.selected }"
-                  @click="toggleSelection(button2)">
-                  {{ button2.label }}
-                </button>
-                <div style="margin-top: 10px">
-                  <span @click="showAllButtons = false" class="openzm"><up-outlined />回缩</span>
-                </div>
-              </template>
-            </div>
-          </div>
-          <!-- 控制模式 -->
-          <div>
-            <div class="controlarea" v-show="showControlMode">
-              <div class="controltab"></div>
-              <span class="controltext"> 控制模式 </span>
-            </div>
-            <!-- 控制模式按钮部分 -->
-            <div class="controlmodebtnarea" v-show="showControlMode">
-              <button
-                v-for="(button3, index) in controlbutton"
-                :key="index"
-                :class="{ btn: true, selected: button3.label === selectedButton3 }"
-                @click="selectButton3(button3)">
-                {{ button3.label }}
-              </button>
-            </div>
-          </div>
-          <!-- 控制场景 -->
-          <div>
-            <div class="controlscenearea" v-show="showControlScene">
-              <div class="controlscenetab"></div>
-              <span class="controlscenetext"> 控制场景 </span>
-            </div>
-            <!-- 控制场景按钮部分 -->
-            <div class="controlscenebtnarea" v-show="showControlScene">
-              <button
-                v-for="(button4, index) in controlscenebuttons"
-                :key="index"
-                :class="{ btn: true, selected: button4.label === selectedButton4 }"
-                @click="selectButton4(button4)">
-                {{ button4.label }}
-              </button>
-            </div>
-          </div>
-          <!-- 灯具参数 -->
-          <div>
-            <div class="lightparametersarea" v-if="selectedButton4">
-              <div class="lightparameterstab"></div>
-              <span class="lightparameterstext"> 灯具参数 </span>
-            </div>
-            <div class="lightparameterstextarea" v-if="selectedButton4">
-              <table class="custom-table table1">
-                <thead>
-                  <tr :style="{ background: 'rgba(35,45,69)' }">
-                    <th>开启数量</th>
-                    <th>亮度(lux)</th>
-                    <th>色温</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="(row, index) in lightSource"
-                    :key="index"
-                    @click="handleRowClick(row.num)"
-                    :style="{ height: '50px' }">
-                    <td>{{ row.num }}</td>
-                    <td>{{ row.light }}</td>
-                    <td>{{ row.tempruter }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div class="bottom">
-            <button class="flushed" @click="refresh">刷新</button>
-            <button class="execute" @click="showModal">执行</button>
-          </div>
-          <a-modal
-            :v-if="cxlist.length === 0"
-            v-model:visible="executevisible"
-            width="500px"
-            height="792px"
-            okText="执行"
-            :closable="false"
-            @ok="handleOk2"
-            :mask="false"
-            :bodyStyle="{
-              opacity: 1,
-              background: ' rgba(0,0,0)',
-              color: 'rgba(255,83,0)',
-              boxSizing: 'borderBox',
-              display: 'flex',
-              flexDirection: 'column',
-              position: 'fixed',
-              right: '496px',
-              top: '0',
-            }">
-            <div :v-if="cxlist.length === 0" style="height: 792px">
-              <div>
-                <div class="div-operation"></div>
-                <span class="text-operation">变更内容 </span>
-              </div>
-              <div class="jbox" v-for="item in cxlist" :key="item.id">
-                <div class="journal" style="margin-top: 20px">
-                  <div class="imgText">
-                    <div class="zjzm">
-                      <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
-                      <span
-                        class="titletext"
-                        style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
-                        >{{ item.name }}</span
-                      >
+                <div class="area-item area1" :class="{ 'isActive': area === 1 }" @click="getArea(1)">
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.1)"></div>
+                    </div>
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.2)"></div>
                     </div>
-                    <button class="cxbtn" @click="delbtn(item.id)">撤销</button>
-                  </div>
-                  <div class="control-btn">
-                    <button
-                      style="
-                        width: 96px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        border: 1px solid rgba(95, 154, 251, 1);
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制模式
-                    </button>
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >手动</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                        margin-right: 40px;
-                      "
-                      >自动</span
-                    >
-                  </div>
-                  <div class="light-btn">
-                    <button
-                      style="
-                        width: 68px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        border: 1px solid rgba(95, 154, 251, 1);
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      亮度
-                    </button>
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >100lux</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(243, 97, 99, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                      "
-                      >30lux</span
-                    >
-                  </div>
-                  <div class="controlarea-btn">
-                    <button
-                      style="
-                        width: 96px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        border: 1px solid rgba(95, 154, 251, 1);
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制场景
-                    </button>
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >手动</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                        margin-right: 40px;
-                      "
-                      >自动</span
-                    >
-                  </div>
-                  <div class="temp-btn">
-                    <button
-                      style="
-                        width: 68px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-                        border: 1px solid rgba(95, 154, 251, 1);
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      色温
-                    </button>
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >4000k</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                      "
-                      >3800k</span
-                    >
-                  </div>
                 </div>
-              </div>
-            </div>
-          </a-modal>
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="计划列表" force-render>
-          <div class="divadd">
-            <button class="add" @click="addModal">添加</button>
-          </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" :key="index">
-                <td>{{ row.key }}</td>
-                <td>{{ row.data }}</td>
-                <td>{{ row.planname }}</td>
-                <td v-if="row.status === '待执行'">
-                  <button
-                    style="
-                      font-size: 12px;
-                      background: rgba(57, 215, 187, 0.1);
-                      color: rgba(57, 215, 187, 1);
-                      border: 1px solid rgba(57, 215, 187, 1);
-                    ">
-                    {{ row.status }}
-                  </button>
-                </td>
-                <td v-if="row.status !== '待执行'">
-                  <button
-                    style="
-                      font-size: 12px;
-                      background: rgba(243, 97, 99, 0.1);
-                      border: 1px solid rgba(243, 97, 99, 1);
-                      color: rgba(243, 97, 99, 1);
-                    ">
-                    {{ row.status }}
-                  </button>
-                </td>
-                <td>
-                  <button class="tabreboot" @click="handlerefClick1">重启</button>
-                  <button class="tabdelete">删除</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <a-modal
-            v-model:visible="addvisible"
-            width="500px"
-            height="792px"
-            :closable="false"
-            :mask="false"
-            :bodyStyle="{
-              opacity: 1,
-              background: ' rgba(0,0,0)',
-              color: 'rgba(255,83,0)',
-              boxSizing: 'borderBox',
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100vh',
-              maxHeight: '100vh',
-              position: 'fixed',
-              right: '496px',
-              top: '0',
-            }">
-            <div>
-              <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="mockData"
-                show-search
-                :filter-option="filterOption"
-                :render="(item) => item.title"
-                @change="handleChange"
-                :style="{ color: 'rgba(255,255,255,1)' }"
-                @search="handleSearch"
-                :listStyle="{ border: '2px solid rgba(25,74,125,1)' }" />
-            </div>
-          </a-modal>
-        </a-tab-pane>
-        <a-tab-pane key="3" tab="日志">
-          <table class="custom-table table1">
-            <thead>
-              <tr :style="{ background: 'rgba(35,45,69)' }">
-                <th>序号</th>
-                <th>执行时间</th>
-                <th>操作内容</th>
-                <th>操作人</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(row, index) in dataSource1"
-                :key="index"
-                @click="handleRowClick(row.key)"
-                :class="row.key === trindex ? 'istrindex' : ''">
-                <td>{{ row.key }}</td>
-                <td>{{ row.data }}</td>
-                <td>{{ row.planname }}</td>
-                <td>{{ row.status }}</td>
-              </tr>
-            </tbody>
-          </table>
-          <a-modal
-            width="500px"
-            v-model:visible="logModalVisible"
-            :closable="false"
-            @cancel="closeLogModal"
-            :footer="null"
-            :mask="false"
-            :bodyStyle="{
-              marginLeft: 200,
-              background: 'rgba(0, 0, 0, 1)',
-              opacity: 0.8,
-              boxSizing: 'borderBox',
-              display: 'flex',
-              flexDirection: 'column',
-              position: 'fixed',
-              right: '496px',
-              top: '0',
-            }">
-            <div style="height: calc(100vh - 96px)">
-              <div>
-                <div class="div-operation"></div>
-                <span class="text-operation">操作日志</span>
-              </div>
-              <div class="journal" style="margin-top: 20px" v-for="item in cxlist" :key="item.id">
-                <div class="imgText">
-                  <div class="zjzm">
-                    <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
-                    <span
-                      style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
-                      >{{ item.name }}</span
-                    >
-                  </div>
+                <div class="area-item area2" @click="getArea(2)">
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow2" @click.stop="getArea(2.1)"></div>
+                    </div>
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow2" @click.stop="getArea(2.2)"></div>
+                    </div>
                 </div>
-
-                <div class="gird22">
-                  <div class="control-btn">
-                    <button
-                      style="
-                        width: 96px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        border: 1px solid rgba(95, 154, 251, 1);
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制模式
-                    </button>
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >{{ item.manual }}</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                        margin-right: 40px;
-                      "
-                      >{{ item.automatic }}</span
-                    >
-                  </div>
-                  <div class="light-btn">
-                    <button
-                      style="
-                        width: 68px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        border: 1px solid rgba(95, 154, 251, 1);
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      亮度
-                    </button>
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >{{ item.brightness }}</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                      "
-                      >{{ item.brightness2 }}</span
-                    >
-                  </div>
-                  <div class="controlarea-btn">
-                    <button
-                      style="
-                        width: 96px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        border: 1px solid rgba(95, 154, 251, 1);
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制场景
-                    </button>
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >{{ item.manual2 }}</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                        margin-right: 40px;
-                      "
-                      >{{ item.automatic2 }}</span
-                    >
-                  </div>
-                  <div class="temp-btn">
-                    <button
-                      style="
-                        width: 68px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-                        border: 1px solid rgba(95, 154, 251, 1);
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      色温
-                    </button>
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >{{ item.brightness3 }}</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                      "
-                      >{{ item.brightness4 }}</span
-                    >
-                  </div>
+                <div class="area-item area3" @click="getArea(3)">
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow3" @click.stop="getArea(3.1)"></div>
+                    </div>
+                </div>
+                <div class="area-item area4" @click="getArea(4)">
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow4" @click.stop="getArea(4.1)"></div>
+                    </div>
                 </div>
-              </div>
             </div>
-          </a-modal>
-          <!-- <div class="divadd">
-            <button class="add">刷新</button>
-          </div> -->
-        </a-tab-pane>
-      </a-tabs>
+            <!-- 照明设备 -->
+            <div class="lights">
+                <light :styleObject="{left: '190px', bottom: '200px'}" :type="1"></light>
+                <light :styleObject="{left: '245px', bottom: '125px'}" :type="2"></light>
+                <light :styleObject="{left: '355px', bottom: '160px'}" :type="3"></light>
+                <light :styleObject="{left: '295px', bottom: '230px'}" :type="3"></light> 
+                <light :styleObject="{left: '460px', bottom: '230px'}" :type="3"></light> 
+                <light :styleObject="{left: '510px', bottom: '190px'}" :type="3"></light> 
+                <light :styleObject="{left: '415px', bottom: '275px'}" :type="1"></light> 
+            </div>
+        </div>
+        <!-- 右侧抽屉的触发按钮 -->
+        <div class="drawer-box" v-if="!visible">
+            <double-left-outlined class="drawer-icon" style="color: rgba(255, 255, 255, 1)" />
+        </div>
     </div>
-  </a-drawer>
-  <div class="drawer-title1" v-if="!visible">
-    <a-button @click="toggleDrawer" class="arrowbtn">
-      <double-left-outlined style="color: rgba(255, 255, 255, 1)" />
-    </a-button>
-  </div>
-  <div class="drawer-title2" v-if="visible">
-    <a-button @click="toggleDrawer" class="arrowbtn">
-      <double-right-outlined style="color: rgba(255, 255, 255, 1)" />
-    </a-button>
-  </div>
+    
 </template>
-
+  
 <script setup lang="ts">
-  import { ref, computed } from 'vue';
-  import {
-    DownOutlined,
-    UpOutlined,
+
+import { ref } from 'vue';
+import light from './light.vue';
+import {
     DoubleLeftOutlined,
-    DoubleRightOutlined,
-    StopOutlined,
+    DoubleRightOutlined
   } from '@ant-design/icons-vue';
 
-  const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
-  const toggleDrawer = () => {
-    visible.value = !visible.value;
-  };
-  const handleOk2 = (e: MouseEvent) => {
-    console.log(e);
-    console.log('ok2');
-    executevisible.value = false;
-  };
-  const cxlist = ref([
-    {
-      id: '1',
-      name: '站厅照明  1区',
-      manual: '手动',
-      automatic: '自动',
-      brightness: '100lux',
-      brightness2: '30lux',
-      manual2: '手动',
-      automatic2: '自动',
-      brightness3: '4000k',
-      brightness4: '3800k',
-    },
-    {
-      id: '2',
-      name: '站厅照明  2区',
-      manual: '手动',
-      automatic: '自动',
-      brightness: '100lux',
-      brightness2: '30lux',
-      manual2: '手动',
-      automatic2: '自动',
-      brightness3: '4000k',
-      brightness4: '3800k',
-    },
-    {
-      id: '3',
-      name: '站厅照明  3区',
-      manual: '手动',
-      automatic: '自动',
-      brightness: '100lux',
-      brightness2: '30lux',
-      manual2: '手动',
-      automatic2: '自动',
-      brightness3: '4000k',
-      brightness4: '3800k',
-    },
-  ]);
+let area = ref(1)
+let visible = ref(false)
 
-  const bulbs = ref([
-    {
-      className: 'bulbLogo1',
-      imageUrl: '/asset/image/bulbLogo/22419.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo2',
-      imageUrl: '/asset/image/bulbLogo/22419.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo3',
-      imageUrl: '/asset/image/bulbLogo/22419.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo4',
-      imageUrl: '/asset/image/bulbLogo/22419.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo5',
-      imageUrl: '/asset/image/bulbLogo/22394.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo6',
-      imageUrl: '/asset/image/bulbLogo/22394.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo7',
-      imageUrl: '/asset/image/bulbLogo/22394.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo8',
-      imageUrl: '/asset/image/bulbLogo/22394.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo9',
-      imageUrl: '/asset/image/bulbLogo/22396.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo10',
-      imageUrl: '/asset/image/bulbLogo/22396.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo11',
-      imageUrl: '/asset/image/bulbLogo/22396.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo12',
-      imageUrl: '/asset/image/bulbLogo/22396.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo13',
-      imageUrl: '/asset/image/bulbLogo/22400.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo14',
-      imageUrl: '/asset/image/bulbLogo/22400.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo15',
-      imageUrl: '/asset/image/bulbLogo/22400.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo16',
-      imageUrl: '/asset/image/bulbLogo/22400.png',
-      visible: true,
-    },
-  ]);
 
-  // 照明区域按钮单选
-  const isPlanEnabled = ref(true); // 初始状态是启用
-  // 启用面板
-  const togglePlan = () => {
-    isPlanEnabled.value = !isPlanEnabled.value;
-  };
-  const showAllButtonsarea = ref(false);
-  // 最多展示八个按钮
-  const buttons1 = computed(() => buttons.value.slice(0, 8));
-  const buttons = ref([
-    { label: 'A区', selected: false, id: 1 },
-    { label: 'B区', selected: false, id: 2 },
-    { label: 'C区', selected: false, id: 3 },
-    { label: 'D区', selected: false, id: 4 },
-    { label: '计划启用', selected: false, id: 5 },
-    { label: 'A区', selected: false, id: 6 },
-    { label: 'B区', selected: false, id: 7 },
-    { label: 'C区', selected: false, id: 8 },
-    { label: 'D区', selected: false, id: 4 },
-    { label: '计划启用', selected: false, id: 5 },
-    { label: 'A区', selected: false, id: 6 },
-    { label: 'B区', selected: false, id: 7 },
-    { label: 'C区', selected: false, id: 8 },
-  ]);
-  const selectedButton = ref(null);
-  const selectButton = (button) => {
-    selectedButton.value = button;
-    const startIndex = (button.id - 1) * 4; // 计算当前区域灯泡的起始索引
-    const endIndex = startIndex + 4; // 计算当前区域灯泡的结束索引
-    bulbs.value.forEach((bulb, index) => {
-      bulb.visible = index >= startIndex && index < endIndex;
-    });
-  };
-
-  // 照明回路按钮
-  const isAllchoose = ref(true);
-  let singleSelection = ref(true); // 默认为单选
-  const selectAllCheckbox = ref(false);
-  const showControlMode = ref(false);
-  const showAllButtons = ref(false);
-  // 默认展示八个
-  const limitedButtons = computed(() => buttons2.value.slice(0, 8));
-  const buttons2 = ref([
-    { id: 1, label: '1区', selected: false, zmhld: true },
-    { id: 2, label: '2区', selected: false, zmhld: false },
-    { id: 3, label: '3区', selected: false, zmhld: false },
-    { id: 4, label: '4区', selected: false, zmhld: false },
-    { id: 5, label: '5区', selected: false, zmhld: false },
-    { id: 6, label: '6区', selected: false, zmhld: false },
-    { id: 7, label: '7区', selected: false, zmhld: false },
-    { id: 8, label: '1区', selected: false, zmhld: false },
-    { id: 9, label: '2区', selected: false, zmhld: false },
-    { id: 10, label: '3区', selected: false, zmhld: false },
-  ]);
-  const zmhlid = ref();
-  const isPlanEnabled2 = ref(true);
-  const togglePlan2 = () => {
-    isPlanEnabled2.value = !isPlanEnabled2.value;
-    if (selectAllCheckbox.value) {
-      buttons2.value.forEach((button) => {
-        button.zmhld = true;
-        button.selected = false;
-      });
-    } else {
-      const item = buttons2.value.find((button) => button.id === zmhlid.value);
-      if (item) {
-        item.zmhld = !item.zmhld;
-        item.selected = false;
-      }
-    }
-  };
-  const selectAll = () => {
-    if (isAllchoose.value === false) {
-      isPlanEnabled2.value = limitedButtons.value[0].zmhld;
-    }
-    singleSelection.value = !singleSelection.value;
-    isAllchoose.value = !isAllchoose.value;
-    if (singleSelection.value) {
-      // 单选
-      buttons2.value.forEach((button) => {
-        button.selected = false;
-      });
-    } else {
-      // 多选
-      buttons2.value.forEach((button) => {
-        button.selected = true;
-      });
-    }
-    selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
-  };
-  const allbtn1 = () => {
-    buttons2.value.forEach((button) => {
-      if (!button.zmhld) {
-        button.selected = true;
-      }
-    });
-    selectAllCheckbox.value = true;
-  };
-  const toggleAllSelection = () => {
-    if (selectAllCheckbox.value) {
-      // 如果全选开关被打开，实现多选模式
-      buttons2.value.forEach((button) => {
-        button.selected = false;
-      });
-      singleSelection.value = false;
-    } else {
-      // 如果全选开关被关闭，实现单选模式
-      buttons2.value.forEach((button) => {
-        button.selected = false;
-      });
-      singleSelection.value = true;
-    }
-  };
-
-  const toggleSelection = (button) => {
-    console.log(button);
-    zmhlid.value = button.id;
-    console.log(zmhlid.value);
-    isPlanEnabled2.value = button.zmhld;
-    if (button.zmhld) {
-      return;
-    } else {
-      if (singleSelection.value) {
-        // 单选模式
-        buttons2.value.forEach((b) => {
-          if (b !== button) {
-            b.selected = false;
-          }
-        });
-      }
-      button.selected = !button.selected;
-      // 如果当前处于多选模式，更新全选开关的状态
-      if (!singleSelection.value) {
-        selectAllCheckbox.value = buttons2.value.some((button) => button.selected);
-      } else {
-        // 在单选模式下，全选开关应设为false，因为不可能所有按钮都被选中
-        selectAllCheckbox.value = false;
-      }
-      showControlMode.value = button;
-    }
-  };
-
-  // 控制模式按钮 vv
-  const selectedButton3 = ref('');
-  const showControlScene = ref(false);
-  const controlbutton = ref([
-    { label: '托管', selected: false },
-    { label: 'AI', selected: false },
-    { label: '手动', selected: false },
-  ]);
-  // 控制场景按钮
-  const selectedButton4 = ref('');
-  const controlscenebuttons = ref([
-    { label: '检修', selected: false },
-    { label: '午休', selected: false },
-    { label: '疏散', selected: false },
-    { label: '客流高峰', selected: false },
-  ]);
-  const selectButton3 = (button3) => {
-    selectedButton3.value = button3.label;
-    showControlScene.value = button3.label === '手动';
-    selectedButton4.value = ''; // 清空选中的控制场景按钮
-  };
-  const selectButton4 = (button4) => {
-    selectedButton4.value = button4.label;
-  };
-
-  const dataSource = ref([
-    {
-      key: '1',
-      data: '2024-05-01',
-      planname: '劳动节',
-      status: '暂停中',
-    },
-    {
-      key: '2',
-      data: '2024-05-01',
-      planname: '国庆节',
-      status: '待执行',
-    },
-    {
-      key: '3',
-      data: '2024-05-01',
-      planname: '元旦',
-      status: '待执行',
-    },
-  ]);
-  const dataSource1 = ref([
-    {
-      key: '1',
-      data: '2024-05-01',
-      planname: '计划再开',
-      status: '张三111',
-    },
-    {
-      key: '2',
-      data: '2024-05-01',
-      planname: '检修模式',
-      status: '李四12',
-    },
-    {
-      key: '3',
-      data: '2024-05-01',
-      planname: '设备变更',
-      status: '王五33',
-    },
-  ]);
-  // 抽屉默认显示
-  const visible = ref(true);
-  const activeKey = ref('1');
-
-  const refresh = () => {
-    selectedButton.value = null;
-    showControlMode.value = false;
-    showControlScene.value = false;
-    selectedButton3.value = null;
-    selectedButton4.value = null;
-  };
-
-  // 操作日志
-  const logModalVisible = ref(false);
-  const handlerefClick1 = () => {
-    console.log(1111);
-    executevisible.value = true;
-  };
-
-  let trindex = ref('-1');
-  const handleRowClick = (index: any) => {
-    trindex.value = index;
-    if (index === trindex.value) {
-      console.log('tri');
-    }
-    // 显示模态框
-    logModalVisible.value = true;
-  };
-  const closeLogModal = () => {
-    logModalVisible.value = false;
-  };
-  // 执行确认
-  const executevisible = ref<boolean>(false);
-  const showModal = () => {
-    executevisible.value = true;
-  };
-  // 添加模态框
-  const addvisible = ref<boolean>(false);
-  const addModal = () => {
-    addvisible.value = true;
-  };
-  // 穿梭框
-  interface MockData {
-    key: string;
-    title: string;
-    description: string;
-    chosen: boolean;
-  }
-  const mockData = ref([
-    {
-      key: '1',
-      title: '计划再开',
-    },
-    {
-      key: '2',
-      title: '检修模式',
-    },
-    {
-      key: '3',
-      title: '设备变更',
-    },
-  ]);
-  const targetKeys = ref<string[]>([]);
-  const filterOption = (inputValue: string, option: MockData) => {
-    console.log(option.description);
-
-    return option.description.indexOf(inputValue) > -1;
-  };
-  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 delbtn = (id: any) => {
-    console.log(id);
-    cxlist.value.pop(id);
-    console.log(cxlist.value.length);
-
-    if (cxlist.value.length === 0) {
-      executevisible.value = false;
-    }
-  };
+const getArea = (number: any) => {
+    alert(number)
+};
 </script>
 <style lang="less" scoped>
-  :deep(.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover) {
-    background-color: rgba(20, 41, 76, 1);
-    color: rgb(29, 83, 172);
-  }
-  :deep(.ant-transfer-list-header-selected) {
-    color: rgba(255, 83, 0);
-  }
-
-  :deep(.ant-transfer-list-header > *:not(:last-child)) {
-    color: rgba(255, 83, 0);
-  }
-
-  .tagtext {
-    margin-left: 8px;
-  }
-
-  .light-tag {
-    position: fixed;
-    bottom: 135px;
-    left: 450px;
-    width: 396px;
-    height: 200px;
-    opacity: 0.8;
-    border-radius: 8px;
-    background: rgba(0, 0, 0, 1);
-  }
-
-  .light-tag-tit {
-    display: flex;
-    margin-top: 18px;
-    margin-left: 18px;
-  }
-
-  .light-tag-box {
-    padding: 15px 15px;
-  }
-
-  .light-tag-box > img {
-    width: 120px;
-    height: 51px;
-    margin-bottom: 10px;
-  }
-
-  .light-tag-box > span {
-    color: #fff;
-  }
-
-  .titleimg,
-  .titletext {
-    display: inline-block;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .control-btn,
-  .light-btn {
-    display: inline-block;
-    margin-top: 10px;
-  }
-
-  .controlarea-btn,
-  .temp-btn {
-    display: inline-block;
-    margin-top: 16px;
-  }
-
-  :deep(.ant-drawer-content) {
-    background-color: rgba(0, 0, 0, 1);
-    opacity: 0.8;
-  }
-
-  :deep(.ant-modal-content) {
-    background-color: rgba(0, 0, 0, 1);
-    opacity: 0.8;
-  }
-
-  :deep(.ant-transfer-list) {
-    width: 230px;
-    height: 450px;
-  }
-
-  :deep(.ant-transfer-list-header) {
-    background-color: rgba(0, 0, 0, 1);
-    color: rgba(255, 255, 255, 1);
-  }
-
-  .bulbLogo1 {
-    margin-top: 40%;
-    margin-left: 12%;
-  }
-
-  .bulbLogo2 {
-    margin-top: 35%;
-    margin-left: 20%;
-  }
-
-  .bulbLogo3 {
-    margin-top: 23%;
-    margin-left: 10%;
-  }
-
-  .bulbLogo4 {
-    margin-top: 10%;
-    margin-left: 15%;
-  }
-
-  .bulbLogo5 {
-    margin-top: 8%;
-    margin-left: 13%;
-  }
-
-  .bulbLogo6 {
-    margin-top: 8%;
-    margin-left: 15%;
-  }
-
-  .bulbLogo7 {
-    margin-top: 0%;
-    margin-left: 12%;
-  }
-
-  .bulbLogo9 {
-    margin-top: 35%;
-    margin-left: 20%;
-  }
-
-  .bulbLogo10 {
-    margin-top: 35%;
-    margin-left: 20%;
-  }
-
-  .bulbLogo11 {
-    margin-top: 35%;
-    margin-left: 20%;
-  }
-
-  .bulbLogo12 {
-    margin-top: 35%;
-    margin-left: 20%;
-  }
-
-  .custom-table {
-    border-collapse: collapse;
-    width: 416px;
-    height: 60px;
-    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%;
-    cellspacing: 0;
-    cellpadding: 0;
-    border: 1px solid rgba(255, 255, 255);
-    border-radius: 5px;
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  .lightarea,
-  .circuitarea,
-  .controlarea,
-  .controlscenearea,
-  .lightparametersarea {
-    width: 100%;
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-  }
-
-  .lightareatab,
-  .circuittab,
-  .controltab,
-  .controlscenetab,
-  .lightparameterstab {
-    width: 5px;
-    height: 23px;
-    opacity: 1;
-    background: rgba(26, 174, 251, 1);
-    margin-right: 4px;
-  }
-
-  .lightareatext,
-  .circuittext,
-  .controltext,
-  .controlscenetext,
-  .lightparameterstext {
-    font-size: 14px;
-    color: rgba(255, 255, 255, 1);
-    line-height: 19px;
-    width: 110px;
-    height: 23px;
-    opacity: 1;
-    background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
-  }
-
-  .lightareatab,
-  .lightareatext {
-    display: inline-block;
-    justify-content: center;
-  }
-
-  .plan.enabled {
-    border: none;
-    font-size: 14px;
-    font-weight: 400;
-    border-radius: 5px;
-    color: rgba(255, 255, 255, 1);
-    vertical-align: top;
-    margin-left: 235px;
-    width: 88px;
-    height: 32px;
-    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
-    color: white;
-  }
-
-  .plan.disabled {
-    border: none;
-    font-size: 14px;
-    font-weight: 400;
-    border-radius: 5px;
-    color: rgba(255, 255, 255, 1);
-    vertical-align: top;
-    margin-left: 235px;
-    width: 88px;
-    height: 32px;
-    background-color: red;
-  }
-
-  .plan:disabled {
-    cursor: not-allowed;
-  }
-
-  .openplan.enabled2 {
-    border: none;
-    font-size: 14px;
-    font-weight: 400;
-    border-radius: 5px;
-    color: rgba(255, 255, 255, 1);
-    vertical-align: top;
-    width: 88px;
-    height: 32px;
-    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
-    color: white;
-  }
-
-  .openplan.disabled2 {
-    border: none;
-    font-size: 14px;
-    font-weight: 400;
-    border-radius: 5px;
-    color: rgba(255, 255, 255, 1);
-    vertical-align: top;
-    width: 88px;
-    height: 32px;
-    background-color: red;
-  }
-
-  .openplan:disabled {
-    cursor: not-allowed;
-  }
-
-  .btn2 {
-    display: flex;
-    align-items: center;
-    margin-left: 80px;
-  }
-
-  .openzm {
-    color: rgba(34, 183, 255, 1);
-    margin-left: 20px;
-    font-size: 14px;
-  }
-
-  .custom-checkbox {
-    width: 13px;
-    height: 13px;
-  }
-
-  .both {
-    width: 59.79px;
-    height: 32px;
-    opacity: 1;
-    background: linear-gradient(
-      180deg,
-      rgba(255, 187, 0, 1) 0%,
-      rgba(255, 112, 3, 1) 91.21%,
-      rgba(255, 129, 3, 1) 100%
-    );
-    margin-left: 8px;
-    font-size: 12px;
-    color: rgba(255, 255, 255, 1);
-    border: none;
-    border-radius: 5px;
-  }
-
-  .btn2 {
-    button {
-      margin: 0 5px;
-    }
-  }
-
-  .allbtn {
-    border: 0;
-    width: 40px;
-    color: rgba(255, 255, 255, 1);
-    background-color: transparent;
-  }
-
-  .blue-background.ant-switch-checked {
-    background-color: linear-gradient(
-      180deg,
-      rgba(1, 206, 255, 1) 0%,
-      rgba(0, 150, 229, 1) 100%
-    ) !important;
-  }
-
-  .grey-background.ant-switch {
-    background-color: grey !important;
-  }
-
-  .blue-background.ant-switch-checked .ant-switch-handle {
-    background-color: linear-gradient(
-      180deg,
-      rgba(1, 206, 255, 1) 0%,
-      rgba(0, 150, 229, 1) 100%
-    ) !important;
-  }
-
-  .grey-background.ant-switch .ant-switch-handle {
-    background-color: grey !important;
-  }
-
-  p {
-    color: rgba(255, 255, 255, 1);
-  }
-
-  .area,
-  .btnarea,
-  .controlmodebtnarea,
-  .controlscenebtnarea {
-    margin-left: -17px;
-
-    button {
-      width: 21%;
-      padding: 0 2%;
-    }
-  }
-
-  .btn {
-    width: 92px;
-    height: 40px;
-    border-radius: 4px;
-    opacity: 1;
-    margin-top: 10px;
-    margin-left: 17px;
-    font-size: 14px;
-    font-weight: 400;
-    opacity: 1;
-    border: 1px solid rgba(207, 212, 219, 1);
-    line-height: 20.27px;
-    color: rgba(255, 255, 255, 1);
-    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 rgba(255, 255, 255, 1);
-  }
-
-  .btn:hover {
-    background-color: rgba(207, 212, 219, 1);
-  }
-
-  .btn:active {
-    background-color: rgba(102, 102, 102, 1);
-    color: white;
-  }
-
-  .circuitarea,
-  .controlscenearea,
-  .lightparametersarea {
-    left: 51px;
-    width: 100%;
-    margin-top: 20px;
-  }
-
-  .circuittab,
-  .circuittext {
-    display: inline-block;
-  }
-
-  .batch {
-    width: 60px;
-    height: 32px;
-    opacity: 1;
-    border: 1px solid rgba(67, 136, 251, 1);
-    color: rgba(67, 136, 251, 1);
-    border-radius: 5px;
-    background-color: rgba(255, 255, 255, 1);
-    margin-left: 11px;
-  }
-
-  .controlarea {
-    left: 51px;
-    width: 100%;
-    margin-top: 20px;
-  }
-
-  .controltab,
-  .controltext {
-    display: inline-block;
-  }
-
-  :deep(.cell) {
-    text-align: center;
-  }
-
-  :deep(#pane-first) {
-    height: 100%;
-  }
-
-  .controlscenetab,
-  .controlscenetext {
-    display: inline-block;
-  }
-
-  .lightparameterstab,
-  .lightparameterstext {
-    display: inline-block;
-  }
-
-  .lightparameterstextarea > p {
-    height: 100%;
-    display: flex;
-    border: 1px solid rgba(236, 239, 245, 1);
-    justify-content: center;
-    align-items: center;
-  }
-
-  .bottom {
-    width: 100%;
-    height: 64px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    margin-bottom: 10px;
-  }
-
-  .execute {
-    margin-right: 20px;
-    width: 74px;
-    height: 40px;
-    opacity: 1;
-    border-radius: 4px;
-    background: rgba(67, 136, 251, 1);
-    font-size: 14px;
-    font-weight: 400;
-    color: rgba(255, 255, 255, 1);
-    border: 0;
-    margin-left: 10px;
-  }
-
-  .flushed {
-    width: 74px;
-    height: 40px;
-    opacity: 1;
-    border-radius: 4px;
-    font-size: 14px;
-    font-weight: 400;
-    color: rgba(102, 102, 102, 1);
-    background: rgba(255, 255, 255, 1);
-    border: 1px solid rgba(193, 197, 204, 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;
-  }
-
-  .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);
-  }
-
-  .divadd {
-    width: 100%;
-    height: 64px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    margin-bottom: 10px;
-    margin-right: 20px;
-  }
-
-  .atable {
-    margin-top: 20px;
-  }
-
-  :deep(.ant-table-pagination) {
-    visibility: hidden;
-  }
-
-  .drawer-content {
-    margin-left: 20px;
-  }
-
-  .arrow-indicator {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    z-index: 1;
-  }
-
-  .drawer-title1 {
-    position: fixed;
-    width: 33px;
-    height: 33px;
-    top: 0;
-    bottom: 0;
-    right: 20px;
-    margin: auto;
-    z-index: 99999;
-  }
-
-  .drawer-title2 {
-    position: fixed;
-    width: 33px;
-    height: 33px;
-    top: 0;
-    bottom: 0;
-    right: 495px;
-    margin: auto;
-    z-index: 99999;
-  }
-
-  .arrowbtn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 28px;
-    height: 28px;
-    background: rgba(0, 0, 0, 1);
-    opacity: 0.5;
-    border: none;
-  }
-
-  :deep(.ant-tabs-tab-btn) {
-    color: white;
-  }
-
-  :deep(.ant-table) {
-    background-color: transparent;
-  }
-
-  :deep(.ant-table-bordered) {
-    background-color: transparent;
-  }
-
-  :deep(.ant-table-thead) {
-    background-color: transparent;
-  }
-
-  :deep(.ant-table-cell) {
-    background-color: transparent;
-    color: #fff;
-  }
-  .lighting-img-box {
-    width: 100%;
-    max-height: calc(100% - 79px);
-  }
-  .lighting-img-box > img {
-    width: 100%;
-    height: calc(100vh - 96px);
-    object-fit: cover;
-  }
-  .F1 {
-    width: 120px;
-    height: 50.72px;
-    border-radius: 4px;
-    background: rgba(39, 120, 255, 1);
-    border: 1px solid rgba(51, 199, 255, 1);
-    box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
-    font-size: 24px;
-    font-weight: 400;
-    color: rgba(255, 255, 255, 1);
-  }
-  .F2,
-  .platform {
-    width: 120px;
-    height: 50.72px;
-    border-radius: 4px;
-    background: rgba(7, 72, 116, 1);
-    box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
-    font-size: 24px;
-    font-weight: 400;
-    color: rgba(146, 187, 255, 1);
-    border: 1px solid rgba(39, 120, 255, 1);
-    margin-top: 20px;
-  }
-
-  .btn-box {
-    position: fixed;
-    top: 100px;
-    left: 250px;
-  }
-
-  .lighting-img-box > .bulbBox > .wh100 {
-    width: 38px;
-    height: calc(38px + 19px);
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo1 {
-    position: absolute;
-    top: 10%;
-    left: 10%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo2 {
-    position: absolute;
-    top: 9%;
-    left: 15%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo3 {
-    position: absolute;
-    top: 34%;
-    left: 25%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo4 {
-    position: absolute;
-    top: 45%;
-    left: 30%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo5 {
-    position: absolute;
-    top: 45%;
-    left: 30%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo6 {
-    position: absolute;
-    top: 55%;
-    left: 30%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo7 {
-    position: absolute;
-    top: 60%;
-    left: 40%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo8 {
-    position: absolute;
-    top: 55%;
-    left: 70%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo9 {
-    position: absolute;
-    top: 10%;
-    left: 60%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo10 {
-    position: absolute;
-    top: 10%;
-    left: 40%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo11 {
-    position: absolute;
-    top: 15%;
-    left: 50%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo12 {
-    position: absolute;
-    top: 15%;
-    left: 60%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo13 {
-    position: absolute;
-    top: 55%;
-    left: 70%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo14 {
-    position: absolute;
-    top: 45%;
-    left: 60%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo15 {
-    position: absolute;
-    top: 45%;
-    left: 80%;
-    display: flex;
-    align-items: center;
-  }
-
-  .lighting-img-box > .bulbBox > .bulbLogo16 {
-    position: absolute;
-    top: 45%;
-    left: 90%;
-    display: flex;
-    align-items: center;
-  }
-
-  .editable-cell {
-    position: relative;
-
-    .editable-cell-input-wrapper,
-    .editable-cell-text-wrapper {
-      padding-right: 24px;
-    }
-
-    .editable-cell-text-wrapper {
-      padding: 5px 24px 5px 5px;
-    }
-
-    .editable-cell-icon,
-    .editable-cell-icon-check {
-      position: absolute;
-      right: 0;
-      width: 20px;
-      cursor: pointer;
-    }
-
-    .editable-cell-icon {
-      margin-top: 4px;
-      display: none;
-    }
-
-    .editable-cell-icon-check {
-      line-height: 28px;
-    }
-
-    .editable-cell-icon:hover,
-    .editable-cell-icon-check:hover {
-      color: #108ee9;
-    }
-
-    .editable-add-btn {
-      margin-bottom: 8px;
-    }
-  }
-
-  .editable-cell:hover .editable-cell-icon {
-    display: inline-block;
-  }
-
-  .div-operation {
-    width: 3px;
-    height: 13px;
-    opacity: 1;
-    border-radius: 1px;
-    background: rgba(67, 136, 251, 1);
-  }
-
-  .text-operation {
-    color: rgba(255, 255, 255, 1);
-    font-size: 16px;
-    font-weight: 700;
-    margin-left: 5px;
-  }
-
-  .div-operation,
-  .text-operation {
-    display: inline-block;
-  }
-
-  .jbox {
-    background-color: #000;
-    opacity: 1;
-    z-index: 99999;
-  }
-
-  .journal {
-    padding: 3% 5%;
-    background-size: 450px 177px;
-    width: 482px;
-    height: 177px;
-    background-color: rgba(0, 0, 0);
-    border-radius: 12px;
-    border: 2px solid transparent;
-    border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
-  }
-
-  .imgText {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .ztzm {
-      display: flex;
-      align-items: center;
-    }
-
-    .cxbtn {
-      color: rgba(255, 255, 255, 1);
-      border: none;
-      border-radius: 6px;
-      width: 59.79px;
-      height: 32px;
-      opacity: 1;
-      background: linear-gradient(
-        180deg,
-        rgba(255, 187, 0, 1) 0%,
-        rgba(255, 112, 3, 1) 91.21%,
-        rgba(255, 129, 3, 1) 100%
-      );
-    }
-  }
-
-  :deep(.ant-modal-content) {
-    width: 555px;
-    height: 792px;
-  }
-
-  :deep(.ant-modal-body) {
-    width: 555px;
-    max-height: 792px !important;
-    box-sizing: border-box;
-  }
-
-  .text-change {
-    text-align: center;
-    color: rgba(255, 255, 255, 1);
-    font-size: 20px;
-  }
-
-  .excuno {
-    width: 150px;
-    height: 40px;
-    margin-top: 30px;
-  }
-
-  .excuok {
-    width: 150px;
-    height: 40px;
-    margin-top: 30px;
-  }
-
-  .excubtn {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .addok {
-    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);
-    margin-top: 440px;
-    margin-left: 350px;
-  }
-
-  .zmhlbtn {
-    position: relative;
-  }
-
-  .anticon-stop {
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
-  }
-
-  .istrindex {
-    background: rgba(67, 136, 251, 1);
-  }
-
-  :deep(.ant-modal-mask.ant-modal-content) {
-    height: 100vh;
-    position: fixed;
-    right: 496px;
-    top: 0%;
-  }
-  :deep(.ant-modal-content) {
-    position: fixed;
-    bottom: 20px;
-    right: 500px;
-  }
+@import "./indexs.less";
+.isActive {
+    border: 2px solid white !important;
+}
 </style>
+  
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue
new file mode 100644
index 0000000..30dea40
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue
@@ -0,0 +1,2197 @@
+<template>
+  <div class="lighting-img" style="overflow: hidden">
+    <div class="lighting-img-box">
+      <img src="../image/bg.jpg" />
+      <div class="bulbBox">
+        <div
+          v-for="(bulb, index) in bulbs"
+          :key="index"
+          :class="['wh100', bulb.className]"
+          v-show="bulb.visible">
+          <img class="bulbImg" :src="bulb.imageUrl" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="btn-box">
+      <button class="F1">1F</button><br />
+      <button class="F2">2F</button><br />
+      <button class="platform">站台</button>
+    </div>
+    <div class="light-tag" style="border: 1px solid red">
+      <div class="light-tag-tit">
+        <img class="tagimg" src="/asset/image//bulbLogo/21962.png" alt="" />
+        <span
+          class="tagtext"
+          :style="{
+            fontSize: '16px',
+            fontWeight: 700,
+            color: 'rgba(255, 255, 255, 1)',
+          }"
+          >站厅照明 1区</span
+        >
+        <button
+          :style="{
+            width: ' 50px',
+            height: '24px',
+            opacity: 1,
+            background: 'rgba(57, 215, 187, 0.1)',
+            border: '1px solid rgba(57, 215, 187, 1)',
+            fontSize: '12px',
+            fontWeight: 400,
+            lineHeight: ' 17.38px',
+            color: 'rgba(57, 215, 187, 1)',
+            marginLeft: '180px',
+          }"
+          >正常</button
+        >
+      </div>
+      <div class="light-tag-box">
+        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
+          >控制模式</span
+        >
+        <span
+          :style="{
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: '16px',
+            fontWeight: '700',
+            marginRight: '20px',
+          }"
+          >自动</span
+        >
+        <img src="/asset/image//bulbLogo/22546.png" alt="" />
+        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">亮度</span>
+        <span
+          :style="{
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: '16px',
+            fontWeight: '700',
+            marginLeft: '20px',
+          }"
+          >1000lux</span
+        >
+        <img src="/asset/image//bulbLogo/22554.png" alt="" />
+        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
+          >控制场景</span
+        >
+        <span
+          :style="{
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: '16px',
+            fontWeight: '700',
+            marginRight: '20px',
+          }"
+          >舒适</span
+        >
+        <img src="/asset/image//bulbLogo/22553.png" alt="" />
+        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">色温</span>
+        <span
+          :style="{
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: '16px',
+            fontWeight: '700',
+            marginLeft: '20px',
+          }"
+          >4200k</span
+        >
+      </div>
+    </div>
+  </div>
+  <a-drawer
+    v-model:visible="visible"
+    class="custom-class"
+    width="496"
+    height="1080"
+    placement="right"
+    :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
+    :closable="false"
+    id="Odrawer"
+    :maskStyle="{ 'background-color': 'rgba(0,0,0,0)' }">
+    <div>
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板">
+          <!-- 照明区域 -->
+          <div>
+            <div class="lightarea">
+              <div class="lightareatab"></div>
+              <span class="lightareatext"> 照明区域 </span>
+              <button
+                class="plan"
+                :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
+                @click="togglePlan">
+                {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
+              </button>
+            </div>
+            <!-- 照明区域按钮部分 -->
+            <div class="area">
+              <template v-if="!showAllButtonsarea">
+                <button
+                  v-for="(button, index) in buttons1"
+                  :key="index"
+                  :class="{ btn: true, selected: button === selectedButton }"
+                  @click="selectButton(button)">
+                  {{ button.label }}
+                </button>
+                <div style="margin-top: 10px">
+                  <span @click="showAllButtonsarea = true" class="openzm"
+                    ><down-outlined />展开</span
+                  >
+                </div>
+              </template>
+              <template v-else>
+                <button
+                  v-for="(button, index) in buttons"
+                  :key="index"
+                  :class="{ btn: true, selected: button === selectedButton }"
+                  @click="selectButton(button)">
+                  {{ button.label }}
+                </button>
+                <div style="margin-top: 10px">
+                  <span @click="showAllButtonsarea = false" class="openzm"
+                    ><up-outlined />回缩</span
+                  >
+                </div>
+              </template>
+            </div>
+          </div>
+          <!-- 照明回路部分 -->
+          <div>
+            <div class="circuitarea" v-if="selectedButton">
+              <div class="circuittab"></div>
+              <span class="circuittext">照明回路</span>
+              <div class="btn2">
+                <button
+                  class="openplan"
+                  :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
+                  @click="togglePlan2">
+                  {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
+                </button>
+                <a-switch
+                  v-model:checked="selectAllCheckbox"
+                  :class="{
+                    'blue-background': selectAllCheckbox,
+                    'grey-background': !selectAllCheckbox,
+                  }"
+                  @change="toggleAllSelection" />
+                <button @click="allbtn1" class="allbtn">全选</button>
+                <button class="both" @click="selectAll">
+                  {{ isAllchoose ? '多选' : '单选' }}
+                </button>
+              </div>
+            </div>
+            <div class="btnarea" v-if="selectedButton">
+              <template v-if="!showAllButtons">
+                <button
+                  v-for="(button2, index) in limitedButtons"
+                  :key="index"
+                  :class="{ btn: true, selected: button2.selected }"
+                  class="zmhlbtn"
+                  @click="toggleSelection(button2)">
+                  <stop-outlined v-if="button2.zmhld" />
+                  {{ button2.label }}
+                </button>
+                <div style="margin-top: 10px">
+                  <span @click="showAllButtons = true" class="openzm"><down-outlined />展开</span>
+                </div>
+              </template>
+              <template v-else>
+                <button
+                  v-for="(button2, index) in buttons2"
+                  :key="index"
+                  :class="{ btn: true, selected: button2.selected }"
+                  @click="toggleSelection(button2)">
+                  {{ button2.label }}
+                </button>
+                <div style="margin-top: 10px">
+                  <span @click="showAllButtons = false" class="openzm"><up-outlined />回缩</span>
+                </div>
+              </template>
+            </div>
+          </div>
+          <!-- 控制模式 -->
+          <div>
+            <div class="controlarea" v-show="showControlMode">
+              <div class="controltab"></div>
+              <span class="controltext"> 控制模式 </span>
+            </div>
+            <!-- 控制模式按钮部分 -->
+            <div class="controlmodebtnarea" v-show="showControlMode">
+              <button
+                v-for="(button3, index) in controlbutton"
+                :key="index"
+                :class="{ btn: true, selected: button3.label === selectedButton3 }"
+                @click="selectButton3(button3)">
+                {{ button3.label }}
+              </button>
+            </div>
+          </div>
+          <!-- 控制场景 -->
+          <div>
+            <div class="controlscenearea" v-show="showControlScene">
+              <div class="controlscenetab"></div>
+              <span class="controlscenetext"> 控制场景 </span>
+            </div>
+            <!-- 控制场景按钮部分 -->
+            <div class="controlscenebtnarea" v-show="showControlScene">
+              <button
+                v-for="(button4, index) in controlscenebuttons"
+                :key="index"
+                :class="{ btn: true, selected: button4.label === selectedButton4 }"
+                @click="selectButton4(button4)">
+                {{ button4.label }}
+              </button>
+            </div>
+          </div>
+          <!-- 灯具参数 -->
+          <div>
+            <div class="lightparametersarea" v-if="selectedButton4">
+              <div class="lightparameterstab"></div>
+              <span class="lightparameterstext"> 灯具参数 </span>
+            </div>
+            <div class="lightparameterstextarea" v-if="selectedButton4">
+              <table class="custom-table table1">
+                <thead>
+                  <tr :style="{ background: 'rgba(35,45,69)' }">
+                    <th>开启数量</th>
+                    <th>亮度(lux)</th>
+                    <th>色温</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(row, index) in lightSource"
+                    :key="index"
+                    @click="handleRowClick(row.num)"
+                    :style="{ height: '50px' }">
+                    <td>{{ row.num }}</td>
+                    <td>{{ row.light }}</td>
+                    <td>{{ row.tempruter }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div class="bottom">
+            <button class="flushed" @click="refresh">刷新</button>
+            <button class="execute" @click="showModal">执行</button>
+          </div>
+          <a-modal
+            :v-if="cxlist.length === 0"
+            v-model:visible="executevisible"
+            width="500px"
+            height="792px"
+            okText="执行"
+            :closable="false"
+            @ok="handleOk2"
+            :mask="false"
+            :bodyStyle="{
+              opacity: 1,
+              background: ' rgba(0,0,0)',
+              color: 'rgba(255,83,0)',
+              boxSizing: 'borderBox',
+              display: 'flex',
+              flexDirection: 'column',
+              position: 'fixed',
+              right: '496px',
+              top: '0',
+            }">
+            <div :v-if="cxlist.length === 0" style="height: 792px">
+              <div>
+                <div class="div-operation"></div>
+                <span class="text-operation">变更内容 </span>
+              </div>
+              <div class="jbox" v-for="item in cxlist" :key="item.id">
+                <div class="journal" style="margin-top: 20px">
+                  <div class="imgText">
+                    <div class="zjzm">
+                      <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
+                      <span
+                        class="titletext"
+                        style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
+                        >{{ item.name }}</span
+                      >
+                    </div>
+                    <button class="cxbtn" @click="delbtn(item.id)">撤销</button>
+                  </div>
+                  <div class="control-btn">
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        border: 1px solid rgba(95, 154, 251, 1);
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      控制模式
+                    </button>
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >手动</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                        margin-right: 40px;
+                      "
+                      >自动</span
+                    >
+                  </div>
+                  <div class="light-btn">
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        border: 1px solid rgba(95, 154, 251, 1);
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      亮度
+                    </button>
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >100lux</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(243, 97, 99, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                      "
+                      >30lux</span
+                    >
+                  </div>
+                  <div class="controlarea-btn">
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        border: 1px solid rgba(95, 154, 251, 1);
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      控制场景
+                    </button>
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >手动</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                        margin-right: 40px;
+                      "
+                      >自动</span
+                    >
+                  </div>
+                  <div class="temp-btn">
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+                        border: 1px solid rgba(95, 154, 251, 1);
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      色温
+                    </button>
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >4000k</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                      "
+                      >3800k</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-modal>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render>
+          <div class="divadd">
+            <button class="add" @click="addModal">添加</button>
+          </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" :key="index">
+                <td>{{ row.key }}</td>
+                <td>{{ row.data }}</td>
+                <td>{{ row.planname }}</td>
+                <td v-if="row.status === '待执行'">
+                  <button
+                    style="
+                      font-size: 12px;
+                      background: rgba(57, 215, 187, 0.1);
+                      color: rgba(57, 215, 187, 1);
+                      border: 1px solid rgba(57, 215, 187, 1);
+                    ">
+                    {{ row.status }}
+                  </button>
+                </td>
+                <td v-if="row.status !== '待执行'">
+                  <button
+                    style="
+                      font-size: 12px;
+                      background: rgba(243, 97, 99, 0.1);
+                      border: 1px solid rgba(243, 97, 99, 1);
+                      color: rgba(243, 97, 99, 1);
+                    ">
+                    {{ row.status }}
+                  </button>
+                </td>
+                <td>
+                  <button class="tabreboot" @click="handlerefClick1">重启</button>
+                  <button class="tabdelete">删除</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <a-modal
+            v-model:visible="addvisible"
+            width="500px"
+            height="792px"
+            :closable="false"
+            :mask="false"
+            :bodyStyle="{
+              opacity: 1,
+              background: ' rgba(0,0,0)',
+              color: 'rgba(255,83,0)',
+              boxSizing: 'borderBox',
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100vh',
+              maxHeight: '100vh',
+              position: 'fixed',
+              right: '496px',
+              top: '0',
+            }">
+            <div>
+              <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="mockData"
+                show-search
+                :filter-option="filterOption"
+                :render="(item) => item.title"
+                @change="handleChange"
+                :style="{ color: 'rgba(255,255,255,1)' }"
+                @search="handleSearch"
+                :listStyle="{ border: '2px solid rgba(25,74,125,1)' }" />
+            </div>
+          </a-modal>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="日志">
+          <table class="custom-table table1">
+            <thead>
+              <tr :style="{ background: 'rgba(35,45,69)' }">
+                <th>序号</th>
+                <th>执行时间</th>
+                <th>操作内容</th>
+                <th>操作人</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(row, index) in dataSource1"
+                :key="index"
+                @click="handleRowClick(row.key)"
+                :class="row.key === trindex ? 'istrindex' : ''">
+                <td>{{ row.key }}</td>
+                <td>{{ row.data }}</td>
+                <td>{{ row.planname }}</td>
+                <td>{{ row.status }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <a-modal
+            width="500px"
+            v-model:visible="logModalVisible"
+            :closable="false"
+            @cancel="closeLogModal"
+            :footer="null"
+            :mask="false"
+            :bodyStyle="{
+              marginLeft: 200,
+              background: 'rgba(0, 0, 0, 1)',
+              opacity: 0.8,
+              boxSizing: 'borderBox',
+              display: 'flex',
+              flexDirection: 'column',
+              position: 'fixed',
+              right: '496px',
+              top: '0',
+            }">
+            <div style="height: calc(100vh - 96px)">
+              <div>
+                <div class="div-operation"></div>
+                <span class="text-operation">操作日志</span>
+              </div>
+              <div class="journal" style="margin-top: 20px" v-for="item in cxlist" :key="item.id">
+                <div class="imgText">
+                  <div class="zjzm">
+                    <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
+                    <span
+                      style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
+                      >{{ item.name }}</span
+                    >
+                  </div>
+                </div>
+
+                <div class="gird22">
+                  <div class="control-btn">
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        border: 1px solid rgba(95, 154, 251, 1);
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      控制模式
+                    </button>
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >{{ item.manual }}</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                        margin-right: 40px;
+                      "
+                      >{{ item.automatic }}</span
+                    >
+                  </div>
+                  <div class="light-btn">
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        border: 1px solid rgba(95, 154, 251, 1);
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      亮度
+                    </button>
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >{{ item.brightness }}</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                      "
+                      >{{ item.brightness2 }}</span
+                    >
+                  </div>
+                  <div class="controlarea-btn">
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        border: 1px solid rgba(95, 154, 251, 1);
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      控制场景
+                    </button>
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >{{ item.manual2 }}</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                        margin-right: 40px;
+                      "
+                      >{{ item.automatic2 }}</span
+                    >
+                  </div>
+                  <div class="temp-btn">
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+                        border: 1px solid rgba(95, 154, 251, 1);
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      色温
+                    </button>
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >{{ item.brightness3 }}</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                      "
+                      >{{ item.brightness4 }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-modal>
+          <!-- <div class="divadd">
+            <button class="add">刷新</button>
+          </div> -->
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </a-drawer>
+  <div class="drawer-title1" v-if="!visible">
+    <a-button @click="toggleDrawer" class="arrowbtn">
+      <double-left-outlined style="color: rgba(255, 255, 255, 1)" />
+    </a-button>
+  </div>
+  <div class="drawer-title2" v-if="visible">
+    <a-button @click="toggleDrawer" class="arrowbtn">
+      <double-right-outlined style="color: rgba(255, 255, 255, 1)" />
+    </a-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue';
+  import {
+    DownOutlined,
+    UpOutlined,
+    DoubleLeftOutlined,
+    DoubleRightOutlined,
+    StopOutlined,
+  } from '@ant-design/icons-vue';
+
+  const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
+  const toggleDrawer = () => {
+    visible.value = !visible.value;
+  };
+  const handleOk2 = (e: MouseEvent) => {
+    console.log(e);
+    console.log('ok2');
+    executevisible.value = false;
+  };
+  const cxlist = ref([
+    {
+      id: '1',
+      name: '站厅照明  1区',
+      manual: '手动',
+      automatic: '自动',
+      brightness: '100lux',
+      brightness2: '30lux',
+      manual2: '手动',
+      automatic2: '自动',
+      brightness3: '4000k',
+      brightness4: '3800k',
+    },
+    {
+      id: '2',
+      name: '站厅照明  2区',
+      manual: '手动',
+      automatic: '自动',
+      brightness: '100lux',
+      brightness2: '30lux',
+      manual2: '手动',
+      automatic2: '自动',
+      brightness3: '4000k',
+      brightness4: '3800k',
+    },
+    {
+      id: '3',
+      name: '站厅照明  3区',
+      manual: '手动',
+      automatic: '自动',
+      brightness: '100lux',
+      brightness2: '30lux',
+      manual2: '手动',
+      automatic2: '自动',
+      brightness3: '4000k',
+      brightness4: '3800k',
+    },
+  ]);
+
+  const bulbs = ref([
+    {
+      className: 'bulbLogo1',
+      imageUrl: '/asset/image/bulbLogo/22419.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo2',
+      imageUrl: '/asset/image/bulbLogo/22419.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo3',
+      imageUrl: '/asset/image/bulbLogo/22419.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo4',
+      imageUrl: '/asset/image/bulbLogo/22419.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo5',
+      imageUrl: '/asset/image/bulbLogo/22394.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo6',
+      imageUrl: '/asset/image/bulbLogo/22394.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo7',
+      imageUrl: '/asset/image/bulbLogo/22394.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo8',
+      imageUrl: '/asset/image/bulbLogo/22394.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo9',
+      imageUrl: '/asset/image/bulbLogo/22396.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo10',
+      imageUrl: '/asset/image/bulbLogo/22396.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo11',
+      imageUrl: '/asset/image/bulbLogo/22396.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo12',
+      imageUrl: '/asset/image/bulbLogo/22396.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo13',
+      imageUrl: '/asset/image/bulbLogo/22400.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo14',
+      imageUrl: '/asset/image/bulbLogo/22400.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo15',
+      imageUrl: '/asset/image/bulbLogo/22400.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo16',
+      imageUrl: '/asset/image/bulbLogo/22400.png',
+      visible: true,
+    },
+  ]);
+
+  // 照明区域按钮单选
+  const isPlanEnabled = ref(true); // 初始状态是启用
+  // 启用面板
+  const togglePlan = () => {
+    isPlanEnabled.value = !isPlanEnabled.value;
+  };
+  const showAllButtonsarea = ref(false);
+  // 最多展示八个按钮
+  const buttons1 = computed(() => buttons.value.slice(0, 8));
+  const buttons = ref([
+    { label: 'A区', selected: false, id: 1 },
+    { label: 'B区', selected: false, id: 2 },
+    { label: 'C区', selected: false, id: 3 },
+    { label: 'D区', selected: false, id: 4 },
+    { label: '计划启用', selected: false, id: 5 },
+    { label: 'A区', selected: false, id: 6 },
+    { label: 'B区', selected: false, id: 7 },
+    { label: 'C区', selected: false, id: 8 },
+    { label: 'D区', selected: false, id: 4 },
+    { label: '计划启用', selected: false, id: 5 },
+    { label: 'A区', selected: false, id: 6 },
+    { label: 'B区', selected: false, id: 7 },
+    { label: 'C区', selected: false, id: 8 },
+  ]);
+  const selectedButton = ref(null);
+  const selectButton = (button) => {
+    selectedButton.value = button;
+    const startIndex = (button.id - 1) * 4; // 计算当前区域灯泡的起始索引
+    const endIndex = startIndex + 4; // 计算当前区域灯泡的结束索引
+    bulbs.value.forEach((bulb, index) => {
+      bulb.visible = index >= startIndex && index < endIndex;
+    });
+  };
+
+  // 照明回路按钮
+  const isAllchoose = ref(true);
+  let singleSelection = ref(true); // 默认为单选
+  const selectAllCheckbox = ref(false);
+  const showControlMode = ref(false);
+  const showAllButtons = ref(false);
+  // 默认展示八个
+  const limitedButtons = computed(() => buttons2.value.slice(0, 8));
+  const buttons2 = ref([
+    { id: 1, label: '1区', selected: false, zmhld: true },
+    { id: 2, label: '2区', selected: false, zmhld: false },
+    { id: 3, label: '3区', selected: false, zmhld: false },
+    { id: 4, label: '4区', selected: false, zmhld: false },
+    { id: 5, label: '5区', selected: false, zmhld: false },
+    { id: 6, label: '6区', selected: false, zmhld: false },
+    { id: 7, label: '7区', selected: false, zmhld: false },
+    { id: 8, label: '1区', selected: false, zmhld: false },
+    { id: 9, label: '2区', selected: false, zmhld: false },
+    { id: 10, label: '3区', selected: false, zmhld: false },
+  ]);
+  const zmhlid = ref();
+  const isPlanEnabled2 = ref(true);
+  const togglePlan2 = () => {
+    isPlanEnabled2.value = !isPlanEnabled2.value;
+    if (selectAllCheckbox.value) {
+      buttons2.value.forEach((button) => {
+        button.zmhld = true;
+        button.selected = false;
+      });
+    } else {
+      const item = buttons2.value.find((button) => button.id === zmhlid.value);
+      if (item) {
+        item.zmhld = !item.zmhld;
+        item.selected = false;
+      }
+    }
+  };
+  const selectAll = () => {
+    if (isAllchoose.value === false) {
+      isPlanEnabled2.value = limitedButtons.value[0].zmhld;
+    }
+    singleSelection.value = !singleSelection.value;
+    isAllchoose.value = !isAllchoose.value;
+    if (singleSelection.value) {
+      // 单选
+      buttons2.value.forEach((button) => {
+        button.selected = false;
+      });
+    } else {
+      // 多选
+      buttons2.value.forEach((button) => {
+        button.selected = true;
+      });
+    }
+    selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
+  };
+  const allbtn1 = () => {
+    buttons2.value.forEach((button) => {
+      if (!button.zmhld) {
+        button.selected = true;
+      }
+    });
+    selectAllCheckbox.value = true;
+  };
+  const toggleAllSelection = () => {
+    if (selectAllCheckbox.value) {
+      // 如果全选开关被打开，实现多选模式
+      buttons2.value.forEach((button) => {
+        button.selected = false;
+      });
+      singleSelection.value = false;
+    } else {
+      // 如果全选开关被关闭，实现单选模式
+      buttons2.value.forEach((button) => {
+        button.selected = false;
+      });
+      singleSelection.value = true;
+    }
+  };
+
+  const toggleSelection = (button) => {
+    console.log(button);
+    zmhlid.value = button.id;
+    console.log(zmhlid.value);
+    isPlanEnabled2.value = button.zmhld;
+    if (button.zmhld) {
+      return;
+    } else {
+      if (singleSelection.value) {
+        // 单选模式
+        buttons2.value.forEach((b) => {
+          if (b !== button) {
+            b.selected = false;
+          }
+        });
+      }
+      button.selected = !button.selected;
+      // 如果当前处于多选模式，更新全选开关的状态
+      if (!singleSelection.value) {
+        selectAllCheckbox.value = buttons2.value.some((button) => button.selected);
+      } else {
+        // 在单选模式下，全选开关应设为false，因为不可能所有按钮都被选中
+        selectAllCheckbox.value = false;
+      }
+      showControlMode.value = button;
+    }
+  };
+
+  // 控制模式按钮 vv
+  const selectedButton3 = ref('');
+  const showControlScene = ref(false);
+  const controlbutton = ref([
+    { label: '托管', selected: false },
+    { label: 'AI', selected: false },
+    { label: '手动', selected: false },
+  ]);
+  // 控制场景按钮
+  const selectedButton4 = ref('');
+  const controlscenebuttons = ref([
+    { label: '检修', selected: false },
+    { label: '午休', selected: false },
+    { label: '疏散', selected: false },
+    { label: '客流高峰', selected: false },
+  ]);
+  const selectButton3 = (button3) => {
+    selectedButton3.value = button3.label;
+    showControlScene.value = button3.label === '手动';
+    selectedButton4.value = ''; // 清空选中的控制场景按钮
+  };
+  const selectButton4 = (button4) => {
+    selectedButton4.value = button4.label;
+  };
+
+  const dataSource = ref([
+    {
+      key: '1',
+      data: '2024-05-01',
+      planname: '劳动节',
+      status: '暂停中',
+    },
+    {
+      key: '2',
+      data: '2024-05-01',
+      planname: '国庆节',
+      status: '待执行',
+    },
+    {
+      key: '3',
+      data: '2024-05-01',
+      planname: '元旦',
+      status: '待执行',
+    },
+  ]);
+  const dataSource1 = ref([
+    {
+      key: '1',
+      data: '2024-05-01',
+      planname: '计划再开',
+      status: '张三111',
+    },
+    {
+      key: '2',
+      data: '2024-05-01',
+      planname: '检修模式',
+      status: '李四12',
+    },
+    {
+      key: '3',
+      data: '2024-05-01',
+      planname: '设备变更',
+      status: '王五33',
+    },
+  ]);
+  // 抽屉默认显示
+  const visible = ref(true);
+  const activeKey = ref('1');
+
+  const refresh = () => {
+    selectedButton.value = null;
+    showControlMode.value = false;
+    showControlScene.value = false;
+    selectedButton3.value = null;
+    selectedButton4.value = null;
+  };
+
+  // 操作日志
+  const logModalVisible = ref(false);
+  const handlerefClick1 = () => {
+    console.log(1111);
+    executevisible.value = true;
+  };
+
+  let trindex = ref('-1');
+  const handleRowClick = (index: any) => {
+    trindex.value = index;
+    if (index === trindex.value) {
+      console.log('tri');
+    }
+    // 显示模态框
+    logModalVisible.value = true;
+  };
+  const closeLogModal = () => {
+    logModalVisible.value = false;
+  };
+  // 执行确认
+  const executevisible = ref<boolean>(false);
+  const showModal = () => {
+    executevisible.value = true;
+  };
+  // 添加模态框
+  const addvisible = ref<boolean>(false);
+  const addModal = () => {
+    addvisible.value = true;
+  };
+  // 穿梭框
+  interface MockData {
+    key: string;
+    title: string;
+    description: string;
+    chosen: boolean;
+  }
+  const mockData = ref([
+    {
+      key: '1',
+      title: '计划再开',
+    },
+    {
+      key: '2',
+      title: '检修模式',
+    },
+    {
+      key: '3',
+      title: '设备变更',
+    },
+  ]);
+  const targetKeys = ref<string[]>([]);
+  const filterOption = (inputValue: string, option: MockData) => {
+    console.log(option.description);
+
+    return option.description.indexOf(inputValue) > -1;
+  };
+  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 delbtn = (id: any) => {
+    console.log(id);
+    cxlist.value.pop(id);
+    console.log(cxlist.value.length);
+
+    if (cxlist.value.length === 0) {
+      executevisible.value = false;
+    }
+  };
+</script>
+<style lang="less" scoped>
+  :deep(.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover) {
+    background-color: rgba(20, 41, 76, 1);
+    color: rgb(29, 83, 172);
+  }
+  :deep(.ant-transfer-list-header-selected) {
+    color: rgba(255, 83, 0);
+  }
+
+  :deep(.ant-transfer-list-header > *:not(:last-child)) {
+    color: rgba(255, 83, 0);
+  }
+
+  .tagtext {
+    margin-left: 8px;
+  }
+
+  .light-tag {
+    position: fixed;
+    bottom: 135px;
+    left: 450px;
+    width: 396px;
+    height: 200px;
+    opacity: 0.8;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 1);
+  }
+
+  .light-tag-tit {
+    display: flex;
+    margin-top: 18px;
+    margin-left: 18px;
+  }
+
+  .light-tag-box {
+    padding: 15px 15px;
+  }
+
+  .light-tag-box > img {
+    width: 120px;
+    height: 51px;
+    margin-bottom: 10px;
+  }
+
+  .light-tag-box > span {
+    color: #fff;
+  }
+
+  .titleimg,
+  .titletext {
+    display: inline-block;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .control-btn,
+  .light-btn {
+    display: inline-block;
+    margin-top: 10px;
+  }
+
+  .controlarea-btn,
+  .temp-btn {
+    display: inline-block;
+    margin-top: 16px;
+  }
+
+  :deep(.ant-drawer-content) {
+    background-color: rgba(0, 0, 0, 1);
+    opacity: 0.8;
+  }
+
+  :deep(.ant-modal-content) {
+    background-color: rgba(0, 0, 0, 1);
+    opacity: 0.8;
+  }
+
+  :deep(.ant-transfer-list) {
+    width: 230px;
+    height: 450px;
+  }
+
+  :deep(.ant-transfer-list-header) {
+    background-color: rgba(0, 0, 0, 1);
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .bulbLogo1 {
+    margin-top: 40%;
+    margin-left: 12%;
+  }
+
+  .bulbLogo2 {
+    margin-top: 35%;
+    margin-left: 20%;
+  }
+
+  .bulbLogo3 {
+    margin-top: 23%;
+    margin-left: 10%;
+  }
+
+  .bulbLogo4 {
+    margin-top: 10%;
+    margin-left: 15%;
+  }
+
+  .bulbLogo5 {
+    margin-top: 8%;
+    margin-left: 13%;
+  }
+
+  .bulbLogo6 {
+    margin-top: 8%;
+    margin-left: 15%;
+  }
+
+  .bulbLogo7 {
+    margin-top: 0%;
+    margin-left: 12%;
+  }
+
+  .bulbLogo9 {
+    margin-top: 35%;
+    margin-left: 20%;
+  }
+
+  .bulbLogo10 {
+    margin-top: 35%;
+    margin-left: 20%;
+  }
+
+  .bulbLogo11 {
+    margin-top: 35%;
+    margin-left: 20%;
+  }
+
+  .bulbLogo12 {
+    margin-top: 35%;
+    margin-left: 20%;
+  }
+
+  .custom-table {
+    border-collapse: collapse;
+    width: 416px;
+    height: 60px;
+    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%;
+    cellspacing: 0;
+    cellpadding: 0;
+    border: 1px solid rgba(255, 255, 255);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .lightarea,
+  .circuitarea,
+  .controlarea,
+  .controlscenearea,
+  .lightparametersarea {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .lightareatab,
+  .circuittab,
+  .controltab,
+  .controlscenetab,
+  .lightparameterstab {
+    width: 5px;
+    height: 23px;
+    opacity: 1;
+    background: rgba(26, 174, 251, 1);
+    margin-right: 4px;
+  }
+
+  .lightareatext,
+  .circuittext,
+  .controltext,
+  .controlscenetext,
+  .lightparameterstext {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 1);
+    line-height: 19px;
+    width: 110px;
+    height: 23px;
+    opacity: 1;
+    background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
+  }
+
+  .lightareatab,
+  .lightareatext {
+    display: inline-block;
+    justify-content: center;
+  }
+
+  .plan.enabled {
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    color: rgba(255, 255, 255, 1);
+    vertical-align: top;
+    margin-left: 235px;
+    width: 88px;
+    height: 32px;
+    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
+    color: white;
+  }
+
+  .plan.disabled {
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    color: rgba(255, 255, 255, 1);
+    vertical-align: top;
+    margin-left: 235px;
+    width: 88px;
+    height: 32px;
+    background-color: red;
+  }
+
+  .plan:disabled {
+    cursor: not-allowed;
+  }
+
+  .openplan.enabled2 {
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    color: rgba(255, 255, 255, 1);
+    vertical-align: top;
+    width: 88px;
+    height: 32px;
+    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
+    color: white;
+  }
+
+  .openplan.disabled2 {
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    color: rgba(255, 255, 255, 1);
+    vertical-align: top;
+    width: 88px;
+    height: 32px;
+    background-color: red;
+  }
+
+  .openplan:disabled {
+    cursor: not-allowed;
+  }
+
+  .btn2 {
+    display: flex;
+    align-items: center;
+    margin-left: 80px;
+  }
+
+  .openzm {
+    color: rgba(34, 183, 255, 1);
+    margin-left: 20px;
+    font-size: 14px;
+  }
+
+  .custom-checkbox {
+    width: 13px;
+    height: 13px;
+  }
+
+  .both {
+    width: 59.79px;
+    height: 32px;
+    opacity: 1;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 187, 0, 1) 0%,
+      rgba(255, 112, 3, 1) 91.21%,
+      rgba(255, 129, 3, 1) 100%
+    );
+    margin-left: 8px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 1);
+    border: none;
+    border-radius: 5px;
+  }
+
+  .btn2 {
+    button {
+      margin: 0 5px;
+    }
+  }
+
+  .allbtn {
+    border: 0;
+    width: 40px;
+    color: rgba(255, 255, 255, 1);
+    background-color: transparent;
+  }
+
+  .blue-background.ant-switch-checked {
+    background-color: linear-gradient(
+      180deg,
+      rgba(1, 206, 255, 1) 0%,
+      rgba(0, 150, 229, 1) 100%
+    ) !important;
+  }
+
+  .grey-background.ant-switch {
+    background-color: grey !important;
+  }
+
+  .blue-background.ant-switch-checked .ant-switch-handle {
+    background-color: linear-gradient(
+      180deg,
+      rgba(1, 206, 255, 1) 0%,
+      rgba(0, 150, 229, 1) 100%
+    ) !important;
+  }
+
+  .grey-background.ant-switch .ant-switch-handle {
+    background-color: grey !important;
+  }
+
+  p {
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .area,
+  .btnarea,
+  .controlmodebtnarea,
+  .controlscenebtnarea {
+    margin-left: -17px;
+
+    button {
+      width: 21%;
+      padding: 0 2%;
+    }
+  }
+
+  .btn {
+    width: 92px;
+    height: 40px;
+    border-radius: 4px;
+    opacity: 1;
+    margin-top: 10px;
+    margin-left: 17px;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 1;
+    border: 1px solid rgba(207, 212, 219, 1);
+    line-height: 20.27px;
+    color: rgba(255, 255, 255, 1);
+    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 rgba(255, 255, 255, 1);
+  }
+
+  .btn:hover {
+    background-color: rgba(207, 212, 219, 1);
+  }
+
+  .btn:active {
+    background-color: rgba(102, 102, 102, 1);
+    color: white;
+  }
+
+  .circuitarea,
+  .controlscenearea,
+  .lightparametersarea {
+    left: 51px;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .circuittab,
+  .circuittext {
+    display: inline-block;
+  }
+
+  .batch {
+    width: 60px;
+    height: 32px;
+    opacity: 1;
+    border: 1px solid rgba(67, 136, 251, 1);
+    color: rgba(67, 136, 251, 1);
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 1);
+    margin-left: 11px;
+  }
+
+  .controlarea {
+    left: 51px;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .controltab,
+  .controltext {
+    display: inline-block;
+  }
+
+  :deep(.cell) {
+    text-align: center;
+  }
+
+  :deep(#pane-first) {
+    height: 100%;
+  }
+
+  .controlscenetab,
+  .controlscenetext {
+    display: inline-block;
+  }
+
+  .lightparameterstab,
+  .lightparameterstext {
+    display: inline-block;
+  }
+
+  .lightparameterstextarea > p {
+    height: 100%;
+    display: flex;
+    border: 1px solid rgba(236, 239, 245, 1);
+    justify-content: center;
+    align-items: center;
+  }
+
+  .bottom {
+    width: 100%;
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin-bottom: 10px;
+  }
+
+  .execute {
+    margin-right: 20px;
+    width: 74px;
+    height: 40px;
+    opacity: 1;
+    border-radius: 4px;
+    background: rgba(67, 136, 251, 1);
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 1);
+    border: 0;
+    margin-left: 10px;
+  }
+
+  .flushed {
+    width: 74px;
+    height: 40px;
+    opacity: 1;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(102, 102, 102, 1);
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(193, 197, 204, 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;
+  }
+
+  .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);
+  }
+
+  .divadd {
+    width: 100%;
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin-bottom: 10px;
+    margin-right: 20px;
+  }
+
+  .atable {
+    margin-top: 20px;
+  }
+
+  :deep(.ant-table-pagination) {
+    visibility: hidden;
+  }
+
+  .drawer-content {
+    margin-left: 20px;
+  }
+
+  .arrow-indicator {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+
+  .drawer-title1 {
+    position: fixed;
+    width: 33px;
+    height: 33px;
+    top: 0;
+    bottom: 0;
+    right: 20px;
+    margin: auto;
+    z-index: 99999;
+  }
+
+  .drawer-title2 {
+    position: fixed;
+    width: 33px;
+    height: 33px;
+    top: 0;
+    bottom: 0;
+    right: 495px;
+    margin: auto;
+    z-index: 99999;
+  }
+
+  .arrowbtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    background: rgba(0, 0, 0, 1);
+    opacity: 0.5;
+    border: none;
+  }
+
+  :deep(.ant-tabs-tab-btn) {
+    color: white;
+  }
+
+  :deep(.ant-table) {
+    background-color: transparent;
+  }
+
+  :deep(.ant-table-bordered) {
+    background-color: transparent;
+  }
+
+  :deep(.ant-table-thead) {
+    background-color: transparent;
+  }
+
+  :deep(.ant-table-cell) {
+    background-color: transparent;
+    color: #fff;
+  }
+  .lighting-img-box {
+    width: 100%;
+    max-height: calc(100% - 79px);
+  }
+  .lighting-img-box > img {
+    width: 100%;
+    height: calc(100vh - 96px);
+    object-fit: cover;
+  }
+  .F1 {
+    width: 120px;
+    height: 50.72px;
+    border-radius: 4px;
+    background: rgba(39, 120, 255, 1);
+    border: 1px solid rgba(51, 199, 255, 1);
+    box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
+    font-size: 24px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 1);
+  }
+  .F2,
+  .platform {
+    width: 120px;
+    height: 50.72px;
+    border-radius: 4px;
+    background: rgba(7, 72, 116, 1);
+    box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
+    font-size: 24px;
+    font-weight: 400;
+    color: rgba(146, 187, 255, 1);
+    border: 1px solid rgba(39, 120, 255, 1);
+    margin-top: 20px;
+  }
+
+  .btn-box {
+    position: fixed;
+    top: 100px;
+    left: 250px;
+  }
+
+  .lighting-img-box > .bulbBox > .wh100 {
+    width: 38px;
+    height: calc(38px + 19px);
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo1 {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo2 {
+    position: absolute;
+    top: 9%;
+    left: 15%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo3 {
+    position: absolute;
+    top: 34%;
+    left: 25%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo4 {
+    position: absolute;
+    top: 45%;
+    left: 30%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo5 {
+    position: absolute;
+    top: 45%;
+    left: 30%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo6 {
+    position: absolute;
+    top: 55%;
+    left: 30%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo7 {
+    position: absolute;
+    top: 60%;
+    left: 40%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo8 {
+    position: absolute;
+    top: 55%;
+    left: 70%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo9 {
+    position: absolute;
+    top: 10%;
+    left: 60%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo10 {
+    position: absolute;
+    top: 10%;
+    left: 40%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo11 {
+    position: absolute;
+    top: 15%;
+    left: 50%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo12 {
+    position: absolute;
+    top: 15%;
+    left: 60%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo13 {
+    position: absolute;
+    top: 55%;
+    left: 70%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo14 {
+    position: absolute;
+    top: 45%;
+    left: 60%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo15 {
+    position: absolute;
+    top: 45%;
+    left: 80%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo16 {
+    position: absolute;
+    top: 45%;
+    left: 90%;
+    display: flex;
+    align-items: center;
+  }
+
+  .editable-cell {
+    position: relative;
+
+    .editable-cell-input-wrapper,
+    .editable-cell-text-wrapper {
+      padding-right: 24px;
+    }
+
+    .editable-cell-text-wrapper {
+      padding: 5px 24px 5px 5px;
+    }
+
+    .editable-cell-icon,
+    .editable-cell-icon-check {
+      position: absolute;
+      right: 0;
+      width: 20px;
+      cursor: pointer;
+    }
+
+    .editable-cell-icon {
+      margin-top: 4px;
+      display: none;
+    }
+
+    .editable-cell-icon-check {
+      line-height: 28px;
+    }
+
+    .editable-cell-icon:hover,
+    .editable-cell-icon-check:hover {
+      color: #108ee9;
+    }
+
+    .editable-add-btn {
+      margin-bottom: 8px;
+    }
+  }
+
+  .editable-cell:hover .editable-cell-icon {
+    display: inline-block;
+  }
+
+  .div-operation {
+    width: 3px;
+    height: 13px;
+    opacity: 1;
+    border-radius: 1px;
+    background: rgba(67, 136, 251, 1);
+  }
+
+  .text-operation {
+    color: rgba(255, 255, 255, 1);
+    font-size: 16px;
+    font-weight: 700;
+    margin-left: 5px;
+  }
+
+  .div-operation,
+  .text-operation {
+    display: inline-block;
+  }
+
+  .jbox {
+    background-color: #000;
+    opacity: 1;
+    z-index: 99999;
+  }
+
+  .journal {
+    padding: 3% 5%;
+    background-size: 450px 177px;
+    width: 482px;
+    height: 177px;
+    background-color: rgba(0, 0, 0);
+    border-radius: 12px;
+    border: 2px solid transparent;
+    border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
+  }
+
+  .imgText {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .ztzm {
+      display: flex;
+      align-items: center;
+    }
+
+    .cxbtn {
+      color: rgba(255, 255, 255, 1);
+      border: none;
+      border-radius: 6px;
+      width: 59.79px;
+      height: 32px;
+      opacity: 1;
+      background: linear-gradient(
+        180deg,
+        rgba(255, 187, 0, 1) 0%,
+        rgba(255, 112, 3, 1) 91.21%,
+        rgba(255, 129, 3, 1) 100%
+      );
+    }
+  }
+
+  :deep(.ant-modal-content) {
+    width: 555px;
+    height: 792px;
+  }
+
+  :deep(.ant-modal-body) {
+    width: 555px;
+    max-height: 792px !important;
+    box-sizing: border-box;
+  }
+
+  .text-change {
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+    font-size: 20px;
+  }
+
+  .excuno {
+    width: 150px;
+    height: 40px;
+    margin-top: 30px;
+  }
+
+  .excuok {
+    width: 150px;
+    height: 40px;
+    margin-top: 30px;
+  }
+
+  .excubtn {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .addok {
+    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);
+    margin-top: 440px;
+    margin-left: 350px;
+  }
+
+  .zmhlbtn {
+    position: relative;
+  }
+
+  .anticon-stop {
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+  }
+
+  .istrindex {
+    background: rgba(67, 136, 251, 1);
+  }
+
+  :deep(.ant-modal-mask.ant-modal-content) {
+    height: 100vh;
+    position: fixed;
+    right: 496px;
+    top: 0%;
+  }
+  :deep(.ant-modal-content) {
+    position: fixed;
+    bottom: 20px;
+    right: 500px;
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
new file mode 100644
index 0000000..d26c745
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
@@ -0,0 +1,135 @@
+<template>
+    <a-popover color="rgba(0, 0, 0, 0.8)">
+        <template #content>
+            <div class="light-tag">
+                <div class="light-tag-tit">
+                    <div>
+                        <img src="/asset/image//bulbLogo/21962.png" alt="" />
+                        <span class="tag-text">{{ result.name }}</span>
+                    </div>
+                    <button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button>
+                </div>
+                <div class="light-tag-box">
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">控制模式</span>
+                        <span class="result">自动</span>
+                    </div>
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">亮度</span>
+                        <span class="result">{{ result.brightness }}</span>
+                    </div>
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">控制场景</span>
+                        <span class="result">{{ result.automatic2 }}</span>
+                    </div>
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">色温</span>
+                        <span class="result">{{ result.brightness3 }}</span>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <div class="icon-box" :style="styleObject">
+            <img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="">
+            <img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="">
+            <img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="">
+        </div>
+    </a-popover>
+</template>
+  
+<script setup lang="ts">
+import { ref } from 'vue';
+defineProps({
+  styleObject: Object,
+  type: Number
+});
+
+const result = ref({
+    id: '1',
+    name: '站厅照明  1区',
+    manual: '手动',
+    automatic: '自动',
+    brightness: '100lux',
+    brightness2: '30lux',
+    manual2: '手动',
+    automatic2: '舒适',
+    brightness3: '4000k',
+    brightness4: '3800k',
+});
+
+</script>
+<style lang="less" scoped>
+    .icon-box {
+        width: 25px;
+        height: 25px;
+        position: absolute;
+        .icon-item {
+            width: 25px;
+            cursor: pointer;
+            transition: all ease 0.1s;
+        }
+        .icon-item:active {
+            transform: scale(1.2);
+        }
+    }
+    // 悬浮窗外部
+    .light-tag {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        // 悬浮窗标题
+        .light-tag-tit {
+            display: flex;
+            justify-content: space-between;
+            vertical-align: middle;
+            height: 30px;
+            .tag-text {
+                font-size: 16px;
+                font-weight: 700;
+                color: white;
+                padding-left: 10px;
+            }
+            .right-button {
+                width: 50px;
+                height: 26px;
+                background: rgba(57, 215, 187, 0.1);
+                border: 1px solid rgba(57, 215, 187, 1);
+                font-size: 12px;
+                color: rgba(57, 215, 187, 1);
+            }
+        }
+    }
+    // 悬浮窗底部4格子
+    .light-tag-box {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        grid-gap: 10px;
+        .tag-box-item {
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            img {
+                width: 120px;
+                vertical-align: middle;
+            }
+            .title {
+                position: absolute;
+                left: 60px;
+                top: 13px;
+                color: rgba(64, 255, 252, 1);
+            }
+            .result {
+                line-height: 50px;
+                font-size: 16px;
+                font-weight: 700;
+                color: white;
+            };
+        }
+    }
+</style>
+  
\ No newline at end of file