add:增加照明系统前端交互
This commit is contained in:
chenpingsen
@@ -0,0 +1,141 @@
|
||||
.out-dialog {
|
||||
position: fixed;
|
||||
right: 496px;
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
color: rgb(255, 83, 0);
|
||||
background: black;
|
||||
display: flex;
|
||||
padding: 25px;
|
||||
flex-direction: column;
|
||||
.content {
|
||||
overflow-y: scroll;
|
||||
.div-operation {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 13px;
|
||||
opacity: 1;
|
||||
border-radius: 1px;
|
||||
background: rgba(67, 136, 251, 1);
|
||||
}
|
||||
.text-operation {
|
||||
display: inline-block;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.j-box {
|
||||
background-color: #000;
|
||||
opacity: 1;
|
||||
z-index: 99999;
|
||||
overflow-y: scroll;
|
||||
.journal {
|
||||
padding: 1% 3%;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: rgba(0, 0, 0);
|
||||
border-radius: 12px;
|
||||
border: 2px solid transparent;
|
||||
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
|
||||
}
|
||||
.imgText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.ztzm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cxbtn {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
width: 59.79px;
|
||||
height: 32px;
|
||||
opacity: 1;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 187, 0, 1) 0%,
|
||||
rgba(255, 112, 3, 1) 91.21%,
|
||||
rgba(255, 129, 3, 1) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-row-gap: 15px;
|
||||
.btn-item {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
.left {
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.right {
|
||||
width: 140px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
img {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.execute, .cancel {
|
||||
margin-right: 10px;
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.execute {
|
||||
background: rgb(67, 136, 251);
|
||||
color: white;
|
||||
}
|
||||
.cancel {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,156 +0,0 @@
|
||||
// 页面容器
|
||||
.lighting-box {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
position: relative;
|
||||
// background: linear-gradient(#badaff, #8cabeb, #7095de);
|
||||
// 照明设备功能总容器
|
||||
.lighting-img-box {
|
||||
position: relative;
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
user-select: none;
|
||||
background-image: url(../image/bg.jpg);
|
||||
// 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性
|
||||
perspective: 1000px;
|
||||
perspective-origin: 850px -160px;
|
||||
// 左上角区域切换功能
|
||||
.btn-box {
|
||||
width: 120px;
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.btn-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background: rgba(39, 120, 255, 1);
|
||||
border: 1px solid rgba(51, 199, 255, 1);
|
||||
box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
}
|
||||
.btn-item:hover {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
// 大区分区
|
||||
.area{
|
||||
position: absolute;
|
||||
bottom: 170px;
|
||||
left: 240px;
|
||||
width: 780px;
|
||||
height: 240px;
|
||||
transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.area1 {
|
||||
width: 170px;
|
||||
background: rgba(0, 251, 91, 0.3);
|
||||
border: 2px solid rgb(0, 251, 91);
|
||||
display: flex;
|
||||
}
|
||||
.area2 {
|
||||
width: 240px;
|
||||
background: rgba(255, 165, 0, 0.3);
|
||||
border: 2px solid rgb(255, 165, 0);
|
||||
display: flex;
|
||||
}
|
||||
.area3 {
|
||||
width: 110px;
|
||||
background: rgba(255, 0, 0, 0.3);
|
||||
border: 2px solid rgb(255, 0, 0);
|
||||
}
|
||||
.area4 {
|
||||
flex: 1;
|
||||
background: rgba(80, 236, 244, 0.3);
|
||||
border: 2px solid rgb(80, 236, 244);
|
||||
}
|
||||
// .area-item:hover {
|
||||
// transform: scale(1.05);
|
||||
// }
|
||||
.area-item {
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
>.light-group {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.group-shadow1 {
|
||||
width: 35px;
|
||||
height: 150px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.group-shadow2 {
|
||||
width: 35px;
|
||||
height: 180px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.group-shadow3 {
|
||||
width: 40px;
|
||||
height: 180px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.group-shadow4 {
|
||||
width: 40px;
|
||||
height: 160px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
// .group-shadow {
|
||||
// transition: all ease 0.2s;
|
||||
// }
|
||||
// .group-shadow:hover {
|
||||
// transform: scale(1.05);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 总容器与抽屉按钮
|
||||
.ns-content-main {
|
||||
position: relative;
|
||||
// 抽屉打开按钮
|
||||
.drawer-box-in {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: rgba(0, 0 ,0 ,0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
// 抽屉关闭按钮
|
||||
.drawer-box-out {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
position: fixed;
|
||||
right: 496px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: rgba(0, 0 ,0 ,0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -3,19 +3,19 @@
|
||||
<div class="lighting-img-box">
|
||||
<!-- 左上角，区域切换 -->
|
||||
<div class="btn-box">
|
||||
<button class="btn-item">1F</button>
|
||||
<button class="btn-item">2F</button>
|
||||
<button class="btn-item">站台</button>
|
||||
<button class="btn-item" @click=changeArea(1)>1F</button>
|
||||
<button class="btn-item" @click=changeArea(2)>2F</button>
|
||||
<button class="btn-item" @click=changeArea(3)>站台</button>
|
||||
</div>
|
||||
<!-- 楼层区域 -->
|
||||
<div class="area">
|
||||
<div
|
||||
v-for="(item, index) in treeData"
|
||||
:class="computedClass(item.id)"
|
||||
@click="getArea(item.id)"
|
||||
:class="computedClass(String(item.id))"
|
||||
@click="getArea(item)"
|
||||
:key="index">
|
||||
<div v-for="(v, i) in item.children" :key="i" class="light-group">
|
||||
<div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v.id)"></div>
|
||||
<div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,16 +40,18 @@
|
||||
placement="right"
|
||||
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
|
||||
:closable="false"
|
||||
id="Odrawer"
|
||||
id="drawer"
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<tabs1 @changeArea="getArea" :treeData="treeData"></tabs1>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
|
||||
<tabs2></tabs2>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志">
|
||||
<tabs3></tabs3>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"></a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
</div>
|
||||
@@ -61,15 +63,17 @@ import { ref } from 'vue';
|
||||
import { treeData } from './treeData'
|
||||
import light from './light.vue';
|
||||
import tabs1 from './tabs1.vue'
|
||||
import tabs2 from './tabs2.vue'
|
||||
import tabs3 from './tabs3.vue'
|
||||
// ICON
|
||||
import {
|
||||
DoubleLeftOutlined,
|
||||
DoubleRightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
// 分区 - 当前选择的分区 - 默认选择一区
|
||||
let area = ref(['1'])
|
||||
// 分区 - 分区小灯泡
|
||||
// 分区 - 当前选择的分区序号 - 默认选择一区
|
||||
const area = ref(['1'])
|
||||
// 分区 - 分区小灯泡 - 此处位置需前端写死
|
||||
const bulbs = ref([
|
||||
{
|
||||
styleText: { left: '190px', bottom: '200px' },
|
||||
@@ -121,6 +125,16 @@ const bulbs = ref([
|
||||
},
|
||||
])
|
||||
|
||||
// 分区 - 左上角分区切换
|
||||
const changeArea = (area: number) => {
|
||||
if (area == 1) {
|
||||
console.log('1F')
|
||||
} else if (area == 2) {
|
||||
console.log('2F')
|
||||
} else if (area == 3) {
|
||||
console.log('站台')
|
||||
}
|
||||
}
|
||||
// 分区 - 单个分区切换
|
||||
const getArea = (result: any) => {
|
||||
// 如果传入的值是数组
|
||||
@@ -132,16 +146,14 @@ const getArea = (result: any) => {
|
||||
area.value[0] = String(result)
|
||||
}
|
||||
}
|
||||
// 分区 - 多个分区切换，只有照明回路能够触发多个分区
|
||||
// 分区 - 样式函数
|
||||
const computedClass = (number: number) => {
|
||||
if (area.value.indexOf(number) != -1) {
|
||||
return `isActive area-item area${number}`
|
||||
const computedClass = (string: string) => {
|
||||
if (area.value.indexOf(string) != -1) {
|
||||
return `isActive area-item area${string}`
|
||||
} else {
|
||||
return `area-item area${number}`
|
||||
return `area-item area${string}`
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉 - 当前选择的tab
|
||||
let activeKey = ref('1');
|
||||
// 抽屉 - 打开状态
|
||||
@@ -153,7 +165,7 @@ const toggleDrawer = () => {
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./indexs.less";
|
||||
@import "./index.less";
|
||||
.isActive {
|
||||
border: 3px solid white !important;
|
||||
}
|
||||
|
||||
@@ -1162,16 +1162,11 @@
|
||||
selectedButton.value = null;
|
||||
showControlMode.value = false;
|
||||
showControlScene.value = false;
|
||||
selectedButton3.value = null;
|
||||
selectedButton4.value = null;
|
||||
selectedButton3.value = '';
|
||||
selectedButton4.value = '';
|
||||
};
|
||||
|
||||
// 操作日志
|
||||
const logModalVisible = ref(false);
|
||||
const handlerefClick1 = () => {
|
||||
console.log(1111);
|
||||
executevisible.value = true;
|
||||
};
|
||||
|
||||
|
||||
let trindex = ref('-1');
|
||||
const handleRowClick = (index: any) => {
|
||||
@@ -1192,9 +1187,7 @@
|
||||
};
|
||||
// 添加模态框
|
||||
const addvisible = ref<boolean>(false);
|
||||
const addModal = () => {
|
||||
addvisible.value = true;
|
||||
};
|
||||
|
||||
// 穿梭框
|
||||
interface MockData {
|
||||
key: string;
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<div class="area">
|
||||
<template v-if="!showAllButtonsArea">
|
||||
<button v-for="(button, index) in limitedButtons1" :key="index"
|
||||
:class="{ btn: true, selected: button.selected }" @click="selectButton(button, index)">
|
||||
:class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
|
||||
{{ button.label }}
|
||||
</button>
|
||||
<div style="margin-top: 10px">
|
||||
@@ -20,8 +20,8 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button v-for="(button, index) in props.treeData" :key="index"
|
||||
:class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
|
||||
<button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
|
||||
@click="selectButton(button)">
|
||||
{{ button.label }}
|
||||
</button>
|
||||
<div style="margin-top: 10px">
|
||||
@@ -36,7 +36,7 @@
|
||||
<div class="circuit-tab"></div>
|
||||
<span class="circuit-text">照明回路</span>
|
||||
<div class="btn2">
|
||||
<button class="openplan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2">
|
||||
<button class="openPlan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2">
|
||||
{{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
|
||||
</button>
|
||||
<a-switch v-model:checked="selectAllCheckbox" :disabled="singleSelection" :class="{
|
||||
@@ -49,7 +49,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnarea" v-if="selectedButton">
|
||||
<div class="btnArea" v-if="selectedButton">
|
||||
<template v-if="!showAllButtons">
|
||||
<button v-for="(button2, index) in limitedButtons2" :key="index"
|
||||
:class="{ btn: true, selected: button2.selected }" class="zmhlbtn" @click="toggleSelection(button2)">
|
||||
@@ -80,7 +80,7 @@
|
||||
<!-- 控制模式按钮部分 -->
|
||||
<div class="control-mode-btn-area" v-show="showControlMode">
|
||||
<button v-for="(button3, index) in controlType" :key="index"
|
||||
:class="{ btn: true, selected: button3.type === thisButtonType }" @click="selectButton3(button3)">
|
||||
:class="{ btn: true, selected: button3.type == thisButton.type }" @click="selectButton3(button3)">
|
||||
{{ button3.name }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -119,7 +119,7 @@
|
||||
:style="{ height: '50px' }">
|
||||
<td>{{ row.num }}</td>
|
||||
<td>{{ row.light }}</td>
|
||||
<td>{{ row.tempruter }}</td>
|
||||
<td>{{ row.temperature }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -130,170 +130,71 @@
|
||||
<button class="flushed" @click="refresh">刷新</button>
|
||||
<button class="execute" @click="showModal">执行</button>
|
||||
</div>
|
||||
<!-- <a-modal :v-if="cxlist.length === 0" v-model:visible="executevisible" width="500px" height="792px" okText="执行"
|
||||
:closable="false" @ok="handleOk2" :mask="false" :bodyStyle="{
|
||||
opacity: 1,
|
||||
background: ' rgba(0,0,0)',
|
||||
color: 'rgba(255,83,0)',
|
||||
boxSizing: 'borderBox',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: 'fixed',
|
||||
right: '496px',
|
||||
top: '0',
|
||||
}">
|
||||
<div :v-if="cxlist.length === 0" style="height: 792px">
|
||||
|
||||
<div class="out-dialog" v-if="executeVisible">
|
||||
<div class="content" v-if="executeVisible">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">变更内容 </span>
|
||||
</div>
|
||||
<div class="jbox" v-for="item in cxlist" :key="item.id">
|
||||
<div class="j-box" v-for="item in cxList" :key="item.id">
|
||||
<div class="journal" style="margin-top: 20px">
|
||||
<div class="imgText">
|
||||
<div class="zjzm">
|
||||
<img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />
|
||||
<span class="titletext" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{
|
||||
item.name }}</span>
|
||||
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />
|
||||
<span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
|
||||
</div>
|
||||
<button class="cxbtn" @click="delbtn(item.id)">撤销</button>
|
||||
<button class="cxbtn" @click="delBtn(item.id)">撤销</button>
|
||||
</div>
|
||||
<div class="control-btn">
|
||||
<button style="
|
||||
width: 96px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgba(95, 154, 251, 1);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
">
|
||||
控制模式
|
||||
</button>
|
||||
<span style="
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 12px;
|
||||
margin-right: 8px;
|
||||
">手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span style="
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
margin-right: 40px;
|
||||
">自动</span>
|
||||
</div>
|
||||
<div class="light-btn">
|
||||
<button style="
|
||||
width: 68px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgba(95, 154, 251, 1);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
">
|
||||
亮度
|
||||
</button>
|
||||
<span style="
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 12px;
|
||||
margin-right: 8px;
|
||||
">100lux</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span style="
|
||||
color: rgba(243, 97, 99, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
">30lux</span>
|
||||
</div>
|
||||
<div class="control-area-btn">
|
||||
<button style="
|
||||
width: 96px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgba(95, 154, 251, 1);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
">
|
||||
控制场景
|
||||
</button>
|
||||
<span style="
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 12px;
|
||||
margin-right: 8px;
|
||||
">手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span style="
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
margin-right: 40px;
|
||||
">自动</span>
|
||||
</div>
|
||||
<div class="temp-btn">
|
||||
<button style="
|
||||
width: 68px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
);
|
||||
border: 1px solid rgba(95, 154, 251, 1);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
">
|
||||
色温
|
||||
</button>
|
||||
<span style="
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 12px;
|
||||
margin-right: 8px;
|
||||
">4000k</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span style="
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
">3800k</span>
|
||||
<div class="btn-box">
|
||||
<div class="btn-item">
|
||||
<div class="left">控制模式</div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
亮度
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>100lux</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>30lux</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
控制场景
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
色温
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>4000k</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>3800k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal> -->
|
||||
<div style="width: 100%; height: 60px;"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="executeVisible = false">取消</button>
|
||||
<button class="execute">执行</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -307,19 +208,23 @@ import {
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
const tree = props.treeData
|
||||
const data = props.treeData[0]
|
||||
// 默认选中第一个分区
|
||||
tree[0].selected = true
|
||||
data.selected = true
|
||||
// 默认展示第一个分区的回路
|
||||
buttons2.value = tree[0].children
|
||||
buttons2.value = data.children
|
||||
})
|
||||
|
||||
// 与父组件的交互 ===================================================================
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
treeData: {
|
||||
type: Array
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
line: {
|
||||
type: Array
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(['changeArea']);
|
||||
|
||||
@@ -336,20 +241,13 @@ const togglePlan = () => {
|
||||
const showAllButtonsArea = ref(false);
|
||||
// 照明区域 - 分区 - 被选中的按钮 默认为1
|
||||
const selectedButton = ref('1');
|
||||
// 照明区域 - 区域切换（按钮点击）事件
|
||||
const selectButton = (button: any, index: number) => {
|
||||
// 照明区域 - 区域切换（按钮点击-单选）事件
|
||||
const selectButton = (button: any) => {
|
||||
// 当前选中按钮
|
||||
selectedButton.value = button;
|
||||
// 分区只能单选
|
||||
props.treeData.forEach(item => {
|
||||
item.selected = false
|
||||
})
|
||||
// 重置
|
||||
initMenu(1)
|
||||
button.selected = true
|
||||
// 切换1级分区时，重置二级分区
|
||||
buttons2.value.forEach(item => {
|
||||
item.selected = false
|
||||
})
|
||||
showControlMode.value = false
|
||||
buttons2.value = button.children
|
||||
// 反选area
|
||||
emit('changeArea', []);
|
||||
@@ -375,17 +273,8 @@ const togglePlan2 = () => {
|
||||
isPlanEnabled2.value = !isPlanEnabled2.value;
|
||||
// 禁用 - 则取消选中，增加禁止图标
|
||||
if (isPlanEnabled2.value) {
|
||||
item.selected = false;
|
||||
item.stop = true
|
||||
let level1 = String(selectedButton.value.id)
|
||||
let arr = [level1]
|
||||
buttons2.value.forEach(item => {
|
||||
if (item.selected) {
|
||||
arr.push(item.id)
|
||||
}
|
||||
})
|
||||
emit('changeArea', arr)
|
||||
// 启用 - 去除禁止图标
|
||||
// 启用 - 去除禁止图标
|
||||
} else {
|
||||
item.stop = false
|
||||
}
|
||||
@@ -410,12 +299,10 @@ const toggleAllSelection = () => {
|
||||
// 全选
|
||||
if (selectAllCheckbox.value) {
|
||||
buttons2.value.forEach((item) => {
|
||||
if (!item.stop) {
|
||||
item.selected = true;
|
||||
arr.push(item.id)
|
||||
}
|
||||
item.selected = true;
|
||||
arr.push(item.id)
|
||||
});
|
||||
// 全不选
|
||||
// 全不选
|
||||
} else {
|
||||
buttons2.value.forEach((item) => {
|
||||
item.selected = false;
|
||||
@@ -431,7 +318,7 @@ const toggleSelection = (button: any) => {
|
||||
zmhlid.value = button.id
|
||||
// 如果已被锁定，则展示禁用/启用状态跳出
|
||||
if (button.stop) {
|
||||
return isPlanEnabled2.value = true
|
||||
isPlanEnabled2.value = true
|
||||
} else {
|
||||
isPlanEnabled2.value = false
|
||||
}
|
||||
@@ -455,19 +342,24 @@ const toggleSelection = (button: any) => {
|
||||
arr.push(item.id)
|
||||
}
|
||||
});
|
||||
console.log(arr)
|
||||
emit('changeArea', arr)
|
||||
}
|
||||
// 用于展示控制模式
|
||||
if (button.selected) {
|
||||
// 发生了选中事件
|
||||
showControlMode.value = true
|
||||
thisButtonType.value = button.type
|
||||
thisButton.value = button
|
||||
if (button.type == 3) {
|
||||
showControlScene.value = true
|
||||
} else {
|
||||
showControlScene.value = false
|
||||
}
|
||||
} else {
|
||||
// 未发生选中 或 多选被取消
|
||||
showControlMode.value = false
|
||||
thisButton.value = null
|
||||
thisButton.value = { type: '0' }
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
// 照明回路 - 按钮区展开与收起状态
|
||||
const showAllButtons = ref(false);
|
||||
@@ -479,16 +371,12 @@ const buttons2 = ref([]);
|
||||
// 控制模式 =======================================================================
|
||||
// 控制模式 - 决定该区域是否显示
|
||||
const showControlMode = ref(false);
|
||||
const thisButtonType = ref(null)
|
||||
const thisButton = ref(null)
|
||||
// 控制模式 - 当前选择按钮
|
||||
const selectedButton3 = ref('');
|
||||
const thisButton = ref({ type: '0' })
|
||||
// 控制模式 - 按钮切换
|
||||
const selectButton3 = (button3) => {
|
||||
thisButton.value.type = button3.type
|
||||
thisButtonType.value = button3.type
|
||||
showControlScene.value = button3.name === '手动';
|
||||
selectedButton4.value = ''; // 清空选中的控制场景按钮
|
||||
selectedButton4.value = null; // 清空选中的控制场景按钮
|
||||
};
|
||||
|
||||
// 控制场景 =======================================================================
|
||||
@@ -502,7 +390,7 @@ const controlSceneButtons = ref([
|
||||
{ label: '客流高峰', selected: false },
|
||||
]);
|
||||
// 控制场景 - 当前选择按钮
|
||||
const selectedButton4 = ref('');
|
||||
const selectedButton4 = ref(null);
|
||||
// 控制场景 - 按钮切换
|
||||
const selectButton4 = (button4) => {
|
||||
selectedButton4.value = button4.label;
|
||||
@@ -510,33 +398,112 @@ const selectButton4 = (button4) => {
|
||||
|
||||
// 灯具参数 ========================================================================
|
||||
// 灯具参数 - 表格数据
|
||||
const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
|
||||
const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
|
||||
|
||||
let trIndex = ref('-1');
|
||||
const handleRowClick = (index: any) => {
|
||||
trindex.value = index;
|
||||
if (index === trindex.value) {
|
||||
console.log('tri');
|
||||
}
|
||||
// 显示模态框
|
||||
logModalVisible.value = true;
|
||||
};
|
||||
trIndex.value = index;
|
||||
if (index === trIndex.value) {
|
||||
console.log('tri');
|
||||
}
|
||||
};
|
||||
|
||||
// 底部表格 ========================================================================
|
||||
// 内侧弹窗 ========================================================================
|
||||
const cxList = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '站厅照明 2区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '站厅照明 3区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
]);
|
||||
// const cxList = cxList.value.concat(cxList.value)
|
||||
//撤销
|
||||
const delBtn = (id: any) => {
|
||||
console.log(id);
|
||||
cxList.value.pop(id);
|
||||
console.log(cxList.value.length);
|
||||
|
||||
const refresh = () => {
|
||||
selectedButton.value = {};
|
||||
if (cxList.value.length === 0) {
|
||||
executeVisible.value = false;
|
||||
}
|
||||
};
|
||||
// 其他业务 ========================================================================
|
||||
|
||||
// 用于初始化5级联动的菜单
|
||||
const initMenu = (tier: number) => {
|
||||
// 1 = 照明区域 - 切换时，重置以下所有菜单
|
||||
if (tier == 1) {
|
||||
// 切换前，清除照明回路的选中状态
|
||||
buttons2.value.forEach(item => {
|
||||
item.selected = false
|
||||
})
|
||||
// 切换后，清空所有选中状态
|
||||
props.treeData.forEach(item => {
|
||||
item.selected = false
|
||||
})
|
||||
// 控制模式 隐藏
|
||||
showControlMode.value = false;
|
||||
// 控制场景 隐藏
|
||||
showControlScene.value = false;
|
||||
selectedButton3.value = null;
|
||||
// 灯具参数 隐藏
|
||||
selectedButton4.value = null;
|
||||
} else if (tier == 2) {
|
||||
// 控制场景 隐藏
|
||||
showControlScene.value = false;
|
||||
// 灯具参数 隐藏
|
||||
selectedButton4.value = null;
|
||||
}
|
||||
}
|
||||
// 刷新
|
||||
const refresh = () => {
|
||||
executeVisible.value = false
|
||||
selectedButton.value = '1';
|
||||
emit('changeArea', []);
|
||||
emit('changeArea', [1]);
|
||||
showControlMode.value = false;
|
||||
showControlScene.value = false;
|
||||
selectedButton4.value = null;
|
||||
};
|
||||
// 执行确认
|
||||
const executevisible = ref<boolean>(false);
|
||||
const showModal = () => {
|
||||
executevisible.value = true;
|
||||
};
|
||||
const executeVisible = ref<boolean>(false);
|
||||
const showModal = () => {
|
||||
executeVisible.value = true;
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./dialogStyle.less";
|
||||
|
||||
// 抽屉
|
||||
.drawer-item {
|
||||
|
||||
@@ -614,7 +581,7 @@ const executevisible = ref<boolean>(false);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.openplan.enabled2 {
|
||||
.openPlan.enabled2 {
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
@@ -627,7 +594,7 @@ const executevisible = ref<boolean>(false);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.openplan.disabled2 {
|
||||
.openPlan.disabled2 {
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
@@ -639,7 +606,7 @@ const executevisible = ref<boolean>(false);
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.openplan:disabled {
|
||||
.openPlan:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -714,7 +681,7 @@ const executevisible = ref<boolean>(false);
|
||||
}
|
||||
|
||||
.area,
|
||||
.btnarea,
|
||||
.btnArea,
|
||||
.control-mode-btn-area,
|
||||
.control-scene-btn-area {
|
||||
margin-left: -17px;
|
||||
@@ -828,7 +795,6 @@ const executevisible = ref<boolean>(false);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.execute {
|
||||
@@ -836,6 +802,7 @@ const executevisible = ref<boolean>(false);
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
background: rgba(67, 136, 251, 1);
|
||||
font-size: 14px;
|
||||
@@ -848,6 +815,7 @@ const executevisible = ref<boolean>(false);
|
||||
.flushed {
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
@@ -857,50 +825,6 @@ const executevisible = ref<boolean>(false);
|
||||
border: 1px solid rgba(193, 197, 204, 1);
|
||||
}
|
||||
|
||||
.tabreboot,
|
||||
.tabdelete {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
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: white;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.atable {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-pagination) {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -1006,9 +930,12 @@ const executevisible = ref<boolean>(false);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zmhlbtn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 禁用图标
|
||||
.anticon-stop {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="div-add">
|
||||
<button class="add" @click="addModal">添加</button>
|
||||
</div>
|
||||
<table class="custom-table table1">
|
||||
<thead>
|
||||
<tr :style="{ background: 'rgba(35,45,69)' }">
|
||||
<th>序号</th>
|
||||
<th>执行时间</th>
|
||||
<th>计划名称</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, index) in dataSource" :key="index">
|
||||
<td>{{ row.key }}</td>
|
||||
<td>{{ row.data }}</td>
|
||||
<td>{{ row.planName }}</td>
|
||||
<td v-if="row.status === '待执行'">
|
||||
<button
|
||||
style="
|
||||
font-size: 12px;
|
||||
background: rgba(57, 215, 187, 0.1);
|
||||
color: rgb(57, 215, 187);
|
||||
border: 1px solid rgb(57, 215, 187);
|
||||
">
|
||||
{{ row.status }}
|
||||
</button>
|
||||
</td>
|
||||
<td v-if="row.status !== '待执行'">
|
||||
<button
|
||||
style="
|
||||
font-size: 12px;
|
||||
background: rgba(243, 97, 99, 0.1);
|
||||
border: 1px solid rgba(243, 97, 99);
|
||||
color: rgba(243, 97, 99);
|
||||
">
|
||||
{{ row.status }}
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="tabReboot" @click="handleRefClick1">重启</button>
|
||||
<button class="tabDelete">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="out-dialog" v-if="addVisible">
|
||||
<div class="content" v-if="addVisible">
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">计划库</span>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<a-transfer
|
||||
v-model:target-keys="targetKeys"
|
||||
:data-source="mockData"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
:render="(item) => item.title"
|
||||
@change="handleChange"
|
||||
:style="{ color: 'rgba(255,255,255,1)' }"
|
||||
@search="handleSearch"
|
||||
:listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
|
||||
</div>
|
||||
<div style="width: 100%; height: 60px;"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="addVisible = false">取消</button>
|
||||
<button class="execute">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const dataSource = ref([
|
||||
{
|
||||
key: '1',
|
||||
data: '2024-05-01',
|
||||
planName: '劳动节',
|
||||
status: '暂停中',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
data: '2024-05-01',
|
||||
planName: '国庆节',
|
||||
status: '待执行',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
data: '2024-05-01',
|
||||
planName: '元旦',
|
||||
status: '待执行',
|
||||
},
|
||||
]);
|
||||
const addVisible = ref<boolean>(false);
|
||||
// 操作日志
|
||||
const handleRefClick1 = () => {
|
||||
alert(111)
|
||||
};
|
||||
const addModal = () => {
|
||||
addVisible.value = true;
|
||||
};
|
||||
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
|
||||
console.log(keys, direction, moveKeys);
|
||||
};
|
||||
const handleSearch = (dir: string, value: string) => {
|
||||
console.log('search:', dir, value);
|
||||
};
|
||||
|
||||
// 穿梭框 相关业务
|
||||
interface MockData {
|
||||
key: string;
|
||||
title: string;
|
||||
description: string;
|
||||
chosen: boolean;
|
||||
}
|
||||
const mockData = ref([
|
||||
{
|
||||
key: '1',
|
||||
title: '计划再开',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
title: '检修模式',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
title: '设备变更',
|
||||
},
|
||||
]);
|
||||
const targetKeys = ref<string[]>([]);
|
||||
const filterOption = (inputValue: string, option: MockData) => {
|
||||
console.log(option.description);
|
||||
|
||||
return option.description.indexOf(inputValue) > -1;
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./dialogStyle.less";
|
||||
|
||||
// 右下角添加按钮
|
||||
.div-add {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-right: 20px;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
// 表格
|
||||
.custom-table {
|
||||
border-collapse: collapse;
|
||||
width: 416px;
|
||||
height: 60px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.custom-table th,
|
||||
.custom-table td {
|
||||
border: 1px solid rgba(163, 192, 243, 1);
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.table1 {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255, 255, 255);
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
// 表格中的操作按钮
|
||||
.tabReboot,
|
||||
.tabDelete {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
color: rgba(67, 136, 251, 1);
|
||||
}
|
||||
.tabReboot {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
::v-deep(.ant-transfer) {
|
||||
// 屏蔽自带的hover效果
|
||||
.ant-transfer-list-content-item:hover {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<table class="custom-table table1">
|
||||
<thead>
|
||||
<tr :style="{ background: 'rgba(35,45,69)' }">
|
||||
<th>序号</th>
|
||||
<th>执行时间</th>
|
||||
<th>操作内容</th>
|
||||
<th>操作人</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.key)"
|
||||
:class="row.key === trIndex ? 'isTrIndex' : ''">
|
||||
<td>{{ row.key }}</td>
|
||||
<td>{{ row.data }}</td>
|
||||
<td>{{ row.planName }}</td>
|
||||
<td>{{ row.status }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="out-dialog" v-if="logModalVisible">
|
||||
<div class="content" v-if="logModalVisible">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">变更内容 </span>
|
||||
</div>
|
||||
<div class="jbox" v-for="item in cxList" :key="item.id">
|
||||
<div class="journal" style="margin-top: 20px">
|
||||
<div class="imgText">
|
||||
<div class="zjzm">
|
||||
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />
|
||||
<span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{
|
||||
item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<div class="btn-item">
|
||||
<div class="left">控制模式</div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
亮度
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>100lux</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>30lux</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
控制场景
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
色温
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>4000k</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>3800k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 60px;"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="logModalVisible = false">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-add">
|
||||
<button class="add">刷新</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
// 与父组件的交互 ===================================================================
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
treeData: {
|
||||
type: Array
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['changeArea']);
|
||||
|
||||
// 表格数据
|
||||
const dataSource1 = ref([
|
||||
{
|
||||
key: '1',
|
||||
data: '2024-05-01',
|
||||
planName: '计划再开',
|
||||
status: '张三111',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
data: '2024-05-01',
|
||||
planName: '检修模式',
|
||||
status: '李四12',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
data: '2024-05-01',
|
||||
planName: '设备变更',
|
||||
status: '王五33',
|
||||
},
|
||||
]);
|
||||
const cxList = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '站厅照明 2区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '站厅照明 3区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
]);
|
||||
let trIndex = ref('-1');
|
||||
const logModalVisible = ref(false);
|
||||
const handleRowClick = (index: any) => {
|
||||
trIndex.value = index;
|
||||
if (index === trIndex.value) {
|
||||
console.log('tri');
|
||||
}
|
||||
// 显示模态框
|
||||
logModalVisible.value = true;
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./dialogStyle.less";
|
||||
|
||||
// 右下角添加按钮
|
||||
.div-add {
|
||||
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-right: 20px;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
// 表格
|
||||
.custom-table {
|
||||
border-collapse: collapse;
|
||||
width: 416px;
|
||||
height: 60px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.custom-table th,
|
||||
.custom-table td {
|
||||
border: 1px solid rgba(163, 192, 243, 1);
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table1 {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255, 255, 255);
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
.tabReboot,
|
||||
.tabDelete {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
color: rgba(67, 136, 251, 1);
|
||||
}
|
||||
|
||||
.tabReboot {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.isTrIndex {
|
||||
background: rgba(67, 136, 251, 1);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.ant-transfer) {
|
||||
|
||||
// 屏蔽自带的hover效果
|
||||
.ant-transfer-list-content-item:hover {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user