You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
586 lines
14 KiB
586 lines
14 KiB
<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>
|