Merge branch 'main' of http://123.60.103.97:3000/xuziqiang/SaaS-lib

hx-ai-intelligent/src/main.ts

@@ -5,6 +5,8 @@ import { apiModule } from '/@/api';
 import { appConfig } from '/@/config';
 import './theme/global.less';
 import { LeftOutlined } from '@ant-design/icons-vue';
+// import ElementPlus from 'element-plus'
+// import 'element-plus/dist/index.css'
 const app = createApp(App);
 app.component('LeftOutlined', LeftOutlined);
 saasInit({
@@ -12,4 +14,5 @@ saasInit({
   apiModule,
   appConfig,
 });
+// app.use(ElementPlus)
 app.mount('#app');

hx-ai-intelligent/src/router/equipmentControl.ts

@@ -0,0 +1,29 @@
+const Base = () => import('/nerv-lib/saas/view/system/layout/content.vue');
+const equipmentControl = {
+  path: '/equipmentControl',
+  name: 'EquipmentControl',
+  meta: { title: '设备群控', icon: 'dicizhishou', index: 4 },
+  redirect: { name: 'homeIndex' },
+  children: [
+    {
+      path: 'lightManage',
+      name: 'LightManage',
+      meta: { title: '智能照明', hideChildren: true, icon: 'dicizhishou' },
+      component: Base,
+      redirect: { name: 'lightManageIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'lightManageIndex',
+          component: () => import('/@/view/equipmentControl/lightingManage/indexs.vue'),
+          meta: {
+            title: '智能照明',
+            keepAlive: true,
+            // backApi: [],
+          },
+        },
+      ],
+    },
+  ],
+};
+export default equipmentControl;

hx-ai-intelligent/src/router/organizationManage.ts

@@ -97,6 +97,7 @@ const organizationManage = {
         },
       ],
     },
+  
   ],
 };
 export default organizationManage;

hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.vue

@@ -0,0 +1,567 @@
+<template>
+  <div class="main">
+    <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
+      open
+    </el-button>
+    
+    <el-drawer v-model="drawer" :with-header="false">
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="控制面板" name="first">
+          <!-- 照明区域 -->
+          <div class="lightarea">
+            <div class="lightareatab"></div>
+            <span class="lightareatext"> 照明区域 </span>
+            <button class="plan">计划启用</button>
+          </div>
+          <!-- button部分 -->
+          <div class="area">
+            <button v-for="(button, index) in buttons" :key="index"
+              :class="{ btn: true, selected: button === selectedButton }" @click="selectButton(button)">
+              {{ button.label }}
+            </button>
+          </div>
+          <!-- 照明回路 -->
+          <div class="circuitarea">
+            <div class="circuittab"></div>
+            <span class="circuittext">照明回路</span>
+            <button class="plan">计划启用</button>
+            <button class="batch" @click="toggleSelectionMode">
+              {{ selectionModeText }}
+            </button>
+            <button v-if="showSelectAll" class="both" @click="selectAll">全选</button>
+          </div>
+          <!-- button部分 -->
+          <div class="btnarea">
+            <button v-for="(button2, index) in buttons2" :key="index" :class="{ btn: true, selected: button2.selected }"
+              @click="toggleSelection(button2)">
+              {{ button2.label }}
+            </button>
+          </div>
+          <!-- 控制模式 -->
+          <div class="controlarea">
+            <div class="controltab"></div>
+            <span class="controltext"> 控制模式 </span>
+          </div>
+          <!-- 控制模式按钮部分 -->
+          <div class="controlmodebtnarea">
+            <button v-for="(button3, index) in controlbutton" :key="index"
+              :class="{ btn: true, selected: button3 === selectedButton3 }" @click="selectButton3(button3)">
+              {{ button3.label }}
+            </button>
+          </div>
+          <!-- 控制场景 -->
+          <div class="controlscenearea">
+            <div class="controlscenetab"></div>
+            <span class="controlscenetext"> 控制场景 </span>
+          </div>
+          <!-- 控制场景按钮部分 -->
+          <div class="controlscenebtnarea">
+            <button v-for="(button4, index) in controlscenebuttons" :key="index"
+              :class="{ btn: true, selected: button4 === selectedButton4 }" @click="selectButton4(button4)">
+              {{ button4.label }}
+            </button>
+          </div>
+          <!-- 灯具参数 -->
+          <div class="lightparametersarea">
+            <div class="lightparameterstab"></div>
+            <span class="lightparameterstext"> 灯具参数 </span>
+          </div>
+          <div class="lightparameterstextarea">
+            <p>开启数量</p>
+            <p>亮度</p>
+            <p>色温</p>
+            <p>8/10</p>
+            <p>100lux</p>
+            <p>4200k</p>
+          </div>
+          <div class="bottom">
+            <button class="flushed">刷新</button>
+            <button class="execute">执行</button>
+          </div>
+
+        </el-tab-pane>
+        <el-tab-pane label="计划列表" name="second">
+          <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
+            <el-table-column prop="id" label="序号" width="60" />
+            <el-table-column prop="date" label="执行时间" width="100" />
+            <el-table-column prop="planname" label="计划名称" width="90" />
+            <el-table-column prop="status" label="状态" width="70" />
+            <el-table-column label="操作">
+              <span class="tabreboot">重启</span>
+              <span class="tabdelete">删除</span>
+            </el-table-column>
+          </el-table>
+          <div class="divadd">
+            <button class="add">添加</button>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="日志" name="third">
+          <el-table :data="tableData2" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
+            <el-table-column prop="id" label="序号" />
+            <el-table-column prop="date" label="执行时间" />
+            <el-table-column prop="planname" label="操作内容" />
+            <el-table-column prop="status" label="操作人"  />
+          </el-table>
+          <div class="divadd">
+            <button class="add">刷新</button>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { Timer } from "@element-plus/icons-vue";
+// 照明区域按钮单选
+interface Button {
+  label: string;
+  selected: boolean;
+}
+const buttons = ref<Button[]>([
+  { label: "A区", selected: false },
+  { label: "B区", selected: false },
+  { label: "C区", selected: false },
+  { label: "D区", selected: false },
+  { label: "计划启用", selected: false },
+]);
+const selectedButton = ref<Button | null>(null);
+const selectButton = (button: Button) => {
+  selectedButton.value = button;
+};
+// 照明回路按钮
+interface Button {
+  label: string;
+  selected: boolean;
+}
+const buttons2 = ref<Button[]>([
+  { label: "1区", selected: false },
+  { label: "2区", selected: false },
+  { label: "3区", selected: false },
+  { label: "4区", selected: false },
+]);
+const showSelectAll = ref(false);
+const bt = ref(false);
+const selectionModeText = ref("批量");
+const toggleSelection = (button2: Button) => {
+  if (!showSelectAll.value) {
+    // 单选模式
+    for (const button of buttons2.value) {
+      button.selected = false;
+    }
+    button2.selected = true;
+  } else {
+    // 批量选择模式
+    button2.selected = !button2.selected;
+    bt.value = false;
+  }
+};
+const toggleSelectionMode = () => {
+  showSelectAll.value = !showSelectAll.value;
+  selectionModeText.value = showSelectAll.value ? "单选" : "批量";
+};
+const selectAll = () => {
+  if (bt.value == false) {
+    for (const button of buttons2.value) {
+      button.selected = true;
+      bt.value = true;
+    }
+  } else {
+    for (const button of buttons2.value) {
+      button.selected = false;
+      bt.value = false;
+    }
+  }
+};
+// 控制模式按钮
+interface Button {
+  label: string;
+  selected: boolean;
+}
+const controlbutton = ref<Button[]>([
+  { label: "A区", selected: false },
+  { label: "B区", selected: false },
+  { label: "C区", selected: false },
+]);
+const selectedButton3 = ref<Button | null>(null);
+const selectButton3 = (button3: Button) => {
+  selectedButton3.value = button3;
+};
+// 控制场景按钮
+interface Button {
+  label: string;
+  selected: boolean;
+}
+const controlscenebuttons = ref<Button[]>([
+  { label: "检修", selected: false },
+  { label: "午休", selected: false },
+  { label: "疏散", selected: false },
+  { label: "客流高峰", selected: false },
+]);
+const selectedButton4 = ref<Button | null>(null);
+const selectButton4 = (button4: Button) => {
+  selectedButton4.value = button4;
+};
+const drawer = ref(true);
+import type { TabsPaneContext } from "element-plus";
+const activeName = ref("first");
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+
+//计划列表
+interface User {
+  id: number;
+  date: string;
+  planname: string;
+  status: string;
+}
+
+const tableData: User[] = [
+  {
+    id: 1,
+    date: "2016-05-03",
+    planname: "劳动节",
+    status: "暂停中",
+  },
+  {
+    id: 2,
+    date: "2016-05-02",
+    planname: "国庆节",
+    status: "待执行",
+  },
+  {
+    id: 3,
+    date: "2016-05-04",
+    planname: "元旦",
+    status: "待执行",
+  }
+];
+const tableData2: User[] = [
+  {
+    id: 1,
+    date: "2016-05-03",
+    planname: "计划再开",
+    status: "张三",
+  },
+  {
+    id: 2,
+    date: "2016-05-02",
+    planname: "检修模式",
+    status: "李四",
+  },
+  {
+    id: 3,
+    date: "2016-05-04",
+    planname: "设备变更",
+    status: "王五",
+  }
+];
+</script>
+
+<style scoped>
+.main {
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  opacity: 0.5;
+  background: rgba(0, 0, 0, 1);
+  border: 1px solid rgba(112, 112, 112, 1);
+}
+
+.drawer-content {
+  width: 5%;
+  background-color: paleturquoise;
+  display: flex;
+  /*justify-content: center;  水平居中 */
+  align-items: center;
+  /* 垂直居中 */
+}
+
+el-tabs {
+  width: 95%;
+  background-color: blueviolet;
+}
+
+
+.demo-tabs>.el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+
+.lightarea {
+  left: 51px;
+  width: 100%;
+}
+
+.lightareatab,
+.lightareatext {
+  display: inline-block;
+}
+
+.lightareatab,
+.circuittab,
+.controltab,
+.controlscenetab,
+.lightparameterstab {
+  left: 0px;
+  top: 5px;
+  width: 3px;
+  height: 13px;
+  opacity: 1;
+  border-radius: 1px;
+  background: rgba(67, 136, 251, 1);
+}
+
+.lightareatext,
+.circuittext,
+.controltext,
+.controlscenetext,
+.lightparameterstext {
+  margin-left: 11px;
+  font-size: 16px;
+}
+
+.plan {
+  width: 88px;
+  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;
+}
+
+.area,
+.btnarea,
+.controlmodebtnarea,
+.controlscenearea,
+.lightparametersarea {
+  margin-top: 20px;
+}
+
+.area {
+  margin-left: -17px;
+}
+
+.btn {
+  padding: 12px 28px;
+  margin-top: 10px;
+  margin-left: 17px;
+  /* width: 80px; */
+  /* height: 40px; */
+  font-size: 14px;
+  font-weight: 400;
+  opacity: 1;
+  border: 1px solid rgba(207, 212, 219, 1);
+  line-height: 20.27px;
+  color: rgba(102, 102, 102, 1);
+  text-align: center;
+  vertical-align: top;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.selected {
+  background-color: rgba(39, 120, 255, 1);
+  color: 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 {
+  left: 51px;
+  width: 100%;
+  margin-top: 20px;
+}
+
+.circuittab,
+.controltab {
+  left: 0px;
+  top: 5px;
+  width: 3px;
+  height: 13px;
+  opacity: 1;
+  border-radius: 1px;
+  background: rgba(67, 136, 251, 1);
+}
+
+.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;
+}
+
+.both {
+  width: 60px;
+  height: 32px;
+  opacity: 1;
+  border: 1px solid rgba(255, 118, 2, 1);
+  color: rgba(255, 255, 255, 1);
+  border-radius: 5px;
+  background-color: rgba(255, 118, 2, 1);
+  margin-left: 11px;
+}
+
+.controlarea {
+  left: 51px;
+  width: 100%;
+  margin-top: 20px;
+}
+
+.controltab,
+.controltext {
+  display: inline-block;
+}
+
+.controlscenetab,
+.controlscenetext {
+  display: inline-block;
+}
+
+:deep(.el-drawer__body) {
+  padding-top: 75px;
+  height: 100%;
+}
+
+:deep(.el-tabs__content) {
+  height: 100%;
+}
+
+:deep(.cell) {
+  text-align: center;
+}
+
+:deep(#pane-first) {
+  height: 100%;
+}
+
+.controlscenetab,
+.controlscenetext {
+  display: inline-block;
+}
+
+.controlmodebtnarea {
+  margin-top: 20px;
+  height: 100%;
+}
+
+.lightparameterstab,
+.lightparameterstext {
+  display: inline-block;
+}
+
+.lightparameterstextarea {
+  border: 1px solid rgba(236, 239, 245, 1);
+  margin-top: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  /* grid-column-gap: 10px; */
+  /* grid-row-gap: 10px; */
+}
+
+.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 {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0px;
+  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
+}
+</style>

hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue

@@ -0,0 +1,586 @@
+<template>
+    <a-button type="primary" @click="showDrawer">Open</a-button>
+    <a-drawer v-model:visible="visible" class="custom-class" width="500" style="color: red" placement="right"
+        :closable="false" @after-visible-change="afterVisibleChange">
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane key="1" tab="控制面板">
+                <!-- 照明区域 -->
+                <div class="lightarea">
+                    <div class="lightareatab"></div>
+                    <span class="lightareatext"> 照明区域 </span>
+                    <button class="plan">计划启用</button>
+                </div>
+                <!-- button部分 -->
+                <div class="area">
+                    <button v-for="(button, index) in buttons" :key="index"
+                        :class="{ btn: true, selected: button === selectedButton }" @click="selectButton(button)">
+                        {{ button.label }}
+                    </button>
+                </div>
+                <!-- 照明回路 -->
+                <div class="circuitarea">
+                    <div class="circuittab"></div>
+                    <span class="circuittext">照明回路</span>
+                    <button class="plan">计划启用</button>
+                    <button class="batch" @click="toggleSelectionMode">
+                        {{ selectionModeText }}
+                    </button>
+                    <button v-if="showSelectAll" class="both" @click="selectAll">全选</button>
+                </div>
+                <!-- button部分 -->
+                <div class="btnarea">
+                    <button v-for="(button2, index) in buttons2" :key="index"
+                        :class="{ btn: true, selected: button2.selected }" @click="toggleSelection(button2)">
+                        {{ button2.label }}
+                    </button>
+                </div>
+                <!-- 控制模式 -->
+                <div class="controlarea">
+                    <div class="controltab"></div>
+                    <span class="controltext"> 控制模式 </span>
+                </div>
+                <!-- 控制模式按钮部分 -->
+                <div class="controlmodebtnarea">
+                    <button v-for="(button3, index) in controlbutton" :key="index"
+                        :class="{ btn: true, selected: button3 === selectedButton3 }" @click="selectButton3(button3)">
+                        {{ button3.label }}
+                    </button>
+                </div>
+                <!-- 控制场景 -->
+                <div class="controlscenearea">
+                    <div class="controlscenetab"></div>
+                    <span class="controlscenetext"> 控制场景 </span>
+                </div>
+                <!-- 控制场景按钮部分 -->
+                <div class="controlscenebtnarea">
+                    <button v-for="(button4, index) in controlscenebuttons" :key="index"
+                        :class="{ btn: true, selected: button4 === selectedButton4 }" @click="selectButton4(button4)">
+                        {{ button4.label }}
+                    </button>
+                </div>
+                <!-- 灯具参数 -->
+                <div class="lightparametersarea">
+                    <div class="lightparameterstab"></div>
+                    <span class="lightparameterstext"> 灯具参数 </span>
+                </div>
+                <div class="lightparameterstextarea">
+                    <p>开启数量</p>
+                    <p>亮度</p>
+                    <p>色温</p>
+                    <p>8/10</p>
+                    <p>100lux</p>
+                    <p>4200k</p>
+                </div>
+                <div class="bottom">
+                    <button class="flushed">刷新</button>
+                    <button class="execute">执行</button>
+                </div>
+
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="计划列表" force-render>
+                <a-table bordered :data-source="dataSource" :columns="columns" class="atable">
+                    <template #bodyCell="{ column, text }">
+                        <template v-if="column.dataIndex === 'name'">
+                            <div class="editable-cell">
+                                {{ text || ' ' }}
+                            </div>
+                        </template>
+                        <template v-else-if="column.dataIndex === 'operation'">
+                            <a class="tabreboot">重启</a>
+                            <a class="tabdelete">删除</a>
+                        </template>
+                    </template>
+                </a-table>
+                <div class="divadd">
+                    <button class="add">添加</button>
+                </div>
+            </a-tab-pane>
+            <a-tab-pane key="3" tab="日志">
+                <a-table bordered :data-source="dataSource1" :columns="columns1" class="atable">
+                    <template #bodyCell="{ column, text }">
+                        <template v-if="column.dataIndex === 'name'">
+                            <div class="editable-cell">
+                                {{ text || ' ' }}
+                            </div>
+                        </template>
+                    </template>
+                </a-table>
+                <div class="divadd">
+                    <button class="add">刷新</button>
+                </div>
+            </a-tab-pane>
+        </a-tabs>
+    </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Ref, TableColumnType } from 'vue';
+
+// 照明区域按钮单选
+interface Button {
+    label: string;
+    selected: boolean;
+}
+const buttons = ref<Button[]>([
+    { label: "A区", selected: false },
+    { label: "B区", selected: false },
+    { label: "C区", selected: false },
+    { label: "D区", selected: false },
+    { label: "计划启用", selected: false },
+]);
+const selectedButton = ref<Button | null>(null);
+const selectButton = (button: Button) => {
+    selectedButton.value = button;
+};
+// 照明回路按钮
+interface Button {
+    label: string;
+    selected: boolean;
+}
+const buttons2 = ref<Button[]>([
+    { label: "1区", selected: false },
+    { label: "2区", selected: false },
+    { label: "3区", selected: false },
+    { label: "4区", selected: false },
+]);
+const showSelectAll = ref(false);
+const bt = ref(false);
+const selectionModeText = ref("批量");
+const toggleSelection = (button2: Button) => {
+    if (!showSelectAll.value) {
+        // 单选模式
+        for (const button of buttons2.value) {
+            button.selected = false;
+        }
+        button2.selected = true;
+    } else {
+        // 批量选择模式
+        button2.selected = !button2.selected;
+        bt.value = false;
+    }
+};
+const toggleSelectionMode = () => {
+    showSelectAll.value = !showSelectAll.value;
+    selectionModeText.value = showSelectAll.value ? "单选" : "批量";
+};
+const selectAll = () => {
+    if (bt.value == false) {
+        for (const button of buttons2.value) {
+            button.selected = true;
+            bt.value = true;
+        }
+    } else {
+        for (const button of buttons2.value) {
+            button.selected = false;
+            bt.value = false;
+        }
+    }
+};
+// 控制模式按钮
+interface Button {
+    label: string;
+    selected: boolean;
+}
+const controlbutton = ref<Button[]>([
+    { label: "A区", selected: false },
+    { label: "B区", selected: false },
+    { label: "C区", selected: false },
+]);
+const selectedButton3 = ref<Button | null>(null);
+const selectButton3 = (button3: Button) => {
+    selectedButton3.value = button3;
+};
+// 控制场景按钮
+interface Button {
+    label: string;
+    selected: boolean;
+}
+const controlscenebuttons = ref<Button[]>([
+    { label: "检修", selected: false },
+    { label: "午休", selected: false },
+    { label: "疏散", selected: false },
+    { label: "客流高峰", selected: false },
+]);
+const selectedButton4 = ref<Button | null>(null);
+const selectButton4 = (button4: Button) => {
+    selectedButton4.value = button4;
+};
+interface DataItem {
+    key: string;
+    name: string;
+    age: number;
+    address: string;
+}
+const columns = [
+    {
+        title: '序号',
+        dataIndex: 'key',
+    },
+    {
+        title: '执行时间',
+        dataIndex: 'data',
+    },
+    {
+        title: '计划名称',
+        dataIndex: 'planname',
+    },
+    {
+        title: '状态',
+        dataIndex: 'status'
+    },
+    {
+        title: '状态',
+        dataIndex: 'operation',
+    },
+];
+
+const dataSource: Ref<DataItem[]> = 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 columns1 = [
+    {
+        title: '序号',
+        dataIndex: 'key',
+    },
+    {
+        title: '执行时间',
+        dataIndex: 'data',
+    },
+    {
+        title: '操作内容',
+        dataIndex: 'planname',
+    },
+    {
+        title: '操作人',
+        dataIndex: 'status'
+    }
+];
+const dataSource1: Ref<DataItem[]> = 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 visible = ref(true);
+const activeKey = ref('1');
+const afterVisibleChange = (bool: boolean) => {
+    console.log('visible', bool);
+};
+
+const showDrawer = () => {
+    visible.value = true;
+};
+</script>
+
+<style scoped>
+.lightarea {
+    left: 51px;
+    width: 100%;
+    margin-top: 20px;
+}
+
+.lightareatab,
+.lightareatext {
+    display: inline-block;
+}
+
+.lightareatab,
+.circuittab,
+.controltab,
+.controlscenetab,
+.lightparameterstab {
+    left: 0px;
+    top: 5px;
+    width: 3px;
+    height: 13px;
+    opacity: 1;
+    border-radius: 1px;
+    background: rgba(67, 136, 251, 1);
+}
+
+.lightareatext,
+.circuittext,
+.controltext,
+.controlscenetext,
+.lightparameterstext {
+    margin-left: 11px;
+    font-size: 16px;
+}
+
+.plan {
+    width: 88px;
+    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;
+}
+
+
+.area {
+    margin-left: -17px;
+}
+
+.btn {
+    padding: 12px 28px;
+    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(102, 102, 102, 1);
+    text-align: center;
+    vertical-align: top;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.selected {
+    background-color: rgba(39, 120, 255, 1);
+    color: 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,
+.controltab {
+    left: 0px;
+    top: 5px;
+    width: 3px;
+    height: 13px;
+    opacity: 1;
+    border-radius: 1px;
+    background: rgba(67, 136, 251, 1);
+}
+
+.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;
+}
+
+.both {
+    width: 60px;
+    height: 32px;
+    opacity: 1;
+    border: 1px solid rgba(255, 118, 2, 1);
+    color: rgba(255, 255, 255, 1);
+    border-radius: 5px;
+    background-color: rgba(255, 118, 2, 1);
+    margin-left: 11px;
+}
+
+.controlarea {
+    left: 51px;
+    width: 100%;
+    margin-top: 20px;
+}
+
+.controltab,
+.controltext {
+    display: inline-block;
+}
+
+
+:deep(.el-drawer__body) {
+    padding-top: 75px;
+    height: 100%;
+}
+
+:deep(.el-tabs__content) {
+    height: 100%;
+}
+
+:deep(.cell) {
+    text-align: center;
+}
+
+:deep(#pane-first) {
+    height: 100%;
+}
+
+.controlscenetab,
+.controlscenetext {
+    display: inline-block;
+}
+
+
+
+.lightparameterstab,
+.lightparameterstext {
+    display: inline-block;
+}
+
+.lightparameterstextarea {
+    border: 1px solid rgba(236, 239, 245, 1);
+    margin-top: 10px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    /* grid-column-gap: 10px; */
+    /* grid-row-gap: 10px; */
+}
+
+.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 {
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    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;
+}
+</style>

hx-ai-intelligent/vite.config.ts

@@ -12,7 +12,7 @@ const proxy = {
     changeOrigin: true,
   },
   '/carbon-smart': {
-    target: 'http://192.168.112.144:8224',
+    target: 'http://123.60.103.97:8224',
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/carbon-smart/, ''),
   },

package.json

@@ -34,6 +34,7 @@
     "dayjs": "^1.11.2",
     "echarts": "^5.3.2",
     "echarts-gl": "^2.0.9",
+    "element-plus": "^2.7.4",
     "element-resize-detector": "^1.2.4",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",