|
|
@ -0,0 +1,279 @@ |
|
|
|
|
|
<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> |
maochaoying
2 years ago
