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

驾驶舱提测ui

Browse Source
This commit is contained in:
朱菊兰
2024-01-11 13:44:38 +08:00
parent b1458827f1
commit 6c02990cb5
20 changed files with 441 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/databoard/components/DefectChart.vue
View File

@@ -1,19 +1,25 @@
<template>
<div class="defect-chart"></div>
<div>
<NotMsg v-show="notMsg"/>
<div id="defectChart" style="width:600px;height:238px;" v-show="!notMsg"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
name: 'DefectChart',
mixins: [resize],
components:{ NotMsg },
props: {
chartTime: ''
},
data() {
return {
chart: null,
tempData: []
tempData: [],
notMsg:false
}
},
computed: {
@@ -65,6 +71,26 @@ export default {
this.updateChart()
}
}
},
chartTime: {// 监听类型变化，更新图
handler(newVal, oldVal) {
switch(this.chartTime){
case '日':
this.tempData = this.israDayStatistic
break;
case '周':
this.tempData = this.israWeekStatistic
break;
case '月':
this.tempData = this.israMonthStatistic
break;
case '年':
this.tempData = this.israYearStatistic
break;
default:
}
this.updateChart()
}
}
},
mounted() {
@@ -75,6 +101,12 @@ export default {
},
methods: {
updateChart() {
if (!this.tempData || this.tempData.length == 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if (
this.chart !== null &&
this.chart !== '' &&
@@ -82,7 +114,7 @@ export default {
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
this.chart = echarts.init(document.getElementById('defectChart'));
let xData = []
let seriesData = []
for (let i = 0;i < this.israCheckType.length; i++) {
@@ -95,12 +127,23 @@ export default {
obj.name = this.israCheckType[i]
obj.barWidth = 12
obj.data = []
obj.labe = {
show: true,
position: 'inside',
distance: 10,
color: "red"
}
for (let j = 0;j < this.tempData.length; j++) {
let num = 0
for (let k = 0; k < this.tempData[j].data.length; k++) {
if (this.israCheckType[i] === this.tempData[j].data[k].checkType) {
obj.data.push(this.tempData[j].data[k].checkNum)
num++
}
}
if (num === 0) {
obj.data.push(0)
}
}
seriesData.push(obj)
}
@@ -110,10 +153,10 @@ export default {
})
var option = {
color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
grid: { top: 80, right: 12, bottom: 20, left: 48 },
grid: { top: 90, right: 12, bottom: 20, left: 70 },
legend: {
top: 10,
left: 80,
top: 0,
left: 100,
padding: 5,
itemWidth: 12,
itemHeight: 12,
@@ -179,12 +222,6 @@ export default {
}
}
</script>
<style scoped lang="scss">
.defect-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.defect-chart-tooltip {
background: #0a2b4f77 !important;

40
src/views/databoard/components/DefectClassChart.vue
View File

@@ -1,18 +1,24 @@
<template>
<div class="defect-class-chart"></div>
<div>
<NotMsg v-show="notMsg"/>
<div id="defectClassChart" class="defect-class-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
name: 'DefectClassChart',
mixins: [resize],
components:{ NotMsg },
props: {
chartType: ''
},
data() {
return {
chart: null
chart: null,
notMsg:false
}
},
computed: {
@@ -43,6 +49,12 @@ export default {
},
methods: {
updateChart() {
if (!this.israDayStatistic || this.israDayStatistic.length == 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if (
this.chart !== null &&
this.chart !== '' &&
@@ -50,7 +62,7 @@ export default {
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
this.chart = echarts.init(document.getElementById('defectClassChart'));
let tempData = []
let xData = []
let yData = []
@@ -66,28 +78,14 @@ export default {
})
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'],
// },
grid: { top: 40, right: 12, bottom: 65, left: 70 },
xAxis: {
type: "category",
data: xData,
axisLabel: {
color: "#fffc",
fontSize: 12,
rotate: 45
rotate: 25
},
axisTick: { show: false },
axisLine: {
@@ -136,7 +134,9 @@ export default {
barWidth: 12,
label: {
show: true,
position: 'top'
position: 'top',
distance: 10,
color: "#fffc"
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

32
src/views/databoard/components/EnergeMonitoringChart.vue
View File

@@ -1,15 +1,21 @@
<template>
<div class="energe-monitoring-chart"></div>
<div>
<NotMsg v-show="notMsg"/>
<div id="energeMonitoringChart" class="energe-monitoring-chart" style="width:900px;height:370px;" v-show='!notMsg'></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
name: 'EnergeMonitoringChart',
mixins: [resize],
components:{ NotMsg },
data() {
return {
chart: null
chart: null,
notMsg:true
}
},
computed: {
@@ -42,16 +48,22 @@ export default {
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
this.chart = echarts.init(document.getElementById('energeMonitoringChart'));
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 = {
if (yData.length === 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
var option = {
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
grid: { top: 32, right: 12, bottom: 20, left: 60 },
grid: { top: 32, right: 12, bottom: 20, left: 90 },
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -91,11 +103,13 @@ export default {
],
yAxis: [
{
name: '单位kwh',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
name: '单位',
// min: 0,
// max: 250,
// interval: 50,
axisLabel: {
color: "#fff",
fontSize: 12,

38
src/views/databoard/components/FlueGas.vue → src/views/databoard/components/FlueGasChart.vue
View File

@@ -1,15 +1,19 @@
<template>
<div class="gas-chart"></div>
<div>
<NotMsg v-show="notMsg"/>
<div id='flueGasChart' class="flue-gas-chart" style="width:600px;height:250px;" v-show='!notMsg'></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
name: 'GasChart',
name: 'FlueGasChart',
mixins: [resize],
components: {},
components:{ NotMsg },
props: {
chartType: '',
chartTime: ''
@@ -26,7 +30,8 @@ export default {
'#2aa1ff',
];
return {
chart: null
chart: null,
notMsg:false
};
},
computed: {
@@ -136,7 +141,13 @@ export default {
}
default:
}
temp2.length > 0 && temp2.map(i => {
if (temp2.length === 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
temp2.map(i => {
xData.push(i.time)
yData.push(i.value)
})
@@ -172,7 +183,7 @@ export default {
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chart = echarts.init(this.$el);
this.chart = echarts.init(document.getElementById('flueGasChart'));
var option = {
color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 },
@@ -192,7 +203,7 @@ export default {
},
},
yAxis: {
name: '单位m³/h',
name: this.chartType === '氧气含量' ? '单位%':'单位mg/m³',
nameTextStyle: {
color: '#fff',
fontSize: 10,
@@ -218,6 +229,7 @@ export default {
series: seriesData,
tooltip: {
trigger: 'axis',
className: "gas-chart-tooltip"
},
}
option && this.chart.setOption(option)
@@ -227,8 +239,18 @@ export default {
</script>
<style scoped lang="scss">
.gas-chart {
.flue-gas-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.gas-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.gas-chart-tooltip * {
color: #fff !important;
}
</style>

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

@@ -1,22 +1,19 @@
<!--
filename: GasChart.vue
author: liubin
date: 2023-12-12 10:53:49
description:
-->
<template>
<div class="gas-chart"></div>
<div>
<NotMsg v-show="notMsg"/>
<div id='gasChart' class="gas-chart" style="width:600px;height:200px;" v-show='!notMsg'></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
name: 'GasChart',
mixins: [resize],
components: {},
components:{ NotMsg },
props: {
chartType: '', // 能源类型
chartTime: ''
@@ -33,7 +30,8 @@ export default {
'#2aa1ff',
];
return {
chart: null
chart: null,
notMsg:false
};
},
computed: {
@@ -143,6 +141,12 @@ export default {
}
xData = this.getXdata()
}
if (yData.length === 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if (yData.length == 0) {
seriesData = []
}else {
@@ -175,7 +179,7 @@ export default {
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chart = echarts.init(this.$el);
this.chart = echarts.init(document.getElementById('gasChart'));
var option = {
color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 60 },
@@ -195,7 +199,7 @@ export default {
},
},
yAxis: {
name: '单位m³/h',
name: this.chartType === '电耗能'?'单位kwh':'单位Nm³',
nameTextStyle: {
color: '#fff',
fontSize: 10,

93
src/views/databoard/components/ISRAChart.vue
View File

@@ -1,56 +1,28 @@
<template>
<div class="isra-chart"></div>
<div>
<NotMsg v-show="notMsg"/>
<div id="israChart" class="isra-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
name: 'ISRAChart',
mixins: [resize],
components: {},
components:{ NotMsg },
props: {},
data() {
return {
chart: null,
notMsg:true,
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
chartData: [],
option: {
tooltip: {
trigger: 'item',
},
legend: {
bottom: '3%',
left: 'center',
icon: 'circle',
textStyle: {
color: '#fff'
}
},
title: {
text: 0,
subtext: '总数',
top: '43%',
left: '49%',
textAlign: 'center',
textStyle: {
fontSize: 32,
lineHeight: 16,
color: '#fff',
},
subtextStyle: {
fontSize: 16,
color: '#fff00',
},
},
series: []
},
chartData: []
};
},
mounted() {
this.initChart();
},
activated() {
},
computed: {
@@ -61,23 +33,33 @@ export default {
watch: {
israChartMsg: {
handler(newVal, oldVal) {
this.chartData = newVal
this.chartData = newVal || []
this.updateChart()
}
}
},
methods: {
initChart() {
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
},
updateChart() {
console.log('update')
let num = 0
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
num+=i.num
})
this.chart.setOption({
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
if (this.chartData && this.chartData.length > 0) {
this.notMsg = false
} else {
this.notMsg = true
return
}
this.chart = echarts.init(document.getElementById('israChart'));
var option = {
title:{
text: num,
subtext: '总数',
@@ -94,6 +76,14 @@ export default {
color: '#fff00',
},
},
legend: {
bottom: '3%',
left: 'center',
icon: 'circle',
textStyle: {
color: '#fff'
}
},
series:[{
name: 'ISRA缺陷检测',
type: 'pie',
@@ -126,8 +116,13 @@ export default {
]
}
}
}))}]
})
}))}],
tooltip: {
trigger: 'item',
className: "isra-chart-tooltip"
},
}
this.chart.setOption(option);
}
},
};
@@ -139,3 +134,13 @@ export default {
height: 100%;
}
</style>
<style>
.isra-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.isra-chart-tooltip * {
color: #fff !important;
}
</style>

27
src/views/databoard/components/NotMsg.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="notmsg">暂无数据</div>
</template>
<script>
export default {
name: 'NotMsg',
components: {},
data() {
return {
};
},
computed: {
},
methods: {
},
};
</script>
<style scoped lang="scss">
.notmsg {
padding-top: 72px;
color: rgba(255, 255, 255, 0.4);
text-align: center;
font-size: 24px;
}
</style>

46
src/views/databoard/components/NumRateChart.vue
View File

@@ -1,15 +1,21 @@
<template>
<div class="num-rate-chart"></div>
<div>
<NotMsg v-show="notMsg"/>
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:370px;" v-show='!notMsg'></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
name: 'NumRateChart',
mixins: [resize],
components:{ NotMsg },
data() {
return {
chart: null
chart: null,
notMsg:true
}
},
computed: {
@@ -31,18 +37,16 @@ export default {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
this.updateChart()
},
methods: {
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
if (this.productline && this.productline.length > 0) {
this.notMsg = false
} else {
this.notMsg = true
return
}
this.chart = echarts.init(this.$el);
let xData = []
let outputNum = []
let passRate = []
@@ -51,6 +55,14 @@ export default {
outputNum.push(item.outputNum)
passRate.push(item.passRate*100)
})
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(document.getElementById('numRateChart'));
var option = {
grid: { top: 32, right: 60, bottom: 20, left: 60 },
tooltip: {
@@ -61,7 +73,7 @@ export default {
className: "num-rate-chart-tooltip"
},
legend: {
data: ['产线产量', '合格率'],
data: ['产线产量', '良品率'],
textStyle: {
color: "#DFF1FE",
fontSize: 12,
@@ -91,6 +103,11 @@ export default {
{
type: 'value',
name: '产量/片',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
axisLabel: {
color: "#fff",
fontSize: 12,
@@ -111,6 +128,11 @@ export default {
{
type: 'value',
name: '良品率',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'LEFT',
},
axisLabel: {
color: "#fff",
fontSize: 12,
@@ -148,7 +170,7 @@ export default {
data: outputNum
},
{
name: '合格率',
name: '良品率',
type: 'line',
yAxisIndex: 1,
tooltip: {

4
src/views/databoard/components/Switcher.vue
View File

@@ -49,10 +49,10 @@ export default {
.switcher {
:deep(.el-switch__core) {
border: none;
background-color:rgba(3, 35, 60, 1);
background-color:#02457e;
&::after {
background-color: #02457e;
background-color: #03233c;
}
}