xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: code format

Browse Source
This commit is contained in:
xuziqiang
2024-06-06 17:02:49 +08:00
parent 2141efd7a7
commit 6a31e3199b
2 changed files with 786 additions and 765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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