|
|
|
|
<template>
|
|
|
|
|
<div class="lighting-img" style="overflow: hidden">
|
|
|
|
|
<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"
|
|
|
|
|
:body-style="{ background: 'rgba(0, 0, 0)', 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 }" @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 }" @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 @click="allbtn1" class="allbtn">全选</button>
|
|
|
|
|
<!-- <button v-if="!allbtnB" class="allbtn"></button> -->
|
|
|
|
|
<button class="both" @click="selectAll">
|
|
|
|
|
{{ isAllchoose ? "多选" : "单选" }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="btnarea" v-if="selectedButton">
|
|
|
|
|
<template v-if="!showAllButtons">
|
|
|
|
|
<button v-for="(button2, index) in limitedButtons" :key="index"
|
|
|
|
|
:class="{ btn: true, selected: button2.selected }" @click="toggleSelection(button2)">
|
|
|
|
|
{{ 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" okText="执行"
|
|
|
|
|
@ok="handleOk2" :mask="false" :bodyStyle="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
background: ' rgba(0,0,0)',
|
|
|
|
|
boxShadow: '-2px 0px 10px rgba(217, 217, 217, 0.5)',
|
|
|
|
|
height: '792px',
|
|
|
|
|
maxHeight: '792px',
|
|
|
|
|
boxSizing: 'borderBox',
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
}">
|
|
|
|
|
<div style="height: 792px">
|
|
|
|
|
<div style="width: 100%; text-align: center">
|
|
|
|
|
<span class="text-change">变更内容</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="journal" style="margin-top: 20px" v-for="item in cxlist" key="item.id">
|
|
|
|
|
<div class="imgText">
|
|
|
|
|
<div class="zjzm">
|
|
|
|
|
<img src="/asset/image//bulbLogo/22549.png" alt="" />
|
|
|
|
|
<span style="
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
">{{ item.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="cxbtn" @click="delbtn(item.id)">撤销</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="gird22">
|
|
|
|
|
<div>
|
|
|
|
|
<button style="
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(1, 206, 255, 1) 0%,
|
|
|
|
|
rgba(0, 150, 229, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
border: 1px solid rgba(95, 154, 251, 1);
|
|
|
|
|
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;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
">{{ item.manual }}</span>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
">{{ item.automatic }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button style="
|
|
|
|
|
width: 68px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(1, 206, 255, 1) 0%,
|
|
|
|
|
rgba(0, 150, 229, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
border: 1px solid rgba(95, 154, 251, 1);
|
|
|
|
|
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;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
">{{ item.brightness }}</span>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span style="
|
|
|
|
|
color: rgba(243, 97, 99, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
">{{ item.brightness2 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button style="
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(1, 206, 255, 1) 0%,
|
|
|
|
|
rgba(0, 150, 229, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
border: 1px solid rgba(95, 154, 251, 1);
|
|
|
|
|
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;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
">{{ item.manual2 }}</span>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
">{{ item.automatic2 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button style="
|
|
|
|
|
width: 68px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(1, 206, 255, 1) 0%,
|
|
|
|
|
rgba(0, 150, 229, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: 1px solid rgba(95, 154, 251, 1);
|
|
|
|
|
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;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
">{{ item.brightness3 }}</span>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
">{{ item.brightness4 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="excubtn">
|
|
|
|
|
<button class="flushed" @click="refresh">刷新</button>
|
|
|
|
|
<button class="execute" @click="showModal">执行</button>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</a-modal>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
<a-tab-pane key="2" tab="计划列表" force-render>
|
|
|
|
|
<div class="divadd">
|
|
|
|
|
<button class="add" @click="addModal">添加</button>
|
|
|
|
|
</div>
|
|
|
|
|
<table class="custom-table table1" >
|
|
|
|
|
<thead >
|
|
|
|
|
<tr>
|
|
|
|
|
<th>序号</th>
|
|
|
|
|
<th>执行时间</th>
|
|
|
|
|
<th>计划名称</th>
|
|
|
|
|
<th>状态</th>
|
|
|
|
|
<th>操作</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr v-for="(row, index) in dataSource" :key="index" @click="handleRowClick(row.key, row.data)">
|
|
|
|
|
<td>{{ row.key }}</td>
|
|
|
|
|
<td>{{ row.data }}</td>
|
|
|
|
|
<td>{{ row.planname }}</td>
|
|
|
|
|
|
|
|
|
|
<td v-if="row.status === '待执行'">
|
|
|
|
|
<button style="
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
background: rgba(57, 215, 187, 0.1);
|
|
|
|
|
color: rgba(57, 215, 187, 1);
|
|
|
|
|
border: 1px solid rgba(57, 215, 187, 1);
|
|
|
|
|
">
|
|
|
|
|
{{ row.status }}
|
|
|
|
|
</button>
|
|
|
|
|
</td>
|
|
|
|
|
<td v-if="row.status !== '待执行'">
|
|
|
|
|
<button style="
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
background: rgba(243, 97, 99, 0.1);
|
|
|
|
|
border: 1px solid rgba(243, 97, 99, 1);
|
|
|
|
|
color: rgba(243, 97, 99, 1);
|
|
|
|
|
">
|
|
|
|
|
{{ row.status }}
|
|
|
|
|
</button>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<span class="tabreboot">重启</span>
|
|
|
|
|
<span class="tabdelete">删除</span>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<a-modal v-model:visible="addvisible" width="500px" height="792px" :closable="false" :footer="null"
|
|
|
|
|
:mask="false" :bodyStyle="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
background: ' rgba(0,0,0)',
|
|
|
|
|
height: '792px',
|
|
|
|
|
maxHeight: '792px',
|
|
|
|
|
boxSizing: 'borderBox',
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
}">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="div-operation"></div>
|
|
|
|
|
<span class="text-operation">计划库</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 20px">
|
|
|
|
|
<a-transfer v-model:target-keys="targetKeys" :data-source="mockData" show-search
|
|
|
|
|
:filter-option="filterOption" :render="(item) => item.title"
|
|
|
|
|
@change="handleChange"
|
|
|
|
|
:style="{ color: 'rgba(255,255,255,1)' }" @search="handleSearch" />
|
|
|
|
|
</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"
|
|
|
|
|
@cancel="closeLogModal" :footer="null"
|
|
|
|
|
:mask="false" :bodyStyle="{
|
|
|
|
|
background: 'rgba(0, 0, 0, 1)',
|
|
|
|
|
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" v-for="item in cxlist" key="item.id">
|
|
|
|
|
<div class="imgText">
|
|
|
|
|
<div class="zjzm">
|
|
|
|
|
<img src="/asset/image//bulbLogo/22549.png" alt="" />
|
|
|
|
|
<span style="
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
">{{ item.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="cxbtn" @click="delbtn(item.id)">撤销</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="gird22">
|
|
|
|
|
<div>
|
|
|
|
|
<button style="
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(1, 206, 255, 1) 0%,
|
|
|
|
|
rgba(0, 150, 229, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
border: 1px solid rgba(95, 154, 251, 1);
|
|
|
|
|
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;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
">{{ item.manual }}</span>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
">{{ item.automatic }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button style="
|
|
|
|
|
width: 68px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(1, 206, 255, 1) 0%,
|
|
|
|
|
rgba(0, 150, 229, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
border: 1px solid rgba(95, 154, 251, 1);
|
|
|
|
|
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;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
">{{ item.brightness }}</span>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span style="
|
|
|
|
|
color: rgba(243, 97, 99, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
">{{ item.brightness2 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button style="
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(1, 206, 255, 1) 0%,
|
|
|
|
|
rgba(0, 150, 229, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
border: 1px solid rgba(95, 154, 251, 1);
|
|
|
|
|
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;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
">{{ item.manual2 }}</span>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
">{{ item.automatic2 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button style="
|
|
|
|
|
width: 68px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(1, 206, 255, 1) 0%,
|
|
|
|
|
rgba(0, 150, 229, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
border: 1px solid rgba(95, 154, 251, 1);
|
|
|
|
|
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;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
">{{ item.brightness3 }}</span>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
">{{ item.brightness4 }}</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 handleOk2 = (e: MouseEvent) => {
|
|
|
|
|
console.log(e);
|
|
|
|
|
console.log('ok2');
|
|
|
|
|
executevisible.value = false;
|
|
|
|
|
};
|
|
|
|
|
const cxlist = ref([
|
|
|
|
|
{
|
|
|
|
|
id: "1",
|
|
|
|
|
name: "站厅照明 1区",
|
|
|
|
|
manual: "手动",
|
|
|
|
|
automatic: "自动",
|
|
|
|
|
brightness: "100lux",
|
|
|
|
|
brightness2: "30lux",
|
|
|
|
|
manual2: "手动",
|
|
|
|
|
automatic2: "自动",
|
|
|
|
|
brightness3: "4000k",
|
|
|
|
|
brightness4: "3800k",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "2",
|
|
|
|
|
name: "站厅照明 2区",
|
|
|
|
|
manual: "手动",
|
|
|
|
|
automatic: "自动",
|
|
|
|
|
brightness: "100lux",
|
|
|
|
|
brightness2: "30lux",
|
|
|
|
|
manual2: "手动",
|
|
|
|
|
automatic2: "自动",
|
|
|
|
|
brightness3: "4000k",
|
|
|
|
|
brightness4: "3800k",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "3",
|
|
|
|
|
name: "站厅照明 3区",
|
|
|
|
|
manual: "手动",
|
|
|
|
|
automatic: "自动",
|
|
|
|
|
brightness: "100lux",
|
|
|
|
|
brightness2: "30lux",
|
|
|
|
|
manual2: "手动",
|
|
|
|
|
automatic2: "自动",
|
|
|
|
|
brightness3: "4000k",
|
|
|
|
|
brightness4: "3800k",
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 照明回路按钮
|
|
|
|
|
const isAllchoose = ref(true);
|
|
|
|
|
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 allbtnB = ref(false);
|
|
|
|
|
|
|
|
|
|
const selectAll = () => {
|
|
|
|
|
singleSelection.value = !singleSelection.value;
|
|
|
|
|
isAllchoose.value = !isAllchoose.value;
|
|
|
|
|
if (singleSelection.value) {
|
|
|
|
|
// 单选
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = false;
|
|
|
|
|
// allbtnB.value = false;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 多选
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = false;
|
|
|
|
|
// allbtnB.value = true;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
|
|
|
|
|
};
|
|
|
|
|
const allbtn1 = () => {
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = true;
|
|
|
|
|
});
|
|
|
|
|
selectAllCheckbox.value = true;
|
|
|
|
|
};
|
|
|
|
|
const toggleAllSelection = () => {
|
|
|
|
|
if (selectAllCheckbox.value) {
|
|
|
|
|
// 如果全选开关被打开，实现多选模式
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = false;
|
|
|
|
|
});
|
|
|
|
|
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 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 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 targetKeys = ref<string[]>([]);
|
|
|
|
|
const filterOption = (inputValue: string, option: MockData) => {
|
|
|
|
|
console.log( option.description);
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
//撤销
|
|
|
|
|
const delbtn = (id: any) => {
|
|
|
|
|
console.log(id);
|
|
|
|
|
cxlist.value.pop(id);
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
:global(.ant-drawer-content) {
|
|
|
|
|
background-color: rgba(0, 0, 0, 1);
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:global(.ant-modal-content) {
|
|
|
|
|
background-color: rgba(0, 0, 0, 1);
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
:deep(.ant-transfer-list){
|
|
|
|
|
width: 230px;
|
|
|
|
|
height: 450px;
|
|
|
|
|
}
|
|
|
|
|
:deep(.ant-transfer-list-header){
|
|
|
|
|
background-color: rgba(0, 0, 0, 1);
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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: 83px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.allbtn {
|
|
|
|
|
border: 0;
|
|
|
|
|
width: 40px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lighting-img-box img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 79px);
|
|
|
|
|
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;
|
|
|
|
|
background-color: rgba(0, 0, 0);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
box-shadow: -2px 0px 10px rgba(217, 217, 217, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
.ztzm {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cxbtn {
|
|
|
|
|
// width:80px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
width: 59.79px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
background: linear-gradient(180deg,
|
|
|
|
|
rgba(255, 187, 0, 1) 0%,
|
|
|
|
|
rgba(255, 112, 3, 1) 91.21%,
|
|
|
|
|
rgba(255, 129, 3, 1) 100%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
: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>
|
