代码调整

This commit is contained in:
joylink_cuiweidong 2021-09-06 16:55:16 +08:00
parent 8fc7907f42
commit 648d04f0b4

View File

@ -1,38 +1,53 @@
<template>
<div v-if="isShowBtn" id="menuButtons_box" class="menu menuButton" :style="{left: point.x+'px', top: point.y+'px' }">
<!-- style="height: 45px;" -->
<button :id="Switch.locate.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.locate.button.operation)">
<span class="buttonColor">总定</span>
</button>
<button :id="Switch.reverse.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.reverse.button.operation)">
<span class="buttonColor">总反</span>
</button>
<button :id="Switch.lock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.lock.button.operation)">
<span class="buttonColor">单锁</span>
</button>
<button :id="Switch.unlock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.unlock.button.operation)">
<span class="buttonColor">单解</span>
</button>
<button :id="Switch.block.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.block.button.operation)">
<span class="buttonColor">岔封</span>
</button>
<button :id="Switch.unblock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.unblock.button.operation)">
<span class="buttonColor">岔解</span>
</button>
<button :id="Signal.lock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.lock.button.operation)">
<span class="buttonColor">钮封</span>
</button>
<button :id="Signal.unlock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.unlock.button.operation)">
<span class="buttonColor">钮解</span>
</button>
<button :id="Command.cancel.clearMbm.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Command.cancel.clearMbm.operation)">
<span class="buttonColor">取消</span>
</button>
<button :id="Section.fault.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor,color:'#DA2D29'}" @click="buttonDown(Section.fault.button.operation)">
<span class="buttonColor">区解</span>
</button>
<div v-if="isShowBtn">
<div id="menuButtons_box" class="menu menuButton" :style="{left: point.x+'px', top: point.y+'px' }">
<!-- style="height: 45px;" -->
<button :id="Switch.locate.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.locate.button.operation)">
<span class="buttonColor">总定</span>
</button>
<button :id="Switch.reverse.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.reverse.button.operation)">
<span class="buttonColor">总反</span>
</button>
<button :id="Switch.lock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.lock.button.operation)">
<span class="buttonColor">单锁</span>
</button>
<button :id="Switch.unlock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.unlock.button.operation)">
<span class="buttonColor">单解</span>
</button>
<button :id="Switch.block.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.block.button.operation)">
<span class="buttonColor">岔封</span>
</button>
<button :id="Switch.unblock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.unblock.button.operation)">
<span class="buttonColor">岔解</span>
</button>
<button :id="Signal.lock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.lock.button.operation)">
<span class="buttonColor">钮封</span>
</button>
<button :id="Signal.unlock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.unlock.button.operation)">
<span class="buttonColor">钮解</span>
</button>
<button :id="Command.cancel.clearMbm.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Command.cancel.clearMbm.operation)">
<span class="buttonColor">取消</span>
</button>
<button :id="Section.fault.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor,color:'#DA2D29'}" @click="buttonDown(Section.fault.button.operation)">
<span class="buttonColor">区解</span>
</button>
</div>
<div id="menuButton">
<div class="promptInfo">
<span class="status_lable">提示<br>信息</span>
<span class="status_detailInfo" style="color: #FD00F4;">{{ promptInfo }}</span>
</div>
<div class="alamMessage">
<span class="status_lable">报警<br>信息</span>
<span class="status_detailInfo" style="color: #E61013;">{{ alamMessage }}</span>
</div>
<div class="delayTime">
<span class="status_lable">延时<br>时间</span>
<span class="status_detailInfo" style="color: #E61013;">{{ delayTime }}</span>
</div>
</div>
<password-box ref="password" pop-class="fuzhou-01__systerm" @checkOver="passWordCommit" />
<!-- @checkOver="passWordCommit" -->
</div>
</template>
<script>
@ -53,6 +68,9 @@ export default {
y: 0
},
operation: '0',
delayTime:'',
promptInfo:'',
alamMessage:'',
deviceList: [],
buttonDownColor: '#A8A8A8',
buttonUpColor: '#F0F0F0',
@ -88,6 +106,7 @@ export default {
updateButtonShow(val, old) {
if (old) {
//
this.promptInfo = '';
const domId = OperationHandler.getDomIdByOperation(old);
const dom = document.getElementById(domId);
if (dom) {
@ -100,6 +119,7 @@ export default {
const domId = OperationHandler.getDomIdByOperation(val);
const dom = document.getElementById(domId);
if (dom) {
this.promptInfo = dom.innerText;
dom.disabled = true;
dom.style.backgroundColor = this.buttonDownColor;
}
@ -227,5 +247,44 @@ export default {
background-color: $hoverBg;
}
}
#menuButton{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 2;
background: #F0F0F0;
box-shadow: 0px -3px 6px #909090;
}
.promptInfo{
width: 33%;
float: left;
font-size:15px;
padding:5px 0px;
padding-left:10px;
}
.alamMessage{
width: 33%;
float: left;
font-size:15px;
padding:5px 0px;
}
.delayTime{
font-size:15px;
padding:5px 0px;
}
.status_lable{
color: #1815B1;
display: inline-block;
}
.status_detailInfo{
margin-left: 10px;
display: inline-block;
vertical-align: top;
margin-top: 10px;
font-size: 16px;
font-weight: bold;
letter-spacing: 3px;
}
</style>