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

驾驶舱修改 #317

Merged
juzi merged 1 commits from projects/mesxc-zjl into projects/mesxc-test 2024-04-08 16:39:31 +08:00
Conversation 0 Commits 1 Files Changed 2 +308 -267
2 changed files with 308 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

125
src/views/databoard/deepProcessing/DefectSum.vue
View File

@ -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>