Browse Source

seal

master
maochaoying 2 years ago
parent
commit
7727b92523
  1. BIN
      src/assets/img/seal/dis_start.png
  2. BIN
      src/assets/img/seal/dis_stop.png
  3. BIN
      src/assets/img/seal/seal.png
  4. BIN
      src/assets/img/seal/start.png
  5. BIN
      src/assets/img/seal/starttest.png
  6. BIN
      src/assets/img/seal/stop.png
  7. BIN
      src/assets/img/seal/stoptest.png
  8. BIN
      src/assets/img/seal/test.png
  9. 158
      src/components/SealTest.vue
  10. 279
      src/components/SealTest_bak.vue
  11. 30
      src/pages/Home.vue

BIN
src/assets/img/seal/dis_start.png

After

Width: 341  |  Height: 110  |  Size: 7.1 KiB

BIN
src/assets/img/seal/dis_stop.png

After

Width: 341  |  Height: 110  |  Size: 6.2 KiB

BIN
src/assets/img/seal/seal.png

After

Width: 30  |  Height: 30  |  Size: 828 B

BIN
src/assets/img/seal/start.png

After

Width: 341  |  Height: 110  |  Size: 8.3 KiB

BIN
src/assets/img/seal/starttest.png

After

Width: 300  |  Height: 50  |  Size: 3.7 KiB

BIN
src/assets/img/seal/stop.png

After

Width: 341  |  Height: 110  |  Size: 6.9 KiB

BIN
src/assets/img/seal/stoptest.png

After

Width: 300  |  Height: 50  |  Size: 3.7 KiB

BIN
src/assets/img/seal/test.png

After

Width: 16  |  Height: 16  |  Size: 418 B

158
src/components/SealTest.vue

@ -0,0 +1,158 @@
<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 } 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'
const sealCharts = ref(null)
const sealOptions = ref({
series: [
{
type: 'gauge',
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: 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;
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>

279
src/components/SealTest_bak.vue

@ -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>

30
src/pages/Home.vue
File diff suppressed because it is too large
View File

Loading…
Cancel
Save