|
@ -1,8 +1,6 @@ |
|
|
<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"> |
|
@ -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,7 +110,12 @@ |
|
|
</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="操作内容" /> |
|
@ -112,19 +131,18 @@ |
|
|
</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) => { |
|
@ -136,14 +154,14 @@ interface Button { |
|
|
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) { |
|
|
// 单选模式 |
|
|
// 单选模式 |
|
@ -159,7 +177,7 @@ const toggleSelection = (button2: Button) => { |
|
|
}; |
|
|
}; |
|
|
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) { |
|
@ -180,9 +198,9 @@ interface Button { |
|
|
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) => { |
|
@ -194,18 +212,18 @@ interface Button { |
|
|
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; |
|
|
}; |
|
|
}; |
|
|
const drawer = ref(true); |
|
|
const drawer = ref(true); |
|
|
import type { TabsPaneContext } from "element-plus"; |
|
|
import type { TabsPaneContext } from 'element-plus'; |
|
|
const activeName = ref("first"); |
|
|
const activeName = ref('first'); |
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => { |
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => { |
|
|
console.log(tab, event); |
|
|
console.log(tab, event); |
|
|
}; |
|
|
}; |
|
@ -221,42 +239,42 @@ interface User { |
|
|
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> |
|
|
|
|
|
|
|
@ -284,7 +302,6 @@ el-tabs { |
|
|
background-color: blueviolet; |
|
|
background-color: blueviolet; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.demo-tabs > .el-tabs__content { |
|
|
.demo-tabs > .el-tabs__content { |
|
|
padding: 32px; |
|
|
padding: 32px; |
|
|
color: #6b778c; |
|
|
color: #6b778c; |
|
@ -562,6 +579,6 @@ el-tabs { |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
right: 0; |
|
|
right: 0; |
|
|
margin-bottom: 10px; |
|
|
margin-bottom: 10px; |
|
|
margin-right: 20px |
|
|
margin-right: 20px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|