|
@ -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> |