|
|
|
|
<template>
|
|
|
|
|
<div class="lighting-img">
|
|
|
|
|
<div class="lighting-img-box">
|
|
|
|
|
<img src="../image/bg.jpg" />
|
|
|
|
|
<div class="bulbBox">
|
|
|
|
|
<div class="wh100 bulbLogo1">
|
|
|
|
|
<img class="bulbImg" src="/asset/image/bulbLogo/22419@2x.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wh100 bulbLogo2">
|
|
|
|
|
<img class="bulbImg" src="/asset/image/bulbLogo/22419.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wh100 bulbLogo3">
|
|
|
|
|
<img class="bulbImg" src="/asset/image/bulbLogo/22394@2x.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wh100 bulbLogo4">
|
|
|
|
|
<img class="bulbImg" src="/asset/image/bulbLogo/22396.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wh100 bulbLogo5">
|
|
|
|
|
<img class="bulbImg" src="/asset/image/bulbLogo/22396@2x.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wh100 bulbLogo6">
|
|
|
|
|
<img class="bulbImg" src="/asset/image/bulbLogo/22400.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wh100 bulbLogo7">
|
|
|
|
|
<img class="bulbImg" src="/asset/image/bulbLogo/22400@2x.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btn-box">
|
|
|
|
|
<button class="F1">1F</button><br />
|
|
|
|
|
<button class="F2">2F</button><br />
|
|
|
|
|
<button class="platform">站台</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<a-drawer
|
|
|
|
|
v-model:visible="visible"
|
|
|
|
|
class="custom-class"
|
|
|
|
|
width="496"
|
|
|
|
|
height="1080"
|
|
|
|
|
placement="right"
|
|
|
|
|
:drawerStyle="{ background: 'rgba(0, 0, 0, 1)', opacity: 0.8 }"
|
|
|
|
|
:closable="false"
|
|
|
|
|
id="Odrawer">
|
|
|
|
|
<div>
|
|
|
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
|
|
|
<a-tab-pane key="1" tab="控制面板">
|
|
|
|
|
<!-- 照明区域 -->
|
|
|
|
|
<div class="lightarea">
|
|
|
|
|
<div class="lightareatab"></div>
|
|
|
|
|
<span class="lightareatext"> 照明区域 </span>
|
|
|
|
|
<button class="plan">计划启用</button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 照明区域按钮部分 -->
|
|
|
|
|
<div class="area">
|
|
|
|
|
<button
|
|
|
|
|
v-for="(button, index) in buttons"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="{ btn: true, selected: button === selectedButton }"
|
|
|
|
|
@click="selectButton(button)">
|
|
|
|
|
{{ button.label }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 照明回路部分 -->
|
|
|
|
|
<div class="circuitarea" v-if="selectedButton">
|
|
|
|
|
<div class="circuittab"></div>
|
|
|
|
|
<span class="circuittext">照明回路</span>
|
|
|
|
|
<div class="btn2">
|
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
class="custom-checkbox"
|
|
|
|
|
v-model="selectAllCheckbox"
|
|
|
|
|
@change="toggleAllSelection" />
|
|
|
|
|
<span class="both" @click="selectAll">全选</span>
|
|
|
|
|
<button class="openplan">启用面板</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 照明回路按钮部分 -->
|
|
|
|
|
<div class="btnarea" v-if="selectedButton">
|
|
|
|
|
<button
|
|
|
|
|
v-for="(button2, index) in buttons2"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="{ btn: true, selected: button2.selected }"
|
|
|
|
|
@click="toggleSelection(button2)">
|
|
|
|
|
{{ button2.label }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 控制模式 -->
|
|
|
|
|
<div class="controlarea" v-show="showControlMode">
|
|
|
|
|
<div class="controltab"></div>
|
|
|
|
|
<span class="controltext"> 控制模式 </span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 控制模式按钮部分 -->
|
|
|
|
|
<div class="controlmodebtnarea" v-show="showControlMode">
|
|
|
|
|
<button
|
|
|
|
|
v-for="(button3, index) in controlbutton"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="{ btn: true, selected: button3.label === selectedButton3 }"
|
|
|
|
|
@click="selectButton3(button3)">
|
|
|
|
|
{{ button3.label }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 控制场景 -->
|
|
|
|
|
<div class="controlscenearea" v-show="showControlScene">
|
|
|
|
|
<div class="controlscenetab"></div>
|
|
|
|
|
<span class="controlscenetext"> 控制场景 </span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 控制场景按钮部分 -->
|
|
|
|
|
<div class="controlscenebtnarea" v-show="showControlScene">
|
|
|
|
|
<button
|
|
|
|
|
v-for="(button4, index) in controlscenebuttons"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="{ btn: true, selected: button4.label === selectedButton4 }"
|
|
|
|
|
@click="selectButton4(button4)">
|
|
|
|
|
{{ button4.label }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 灯具参数 -->
|
|
|
|
|
<div class="lightparametersarea">
|
|
|
|
|
<div class="lightparameterstab"></div>
|
|
|
|
|
<span class="lightparameterstext"> 灯具参数 </span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lightparameterstextarea">
|
|
|
|
|
<p>开启数量</p>
|
|
|
|
|
<p>亮度(lux)</p>
|
|
|
|
|
<p>色温(k)</p>
|
|
|
|
|
<p>8/10</p>
|
|
|
|
|
<p>100</p>
|
|
|
|
|
<p>4200</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<button class="flushed">刷新</button>
|
|
|
|
|
<button class="execute">执行</button>
|
|
|
|
|
</div>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
<a-tab-pane key="2" tab="计划列表" force-render>
|
|
|
|
|
<a-table bordered :data-source="dataSource" :columns="columns" class="atable">
|
|
|
|
|
<template #bodyCell="{ column, text }">
|
|
|
|
|
<template v-if="column.dataIndex === 'name'">
|
|
|
|
|
<div class="editable-cell">
|
|
|
|
|
<span @click="showInfo(text)">
|
|
|
|
|
{{ text || ' ' }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-else-if="column.dataIndex === 'operation'">
|
|
|
|
|
<a class="tabreboot">重启</a>
|
|
|
|
|
<a class="tabdelete">删除</a>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</a-table>
|
|
|
|
|
<div class="divadd">
|
|
|
|
|
<button class="add">添加</button>
|
|
|
|
|
</div>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
<a-tab-pane key="3" tab="日志">
|
|
|
|
|
<table class="custom-table table1">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>序号</th>
|
|
|
|
|
<th>执行时间</th>
|
|
|
|
|
<th>操作内容</th>
|
|
|
|
|
<th>操作人</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr
|
|
|
|
|
v-for="(row, index) in dataSource1"
|
|
|
|
|
:key="index"
|
|
|
|
|
@click="handleRowClick(row.id, row.name, row.age)">
|
|
|
|
|
<td>{{ row.key }}</td>
|
|
|
|
|
<td>{{ row.data }}</td>
|
|
|
|
|
<td>{{ row.planname }}</td>
|
|
|
|
|
<td>{{ row.status }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<a-modal
|
|
|
|
|
width="562px"
|
|
|
|
|
height="792px"
|
|
|
|
|
v-model:visible="logModalVisible"
|
|
|
|
|
:style="{ backgroundColor: '#000' }"
|
|
|
|
|
@cancel="closeLogModal"
|
|
|
|
|
:footer="null"
|
|
|
|
|
:mask="false"
|
|
|
|
|
:bodyStyle="{
|
|
|
|
|
background: 'rgba(0, 0, 0, 0.9)',
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
height: '792px',
|
|
|
|
|
maxHeight: '792px',
|
|
|
|
|
boxSizing: 'borderBox',
|
|
|
|
|
}">
|
|
|
|
|
<div style="height: 792px">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="div-operation"></div>
|
|
|
|
|
<span class="text-operation">操作日志</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="journal" style="margin-top: 20px">
|
|
|
|
|
<div class="imgText">
|
|
|
|
|
<img src="/asset/image/bulbLogo/22549.png" alt="" />
|
|
|
|
|
<span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
|
|
|
|
>站厅照明 1区</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="gird22">
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>手动</span
|
|
|
|
|
>
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>自动</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 68px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>100lux</span
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>30lux</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>手动</span
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>自动</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 68px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>4000k</span
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>3800k</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="journal" style="margin-top: 20px">
|
|
|
|
|
<div class="imgText">
|
|
|
|
|
<img src="/asset/image/bulbLogo/22549.png" alt="" />
|
|
|
|
|
<span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
|
|
|
|
>站厅照明 1区</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="gird22">
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>手动</span
|
|
|
|
|
>
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>自动</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 68px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>100lux</span
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>30lux</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>手动</span
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>自动</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 68px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>4000k</span
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>3800k</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="journal" style="margin-top: 20px">
|
|
|
|
|
<div class="imgText">
|
|
|
|
|
<img src="/asset/image/bulbLogo/22549.png" alt="" />
|
|
|
|
|
<span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
|
|
|
|
>站厅照明 1区</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="gird22">
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>手动</span
|
|
|
|
|
>
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>自动</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 68px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>100lux</span
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>30lux</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>手动</span
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>自动</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
style="
|
|
|
|
|
width: 68px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(86, 221, 253, 1) 0%,
|
|
|
|
|
rgba(25, 176, 255, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: none;
|
|
|
|
|
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"
|
|
|
|
|
>4000k</span
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>3800k</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-modal>
|
|
|
|
|
<div class="divadd">
|
|
|
|
|
<button class="add">刷新</button>
|
|
|
|
|
</div>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="arrow-indicator" v-show="visible">
|
|
|
|
|
<a-icon type="menu-fold" />
|
|
|
|
|
</div>
|
|
|
|
|
</a-drawer>
|
|
|
|
|
<div class="drawer-title1" v-if="!visible">
|
|
|
|
|
<a-button @click="toggleDrawer">
|
|
|
|
|
<left-outlined />
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="drawer-title2" v-if="visible">
|
|
|
|
|
<a-button @click="toggleDrawer">
|
|
|
|
|
<right-outlined />
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref } from 'vue';
|
|
|
|
|
const toggleDrawer = () => {
|
|
|
|
|
visible.value = !visible.value;
|
|
|
|
|
};
|
|
|
|
|
// 照明区域按钮单选
|
|
|
|
|
const buttons = ref([
|
|
|
|
|
{ label: 'A区', selected: false },
|
|
|
|
|
{ label: 'B区', selected: false },
|
|
|
|
|
{ label: 'C区', selected: false },
|
|
|
|
|
{ label: 'D区', selected: false },
|
|
|
|
|
{ label: '计划启用', selected: false },
|
|
|
|
|
]);
|
|
|
|
|
const selectedButton = ref<Button | null>(null);
|
|
|
|
|
const selectButton = (button: Button) => {
|
|
|
|
|
selectedButton.value = button;
|
|
|
|
|
};
|
|
|
|
|
// 照明回路按钮
|
|
|
|
|
let singleSelection = true; // 默认为单选
|
|
|
|
|
const selectAllCheckbox = ref(false);
|
|
|
|
|
const showControlMode = ref(false);
|
|
|
|
|
const buttons2 = ref([
|
|
|
|
|
{ label: '1区', selected: false },
|
|
|
|
|
{ label: '2区', selected: false },
|
|
|
|
|
{ label: '3区', selected: false },
|
|
|
|
|
{ label: '4区', selected: false },
|
|
|
|
|
]);
|
|
|
|
|
const selectAll = () => {
|
|
|
|
|
singleSelection = !singleSelection;
|
|
|
|
|
if (singleSelection) {
|
|
|
|
|
// 单选
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = false;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 多选
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = true;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
selectAllCheckbox.value = !singleSelection; // 更新全选 input 输入框的状态
|
|
|
|
|
};
|
|
|
|
|
const toggleAllSelection = () => {
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = selectAllCheckbox.value;
|
|
|
|
|
});
|
|
|
|
|
singleSelection = !selectAllCheckbox.value; // 如果全选，切换为多选模式
|
|
|
|
|
};
|
|
|
|
|
const toggleSelection = (button) => {
|
|
|
|
|
showControlMode.value = button.label;
|
|
|
|
|
if (singleSelection) {
|
|
|
|
|
// 单选模式
|
|
|
|
|
buttons2.value.forEach((b) => {
|
|
|
|
|
if (b !== button) {
|
|
|
|
|
b.selected = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
button.selected = !button.selected;
|
|
|
|
|
selectAllCheckbox.value = buttons2.value.every((button) => button.selected);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 控制模式按钮
|
|
|
|
|
const selectedButton3 = ref('');
|
|
|
|
|
const showControlScene = ref(false);
|
|
|
|
|
const controlbutton = ref([
|
|
|
|
|
{ label: '托管', selected: false },
|
|
|
|
|
{ label: 'AI', selected: false },
|
|
|
|
|
{ label: '手动', selected: false },
|
|
|
|
|
]);
|
|
|
|
|
// 控制场景按钮
|
|
|
|
|
const selectedButton4 = ref('');
|
|
|
|
|
const controlscenebuttons = ref([
|
|
|
|
|
{ label: '检修', selected: false },
|
|
|
|
|
{ label: '午休', selected: false },
|
|
|
|
|
{ label: '疏散', selected: false },
|
|
|
|
|
{ label: '客流高峰', selected: false },
|
|
|
|
|
]);
|
|
|
|
|
const selectButton3 = (button3) => {
|
|
|
|
|
selectedButton3.value = button3.label;
|
|
|
|
|
showControlScene.value = button3.label === '手动';
|
|
|
|
|
selectedButton4.value = ''; // 清空选中的控制场景按钮
|
|
|
|
|
};
|
|
|
|
|
const selectButton4 = (button4) => {
|
|
|
|
|
selectedButton4.value = button4.label;
|
|
|
|
|
};
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
title: '序号',
|
|
|
|
|
dataIndex: 'key',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '执行时间',
|
|
|
|
|
dataIndex: 'data',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '计划名称',
|
|
|
|
|
dataIndex: 'planname',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '状态',
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '状态',
|
|
|
|
|
dataIndex: 'operation',
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
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 columns1 = [
|
|
|
|
|
{
|
|
|
|
|
title: '序号',
|
|
|
|
|
dataIndex: 'key',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '执行时间',
|
|
|
|
|
dataIndex: 'data',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '操作内容',
|
|
|
|
|
dataIndex: 'planname',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '操作人',
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
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 visible = ref(true);
|
|
|
|
|
const activeKey = ref('1');
|
|
|
|
|
|
|
|
|
|
const showDrawer = () => {
|
|
|
|
|
visible.value = true;
|
|
|
|
|
};
|
|
|
|
|
// 操作日志
|
|
|
|
|
|
|
|
|
|
const logModalVisible = ref(false);
|
|
|
|
|
|
|
|
|
|
const handleRowClick = (record: any, index: number) => {
|
|
|
|
|
// 处理行点击事件，例如选中行或者其他操作
|
|
|
|
|
console.log(record, '=================', index);
|
|
|
|
|
// 显示模态框
|
|
|
|
|
logModalVisible.value = true;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const closeLogModal = () => {
|
|
|
|
|
logModalVisible.value = false;
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.custom-table {
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
width: 416px;
|
|
|
|
|
height: 195px;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.custom-table tr:hover {
|
|
|
|
|
background-color: rgba(67, 136, 251, 1);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.table1 {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
cellspacing: 0;
|
|
|
|
|
cellpadding: 0;
|
|
|
|
|
border: 1px solid rgba(255, 255, 255);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
.lightarea,
|
|
|
|
|
.circuitarea,
|
|
|
|
|
.controlarea,
|
|
|
|
|
.controlscenearea,
|
|
|
|
|
.lightparametersarea {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lightareatab,
|
|
|
|
|
.circuittab,
|
|
|
|
|
.controltab,
|
|
|
|
|
.controlscenetab,
|
|
|
|
|
.lightparameterstab {
|
|
|
|
|
width: 5px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
background: rgba(26, 174, 251, 1);
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lightareatext,
|
|
|
|
|
.circuittext,
|
|
|
|
|
.controltext,
|
|
|
|
|
.controlscenetext,
|
|
|
|
|
.lightparameterstext {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
line-height: 19px;
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lightareatab,
|
|
|
|
|
.lightareatext {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.plan {
|
|
|
|
|
width: 88px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
|
|
|
|
|
border: none;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
margin-left: 235px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.openplan {
|
|
|
|
|
width: 88px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
|
|
|
|
|
border: none;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn2 {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-left: 177px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.custom-checkbox {
|
|
|
|
|
width: 13px;
|
|
|
|
|
height: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.both {
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.area,
|
|
|
|
|
.btnarea,
|
|
|
|
|
.controlmodebtnarea,
|
|
|
|
|
.controlscenebtnarea {
|
|
|
|
|
margin-left: -17px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
width: 92px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
margin-left: 17px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
border: 1px solid rgba(207, 212, 219, 1);
|
|
|
|
|
line-height: 20.27px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
text-align: center;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.selected {
|
|
|
|
|
background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
|
|
|
|
|
color: rgba(0, 61, 90, 1);
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn:hover {
|
|
|
|
|
background-color: rgba(207, 212, 219, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn:active {
|
|
|
|
|
background-color: rgba(102, 102, 102, 1);
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.circuitarea,
|
|
|
|
|
.controlscenearea,
|
|
|
|
|
.lightparametersarea {
|
|
|
|
|
left: 51px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.circuittab,
|
|
|
|
|
.circuittext {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.batch {
|
|
|
|
|
width: 60px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
border: 1px solid rgba(67, 136, 251, 1);
|
|
|
|
|
color: rgba(67, 136, 251, 1);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
margin-left: 11px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.controlarea {
|
|
|
|
|
left: 51px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.controltab,
|
|
|
|
|
.controltext {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.cell) {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(#pane-first) {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.controlscenetab,
|
|
|
|
|
.controlscenetext {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lightparameterstab,
|
|
|
|
|
.lightparameterstext {
|
|
|
|
|
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 > p {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
border: 1px solid rgba(236, 239, 245, 1);
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 64px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute {
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
width: 74px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: rgba(67, 136, 251, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
border: 0;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.flushed {
|
|
|
|
|
width: 74px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: rgba(102, 102, 102, 1);
|
|
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
|
|
border: 1px solid rgba(193, 197, 204, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabreboot,
|
|
|
|
|
.tabdelete {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
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: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drawer-content {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
/* 留出空间给小箭头 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrow-indicator {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 0;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
z-index: 1;
|
|
|
|
|
/* 控制箭头显示在最上层 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drawer-title1 {
|
|
|
|
|
position: fixed;
|
|
|
|
|
width: 33px;
|
|
|
|
|
height: 33px;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 30px;
|
|
|
|
|
background-color: red;
|
|
|
|
|
margin: auto;
|
|
|
|
|
z-index: 99999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drawer-title2 {
|
|
|
|
|
position: fixed;
|
|
|
|
|
width: 33px;
|
|
|
|
|
height: 33px;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 500px;
|
|
|
|
|
background-color: red;
|
|
|
|
|
margin: auto;
|
|
|
|
|
z-index: 99999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .ant-tabs-tab-btn {
|
|
|
|
|
color: white; /* 背景颜色改为白色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.ant-table {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.ant-table-bordered {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.ant-table-thead {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.ant-table-cell {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 934px;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
.F1 {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 50.72px;
|
|
|
|
|
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: 24px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
.F2,
|
|
|
|
|
.platform {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 50.72px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: rgba(7, 72, 116, 1);
|
|
|
|
|
box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: rgba(146, 187, 255, 1);
|
|
|
|
|
border: 1px solid rgba(39, 120, 255, 1);
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
.btn-box {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 100px;
|
|
|
|
|
left: 250px;
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .wh100 {
|
|
|
|
|
width: 38px;
|
|
|
|
|
height: calc(38px + 19px);
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 111px;
|
|
|
|
|
left: 111px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 222px;
|
|
|
|
|
left: 222px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo3 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 333px;
|
|
|
|
|
left: 333px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo4 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 444px;
|
|
|
|
|
left: 444px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo5 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 555px;
|
|
|
|
|
left: 555px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo6 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 666px;
|
|
|
|
|
left: 666px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo7 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 777px;
|
|
|
|
|
left: 777px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editable-cell {
|
|
|
|
|
position: relative;
|
|
|
|
|
.editable-cell-input-wrapper,
|
|
|
|
|
.editable-cell-text-wrapper {
|
|
|
|
|
padding-right: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editable-cell-text-wrapper {
|
|
|
|
|
padding: 5px 24px 5px 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editable-cell-icon,
|
|
|
|
|
.editable-cell-icon-check {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editable-cell-icon {
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editable-cell-icon-check {
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editable-cell-icon:hover,
|
|
|
|
|
.editable-cell-icon-check:hover {
|
|
|
|
|
color: #108ee9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editable-add-btn {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.editable-cell:hover .editable-cell-icon {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
.div-operation {
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 13px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
border-radius: 1px;
|
|
|
|
|
background: rgba(67, 136, 251, 1);
|
|
|
|
|
}
|
|
|
|
|
.text-operation {
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
}
|
|
|
|
|
.div-operation,
|
|
|
|
|
.text-operation {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
.journal {
|
|
|
|
|
padding: 3% 10%;
|
|
|
|
|
background-image: url('/asset/image/bulbLogo/bgsquare.png');
|
|
|
|
|
background-size: 482px 177px;
|
|
|
|
|
width: 482px;
|
|
|
|
|
height: 177px;
|
|
|
|
|
}
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo1 {
|
|
|
|
|
background-image: url('/asset/image/bulbLogo/bulbLogo1.png');
|
|
|
|
|
}
|
|
|
|
|
.imgText {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
:deep(.ant-modal-content) {
|
|
|
|
|
width: 555px;
|
|
|
|
|
height: 792px;
|
|
|
|
|
}
|
|
|
|
|
:deep(.ant-modal-body) {
|
|
|
|
|
width: 555px;
|
|
|
|
|
max-height: 792px !important;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
