maochaoying
2 years ago
4 changed files with 577 additions and 336 deletions
-
234src/components/SealTest bak.vue
-
382src/components/SealTest.vue
-
279src/components/SealTest_bak.vue
-
18src/store/modules/seal.js
@ -0,0 +1,234 @@ |
|||
<template> |
|||
<div class="seal_test_container"> |
|||
<div class="title_wrap"> |
|||
<img class="icon" :src="SealPng" alt="" /> |
|||
<div class="title">实时压力表</div> |
|||
</div> |
|||
<div class="echarts_box" id="seal_echarts"></div> |
|||
<div class="oper_box"> |
|||
<img class="air_img" :src="StopAir" alt="" /> |
|||
<img class="air_img" :src="StartAir" alt="" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import * as echarts from 'echarts' |
|||
import { ref, onMounted, onBeforeUnmount } from 'vue' |
|||
import SealPng from '@/assets/img/seal/seal.png' |
|||
import StartAir from '@/assets/img/seal/start.png' |
|||
import StopAir from '@/assets/img/seal/stop.png' |
|||
import DisStart from '@/assets/img/seal/dis_start.png' |
|||
import DisStop from '@/assets/img/seal/dis_stop.png' |
|||
import { useSealStore } from '@/store' |
|||
|
|||
const sealStore = useSealStore() |
|||
|
|||
const sealCharts = ref(null) |
|||
const sealOptions = ref({ |
|||
series: [ |
|||
{ |
|||
type: 'gauge', |
|||
min: 0, |
|||
max: 800, |
|||
progress: { |
|||
show: true, |
|||
width: 18, |
|||
itemStyle: { |
|||
color: '#3442aa', |
|||
}, |
|||
}, |
|||
pointer: { |
|||
itemStyle: { |
|||
color: '#3442aa', |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
width: 18, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
length: 15, |
|||
lineStyle: { |
|||
width: 2, |
|||
color: '#999', |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
distance: 25, |
|||
color: '#999', |
|||
fontSize: 20, |
|||
}, |
|||
anchor: { |
|||
show: true, |
|||
showAbove: true, |
|||
size: 25, |
|||
itemStyle: { |
|||
borderWidth: 10, |
|||
borderColor: '#3442aa', |
|||
}, |
|||
}, |
|||
title: { |
|||
show: false, |
|||
}, |
|||
detail: { |
|||
valueAnimation: true, |
|||
fontSize: 40, |
|||
color: '#3442aa', |
|||
formatter: '{value} KPa', |
|||
offsetCenter: [0, '70%'], |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: sealStore.currentAirPressure, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}) |
|||
|
|||
const timer = ref(null) |
|||
onBeforeUnmount(() => { |
|||
timer.value = null |
|||
}) |
|||
onMounted(() => { |
|||
sealCharts.value = echarts.init(document.getElementById('seal_echarts')) |
|||
sealCharts.value.setOption(sealOptions.value) |
|||
timer.value = setInterval(() => { |
|||
sealCharts.value.setOption({ |
|||
series: [ |
|||
{ |
|||
type: 'gauge', |
|||
min: 0, |
|||
max: 800, |
|||
progress: { |
|||
show: true, |
|||
width: 18, |
|||
itemStyle: { |
|||
color: '#3442aa', |
|||
}, |
|||
}, |
|||
pointer: { |
|||
itemStyle: { |
|||
color: '#3442aa', |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
width: 18, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
length: 15, |
|||
lineStyle: { |
|||
width: 2, |
|||
color: '#999', |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
distance: 25, |
|||
color: '#999', |
|||
fontSize: 20, |
|||
}, |
|||
anchor: { |
|||
show: true, |
|||
showAbove: true, |
|||
size: 25, |
|||
itemStyle: { |
|||
borderWidth: 10, |
|||
borderColor: '#3442aa', |
|||
}, |
|||
}, |
|||
title: { |
|||
show: false, |
|||
}, |
|||
detail: { |
|||
valueAnimation: true, |
|||
fontSize: 40, |
|||
color: '#3442aa', |
|||
formatter: '{value} KPa', |
|||
offsetCenter: [0, '70%'], |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: sealStore.currentAirPressure, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}) |
|||
}, 1000) |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.seal_test_container { |
|||
margin-bottom: 19px; |
|||
height: 580px; |
|||
box-sizing: border-box; |
|||
border-radius: 16px; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 30px; |
|||
width: 1220px; |
|||
height: 580px; |
|||
box-sizing: border-box; |
|||
border-radius: 16px; |
|||
background: #ffffff; |
|||
position: relative; |
|||
.title_wrap { |
|||
position: absolute; |
|||
left: 28px; |
|||
top: 28px; |
|||
width: 141px; |
|||
height: 31px; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
.title { |
|||
font-family: 思源黑体; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.02em; |
|||
font-feature-settings: 'kern' on; |
|||
color: #000000; |
|||
margin-left: 9px; |
|||
} |
|||
.icon { |
|||
width: 30px; |
|||
height: 30px; |
|||
} |
|||
} |
|||
.oper_box { |
|||
position: absolute; |
|||
left: 28px; |
|||
bottom: 28px; |
|||
width: 1164px; |
|||
box-sizing: border-box; |
|||
padding: 0 120px; |
|||
height: 110px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.air_img { |
|||
width: 341px; |
|||
height: 110px; |
|||
} |
|||
} |
|||
.echarts_box { |
|||
height: 580px; |
|||
position: absolute; |
|||
left: 0; |
|||
top: -36px; |
|||
width: 1220px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,279 +0,0 @@ |
|||
<template> |
|||
<div class="seal_test_container"> |
|||
<div class="left_container"> |
|||
<div class="title_wrap"> |
|||
<img class="icon" :src="SealPng" alt="" /> |
|||
<div class="title">实时压力表</div> |
|||
</div> |
|||
<div class="echarts_box" id="seal_echarts"></div> |
|||
<div class="oper_box"> |
|||
<div class="air_box"> |
|||
<p class="box"></p> |
|||
<p class="tit">测试前气压</p> |
|||
<p class="num">--KPa</p> |
|||
</div> |
|||
<img class="air_img" :src="StartAir" alt="" /> |
|||
</div> |
|||
</div> |
|||
<div class="right_container"> |
|||
<div class="header"> |
|||
<div class="left"> |
|||
<img :src="TestIcon" class="icon" alt="" /> |
|||
<p class="title">密封测试</p> |
|||
</div> |
|||
<p class="en">SEAL</p> |
|||
</div> |
|||
<div class="oper_box"> |
|||
<div class="emp_box"></div> |
|||
<div class="emp_box"></div> |
|||
<img :src="StartTest" class="test_png" alt="" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import * as echarts from 'echarts' |
|||
import { ref, onMounted } from 'vue' |
|||
import SealPng from '@/assets/img/seal/seal.png' |
|||
import StartAir from '@/assets/img/seal/start.png' |
|||
import TestIcon from '@/assets/img/seal/test.png' |
|||
import StartTest from '@/assets/img/seal/starttest.png' |
|||
import StopTest from '@/assets/img/seal/stoptest.png' |
|||
import StopAir from '@/assets/img/seal/stop.png' |
|||
|
|||
const sealCharts = ref(null) |
|||
const sealOptions = ref({ |
|||
series: [ |
|||
{ |
|||
type: 'gauge', |
|||
progress: { |
|||
show: true, |
|||
width: 18, |
|||
itemStyle: { |
|||
color: 'red', |
|||
}, |
|||
}, |
|||
pointer: { |
|||
itemStyle: { |
|||
color: 'red', |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
width: 18, |
|||
color: [[1, '#ffd1d1']], |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
length: 15, |
|||
lineStyle: { |
|||
width: 2, |
|||
color: '#999', |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
distance: 25, |
|||
color: '#999', |
|||
fontSize: 20, |
|||
}, |
|||
anchor: { |
|||
show: true, |
|||
showAbove: true, |
|||
size: 25, |
|||
itemStyle: { |
|||
borderWidth: 10, |
|||
borderColor: 'red', |
|||
}, |
|||
}, |
|||
title: { |
|||
show: false, |
|||
}, |
|||
detail: { |
|||
valueAnimation: true, |
|||
fontSize: 40, |
|||
color: 'red', |
|||
formatter: '{value} KPa', |
|||
offsetCenter: [0, '70%'], |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: 68, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}) |
|||
|
|||
onMounted(() => { |
|||
sealCharts.value = echarts.init(document.getElementById('seal_echarts')) |
|||
sealCharts.value.setOption(sealOptions.value) |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.seal_test_container { |
|||
margin-bottom: 19px; |
|||
height: 580px; |
|||
box-sizing: border-box; |
|||
border-radius: 16px; |
|||
display: flex; |
|||
align-items: center; |
|||
.left_container { |
|||
margin-right: 30px; |
|||
width: 766px; |
|||
height: 580px; |
|||
box-sizing: border-box; |
|||
border-radius: 16px; |
|||
background: #ffffff; |
|||
position: relative; |
|||
.title_wrap { |
|||
position: absolute; |
|||
left: 28px; |
|||
top: 28px; |
|||
width: 141px; |
|||
height: 31px; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
.title { |
|||
font-family: 思源黑体; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.02em; |
|||
font-feature-settings: 'kern' on; |
|||
color: #000000; |
|||
margin-left: 9px; |
|||
} |
|||
.icon { |
|||
width: 30px; |
|||
height: 30px; |
|||
} |
|||
} |
|||
.oper_box { |
|||
position: absolute; |
|||
left: 28px; |
|||
bottom: 28px; |
|||
width: 710px; |
|||
height: 110px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.air_img { |
|||
width: 341px; |
|||
height: 110px; |
|||
} |
|||
.air_box { |
|||
width: 341px; |
|||
height: 110px; |
|||
border-radius: 16px; |
|||
background: #f6f6f6; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.box { |
|||
width: 16px; |
|||
height: 16px; |
|||
background: #4359b9; |
|||
margin-right: 6px; |
|||
} |
|||
.tit { |
|||
font-family: 思源黑体; |
|||
font-size: 20px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
letter-spacing: 0.06em; |
|||
font-feature-settings: 'kern' on; |
|||
color: #3d3d3d; |
|||
margin-right: 8px; |
|||
} |
|||
.num { |
|||
font-family: Source Han Sans; |
|||
font-size: 30px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.06em; |
|||
font-feature-settings: 'kern' on; |
|||
color: #4359b9; |
|||
} |
|||
} |
|||
} |
|||
.echarts_box { |
|||
height: 580px; |
|||
position: absolute; |
|||
left: 0; |
|||
top: -36px; |
|||
width: 100%; |
|||
} |
|||
} |
|||
.right_container { |
|||
height: 580px; |
|||
box-sizing: border-box; |
|||
border-radius: 16px; |
|||
background: #ffffff; |
|||
flex: 1; |
|||
padding: 32px 42px; |
|||
.header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
width: 340px; |
|||
height: 45px; |
|||
border-radius: 245px; |
|||
background: #06518b; |
|||
padding-left: 17px; |
|||
padding-right: 24px; |
|||
margin-bottom: 20px; |
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
.icon { |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
.title { |
|||
font-family: 思源黑体; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
letter-spacing: 0.1em; |
|||
margin-left: 9px; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
.en { |
|||
font-family: 思源黑体; |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
letter-spacing: 0.1em; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
.oper_box { |
|||
width: 340px; |
|||
height: 455px; |
|||
border-radius: 16px; |
|||
background: #f6f6f6; |
|||
box-sizing: border-box; |
|||
padding: 20px; |
|||
.emp_box { |
|||
width: 300px; |
|||
height: 162px; |
|||
border-radius: 12px; |
|||
background: #fff; |
|||
margin-bottom: 20px; |
|||
} |
|||
.test_png { |
|||
width: 300px; |
|||
height: 50px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue