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