驾驶舱修改
This commit is contained in:
parent
cbc7cbc574
commit
bdd14eec70
@ -1,234 +1,258 @@
|
||||
<template>
|
||||
<div style="height: 370px;">
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
<div style="height: 370px">
|
||||
<NotMsg v-show="notMsg" />
|
||||
<div
|
||||
id="numRateChart"
|
||||
class="num-rate-chart"
|
||||
style="width: 900px; height: 420px"
|
||||
v-show="!notMsg"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
import resize from './../mixins/resize';
|
||||
import NotMsg from './../components/NotMsg';
|
||||
export default {
|
||||
name: 'NumRateChart',
|
||||
mixins: [resize],
|
||||
components:{ NotMsg },
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
notMsg:true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
productline() {
|
||||
return this.$store.state.websocket.productline
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
productline: {
|
||||
name: 'NumRateChart',
|
||||
mixins: [resize],
|
||||
components: { NotMsg },
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
notMsg: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
productline() {
|
||||
return this.$store.state.websocket.productline;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
productline: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal === oldVal) {
|
||||
return false
|
||||
}
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (newVal === oldVal) {
|
||||
return false;
|
||||
}
|
||||
this.updateChart();
|
||||
this.$emit('emitFun');
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.updateChart()
|
||||
this.updateChart();
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (this.productline && this.productline.length > 0) {
|
||||
this.notMsg = false
|
||||
} else {
|
||||
this.notMsg = true
|
||||
return
|
||||
}
|
||||
let xData = []
|
||||
let outputNum = []
|
||||
let passRate = []
|
||||
this.productline && this.productline.length > 0 && this.productline.map(item => {
|
||||
if ((item.lineName).includes('D')) {
|
||||
xData.push(item.lineName)
|
||||
outputNum.push(item.outputNum)
|
||||
passRate.push(item.passRate?item.passRate*100:null)
|
||||
}
|
||||
})
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById('numRateChart'));
|
||||
var option = {
|
||||
grid: { top: 82, right: 60, bottom: 20, left: 90 },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
className: "num-rate-chart-tooltip"
|
||||
},
|
||||
legend: {
|
||||
itemWidth:10,
|
||||
itemHeight:10,
|
||||
top: '2.5%',
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (this.productline && this.productline.length > 0) {
|
||||
this.notMsg = false;
|
||||
} else {
|
||||
this.notMsg = true;
|
||||
return;
|
||||
}
|
||||
let xData = [];
|
||||
let outputNum = [];
|
||||
let passRate = [];
|
||||
for (let i = 0; i < this.productline.length - 1; i++) {
|
||||
// 二次循环，注意：再减去外层的循环次数，向后依次两两相互比较转换；
|
||||
for (let j = 0; j < this.productline.length - i - 1; j++) {
|
||||
// 当前一个值大于后一个值
|
||||
if (
|
||||
this.productline[j].lineName.substr(
|
||||
this.productline[j].lineName.length - 1,
|
||||
1
|
||||
) >
|
||||
this.productline[j + 1].lineName.substr(
|
||||
this.productline[j + 1].lineName.length - 1,
|
||||
1
|
||||
)
|
||||
) {
|
||||
// 定义变量，以赋值的形式前后交换，直到换到最小的在前面，左右再无比较，则循环结束形成排序结果
|
||||
let temp = this.productline[j];
|
||||
this.productline[j] = this.productline[j + 1];
|
||||
this.productline[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.productline &&
|
||||
this.productline.length > 0 &&
|
||||
this.productline.map((item) => {
|
||||
if (item.lineName.includes('D')) {
|
||||
xData.push(item.lineName);
|
||||
outputNum.push(item.outputNum);
|
||||
passRate.push(item.passRate);
|
||||
}
|
||||
});
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById('numRateChart'));
|
||||
var option = {
|
||||
grid: { top: 82, right: 60, bottom: 20, left: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
className: 'num-rate-chart-tooltip',
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
top: '2.5%',
|
||||
right: '20px',
|
||||
icon: 'rect',
|
||||
data: [
|
||||
{name:'产线产量',itemStyle:{color:'#364BFE'}},
|
||||
{name:'良品率',itemStyle:{color:'#FFCB59'}}
|
||||
],
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '产量/片',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: '{value}'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#213259a0",
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '良品率',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'LEFT',
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: () =>{
|
||||
return value ? '{value} %': '-'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#213259a0",
|
||||
},
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '产线产量',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#5CB7FF' },
|
||||
{ offset: 1, color: '#364BFE' }
|
||||
])
|
||||
},
|
||||
data: outputNum
|
||||
},
|
||||
{
|
||||
name: '良品率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value?value + '%':'-';
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FFD160'
|
||||
},
|
||||
areaStyle: {
|
||||
icon: 'rect',
|
||||
data: [
|
||||
{ name: '产线产量', itemStyle: { color: '#364BFE' } },
|
||||
{ name: '良品率', itemStyle: { color: '#FFCB59' } },
|
||||
],
|
||||
textStyle: {
|
||||
color: '#DFF1FE',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '产量/片',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259a0',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '良品率',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'LEFT',
|
||||
},
|
||||
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: 20,
|
||||
itemStyle: {
|
||||
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
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
data: passRate
|
||||
}
|
||||
]
|
||||
};
|
||||
option && this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
{ offset: 0, color: '#5CB7FF' },
|
||||
{ offset: 1, color: '#364BFE' },
|
||||
]),
|
||||
},
|
||||
data: outputNum,
|
||||
},
|
||||
{
|
||||
name: '良品率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value ? 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,
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
data: passRate,
|
||||
},
|
||||
],
|
||||
};
|
||||
option && this.chart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.num-rate-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: -50px;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.num-rate-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.num-rate-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
.num-rate-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.num-rate-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,66 +1,83 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="各工序缺陷汇总" size="middle" style="">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<Container
|
||||
name="各工序缺陷汇总"
|
||||
size="middle"
|
||||
style="">
|
||||
<TimePrompt
|
||||
class="timeShow"
|
||||
:timestr="timestr" />
|
||||
<div style="padding: 5px 10px">
|
||||
<dv-scroll-board
|
||||
:config="config"
|
||||
style="width: 575px; height: 380px"
|
||||
ref="defectScrollBoard" />
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils'
|
||||
import { switchShowTime } from '../utils';
|
||||
export default {
|
||||
name: 'DefectSum',
|
||||
components: { Container, TimePrompt },
|
||||
computed: {
|
||||
defectSum() {
|
||||
return this.$store.state.websocket.defectSum
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timestr: '',
|
||||
config: {
|
||||
header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60],
|
||||
align: ['center'],
|
||||
data: [],
|
||||
// data: [[1, 'Y61', '破损','10','气泡']],
|
||||
rowNum: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime('日')
|
||||
},
|
||||
watch:{
|
||||
defectSum: {
|
||||
name: 'DefectSum',
|
||||
components: { Container, TimePrompt },
|
||||
computed: {
|
||||
defectSum() {
|
||||
return this.$store.state.websocket.defectSum;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timestr: '',
|
||||
config: {
|
||||
header: ['序号', '产线', '工序', '损耗片数', '缺陷类型'],
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60],
|
||||
align: ['center'],
|
||||
data: [
|
||||
//假数据
|
||||
[1, 'D61', '成型', '3片', '细长泡'],
|
||||
[2, 'D62', '组合落板', '4片', '细长泡'],
|
||||
[3, 'D61', '磨边', '6片', '开口泡'],
|
||||
[4, 'D63', '清洗', '5片', '结石'],
|
||||
[5, 'D64', '打孔', '2片', '结石'],
|
||||
[6, 'D63', '成型', '7片', '开口泡'],
|
||||
[7, 'D61', '上片', '8片', '结石'],
|
||||
],
|
||||
// data: [],
|
||||
rowNum: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime('日');
|
||||
},
|
||||
watch: {
|
||||
defectSum: {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.defectSum.map((item, index) => [
|
||||
index+1,
|
||||
item.productionLineName,
|
||||
item.sectionName,
|
||||
item.count,
|
||||
item.inspectionTypeName
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['defectScrollBoard'].updateRows(outArr)
|
||||
this.timestr = switchShowTime('日')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let outArr = this.defectSum.map((item, index) => [
|
||||
index + 1,
|
||||
item.productionLineName,
|
||||
item.sectionName,
|
||||
item.count,
|
||||
item.inspectionTypeName,
|
||||
]);
|
||||
this.config.data = outArr;
|
||||
this.$refs['defectScrollBoard'].updateRows(outArr);
|
||||
this.timestr = switchShowTime('日');
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 240px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 240px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user