342 lines
8.7 KiB
Vue
342 lines
8.7 KiB
Vue
<template>
|
||
<div class="r-box-container">
|
||
<div class="pos-label">
|
||
<div class="box-item">{{ tLang('messages', 'RackNum') }}：<div>{{ props.data?.label }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="box-item pos1">
|
||
{{ tLang('messages', 'DevStatus') }}:
|
||
<div class="status" :class="[statusObj[props.data?.workingState]]"></div>
|
||
</div>
|
||
<div class="icon-box-item pos2">
|
||
<div class="icon-div">
|
||
<div class="iconfont icon-caijian"></div>
|
||
|
||
<div>{{ props.data?.in3Count + tLang('messages','次') }}</div>
|
||
</div>
|
||
<span>{{ tLang('messages', '剪线次数') }}</span>
|
||
</div>
|
||
<div class="icon-box-item pos3">
|
||
<div class="icon-div">
|
||
<div class="iconfont icon-jizhenzhenshu"></div>
|
||
<div>{{ props.data?.in4Count + tLang('messages','次') }}</div>
|
||
</div>
|
||
<span>{{ tLang('messages', '针数') }}</span>
|
||
</div>
|
||
<div class="icon-box-item pos4">
|
||
<div class="icon-div">
|
||
<div class="iconfont icon-zidongtaiyajiao"></div>
|
||
<div>{{ props.data?.in2Count + tLang('messages','次') }}</div>
|
||
</div>
|
||
<span>{{ tLang('messages', '压脚次数') }}</span>
|
||
</div>
|
||
<v-chart class="chart-class" :option="gauge_option"></v-chart>
|
||
<div class="image-div">
|
||
<el-image :src="gyfrjImg" fit="contain"></el-image>
|
||
</div>
|
||
<div class="fill-box">
|
||
<v-chart class="chart-class-fill" :option="fill_option"></v-chart>
|
||
<data value="fill-title">{{ tLang('messages','能耗') }}(kW·h)</data>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang='ts'>
|
||
import { ref, getCurrentInstance } from 'vue'
|
||
import 'echarts-liquidfill'
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
let gyfrjImg = require('./../images/gyfrj.png');
|
||
const props = defineProps<{
|
||
data: any,
|
||
}>()
|
||
|
||
let statusObj = {
|
||
0:'red',
|
||
1:'yello',
|
||
2:'green',
|
||
3:'yello'
|
||
}
|
||
let gauge_option = ref({
|
||
series: [
|
||
{
|
||
type: 'gauge',
|
||
radius: '100%',
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
min: 0,
|
||
max: 3000,
|
||
splitNumber: 8,
|
||
itemStyle: {
|
||
color: '#58D9F9',
|
||
shadowColor: 'rgba(0,138,255,0.45)',
|
||
shadowBlur: 5,
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 2
|
||
},
|
||
progress: {
|
||
show: true,
|
||
roundCap: true,
|
||
width: 8
|
||
},
|
||
pointer: {
|
||
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
|
||
length: '60%',
|
||
width: 5,
|
||
offsetCenter: [0, '5%']
|
||
},
|
||
axisLine: {
|
||
roundCap: true,
|
||
lineStyle: {
|
||
width: 8
|
||
}
|
||
},
|
||
axisTick: {
|
||
splitNumber: 2,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
length: 1,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#999'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
distance: 20,
|
||
color: '#999',
|
||
fontSize: 8
|
||
},
|
||
title: {
|
||
show: false
|
||
},
|
||
detail: {
|
||
backgroundColor: '#fff',
|
||
borderColor: '#999',
|
||
borderWidth: 2,
|
||
width: '80%',
|
||
lineHeight: 24,
|
||
height: 20,
|
||
borderRadius: 8,
|
||
offsetCenter: [0, '35%'],
|
||
valueAnimation: true,
|
||
formatter: function (value) {
|
||
return '{value|' + value.toFixed(0) + '}{unit|rpm}';
|
||
},
|
||
rich: {
|
||
value: {
|
||
fontSize: 14,
|
||
fontWeight: 'bolder',
|
||
color: '#777'
|
||
},
|
||
unit: {
|
||
fontSize: 12,
|
||
color: '#999',
|
||
padding: [0, 0, -1, 1]
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
value: 1000
|
||
}
|
||
]
|
||
}
|
||
]
|
||
})
|
||
let fill_option = ref({
|
||
series: [{
|
||
type: 'liquidFill',
|
||
radius: '80%', //水球大小
|
||
shape: 'rect',
|
||
center: ['50%', '50%'],
|
||
waveAnimation: true,
|
||
color: [
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#138FE2',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#126ABC',
|
||
},
|
||
],
|
||
globalCoord: false,
|
||
},
|
||
],
|
||
data: [0.7, 0.7], // data个数代表波浪数
|
||
amplitude: 10, //振幅
|
||
backgroundStyle: {
|
||
borderWidth: 2, //边框大小
|
||
borderColor: 'rgba(17, 94, 176, 0.8)',//边框颜色
|
||
color: 'rgba(17, 94, 176, 0.4)',
|
||
},
|
||
label: {
|
||
normal: {
|
||
textStyle: {
|
||
fontSize: 24,
|
||
fontWeight: 'bold',
|
||
color: '#fff',
|
||
},
|
||
formatter: function (params) {
|
||
|
||
return props.data?.consumption;
|
||
}
|
||
},
|
||
|
||
},
|
||
outline: {
|
||
borderDistance: 0,
|
||
itemStyle: {
|
||
borderWidth: 4,
|
||
borderColor: 'transparent',
|
||
},
|
||
},
|
||
}],
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import url("@/assets/css/iconfont/germany/iconfont.css");
|
||
|
||
.r-box-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
|
||
.pos-label {
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 26px;
|
||
width: 50%;
|
||
height: 30px;
|
||
|
||
.box-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
|
||
div {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-item {
|
||
position: absolute;
|
||
width: 50%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
div {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.icon-div {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.icon-box-item {
|
||
position: absolute;
|
||
width: 50%;
|
||
|
||
div {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
span {
|
||
text-align: center;
|
||
}
|
||
|
||
.icon-div {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.chart-class {
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 60px;
|
||
width: 364px;
|
||
height: 250px;
|
||
}
|
||
|
||
.fill-box {
|
||
position: absolute;
|
||
right: 0px;
|
||
bottom: 13px;
|
||
width: 180px;
|
||
height: 220px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.chart-class-fill {
|
||
width: 180px;
|
||
height: 220px;
|
||
}
|
||
.fill-title {
|
||
|
||
}
|
||
}
|
||
|
||
|
||
.image-div {
|
||
position: absolute;
|
||
right: 157px;
|
||
top: 242px;
|
||
width: 216px;
|
||
height: 138px;
|
||
}
|
||
|
||
.pos1 {
|
||
top: 100px;
|
||
left: 24px;
|
||
}
|
||
|
||
.pos2 {
|
||
top: 140px;
|
||
left: 0;
|
||
}
|
||
|
||
.pos3 {
|
||
top: 312px;
|
||
left: -33px;
|
||
}
|
||
|
||
.pos4 {
|
||
bottom: 14px;
|
||
left: 163px;
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 100px;
|
||
color: #7BFEB1;
|
||
}
|
||
}
|
||
</style>
|