feat: 灯光

hx-ai-intelligent/src/main.ts

@@ -5,8 +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'
+// import ElementPlus from 'element-plus'
+// import 'element-plus/dist/index.css'
 const app = createApp(App);
 app.component('LeftOutlined', LeftOutlined);
 saasInit({
@@ -14,5 +14,5 @@ saasInit({
   apiModule,
   appConfig,
 });
-app.use(ElementPlus)
+// app.use(ElementPlus)
 app.mount('#app');

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

@@ -15,9 +15,9 @@ const equipmentControl = {
         {
           path: 'index',
           name: 'lightManageIndex',
-          component: () => import('/@/view/equipmentControl/lightingManage/index.vue'),
+          component: () => import('/@/view/equipmentControl/lightingManage/indexs.vue'),
           meta: {
-            title: '部门/权限',
+            title: '智能照明',
             keepAlive: true,
             // backApi: [],
           },

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

@@ -3,6 +3,7 @@
     <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">

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>