Browse Source

fix: code format

main
xuziqiang 6 months ago
parent
commit
6a31e3199b
  1. 937
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.vue
  2. 690
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue

937
hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.vue

@ -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,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 },
interface Button { { label: 'B区', selected: false },
label: string; { label: 'C区', selected: false },
selected: boolean; ]);
} const selectedButton3 = ref<Button | null>(null);
const controlbutton = ref<Button[]>([ const selectButton3 = (button3: Button) => {
{ label: "A区", selected: false }, selectedButton3.value = button3;
{ label: "B区", selected: false }, };
{ label: "C区", selected: false }, //
]); interface Button {
const selectedButton3 = ref<Button | null>(null); label: string;
const selectButton3 = (button3: Button) => { selected: boolean;
selectedButton3.value = button3; }
}; const controlscenebuttons = ref<Button[]>([
// { label: '检修', selected: false },
interface Button { { label: '午休', selected: false },
label: string; { label: '疏散', selected: false },
selected: boolean; { label: '客流高峰', selected: false },
} ]);
const controlscenebuttons = ref<Button[]>([ const selectedButton4 = ref<Button | null>(null);
{ label: "检修", selected: false }, const selectButton4 = (button4: Button) => {
{ label: "午休", selected: false }, selectedButton4.value = button4;
{ label: "疏散", selected: false }, };
{ label: "客流高峰", selected: false }, const drawer = ref(true);
]); import type { TabsPaneContext } from 'element-plus';
const selectedButton4 = ref<Button | null>(null); const activeName = ref('first');
const selectButton4 = (button4: Button) => { const handleClick = (tab: TabsPaneContext, event: Event) => {
selectedButton4.value = button4; console.log(tab, event);
}; };
const drawer = ref(true);
import type { TabsPaneContext } from "element-plus"; //
const activeName = ref("first"); interface User {
const handleClick = (tab: TabsPaneContext, event: Event) => { id: number;
console.log(tab, event); date: string;
}; planname: string;
status: string;
// }
interface User {
id: number; const tableData: User[] = [
date: string; {
planname: string; id: 1,
status: string; date: '2016-05-03',
} planname: '劳动节',
status: '暂停中',
const tableData: User[] = [ },
{ {
id: 1, id: 2,
date: "2016-05-03", date: '2016-05-02',
planname: "劳动节", planname: '国庆节',
status: "暂停中", status: '待执行',
}, },
{ {
id: 2, id: 3,
date: "2016-05-02", date: '2016-05-04',
planname: "国庆节", planname: '元旦',
status: "待执行", status: '待执行',
}, },
{ ];
id: 3, const tableData2: User[] = [
date: "2016-05-04", {
planname: "元旦", id: 1,
status: "待执行", date: '2016-05-03',
} planname: '计划再开',
]; status: '张三',
const tableData2: User[] = [ },
{ {
id: 1, id: 2,
date: "2016-05-03", date: '2016-05-02',
planname: "计划再开", planname: '检修模式',
status: "张三", status: '李四',
}, },
{ {
id: 2, id: 3,
date: "2016-05-02", date: '2016-05-04',
planname: "检修模式", planname: '设备变更',
status: "李四", 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>

690
hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue

@ -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>
Loading…
Cancel
Save