|
|
|
|
<template>
|
|
|
|
|
<div class="lighting-img">
|
|
|
|
|
<div class="lighting-img-box">
|
|
|
|
|
<img src="../image/bg.jpg" />
|
|
|
|
|
<div class="bulbBox">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(bulb, index) in bulbs"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="['wh100', bulb.className]"
|
|
|
|
|
v-show="bulb.visible">
|
|
|
|
|
<img class="bulbImg" :src="bulb.imageUrl" 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>
|
|
|
|
|
<div class="lightarea">
|
|
|
|
|
<div class="lightareatab"></div>
|
|
|
|
|
<span class="lightareatext"> 照明区域 </span>
|
|
|
|
|
<button
|
|
|
|
|
class="plan"
|
|
|
|
|
:class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
|
|
|
|
|
@click="togglePlan">
|
|
|
|
|
{{ isPlanEnabled ? '计划启用' : '计划禁用' }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 照明区域按钮部分 -->
|
|
|
|
|
<div class="area">
|
|
|
|
|
<template v-if="!showAllButtonsarea">
|
|
|
|
|
<button
|
|
|
|
|
v-for="(button, index) in buttons1"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="{ btn: true, selected: button === selectedButton }"
|
|
|
|
|
:style="{
|
|
|
|
|
'pointer-events': isPlanEnabled ? 'auto' : 'none',
|
|
|
|
|
opacity: isPlanEnabled ? 1 : 0.5,
|
|
|
|
|
}"
|
|
|
|
|
@click="selectButton(button)">
|
|
|
|
|
{{ button.label }}
|
|
|
|
|
</button>
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
<span @click="showAllButtonsarea = true" class="openzm"
|
|
|
|
|
><down-outlined />展开</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<button
|
|
|
|
|
v-for="(button, index) in buttons"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="{ btn: true, selected: button === selectedButton }"
|
|
|
|
|
:style="{
|
|
|
|
|
'pointer-events': isPlanEnabled ? 'auto' : 'none',
|
|
|
|
|
opacity: isPlanEnabled ? 1 : 0.5,
|
|
|
|
|
}"
|
|
|
|
|
@click="selectButton(button)">
|
|
|
|
|
{{ button.label }}
|
|
|
|
|
</button>
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
<span @click="showAllButtonsarea = false" class="openzm"
|
|
|
|
|
><up-outlined />回缩</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 照明回路部分 -->
|
|
|
|
|
<div>
|
|
|
|
|
<div class="circuitarea" v-if="selectedButton">
|
|
|
|
|
<div class="circuittab"></div>
|
|
|
|
|
<span class="circuittext">照明回路</span>
|
|
|
|
|
<div class="btn2">
|
|
|
|
|
<button
|
|
|
|
|
class="openplan"
|
|
|
|
|
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
|
|
|
|
|
@click="togglePlan2">
|
|
|
|
|
{{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
|
|
|
|
|
</button>
|
|
|
|
|
<!-- <button >启用面板</button> -->
|
|
|
|
|
<a-switch
|
|
|
|
|
v-model:checked="selectAllCheckbox"
|
|
|
|
|
:class="{
|
|
|
|
|
'blue-background': selectAllCheckbox,
|
|
|
|
|
'grey-background': !selectAllCheckbox,
|
|
|
|
|
}"
|
|
|
|
|
@change="toggleAllSelection" />
|
|
|
|
|
<button class="both" @click="selectAll">多选</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="btnarea" v-if="selectedButton">
|
|
|
|
|
<template v-if="!showAllButtons">
|
|
|
|
|
<button
|
|
|
|
|
v-for="(button2, index) in limitedButtons"
|
|
|
|
|
:key="index"
|
|
|
|
|
:style="{
|
|
|
|
|
'pointer-events': isPlanEnabled2 ? 'auto' : 'none',
|
|
|
|
|
opacity: isPlanEnabled2 ? 1 : 0.5,
|
|
|
|
|
}"
|
|
|
|
|
:class="{ btn: true, selected: button2.selected }"
|
|
|
|
|
@click="toggleSelection(button2)">
|
|
|
|
|
{{ button2.label }}
|
|
|
|
|
</button>
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
<span @click="showAllButtons = true" class="openzm"><down-outlined />展开</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<button
|
|
|
|
|
v-for="(button2, index) in buttons2"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="{ btn: true, selected: button2.selected }"
|
|
|
|
|
@click="toggleSelection(button2)">
|
|
|
|
|
{{ button2.label }}
|
|
|
|
|
</button>
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
<span @click="showAllButtons = false" class="openzm"><up-outlined />回缩</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 控制模式 -->
|
|
|
|
|
<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>
|
|
|
|
|
<!-- 控制场景 -->
|
|
|
|
|
<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>
|
|
|
|
|
<!-- 灯具参数 -->
|
|
|
|
|
<div>
|
|
|
|
|
<div class="lightparametersarea" v-if="selectedButton4">
|
|
|
|
|
<div class="lightparameterstab"></div>
|
|
|
|
|
<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>
|
|
|
|
|
</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"
|
|
|
|
|
:style="{ backgroundColor: '#000', overflow: 'hidden' }"
|
|
|
|
|
:mask="false"
|
|
|
|
|
:bodyStyle="{
|
|
|
|
|
background: 'rgba(0, 0, 0, 0.9)',
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
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="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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
|
|
|
|
|
>3800k</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="excubtn">
|
|
|
|
|
<button @click="excuModal" class="excuno">取消</button>
|
|
|
|
|
<button @click="handleOk" class="excuok">执行</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-modal>
|
|
|
|
|
</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" @click="addModal">添加</button>
|
|
|
|
|
</div>
|
|
|
|
|
<a-modal
|
|
|
|
|
v-model:visible="addvisible"
|
|
|
|
|
width="500px"
|
|
|
|
|
height="792px"
|
|
|
|
|
:closable="false"
|
|
|
|
|
:footer="null"
|
|
|
|
|
:style="{ backgroundColor: '#000' }"
|
|
|
|
|
:mask="false"
|
|
|
|
|
:bodyStyle="{
|
|
|
|
|
background: 'rgba(0, 0, 0, 0.9)',
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
height: '792px',
|
|
|
|
|
maxHeight: '792px',
|
|
|
|
|
boxSizing: 'borderBox',
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
}">
|
|
|
|
|
<p style="font-size: 18px; font-weight: 700">计划库</p>
|
|
|
|
|
<div style="width: 100%; border-top: 1px solid rgba(255, 255, 255, 1)"></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" />
|
|
|
|
|
</div>
|
|
|
|
|
<button class="addok" @click="addhandleOk">确定</button>
|
|
|
|
|
</a-modal>
|
|
|
|
|
</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="500px"
|
|
|
|
|
height="792px"
|
|
|
|
|
v-model:visible="logModalVisible"
|
|
|
|
|
:closable="false"
|
|
|
|
|
:style="{ backgroundColor: '#000', overflow: 'hidden' }"
|
|
|
|
|
@cancel="closeLogModal"
|
|
|
|
|
:footer="null"
|
|
|
|
|
:mask="false"
|
|
|
|
|
:bodyStyle="{
|
|
|
|
|
background: 'rgba(0, 0, 0, 0.9)',
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
height: '792px',
|
|
|
|
|
maxHeight: '792px',
|
|
|
|
|
boxSizing: 'borderBox',
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
}">
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<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>
|
|
|
|
|
</a-drawer>
|
|
|
|
|
<div class="drawer-title1" v-if="!visible">
|
|
|
|
|
<a-button @click="toggleDrawer" class="arrowbtn">
|
|
|
|
|
<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)" />
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, computed, onMounted } from 'vue';
|
|
|
|
|
import { RightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
const toggleDrawer = () => {
|
|
|
|
|
visible.value = !visible.value;
|
|
|
|
|
};
|
|
|
|
|
const bulbs = ref([
|
|
|
|
|
{ className: 'bulbLogo1', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo2', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo3', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo4', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo5', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo6', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo7', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo8', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo9', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo10', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo11', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo12', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo13', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo14', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo15', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo16', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
// 照明区域按钮单选
|
|
|
|
|
const isPlanEnabled = ref(true); // 初始状态是启用
|
|
|
|
|
const togglePlan = () => {
|
|
|
|
|
isPlanEnabled.value = !isPlanEnabled.value;
|
|
|
|
|
};
|
|
|
|
|
const showAllButtonsarea = ref(false);
|
|
|
|
|
|
|
|
|
|
const buttons1 = computed(() => buttons.value.slice(0, 8));
|
|
|
|
|
const buttons = ref([
|
|
|
|
|
{ label: 'A区', selected: false, id: 1 },
|
|
|
|
|
{ label: 'B区', selected: false, id: 2 },
|
|
|
|
|
{ label: 'C区', selected: false, id: 3 },
|
|
|
|
|
{ label: 'D区', selected: false, id: 4 },
|
|
|
|
|
{ label: '计划启用', selected: false, id: 5 },
|
|
|
|
|
{ label: 'A区', selected: false, id: 6 },
|
|
|
|
|
{ label: 'B区', selected: false, id: 7 },
|
|
|
|
|
{ label: 'C区', selected: false, id: 8 },
|
|
|
|
|
{ label: 'D区', selected: false, id: 4 },
|
|
|
|
|
{ label: '计划启用', selected: false, id: 5 },
|
|
|
|
|
{ label: 'A区', selected: false, id: 6 },
|
|
|
|
|
{ label: 'B区', selected: false, id: 7 },
|
|
|
|
|
{ label: 'C区', selected: false, id: 8 },
|
|
|
|
|
]);
|
|
|
|
|
const selectedButton = ref(null);
|
|
|
|
|
const selectButton = (button) => {
|
|
|
|
|
selectedButton.value = button;
|
|
|
|
|
const startIndex = (button.id - 1) * 4; // 计算当前区域灯泡的起始索引
|
|
|
|
|
const endIndex = startIndex + 4; // 计算当前区域灯泡的结束索引
|
|
|
|
|
bulbs.value.forEach((bulb, index) => {
|
|
|
|
|
bulb.visible = index >= startIndex && index < endIndex;
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 照明回路按钮
|
|
|
|
|
let singleSelection = ref(true); // 默认为单选
|
|
|
|
|
const selectAllCheckbox = ref(false);
|
|
|
|
|
const showControlMode = ref(false);
|
|
|
|
|
const showAllButtons = 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 },
|
|
|
|
|
]);
|
|
|
|
|
const isPlanEnabled2 = ref(true);
|
|
|
|
|
const togglePlan2 = () => {
|
|
|
|
|
isPlanEnabled2.value = !isPlanEnabled2.value;
|
|
|
|
|
};
|
|
|
|
|
const selectAll = () => {
|
|
|
|
|
singleSelection.value = !singleSelection.value;
|
|
|
|
|
if (singleSelection.value) {
|
|
|
|
|
// 单选
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = false;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 多选
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = false;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const toggleAllSelection = () => {
|
|
|
|
|
if (selectAllCheckbox.value) {
|
|
|
|
|
// 如果全选开关被打开，实现多选模式
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = true;
|
|
|
|
|
});
|
|
|
|
|
singleSelection.value = false;
|
|
|
|
|
} else {
|
|
|
|
|
// 如果全选开关被关闭，实现单选模式
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = false;
|
|
|
|
|
});
|
|
|
|
|
singleSelection.value = true;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const toggleSelection = (button) => {
|
|
|
|
|
if (singleSelection.value) {
|
|
|
|
|
// 单选模式
|
|
|
|
|
buttons2.value.forEach((b) => {
|
|
|
|
|
if (b !== button) {
|
|
|
|
|
b.selected = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
button.selected = !button.selected;
|
|
|
|
|
// 如果当前处于多选模式，更新全选开关的状态
|
|
|
|
|
if (!singleSelection.value) {
|
|
|
|
|
selectAllCheckbox.value = buttons2.value.some((button) => button.selected);
|
|
|
|
|
} else {
|
|
|
|
|
// 在单选模式下，全选开关应设为false，因为不可能所有按钮都被选中
|
|
|
|
|
selectAllCheckbox.value = false;
|
|
|
|
|
}
|
|
|
|
|
showControlMode.value = button;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 控制模式按钮
|
|
|
|
|
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 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 refresh = () => {
|
|
|
|
|
selectedButton.value = null;
|
|
|
|
|
showControlMode.value = false;
|
|
|
|
|
showControlScene.value = false;
|
|
|
|
|
selectedButton3.value = null;
|
|
|
|
|
selectedButton4.value = null;
|
|
|
|
|
};
|
|
|
|
|
// 操作日志
|
|
|
|
|
const logModalVisible = ref(false);
|
|
|
|
|
const handleRowClick = (record: any, index: number) => {
|
|
|
|
|
// 处理行点击事件，例如选中行或者其他操作
|
|
|
|
|
console.log(record, '=================', index);
|
|
|
|
|
// 显示模态框
|
|
|
|
|
logModalVisible.value = true;
|
|
|
|
|
};
|
|
|
|
|
const closeLogModal = () => {
|
|
|
|
|
logModalVisible.value = false;
|
|
|
|
|
};
|
|
|
|
|
// 执行确认
|
|
|
|
|
const executevisible = ref<boolean>(false);
|
|
|
|
|
const showModal = () => {
|
|
|
|
|
executevisible.value = true;
|
|
|
|
|
};
|
|
|
|
|
const excuModal = () => {
|
|
|
|
|
console.log('取消111');
|
|
|
|
|
executevisible.value = false;
|
|
|
|
|
};
|
|
|
|
|
const handleOk = (e: MouseEvent) => {
|
|
|
|
|
console.log('ok1111');
|
|
|
|
|
executevisible.value = false;
|
|
|
|
|
};
|
|
|
|
|
// 添加模态框
|
|
|
|
|
const addvisible = ref<boolean>(false);
|
|
|
|
|
const addModal = () => {
|
|
|
|
|
addvisible.value = true;
|
|
|
|
|
};
|
|
|
|
|
// 穿梭框
|
|
|
|
|
interface MockData {
|
|
|
|
|
key: string;
|
|
|
|
|
title: string;
|
|
|
|
|
description: string;
|
|
|
|
|
chosen: boolean;
|
|
|
|
|
}
|
|
|
|
|
const mockData = ref([
|
|
|
|
|
{
|
|
|
|
|
key: '1',
|
|
|
|
|
|
|
|
|
|
title: '计划再开',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '2',
|
|
|
|
|
|
|
|
|
|
title: '检修模式',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '3',
|
|
|
|
|
|
|
|
|
|
title: '设备变更',
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
// const mockData = ref<MockData[]>([]);
|
|
|
|
|
const targetKeys = ref<string[]>([]);
|
|
|
|
|
const filterOption = (inputValue: string, option: MockData) => {
|
|
|
|
|
return option.description.indexOf(inputValue) > -1;
|
|
|
|
|
};
|
|
|
|
|
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
|
|
|
|
|
console.log(keys, direction, moveKeys);
|
|
|
|
|
};
|
|
|
|
|
const handleSearch = (dir: string, value: string) => {
|
|
|
|
|
console.log('search:', dir, value);
|
|
|
|
|
};
|
|
|
|
|
const addhandleOk = (e: MouseEvent) => {
|
|
|
|
|
console.log(e);
|
|
|
|
|
addvisible.value = false;
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.bulbLogo1 {
|
|
|
|
|
margin-top: 40%;
|
|
|
|
|
margin-left: 12%;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo2 {
|
|
|
|
|
margin-top: 35%;
|
|
|
|
|
margin-left: 20%;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo3 {
|
|
|
|
|
margin-top: 23%;
|
|
|
|
|
margin-left: 10%;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo4 {
|
|
|
|
|
margin-top: 10%;
|
|
|
|
|
margin-left: 15%;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo5 {
|
|
|
|
|
margin-top: 8%;
|
|
|
|
|
margin-left: 13%;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo6 {
|
|
|
|
|
margin-top: 8%;
|
|
|
|
|
margin-left: 15%;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo7 {
|
|
|
|
|
margin-top: 0%;
|
|
|
|
|
margin-left: 12%;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo9 {
|
|
|
|
|
margin-top: 35%;
|
|
|
|
|
margin-left: 20%;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo10 {
|
|
|
|
|
margin-top: 35%;
|
|
|
|
|
margin-left: 20%;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo11 {
|
|
|
|
|
margin-top: 35%;
|
|
|
|
|
margin-left: 20%;
|
|
|
|
|
}
|
|
|
|
|
.bulbLogo12 {
|
|
|
|
|
margin-top: 35%;
|
|
|
|
|
margin-left: 20%;
|
|
|
|
|
}
|
|
|
|
|
.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.enabled {
|
|
|
|
|
border: none;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
margin-left: 235px;
|
|
|
|
|
width: 88px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.plan.disabled {
|
|
|
|
|
border: none;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
margin-left: 235px;
|
|
|
|
|
width: 88px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
background-color: red;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.plan:disabled {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.openplan.enabled2 {
|
|
|
|
|
border: none;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
width: 88px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.openplan.disabled2 {
|
|
|
|
|
border: none;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
width: 88px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
background-color: red;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.openplan:disabled {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn2 {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-left: 157px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.openzm {
|
|
|
|
|
color: rgba(34, 183, 255, 1);
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.custom-checkbox {
|
|
|
|
|
width: 13px;
|
|
|
|
|
height: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.both {
|
|
|
|
|
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%
|
|
|
|
|
);
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.blue-background.ant-switch-checked {
|
|
|
|
|
background-color: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(1, 206, 255, 1) 0%,
|
|
|
|
|
rgba(0, 150, 229, 1) 100%
|
|
|
|
|
) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grey-background.ant-switch {
|
|
|
|
|
background-color: grey !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.blue-background.ant-switch-checked .ant-switch-handle {
|
|
|
|
|
background-color: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(1, 206, 255, 1) 0%,
|
|
|
|
|
rgba(0, 150, 229, 1) 100%
|
|
|
|
|
) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grey-background.ant-switch .ant-switch-handle {
|
|
|
|
|
background-color: grey !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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: 20px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
z-index: 99999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drawer-title2 {
|
|
|
|
|
position: fixed;
|
|
|
|
|
width: 33px;
|
|
|
|
|
height: 33px;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 495px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
z-index: 99999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrowbtn {
|
|
|
|
|
display: flex;
|
|
|
|
|
/* 使用 flex 布局 */
|
|
|
|
|
justify-content: center;
|
|
|
|
|
/* 水平居中 */
|
|
|
|
|
align-items: center;
|
|
|
|
|
/* 垂直居中 */
|
|
|
|
|
width: 28px;
|
|
|
|
|
height: 28px;
|
|
|
|
|
background: rgba(0, 0, 0, 1);
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
: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: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (min-width: 0px) and (max-width: 959px) {
|
|
|
|
|
.lighting-img {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (min-width: 960px) and (max-width: 1023px) {
|
|
|
|
|
.lighting-img {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
|
|
|
|
.lighting-img {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*>=1280,<1440的设备屏幕*/
|
|
|
|
|
@media screen and (min-width: 1280px) and (max-width: 1439px) {
|
|
|
|
|
.lighting-img {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (min-width: 1440px) and (max-width: 1679px) {
|
|
|
|
|
.lighting-img {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*>=1680,<1920px的设备屏幕*/
|
|
|
|
|
@media screen and (min-width: 1680px) and (max-width: 1919px) {
|
|
|
|
|
.lighting-img {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*>=1920的设备屏幕*/
|
|
|
|
|
@media (min-width: 1920px) {
|
|
|
|
|
.lighting-img {
|
|
|
|
|
height: 1191px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
/* 设置图片容器的高度为视口高度 */
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
/* 隐藏溢出部分 */
|
|
|
|
|
position: relative;
|
|
|
|
|
/* 使内部绝对定位元素基于此容器定位 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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: 10%;
|
|
|
|
|
left: 10%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 9%;
|
|
|
|
|
left: 15%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo3 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 34%;
|
|
|
|
|
left: 25%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo4 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 45%;
|
|
|
|
|
left: 30%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo5 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 45%;
|
|
|
|
|
left: 30%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo6 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 55%;
|
|
|
|
|
left: 30%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo7 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 60%;
|
|
|
|
|
left: 40%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo8 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 55%;
|
|
|
|
|
left: 70%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo9 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 10%;
|
|
|
|
|
left: 60%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo10 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 10%;
|
|
|
|
|
left: 40%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo11 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 15%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo12 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 15%;
|
|
|
|
|
left: 60%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo13 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 55%;
|
|
|
|
|
left: 70%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo14 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 45%;
|
|
|
|
|
left: 60%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo15 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 45%;
|
|
|
|
|
left: 80%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > .bulbBox > .bulbLogo16 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 45%;
|
|
|
|
|
left: 90%;
|
|
|
|
|
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: 450px 177px;
|
|
|
|
|
width: 450px;
|
|
|
|
|
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/t/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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-change {
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.excuno {
|
|
|
|
|
width: 150px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.excuok {
|
|
|
|
|
width: 150px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.excubtn {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.addok {
|
|
|
|
|
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);
|
|
|
|
|
margin-top: 440px;
|
|
|
|
|
margin-left: 350px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
