|
|
@@ -48,10 +48,10 @@
|
|
|
<span class="wl-subtitle">水位值</span>
|
|
|
<div class="wl-aside-main">
|
|
|
<div class="wl-aside-label">
|
|
|
- <span v-for="item in waterLevelNum">{{item}}mm</span>
|
|
|
+ <span v-show="item%500 === 0" v-for="item in waterLevelNum">{{item}}mm</span>
|
|
|
</div>
|
|
|
- <div class="wl-aside-axis">
|
|
|
- <div class="wl-axis-dragger">
|
|
|
+ <div id="water-axis" class="wl-aside-axis">
|
|
|
+ <div id="dragger-left" class="wl-axis-dragger">
|
|
|
<img src="@/assets/imgs/arrow-left.png" alt="">
|
|
|
<i></i>
|
|
|
</div>
|
|
|
@@ -62,14 +62,14 @@
|
|
|
<div class="wl-right">
|
|
|
<span class="wl-subtitle">时间轴</span>
|
|
|
<div class="wl-aside-main">
|
|
|
- <div class="wl-aside-axis">
|
|
|
- <div class="wl-axis-dragger">
|
|
|
+ <div id="time-axis" class="wl-aside-axis">
|
|
|
+ <div @mousedown="handleTimeDrag" id="dragger-right" class="wl-axis-dragger">
|
|
|
<i></i>
|
|
|
<img src="@/assets/imgs/arrow-right.png" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="wl-aside-label">
|
|
|
- <span v-for="item in waterLevelTime">{{item}}</span>
|
|
|
+ <span v-show="item%2 ===0" v-for="item in waterLevelTime">{{item}}:00</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -96,11 +96,55 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<script setup>
|
|
|
- import { onMounted, reactive, ref, computed, nextTick } from 'vue';
|
|
|
+ import { onMounted, reactive, ref, computed, nextTick, watch } from 'vue';
|
|
|
import { useNow, useDateFormat } from '@vueuse/core'
|
|
|
import { addResponseEventListener, callUIInteraction } from '@/webRtcVideo.js'
|
|
|
import { setWaterLevel } from '@/echarts/options'
|
|
|
|
|
|
+
|
|
|
+ const waterLevelNow = ref(450)
|
|
|
+ const waterLevelShow = ref(false)
|
|
|
+
|
|
|
+
|
|
|
+ // 水位时间条拖动时的处理函数
|
|
|
+ function handleTimeDrag(event) {
|
|
|
+ let timeDragger = document.getElementById('dragger-right')
|
|
|
+ let totalH = document.getElementById('time-axis').offsetHeight
|
|
|
+ event =event||window.event
|
|
|
+ let tp =event.clientY - timeDragger.offsetTop
|
|
|
+ let top = event.clientY-tp
|
|
|
+ timeDragger.onmousemove = function(event){
|
|
|
+ event =event||window.event
|
|
|
+ top = event.clientY-tp
|
|
|
+ if(top>-3 && top<totalH-22) {
|
|
|
+ timeDragger.style.top= top+"px"
|
|
|
+ }else {
|
|
|
+ timeDragger.onmousemove = null
|
|
|
+ handleTimeDragDone(parseInt(top/totalH*100))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ timeDragger.onmouseup= function(){
|
|
|
+ timeDragger.onmousemove = null
|
|
|
+ handleTimeDragDone(parseInt(top/totalH*100))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 水位时间条拖动完成时的处理函数
|
|
|
+ function handleTimeDragDone(perIn) {
|
|
|
+ let perOut = -perIn*perIn / 60 + 1.8*perIn + 20
|
|
|
+ let waterAxisH = document.getElementById('water-axis').offsetHeight-23
|
|
|
+ let height = perOut/100*waterAxisH
|
|
|
+ let waterLevelDragger = document.getElementById('dragger-left')
|
|
|
+ waterLevelDragger.style.bottom= parseInt(height) + 'px'
|
|
|
+ waterLevelNow.value = perOut*10
|
|
|
+ setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
|
|
|
+ toggleSwqk(parseInt(perOut*6+100))
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => [
|
|
|
+ setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
|
|
|
+ ])
|
|
|
+
|
|
|
const temperature = ref('32')
|
|
|
const humidity = ref('42.3')
|
|
|
const time = useDateFormat(useNow(), 'HH:mm')
|
|
|
@@ -139,7 +183,7 @@ export default {
|
|
|
dfmzStatus = !dfmzStatus
|
|
|
}
|
|
|
|
|
|
- const waterLevelShow = ref(false)
|
|
|
+
|
|
|
const waterLevelNum = computed(() => {
|
|
|
let arr = []
|
|
|
for(let i=2000; i<=5000; i+=200) {
|
|
|
@@ -152,15 +196,16 @@ export default {
|
|
|
for(let i=24; i>=1; i--) {
|
|
|
let a = ''
|
|
|
if(i<10) {
|
|
|
- a = '0'+i+':00'
|
|
|
+ a = '0'+i
|
|
|
}else {
|
|
|
- a = i+':00'
|
|
|
+ a = i
|
|
|
}
|
|
|
arr.push(a)
|
|
|
}
|
|
|
return arr
|
|
|
})
|
|
|
|
|
|
+
|
|
|
function handleToolClick(index) {
|
|
|
toolList[index].status = !toolList[index].status
|
|
|
let status = toolList[index].status
|
|
|
@@ -189,10 +234,10 @@ export default {
|
|
|
case 6:
|
|
|
if(status) {
|
|
|
waterLevelShow.value = true
|
|
|
+ swqkOn()
|
|
|
nextTick(() => {
|
|
|
- setWaterLevel(document.getElementById('wl-center'),[600])
|
|
|
+ setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
|
|
|
})
|
|
|
-
|
|
|
} else {
|
|
|
waterLevelShow.value = false
|
|
|
}
|
|
|
@@ -335,17 +380,13 @@ export default {
|
|
|
"Parameters":{ "x":230843,"y":-78457,"z":998,"roll_x":0,"roll_y":-20,"roll_z":64 }
|
|
|
}
|
|
|
callUIInteractionFormat(JSON.stringify(action1));
|
|
|
- let action2 = {
|
|
|
- "ActionName":"set_water_z",
|
|
|
- "Parameters":{ "water_z":1000 }
|
|
|
- }
|
|
|
- callUIInteractionFormat(action2);
|
|
|
+ toggleSwqk(374)
|
|
|
}
|
|
|
|
|
|
- function swqkOff() {
|
|
|
+ function toggleSwqk(param) {
|
|
|
let action = {
|
|
|
"ActionName":"set_water_z",
|
|
|
- "Parameters":{ "water_z":280 }
|
|
|
+ "Parameters":{ "water_z":param }
|
|
|
}
|
|
|
callUIInteractionFormat(action);
|
|
|
}
|
|
|
@@ -622,16 +663,16 @@ export default {
|
|
|
|
|
|
.water-level {
|
|
|
position: absolute;
|
|
|
- top: 15vh;
|
|
|
- left: 28vw;
|
|
|
- width: 468px;
|
|
|
- height: 523px;
|
|
|
+ bottom: -77vh;
|
|
|
+ right: 19vw;
|
|
|
+ width: 360px;
|
|
|
+ height: 370px;
|
|
|
background: rgba(0,38,77,0.5);
|
|
|
text-align: center;
|
|
|
|
|
|
.wl-title {
|
|
|
display: block;
|
|
|
- margin: 24px 0 27px;
|
|
|
+ margin: 14px 0 10px;
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
color: #FFFFFF;
|
|
|
@@ -639,15 +680,15 @@ export default {
|
|
|
|
|
|
.wl-main {
|
|
|
box-sizing: border-box;
|
|
|
- padding: 0 50px 35px;
|
|
|
+ padding: 0 20px 18px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- height: calc(100% - 75px);
|
|
|
+ height: calc(100% - 58px);
|
|
|
}
|
|
|
|
|
|
.wl-subtitle {
|
|
|
display: block;
|
|
|
- margin-bottom: 15px;
|
|
|
+ margin-bottom: 5px;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
color: transparent;
|
|
|
@@ -659,12 +700,12 @@ export default {
|
|
|
.wl-aside-main {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- height: calc(100% - 36px);
|
|
|
+ height: calc(100% - 26px);
|
|
|
}
|
|
|
|
|
|
.wl-aside-label {
|
|
|
box-sizing: border-box;
|
|
|
- padding: 5px 0;
|
|
|
+ padding-bottom: 2px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
@@ -688,9 +729,9 @@ export default {
|
|
|
|
|
|
.wl-axis-dragger {
|
|
|
position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 1px;
|
|
|
- width: 45px;
|
|
|
+ bottom: 40%;
|
|
|
+ right: 6px;
|
|
|
+ width: 40px;
|
|
|
height: 24px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -707,7 +748,6 @@ export default {
|
|
|
.wl-left {
|
|
|
width: 35%;
|
|
|
box-sizing: border-box;
|
|
|
- padding-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -719,7 +759,7 @@ export default {
|
|
|
width: 28%;
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
- padding-left: 10px;
|
|
|
+ padding-left: 8px;
|
|
|
|
|
|
.wl-subtitle {
|
|
|
text-align: left;
|
|
|
@@ -730,13 +770,10 @@ export default {
|
|
|
background-size: contain;
|
|
|
}
|
|
|
|
|
|
- .wl-aside-label>span {
|
|
|
- line-height: 12px;
|
|
|
- }
|
|
|
-
|
|
|
.wl-axis-dragger {
|
|
|
cursor: pointer;
|
|
|
- left: 1px;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
}
|
|
|
|
|
|
}
|
