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

projects/mes-lb #127

Merged
g7hoo merged 4 commits from projects/mes-lb into projects/mes-test 2023-11-29 13:41:28 +08:00
Conversation 0 Commits 4 Files Changed 5 +286 -32
2 changed files with 286 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6702521f31 - Show all commits

209
src/views/core/analysis/balanceAnalysis/chart.vue Normal file
View File

@ -0,0 +1,209 @@
<!--
filename: chart.vue
author: liubin
date: 2023-11-29 09:03:01
description:
-->
<template>
<div class="analysis-chart">
<!-- tt ct 选择 -->
<el-button
v-for="(item, index) in ['设备CT', '设备TT', '产线CT', '产线TT']"
:key="index"
:class="[index == activeIndex ? 'activeButton' : '']"
@click="activeIndex = index">
{{ item }}
</el-button>
<!-- chart -->
<div id="chart" ref="chartDiv" class="chart" style="margin-top: 12px" />
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'AnalysisChart',
components: {},
props: ['daterange', 'tableData'],
data() {
return {
activeIndex: 0,
chart: null,
templateOption: {
tooltip: {
trigger: 'axis',
},
legend: {
icon: 'roundRect',
itemWidth: 12,
itemHeight: 12,
},
grid: {
top: '12%',
left: '6%',
right: '6%',
bottom: '12%',
},
xAxis: {
name: '时间',
axisLabel: {
margin: 12,
rotate: -8,
},
axisTicks: {
show: false,
},
data: this.daterange || [
'2020-01-02',
'2020-02-02',
'2020-03-02',
'2020-04-02',
],
},
yAxis: {
// todo
name: '产线TT',
nameLocation: 'end',
nameGap: 28,
nameTextStyle: {
fontSize: 14,
align: 'right',
},
axisLine: {
show: true,
lineStyle: {
color: '#333',
opacity: 0.6,
},
},
},
series: [
{
name: 'der Hund',
type: 'line',
data: [15, undefined, 36, 11],
},
{
name: 'die Katze',
type: 'line',
data: [5, 2, 6, 3],
},
{
name: 'die Maus',
type: 'line',
data: [11, 12, 13, 10],
},
],
},
};
},
mounted() {
this.initChart();
},
deactivated() {},
watch: {
activeIndex(val) {
this.initChart(val);
},
},
methods: {
/**
*
* @param {object} row 表格的每一列
* @param {string} key 表格列prop的后缀
*/
getListFromTableRow(row, key = '_eq_ct') {
const list = [];
for (const prop of Object.keys(row).sort()) {
if (prop.endsWith(key)) {
list.push(row[prop]);
}
}
return list;
},
/** 初始化/设置 图表 */
initChart(val) {
console.log('tableData', this.tableData);
if (!this.chart) this.chart = echarts.init(this.$refs.chartDiv);
switch (val) {
case 0:
const eqCt = this.tableData.map((row) => ({
name: row.equName,
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: this.getListFromTableRow(row, '_eq_ct'),
}));
this.chart.setOption({ ...this.templateOption, series: eqCt });
break;
case 1:
const eqTt = this.tableData.map((row) => ({
name: row.equName,
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: this.getListFromTableRow(row, '_eq_tt'),
}));
this.chart.setOption({ ...this.templateOption, series: eqTt });
break;
case 2:
const plCt = this.tableData.map((row) => ({
name: row.equName,
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: this.getListFromTableRow(row, '_pl_ct'),
}));
this.chart.setOption({ ...this.templateOption, series: plCt });
break;
case 3:
const plTt = this.tableData.map((row) => ({
name: row.equName,
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: this.getListFromTableRow(row, '_pl_tt'),
}));
this.chart.setOption({ ...this.templateOption, series: plTt });
break;
default:
const eqCt2 = this.tableData.map((row) => ({
name: row.equName,
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: this.getListFromTableRow(row, '_eq_ct'),
}));
this.chart.setOption({ ...this.templateOption, series: eqCt2 });
}
},
},
};
</script>
<style scoped>
.analysis-chart {
width: 100%;
height: 100%;
}
.analysis-chart >>> .el-button {
background: #f1f1f1;
color: #333;
transition: all 0.3s;
border: none;
&.activeButton,
&:hover {
background: #0b58ff;
color: #fff;
}
}
#chart {
height: 100%;
/* background: #ccc; */
}
</style>

109
src/views/core/analysis/balanceAnalysis/index.vue
View File

@ -1,46 +1,56 @@
<template>
<div class="app-container">
<div class="app-container" style="flex: 1; height: 1px">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="handleSearchBarBtnClick" />
<!-- <div v-if="tableData.length"> -->
<el-tabs
v-model="activeName"
@tab-click="handleTabClick"
style="height: 100%">
<el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
<base-table
v-if="activeName == 'table' && ready"
:span-method="mergeRow"
:page="1"
:limit="999"
:table-props="tableProps"
:table-data="tableData" />
</el-tab-pane>
<el-tab-pane :label="'\u3000产线平衡分析图\u3000'" name="graph">
<div class="graph" style="height: 100%">
<!-- graph -->
<!-- <Graph
<div class="custom-tabs" style="">
<el-tabs
v-model="activeName"
@tab-click="handleTabClick"
style="height: 100%">
<el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
<base-table
v-if="activeName == 'table' && ready"
:span-method="mergeRow"
:page="1"
:limit="999"
:table-props="tableProps"
:table-data="tableData" />
<div v-if="tableData.length == 0" class="no-data-bg"></div>
</el-tab-pane>
<el-tab-pane :label="'\u3000产线平衡分析图\u3000'" name="graph">
<div class="graph" style="height: 800px">
<!-- graph -->
<AnalysisChart
v-if="activeName == 'graph'"
:table-data="tableData"
:daterange="dateArr"></AnalysisChart>
<!-- <div v-else class="no-data-bg"></div> -->
<!-- <Graph
v-if="list.length"
:equipment-list="list"
:render="renderKey" /> -->
<!-- <BalanceChart ref="lineChart" /> -->
<div v-if="list.length == 0" class="no-data-bg"></div>
</div>
</el-tab-pane>
</el-tabs>
<!-- <BalanceChart ref="lineChart" /> -->
<!-- <div v-if="list.length == 0" class="no-data-bg"></div> -->
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import BalanceChart from '../balanceChart';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import AnalysisChart from './chart.vue';
export default {
components: {
BalanceChart,
AnalysisChart,
},
mixins: [basicPageMixin],
data() {
@ -97,6 +107,8 @@ export default {
lastSection: null,
currRowIndex: 0,
spanArr: [],
// 保存时间列表
dateArr: [],
ready: false,
};
},
@ -157,13 +169,18 @@ export default {
await this.buildProps(nameData);
await this.buildTableData(data);
this.tableData = this.tableData.sort((a, b) => {
if (a.sectionName < b.sectionName) return 1;
return -1;
if (a.sectionName < b.sectionName) return -1;
return 1;
});
// const p = this.tableProps
// const d = this.tableData
// debugger;
this.ready = true;
},
buildProps(nameData) {
this.initTableProps();
this.dateArr = [];
return new Promise((resolve, reject) => {
try {
const dateArr = Array.from(
@ -202,7 +219,7 @@ export default {
],
});
});
this.dateArr = dateArr;
resolve();
} catch (err) {
reject(err);
@ -211,19 +228,24 @@ export default {
},
async buildTableData(data) {
this.tableData = [];
const sectionArr = Array.from(
new Set(data.map((item) => item.sectionName))
).sort();
this.sectionMap = sectionArr.reduce(
const sectionMap = sectionArr.reduce(
(sum, curr) => ({ ...sum, [curr]: 0 }),
{}
);
this.spanArr = Array.from(sectionArr, () => 0);
console.log('sectionArr', sectionArr);
console.log('sectionMap', sectionMap);
let spanArr = Array.from(sectionArr, () => 0);
return new Promise((resolve, reject) => {
/** 处理 工段 分组 */
data.map((item) => {
this.sectionMap[item.sectionName]++;
sectionMap[item.sectionName]++;
/** 处理 设备 */
const row = {
equName: item.equName,
@ -246,13 +268,16 @@ export default {
});
/** 生成span数组 */
const tmp = [0];
const tmp = [...spanArr];
for (const [index, key] of sectionArr.entries()) {
tmp[index + 1] = tmp[index] + this.sectionMap[key];
tmp[index + 1] = tmp[index] + sectionMap[key];
}
console.log('tep', tmp);
this.spanArr = tmp;
spanArr = tmp;
this.sectionMap = sectionMap;
this.spanArr = spanArr;
resolve();
});
},
@ -407,3 +432,23 @@ export default {
},
};
</script>
<style scoped>
.custom-tabs >>> .el-tabs__header {
margin-bottom: 8px;
display: inline-block;
transform: translateY(-12px);
}
.custom-tabs >>> .el-tabs__item {
padding-left: 0px !important;
padding-right: 0px !important;
line-height: 36px !important;
height: 36px;
}
.custom-tabs >>> .el-tabs__content {
height: calc(100% - 42px);
}
.custom-tabs >>> .el-tab-pane {
height: 100%;
}
</style>