|
|
|
@ -13,9 +13,53 @@ |
|
|
|
<button class="F2">2F</button><br /> |
|
|
|
<button class="platform">站台</button> |
|
|
|
</div> |
|
|
|
<div class="light-tag"> |
|
|
|
<div class="light-tag-tit"> |
|
|
|
<img class="tagimg" src="/asset/image//bulbLogo/21962.png" alt=""> |
|
|
|
<span class="tagtext" :style="{ |
|
|
|
fontSize: '16px', |
|
|
|
fontWeight: 700, color: 'rgba(255, 255, 255, 1)' |
|
|
|
}">站厅照明 1区</span> |
|
|
|
<button :style="{ |
|
|
|
width: ' 50px', |
|
|
|
height: '24px', |
|
|
|
opacity: 1, |
|
|
|
background: 'rgba(57, 215, 187, 0.1)', |
|
|
|
border: '1px solid rgba(57, 215, 187, 1)', |
|
|
|
fontSize: '12px', |
|
|
|
fontWeight: 400, |
|
|
|
lineHeight: ' 17.38px', |
|
|
|
color: 'rgba(57, 215, 187, 1)', |
|
|
|
marginLeft:'180px' |
|
|
|
}">正常</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="light-tag-box"> |
|
|
|
|
|
|
|
|
|
|
|
<img src="/asset/image//bulbLogo/22496.png" alt=""> |
|
|
|
<span :style="{ color: 'rgba(64, 255, 252, 1)',marginLeft: '-60px', marginRight: '20px' }">控制模式</span> |
|
|
|
<span |
|
|
|
:style="{ color: 'rgba(255, 255, 255, 1)', fontSize: '16px', fontWeight: '700', marginRight: '20px' }">自动</span> |
|
|
|
<img src="/asset/image//bulbLogo/22546.png" alt=""> |
|
|
|
<span :style="{ color: 'rgba(64, 255, 252, 1)',marginLeft: '-60px' }">亮度</span> |
|
|
|
<span |
|
|
|
:style="{ color: 'rgba(255, 255, 255, 1)', fontSize: '16px', fontWeight: '700', marginLeft: '20px' }">1000lux</span> |
|
|
|
<img src="/asset/image//bulbLogo/22554.png" alt=""> |
|
|
|
<span :style="{ color: 'rgba(64, 255, 252, 1)',marginLeft: '-60px', marginRight: '20px' }">控制场景</span> |
|
|
|
<span |
|
|
|
:style="{ color: 'rgba(255, 255, 255, 1)', fontSize: '16px', fontWeight: '700', marginRight: '20px' }">舒适</span> |
|
|
|
<img src="/asset/image//bulbLogo/22553.png" alt=""> |
|
|
|
<span :style="{ color: 'rgba(64, 255, 252, 1)',marginLeft: '-60px' }">色温</span> |
|
|
|
<span |
|
|
|
:style="{ color: 'rgba(255, 255, 255, 1)', fontSize: '16px', fontWeight: '700', marginLeft: '20px' }">4200k</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<a-drawer v-model:visible="visible" class="custom-class" width="496" height="1080" placement="right" |
|
|
|
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }" :closable="false" id="Odrawer"> |
|
|
|
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }" :closable="false" id="Odrawer" |
|
|
|
:maskStyle="{ 'background-color': 'rgba(0,0,0,0)' }"> |
|
|
|
<div> |
|
|
|
<a-tabs v-model:activeKey="activeKey"> |
|
|
|
<a-tab-pane key="1" tab="控制面板"> |
|
|
|
@ -76,7 +120,8 @@ |
|
|
|
<div class="btnarea" v-if="selectedButton"> |
|
|
|
<template v-if="!showAllButtons"> |
|
|
|
<button v-for="(button2, index) in limitedButtons" :key="index" |
|
|
|
:class="{ btn: true, selected: button2.selected }" @click="toggleSelection(button2)"> |
|
|
|
:class="{ btn: true, selected: button2.selected }" class="zmhlbtn" @click="toggleSelection(button2)"> |
|
|
|
<stop-outlined v-if="button2.zmhld" /> |
|
|
|
{{ button2.label }} |
|
|
|
</button> |
|
|
|
<div style="margin-top: 10px"> |
|
|
|
@ -129,38 +174,54 @@ |
|
|
|
<span class="lightparameterstext"> 灯具参数 </span> |
|
|
|
</div> |
|
|
|
<div class="lightparameterstextarea" v-if="selectedButton4"> |
|
|
|
<p>开启数量</p> |
|
|
|
<p>亮度(lux)</p> |
|
|
|
<p>色温(k)</p> |
|
|
|
<p>8/10</p> |
|
|
|
<p>100</p> |
|
|
|
<p>4200</p> |
|
|
|
<table class="custom-table table1"> |
|
|
|
<thead> |
|
|
|
<tr :style="{ background: 'rgba(35,45,69)' }"> |
|
|
|
<th>开启数量</th> |
|
|
|
<th>亮度(lux)</th> |
|
|
|
<th>色温</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tr v-for="(row, index) in lightSource" :key="index" @click="handleRowClick(row.num)" |
|
|
|
:style="{ height: '50px' }"> |
|
|
|
<td>{{ row.num }}</td> |
|
|
|
<td>{{ row.light }}</td> |
|
|
|
<td>{{ row.tempruter }}</td> |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="bottom"> |
|
|
|
<button class="flushed" @click="refresh">刷新</button> |
|
|
|
<button class="execute" @click="showModal">执行</button> |
|
|
|
</div> |
|
|
|
<a-modal width="500px" height="792px" v-model:visible="executevisible" :closable="false" okText="执行" |
|
|
|
@ok="handleOk2" :mask="false" :bodyStyle="{ |
|
|
|
<a-modal width="500px" v-model:visible="executevisible" :closable="false" okText="执行" @ok="handleOk2" |
|
|
|
:mask="false" :bodyStyle="{ |
|
|
|
height: '100vh', |
|
|
|
maxHeight: '100vh', |
|
|
|
position: 'fixed', |
|
|
|
right: '496px', |
|
|
|
top: '0', |
|
|
|
opacity: 1, |
|
|
|
background: ' rgba(0,0,0)', |
|
|
|
boxShadow: '-2px 0px 10px rgba(217, 217, 217, 0.5)', |
|
|
|
height: '792px', |
|
|
|
maxHeight: '792px', |
|
|
|
boxSizing: 'borderBox', |
|
|
|
display: 'flex', |
|
|
|
flexDirection: 'column', |
|
|
|
}"> |
|
|
|
<div style="height: 792px"> |
|
|
|
<div style="width: 100%; text-align: center"> |
|
|
|
<span class="text-change">变更内容</span> |
|
|
|
<div> |
|
|
|
<div class="div-operation"></div> |
|
|
|
<span class="text-operation">变更内容 </span> |
|
|
|
</div> |
|
|
|
<div class="journal" style="margin-top: 20px" v-for="item in cxlist" key="item.id"> |
|
|
|
<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 src="/asset/image//bulbLogo/22549.png" alt="" /> |
|
|
|
<span style=" |
|
|
|
<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); |
|
|
|
@ -168,9 +229,7 @@ |
|
|
|
</div> |
|
|
|
<button class="cxbtn" @click="delbtn(item.id)">撤销</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="gird22"> |
|
|
|
<div> |
|
|
|
<div class="control-btn"> |
|
|
|
<button style=" |
|
|
|
width: 96px; |
|
|
|
height: 40px; |
|
|
|
@ -192,18 +251,19 @@ |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
margin-left: 2px; |
|
|
|
margin-right: 2px; |
|
|
|
">{{ item.manual }}</span> |
|
|
|
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: 2px; |
|
|
|
">{{ item.automatic }}</span> |
|
|
|
margin-left: 8px; |
|
|
|
margin-right: 40px; |
|
|
|
">自动</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="light-btn"> |
|
|
|
<button style=" |
|
|
|
width: 68px; |
|
|
|
height: 40px; |
|
|
|
@ -225,18 +285,18 @@ |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
margin-left: 2px; |
|
|
|
margin-right: 2px; |
|
|
|
">{{ item.brightness }}</span> |
|
|
|
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: 2px; |
|
|
|
">{{ item.brightness2 }}</span> |
|
|
|
margin-left: 8px; |
|
|
|
">30lux</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="controlarea-btn"> |
|
|
|
<button style=" |
|
|
|
width: 96px; |
|
|
|
height: 40px; |
|
|
|
@ -258,18 +318,19 @@ |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
margin-left: 2px; |
|
|
|
margin-right: 2px; |
|
|
|
">{{ item.manual2 }}</span> |
|
|
|
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: 2px; |
|
|
|
">{{ item.automatic2 }}</span> |
|
|
|
margin-left: 8px; |
|
|
|
margin-right: 40px; |
|
|
|
">自动</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="temp-btn"> |
|
|
|
<button style=" |
|
|
|
width: 68px; |
|
|
|
height: 40px; |
|
|
|
@ -290,23 +351,20 @@ |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
margin-left: 2px; |
|
|
|
margin-right: 2px; |
|
|
|
">{{ item.brightness3 }}</span> |
|
|
|
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: 2px; |
|
|
|
">{{ item.brightness4 }}</span> |
|
|
|
margin-left: 8px; |
|
|
|
">3800k</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- <div class="excubtn"> |
|
|
|
<button class="flushed" @click="refresh">刷新</button> |
|
|
|
<button class="execute" @click="showModal">执行</button> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</a-modal> |
|
|
|
</a-tab-pane> |
|
|
|
@ -314,9 +372,9 @@ |
|
|
|
<div class="divadd"> |
|
|
|
<button class="add" @click="addModal">添加</button> |
|
|
|
</div> |
|
|
|
<table class="custom-table table1" > |
|
|
|
<thead > |
|
|
|
<tr> |
|
|
|
<table class="custom-table table1"> |
|
|
|
<thead> |
|
|
|
<tr :style="{ background: 'rgba(35,45,69)' }"> |
|
|
|
<th>序号</th> |
|
|
|
<th>执行时间</th> |
|
|
|
<th>计划名称</th> |
|
|
|
@ -325,7 +383,7 @@ |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tr v-for="(row, index) in dataSource" :key="index" @click="handleRowClick(row.key, row.data)"> |
|
|
|
<tr v-for="(row, index) in dataSource" :key="index"> |
|
|
|
<td>{{ row.key }}</td> |
|
|
|
<td>{{ row.data }}</td> |
|
|
|
<td>{{ row.planname }}</td> |
|
|
|
@ -351,7 +409,7 @@ |
|
|
|
</button> |
|
|
|
</td> |
|
|
|
<td> |
|
|
|
<span class="tabreboot">重启</span> |
|
|
|
<span class="tabreboot" @click="handlerefClick1">重启</span> |
|
|
|
<span class="tabdelete">删除</span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
@ -361,11 +419,14 @@ |
|
|
|
:mask="false" :bodyStyle="{ |
|
|
|
opacity: 1, |
|
|
|
background: ' rgba(0,0,0)', |
|
|
|
height: '792px', |
|
|
|
maxHeight: '792px', |
|
|
|
boxSizing: 'borderBox', |
|
|
|
display: 'flex', |
|
|
|
flexDirection: 'column', |
|
|
|
height: '100vh', |
|
|
|
maxHeight: '100vh', |
|
|
|
position: 'fixed', |
|
|
|
right: '496px', |
|
|
|
top: '0', |
|
|
|
}"> |
|
|
|
<div> |
|
|
|
<div class="div-operation"></div> |
|
|
|
@ -373,8 +434,7 @@ |
|
|
|
</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" |
|
|
|
:filter-option="filterOption" :render="(item) => item.title" @change="handleChange" |
|
|
|
:style="{ color: 'rgba(255,255,255,1)' }" @search="handleSearch" /> |
|
|
|
</div> |
|
|
|
<!-- <button class="addok" @click="addhandleOk">确定</button> --> |
|
|
|
@ -383,7 +443,7 @@ |
|
|
|
<a-tab-pane key="3" tab="日志"> |
|
|
|
<table class="custom-table table1"> |
|
|
|
<thead> |
|
|
|
<tr> |
|
|
|
<tr :style="{ background: 'rgba(35,45,69)' }"> |
|
|
|
<th>序号</th> |
|
|
|
<th>执行时间</th> |
|
|
|
<th>操作内容</th> |
|
|
|
@ -391,7 +451,8 @@ |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.id, row.name, row.age)"> |
|
|
|
<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> |
|
|
|
@ -399,18 +460,21 @@ |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
<a-modal width="500px" height="792px" v-model:visible="logModalVisible" :closable="false" |
|
|
|
@cancel="closeLogModal" :footer="null" |
|
|
|
:mask="false" :bodyStyle="{ |
|
|
|
<a-modal width="500px" v-model:visible="logModalVisible" :closable="false" @cancel="closeLogModal" |
|
|
|
:footer="null" :mask="false" :bodyStyle="{ |
|
|
|
marginLeft: 200, |
|
|
|
background: 'rgba(0, 0, 0, 1)', |
|
|
|
opacity: 0.8, |
|
|
|
height: '792px', |
|
|
|
maxHeight: '792px', |
|
|
|
boxSizing: 'borderBox', |
|
|
|
display: 'flex', |
|
|
|
flexDirection: 'column', |
|
|
|
height: '100vh', |
|
|
|
maxHeight: '100vh', |
|
|
|
position: 'fixed', |
|
|
|
right: '496px', |
|
|
|
top: '0', |
|
|
|
}"> |
|
|
|
<div style="height: 792px"> |
|
|
|
<div style="height: calc(100vh - 96px)"> |
|
|
|
<div> |
|
|
|
<div class="div-operation"></div> |
|
|
|
<span class="text-operation">操作日志</span> |
|
|
|
@ -418,18 +482,17 @@ |
|
|
|
<div class="journal" style="margin-top: 20px" v-for="item in cxlist" key="item.id"> |
|
|
|
<div class="imgText"> |
|
|
|
<div class="zjzm"> |
|
|
|
<img src="/asset/image//bulbLogo/22549.png" alt="" /> |
|
|
|
<img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" /> |
|
|
|
<span 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> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="gird22"> |
|
|
|
<div> |
|
|
|
<div class="control-btn"> |
|
|
|
<button style=" |
|
|
|
width: 96px; |
|
|
|
height: 40px; |
|
|
|
@ -451,18 +514,19 @@ |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
margin-left: 2px; |
|
|
|
margin-right: 2px; |
|
|
|
margin-left: 12px; |
|
|
|
margin-right: 8px; |
|
|
|
">{{ item.manual }}</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: 2px; |
|
|
|
margin-left: 8px; |
|
|
|
margin-right: 40px; |
|
|
|
">{{ item.automatic }}</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="light-btn"> |
|
|
|
<button style=" |
|
|
|
width: 68px; |
|
|
|
height: 40px; |
|
|
|
@ -484,18 +548,19 @@ |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
margin-left: 2px; |
|
|
|
margin-right: 2px; |
|
|
|
margin-left: 12px; |
|
|
|
margin-right: 8px; |
|
|
|
">{{ item.brightness }}</span> |
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
|
<span style=" |
|
|
|
color: rgba(243, 97, 99, 1); |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
margin-left: 2px; |
|
|
|
margin-left: 8px; |
|
|
|
|
|
|
|
">{{ item.brightness2 }}</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="controlarea-btn"> |
|
|
|
<button style=" |
|
|
|
width: 96px; |
|
|
|
height: 40px; |
|
|
|
@ -517,18 +582,19 @@ |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
margin-left: 2px; |
|
|
|
margin-right: 2px; |
|
|
|
margin-left: 12px; |
|
|
|
margin-right: 8px; |
|
|
|
">{{ item.manual2 }}</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: 2px; |
|
|
|
margin-left: 8px; |
|
|
|
margin-right: 40px; |
|
|
|
">{{ item.automatic2 }}</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="temp-btn"> |
|
|
|
<button style=" |
|
|
|
width: 68px; |
|
|
|
height: 40px; |
|
|
|
@ -549,15 +615,16 @@ |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
margin-left: 2px; |
|
|
|
margin-right: 2px; |
|
|
|
margin-left: 12px; |
|
|
|
margin-right: 8px; |
|
|
|
">{{ item.brightness3 }}</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: 2px; |
|
|
|
margin-left: 8px; |
|
|
|
|
|
|
|
">{{ item.brightness4 }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -573,25 +640,36 @@ |
|
|
|
</a-drawer> |
|
|
|
<div class="drawer-title1" v-if="!visible"> |
|
|
|
<a-button @click="toggleDrawer" class="arrowbtn"> |
|
|
|
<left-outlined style="color: rgba(255, 255, 255, 1)" /> |
|
|
|
<!-- <left-outlined style="color: rgba(255, 255, 255, 1)" /> --> |
|
|
|
<double-left-outlined style="color: rgba(255, 255, 255, 1)" /> |
|
|
|
</a-button> |
|
|
|
</div> |
|
|
|
<div class="drawer-title2" v-if="visible"> |
|
|
|
<a-button @click="toggleDrawer" class="arrowbtn"> |
|
|
|
<right-outlined style="color: rgba(255, 255, 255, 1)" /> |
|
|
|
<!-- <right-outlined/> --> |
|
|
|
<double-right-outlined style="color: rgba(255, 255, 255, 1)" /> |
|
|
|
</a-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref, computed, onMounted } from "vue"; |
|
|
|
import { RightOutlined, DownOutlined, UpOutlined } from "@ant-design/icons-vue"; |
|
|
|
import { |
|
|
|
DownOutlined, |
|
|
|
UpOutlined, |
|
|
|
InfoCircleOutlined, |
|
|
|
DoubleLeftOutlined, |
|
|
|
DoubleRightOutlined, |
|
|
|
StopOutlined |
|
|
|
} from "@ant-design/icons-vue"; |
|
|
|
|
|
|
|
const lightSource = ref([{ num: "8/10", light: "100", tempruter: "4200" }]); |
|
|
|
const toggleDrawer = () => { |
|
|
|
visible.value = !visible.value; |
|
|
|
}; |
|
|
|
const handleOk2 = (e: MouseEvent) => { |
|
|
|
console.log(e); |
|
|
|
console.log('ok2'); |
|
|
|
console.log("ok2"); |
|
|
|
executevisible.value = false; |
|
|
|
}; |
|
|
|
const cxlist = ref([ |
|
|
|
@ -636,83 +714,83 @@ const cxlist = ref([ |
|
|
|
const bulbs = ref([ |
|
|
|
{ |
|
|
|
className: "bulbLogo1", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22419@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22419.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo2", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22419@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22419.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo3", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22419@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22419.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo4", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22419@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22419.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo5", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22394@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22394.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo6", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22394@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22394.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo7", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22394@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22394.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo8", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22394@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22394.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo9", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22396@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22396.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo10", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22396@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22396.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo11", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22396@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22396.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo12", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22396@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22396.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo13", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22400@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22400.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo14", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22400@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22400.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo15", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22400@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22400.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
className: "bulbLogo16", |
|
|
|
imageUrl: "/asset/image/bulbLogo/22400@2x.png", |
|
|
|
visible: false, |
|
|
|
imageUrl: "/asset/image/bulbLogo/22400.png", |
|
|
|
visible: true, |
|
|
|
}, |
|
|
|
]); |
|
|
|
|
|
|
|
@ -755,28 +833,45 @@ let singleSelection = ref(true); // 默认为单选 |
|
|
|
const selectAllCheckbox = ref(false); |
|
|
|
const showControlMode = ref(false); |
|
|
|
const showAllButtons = ref(false); |
|
|
|
const zmhldis = ref(false); |
|
|
|
// 默认展示八个 |
|
|
|
const limitedButtons = computed(() => buttons2.value.slice(0, 8)); |
|
|
|
const buttons2 = ref([ |
|
|
|
{ label: "1区", selected: false }, |
|
|
|
{ label: "2区", selected: false }, |
|
|
|
{ label: "3区", selected: false }, |
|
|
|
{ label: "4区", selected: false }, |
|
|
|
{ label: "5区", selected: false }, |
|
|
|
{ label: "6区", selected: false }, |
|
|
|
{ label: "7区", selected: false }, |
|
|
|
{ label: "1区", selected: false }, |
|
|
|
{ label: "2区", selected: false }, |
|
|
|
{ label: "3区", selected: false }, |
|
|
|
{ id: 1, label: "1区", selected: false, zmhld: true }, |
|
|
|
{ id: 2, label: "2区", selected: false, zmhld: false }, |
|
|
|
{ id: 3, label: "3区", selected: false, zmhld: false }, |
|
|
|
{ id: 4, label: "4区", selected: false, zmhld: false }, |
|
|
|
{ id: 5, label: "5区", selected: false, zmhld: false }, |
|
|
|
{ id: 6, label: "6区", selected: false, zmhld: false }, |
|
|
|
{ id: 7, label: "7区", selected: false, zmhld: false }, |
|
|
|
{ id: 8, label: "1区", selected: false, zmhld: false }, |
|
|
|
{ id: 9, label: "2区", selected: false, zmhld: false }, |
|
|
|
{ id: 10, label: "3区", selected: false, zmhld: false }, |
|
|
|
]); |
|
|
|
const zmhlid = ref(); |
|
|
|
const isPlanEnabled2 = ref(true); |
|
|
|
const togglePlan2 = () => { |
|
|
|
isPlanEnabled2.value = !isPlanEnabled2.value; |
|
|
|
if (selectAllCheckbox.value) { |
|
|
|
buttons2.value.forEach((button) => { |
|
|
|
button.zmhld = true; |
|
|
|
button.selected = false; |
|
|
|
}); |
|
|
|
} else { |
|
|
|
const item = buttons2.value.find((button) => button.id === zmhlid.value); |
|
|
|
if (item) { |
|
|
|
item.zmhld = !item.zmhld; |
|
|
|
item.selected = false; |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
//多选按钮 隐藏显示 |
|
|
|
// const allbtnB = ref(false); |
|
|
|
|
|
|
|
const selectAll = () => { |
|
|
|
if (isAllchoose.value === false) { |
|
|
|
isPlanEnabled2.value = limitedButtons.value[0].zmhld; |
|
|
|
} |
|
|
|
singleSelection.value = !singleSelection.value; |
|
|
|
isAllchoose.value = !isAllchoose.value; |
|
|
|
if (singleSelection.value) { |
|
|
|
@ -788,7 +883,7 @@ const selectAll = () => { |
|
|
|
} else { |
|
|
|
// 多选 |
|
|
|
buttons2.value.forEach((button) => { |
|
|
|
button.selected = false; |
|
|
|
button.selected = true; |
|
|
|
// allbtnB.value = true; |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -797,7 +892,9 @@ const selectAll = () => { |
|
|
|
}; |
|
|
|
const allbtn1 = () => { |
|
|
|
buttons2.value.forEach((button) => { |
|
|
|
if (!button.zmhld) { |
|
|
|
button.selected = true; |
|
|
|
} |
|
|
|
}); |
|
|
|
selectAllCheckbox.value = true; |
|
|
|
}; |
|
|
|
@ -818,6 +915,13 @@ const toggleAllSelection = () => { |
|
|
|
}; |
|
|
|
|
|
|
|
const toggleSelection = (button) => { |
|
|
|
console.log(button); |
|
|
|
zmhlid.value = button.id; |
|
|
|
console.log(zmhlid.value); |
|
|
|
isPlanEnabled2.value = button.zmhld; |
|
|
|
if (button.zmhld) { |
|
|
|
return; |
|
|
|
} else { |
|
|
|
if (singleSelection.value) { |
|
|
|
// 单选模式 |
|
|
|
buttons2.value.forEach((b) => { |
|
|
|
@ -835,9 +939,10 @@ const toggleSelection = (button) => { |
|
|
|
selectAllCheckbox.value = false; |
|
|
|
} |
|
|
|
showControlMode.value = button; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 控制模式按钮 |
|
|
|
// 控制模式按钮 vv |
|
|
|
const selectedButton3 = ref(""); |
|
|
|
const showControlScene = ref(false); |
|
|
|
const controlbutton = ref([ |
|
|
|
@ -913,11 +1018,26 @@ const refresh = () => { |
|
|
|
selectedButton3.value = null; |
|
|
|
selectedButton4.value = null; |
|
|
|
}; |
|
|
|
|
|
|
|
// 操作日志 |
|
|
|
const logModalVisible = ref(false); |
|
|
|
const handleRowClick = (record: any, index: number) => { |
|
|
|
const handlerefClick1 = () => { |
|
|
|
console.log(1111); |
|
|
|
executevisible.value = true; |
|
|
|
}; |
|
|
|
|
|
|
|
const closeModal = () => { |
|
|
|
executevisible.value = false; |
|
|
|
}; |
|
|
|
|
|
|
|
let trindex = ref("-1"); |
|
|
|
const handleRowClick = (index: any) => { |
|
|
|
trindex.value = index; |
|
|
|
// 处理行点击事件，例如选中行或者其他操作 |
|
|
|
console.log(record, "=================", index); |
|
|
|
// console.log("=================", index); |
|
|
|
if (index === trindex.value) { |
|
|
|
console.log("tri"); |
|
|
|
} |
|
|
|
// 显示模态框 |
|
|
|
logModalVisible.value = true; |
|
|
|
}; |
|
|
|
@ -957,7 +1077,7 @@ const mockData = ref([ |
|
|
|
]); |
|
|
|
const targetKeys = ref<string[]>([]); |
|
|
|
const filterOption = (inputValue: string, option: MockData) => { |
|
|
|
console.log( option.description); |
|
|
|
console.log(option.description); |
|
|
|
|
|
|
|
return option.description.indexOf(inputValue) > -1; |
|
|
|
}; |
|
|
|
@ -980,6 +1100,61 @@ const delbtn = (id: any) => { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
.tagtext { |
|
|
|
margin-left: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.light-tag { |
|
|
|
position: fixed; |
|
|
|
bottom: 135px; |
|
|
|
left: 450px; |
|
|
|
width: 396px; |
|
|
|
height: 200px; |
|
|
|
opacity: 0.8; |
|
|
|
border-radius: 8px; |
|
|
|
background: rgba(0, 0, 0, 1); |
|
|
|
box-shadow: 0px 20px 30px rgba(0, 85, 133, 0.5); |
|
|
|
} |
|
|
|
|
|
|
|
.light-tag-tit { |
|
|
|
display: flex; |
|
|
|
margin-top: 18px; |
|
|
|
margin-left: 18px; |
|
|
|
} |
|
|
|
|
|
|
|
.light-tag-box { |
|
|
|
padding: 15px 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.light-tag-box>img { |
|
|
|
width: 120px; |
|
|
|
height: 51px; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.light-tag-box>span { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.titleimg, |
|
|
|
.titletext { |
|
|
|
display: inline-block; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.control-btn, |
|
|
|
.light-btn { |
|
|
|
display: inline-block; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.controlarea-btn, |
|
|
|
.temp-btn { |
|
|
|
display: inline-block; |
|
|
|
margin-top: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
:global(.ant-drawer-content) { |
|
|
|
background-color: rgba(0, 0, 0, 1); |
|
|
|
opacity: 0.8; |
|
|
|
@ -989,11 +1164,13 @@ const delbtn = (id: any) => { |
|
|
|
background-color: rgba(0, 0, 0, 1); |
|
|
|
opacity: 0.8; |
|
|
|
} |
|
|
|
:deep(.ant-transfer-list){ |
|
|
|
|
|
|
|
:deep(.ant-transfer-list) { |
|
|
|
width: 230px; |
|
|
|
height: 450px; |
|
|
|
} |
|
|
|
:deep(.ant-transfer-list-header){ |
|
|
|
|
|
|
|
:deep(.ant-transfer-list-header) { |
|
|
|
background-color: rgba(0, 0, 0, 1); |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
} |
|
|
|
@ -1056,7 +1233,7 @@ const delbtn = (id: any) => { |
|
|
|
.custom-table { |
|
|
|
border-collapse: collapse; |
|
|
|
width: 416px; |
|
|
|
height: 195px; |
|
|
|
height: 60px; |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
} |
|
|
|
|
|
|
|
@ -1186,7 +1363,7 @@ const delbtn = (id: any) => { |
|
|
|
.btn2 { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-left: 83px; |
|
|
|
margin-left: 80px; |
|
|
|
} |
|
|
|
|
|
|
|
.openzm { |
|
|
|
@ -1208,14 +1385,19 @@ const delbtn = (id: any) => { |
|
|
|
rgba(255, 187, 0, 1) 0%, |
|
|
|
rgba(255, 112, 3, 1) 91.21%, |
|
|
|
rgba(255, 129, 3, 1) 100%); |
|
|
|
margin-left: 5px; |
|
|
|
margin-right: 15px; |
|
|
|
margin-left: 8px; |
|
|
|
font-size: 12px; |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
border: none; |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn2 { |
|
|
|
button { |
|
|
|
margin: 0 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.allbtn { |
|
|
|
border: 0; |
|
|
|
width: 40px; |
|
|
|
@ -1252,6 +1434,11 @@ p { |
|
|
|
.controlmodebtnarea, |
|
|
|
.controlscenebtnarea { |
|
|
|
margin-left: -17px; |
|
|
|
|
|
|
|
button { |
|
|
|
width: 21%; |
|
|
|
padding: 0 2%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
@ -1342,13 +1529,13 @@ p { |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
|
|
|
|
.lightparameterstextarea { |
|
|
|
border: 1px solid rgba(236, 239, 245, 1); |
|
|
|
margin-top: 10px; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 1fr 1fr 1fr; |
|
|
|
grid-template-rows: 1fr 1fr; |
|
|
|
} |
|
|
|
// .lightparameterstextarea { |
|
|
|
// border: 1px solid rgba(236, 239, 245, 1); |
|
|
|
// margin-top: 10px; |
|
|
|
// display: grid; |
|
|
|
// grid-template-columns: 1fr 1fr 1fr; |
|
|
|
// grid-template-rows: 1fr 1fr; |
|
|
|
// } |
|
|
|
|
|
|
|
.lightparameterstextarea>p { |
|
|
|
height: 100%; |
|
|
|
@ -1514,20 +1701,17 @@ p { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.lighting-img-box { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
max-height: calc(100% - 79px); |
|
|
|
} |
|
|
|
|
|
|
|
.lighting-img-box img { |
|
|
|
.lighting-img-box>img { |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 79px); |
|
|
|
height: calc(100vh - 96px); |
|
|
|
object-fit: cover; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.F1 { |
|
|
|
width: 120px; |
|
|
|
height: 50.72px; |
|
|
|
@ -1756,25 +1940,31 @@ p { |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
|
|
|
|
.journal{ |
|
|
|
padding: 3% 10%; |
|
|
|
.jbox { |
|
|
|
background-color: #000; |
|
|
|
opacity: 1; |
|
|
|
z-index: 99999; |
|
|
|
} |
|
|
|
|
|
|
|
.journal { |
|
|
|
padding: 3% 5%; |
|
|
|
// background-image: url("/asset/image/bulbLogo/bgsquare.png"); |
|
|
|
background-size: 450px 177px; |
|
|
|
width: 450px; |
|
|
|
width: 482px; |
|
|
|
height: 177px; |
|
|
|
background-color: rgba(0, 0, 0); |
|
|
|
border-radius: 12px; |
|
|
|
box-shadow: -2px 0px 10px rgba(217, 217, 217, 0.5); |
|
|
|
box-shadow: -2px 0px 10px rgb(133, 167, 186) |
|
|
|
} |
|
|
|
|
|
|
|
.gird22 { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
|
grid-template-rows: repeat(2, 1fr); |
|
|
|
grid-column-gap: 5px; |
|
|
|
grid-row-gap: 20px; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
// .gird22 { |
|
|
|
// display: grid; |
|
|
|
// grid-template-columns: repeat(2, 1fr); |
|
|
|
// grid-template-rows: repeat(2, 1fr); |
|
|
|
// grid-column-gap: 15px; |
|
|
|
// grid-row-gap: 10px; |
|
|
|
// margin-top: 10px; |
|
|
|
// } |
|
|
|
|
|
|
|
// .bulbLogo1 { |
|
|
|
// background-image: url("/asset/t/image/bulbLogo/bulbLogo1.png"); |
|
|
|
@ -1852,4 +2042,38 @@ p { |
|
|
|
margin-top: 440px; |
|
|
|
margin-left: 350px; |
|
|
|
} |
|
|
|
|
|
|
|
.zmhlbtn { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.anticon-stop { |
|
|
|
position: absolute; |
|
|
|
right: 3px; |
|
|
|
bottom: 3px; |
|
|
|
} |
|
|
|
|
|
|
|
.istrindex { |
|
|
|
background: rgba(67, 136, 251, 1); |
|
|
|
// font-size: 36px; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.ant-modal-mask.ant-modal-content) { |
|
|
|
height: 100vh; |
|
|
|
position: fixed; |
|
|
|
right: 496px; |
|
|
|
top: 0%; |
|
|
|
} |
|
|
|
|
|
|
|
// :global(.ant-tabs-tab-active) { |
|
|
|
// color: blue !important; |
|
|
|
// } |
|
|
|
// .ant-tabs-tab:hover { |
|
|
|
// color: blue !important; |
|
|
|
// } |
|
|
|
:global(.ant-modal-content) { |
|
|
|
position: fixed; |
|
|
|
bottom: 20px; |
|
|
|
right: 500px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
xuziqiang
3 months ago
