mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

1.4

Browse Source
This commit is contained in:
朱菊兰
2024-01-04 16:37:14 +08:00
parent da2999e67c
commit 6ea650e7eb
33 changed files with 1236 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/databoard/components/Container.vue
View File

@@ -55,6 +55,24 @@ export default {
return require('../assets/msg.png');
case '烟气处理':
return require('../assets/gas.png');
case '产线缺陷统计':
return require('../assets/defectStatistics.png');
case '产线当日缺陷分类':
return require('../assets/check.png');
case '本日生产良品率':
return require('../assets/goodRate.png');
case '订单完成情况':
return require('../assets/order.png');
case '设备报警':
return require('../assets/goodRate.png');
case '各工序缺陷汇总':
return require('../assets/check.png');
case '能源监控':
return require('../assets/defectStatistics.png');
case '产线产量及良品率':
return require('../assets/order.png');
case '工单监控':
return require('../assets/eqMonitor.png');
}
},
},

216
src/views/databoard/components/DefectChart.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<div class="defect-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'DefectChart',
mixins: [resize],
props: {
chartTime: ''
},
data() {
return {
chart: null,
tempData: []
}
},
computed: {
israDayStatistic() {
return this.$store.state.websocket.israDayStatistic
},
israWeekStatistic() {
return this.$store.state.websocket.israWeekStatistic
},
israMonthStatistic() {
return this.$store.state.websocket.israMonthStatistic
},
israYearStatistic() {
return this.$store.state.websocket.israYearStatistic
}
},
watch: {
israDayStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '日') {
this.tempData = israDayStatistic
this.updateChart()
}
}
},
israWeekStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '周') {
this.tempData = israWeekStatistic
this.updateChart()
}
}
},
israMonthStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '月') {
this.tempData = israMonthStatistic
this.updateChart()
}
}
},
israYearStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '年') {
this.tempData = israYearStatistic
this.updateChart()
}
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
let legendData = []
let xData = []
let yData = []
this.tempData && this.tempData.length > 0 && this.tempData.map(item => {
xData.push(item.name)
})
var series = [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
stack: 'all',
name: 'a',
barWidth: 12,
},
{
data: [10, 46, 64, '-', 0, '-', 0],
type: 'bar',
stack: 'all',
name: 'b',
barWidth: 12,
},
{
data: [30, '-', 0, 20, 10, '-', 0],
type: 'bar',
stack: 'all',
barWidth: 12,
name: 'c'
},
{
data: [30, '-', 0, 20, 10, '-', 0],
type: 'bar',
stack: 'all',
barWidth: 12,
name: 'd'
},
{
data: [10, 20, 150, 0, '-', 50, 10],
type: 'bar',
stack: 'all',
name: 'e',
barWidth: 12,
label: {
show: true,
position: 'top'
}
}
];
var option = {
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
grid: { top: 40, right: 12, bottom: 20, left: 48 },
legend: {
top: 10,
left: 80,
padding: 5,
itemWidth: 12,
itemHeight: 12,
itemGap: 12,
height: 12,
textStyle: {
color: "#DFF1FE",
fontSize: 12,
},
data:['a','b','c','d','e'],
},
xAxis: {
type: "category",
data: xData,
axisLabel: {
color: "#fffc",
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
},
},
yAxis: {
name: "单位/个",
nameTextStyle: {
color: "#fff",
fontSize: 10,
align: "right",
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value}",
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
},
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "defect-chart-tooltip"
},
series: series
};
option && this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.defect-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.defect-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.defect-chart-tooltip * {
color: #fff !important;
}
</style>

170
src/views/databoard/components/DefectClassChart.vue Normal file
View File

@@ -0,0 +1,170 @@
<template>
<div class="defect-class-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'DefectClassChart',
mixins: [resize],
props: {
chartType: ''
},
data() {
return {
chart: null
}
},
computed: {
israDayStatistic() {
return this.$store.state.websocket.israDayStatistic
}
},
watch:{
israDayStatistic: {
handler(newVal, oldVal) {
if (newVal === oldVal) {
return false
}
this.updateChart()
}
},
chartType: {// 监听类型变化，更新图
handler(newVal, oldVal) {
this.updateChart()
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
let tempData = []
let xData = []
let yData = []
this.israDayStatistic && this.israDayStatistic.length > 0 && this.israDayStatistic.map(item => {
if (this.chartType === item.name) {
tempData = item.data
return
}
})
tempData.length > 0 && tempData.map(item => {
xData.push(item.checkType)
yData.push(item.checkNum)
})
var option = {
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
grid: { top: 40, right: 12, bottom: 80, left: 60 },
// legend: {
// top: 10,
// left: 80,
// padding: 5,
// itemWidth: 12,
// itemHeight: 12,
// itemGap: 12,
// height: 12,
// textStyle: {
// color: "#DFF1FE",
// fontSize: 12,
// },
// data:['a','b','c','d','e'],
// },
xAxis: {
type: "category",
data: xData,
axisLabel: {
color: "#fffc",
fontSize: 12,
rotate: 45
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
},
},
yAxis: {
name: "单位/次",
nameTextStyle: {
color: "#fff",
fontSize: 10,
align: "right",
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value}",
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
},
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "defect-chart-tooltip"
},
series: [
{
data: yData,
type: 'bar',
barWidth: 12,
label: {
show: true,
position: 'top'
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5CB7FF' },
{ offset: 1, color: '#364BFE' }
])
},
}
]
};
option && this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.defect-class-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.defect-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.defect-chart-tooltip * {
color: #fff !important;
}
</style>

157
src/views/databoard/components/EnergeMonitoringChart.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<div class="energe-monitoring-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'EnergeMonitoringChart',
mixins: [resize],
data() {
return {
chart: null
}
},
computed: {
energyMonitoring() {
return this.$store.state.websocket.energyMonitoring
}
},
watch:{
energyMonitoring: {
handler(newVal, oldVal) {
if (newVal === oldVal) {
return false
}
this.updateChart()
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
let xData = []
let yData = []
this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
xData.push(item.lineName)
yData.push(item.useQuantity)
})
var option = option = {
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
grid: { top: 32, right: 12, bottom: 20, left: 60 },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
className: "energe-monitoring-chart-tooltip"
},
legend: {
data: ['电耗能'],
textStyle: {
color: "#DFF1FE",
fontSize: 12,
}
},
xAxis: [
{
type: 'category',
data: xData,
axisPointer: {
type: 'shadow'
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
}
}
],
yAxis: [
{
type: 'value',
name: '单位',
// min: 0,
// max: 250,
// interval: 50,
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: '{value}'
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
},
}
}
],
series: [
{
name: '电耗能',
type: 'bar',
// barWidth: 12,
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5CB7FF' },
{ offset: 1, color: '#364BFE' }
])
},
data: yData
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.energe-monitoring-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.energe-monitoring-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.energe-monitoring-chart-tooltip * {
color: #fff !important;
}
</style>

87
src/views/databoard/components/GasChart.vue
View File

@@ -51,27 +51,34 @@ export default {
}
},
watch: {
energyWeekTrend: {// 监听时间变化，更新图
energyWeekTrend: {// 监听周电能，更新图
handler(newVal, oldVal) {
if (this.chartTime === '周' && this.chartType === '电耗能') {
this.updateChart()
}
}
},
energyMonthTrend: {// 监听时间变化，更新图
energyMonthTrend: {// 监听月电能，更新图
handler(newVal, oldVal) {
if (this.chartTime === '月' && this.chartType === '电耗能') {
this.updateChart()
}
}
},
energyYearTrend: {// 监听时间变化，更新图
energyYearTrend: {// 监听年电能，更新图
handler(newVal, oldVal) {
if (this.chartTime === '年' && this.chartType === '电耗能') {
this.updateChart()
}
}
},
gasChartMsg: {// 监听天然气，更新图
handler(newVal, oldVal) {
if (this.chartType === '天然气I' || this.chartType === '天然气II') {
this.updateChart()
}
}
},
chartTime: {// 监听时间变化，更新图
handler(newVal, oldVal) {
this.updateChart()
@@ -114,33 +121,27 @@ export default {
break;
}
case '天然气I':{
yData = this.gasChartMsg.hisSumGas1 || []
if (this.chartTime === '周') {
yData = this.gasChartMsg.hisSumGas1For7Day || []
}else if(this.chartTime === '月') {
yData = this.gasChartMsg.sumGas1ForMonth || []
}else{
yData = this.gasChartMsg.sumGas1ForYear || []
}
gasName = '天然气I'
xData = Array(7)
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;
})
.reverse()
xData = this.getXdata()
break;
}
default:
gasName = '天然气II'
yData = this.gasChartMsg.hisSumGas2 || []
xData = Array(7)
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;
})
.reverse()
if (this.chartTime === '周') {
yData = this.gasChartMsg.hisSumGas2For7Day || []
}else if(this.chartTime === '月') {
yData = this.gasChartMsg.sumGas2ForMonth || []
}else{
yData = this.gasChartMsg.sumGas2ForYear || []
}
xData = this.getXdata()
}
if (yData.length == 0) {
seriesData = []
@@ -177,7 +178,7 @@ export default {
this.chart = echarts.init(this.$el);
var option = {
color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 },
grid: { top: 32, right: 12, bottom: 20, left: 60 },
xAxis: {
type: 'category',
data: xData,
@@ -223,6 +224,40 @@ export default {
},
}
option && this.chart.setOption(option)
},
getXdata() {
const today = new Date();
const currentYear = today.getFullYear();
const currentMonth = today.getMonth() + 1;
let days = 30;
if (this.chartTime === '周') {
return Array(7)
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;}).reverse()
}else if (this.chartTime == "月") {
if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
days = 31;
} else if (currentMonth == 2) {
days = this.isLeapYear(currentYear) ? 29 : 28;
}
return Array(days)
.fill(1)
.map((_, index) => {
return `${currentMonth}.${days - index}`;}).reverse()
} else {
return Array(12)
.fill(1)
.map((_, index) => {
return `${currentYear}.${12 - index}`;}).reverse()
}
},
isLeapYear(year) {
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
}
},
};

204
src/views/databoard/components/NumRateChart.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<div class="num-rate-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'NumRateChart',
mixins: [resize],
data() {
return {
chart: null
}
},
computed: {
productline() {
return this.$store.state.websocket.productline
}
},
watch:{
productline: {
handler(newVal, oldVal) {
if (newVal === oldVal) {
return false
}
this.updateChart()
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
let xData = []
let outputNum = []
let passRate = []
this.productline && this.productline.length > 0 && this.productline.map(item => {
xData.push(itme.productionLineId)
outputNum.push(itme.outputNum)
passRate.push(item.passRate)
})
var option = {
grid: { top: 32, right: 60, bottom: 20, left: 60 },
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "num-rate-chart-tooltip"
},
legend: {
data: ['产线产量', '合格率'],
textStyle: {
color: "#DFF1FE",
fontSize: 12,
}
},
xAxis: [
{
type: 'category',
data: ['Y61', 'Y62', 'Y63', 'Y64', 'Y65', 'Y66', 'Y67'],
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisPointer: {
type: 'shadow'
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
},
}
],
yAxis: [
{
type: 'value',
name: '产量/片',
// min: 0,
// max: 250,
// interval: 50,
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: '{value}'
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
},
}
},
{
type: 'value',
name: '良品率',
min: 0,
max: 25,
interval: 5,
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: '{value} %'
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
},
}
}
],
series: [
{
name: '产线产量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5CB7FF' },
{ offset: 1, color: '#364BFE' }
])
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: '合格率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '%';
}
},
itemStyle: {
color: '#FFD160'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFCB59' + "40" },
{ offset: 0.5, color: '#FFCB59' + "20" },
{ offset: 1, color: '#FFCB59' + "00" },
]),
},
lineStyle: {
width: 1
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
option && this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.num-rate-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.num-rate-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.num-rate-chart-tooltip * {
color: #fff !important;
}
</style>