chenpingsen
2 months ago
8 changed files with 995 additions and 1403 deletions
@ -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
@ -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; |
|||
} |
|||
|
|||
} |
|||
@ -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> |
|||
Loading…
Reference in new issue