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