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

fix: code format

main
xuziqiang 4 months ago
parent
2141efd7a7
commit
6a31e3199b
2 changed files with 826 additions and 805 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 939
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.vue
  2. 692
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue

939
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[]>([
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;
}
};
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; 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[] = [
interface Button { {
label: string; id: 1,
selected: boolean; date: '2016-05-03',
} planname: '劳动节',
const controlbutton = ref<Button[]>([ status: '暂停中',
{ label: "A区", selected: false }, },
{ label: "B区", selected: false }, {
{ label: "C区", selected: false }, id: 2,
]); date: '2016-05-02',
const selectedButton3 = ref<Button | null>(null); planname: '国庆节',
const selectButton3 = (button3: Button) => { status: '待执行',
selectedButton3.value = button3; },
}; {
// 控制场景按钮 id: 3,
interface Button { date: '2016-05-04',
label: string; planname: '元旦',
selected: boolean; status: '待执行',
} },
const controlscenebuttons = ref<Button[]>([ ];
{ label: "检修", selected: false }, const tableData2: User[] = [
{ label: "午休", selected: false }, {
{ label: "疏散", selected: false }, id: 1,
{ label: "客流高峰", selected: false }, date: '2016-05-03',
]); planname: '计划再开',
const selectedButton4 = ref<Button | null>(null); status: '张三',
const selectButton4 = (button4: Button) => { },
selectedButton4.value = button4; {
}; id: 2,
const drawer = ref(true); date: '2016-05-02',
import type { TabsPaneContext } from "element-plus"; planname: '检修模式',
const activeName = ref("first"); status: '李四',
const handleClick = (tab: TabsPaneContext, event: Event) => { },
console.log(tab, event); {
}; id: 3,
date: '2016-05-04',
//计划列表 planname: '设备变更',
interface User { status: '王五',
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> </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 {
.demo-tabs>.el-tabs__content { padding: 32px;
padding: 32px; color: #6b778c;
color: #6b778c; font-size: 32px;
font-size: 32px; font-weight: 600;
font-weight: 600; }
}
.lightarea {
.lightarea { left: 51px;
left: 51px; width: 100%;
width: 100%; }
}
.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; height: 13px;
height: 13px; 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; border: 1px solid rgba(67, 136, 251, 1);
border: 1px solid rgba(67, 136, 251, 1); color: rgba(67, 136, 251, 1);
color: rgba(67, 136, 251, 1); 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, .btnarea,
.btnarea, .controlmodebtnarea,
.controlmodebtnarea, .controlscenearea,
.controlscenearea, .lightparametersarea {
.lightparametersarea { margin-top: 20px;
margin-top: 20px; }
}
.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; /* width: 80px; */
/* width: 80px; */ /* height: 40px; */
/* height: 40px; */ font-size: 14px;
font-size: 14px; font-weight: 400;
font-weight: 400; opacity: 1;
opacity: 1; border: 1px solid rgba(207, 212, 219, 1);
border: 1px solid rgba(207, 212, 219, 1); line-height: 20.27px;
line-height: 20.27px; color: rgba(102, 102, 102, 1);
color: rgba(102, 102, 102, 1); text-align: center;
text-align: center; 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 { 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; height: 13px;
height: 13px; 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; border: 1px solid rgba(67, 136, 251, 1);
border: 1px solid rgba(67, 136, 251, 1); color: rgba(67, 136, 251, 1);
color: rgba(67, 136, 251, 1); 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; border: 1px solid rgba(255, 118, 2, 1);
border: 1px solid rgba(255, 118, 2, 1); color: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1); 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; }
}
.controlscenetab,
.controlscenetab, .controlscenetext {
.controlscenetext { 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; }
}
.controlmodebtnarea {
.controlmodebtnarea { margin-top: 20px;
margin-top: 20px; height: 100%;
height: 100%; }
}
.lightparameterstab,
.lightparameterstab, .lightparameterstext {
.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; grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr; 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; justify-content: flex-end;
justify-content: flex-end; align-items: center;
align-items: center; position: fixed;
position: fixed; 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; opacity: 1;
opacity: 1; border-radius: 4px;
border-radius: 4px; background: rgba(67, 136, 251, 1);
background: rgba(67, 136, 251, 1); font-size: 14px;
font-size: 14px; font-weight: 400;
font-weight: 400; 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; border-radius: 4px;
border-radius: 4px; font-size: 14px;
font-size: 14px; font-weight: 400;
font-weight: 400; 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; border-radius: 4px;
border-radius: 4px; background: rgba(67, 136, 251, 1);
background: rgba(67, 136, 251, 1); border: rgba(67, 136, 251, 1);
border: rgba(67, 136, 251, 1); 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; justify-content: flex-end;
justify-content: flex-end; align-items: center;
align-items: center; position: fixed;
position: fixed; bottom: 0;
bottom: 0; right: 0;
right: 0; margin-bottom: 10px;
margin-bottom: 10px; margin-right: 20px;
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,
.lightparameterstab, .lightparameterstext {
.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>

Write Preview
Loading…
Cancel
Save