|
|
|
|
<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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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="../../../../public/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: '../../../../public/asset/image/bulbLogo/22419@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo2', imageUrl: '../../../../public/asset/image/bulbLogo/22419@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo3', imageUrl: '../../../../public/asset/image/bulbLogo/22419@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo4', imageUrl: '../../../../public/asset/image/bulbLogo/22419@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo5', imageUrl: '../../../../public/asset/image/bulbLogo/22394@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo6', imageUrl: '../../../../public/asset/image/bulbLogo/22394@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo7', imageUrl: '../../../../public/asset/image/bulbLogo/22394@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo8', imageUrl: '../../../../public/asset/image/bulbLogo/22394@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo9', imageUrl: '../../../../public/asset/image/bulbLogo/22396@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo10', imageUrl: '../../../../public/asset/image/bulbLogo/22396@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo11', imageUrl: '../../../../public/asset/image/bulbLogo/22396@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo12', imageUrl: '../../../../public/asset/image/bulbLogo/22396@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo13', imageUrl: '../../../../public/asset/image/bulbLogo/22400@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo14', imageUrl: '../../../../public/asset/image/bulbLogo/22400@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo15', imageUrl: '../../../../public/asset/image/bulbLogo/22400@2x.png', visible: false },
|
|
|
|
|
{ className: 'bulbLogo16', imageUrl: '../../../../public/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;
|
|
|
|
|
if (singleSelection) {
|
|
|
|
|
// 单选
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = false;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 多选
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = false;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
selectAllCheckbox.value = !singleSelection; // 更新全选开关的状态
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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) {
|
|
|
|
|
// 单选模式
|
|
|
|
|
buttons2.value.forEach((b) => {
|
|
|
|
|
if (b !== button) {
|
|
|
|
|
b.selected = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
button.selected = !button.selected;
|
|
|
|
|
// 如果当前处于多选模式，更新全选开关的状态
|
|
|
|
|
if (!singleSelection) {
|
|
|
|
|
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("../../../../public/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("../../../../public/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>
|
