xuziqiang
3 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