mt-fe-group/11-mes-new
12
0
Derivar 0
Código Questões Pedidos de integração Lançamentos Wiki Trabalho

update 实时产量和能耗

Ver a proveniência
Este cometimento está contido em:
lb 2022-11-23 09:29:47 +08:00
ascendente ec3e364117
cometimento 22dc4ff1d7
3 ficheiros modificados com 218 adições e 35 eliminações
Mostrar estatísticas Descarregar ficheiro patch Descarregar ficheiro diff Expandir todos os ficheiros Colapsar todos os ficheiros

2
src/views/3DOverview/components/LeftContentEquipmentCheck.vue
Ver ficheiro

@ -130,7 +130,7 @@ export default {
color: #fff9;
border: 0;
height: 100%;
overflow-y: auto;
/* overflow-y: auto; */
}
.el-table-wrapper >>> .el-table th.is-leaf,

2
src/views/3DOverview/components/RightContentAlert.vue
Ver ficheiro

@ -144,7 +144,7 @@ export default {
color: #fff9;
border: 0;
height: 100%;
overflow-y: auto;
/* overflow-y: auto; */
}
.el-table-wrapper >>> .el-table th.is-leaf,

249
src/views/3DOverview/components/RightContentRealtimeProduction.vue
Ver ficheiro

@ -1,27 +1,5 @@
<template>
<techy-box style="width: 100%; height: calc(100% - 36px);">
<!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
<!-- <new-bar
chart-name="realtime-cost-production"
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
:data-list="[
{
topColor: 'rgba(59, 76, 118, 0.2)',
bottomColor: '#49FBD6',
name: '产量',
data: [64, 91, 55, 65, 37, 77]
},
{
topColor: 'rgba(59, 76, 118, 0.2)',
bottomColor: '#31A2FF',
name: '能耗',
data: [32, 65, 65, 54, 37, 77]
}
]"
/> -->
<techy-bar :extra-space-between-zero="16" :datainfo="[
<!-- <techy-bar :extra-space-between-zero="16" :datainfo="[
{
name: '产量',
list: [64, 91, 55, 65, 37, 77]
@ -30,26 +8,231 @@
name: '能耗',
list: [32, 65, 65, 54, 37, 77]
}
]" />
</techy-box>
]" /> -->
<div class="techy-chart" ref="realtimeLineChart"></div>
</template>
<script>
import TechyBox from './TechyBox.vue'
// import newBar from './newBar.vue'
import TechyBar from './TechyBar.vue'
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'RealtimeProductionHorizontalBarChart',
components: { TechyBox, TechyBar },
props: {},
name: 'RealtimeLineChart',
mixins: [resize],
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
inject: ['resizeStatus'],
/** End Fn.1 */
props: {
id: {
type: String,
default: 'default-dian-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() {
return {}
}
const colors = ['#1A99FF', '#F0D63C', '#E02094']
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
let data = [
// 温度走势
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
}),
// 电流走势
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
}),
// 电压走势
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
})
]
let wendu = data[0]
let dianliu = data[1]
let dianya = data[2]
return {
chart: null,
option: {
color: colors,
legend: {
top: 28,
right: 40,
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#fff9',
fontSize: 10
}
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
},
grid: {
top: 80,
left: 88,
right: 24,
bottom: 32
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line',
axis: 'x'
},
extraCssText: "width: 100px !important;"
},
xAxis: [
{
type: 'category',
data: ['01:00', '02:00', '03:00', '04:00', '05:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
axisTick: { show: false },
axisLabel: {
color: '#fff9'
},
axisLine: {
lineStyle: {
color: '#fff3'
}
}
}
],
yAxis: [
{
name: '能耗 ',
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
type: 'value',
splitNumber: 4,
onZero: true,
position: 'left',
offset: 40,
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: '#5982B2',
width: 1
}
},
axisLabel: {
color: '#fff9',
fontSize: 10
},
splitLine: {
show: true,
lineStyle: {
color: '#fff3'
}
}
},
{
name: '产量 ',
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
type: 'value',
splitNumber: 4,
axisTick: { show: false },
onZero: true,
position: 'left',
offset: 0,
axisLine: {
show: true,
lineStyle: {
color: '#5982B2',
width: 1
}
},
axisLabel: {
color: '#fff9',
fontSize: 10
},
splitLine: {
show: true,
lineStyle: {
color: '#fff3'
}
}
}
],
series: [
{
name: '产线1',
type: 'line',
yAxisIndex: 0,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianliu,
symbol: 'none'
},
{
name: '产线2',
type: 'line',
yAxisIndex: 1,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianya,
symbol: 'none'
}
]
}
}
},
computed: {
shouldResize() {
return this.resizeStatus()
}
},
watch: {
shouldResize(val, oldVal) {
setTimeout(() => {
this.chart.resize()
}, 250)
}
},
mounted() {
this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
}
</script>
<style scoped>
.techy-chart {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}