|
@@ -9,73 +9,210 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="control-content" v-if="refresh">
|
|
|
- <div class="lamp-box" style="position: absolute;margin: 70px 0 0 20px;">
|
|
|
- <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid1 ? detail.params.solenoid1.lastvalue == 1 : false">{{ detail.params.solenoid1 && detail.params.solenoid1.paramname }}</Lamp>
|
|
|
- <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid2 ? detail.params.solenoid2.lastvalue == 1 : false">{{ detail.params.solenoid2 && detail.params.solenoid2.paramname }}</Lamp>
|
|
|
- <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid3 ? detail.params.solenoid3.lastvalue == 1 : false">{{ detail.params.solenoid3 && detail.params.solenoid3.paramname }}</Lamp>
|
|
|
- <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid4 ? detail.params.solenoid4.lastvalue == 1 : false">{{ detail.params.solenoid4 && detail.params.solenoid4.paramname }}</Lamp>
|
|
|
- <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid5 ? detail.params.solenoid5.lastvalue == 1 : false">{{ detail.params.solenoid5 && detail.params.solenoid5.paramname }}</Lamp>
|
|
|
- </div>
|
|
|
- <div class="map" :style="{transform:`scale(${calcSize})`}">
|
|
|
- <div style="display: inline-block;position: relative">
|
|
|
- <dataBlock
|
|
|
+ <div class="image-box">
|
|
|
+ <div class="full-screen">
|
|
|
+ <customBtn
|
|
|
+ :btnOptions="[{ label: wrapper ? '退出全屏' : '进入全屏' }]"
|
|
|
+ :btn="true"
|
|
|
+ style="width: 70px"
|
|
|
+ @clickBtn="clickBtn"
|
|
|
+ ></customBtn>
|
|
|
+ </div>
|
|
|
+ <div style="position: absolute; top: 13%; left: 2%">
|
|
|
+ <Lamp
|
|
|
+ bgStart="green"
|
|
|
+ bgEnd="rgb(0, 255, 0)"
|
|
|
+ style="margin-bottom: 1vh"
|
|
|
+ :isTrue="
|
|
|
+ detail.params.solenoid1
|
|
|
+ ? detail.params.solenoid1.lastvalue == 1
|
|
|
+ : false
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ detail.params.solenoid1 && detail.params.solenoid1.paramname
|
|
|
+ }}</Lamp
|
|
|
+ >
|
|
|
+ <Lamp
|
|
|
+ bgStart="green"
|
|
|
+ bgEnd="rgb(0, 255, 0)"
|
|
|
+ style="margin-bottom: 1vh"
|
|
|
+ :isTrue="
|
|
|
+ detail.params.solenoid2
|
|
|
+ ? detail.params.solenoid2.lastvalue == 1
|
|
|
+ : false
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ detail.params.solenoid2 && detail.params.solenoid2.paramname
|
|
|
+ }}</Lamp
|
|
|
+ >
|
|
|
+ <Lamp
|
|
|
+ bgStart="green"
|
|
|
+ bgEnd="rgb(0, 255, 0)"
|
|
|
+ style="margin-bottom: 1vh"
|
|
|
+ :isTrue="
|
|
|
+ detail.params.solenoid3
|
|
|
+ ? detail.params.solenoid3.lastvalue == 1
|
|
|
+ : false
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ detail.params.solenoid3 && detail.params.solenoid3.paramname
|
|
|
+ }}</Lamp
|
|
|
+ >
|
|
|
+ <Lamp
|
|
|
+ bgStart="green"
|
|
|
+ bgEnd="rgb(0, 255, 0)"
|
|
|
+ style="margin-bottom: 1vh"
|
|
|
+ :isTrue="
|
|
|
+ detail.params.solenoid4
|
|
|
+ ? detail.params.solenoid4.lastvalue == 1
|
|
|
+ : false
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ detail.params.solenoid4 && detail.params.solenoid4.paramname
|
|
|
+ }}</Lamp
|
|
|
+ >
|
|
|
+ <Lamp
|
|
|
+ bgStart="green"
|
|
|
+ bgEnd="rgb(0, 255, 0)"
|
|
|
+ :isTrue="
|
|
|
+ detail.params.solenoid5
|
|
|
+ ? detail.params.solenoid5.lastvalue == 1
|
|
|
+ : false
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ detail.params.solenoid5 && detail.params.solenoid5.paramname
|
|
|
+ }}</Lamp
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="stop" v-if="detail.isSite && detail.params.open">
|
|
|
+ <a-button class="a-but" @click="StopFun('open')" size="small">{{
|
|
|
+ detail.params.open && detail.params.open.paramname
|
|
|
+ }}</a-button>
|
|
|
+ <a-button class="a-but" @click="StopFun('close')" size="small">{{
|
|
|
+ detail.params.close && detail.params.close.paramname
|
|
|
+ }}</a-button>
|
|
|
+ <a-button class="a-but" @click="StopFun('stop')" size="small">{{
|
|
|
+ detail.params.stop && detail.params.stop.paramname
|
|
|
+ }}</a-button>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="dataBlock-box"
|
|
|
+ style="top: 5%; left: 15%; transform: scale(1.4)"
|
|
|
+ >
|
|
|
+ <dataBlock
|
|
|
v-if="detail.params.oilpressure"
|
|
|
- :top="-50"
|
|
|
- :left="40"
|
|
|
+ :top="0"
|
|
|
+ :left="0"
|
|
|
:data="[
|
|
|
- {title:detail.params.oilpressure.paramname,value:detail.params.oilpressure.lastvalue,unit:detail.params.oilpressure.unit},
|
|
|
- {title:detail.params.tanklevel.paramname,value:detail.params.tanklevel.lastvalue,unit:detail.params.tanklevel.unit},
|
|
|
- {title:detail.params.tanktemp.paramname,value:detail.params.tanktemp.lastvalue,unit:detail.params.tanktemp.unit}
|
|
|
+ {
|
|
|
+ title: detail.params.oilpressure.paramname,
|
|
|
+ value: detail.params.oilpressure.lastvalue,
|
|
|
+ unit: detail.params.oilpressure.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.tanklevel.paramname,
|
|
|
+ value: detail.params.tanklevel.lastvalue,
|
|
|
+ unit: detail.params.tanklevel.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.tanktemp.paramname,
|
|
|
+ value: detail.params.tanktemp.lastvalue,
|
|
|
+ unit: detail.params.tanktemp.unit,
|
|
|
+ },
|
|
|
]"
|
|
|
></dataBlock>
|
|
|
- <dataBlock
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="dataBlock-box"
|
|
|
+ style="top: 0%; right: 29.5%; transform: scale(1.2)"
|
|
|
+ >
|
|
|
+ <dataBlock
|
|
|
+ style="transform: scale(0.9)"
|
|
|
v-if="detail.params.closepressure"
|
|
|
- style="transform: scale(0.9);"
|
|
|
- :top="-50"
|
|
|
- :left="300"
|
|
|
:data="[
|
|
|
- {title:detail.params.closepressure.paramname,value:detail.params.closepressure.lastvalue,unit:detail.params.closepressure.unit},
|
|
|
- {title:detail.params.FMKQS120S.paramname,value:detail.params.FMKQS120S.lastvalue,unit:detail.params.FMKQS120S.unit},
|
|
|
- {title:detail.params.closetime.paramname,value:detail.params.closetime.lastvalue,unit:detail.params.closetime.unit},
|
|
|
- {title:detail.params.kv.paramname,value:detail.params.kv.lastvalue,unit:detail.params.kv.unit},
|
|
|
- {title:detail.params.flowresistance.paramname,value:detail.params.flowresistance.lastvalue,unit:detail.params.flowresistance.unit}
|
|
|
+ {
|
|
|
+ title: detail.params.closepressure.paramname,
|
|
|
+ value: detail.params.closepressure.lastvalue,
|
|
|
+ unit: detail.params.closepressure.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.FMKQS120S.paramname,
|
|
|
+ value: detail.params.FMKQS120S.lastvalue,
|
|
|
+ unit: detail.params.FMKQS120S.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.closetime.paramname,
|
|
|
+ value: detail.params.closetime.lastvalue,
|
|
|
+ unit: detail.params.closetime.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.kv.paramname,
|
|
|
+ value: detail.params.kv.lastvalue,
|
|
|
+ unit: detail.params.kv.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.flowresistance.paramname,
|
|
|
+ value: detail.params.flowresistance.lastvalue,
|
|
|
+ unit: detail.params.flowresistance.unit,
|
|
|
+ },
|
|
|
]"
|
|
|
></dataBlock>
|
|
|
- <dataBlock
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="dataBlock-box"
|
|
|
+ style="bottom: 28%; left: 2.2%; transform: scale(1.2)"
|
|
|
+ >
|
|
|
+ <dataBlock
|
|
|
v-if="detail.params.pipeflow"
|
|
|
- :top="200"
|
|
|
- :left="40"
|
|
|
:data="[
|
|
|
- {title:detail.params.pipeflow.paramname,value:detail.params.pipeflow.lastvalue,unit:detail.params.pipeflow.unit},
|
|
|
- {title:detail.params.position.paramname,value:detail.params.position.lastvalue,unit:detail.params.position.unit},
|
|
|
+ {
|
|
|
+ title: detail.params.pipeflow.paramname,
|
|
|
+ value: detail.params.pipeflow.lastvalue,
|
|
|
+ unit: detail.params.pipeflow.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.position.paramname,
|
|
|
+ value: detail.params.position.lastvalue,
|
|
|
+ unit: detail.params.position.unit,
|
|
|
+ },
|
|
|
]"
|
|
|
></dataBlock>
|
|
|
- <dataBlock
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="dataBlock-box"
|
|
|
+ style="bottom: 32%; right: 30%; transform: scale(1.5)"
|
|
|
+ >
|
|
|
+ <dataBlock
|
|
|
v-if="detail.params.flowspeed"
|
|
|
- :top="200"
|
|
|
- :left="300"
|
|
|
:data="[
|
|
|
- {title:detail.params.flowspeed.paramname,value:detail.params.flowspeed.lastvalue,unit:detail.params.flowspeed.unit},
|
|
|
- {title:detail.params.headloss.paramname,value:detail.params.headloss.lastvalue,unit:detail.params.headloss.unit},
|
|
|
+ {
|
|
|
+ title: detail.params.flowspeed.paramname,
|
|
|
+ value: detail.params.flowspeed.lastvalue,
|
|
|
+ unit: detail.params.flowspeed.unit,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: detail.params.headloss.paramname,
|
|
|
+ value: detail.params.headloss.lastvalue,
|
|
|
+ unit: detail.params.headloss.unit,
|
|
|
+ },
|
|
|
]"
|
|
|
></dataBlock>
|
|
|
- <div class="stop" v-if="detail.isSite && detail.params.open">
|
|
|
- <a-button @click="StopFun('open')" size="small">{{ detail.params.open && detail.params.open.paramname }}</a-button>
|
|
|
- <a-button @click="StopFun('close')" size="small">{{ detail.params.close && detail.params.close.paramname }}</a-button>
|
|
|
- <a-button @click="StopFun('stop')" size="small">{{ detail.params.stop && detail.params.stop.paramname }}</a-button>
|
|
|
- </div>
|
|
|
- <img :src="imgUrl" alt="">
|
|
|
- <div style="clear: both;"></div>
|
|
|
</div>
|
|
|
+ <img class="image" :src="imgUrl" alt="" />
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
<div class="chart">
|
|
|
- <MyChart :options="[{label:'阀门关闭起阀后压力',value:['closepressure'],sumShow:true}]"></MyChart>
|
|
|
- </div>
|
|
|
- <div class="message-header">
|
|
|
- <customBtn :btnOptions="[{label:wrapper ? '退出全屏' : '进入全屏'}]" :btn="true" style="width:70px" @clickBtn="clickBtn"></customBtn>
|
|
|
- <!-- <Message></Message> -->
|
|
|
+ <MyChart
|
|
|
+ :options="[
|
|
|
+ {
|
|
|
+ label: '阀门关闭起阀后压力',
|
|
|
+ value: ['closepressure'],
|
|
|
+ sumShow: true,
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ ></MyChart>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="control-right">
|
|
@@ -91,7 +228,7 @@ import MyChart from '../../modules/MyChart.vue'
|
|
|
import timeControl from './modules/statusContent.vue'
|
|
|
import controlPanel from './modules/controlPanel.vue'
|
|
|
import customBtn from '../../modules/customBtn.vue'
|
|
|
-import Lamp from '../../modules/lamp.vue'
|
|
|
+import Lamp from '../../modules/lamp-vw.vue'
|
|
|
import Message from '../../modules/message.vue'
|
|
|
import dataBlock from '../../modules/dataBlock.vue'
|
|
|
import updataBtn from '../../modules/updataBtn.vue'
|
|
@@ -119,10 +256,6 @@ let detail = ref('')
|
|
|
|
|
|
provide('detail',detail)
|
|
|
|
|
|
-let calcSize = ref(1)
|
|
|
-calcSizeFun((size) => {
|
|
|
- calcSize.value = size
|
|
|
-})
|
|
|
|
|
|
let imgUrl = computed(() => {
|
|
|
let arr = detail.value.attinfos.filter(item => item.usetype == 'previewImage')
|
|
@@ -257,40 +390,50 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.control .control-content {
|
|
|
- flex:1;
|
|
|
- height: 100%;
|
|
|
- padding: 0 10px;
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
+ width: 53vw;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
}
|
|
|
-.control .control-content .message-header {
|
|
|
+.control .control-content .image-box {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.control .control-content .full-screen {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- width: 100%;
|
|
|
- padding-left: 10px;
|
|
|
}
|
|
|
-.control .control-content .map {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh - 245px);
|
|
|
- position: relative;
|
|
|
+
|
|
|
+.control .control-content .image-box .stop {
|
|
|
+ position: absolute;
|
|
|
+ top: 5%;
|
|
|
+ right: 1.5%;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- width: 684px;
|
|
|
- padding: 10px 70px 0 70px;
|
|
|
- margin: auto;
|
|
|
}
|
|
|
-.control .control-content .map img {
|
|
|
- width: 100%;
|
|
|
- object-fit: scale-down;
|
|
|
- z-index: 1;
|
|
|
- margin-bottom: 30px;
|
|
|
+
|
|
|
+.control .control-content .image-box .a-but {
|
|
|
+ width: 3vw;
|
|
|
+ height: 1.8vw;
|
|
|
+ font-size: 0.8vw;
|
|
|
+}
|
|
|
+
|
|
|
+.dataBlock-box {
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+.image {
|
|
|
+ width: 80%;
|
|
|
+ height: 80%;
|
|
|
+ object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.control .control-content .chart {
|