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