|
|
|
|
<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 class="light-tag">
|
|
|
|
|
<div class="light-tag-tit">
|
|
|
|
|
<img class="tagimg" src="/asset/image//bulbLogo/21962.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
class="tagtext"
|
|
|
|
|
:style="{
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
fontWeight: 700,
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
|
|
|
}"
|
|
|
|
|
>站厅照明 1区</span
|
|
|
|
|
>
|
|
|
|
|
<button
|
|
|
|
|
:style="{
|
|
|
|
|
width: ' 50px',
|
|
|
|
|
height: '24px',
|
|
|
|
|
opacity: 1,
|
|
|
|
|
background: 'rgba(57, 215, 187, 0.1)',
|
|
|
|
|
border: '1px solid rgba(57, 215, 187, 1)',
|
|
|
|
|
fontSize: '12px',
|
|
|
|
|
fontWeight: 400,
|
|
|
|
|
lineHeight: ' 17.38px',
|
|
|
|
|
color: 'rgba(57, 215, 187, 1)',
|
|
|
|
|
marginLeft: '180px',
|
|
|
|
|
}"
|
|
|
|
|
>正常</button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="light-tag-box">
|
|
|
|
|
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
|
|
|
|
<span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
|
|
|
|
|
>控制模式</span
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
:style="{
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
fontWeight: '700',
|
|
|
|
|
marginRight: '20px',
|
|
|
|
|
}"
|
|
|
|
|
>自动</span
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image//bulbLogo/22546.png" alt="" />
|
|
|
|
|
<span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">亮度</span>
|
|
|
|
|
<span
|
|
|
|
|
:style="{
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
fontWeight: '700',
|
|
|
|
|
marginLeft: '20px',
|
|
|
|
|
}"
|
|
|
|
|
>1000lux</span
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image//bulbLogo/22554.png" alt="" />
|
|
|
|
|
<span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
|
|
|
|
|
>控制场景</span
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
:style="{
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
fontWeight: '700',
|
|
|
|
|
marginRight: '20px',
|
|
|
|
|
}"
|
|
|
|
|
>舒适</span
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image//bulbLogo/22553.png" alt="" />
|
|
|
|
|
<span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">色温</span>
|
|
|
|
|
<span
|
|
|
|
|
:style="{
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
fontWeight: '700',
|
|
|
|
|
marginLeft: '20px',
|
|
|
|
|
}"
|
|
|
|
|
>4200k</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<a-drawer
|
|
|
|
|
v-model:visible="visible"
|
|
|
|
|
class="custom-class"
|
|
|
|
|
width="496"
|
|
|
|
|
height="1080"
|
|
|
|
|
placement="right"
|
|
|
|
|
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
|
|
|
|
|
:closable="false"
|
|
|
|
|
id="Odrawer"
|
|
|
|
|
:maskStyle="{ 'background-color': 'rgba(0,0,0,0)' }">
|
|
|
|
|
<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>
|
|
|
|
|
<a-switch
|
|
|
|
|
v-model:checked="selectAllCheckbox"
|
|
|
|
|
:class="{
|
|
|
|
|
'blue-background': selectAllCheckbox,
|
|
|
|
|
'grey-background': !selectAllCheckbox,
|
|
|
|
|
}"
|
|
|
|
|
@change="toggleAllSelection" />
|
|
|
|
|
<button @click="allbtn1" 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 }"
|
|
|
|
|
class="zmhlbtn"
|
|
|
|
|
@click="toggleSelection(button2)">
|
|
|
|
|
<stop-outlined v-if="button2.zmhld" />
|
|
|
|
|
{{ 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">
|
|
|
|
|
<table class="custom-table table1">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr :style="{ background: 'rgba(35,45,69)' }">
|
|
|
|
|
<th>开启数量</th>
|
|
|
|
|
<th>亮度(lux)</th>
|
|
|
|
|
<th>色温</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr
|
|
|
|
|
v-for="(row, index) in lightSource"
|
|
|
|
|
:key="index"
|
|
|
|
|
@click="handleRowClick(row.num)"
|
|
|
|
|
:style="{ height: '50px' }">
|
|
|
|
|
<td>{{ row.num }}</td>
|
|
|
|
|
<td>{{ row.light }}</td>
|
|
|
|
|
<td>{{ row.tempruter }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<button class="flushed" @click="refresh">刷新</button>
|
|
|
|
|
<button class="execute" @click="showModal">执行</button>
|
|
|
|
|
</div>
|
|
|
|
|
<a-modal
|
|
|
|
|
:v-if="cxlist.length === 0"
|
|
|
|
|
v-model:visible="executevisible"
|
|
|
|
|
width="500px"
|
|
|
|
|
height="792px"
|
|
|
|
|
okText="执行"
|
|
|
|
|
:closable="false"
|
|
|
|
|
@ok="handleOk2"
|
|
|
|
|
:mask="false"
|
|
|
|
|
:bodyStyle="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
background: ' rgba(0,0,0)',
|
|
|
|
|
color: 'rgba(255,83,0)',
|
|
|
|
|
boxSizing: 'borderBox',
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
position: 'fixed',
|
|
|
|
|
right: '496px',
|
|
|
|
|
top: '0',
|
|
|
|
|
}">
|
|
|
|
|
<div :v-if="cxlist.length === 0" style="height: 792px">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="div-operation"></div>
|
|
|
|
|
<span class="text-operation">变更内容 </span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="jbox" v-for="item in cxlist" :key="item.id">
|
|
|
|
|
<div class="journal" style="margin-top: 20px">
|
|
|
|
|
<div class="imgText">
|
|
|
|
|
<div class="zjzm">
|
|
|
|
|
<img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
class="titletext"
|
|
|
|
|
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
|
|
|
|
>{{ item.name }}</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="cxbtn" @click="delbtn(item.id)">撤销</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-btn">
|
|
|
|
|
<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: 12px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
"
|
|
|
|
|
>手动</span
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
margin-right: 40px;
|
|
|
|
|
"
|
|
|
|
|
>自动</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="light-btn">
|
|
|
|
|
<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: 12px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
"
|
|
|
|
|
>100lux</span
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
color: rgba(243, 97, 99, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
"
|
|
|
|
|
>30lux</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="controlarea-btn">
|
|
|
|
|
<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: 12px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
"
|
|
|
|
|
>手动</span
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
margin-right: 40px;
|
|
|
|
|
"
|
|
|
|
|
>自动</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="temp-btn">
|
|
|
|
|
<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: 12px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
"
|
|
|
|
|
>4000k</span
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
"
|
|
|
|
|
>3800k</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</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 :style="{ background: 'rgba(35,45,69)' }">
|
|
|
|
|
<th>序号</th>
|
|
|
|
|
<th>执行时间</th>
|
|
|
|
|
<th>计划名称</th>
|
|
|
|
|
<th>状态</th>
|
|
|
|
|
<th>操作</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr v-for="(row, index) in dataSource" :key="index">
|
|
|
|
|
<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>
|
|
|
|
|
<button class="tabreboot" @click="handlerefClick1">重启</button>
|
|
|
|
|
<button class="tabdelete">删除</button>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<a-modal
|
|
|
|
|
v-model:visible="addvisible"
|
|
|
|
|
width="500px"
|
|
|
|
|
height="792px"
|
|
|
|
|
:closable="false"
|
|
|
|
|
:mask="false"
|
|
|
|
|
:bodyStyle="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
background: ' rgba(0,0,0)',
|
|
|
|
|
color: 'rgba(255,83,0)',
|
|
|
|
|
boxSizing: 'borderBox',
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
height: '100vh',
|
|
|
|
|
maxHeight: '100vh',
|
|
|
|
|
position: 'fixed',
|
|
|
|
|
right: '496px',
|
|
|
|
|
top: '0',
|
|
|
|
|
}">
|
|
|
|
|
<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"
|
|
|
|
|
:listStyle="{ border: '2px solid rgba(25,74,125,1)' }" />
|
|
|
|
|
</div>
|
|
|
|
|
</a-modal>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
<a-tab-pane key="3" tab="日志">
|
|
|
|
|
<table class="custom-table table1">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr :style="{ background: 'rgba(35,45,69)' }">
|
|
|
|
|
<th>序号</th>
|
|
|
|
|
<th>执行时间</th>
|
|
|
|
|
<th>操作内容</th>
|
|
|
|
|
<th>操作人</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr
|
|
|
|
|
v-for="(row, index) in dataSource1"
|
|
|
|
|
:key="index"
|
|
|
|
|
@click="handleRowClick(row.key)"
|
|
|
|
|
:class="row.key === trindex ? 'istrindex' : ''">
|
|
|
|
|
<td>{{ row.key }}</td>
|
|
|
|
|
<td>{{ row.data }}</td>
|
|
|
|
|
<td>{{ row.planname }}</td>
|
|
|
|
|
<td>{{ row.status }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<a-modal
|
|
|
|
|
width="500px"
|
|
|
|
|
v-model:visible="logModalVisible"
|
|
|
|
|
:closable="false"
|
|
|
|
|
@cancel="closeLogModal"
|
|
|
|
|
:footer="null"
|
|
|
|
|
:mask="false"
|
|
|
|
|
:bodyStyle="{
|
|
|
|
|
marginLeft: 200,
|
|
|
|
|
background: 'rgba(0, 0, 0, 1)',
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
boxSizing: 'borderBox',
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
position: 'fixed',
|
|
|
|
|
right: '496px',
|
|
|
|
|
top: '0',
|
|
|
|
|
}">
|
|
|
|
|
<div style="height: calc(100vh - 96px)">
|
|
|
|
|
<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 class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
|
|
|
|
>{{ item.name }}</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="gird22">
|
|
|
|
|
<div class="control-btn">
|
|
|
|
|
<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: 12px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
"
|
|
|
|
|
>{{ item.manual }}</span
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
margin-right: 40px;
|
|
|
|
|
"
|
|
|
|
|
>{{ item.automatic }}</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="light-btn">
|
|
|
|
|
<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: 12px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
"
|
|
|
|
|
>{{ item.brightness }}</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: 8px;
|
|
|
|
|
"
|
|
|
|
|
>{{ item.brightness2 }}</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="controlarea-btn">
|
|
|
|
|
<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: 12px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
"
|
|
|
|
|
>{{ item.manual2 }}</span
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
margin-right: 40px;
|
|
|
|
|
"
|
|
|
|
|
>{{ item.automatic2 }}</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="temp-btn">
|
|
|
|
|
<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: 12px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
"
|
|
|
|
|
>{{ item.brightness3 }}</span
|
|
|
|
|
>
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
"
|
|
|
|
|
>{{ 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">
|
|
|
|
|
<double-left-outlined style="color: rgba(255, 255, 255, 1)" />
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="drawer-title2" v-if="visible">
|
|
|
|
|
<a-button @click="toggleDrawer" class="arrowbtn">
|
|
|
|
|
<double-right-outlined style="color: rgba(255, 255, 255, 1)" />
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, computed } from 'vue';
|
|
|
|
|
import {
|
|
|
|
|
DownOutlined,
|
|
|
|
|
UpOutlined,
|
|
|
|
|
DoubleLeftOutlined,
|
|
|
|
|
DoubleRightOutlined,
|
|
|
|
|
StopOutlined,
|
|
|
|
|
} from '@ant-design/icons-vue';
|
|
|
|
|
|
|
|
|
|
const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
|
|
|
|
|
const toggleDrawer = () => {
|
|
|
|
|
visible.value = !visible.value;
|
|
|
|
|
};
|
|
|
|
|
const handleOk2 = (e: MouseEvent) => {
|
|
|
|
|
console.log(e);
|
|
|
|
|
console.log('ok2');
|
|
|
|
|
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.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo2',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22419.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo3',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22419.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo4',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22419.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo5',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22394.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo6',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22394.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo7',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22394.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo8',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22394.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo9',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22396.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo10',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22396.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo11',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22396.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo12',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22396.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo13',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22400.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo14',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22400.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo15',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22400.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
className: 'bulbLogo16',
|
|
|
|
|
imageUrl: '/asset/image/bulbLogo/22400.png',
|
|
|
|
|
visible: true,
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
// 照明区域按钮单选
|
|
|
|
|
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([
|
|
|
|
|
{ id: 1, label: '1区', selected: false, zmhld: true },
|
|
|
|
|
{ id: 2, label: '2区', selected: false, zmhld: false },
|
|
|
|
|
{ id: 3, label: '3区', selected: false, zmhld: false },
|
|
|
|
|
{ id: 4, label: '4区', selected: false, zmhld: false },
|
|
|
|
|
{ id: 5, label: '5区', selected: false, zmhld: false },
|
|
|
|
|
{ id: 6, label: '6区', selected: false, zmhld: false },
|
|
|
|
|
{ id: 7, label: '7区', selected: false, zmhld: false },
|
|
|
|
|
{ id: 8, label: '1区', selected: false, zmhld: false },
|
|
|
|
|
{ id: 9, label: '2区', selected: false, zmhld: false },
|
|
|
|
|
{ id: 10, label: '3区', selected: false, zmhld: false },
|
|
|
|
|
]);
|
|
|
|
|
const zmhlid = ref();
|
|
|
|
|
const isPlanEnabled2 = ref(true);
|
|
|
|
|
const togglePlan2 = () => {
|
|
|
|
|
isPlanEnabled2.value = !isPlanEnabled2.value;
|
|
|
|
|
if (selectAllCheckbox.value) {
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.zmhld = true;
|
|
|
|
|
button.selected = false;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
const item = buttons2.value.find((button) => button.id === zmhlid.value);
|
|
|
|
|
if (item) {
|
|
|
|
|
item.zmhld = !item.zmhld;
|
|
|
|
|
item.selected = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const selectAll = () => {
|
|
|
|
|
if (isAllchoose.value === false) {
|
|
|
|
|
isPlanEnabled2.value = limitedButtons.value[0].zmhld;
|
|
|
|
|
}
|
|
|
|
|
singleSelection.value = !singleSelection.value;
|
|
|
|
|
isAllchoose.value = !isAllchoose.value;
|
|
|
|
|
if (singleSelection.value) {
|
|
|
|
|
// 单选
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = false;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 多选
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
button.selected = true;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
|
|
|
|
|
};
|
|
|
|
|
const allbtn1 = () => {
|
|
|
|
|
buttons2.value.forEach((button) => {
|
|
|
|
|
if (!button.zmhld) {
|
|
|
|
|
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) => {
|
|
|
|
|
console.log(button);
|
|
|
|
|
zmhlid.value = button.id;
|
|
|
|
|
console.log(zmhlid.value);
|
|
|
|
|
isPlanEnabled2.value = button.zmhld;
|
|
|
|
|
if (button.zmhld) {
|
|
|
|
|
return;
|
|
|
|
|
} else {
|
|
|
|
|
if (singleSelection.value) {
|
|
|
|
|
// 单选模式
|
|
|
|
|
buttons2.value.forEach((b) => {
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 控制模式按钮 vv
|
|
|
|
|
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 handlerefClick1 = () => {
|
|
|
|
|
console.log(1111);
|
|
|
|
|
executevisible.value = true;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let trindex = ref('-1');
|
|
|
|
|
const handleRowClick = (index: any) => {
|
|
|
|
|
trindex.value = index;
|
|
|
|
|
if (index === trindex.value) {
|
|
|
|
|
console.log('tri');
|
|
|
|
|
}
|
|
|
|
|
// 显示模态框
|
|
|
|
|
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 delbtn = (id: any) => {
|
|
|
|
|
console.log(id);
|
|
|
|
|
cxlist.value.pop(id);
|
|
|
|
|
console.log(cxlist.value.length);
|
|
|
|
|
|
|
|
|
|
if (cxlist.value.length === 0) {
|
|
|
|
|
executevisible.value = false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
:deep(.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover) {
|
|
|
|
|
background-color: rgba(20, 41, 76, 1);
|
|
|
|
|
color: rgb(29, 83, 172);
|
|
|
|
|
}
|
|
|
|
|
:deep(.ant-transfer-list-header-selected) {
|
|
|
|
|
color: rgba(255, 83, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-transfer-list-header > *:not(:last-child)) {
|
|
|
|
|
color: rgba(255, 83, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tagtext {
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.light-tag {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 135px;
|
|
|
|
|
left: 450px;
|
|
|
|
|
width: 396px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background: rgba(0, 0, 0, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.light-tag-tit {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 18px;
|
|
|
|
|
margin-left: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.light-tag-box {
|
|
|
|
|
padding: 15px 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.light-tag-box > img {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 51px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.light-tag-box > span {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.titleimg,
|
|
|
|
|
.titletext {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-btn,
|
|
|
|
|
.light-btn {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.controlarea-btn,
|
|
|
|
|
.temp-btn {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-drawer-content) {
|
|
|
|
|
background-color: rgba(0, 0, 0, 1);
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.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: 60px;
|
|
|
|
|
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: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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: 8px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn2 {
|
|
|
|
|
button {
|
|
|
|
|
margin: 0 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.allbtn {
|
|
|
|
|
border: 0;
|
|
|
|
|
width: 40px;
|
|
|
|
|
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;
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
width: 21%;
|
|
|
|
|
padding: 0 2%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 > 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 {
|
|
|
|
|
border: none;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
letter-spacing: 0;
|
|
|
|
|
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;
|
|
|
|
|
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%;
|
|
|
|
|
max-height: calc(100% - 79px);
|
|
|
|
|
}
|
|
|
|
|
.lighting-img-box > img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100vh - 96px);
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.jbox {
|
|
|
|
|
background-color: #000;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
z-index: 99999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.journal {
|
|
|
|
|
padding: 3% 5%;
|
|
|
|
|
background-size: 450px 177px;
|
|
|
|
|
width: 482px;
|
|
|
|
|
height: 177px;
|
|
|
|
|
background-color: rgba(0, 0, 0);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
border: 2px solid transparent;
|
|
|
|
|
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgText {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
.ztzm {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cxbtn {
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.zmhlbtn {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.anticon-stop {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 3px;
|
|
|
|
|
bottom: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.istrindex {
|
|
|
|
|
background: rgba(67, 136, 251, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-modal-mask.ant-modal-content) {
|
|
|
|
|
height: 100vh;
|
|
|
|
|
position: fixed;
|
|
|
|
|
right: 496px;
|
|
|
|
|
top: 0%;
|
|
|
|
|
}
|
|
|
|
|
:deep(.ant-modal-content) {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
right: 500px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
